Pricing table
Written by 23 February 2014
A nice table designed for the websites that have something for purchasing. This table shows an outstanding column and make it interesting for user. Design by html and css3.
Code Snippet:
<!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<!-- this script got from www.htmlbestcodes.com-Coded by: Krishna Eydat -->
<html>
<head>
<style>
/*Basic Reset*/
* {margin: 0; padding: 0;}
.pricing_table {
width: 600px;
color: #fff;
font-size: 12px;
font-family: Ubuntu, arial, verdana;
line-height: 150%;
text-align: center;
margin: 10px auto 0 auto;
}
/*Only the direct LI child, not the .features li*/
.pricing_table>li {
background: linear-gradient(#666, #333);
width: 33.33%;
float: left;
list-style-type: none;
/*For smooth hover effects if .active is replaced by :hover*/
transition: all 0.2s;
}
.pricing_table>li.active {
background: linear-gradient(#F9B84A, #DB7224);
transform: scale(1.03);
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.5);
}
.pricing_table h3 {
text-transform: uppercase;
padding: 15px 0;
font-size: 14px;
font-weight: bold;
}
.pricing_table .price_body {
width: 125px;
height: 125px;
margin: 0 auto 15px auto;
border: 2px solid #fff;
border-radius: 100%;
display: table;
}
.pricing_table .price {
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
/*Lets vertically center align the price now*/
vertical-align: middle;
display: table-cell;
}
.pricing_table .price .price_figure {
display: block;
}
.pricing_table .price .price_term {
font-size: 11px;
font-weight: normal;
}
.pricing_table .features li {
list-style-type: none;
padding: 5px 0;
}
.pricing_table .footer {
padding: 10px;
background: #333;
margin-top: 10px;
}
.pricing_table .footer .action_button{
color: #fff;
font-size: 11px;
display: inline-block;
text-decoration: none;
font-weight: bold;
background: #000;
padding: 4px 20px;
border-radius: 15px;
background: linear-gradient(#666, #333);
}
.pricing_table li.active .footer .action_button {
background: linear-gradient(#F9B84A, #DB7224);
}
.clr {clear: both;}
</style>
</head>
<body>
<ul class="pricing_table">
<li>
<h3>Starter</h3>
<div class="price_body">
<div class="price">
Free
</div>
</div>
<div class="features">
<ul>
<li>Premium Profile Listing</li>
<li>Unlimited File Access</li>
<li>Free Appointments</li>
<li><strong>5 Bonus Points</strong> every month</li>
<li>Customizable Profile Page</li>
<li><strong>2 months</strong> support</li>
</ul>
</div>
<div class="footer">
<a href="#" class="action_button">Get Started</a>
</div>
</li>
<!-- Active/Hover styles -->
<li class="active">
<h3>Basic</h3>
<div class="price_body">
<div class="price">
<span class="price_figure">$24</span>
<span class="price_term">per month</span>
</div>
</div>
<div class="features">
<ul>
<li>Premium Profile Listing</li>
<li>Unlimited File Access</li>
<li>Free Appointments</li>
<li><strong>20 Bonus Points</strong> every month</li>
<li>Customizable Profile Page</li>
<li><strong>6 months</strong> support</li>
</ul>
</div>
<div class="footer">
<a href="#" class="action_button">Get Started</a>
</div>
</li>
<li>
<h3>Premium</h3>
<div class="price_body">
<div class="price">
<span class="price_figure">$49</span>
<span class="price_term">per month</span>
</div>
</div>
<div class="features">
<ul>
<li>Premium Profile Listing</li>
<li>Unlimited File Access</li>
<li>Free Appointments</li>
<li><strong>50 Bonus Points</strong> every month</li>
<li>Customizable Profile Page</li>
<li><strong>Lifetime</strong> support</li>
</ul>
</div>
<div class="footer">
<a href="#" class="action_button">Get Started</a>
</div>
</li>
<!-- To prevent .pricing_table height collapse(as its children are floated) -->
<div class="clr"></div>
</ul>
<div><a target="_blank" href="http://www.htmlbestcodes.com/"><span style="font-size: 8pt; text-decoration: none">HTML Best Codes</span></a></div>
</body>
</html><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Online Users:
12
Recent Members:
TheDewalt, sahjahan, fk khan, Proper, Jenisha
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!