Merge pull request #3986 from jainaryan04/master

fix pricing cards layout #3985
anuragverma108 · Oct 25, 2024 · 1daf9e0 · 1daf9e0
2 parents f694939 + 414f8ea
commit 1daf9e0
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 44 deletions.
diff --git a/SwapReads/assets/images/ctc2.png b/SwapReads/assets/images/ctc2.png
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1448,16 +1448,18 @@ body.dark-mode .chapter-card:hover {
   flex-wrap: wrap;
   gap: 20px; 
   justify-content: space-around;
-  margin-left: -90px;
+  margin-left: -110px;
 }
-
+@media (max-width: 768px) {
 .pricing-container {
   display: flex;
+  flex-direction: column;
   flex-wrap: wrap;
   gap: 20px; /* Space between the cards */
   justify-content: space-around;
 
 }
+}
 
 .pricing-card {
   box-shadow: rgba(53, 31, 31, 0.5) 0px 5px 10px 0px inset;
@@ -1523,9 +1525,10 @@ body.dark-mode .pricing-card button {
   color: var(--charcoal);
   font-weight: var(--fw-700);
   margin-block-start: 10px;
-  padding-left: 25%;
-  padding-right: 25%;
+  text-align: center;
 }
+
+
 .pricing-card .price:hover {
   color: rgb(255, 195, 0);
 }
@@ -1556,14 +1559,17 @@ body.dark-mode .pricing-card button {
 @media (max-width: 768px) {
   .pricing-card {
     flex-basis: 45%; /* Adjust for smaller screens */
-    min-height: 200px;
+    min-height: 100px;
+    max-width: 300px;
+
   }
 }
 
 @media (max-width: 480px) {
   .pricing-card {
     flex-basis: 100%; /* Single column layout for small screens */
     min-height: 180px;
+
   }
 }
 
@@ -4331,7 +4337,8 @@ body.dark-mode .h3 {
     max-width: 800px;
   }
   .pricing-card {
-    min-height: 70rem !important;
+    min-height: 55rem !important;
+    max-width: 400px;
   }
   .container01 {
     max-width: 800px;

diff --git a/index.html b/index.html
@@ -4097,51 +4097,90 @@ <h3 class="lithead">09. &nbsp;Inspiring Biographies</h3>
 <!--
         - #PRICING BASED ON THEIR VERSION
       -->
-      <section class="section pricing" id="pricing" aria-label="pricing">
-  <div class="container">
-    <p class="section-subtitle">Pricing</p>
-    <h2 class="h2 section-title has-underline">
-      Pricing based on their version
-      <span class="span has-before"></span>
-    </h2>
-
-    <div class="pricing-container">
-      <div class="pricing-card">
-        <h3 class="h3 card-title">Fresh Pages - New Releases</h3>
-        <data class="price" value="5">75% Off</data>
-        <p class="card-text">
-          Exchange any recently released or gently used books, less than a year old, at 75% of the original cost (Limited Offer)
-        </p>
-        <a href="assets/html/checkout.html">
-          <button class="btn btn-secondary">BUY NOW</button>
-        </a>
+      <section class="section benefits" id="pricing" aria-label="benefits" 
+  style="display: flex; align-items: center; justify-content: center; min-height: 100vh; overflow: hidden;">
+  <div class="container" style="width: 100%; max-width: 1200px; padding: 0 15px; box-sizing: border-box;">
+    <div class="flex" 
+         style="display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px;">
+
+         <div class="benefits-content">
+        <p class="section-subtitle">Pricing</p>
+        <h2 class="h2 section-title has-underline" style="text-align: center;">
+          Pricing based on their version
+          <span class="span has-before"></span>
+        </h2>
       </div>
 
-      <div class="pricing-card">
-        <h3 class="h3 card-title">Timeless Classics - Aged Wonders</h3>
-        <data class="price" value="15">50% Off</data>
-        <p class="card-text">
-          Beloved classics or books aged 1 to 5 years at 50% of the original cost, preserving the magic of timeless stories.
-        </p>
-        <a href="assets/html/checkout.html">
-          <button class="btn btn-secondary">BUY NOW</button>
-        </a>
-      </div>
 
-      <div class="pricing-card">
-        <h3 class="h3 card-title">Hidden Treasures - Vintage Editions</h3>
-        <data class="price" value="10">25% Off</data>
-        <p class="card-text">
-          Dive into the past with vintage editions or books over 5 years old, available for exchange at 25% of their original cost.
-        </p>
-        <a href="assets/html/checkout.html">
-          <button class="btn btn-secondary">BUY NOW</button>
-        </a>
-      </div>
+      <ul class="benefits-canvas-container" 
+          style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; list-style: none; padding: 0; margin: 0;">
+        <li class="canvas" 
+            style="flex: 1 1 30%; max-width: 30%; box-sizing: border-box;">
+          <div class="benefits-card has-before has-after" 
+               style="padding: 15px; box-sizing: border-box;">
+            <h3 class="h3 card-title">Fresh Pages - New Releases</h3>
+            <data class="price" value="5">75% Off</data>
+            <p class="card-text">
+              Exchange any recently released or gently used books, less than a year old, at 75% of the original cost (Limited Offer)
+            </p>
+            <a href="assets/html/checkout.html">
+              <button class="btn btn-secondary">BUY NOW</button>
+            </a>
+          </div>
+        </li>
+
+        <li class="canvas" 
+            style="flex: 1 1 30%; max-width: 30%; box-sizing: border-box;">
+          <div class="benefits-card has-before has-after" 
+               style="padding: 15px; box-sizing: border-box;">
+            <h3 class="h3 card-title">Timeless Classics - Aged Wonders</h3>
+            <data class="price" value="15">50% Off</data>
+            <p class="card-text">
+              Beloved classics or books aged 1 to 5 years at 50% of the original cost, preserving the magic of timeless stories.
+            </p>
+            <a href="assets/html/checkout.html">
+              <button class="btn btn-secondary">BUY NOW</button>
+            </a>
+          </div>
+        </li>
+
+        <li class="canvas" 
+            style="flex: 1 1 30%; max-width: 30%; box-sizing: border-box;">
+          <div class="benefits-card has-before has-after" 
+               style="padding: 15px; box-sizing: border-box;">
+            <h3 class="h3 card-title">Hidden Treasures - Vintage Editions</h3>
+            <data class="price" value="10">25% Off</data>
+            <p class="card-text">
+              Dive into the past with vintage editions or books over 5 years old, available for exchange at 25% of their original cost.
+            </p>
+            <a href="assets/html/checkout.html">
+              <button class="btn btn-secondary">BUY NOW</button>
+            </a>
+          </div>
+        </li>
+      </ul>
     </div>
   </div>
 </section>
 
+<style>
+  @media (max-width: 768px) {
+    .benefits-canvas-container {
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+    }
+    .canvas {
+      max-width: 90%; /* Adjust the width to avoid overflowing */
+      flex: 1 1 auto;
+    }
+  }
+</style>
+
+
+
+
+
 
       <!-- Genre -->