mini cards

Author: BipinKalra

examples/views/events-page.hbs

@@ -122,11 +122,47 @@
     </div>
   </div>
   <div class="events-page__section">
-    <div class="row no-gutters justify-content-between align-items-center">
+    <div class="row no-gutters justify-content-between align-items-center mb-5">
       <div class="flex-1">
         <h2 class="bold">Upcoming Workshops and Contests</h2>
       </div>
       <button class="button-solid button-orange">View All</button>
     </div>
-  </div>
-</div>
+    <div class="row">
+      <div class="col-4 pt-5">
+        <div class="br-10 label-card">
+          <div class="br-10 label-card__head">
+            <div class="label-card__label all-center">
+              <div class="white bold">LIVE WEBINAR</div>
+            </div>
+            <img
+              src="https://previews.123rf.com/images/baranq/baranq1603/baranq160300758/53954805-businessman-portrait.jpg" class="label-card__head__cover">
+          </div>
+          <div class="br-10 label-card__foot px-md-5 px-4">
+            <div class="label-card__foot__tag s-100x100">
+              <div class="t-align-c">
+                <div class="font-mdxl bold gradient-text-orange">10</div>
+                <div class="bold">SEPT</div>
+              </div>
+            </div>
+            <h4 class="bold">Machine Learning</h4>
+            <div class="mt-1">Face Recognition</div>
+            <div class="mentor-row my-4">
+              <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">
+                <div class="mentor-row__text-container">
+                  <div>By</div>
+                  <div class="bold">Rishab Kapoor</div>
+                </div>
+              </div>
+            </div>
+            <div class="row no-gutters justify-content-between align-items-center">
+              <div class="font-sm">7:30 Onwards</div>
+              <button class="button-solid button-orange">Register</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>

examples/views/index.hbs

@@ -53,6 +53,7 @@
 <div class="row p-3"><a target="preview" href="items-card.html">items-card</a></div>
 <div class="row p-3"><a target="preview" href="my-order.html">my-order</a></div>
 <div class="row p-3"><a target="preview" href="new-checkout.html">new-checkout</a></div>
+<div class="row p-3"><a target="preview" href="events-page.html">events-page</a></div>
 <div class="row p-3"><a target="preview" href="form-input.html">form-input</a></div>
 <div class="row p-3"><a target="preview" href="hb-author-card.html">hb-author-card</a></div>
 <div class="row p-3"><a target="preview" href="hb-landing.html">hb-landing</a></div>

sass/styles/_components.scss

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

sass/styles/components/label-card.scss

@@ -0,0 +1,45 @@
+.label-card {
+  &__head {
+    height: 225px;
+    position: relative;
+    background: $gradient-orange;
+
+    &__cover {
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+      object-fit: cover;
+    }
+  }
+
+  &__label {
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    background: $gradient-orange;
+    position: absolute;
+    height: 40px;
+    width: 55%;
+    top: -40px;
+    left: 22.5%;
+  }
+
+  &__foot {
+    border: 1px solid $search-box-color;
+    margin-top: -15px;
+    background: $white;
+    position: relative;
+    padding-top: 3.8rem;
+    padding-bottom: 3rem;
+
+    &__tag {
+      position: absolute;
+      background: $white;
+      top: -50px;
+      right: 7.5%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid $orange;
+      border-radius: 50%;
+    }
+  }
+}

sass/styles/objects/card.mentors.scss

@@ -92,7 +92,7 @@
 
 .mentor-row {
   display: flex;
-  align-items: center;
+  align-items: center !important;
 
   &__image-container {
     display: flex;