INTRODUCTION
Today we will learn about HOW TO CREATE Classic Vintage Pricing Page.
FREE SOURCE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Classic Vintage Pricing Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: 'Times New Roman', Times, serif;
background-color: #f4f1e9;
color: #3e2723;
padding-top: 80px;
}
.navbar, .footer {
background-color: #deb887;
color: #3e2723;
}
.navbar-brand, .nav-link, .footer {
color: #3e2723 !important;
}
.pricing-section {
padding: 60px 0;
}
.pricing-header {
margin-bottom: 40px;
text-align: center;
}
.pricing-header h1 {
font-size: 2.5rem;
color: #795548;
}
.card {
background-color: #efebe9;
border: 1px solid #a1887f;
border-radius: 8px;
transition: all 0.3s ease-in-out;
}
.card:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card-header {
background-color: #bcAAA4;
color: #3e2723;
font-weight: bold;
}
.card-body {
padding: 2rem;
}
.card-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.card-price {
font-size: 2.5rem;
color: #6d4c41;
margin-bottom: 1rem;
}
.btn-custom {
background-color: #8d6e63;
color: #f4f1e9;
border-radius: 20px;
padding: 0.5rem 1.5rem;
}
.btn-custom:hover {
background-color: #795548;
}
.footer {
padding: 20px 0;
text-align: center;
border-top: 1px solid #a1887f;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Vintage Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Heritage</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="pricing-section">
<div class="container">
<div class="pricing-header">
<h1>Timeless Offers</h1>
<p class="text-muted">Select a plan that resonates with tradition.</p>
</div>
<div class="row">
<!-- Basic Plan -->
<div class="col-lg-4">
<div class="card mb-4">
<div class="card-header text-center">
Classic
</div>
<div class="card-body">
<h2 class="card-title text-center">Essential</h2>
<p class="card-price text-center">$20<span class="text-muted">/ mo</span></p>
<ul class="list-unstyled mt-3 mb-4">
<li>Access to basic collections</li>
<li>Monthly newsletter</li>
<li>Email support</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-custom">Sign up</button>
</div>
</div>
</div>
<!-- Intermediate Plan -->
<div class="col-lg-4">
<div class="card mb-4">
<div class="card-header text-center">
Premium
</div>
<div class="card-body">
<h2 class="card-title text-center">Preferred</h2>
<p class="card-price text-center">$50<span class="text-muted">/ mo</span></p>
<ul class="list-unstyled mt-3 mb-4">
<li>Extended access to collections</li>
<li>Bi-weekly exclusive newsletter</li>
<li>Priority email support</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-custom">Get started</button>
</div>
</div>
</div>
<!-- Deluxe Plan -->
<div class="col-lg-4">
<div class="card mb-4">
<div class="card-header text-center">
Deluxe
</div>
<div class="card-body">
<h2 class="card-title text-center">Exclusive</h2>
<p class="card-price text-center">$100<span class="text-muted">/ mo</span></p>
<ul class="list-unstyled mt-3 mb-4">
<li>All-access pass to entire collections</li>
<li>Weekly insights and stories</li>
<li>24/7 concierge support</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-custom">Join now</button>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<span>© 2024 Vintage Brand. Embracing tradition.</span>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Classic Vintage Pricing Page CODE INCLUDE
This Classic Vintage Pricing Page code includes the mentioned things
- HTML Code
- CSS Code
- JavaScript Code
Classic Vintage Pricing Page FEATURES
- Desktop View is Perfect
- Mobile View is Perfect
- Include Bootstrap CDN Library
- Live Webpage Preview Button
How To Create Classic Vintage Pricing Page. Manglastubh By Ankit Akolkar. Search on Google Free Online Courses.
Welcome to Manglastubh By Ankit Akolkar. Manglastubh website is designed and developed for all kinds of Knowledge-Based Blogs and Articles. Everyone will gain knowledge over here from this website.
