Skip to content

Commit

Permalink
updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@ayush-848
ayush-848 committed Aug 4, 2024
1 parent b7d49a4 commit f2c8d03
Showing 1 changed file with 151 additions and 115 deletions.
266 changes: 151 additions & 115 deletions packages.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -346,132 +346,137 @@
animation: fadeInUp 0.6s ease-out;
}
.pricing-section {
padding: 60px 0;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
margin-top: 40px;
}
padding: 60px 0;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
margin-top: 40px;
}

.pricing-container {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
margin-bottom: 6vh;
}
.pricing-container {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
margin-bottom: 6vh;
}

.table {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 10px;
padding: 30px;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
flex: 1;
min-width: 280px;
max-width: 350px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.table {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 10px;
padding: 30px;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
flex: 1;
min-width: 280px;
max-width: 350px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.table:hover {
transform: translateY(-10px);
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
}
.table:hover {
transform: translateY(-10px);
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
}

.ribbon {
position: absolute;
right: -34px;
top: 30px;
background: #e73e76;
color: white;
padding: 5px 40px;
transform: rotate(45deg);
font-size: 12px;
font-weight: bold;
}
.ribbon {
position: absolute;
right: -34px;
top: 30px;
background: #e73e76;
color: white;
padding: 5px 40px;
transform: rotate(45deg);
font-size: 12px;
font-weight: bold;
}

.price-section {
margin-bottom: 20px;
}
.price-section {
margin-bottom: 20px;
}

.price-area {
height: 120px;
width: 120px;
border-radius: 50%;
padding: 2px;
margin: 0 auto;
background: linear-gradient(#0697f1, #e73e76);
}
.price-area {
height: 120px;
width: 120px;
border-radius: 50%;
padding: 2px;
margin: 0 auto;
background: linear-gradient(#0697f1, #e73e76);
}

.inner-area {
height: 100%;
width: 100%;
border-radius: 50%;
border: 3px solid #fff;
color: #fff;
line-height: 117px;
text-align: center;
background: #0697f1;
}
.inner-area {
height: 100%;
width: 100%;
border-radius: 50%;
border: 3px solid #fff;
color: #fff;
line-height: 117px;
text-align: center;
}
.basic-price{
background: #ffd861;
}
.premium-price {
background: #a26bfa;
}

.price {
font-size: 25px;
font-weight: 600;
display: block;
}
.ultimate-price {
background: #32cd32;
}

.text {
font-size: 15px;
font-weight: 400;
}
.text {
font-size: 25px;
font-weight: 600;
display: block;
}

.features li {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
list-style-type: none;
}
.features li {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
list-style-type: none;
}

.features .list-name {
font-size: 14px;
font-weight: 400;
}
.features .list-name {
font-size: 14px;
font-weight: 400;
}

.features .icon {
font-size: 15px;
}
.features .icon {
font-size: 15px;
}

.features .icon.check {
color: #0697f1;
}
.features .icon.check {
color: #0697f1;
}

.features .icon.cross {
color: #cd3241;
}
.features .icon.cross {
color: #cd3241;
}

.purchase-btn {
margin-top: 30px;
}
.purchase-btn {
margin-top: 30px;
}

.purchase-btn button {
border: none;
outline: none;
padding: 10px 20px;
border-radius: 25px;
background: #0697f1;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
.purchase-btn button {
border: none;
outline: none;
padding: 10px 20px;
border-radius: 25px;
background: #0697f1;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}

.purchase-btn button:hover {
background: #e73e76;
transform: scale(1.05);
}

.purchase-btn button:hover {
background: #e73e76;
transform: scale(1.05);
}

@media (max-width: 768px) {
.header h1 {
Expand Down Expand Up @@ -564,13 +569,44 @@ <h2 class="section-title animate-fadeInUp">Hotel Packages</h2>
<h2 class="section-title animate-fadeInUp">Our Pricing Plans</h2>
<p class="subtitle animate-fadeInUp">Choose the perfect plan for your journey</p>
<div class="pricing-container">
<div class="table basic animate-fadeInUp" style="animation-delay: 0.1s;">
<div class="price-section">
<div class="price-area">
<div class="inner-area basic-price">
<span class="text">₹2500/- </span>
</div>
</div>
</div>
<div class="package-name"></div>
<ul class="features">
<li>
<span class="list-name">5% Discounts on Accommodations</span>
<span class="icon check"><i class="fas fa-check"></i></span>
</li>
<li>
<span class="list-name">Exclusive Travel Guides</span>
<span class="icon cross"><i class="fas fa-times"></i></span>
</li>
<li>
<span class="list-name">Monthly Travel Webinars</span>
<span class="icon check"><i class="fas fa-check"></i></span>
</li>
<li>
<span class="list-name">Priority Customer Support</span>
<span class="icon check"><i class="fas fa-check"></i></span>
</li>

</ul>
<div class="purchase-btn"><button>Purchase</button></div>
</div>


<div class="table premium animate-fadeInUp" style="animation-delay: 0.2s;">
<div class="ribbon"><span>Recommend</span></div>
<div class="price-section">
<div class="price-area">
<div class="inner-area">
<span class="text">INR</span>
<span class="price">20000</span>
<div class="inner-area premium-price">
<span class="text">₹1500/- </span>
</div>
</div>
</div>
Expand Down Expand Up @@ -606,9 +642,8 @@ <h2 class="section-title animate-fadeInUp">Our Pricing Plans</h2>
<div class="table ultimate animate-fadeInUp" style="animation-delay: 0.4s;">
<div class="price-section">
<div class="price-area">
<div class="inner-area">
<span class="text">INR</span>
<span class="price">25000</span>
<div class="inner-area ultimate-price">
<span class="text">₹2500/- </span>
</div>
</div>
</div>
Expand All @@ -635,6 +670,7 @@ <h2 class="section-title animate-fadeInUp">Our Pricing Plans</h2>
</div>
</div>
</section>


<script>
document.addEventListener('DOMContentLoaded', (event) => {
Expand Down

0 comments on commit f2c8d03

Please sign in to comment.