INTRODUCTION
Today we will learn about HOW TO CREATE Artsy 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>Artsy 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: 'Arial', sans-serif;
background-color: #fdfdfd;
padding-top: 80px;
}
.navbar, .footer {
background-color: #333;
color: #fff;
}
.navbar-brand, .nav-link {
color: #fff !important;
}
.pricing-section {
padding: 60px 0;
}
.pricing-header {
margin-bottom: 40px;
text-align: center;
color: #333;
}
.pricing-header h1 {
font-size: 2.5rem;
color: #ff4081;
}
.card {
border: none;
border-radius: 15px;
transition: transform 0.3s ease-in-out;
overflow: hidden;
position: relative;
}
.card:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(140deg, #ff4081 0%, #ffcc00 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
transition: clip-path 0.3s ease-in-out;
}
.card:hover:before {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.card-body {
position: relative;
z-index: 1;
padding: 2rem;
color: #fff;
}
.card-title {
font-size: 1.5rem;
color: #fff;
}
.card-price {
font-size: 2.5rem;
color: #fff;
}
.btn-custom {
background-color: #333;
color: #fff;
border: none;
transition: background-color 0.2s ease-in-out;
}
.btn-custom:hover {
background-color: #ff4081;
}
.footer {
padding: 20px 0;
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Artsy 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="#">Gallery</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>Color Your World</h1>
<p class="text-muted">Choose a plan that brings color to your life.</p>
</div>
<div class="row">
<!-- Basic Plan -->
<div class="col-lg-4">
<div class="card mb-4 shadow-sm">
<div class="card-body">
<h4 class="card-title">Starter Palette</h4>
<h1 class="card-price">$10<span class="text-muted">/ mo</span></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>Access to basic colors</li>
<li>1 gallery slot</li>
<li>Email support</li>
</ul>
<button type="button" class="w-100 btn btn-lg btn-custom">Get started</button>
</div>
</div>
</div>
<!-- Intermediate Plan -->
<div class="col-lg-4">
<div class="card mb-4 shadow-sm">
<div class="card-body">
<h4 class="card-title">Expanded Palette</h4>
<h1 class="card-price">$30<span class="text-muted">/ mo</span></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>Access to premium colors</li>
<li>5 gallery slots</li>
<li>Priority email support</li>
</ul>
<button type="button" class="w-100 btn btn-lg btn-custom">Subscribe</button>
</div>
</div>
</div>
<!-- Advanced Plan -->
<div class="col-lg-4">
<div class="card mb-4 shadow-sm">
<div class="card-body">
<h4 class="card-title">Master Palette</h4>
<h1 class="card-price">$60<span class="text-muted">/ mo</span></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>Unlimited access to all colors</li>
<li>Unlimited gallery slots</li>
<li>24/7 support and consultation</li>
</ul>
<button type="button" class="w-100 btn btn-lg btn-custom">Join now</button>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer bg-dark">
<div class="container">
<span>© 2024 Artsy Brand. All rights reserved.</span>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Artsy Pricing Page CODE INCLUDE
This Artsy Pricing Page code includes the mentioned things
- HTML Code
- CSS Code
- JavaScript Code
Artsy Pricing Page FEATURES
- Desktop View is Perfect
- Mobile View is Perfect
- Include Bootstrap CDN Library
- Live Webpage Preview Button
How To Create Artsy 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.
