Skip to content

Commit

Permalink
update pricing component
Browse files Browse the repository at this point in the history
  • Loading branch information
@haseebzaki-07
haseebzaki-07 committed Oct 21, 2024
1 parent ab8a74f commit 953f7b5
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 90 deletions.
53 changes: 33 additions & 20 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1436,28 +1436,34 @@ body.dark-mode .chapter-card:hover {
\*-----------------------------------*/

#pricing .container {
margin-top: 20px;
margin-bottom: 20px;
width: 97%;
padding: 20px 0px;
margin-left: 100px;
}

margin-top: 20px;
margin-bottom: 20px;
width: 97%;
padding: 20px 0px;
margin-left: 100px;
.pricing-container {
display: flex;
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;
padding: 40px 50px;
padding: 20px 30px;
background-color: var(--seashell);
text-align: center;
transition: var(--transition-2);
border-radius: var(--radius-5);
/* box-shadow: var(--shadow-2); */
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 150px;
margin-top: 100px;
flex-basis: 30%; /* Adjust width for 3 cards in a row */
min-height: 150px; /* Set the minimum height */

}

.pricing-card button {
Expand Down Expand Up @@ -1510,21 +1516,12 @@ body.dark-mode .pricing-card button {
font-weight: var(--fw-700);
margin-block-start: 10px;
padding-left: 25%;
padding-right: 25%;
padding-right: 25%;
}
.pricing-card .price:hover {
color: rgb(255, 195, 0);
}

/* .pricing-card-list {
margin-block: 20px 40px;
flex-grow: 1;
} */

.pricing-card-list .card-item:not(:last-child) {
border-block-end: 1px solid var(--ghost-white);
}

.pricing-card .card-text {
padding-block: 10px;
}
Expand All @@ -1538,7 +1535,7 @@ body.dark-mode .pricing-card button {
align-self: center;
margin-top: auto;
}
*/ .dark-mode .pricing-card .btn {
.dark-mode .pricing-card .btn {
background-color: #8e4949 !important;
border: none !important;
}
Expand All @@ -1547,6 +1544,22 @@ body.dark-mode .pricing-card button {
transform: scale(1.1);
}

/* Responsive design */
@media (max-width: 768px) {
.pricing-card {
flex-basis: 45%; /* Adjust for smaller screens */
min-height: 200px;
}
}

@media (max-width: 480px) {
.pricing-card {
flex-basis: 100%; /* Single column layout for small screens */
min-height: 180px;
}
}


/*-----------------------------------*\
#AUTHOR
\*-----------------------------------*/
Expand Down
110 changes: 40 additions & 70 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3893,80 +3893,50 @@ <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">


<!-- <div class="pricingContainer" style="margin-top : -3rem" > -->
<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> -->

<ul class="grid-list">

<li>
<div class="pricing-card">

<h3 class="h3 card-title">Fresh Pages - New Releases</h3>

<data class="price" value="5">75% Off</data>

<ul class="pricing-card-list">

<li class="card-item">
<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>

<a href="assets\html\checkout.html"><button class="btn btn-secondary" >BUY NOW</button></a>
</div>
</li>
<li>
<div class="pricing-card">
<h3 class="h3 card-title">Timeless Classics - Aged Wonders</h3>
<data class="price" value="15">50% Off</data>
<ul class="pricing-card-list">

<li class="card-item">
<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>
</li>
</ul>

<a href="assets\html\checkout.html"><button class="btn btn-secondary" >BUY NOW</button></a>

</div>
</li>

<li>
<div class="pricing-card">
<h3 class="h3 card-title">Hidden Treasures - Vintage Editions</h3>
<data class="price" value="10">25% Off</data>
<ul class="pricing-card-list">


<li class="card-item">
<p class="card-text"> into the past with vintage editions or books over 5 years old, available
for exchange at 25% of their original cost.</p>
</li>
</ul>
<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>

<a href="assets\html\checkout.html"><button class="btn btn-secondary" >BUY NOW</button></a>
<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>
</div>

</div>
</li>
<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>

</ul>
<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>
</div>
</div>
</section>

</div>
</section>

<!-- Genre -->

Expand Down

0 comments on commit 953f7b5

Please sign in to comment.