new card-mentor css

Author: BipinKalra

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

@@ -0,0 +1,22 @@
+<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="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>
+      </div>
+    </div>
+    <div class="row no-gutters align-items-center justify-content-between">
+      <h4 class="bold">Batch Starts 1st June 2020</h4>
+    </div>
+  </div>
+</div>

sass/styles/components/live-classes.scss

@@ -56,4 +56,8 @@
       }
     }
   }
+
+  .coursepage-card {
+    position: relative;
+  }
 }

sass/styles/objects/card.mentors.scss

@@ -89,3 +89,28 @@
     }
   }
 }
+
+.mentor-row {
+  display: flex;
+  align-items: center;
+
+  &__image-container {
+    display: flex;
+
+    &__mentor-image {
+      border-radius: 50%;
+      background-color: $card-mentor;
+      border: 1px solid $white;
+
+      @for $i from 0 through 2 {
+        &:nth-child(#{$i + 1}) {
+
+          z-index: 100 - $i;
+          -ms-transform: translateX(multiply-px($i, -37%));
+          -webkit-transform: translateX(multiply-px($i, -37%));
+          transform: translateX(multiply-px($i, -37%));
+        }
+      }
+    }
+  }
+}

sass/styles/utilities/width-x-height.scss

@@ -1,4 +1,4 @@
-@for $i from 1 through 12 {
+@for $i from 1 through 15 {
   $width: ($i * 10px);
   $height: ($i * 10px);