Hello friends, today in this blog you’ll learn Create a Pricing Table Using Html Css . We’ll use Html & Css to create this Awesomes Pricing Table . Earlier I’ve shared a blog on How to Create a Drop Down Menu Using Html & Css .
If You have any Problem so, I Also Created a full video tutorial on this Pricing Table Using Html Css you can see this tutorial .
Video Tutorial of ” Create a Pricing Table Using Html Css “
You might like this:
- Animated Login Form Using HTML & CSS
- Download Button With Countdown Timer | Using Html Css Js
- Css Image Hover Effect Using Html Css | Css Image Card Hover Effect
Create a Pricing Table Using Html Css [Source Codes]
To create this Pricing Table First, you need to create Two files, HTML File And CSS File. After creating these files Just copy the given source code and paste into your text editor and edit it according to your requirement. You can also download the source code files of this Pricing Table Using Html Css from the given download button.
# HTML CODE
First, create a Html file (index.html) and paste the given codes in your HTML file.
<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>
# CSS CODE
Second, you create anCSS file(style.css) and paste the given codes in your CSS file.
/* Coding With Nick */
/* General Css */
*{
box-sizing: border-box;
}
body{
margin: 0;
font-family: 'raleway', sans-serif;
background: #ffffff;
}
a{
outline: none;
text-decoration: none;
transition: 0.3s;
}
h2{
margin: 0;
padding: 0;
font-family: 'Nunito', 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: #5395ff;
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: #5395ff;
}
.pricing-table.table .ptable-item.featured-item .ptable-header{
background: #71ce73;
}
.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: #5395ff;
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;
color: #ffffff;
font-size: 14px;
font-weight: 500;
letter-spacing: 2px;
background: #5395ff;
border-radius: 50px;
}
.pricing-table.table .ptable-action a i{
margin-right: 5px;
}
.pricing-table.table .ptable-action a:hover{
background: #71ce73;
}
.pricing-table.table .ptable-item.featured-item .ptable-action a{
background: #71ce73;
}
.pricing-table.table .ptable-item.featured-item .ptable-action a:hover{
background: #5395ff;
}That’s all, now you’ve successfully Create a Pricing Table Using Html Css . If your code doesn’t work or you’ve faced any error And problem’s , please download the source code from the given download button. It’s free and a .zip file will be downloaded then you’ve extract it.
Read More –
