<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pricing table</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="pricing-container">
<div class="pricing-row justify-content-center pb-5">
<div class="pricing-header col-lg-9 pb-lg-4 text-center">
<h3 class="heading-title font-weight-bold text-uppercase title-large">CodeZillaYe Pricing</h3>
<p class="sub-title text-uppercase">What CodeZillaYe offers to its customers</p>
<span class="separator-line d-inline-block mt-4"></span>
</div>
</div>
<div class="pricing-plans-row">
<!-- Plan 1 -->
<div class="pricing-plan col-md-6 col-lg-3">
<div class="pricing-card box-shadow text-center">
<div class="pricing-card-header bg-dark border-thick px-3 py-4">
<span class="plan-name text-uppercase text-white">Starter Plan</span>
<span class="plan-price text-white mt-4">
<span class="currency">$</span>
<span class="amount">18</span>
<span class="per-month">/Month</span>
</span>
<p class="plan-description text-white opacity-8 mt-3"><i>Perfect for small-scale projects on CodeZillaYe.</i></p>
</div>
<div class="pricing-card-body">
<span class="feature bg-light-gray d-block p-4">2 Core Processor</span>
<span class="feature bg-white d-block p-4">50GB Storage</span>
<span class="feature bg-light-gray d-block p-4">24/7 Free Support</span>
<span class="feature bg-white d-block p-4">Weekly Backups</span>
</div>
<div class="pricing-card-footer bg-primary">
<a href="#" class="cta-button text-uppercase text-white">Get Started</a>
</div>
</div>
</div>
<!-- Plan 2 -->
<div class="pricing-plan col-md-6 col-lg-3">
<div class="pricing-card box-shadow text-center">
<div class="pricing-card-header bg-dark border-thick px-3 py-4">
<span class="plan-name text-uppercase text-white">Basic Plan</span>
<span class="plan-price text-white mt-4">
<span class="currency">$</span>
<span class="amount">29</span>
<span class="per-month">/Month</span>
</span>
<p class="plan-description text-white opacity-8 mt-3"><i>Grow your reach with enhanced resources at CodeZillaYe.</i></p>
</div>
<div class="pricing-card-body">
<span class="feature bg-light-gray d-block p-4">4 Core Processor</span>
<span class="feature bg-white d-block p-4">200GB Storage</span>
<span class="feature bg-light-gray d-block p-4">24/7 Free Support</span>
<span class="feature bg-white d-block p-4">Daily Backups</span>
</div>
<div class="pricing-card-footer bg-primary">
<a href="#" class="cta-button text-uppercase text-white">Get Started</a>
</div>
</div>
</div>
<!-- Plan 3 -->
<div class="pricing-plan col-md-6 col-lg-3">
<div class="pricing-card box-shadow text-center">
<div class="pricing-card-header bg-dark border-thick px-3 py-4">
<span class="plan-name text-uppercase text-white">Pro Plan</span>
<span class="plan-price text-white mt-4">
<span class="currency">$</span>
<span class="amount">50</span>
<span class="per-month">/Month</span>
</span>
<p class="plan-description text-white opacity-8 mt-3"><i>Advanced tools for professional use at CodeZillaYe.</i></p>
</div>
<div class="pricing-card-body">
<span class="feature bg-light-gray d-block p-4">6 Core Processor</span>
<span class="feature bg-white d-block p-4">1TB Storage</span>
<span class="feature bg-light-gray d-block p-4">24/7 Free Support</span>
<span class="feature bg-white d-block p-4">Hourly Backups</span>
</div>
<div class="pricing-card-footer bg-primary">
<a href="#" class="cta-button text-uppercase text-white">Get Started</a>
</div>
</div>
</div>
<!-- Plan 4 -->
<div class="pricing-plan col-md-6 col-lg-3">
<div class="pricing-card box-shadow text-center">
<div class="pricing-card-header bg-dark border-thick px-3 py-4">
<span class="plan-name text-uppercase text-white">Ultimate Plan</span>
<span class="plan-price text-white mt-4">
<span class="currency">$</span>
<span class="amount">99</span>
<span class="per-month">/Month</span>
</span>
<p class="plan-description text-white opacity-8 mt-3"><i>Unlimited resources for enterprises using CodeZillaYe.</i></p>
</div>
<div class="pricing-card-body">
<span class="feature bg-light-gray d-block p-4">8 Core Processor</span>
<span class="feature bg-white d-block p-4">5TB Storage</span>
<span class="feature bg-light-gray d-block p-4">24/7 Free Support</span>
<span class="feature bg-white d-block p-4">Real-Time Backups</span>
</div>
<div class="pricing-card-footer bg-primary">
<a href="#" class="cta-button text-uppercase text-white">Get Started</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>.pricing-container {
padding: 40px 0;
}
.heading-title {
font-size: 32px;
margin-bottom: 10px;
}
.sub-title {
font-size: 20px;
margin-top: 10px;
font-weight: 400;
}
.separator-line {
width: 60px;
height: 5px;
background-color: #000;
}
.pricing-plans-row {
display: flex;
flex-wrap: wrap;
}
.pricing-plan {
padding: 15px;
}
.pricing-card {
border: 3px solid #ddd;
background-color: #fff;
border-radius: 5px;
transition: box-shadow 0.3s ease;
}
.pricing-card:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.pricing-card-header {
background-color: #000;
border-bottom: 3px solid #ddd;
}
.plan-name {
font-size: 24px;
font-weight: 700;
}
.plan-price {
font-size: 36px;
margin-top: 15px;
}
.currency {
font-size: 20px;
}
.amount {
font-size: 48px;
}
.per-month {
font-size: 16px;
}
.plan-description {
font-size: 14px;
opacity: 0.8;
}
.pricing-card-body .feature {
font-size: 16px;
background-color: #f7f7f7;
}
.bg-light-gray {
background-color: #f3f3f3;
}
.pricing-card-footer {
background-color: #007bff;
padding: 15px;
}
.cta-button {
font-size: 16px;
font-weight: 600;
display: inline-block;
width: 100%;
color: #fff;
text-decoration: none;
}
About This Design
This pricing table design offers a clean, modern structure tailored to highlight four service plans. Each plan is displayed in a column with distinct sections: a header showcasing the plan name and price, a detailed feature list, and a call-to-action button. The sleek use of alternating backgrounds for the features ensures readability, while the bold typography and subtle shadows create emphasis. The overall aesthetic reflects the “CodeZillaYe” platform’s commitment to clarity, simplicity, and professionalism, providing a smooth user experience with intuitive navigation and vibrant visual appeal.
This code example is based on Bootstrap 5.0.2 and the grid system of this framework. You can visit this link: Bootstrap.
Key Features
- Responsive: Based on the Bootstrap framework, making all the layouts perfectly responsive for all devices.
- Cross-browser Compatibility: Tested on all major browsers, it works smoothly on all of them.
- Semantic HTML5: Built on HTML/CSS3, the code quality is really amazing.
- Simple Integration: This code example can be simply integrated into existing sites and new ones too. All you need to do is copy the code and start working.