Merge pull request #888 from imsudiptaa/price

New Feature of Price Plan added and UI updated #859
PriyaGhosal · Oct 31, 2024 · e99b15b · e99b15b
2 parents 2b225d3 + 3bfb033
commit e99b15b
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 6 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -85,7 +85,7 @@ html {
 *::after {
   margin: 0;
   padding: 0;
-  box-sizing: border-box;
+  /* box-sizing: border-box; */
 }
 
 li {
@@ -294,7 +294,30 @@ body.nav-active .navbar-list .navbar-link {
   display: grid;
   gap: 28px;
 }
-
+.grid-list-price {
+  margin-top: 30px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 28px;
+}
+.card-container-price {
+  padding: 2px;
+  font-size: 0.99rem;
+}
+.card-container-price-pro {
+  padding: 2px;
+  font-size: 0.94rem;
+}
+.card-container-price-pro .card-title {
+  font-size: 1.6rem;
+}
+.card-container-price .card-title {
+  font-size: 1.6rem;
+}
+#btn {
+  padding: 7px 14px; 
+  font-size: 0.5rem; 
+}
 .card {
   position: relative;
   background-color: var(--white);

diff --git a/index.html b/index.html
@@ -1135,8 +1135,8 @@ <h2 class="headline-md text-center section-title" data-aos="fade-down">
             <div class="header1">Select a Plan for better <span class="span has-after">Learning</span></div>
           </h2>
 
-          <ul class="grid-list cursor-pointer">
-            <li class="card-container" data-aos="fade-right" data-aos-offset="100" data-aos-easing="ease-in-sine">
+          <ul class="grid-list-price cursor-pointer">
+            <li class="card-container-price"  data-aos-offset="100" data-aos-easing="ease-in-sine">
               <div class="header1">
                 <div class="card blog-card">
 
@@ -1170,7 +1170,7 @@ <h5> Starting at $850.00 per month.
                 </div>
               </div>
             </li>
-            <li class="card-container" data-aos="fade-right" data-aos-offset="200" data-aos-easing="ease-in-sine">
+            <li class="card-container-price"  data-aos-offset="200" data-aos-easing="ease-in-sine">
               <div class="header2">
                 <div class="card blog-card">
 
@@ -1204,7 +1204,40 @@ <h5> Starting at $1,167.00 per month.
                 </div>
               </div>
             </li>
-            <li class="card-container" data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine">
+            <li class="card-container-price-pro"  data-aos-offset="300" data-aos-easing="ease-in-sine">
+              <div class="header4">
+                <div class="card blog-card">
+                  <div class="card-content">
+                    <h3 class="title-lg card-title">
+                      Pro Plus Plan
+                    </h3>
+                    <h5> Starting at $1,500.00 per month.
+                      <p>
+                        <span class="span" style="font-weight: 400; font-style: italic;"> Billed monthly or annually.
+                          Cancel anytime.</span>
+                      </p>
+
+                    </h5>
+                    <ul>
+
+                      <li>-> Access to top courses & certifications</li>
+                      <li>-> Customizable Goal-focused AI driven recommendations</li>
+                      <li>-> Personalized onboarding & analytics</li>
+                      <li>-> Courses available in 15 languages</li>
+                      <li>-> Lifelong access to featured courses</li>
+                      <li>-> Quarterly Skill Assessments</li>
+
+
+                    </ul>
+                    <br>
+                    <button id="btn">
+                      <a   href="#pricing" >Subscribe Now</a>
+                      </button>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="card-container-price"  data-aos-offset="300" data-aos-easing="ease-in-sine">
               <div class="header3">
                 <div class="card blog-card">
                   <div class="card-content">