event page updates

Author: BipinKalra

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

@@ -168,6 +168,70 @@
     </div>
 
     <div class="col-lg-4 mb-lg-0 mb-5">
+      <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>
+          <div>
+            <div class="bold" style="font-size: 2rem;">01</div>
+            <div class="font-sm bold">
+              AUG
+            </div>
+          </div>
+        </div>
+        <div class="py-4 border-bottom">
+          <div class="card-md">
+            This amount will be reduced from the total course price upon your successful enrollment.
+          </div>
+          <div class="card-md mt-3">
+            All the non selected students will get a refund of Rs 1000
+          </div>
+        </div>
+        <div class="mt-4">
+          <div class="row no-gutters justify-content-between align-items-center">
+            <div class="font-mds bold">1000</div>
+            <div class="button-solid button-white orange">Pre Book Now</div>
+          </div>
+        </div>
+      </div>
+      <div class="border-card p-lg-5 p-4 b-orange mb-5">
+        <div class="font-mds bold">
+          Timeline
+        </div>
+        <div class="border-left mt-5" style="padding-left: 1.5rem;">
+          <div class="position-relative mb-4">
+            <div class="card-md">
+              Pre Booking Starts on
+              <br />
+              <strong>25th July</strong>
+            </div>
+            <div class="indicator">&#8226;</div>
+          </div>
+          <div class="position-relative mb-4">
+            <div class="card-md">
+              Pre Booking Starts on
+              <br />
+              <strong>25th July</strong>
+            </div>
+            <div class="indicator">&#8226;</div>
+          </div>
+          <div class="position-relative mb-4">
+            <div class="card-md">
+              Pre Booking Starts on
+              <br />
+              <strong>25th July</strong>
+            </div>
+            <div class="indicator">&#8226;</div>
+          </div>
+          <div class="position-relative">
+            <div class="card-md">
+              Pre Booking Starts on
+              <br />
+              <strong>25th July</strong>
+            </div>
+            <div class="indicator">&#8226;</div>
+          </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

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

sass/styles/components/indicator.scss

@@ -0,0 +1,10 @@
+.indicator {
+  position: absolute;
+  top: -5%;
+  left: -2.10rem;
+  font-size: 2rem;
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+  background-clip: text;
+  background-image: $gradient-orange;
+}