new 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,14 @@
     </div>
 
     <div class="col-lg-4 mb-lg-0 mb-5">
+      <div class="border-card p-lg-5 p-4 bg-gradient-orange white position-relative">
+        <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 mr-3">31st July</button>
+        </div>
+      </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>

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;
+  }
+}