course page main card

Author: BipinKalra

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

@@ -1,22 +1,34 @@
 <div class="px-md-5 px-4 live-courses">
   <div class="border-card p-md-5 p-4 bg-gradient-cyan coursepage-card white">
-    <div class="bold" style="font-size: 2.85rem;">Master DS and Algo with C++</div>
-    <div class="mt-4 font-lg">Start from Basics, become a C++ Master!</div>
+    <div class="row no-gutters justify-content-between">
+      <div class="col-sm-8 order-sm-1 order-2">
+        <div class="bold" style="font-size: 2.85rem;">Master DS and Algo with C++</div>
+        <div class="mt-4 font-lg">Start from Basics, become a C++ Master!</div>
+      </div>
+      <div class="order-sm-2 order-1 mb-sm-0 mb-3">
+        <img src="https://minio.codingblocks.com/amoeba/e5171581-41d8-46f5-97bf-c47db8214f22.png"
+          class="round border b-white border-2 s-130x130">
+      </div>
+    </div>
     <div class="my-5">
       <div class="mentor-row d-flex align-items-center">
         <div class="mentor-row__image-container">
           <img src="https://minio.codingblocks.com/amoeba/4078be4e-72e1-451a-9c4e-9223d2bbcc2c"
             alt="photo ofRishab Kapoor" class="mentor-row__image-container__mentor-image s-60x60">
           <img src="https://minio.codingblocks.com/amoeba/27d05ebd-4820-4abf-a5f5-0846676bac48"
             alt="photo ofGarima Chhikara" class="mentor-row__image-container__mentor-image s-60x60"></div>
-        <div class="pl-3">
-          <div class="card-md font-normal">Instructors</div>
-          <div class="bold">Rishab Kapoor, Garima Chhikara</div>
+        <div class="mentor-row__text-container">
+          <div class="font-md">Instructors</div>
+          <h4 class="bold">Rishab Kapoor, Garima Chhikara</h4>
         </div>
       </div>
     </div>
     <div class="row no-gutters align-items-center justify-content-between">
       <h4 class="bold">Batch Starts 1st June 2020</h4>
+      <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>
+      </div>
     </div>
   </div>
 </div>

sass/styles/components/live-classes.scss

@@ -59,5 +59,14 @@
 
   .coursepage-card {
     position: relative;
+
+    &__logo {
+      position: absolute;
+      width: 130px;
+      height: 130px;
+      border: solid 2px $white;
+      border-radius: 50%;
+      right: 0;
+    }
   }
 }

sass/styles/objects/card.mentors.scss

@@ -113,4 +113,9 @@
       }
     }
   }
+
+  &__text-container {
+    flex: 1;
+    padding-left: 0.5rem;
+  }
 }

sass/styles/settings/settings.color.scss

@@ -34,6 +34,7 @@ $light-grey: #f3f3f3;
 $grey: #a2a4a8;
 $dark-grey: #666;
 $border-grey: #2b2f37;
+$del-text-grey: #e7dddd;
 
 $facebook: #3b5998;
 $google: #f4695a;
@@ -205,6 +206,7 @@ $text-color-list: (
   "pink": $dcb-pink,
   "med-grey": $faded-text,
   "dark-grey": $dark-grey,
+  "del-text-grey": $del-text-grey 
 );
 
 //Gradient Text Colors

sass/styles/utilities/border.scss

@@ -8,7 +8,7 @@
 }
 
 .border-2 {
-  border-width: 2px;
+  border-width: 2px !important;
 }
 
 @each $direction in ('top', 'right', 'bottom', 'left') {