Merge pull request #452 from BipinKalra/events-page-updates

Events page updates

Author: BipinKalra

examples/views/live-classes-course-page-new.hbs

@@ -24,7 +24,16 @@
       </div>
     </div>
     <div class="row no-gutters align-items-center justify-content-between">
-      <h4 class="bold">Batch Starts 1st June 2020</h4>
+      <div class="col-xl-8 col-sm-6">
+        <div class="bold backdrop font-mds v-align-ma mb-xl-0 mb-5">
+          <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/user-white.svg" class="mr-2tea">
+          Enrollment through Selection process only
+        </div>
+        <div class="bold backdrop font-mds v-align-ma ml-xl-5 mb-md-0 mb-5">
+          <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/group-white.svg" class="mr-2">
+          50 Students
+        </div>
+      </div>
       <div class="d-inline-flex align-items-center">
         <span class="font-mdxl bold">&#8377;&nbsp;12499</span>
         <span class="font-xl bold del-text-grey pl-3"><del>&#8377;&nbsp;18999</del></span>
@@ -168,6 +177,32 @@
     </div>
 
     <div class="col-lg-4 mb-lg-0 mb-5">
+      <div class="br-10 overflow-hidden white mb-5">
+        <div class="row no-gutters align-items-center bg-gradient-green px-lg-5 px-4 py-4">
+          <div class="round s-60x60 border b-white border-2 all-center" style="background: inherit;">
+            <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/master-tropgy.svg">
+          </div>
+          <div class="flex-1 pl-4">
+            <div class="card-md mb-1">
+              Get free access to
+            </div>
+            <div class="bold">
+              Master Interview Questions for FAANG & Product Companies
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="border-card p-lg-5 p-4 bg-gradient-orange white position-relative mb-5">
+        <div class="font-md bold">Selection Tests</div>
+        <div class="card-md mt-1">Choose your preffered Test Date</div>
+        <div class="mt-5">
+          <button class="button-dashed button-white">25th July</button>
+          <button class="button-solid orange button-white ml-xl-3 ml-lg-2 ml-4">31st July</button>
+        </div>
+        <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/victory.svg" class="victory-vector">
+      </div>
+
       <div class="border-card p-lg-5 p-4 bg-gradient-orange mb-5 white">
         <div class="row no-gutters align-items-center justify-content-between pb-3 border-bottom">
           <div class="font-md bold">Selection Test</div>
@@ -193,6 +228,7 @@
           </div>
         </div>
       </div>
+
       <div class="border-card p-lg-5 p-4 b-orange mb-5">
         <div class="font-mds bold">
           Timeline
@@ -232,6 +268,19 @@
           </div>
         </div>
       </div>
+
+      <div class="border-card bg-grey px-lg-5 px-4 py-4 mb-5">
+        <div class="row no-gutters align-items-center">
+          <div class="all-center round bg-white s-50x50">
+            <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/phone-gradient-orange.svg">
+          </div>
+          <div class="flex-1 pl-4">
+            In case of any query/doubt, please contact
+            <strong>9999579111 or 9999579222</strong>
+          </div>
+        </div>
+      </div>
+
       <div class="border-card b-orange p-4 mb-4">
         <div class="row justify-content-between align-items-center no-gutters">
           <div class="flex-1 pr-3">

sass/styles/_components.scss

@@ -14,4 +14,5 @@
 @import "components/img-review-card.scss";
 @import "components/events-page.scss";
 @import "components/label-card.scss";
-@import "components/indicator.scss";
+@import "components/indicator.scss";
+@import "components/backdrop.scss";

sass/styles/components/backdrop.scss

@@ -0,0 +1,19 @@
+.backdrop {
+  z-index: 1;
+  position: relative;
+  display: inline-block;
+  margin: 0 1.5rem;
+
+  &:before {
+    content: "";
+    z-index: 0;
+    position: absolute;
+    height: calc(100% + 2rem);
+    width: calc(100% + 3rem);
+    left: -1.5rem;
+    top: -1rem;
+    border-radius: 10px;
+    background: $light-grey;
+    opacity: 0.3;
+  }
+}

sass/styles/components/live-classes.scss

@@ -56,4 +56,10 @@
       }
     }
   }
+
+  .victory-vector {
+    position: absolute;
+    bottom: 2rem;
+    right: 2rem;
+  }
 }

sass/styles/objects/buttons.scss

@@ -128,6 +128,16 @@
     }
   }
 
+  &.button-white {
+    border: solid 1px $white;
+    color: $white;
+
+    &:hover {
+      background: $white;
+      color: $dark-grey !important;
+    }
+  }
+
   &.disabled,
   &:disabled {
     border-color: $faded-text !important;