📢 Get a Free & Premium Web Templates, Admin Panel & Landing pages. Click here
A pricing page is a specific landing page that lists different pricing plans available for your products and services.
<section class="section">
<div class="container">
<div class="toggle"></div>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="card">
<div class="box">
<div class="card-body">
<div class="content">
<div class="icon">
<i class="ri-telegram-line text-white"></i>
</div>
<div class="text-white">
<h3>Basic</h3>
<h1>$35</h1>
<ul>
<li>
<i class="ri-check-line align-middle text-success"></i>
10 GB space
</li>
<li>
<i class="ri-check-line align-middle text-success"></i>
3 Domain names
</li>
<li>
<i class="ri-check-line align-middle text-success"></i>
10 Email Address
</li>
<li>
<i class="ri-close-fill align-middle text-danger"></i>
Live Support
</li>
</ul>
<a href="#">Order Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end col -->
<div class="col-lg-4 col-md-6">
<div class="card">
<div class="box">
<div class="card-body">
<div class="content">
<div class="icon">
<i class="ri-plane-line text-white"></i>
</div>
<div class="text-white">
<h3>Standard</h3>
<h1>$50</h1>
<ul>
<li>
<i class="ri-check-line align-middle text-success"></i>
20 GB space
</li>
<li>
<i class="ri-check-line align-middle text-success"></i>
5 Domain names
</li>
<li>
<i class="ri-check-line align-middle text-success"></i>
20 Email Address
</li>
<li>
<i class="ri-close-fill align-middle text-danger"></i>
Live Support
</li>
</ul>
<a href="#">Order Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end col -->
<div class="col-lg-4 col-md-6">
<div class="card">
<div class="box">
<div class="card-body">
<div class="content">
<div class="icon">
<i class="ri-rocket-fill text-white"></i>
</div>
<div class="text-white">
<h3>Premium</h3>
<h1>$100</h1>
<ul>
<li>
<i class="ri-check-line align-middle text-success"></i>
50 GB space
</li>
<li>
<i class="ri-check-line align-middle text-success"></i>
10 Domain names
</li>
<li>
<i class="ri-check-line align-middle text-success"></i>
50 Email Address
</li>
<li>
<i class="ri-check-line align-middle text-success"></i>
Live Support
</li>
</ul>
<a href="#">Order Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
</section>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: #232427;
}
.section {
padding: 150px 0;
}
.container .card {
position: relative;
height: 460px;
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2), inset -5px -5px 15px rgba(255, 255, 255, 0.1),
5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1);
border-radius: 15px;
border: 0;
margin: 30px;
background-color: #232427;
}
.container .card .box {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background-color: #2a2b2f;
border-radius: 15px;
border: 2px solid #1e1f23;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
transition: transform 0.4s, box-shadow 0.4s;
}
.container .card:hover .box {
transform: translateY(-50px);
box-shadow: 0 40px 70px rgba(0, 0, 0, 0.5);
}
.container .card .box .card-body .content {
padding: 14px;
text-align: center;
}
.container .card .box .card-body .content .icon {
position: relative;
width: 80px;
height: 80px;
background-color: #dc3545;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
border-radius: 50px;
margin-bottom: 10px;
}
ul {
position: relative;
list-style: none;
padding-left: 0;
}
ul li i {
margin-right: 3px;
}
a {
position: relative;
text-decoration: none;
display: inline-block;
padding: 13px 15px;
background: #dc3545;
color: #fff;
border-radius: 7px;
}
.container .card .box .card-body .content a,
.container .card .box .card-body .content .icon {
background: #2196f3;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
a:hover {
color: #fff;
}
.toggle {
position: absolute;
top: 20px;
left: calc(50% -30px);
width: 60px;
height: 60px;
background: #fff;
cursor: pointer;
border-radius: 6px;
justify-content: center;
display: flex;
align-items: center;
}
.toggle::before {
content: '\f0ea';
font-family: 'remixicon';
font-size: 35px;
}
body.light .toggle {
background: #154f56;
color: #fff;
}
body.light .toggle::before {
content: '\ef72';
}
body.light {
background: #ebf5fc;
}
body.light .container .card {
box-shadow: inset 10px 10px 10px rgba(0, 0, 0, 0.03), inset -10px -10px 15px rgba(255, 255, 255, 0.5),
10px 10px 10px rgba(0, 0, 0, 0.03), -10px -10px 15px rgba(255, 255, 255, 0.5);
background-color: #ebf5fc;
}
body.light .container .card .box {
background: #ebf5fc;
border: none;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
body.light .container .card.box {
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
body.light .container .card .box .card-body .content h3,
body.light .container .card .box .card-body .content h1,
body.light .container .card .box .card-body .content ul li {
color: #32a3b1;
}
const body = document.querySelector('body');
document.querySelector('.toggle').onclick = function() {
body.classList.toggle('light')
}
Add this stunning video banner to your site to showcase your products and services through video. Code is very easy to inegrate and run.
Add this elegant registration form to your website if you are providing register and login facility. Ity is very clean code and easy to impl...
Add this attractive newsletter form to your site. Your customers can stay updated with all the new things you do.