Pricing tables templates | Pricing Tables using HTML & CSS – codewithranom

Pricing tables templates | Pricing Tables using HTML & CSS – codewithranom


Hey friends, today we will see how to make these cool pricing tables or cards. The demo is available at the bottom of the page.


Now let’s see the general use of this project. There are 3 pricing cards here. These are for different packages or services. You may have seen a similar interface in streaming sites like Netflix, Hotstar, Hulu, and More. They have different packages and the comparison is shown in pricing tables like this.

Now let’s see the codes!


HTML Codes

Paste the codes below:

    <div class="pricing-table-title">
<h2>Pricing Table</h2>
</div>
<div class="pricing-table table">

<div class="ptable-item">
<div class="ptable-single">

<div class="ptable-header">
<div class="ptable-icon">
<i class="fa fa-home"></i>
</div>
<div class="ptable-title">
<h2>Silver</h2>
</div>
<div class="ptable-price">
<h2><small>$</small>99 <span>/ M</span></h2>
</div>
</div>

<div class="ptable-body">
<div class="ptable-description">
<ul>
<li>Pure HTML & CSS</li>
<li>Google Font</li>
<li>Fontawesome Icons</li>
<li>Responsive Design</li>
<li>Well-commented Code</li>
<li>Easy to use</li>
</ul>
</div>
</div>

<div class="ptable-footer">
<div class="ptable-action">
<a href="#"><i class="fa fa-shopping-cart"></i>Buy Now</a>
</div>
</div>
</div>
</div>

<div class="ptable-item featured-item">
<div class="ptable-single">

<div class="ptable-header">
<div class="ptable-icon">
<i class="fa fa-star"></i>
</div>
<div class="ptable-title">
<h2>Gold</h2>
</div>
<div class="ptable-price">
<h2><small>$</small>199 <span>/ M</span></h2>
</div>
</div>

<div class="ptable-body">
<div class="ptable-description">
<ul>
<li>Pure HTML & CSS</li>
<li>Google Font</li>
<li>Fontawesome Icons</li>
<li>Responsive Design</li>
<li>Well-commented Code</li>
<li>Easy to use</li>
</ul>
</div>
</div>

<div class="ptable-footer">
<div class="ptable-action">
<a href="#"><i class="fa fa-shopping-cart"></i>Buy Now</a>
</div>
</div>
</div>
</div>

<div class="ptable-item">
<div class="ptable-single">

<div class="ptable-header">
<div class="ptable-icon">
<i class="fa fa-gift"></i>
</div>
<div class="ptable-title">
<h2>Platinum</h2>
</div>
<div class="ptable-price">
<h2><small>$</small>299 <span>/ M</span></h2>
</div>
</div>

<div class="ptable-body">
<div class="ptable-description">
<ul>
<li>Pure HTML & CSS</li>
<li>Google Font</li>
<li>Fontawesome Icons</li>
<li>Responsive Design</li>
<li>Well-commented Code</li>
<li>Easy to use</li>
</ul>
</div>
</div>

<div class="ptable-footer">
<div class="ptable-action">
<a href="#"><i class="fa fa-shopping-cart"></i>Buy Now</a>
</div>
</div>
</div>
</div>




</div>


The output would be:

Now let’s use CSS to style it.


CSS Codes

Paste the CSS Codes below:

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');  

*{
box-sizing: border-box;
}

body{
margin: 0;
font-family: 'poppins', sans-serif;
background: #ffffff;
}

a{
outline: none;
text-decoration: none;
transition: 0.3s;
}
h2{
margin: 0;
padding: 0;
font-family: poppins, sans-serif;
}
p{
margin: 0;
padding: 0;
}
.pricing-table-title{
position: relative;
width: 100%;
text-align: center;
margin: 60px 0 15px 0;
}
.pricing-table-title:first-child{
margin-top: 30px;
}
.pricing-table-title h2{
font-size: 35px;
font-weight: 900;
color: gold;
letter-spacing: 2px;
}

/* pricing table Style */

.pricing-table{
display: flex;
flex-flow: row wrap;
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
.pricing-table .ptable-item{
width: 33.33%;
padding: 15px;
}
.pricing-table .ptable-single{
position: relative;
width: 100%;
overflow: hidden;
}
.pricing-table .ptable-header,
.pricing-table .ptable-body,
.pricing-table .ptable-footer {
position: relative;
width: 100%;
text-align: center;
background:#ffffff ;
overflow: hidden;
}
.pricing-table .ptable-title,
.pricing-table .ptable-price,
.pricing-table .ptable-description,
.pricing-table .ptable-action{
position: relative;
width: 100%;
text-align: center;
}

/* Pricing table */

.pricing-table.table .ptable-single:hover{
box-shadow: 0 0 10px #999999;
}
.pricing-table.table .ptable-header{
padding: 30px 0 50px 0;
background: #d909a5;
}
.pricing-table.table .ptable-item.featured-item .ptable-header{
background: #8400db;
}
.pricing-table.table .ptable-icon{
margin-bottom: 15px;
}
.pricing-table.table .ptable-icon i{
display: inline-block;
color: #ffffff;
font-size: 45px;
}
.pricing-table.table .ptable-title h2{
color: #ffffff;
font-size: 24px;
font-weight: 300;
margin-left: 2px;
}
.pricing-table.table .ptable-price h2{
color: #ffffff;
font-size: 60px;
font-weight: 900;
margin-left: 15px;
}
.pricing-table.table .ptable-price h2 small{
position: absolute;
font-size: 18px;
font-weight: 900;
margin-left: -15px;
margin-top: 16px;
}
.pricing-table.table .ptable-price h2 span{
font-size: 16px;
font-weight: 300;
margin-left: 3px;

}
.pricing-table.table .ptable-body{
padding: 30px 0;
background: #f7f7f7;
border-radius: 30px 30px 0 0;
margin-top: -30px;
}
.pricing-table.table .ptable-description ul{
margin: 0;
padding: 0;
list-style: none;
}
.pricing-table.table .ptable-description ul li{
color: #dbb700;
font-size: 14px;
font-weight: 300;
letter-spacing: 1px;
padding: 7px;
}
.pricing-table.table .ptable-description ul li:last-child{
border: none;
}
.pricing-table.table .ptable-footer{
padding-bottom: 30px;
background: #f7f7f7;
}

.pricing-table.table .ptable-action a{
display: inline-block ;
padding: 10px 20px;
font-family: poppins;
color: #ffffff;
font-size: 14px;
font-weight: 500;
letter-spacing: 2px;
background: #d909a5;
border-radius: 50px;
}
.pricing-table.table .ptable-action a i{
margin-right: 5px;
}
.pricing-table.table .ptable-action a:hover{
background: #8400db;
}
.pricing-table.table .ptable-item.featured-item .ptable-action a{
background: #8400db;
}
.pricing-table.table .ptable-item.featured-item .ptable-action a:hover{
background: #d909a5;
}


The final output would be:

And that’s all for this project!

Check out more…..

written by @codingporium

Thanks for reading! Do contact me via the methods below if you have to say anything:

Leave a Reply