Merge pull request #2832 from sau-mili/Last-branch

Pricing section improved

assets/css/style.css

@@ -1216,20 +1216,40 @@ body.dark-mode .chapter-card:hover {
   padding: 20px 0px;
 }
 .pricing-card {
+  box-shadow: rgba(53, 31, 31, 0.5) 0px 5px 10px 0px inset;
   padding: 40px 50px;
   background-color: var(--seashell);
   text-align: center;
   transition: var(--transition-2);
   border-radius: var(--radius-5);
-  box-shadow: var(--shadow-2);
+  /* box-shadow: var(--shadow-2); */
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  min-height: 200px;
+  min-height: 150px;
   margin-top: 100px;
 }
+
+.pricing-card button{
+  margin-top: 20px !important;
+  box-shadow: rgba(50, 50, 93, 0.5) 0px 50px 100px -20px inset, 
+  rgba(0, 0, 0, 0.7) 0px 30px 60px -30px, 
+  rgba(10, 37, 64, 0.75) 0px -2px 6px 0px inset;
+  font-weight: 500 !important;
+}
+body.dark-mode .pricing-card button{
+  margin-left: auto !important;
+  margin-right: auto !important;
+  background-color: #faa2a2 !important;
+  color:#6a1818 !important;
+  box-shadow: rgba(80, 80, 92, 0.5) 0px 50px 100px -20px inset, 
+  rgba(86, 73, 73, 0.7) 0px 30px 60px -30px, 
+  rgba(74, 76, 78, 0.75) 0px -2px 6px 0px inset;
+  font-weight: 500 !important;
+
+}
 .dark-mode .pricing-card {
-  background-color: #151111;
+  background:linear-gradient(#000000, #8e4949);
 }
 .dark-mode .pricing-card .card-title {
   color: white;
@@ -1251,6 +1271,10 @@ body.dark-mode .chapter-card:hover {
 }
 
 .pricing-card .price {
+  box-shadow: rgba(53, 31, 31, 0.5) 0px 5px 10px 0px ;
+  background: linear-gradient(#8f3838, #db7272);
+  color:white !important;
+  border-radius: 10px;
   font-family: var(--ff-philosopher);
   font-size: var(--fs-1);
   color: var(--charcoal);

index.html

@@ -2186,6 +2186,9 @@ <h3 class="h3 card-title">Fresh Pages - New Releases</h3>
                     <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>
                   </li>
+                  <li class="card-img">
+
+                  </li>
                 </ul>
 
                 <button class="btn btn-secondary">BUY NOW</button>