📢 Get a Free & Premium Web Templates, Admin Panel & Landing pages. Click here
This responsive pricing table was designed by Walter Candelaria, you have 3 pricing cards in this layout.
<!-- AwesomeFont Icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="bg-pricing bg-light d-flex align-items-center">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5">
<div class="mb-5 mb-lg-0">
<p class="refresh-btn mb-0 h4"><i class="fa fa-refresh" aria-hidden="true"></i></p>
<h1 class="mt-4">Choose your Pricing Plan Not have any Hidden Chnage </h1>
<p class="text-muted my-4">Dummy text is also used to demonstrate the appearance of different
typefaces and layouts.</p>
<ul class="nav nav-pills mt-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link btn active" id="pills-home-tab" data-bs-toggle="pill"
data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home"
aria-selected="true">
Personal
</button>
</li>
<!--end nav-item-->
<li class="nav-item" role="presentation">
<button class="nav-link btn" id="pills-profile-tab" data-bs-toggle="pill"
data-bs-target="#pills-profile" type="button" role="tab"
aria-controls="pills-profile" aria-selected="false">
Company
</button>
</li>
<!--end nav-item-->
</ul>
<!--end nav-->
</div>
</div>
<!--end col-->
<div class="col-lg-7 col-xl-6 offset-xl-1">
<div class="tab-content" id="pills-tabContent">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-5">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel"
aria-labelledby="pills-home-tab">
<div class="pricing-box card text-center p-4 mt-3 border-0 box-shadow">
<h5 class="my-2 price-title fw-bold">Personal</h5>
<p class="mb-3 fs-6 text-muted">Yearly Plan </p>
<h3 class="mb-0 price">$19.99</h3>
<ul class="pricing-content list-unstyled text-muted card-body my-2">
<li>5GB Disk space</li>
<li>3 User Access</li>
<li>Unlimited themes</li>
<li>Customize design</li>
<li>24x7 Support</li>
</ul>
<!--end pricing-content-->
<div>
<a href="#" class="btn btn-light rounded-pill">Buy Now</a>
</div>
</div>
<!--end pricing-box-->
</div>
<!--end tab-pane-->
</div>
<!--end col-->
<div class="col-lg-6 col-md-5 ms-n1">
<div class="tab-pane fade" id="pills-profile" role="tabpanel"
aria-labelledby="pills-profile-tab">
<div class="pricing-box card text-center p-4 mt-3 border-0 box-shadow">
<h5 class="my-2 price-title fw-bold">Company</h5>
<p class="mb-3 fs-6 text-muted">Monthly Plan </p>
<h3 class="mb-0 price">$34.99</h3>
<ul class="pricing-content list-unstyled fs-6 text-muted card-body my-2">
<li>5GB Disk space</li>
<li>3 User Access</li>
<li>Unlimited themes</li>
<li>Customize design</li>
<li>24x7 Support</li>
</ul>
<!--end pricing-content-->
<div>
<a href="#" class="btn btn-light rounded-pill">Buy Now</a>
</div>
</div>
<!--end pricing-box-->
</div>
<!--end tab-pane-->
</div>
<!--end col-->
</div>
<!--end row-->
</div>
<!--end tab-content-->
</div>
<!--end col-->
</div>
<!--end row-->
</div>
<!--end container-->
</section>@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&display=swap");
body {
font-family: "Poppins", sans-serif;
color: #050513;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Poppins", sans-serif;
}
.btn {
padding: 8px 25px;
font-size: 14px;
}
.btn-light {
background: #f3f4f5;
border-color: #f3f4f5;
}
.btn-light, .btn-light:hover, .btn-light:focus, .btn-light:active, .btn-light:active:focus {
background: #f3f4f5;
border-color: #f3f4f5;
box-shadow: 0px 8px 20px -6px rgba(243, 244,245, 0.6);
}
.bg-pricing {
background-image: url("../images/bg-1.jpg");
background-size: cover;
height: 100vh;
position: relative;
}
.box-shadow {
box-shadow: rgba(0,0,0, 0.12) 0px 7px 29px 0px;;
}
.nav-pills {
background: transparent;
display: inline-flex;
border: 8px solid #ffffff;
}
.nav-pills .nav-link.active {
background-color: #46e991;
}
.nav-pills .nav-link {
box-shadow: none;
}
.pricing-content li {
margin: 6px 0;
font-size: 14px;
}
.fade:not(.show) {
opacity: 0.6;
}
.show {
z-index: 1;
position: relative;
}
.price {
height: 55px;
width: 150px;
color: #ffffff;
line-height: 55px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.price::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
z-index: -1;
border-radius: 8px;
background: #6671e5;
}
.price::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
border-radius: 8px;
transform: rotate(-5deg);
background: rgba(102, 113, 229, 0.58);
}
.refresh-btn {
width: 55px;
height: 55px;
padding: 4px;
color: rgba(102, 113, 229);
background-color: #ffffff;
text-align: center;
line-height: 50px;
border-radius: 50%;
}
@media (min-width: 768px) {
.tab-pane.active {
transition: all 0.3s ease;
transform: scale(1.2);
z-index: 1;
}
.ms-n1 {
margin-left: -8.5rem;
}
}
@media (max-width: 768px) {
.bg-pricing {
height: auto;
padding: 60px 0;
}
}var buttonGroups = document.querySelectorAll('.nav-item button');
for (var i = 0; i < buttonGroups.length; i++) {
buttonGroups[i].addEventListener('click', onButtonGroupClick);
}
function onButtonGroupClick(event) {
if (event.target.id === 'pills-home-tab') {
document.getElementById("pills-home").classList.add("show", "active");
document.getElementById("pills-profile").classList.remove("show", "active");
} else {
document.getElementById("pills-profile").classList.add("show", "active");
document.getElementById("pills-home").classList.remove("show", "active");
}
}
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.
