Pricing Cards
Hello Guys! Welcome to Coding Torque. In this blog, we are going to make responsive pricing cards using HTML and CSS. You must create this project if you are a beginner and learning HTML and CSS. Let's get started 🚀.
Before we start, here are some more projects for you:
2. Tip Calculator using JavaScript
3. QR Code Generator using JavaScript
Let's go step by step:
Step 1: HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />
<title>Responsive pricing cards using HTML CSS and JavaScript - @code.scientist x @codingtorque</title>
</head>
<body>
<div class="container">
<h5 class="badge">Pricing Plans</h5>
<h1 class="heading">Choose Your Best Pricing Plan</h1>
<div class="card_group">
<div class="pricing-card">
<i class="fab fa-telegram-plane"></i>
<span>Basic</span>
<h4 class="price">$4.99</h4>
<ul class="package_list">
<li>Unlimited Website</li>
<li>Unlimited Storage</li>
<li>Free SSL Certificate</li>
<li>24/7 Support</li>
</ul>
<a href="#" class="get_started_btn">Get Started</a>
</div>
<div class="pricing-card">
<i class="fas fa-plane"></i>
<span>Intermediate</span>
<h4 class="price">$12.99</h4>
<ul class="package_list">
<li>Unlimited Website</li>
<li>Unlimited Storage</li>
<li>Free SSL Certificate</li>
<li>24/7 Support</li>
</ul>
<a href="#" class="get_started_btn">Get Started</a>
</div>
<div class="pricing-card">
<i class="fas fa-rocket"></i>
<span>Advanced</span>
<h4 class="price">$19.99</h4>
<ul class="package_list">
<li>Unlimited Website</li>
<li>Unlimited Storage</li>
<li>Free SSL Certificate</li>
<li>24/7 Support</li>
</ul>
<a href="#" class="get_started_btn">Get Started</a>
</div>
</div>
</div>
</body>
</html>Step 2: CSS Code
@import url("https://fonts.googleapis.com/css2?family=Baloo 2&family=Roboto:wght@300&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto", cursive;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 5rem 10rem;
}
.badge {
text-transform: uppercase;
color: deeppink;
letter-spacing: 1px;
font-size: 11px;
}
.heading {
font-size: 26px;
margin: 20px 0;
}
.card_group {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.pricing-card {
margin: 20px 30px;
height: 400px;
width: 275px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
transition: 0.5s ease-in-out;
padding: 16px 14px;
border-radius: 10px;
border: 2px solid deeppink;
}
.pricing-card i {
color: deeppink;
height: 60px;
width: 60px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
border-radius: 50%;
box-shadow: 0 0 34px -12px gray;
}
.pricing-card span {
color: deeppink;
margin: -10px 0;
font-weight: bold;
font-size: 14px;
}
.price {
font-size: 30px;
font-family: "Baloo 2";
}
.package_list {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 20px;
}
.package_list li {
list-style: none;
margin: 6px 0;
color: gray;
font-size: 14px;
}
.get_started_btn {
border: 2px solid deeppink;
color: white;
background: linear-gradient(45deg, #bc4e9c, #f80759);
padding: 8px 25px;
border-radius: 20px;
text-decoration: none;
font-weight: bold;
transition: 0.3s ease-in-out;
}
.get_started_btn:hover {
background: transparent;
color: deeppink;
}
Written by: Coding Torque | Piyush Patil
If you want me to code any project or post any specific post, feel free to
DM me at IG @code.scientist or @codingtorque
If you have any doubt or any project ideas feel free to Contact
Us
Hope you find this post helpful💖
Follow us on Instagram for more projects like this👨💻