<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="mega-pricing-item gradient-style-1">
<div class="pricing-icon">
<i class="fa fa-heart-o"></i>
</div>
<h3><strong>Basic</strong> Plan</h3>
<ul>
<li><strong>Manage</strong> tasks</li>
<li><strong>Sync</strong> notes</li>
<li><strong>Set</strong> deadline</li>
</ul>
<h1><span>$</span>100</h1>
<p class="pricing-duration">Per month</p>
<a href="http://bootstraptema.ru/stuff/snippets_bootstrap/prices/jarkie_prajsy_tarifov/26-1-0-2006" class="bordered-btn">Buy now</a>
</div>
</div>
<div class="col-sm-4">
<div class="mega-pricing-item gradient-style-2 active">
<div class="pricing-icon">
<i class="fa fa-plane"></i>
</div>
<h3><strong>Advance</strong> Plan</h3>
<ul>
<li><strong>Manage</strong> tasks</li>
<li><strong>Sync</strong> notes</li>
<li><strong>Another</strong> item</li>
<li><strong>Set</strong> deadline</li>
</ul>
<h1><span>$</span>200</h1>
<p class="pricing-duration">Per month</p>
<a href="http://bootstraptema.ru/stuff/snippets_bootstrap/prices/jarkie_prajsy_tarifov/26-1-0-2006" class="boxed-btn">Buy now</a>
</div>
</div>
<div class="col-sm-4">
<div class="mega-pricing-item gradient-style-3">
<div class="pricing-icon">
<i class="fa fa-grav"></i>
</div>
<h3><strong>Mega</strong> Plan</h3>
<ul>
<li><strong>Manage</strong> tasks</li>
<li><strong>Sync</strong> notes</li>
<li><strong>Another</strong> item</li>
<li><strong>Second</strong> option</li>
<li><strong>Set</strong> deadline</li>
</ul>
<h1><span>$</span>300</h1>
<p class="pricing-duration">Per month</p>
<a href="http://bootstraptema.ru/stuff/snippets_bootstrap/prices/jarkie_prajsy_tarifov/26-1-0-2006" class="bordered-btn">Buy now</a>
</div>
</div>
</div><!-- ./row -->
</div><!-- ./container -->
/* demo background */
body{background: #fff}
/* style pricing */
.mega-pricing-item {
background: #fff none repeat scroll 0 0;
box-shadow: 0 0 10px #f1f1f1;
padding: 30px;
text-align: center;
}
.bordered-btn {
border: 1px solid;
color: #fff;
display: inline-block;
font-weight: 700;
padding: 10px 30px;
text-transform: uppercase;
}
.bordered-btn {
border-radius: 3px;
}
.bordered-btn:hover {
color: #fff;
background-color: #1360f4;
border-color: #1360f4;
text-decoration:none}
.boxed-btn {
display: inline-block;
font-weight: 600;
text-transform: uppercase
}
.boxed-btn {
border-radius: 2px;
font-size: 14px;
margin-top: 15px;
padding: 10px 30px;
color: #fff
}
.boxed-btn:hover{
background-color: #333;
color: #fff;
text-decoration:none
}
.mega-pricing-item ul {
line-height: 35px;
list-style: outside none none;
margin: 0;
min-height: 198px;
padding: 0;
}
.mega-pricing-item a.boxed-btn {
margin: 0;
}
.mega-pricing-item h1 {
font-size: 55px;
font-weight: 300;
}
.mega-pricing-item h1 span {
font-size: 25px;
padding-right: 3px;
}
.mega-pricing-item h3 {
font-size: 25px;
font-weight: 300;
}
.gradient-style-1 {
background: #e62f17;
background: -webkit-linear-gradient(45deg, #e62f17 0%, #f2ba30 100%);
background: linear-gradient(45deg, #e62f17 0%, #f2ba30 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e62f17', endColorstr='#f2ba30', GradientType=1);
}
.gradient-style-2 {
background: #0a3466;
background: -webkit-linear-gradient(45deg, #0a3466 0%, #17b6e3 100%);
background: linear-gradient(45deg, #0a3466 0%, #17b6e3 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0a3466', endColorstr='#17b6e3', GradientType=1);
}
.gradient-style-3 {
background: #18b9e5;
background: -webkit-linear-gradient(45deg, #18b9e5 0%, #81d9b8 100%);
background: linear-gradient(45deg, #18b9e5 0%, #81d9b8 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#18b9e5', endColorstr='#81d9b8', GradientType=1);
}
.gradient-style-1,
.gradient-style-2,
.gradient-style-3 {
color: #fff;
box-shadow: 0 0 10px #ccc
}
.pricing-icon {
font-size: 80px;
line-height: 80px;
margin-bottom: 20px;
}
.gradient-style-1 a,
.gradient-style-2 a,
.gradient-style-3 a {
background-color: transparent;
border: 1px solid #fff;
color: #fff;
}
.pricing-duration {
margin-top: -15px;
margin-bottom: 15px;
font-size: 12px;
}
.mega-pricing-item.flat-style-pricing {
border: 1px solid #f7f9fc;
box-shadow: 0 0 0;
}
.mega-pricing-item.flat-style-pricing.active {
border-top: 3px solid;
box-shadow: 0 0 10px #f1f1f1;
}
.mega-pricing-item h3 span {
display: block;
font-size: 14px;
line-height: 20px;
}
