Telegram Group Join Now
ADVERTISEMENT
Create a Responsive Pricing Table With Price Tag Html CSS
In this article, we create a price card and the pricing card table is completely responsive. We use Html And Css code to create our price card table and also use Css for responsiveness.
ADVERTISEMENT
Code by | Sanket Bodake |
Project Download | Link Available Below |
Language used | HTML and CSS |
External link / Dependencies | Yes |
Responsive | Yes |
ADVERTISEMENT
So let’s start writing Html code for the pricing card table.
Html Code
<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</title> <link rel="stylesheet" href="./pricing.css"> <script src="https://kit.fontawesome.com/66aa7c98b3.js" crossorigin="anonymous"></script> </head> <body> <div class="wrapper"> <div class="table basic"> <div class="price-section"> <div class="price-area"> <div class="inner-area"> <span class="text"> ₹ </span> <span class="price">00</span> </div> </div> </div> <div class="package-name"> </div> <div class="features"> <li> <span class="list-name">One Selected Template</span> <span class="icon check"><i class="fas fa-check-circle"></i></span> </li> <li> <span class="list-name">100% Responsive Design</span> <span class="icon check"><i class="fas fa-check-circle"></i></span> </li> <li> <span class="list-name">Credit Remove Permission</span> <span class="icon cross"><i class="far fa-times-circle"></i></span> </li> <li> <span class="list-name">Lifetime Template Updates</span> <span class="icon cross"><i class="far fa-times-circle"></i></span> </li> <div class="btn"><button>Purchase</button></div> </div> </div> <div class="table Premium"> <div class="price-section"> <div class="price-area"> <div class="inner-area"> <span class="text"> ₹ </span> <span class="price">49</span> </div> </div> </div> <div class="package-name"> </div> <div class="features"> <li> <span class="list-name">Five Existing Template</span> <span class="icon check"><i class="fas fa-check-circle"></i></span> </li> <li> <span class="list-name">100% Responsive Design</span> <span class="icon check"><i class="fas fa-check-circle"></i></span> </li> <li> <span class="list-name">Credit Remove Permission</span> <span class="icon check"><i class="fas fa-check-circle"></i></span> </li> <li> <span class="list-name">Lifetime Template Updates</span> <span class="icon cross"><i class="far fa-times-circle"></i></span> </li> <div class="btn"><button>Purchase</button></div> </div> </div> <div class="table Ultimate"> <div class="price-section"> <div class="price-area"> <div class="inner-area"> <span class="text"> ₹ </span> <span class="price">99</span> </div> </div> </div> <div class="package-name"> </div> <div class="features"> <li> <span class="list-name">All Existing Template</span> <span class="icon check"><i class="fas fa-check-circle"></i></span> </li> <li> <span class="list-name">100% Responsive Design</span> <span class="icon check"><i class="fas fa-check-circle"></i></span> </li> <li> <span class="list-name">Credit Remove Permission</span> <span class="icon check"><i class="fas fa-check-circle"></i></span> </li> <li> <span class="list-name">Lifetime Template Updates</span> <span class="icon check"><i class="fas fa-check-circle"></i></span> </li> <div class="btn"><button>Purchase</button></div> </div> </div> </div> </body> </html>
We create a boilerplate code for our project. We use font awesome icon in our price card table so we include font awesome CDN. Then we start creating a price card structure.
ADVERTISEMENT
We create many div so we can style pricing card details attractive. So we create 3 pricing card table sections with a different styles.
ADVERTISEMENT
50+ Frontend Project With Code
So we did our Html Code for the pricing card.
Now you can see below 👇Output with Only Html Coding Then we write Css for our pricing card table.
ADVERTISEMENT
Html Output

Let’s Write Css Code.
Css Code
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #647df9; padding: 20px; } .wrapper{ max-width: 1090px; width: 100%; display: flex; flex-wrap: wrap; margin: auto; justify-content: space-between; } .wrapper .table{ background: #fff; width: calc(33% - 20px); padding: 30px 30px; position: relative; box-shadow: 0 5px 10px rgba(0,0,0,0.1); } @media (max-width: 1020px){ .wrapper .table{ width: calc(50% - 20px); margin-bottom: 40px; } } @media (max-width: 698px){ .wrapper .table{ width: 100%; } } .table .price-section{ display: flex; justify-content: center; } .price-section .price-area{ height: 120px; width: 120px; background: #ffd861; border-radius: 50%; padding: 2px; } .price-section .price-area .inner-area{ height: 100%; width: 100%; border-radius: 50%; border: 3px solid #fff; color: #fff; line-height: 117px; text-align: center; position: relative; } .price-area .inner-area .text{ font-size: 25px; font-weight: 400; position: absolute; top: -10px; left: 17px; } .price-area .inner-area .price{ font-size: 55px; font-weight: 500; } .table .package-name{ width: 100%; height: 2px; background: #ffecb3; margin: 35px 0; position: relative; } .table .package-name::before{ position: absolute; content: "Basic"; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; font-size: 25px; padding: 0 10px; font-weight: bolder; } .table .features li{ list-style: none; display: flex; justify-content: space-between; margin-bottom: 15px; } .features li .list-name{ font-size: 17px; font-weight: 400; } .features li .icon{ font-size: 15px; } .features li .icon.check{ color: #2db94d; } .features li .icon.cross{ color: #cd3241; } .table .btn{ display: flex; justify-content: center; margin-top: 35px; } .table .btn button{ width: 80%; height: 50px; font-weight: 700; color: #fff; font-size: 20px; border: none; outline: none; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; } .basic .price-area, .basic .inner-area{ background: #ffd861; } .basic .btn button{ background: #fff; color: #ffd861; border: 2px solid #ffd861; } .basic .btn button:hover{ border-radius: 6px; background: #ffd861; color: #fff; } .Premium .price-area, .Premium .inner-area{ background: #a26bfa; } .Premium .btn button{ background: #fff; color: #a26bfa; border: 2px solid #a26bfa; } .Premium .btn button:hover{ border-radius: 6px; background: #a26bfa; color: #fff; } .Ultimate .price-area, .Ultimate .inner-area{ background: #43ef8b; } .Ultimate .btn button{ background: #fff; color: #43ef8b; border: 2px solid #43ef8b; } .Ultimate .btn button:hover{ border-radius: 6px; background: #43ef8b; color: #fff; } .basic .package-name{ background: #ffecb3; } .Premium .package-name{ background: #a26bfa; } .Ultimate .package-name{ background: #43ef8b; } .basic .package-name::before{ content: "Basic"; } .Premium .package-name::before{ content: "Premium"; } .Ultimate .package-name::before{ content: "Ultimate"; } .basic ::selection, .basic .price-area, .basic .inner-area{ background: #ffd861; } .Premium ::selection, .Premium .price-area, .Premium .inner-area{ background: #a26bfa; } .Ultimate ::selection, .Ultimate .price-area, .Ultimate .inner-area{ background: #43ef8b; }
This is our whole code of Css for the pricing card table. We style the body and give background color and all basic styling. Then we style our main div, in this div all 3 card content.
ADVERTISEMENT
We use display flex for easier to create responsive pricing card table. And we style the mobile version also together with the help of media queries. Then we use the before pseudo selector to style the heading of our pricing tag.
ADVERTISEMENT
We style all li items with help of Css and give background to for right tic icon and cross❌ Icon. that’s it all code for the responsive pricing card table.
You can below some screenshots of our project and a video preview too.
Final Output



Hope you like this project, we create your own and use this project in any project as a part project like the reviews section, and a contact form. If you need any more project-related frontend. Visit our homepage and you get 100+ projects💝.
if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section. 🤞🎉
ADVERTISEMENT
Code By – Sanket Bodake
ADVERTISEMENT
written by – Codewithrandom
ADVERTISEMENT
Which code editor do you use for this Pricing Table coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
ADVERTISEMENT
is this project responsive or not?
Yes! this is a responsive project
ADVERTISEMENT
Do you use any external links to create this project?
Yes!
ADVERTISEMENT