upgrade modal small

Author: BipinKalra

examples/views/online-cb/upgrade-modal-small.hbs

@@ -0,0 +1,64 @@
+<div class="row no-gutters">
+  <div class="col-lg-4 col-10">
+    <div class="upgrade-modal">
+      <div class="bg-gradient-dpurple px-md-5 px-4 py-4 position-relative">
+        <div class="row no-gutters align-items-center">
+          <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/upgrade.svg">
+          <div class="flex-1 pl-4">
+            <h2 class="bold gradient-text-green">Upgrade Now</h2>
+            <div class="font-sm white mt-1">Upgrade now and get access to premimum features!</div>
+          </div>
+        </div>
+        <a href="#" class="close">
+          <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/cross-white.svg">
+        </a>
+      </div>
+      <div class="row no-gutters justify-content-between align-items-center border-bottom py-4 px-md-5 px-4">
+        <div>
+          <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/premium.svg" class="mr-2">
+          <span class="font-md bold gradient-text-orange">Premium</span>
+        </div>
+        <div class="gradient-text-orange">View all features</div>
+      </div>
+      <div class="row px-md-5 px-4 align-items-center my-4">
+        <div class="col-sm-6 mb-sm-0 mb-4">
+          <div class="row no-gutters align-items-center">
+            <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/certification-med.svg" class="mr-4">
+            <div class="flex-1 med-grey">Certificate of Achievement, Verified-Skill</div>
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="row no-gutters align-items-center">
+            <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/briefcase-med.svg" class="mr-4">
+            <div class="flex-1 med-grey">Placement Support (via Hiring Blocks)</div>
+          </div>
+        </div>
+      </div>
+      <div class="row px-md-5 px-4 align-items-center mb-4">
+        <div class="col-sm-6 mb-sm-0 mb-4">
+          <div class="row no-gutters align-items-center">
+            <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/person-med.svg" class="mr-4">
+            <div class="flex-1 med-grey">Instant Doubt Resolution (TA Support)</div>
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="row no-gutters align-items-center">
+            <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/goodies-med.svg" class="mr-4">
+            <div class="flex-1 med-grey">Goodies &amp; Swags</div>
+          </div>
+        </div>
+      </div>
+      <div class="divider-h"></div>
+      <div class="row no-gutters align-items-center justify-content-between py-4 px-md-5 px-4">
+        <div class="flex-1">
+          <div>
+            <span class="font-xl bold gradient-text-orange mr-3">&#8377;&nbsp;2999</span>
+            <span class="med-grey font-md extra-bold"><del>&#8377;&nbsp;5999</del></span>
+          </div>
+          <div class="gradient-text-orange mt-1">30% Discount</div>
+        </div>
+        <div class="button-solid button-orange">Upgrade</div>
+      </div>
+    </div>
+  </div>
+</div>

sass/styles/applications/online-cb/_components.scss

@@ -43,4 +43,5 @@
 @import "./components/sidenav.scss";
 @import "./components/tracks.scss";
 @import "./components/course-logos.scss";
-@import "./components/track-card.scss";
+@import "./components/track-card.scss";
+@import "./components/upgrade-modal.scss";

sass/styles/applications/online-cb/components/upgrade-modal.scss

@@ -0,0 +1,11 @@
+.upgrade-modal {
+  .close {
+    position: absolute;
+    top: 1.5rem;
+    right: 3rem;
+
+    @media screen and (max-width: 767px){
+      right: 1.5rem;
+    }
+  }
+}