Pricing Table Using HTML and CSS (Source Code)

Pricing Table Using HTML and CSS (Source Code)

Pricing Table Using HTML and CSS (Source Code)

Pricing Table Using HTML and CSS
Pricing Table Using HTML and CSS

 

Hey friends, today we will see how to make these cool Pricing Table or Pricing cards. We use HTML and CSS for creating Pricing Tables. 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 Code For Pricing Table

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:

5+ HTML CSS Projects With Source Code

 

Pricing Table Using HTML and CSS
Pricing Table Using HTML and CSS

 

 

Now let’s use CSS to style the Pricing Table.

Portfolio Website using HTML and CSS (Source Code)

CSS Code For Pricing Table

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;
}

There are all css codes for the 3 Pricing Table Cards we give different colors to cards. we add dummy information to the card so you can customize it yourself. here is a live preview of the pricing table card👇.

Final Output Of Pricing Table Using HTML and CSS

Pricing Table Using HTML and CSS
Pricing Table Using HTML and CSS

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

And that’s all for this project!

written by @codingporium

Thanks for reading!



Leave a Reply