hello guys, Today in this blog you will learn how to make a Reponsive modern pricing table using HTML & CSS. In the previous blog, I have shared a blog on how to make a modern website landing page using HTML and CSS and now it’s time to move into a Responsive pricing table using HTML & CSS.
A pricing table is used in many scenarios where users can see the list of prices of the product and services which they are providing. Also, it is used to display various pricing plans, Subscriptions, Or price comparisons. The best part of this pricing table is, it is fully responsive and minimal for any device.
Also i have created so many small projects using HTML CSS and javascript for beginners you can check it out Here
If you used this pricing plan on your website this pricing plan site would give you a very sleek and unique look to clients. and if you want to create or watch a video on it you can watch a full tutorial on it.
Video Tutorial Of Responsive Pricing Table
I have covered this video so that you can achieve or make this pricing table using HTML and CSS I hope you will understand the logic behind the small and minimal pricing table. Also if you are a beginner in web design then this would be the best thing for you. You will learn so many things by making these things at your own pace.
You might like this:
- Crypto-currency website| Source Code Free Download
- How To Create Sign Up Form In HTML and CSS
- Top Stunning Free Websites to Download Responsive HTML Templates 2021
- JavaScript Clock | CSS Neumorphism Working Analog Clock UI Design
- How to make Interactive Feedback Design Using HTML CSS & JS
- How To Create A Modern Website Using HTML And CSS
Responsive Modern Pricing Tables [Source Codes]
To create a Responsive pricing table first you need to create two files one HTML file and another one is the CSS file. After creating these two files make sure you copy the source code properly so that we can run it on a live server. meanwhile we have to create an HTML file with the name of index.html file and another file name would be style.css and this file would help you to make your styling to your pricing table looks responsive and minimal. Let’s start this simple responsive pricing table using HTML and css step by step .
THE HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pricing Table</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="pricing-table">
<!-- 1 card -->
<div class="pricing-card">
<h3 class="pricing-card-header">Lean</h3>
<div class="price"> $4.88/yr
</div>
<ul>
<li>Free control plane included</li>
</ul>
<a href="#" class="order-btn">Order Now</a>
</div>
<!-- 2 card -->
<div class="pricing-card">
<h3 class="pricing-card-header">Standard</h3>
<div class="price"> $8.88/yr
</div>
<ul>
<li>Deploy in seconds</li>
</ul>
<a href="#" class="order-btn">Order Now</a>
</div>
<!-- 3 card -->
<div class="pricing-card">
<h3 class="pricing-card-header">Advanced</h3>
<div class="price"> $20.88/yr
</div>
<ul>
<li>Free daily backups,</li>
</ul>
<a href="#" class="order-btn">Order Now</a>
</div>
<!-- 4th card -->
<div class="pricing-card">
<h3 class="pricing-card-header">Enterprise</h3>
<div class="price"> $48.88/yr
</div>
<ul>
<li>Highly available</li>
</ul>
<a href="#" class="order-btn">Order Now</a>
</div>
</div>
</body>
</html>
After pasting the above code into your HTML file your site will look like this. It’s a very basic website where we use only HTML elements. After finishing this part we will move to the CSS part where the main magic will happen to our site.
THE CSS
The best magic will happen here so follow along with the code and paste in your style.css file.
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
text-decoration: none;
list-style: none;
}
body{
background-color: #0D0D20;
min-height: 100vh;
display: flex;
align-items: center;
}
.pricing-table{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: min(1920px,100%);
}
.pricing-card{
flex: 1;
max-width: 360px;
background-color: #171727;
margin: 20px 10px;
text-align: center;
cursor: pointer;
overflow: hidden;
color: #ffffff;
transition: .3s linear;
border-radius: 20px;
/* border: 0.5px solid #fff; */
}
.pricing-card-header{
background-color: #171727;
display: inline-block;
color: #fff;
padding: 12px 30px;
border-radius: 0 0 20px 20px;
font-size: 16px;
text-transform: uppercase;
font-weight: 600;
transition: .4s linear;
}
.pricing-card:hover .pricing-card-header {
box-shadow: 0 0 0 26em #242486;
}
.price{
font-size: 30px;
font-weight: 500;
color: #ffffff;
margin: 40px 0;
transition: .2s linear;
}
.price sup, .price span {
font-size: 22px;
font-weight: 700;
}
.pricing-card li {
font-size: 16px;
padding: 10px 0;
}
.pricing-card:hover , .pricing-card:hover .price {
color: #fff;
}
.order-btn {
display: inline-block;
margin-bottom: 40px;
margin-top: 80px;
border: 2px solid #1F1F35;
color: #ffffff;
padding: 18px 40px;
border-radius: 8px;
text-transform: uppercase;
font-weight: 500;
transition: .3s linear;
}
.order-btn:hover {
background-color: #0fbcf9;
color: #fff;
}
@media screen and (max-width:1100px)
{
.pricing-card{
flex: 50%;
}
}
When we hover on the card its color would change which makes this pricing table dope.
That’s all, now you’ve successfully created Responsive Pricing Tables using only HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
Conclusion
And voila! We’re done! ?
Happy Coding!
