Hello Friends, Today in this blog you’ll learn how to create a Responsive Pricing Card using pure HTML & CSS. This is for beginners who want to learn new stuff using HTML & CSS. Recently, I have shared a Facebook login Form using HTMl & CSS. Now it’s time to create a Pricing Tables Or Price List Card using HTML & CSS Only.
Pricing cards are designed to easily compare prices of each subscription on commercial websites. In this design we have a comparison or example of web Hosting. Pricing tables are a design where items are listed down on a website to display their available features such as pricing comparisons, features,Pricing plans, Subscriptions, etc.
On the preview images you can see there are 3 Table or Pricing cards that show Web Hosting comparisons. In this we have three different plans. Each Web Plans are of different cost to easily compare with other two plans. We have three plans of Web Hosting listed here BASIC PLAN , PREMIUM PLAN, & ULITMATE PLAN.
✓ It shows the features included in the plan listed.
It shows the features excluded in the plan listed.
If you’re finding difficulty understanding what is written in this blog you can also watch a video tutorial.
In the video, you’ve seen the Responsive Pricing Card (Pricing Tables).There are many different ways to create this Pricing Card(Price List), one of which is the way we have designed it.
If you like this Responsive Pricing Card (Pricing Tables) and want to use it in your project you can freely copy & use it without any restriction, And you can take Pricing Tables to the next level with your creativity.
So to create these Pricing Tables you need to create two different files. The two files are index.html and another one is a style.css file. Remember when you create an HTML file don’t forget to add a .html extension on HTML file and .css extension to your style file.
Let’s create a Cascading Style Sheet(CSS) file with the name of style.css and paste the below codes in your HTML file. Remember you’ve to create a file with a .css extension
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
background: linear-gradient(0deg, rgba(240,101,36,0.6727065826330532) 0%, rgba(255,100,100,1) 100%);
}
.wrapper{
max-width: 1090px;
width: 100%;
margin: auto;
display: flex;
flex-wrap: wrap;
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);
text-align: center;
}
.table .price-section{
display: flex;
justify-content: center;
}
.table .price-area{
height: 120px;
width: 120px;
border-radius: 50%;
padding: 2px;
}
.aj_p{
text-align: center;
}
p.aj_des {
color: grey;
padding-bottom: 30px;
font-size: 14px;
}
.table.premium {
margin: -20px;
}
.premium_all {
padding-top: 22px;
}
.price-area .inner-area{
height: 100%;
width: 100%;
line-height: 117px;
text-align: center;
color: #fff;
position: relative;
}
.price-area .inner-area .text{
font-size: 25px;
font-weight: 400;
position: absolute;
top: -10px;
left: 5px;
}
.price-area .inner-area .price{
font-size: 45px;
font-weight: 500;
margin-left: 16px;
}
.table .package-name{
width: 100%;
height: 2px;
margin :35px 0;
position: relative;
}
.table .features li{
margin-bottom: 15px;
list-style: none;
display: flex;
justify-content: space-between;
}
.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{
width: 100%;
display: flex;
justify-content: center;
}
.table .btn button{
width: 80%;
height: 50px;
color: #fff;
font-size: 20px;
font-weight: 500;
border: none;
outline: none;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
}
.table .btn button:hover{
border-radius: 5px;
}
.basic ::selection,
.basic .price-area,
.basic .inner-area,
.basic .head_tab h2{
color:red;
}
.basic .btn button{
background: red;
color: #fff;
margin-top: -75px;
}
.basic .btn button:hover{
background: rgba(240, 101,36);
color: #fff;
}
.premium ::selection,
.premium .price-area,
.premium .inner-area,
.premium .head_tab h2{
color:#ba24f0;
}
.premium .btn button{
background: #ba24f0;
color: #fff;
margin-top: -75px;
}
.premium .btn button:hover{
background: rgba(240, 101,36);
color: #fff;
}
.ultimate ::selection,
.ultimate .price-area,
.ultimate .inner-area,
.ultimate .head_tab h2{
color:#f5b55a;
}
.ultimate .btn button{
background: #f5b55a;
color: #fff;
margin-top: -75px;
}
.ultimate .btn button:hover{
background: rgba(240, 101,36);
color: #fff;
}
@media (max-width:756px){
.wrapper .table{
width: 100%;
}
.table.premium{
margin: 40px 0px;
}
.table.ultimate{
margin: 0px;
}
}
::selection{
color:#fff;
}
.table .ribbon{
width: 150px;
height: 150px;
position: absolute;
top: -10px;
left: -10px;
overflow: hidden;
}
.table .ribbon::before,
table .ribbon::after{
position: absolute;
content: "";
z-index: -1;
display: block;
border: 7px solid #ba24f0;
border-top-color: transparent;
border-left-color: transparent;
}
.table .ribbon::before{
top: 0px;
right: 15px;
}
.table .ribbon::after{
bottom: 15px;
left: 0px;
}
.table .ribbon span{
position: absolute;
top:30px;
right: 0;
transform: rotate(-45deg);
width: 200px;
background: #ba24f0;
padding: 10px 0;
color: #fff;
text-align: center;
font-size: 17px;
box-shadow: 0 5px 10px rgba(0,0,0,0.12);
}
Now create a Hypertext Markup Language(HTML) with the name of index.html and paste the below codes in your HTML file. Remember you’ve to create a file with a .html extension
Pricing Tables using HTML & CSS | MultiWebPress
Single
Web Hosting
Ideal solution for beginners
₹
29/mo
₹159/mo when you renew
-
1 Website
-
~10000 Visits Monthly
-
30 GB SSD Storage
-
100 GB Bandwidth
See all features
Premium
Web Hosting
Perfect package for personal
BEST VALUE
₹
59/mo
₹159/mo when you renew
-
50 Website
-
~25000 Visits Monthly
-
60 GB SSD Storage
-
200 GB Bandwidth
See all features
Ultimate
Web Hosting
Perfect package for businesses
₹
99/mo
₹159/mo when you renew
-
100 Website
-
~75000 Visits Monthly
-
200 GB SSD Storage
-
500 GB Bandwidth
See all features
After creating these two files & pasting codes, now run the files in your browser. You can run to any browser you have on your computer. (Google Chrome, Firefox, Internet explorer etc.)
That’s all, now you’ve successfully created Responsive Pricing Card (Pricing Tables) using HTML & CSS.
If your code does have any bugs/errors/ or you’re facing any problems, then please comment down below or contact us from the contact us page.
Hope you enjoyed reading and watching the video. Please do like and subscribe to my youtube channel & follow me on Instagram.
Thanks in Advance!