<style>
.block.packges-wrapper{
text-align: center;
}
.pricing {
text-align: center;
border: 1px solid rgba(179, 174, 174, 0.52);
color: #777;
font-size: 14px;
padding-left: 0;
margin-bottom: 30px;
font-family: 'Lato';
width: 22%;
display: inline-block;
margin: 0 10px;
}
.pricing li:first-child {
padding: 20px 13px;
background-color: #3498db;
}
.pricing li + li {
border-top: 1px solid #f0f0f0;
}
.pricing li {
list-style: none;
padding: 9px;
}
.pricing li:nth-child(even){background-color: #f2f2f2}
.pricing big {
font-size: 32px;
}
.p-yel big,
.p-green big ,
.p-red big{
color: #FFF;
}
.p-green h3 {
color: #4c7737;
}
.p-yel h3 {
color: #ffbb42;
}
.p-red h3 {
color: #e13c4c;
}
.p-blue big, .p-blue h3 {
color: #3f4bb8;
}
.pricing button {
width: auto;
margin: auto;
font-size: 15px;
font-weight: bold;
border-radius: 50px;
color: #fff;
padding: 9px 24px;
background: #aaa;
opacity: 1;
transition: opacity .2s ease;
border: none;
outline: none;
}
.p-green button {
background: #4c7737;
}
.p-yel button {
background: #ffbb42;
}
.p-red button {
background: #e13c4c;
}
.p-blue button {
background: #3f4bb8;
}
/*.p-green li {
background-color: #f1c40f;
}
.p-yel li {
background-color: #e67e22;
}
.p-red li {
background-color: #e74c3c;
}*/
</style>
html
<!-- start packges -->
<section class="container">
<div class="row white">
<div class="block packges-wrapper">
<div class="col-xs-12 col-sm-6 col-md-12">
<ul class="pricing p-green">
<li>
<img src="http://bread.pp.ua/n/settings_g.svg" alt="">
<big>Start</big>
</li>
<li>Responsive Design</li>
<li>Color Customization</li>
<li>HTML5 & CSS3</li>
<li>Styled elements</li>
<li>
<h3>$199</h3>
<span>per month</span>
</li>
<li>
<button>Join Now</button>
</li>
</ul>
<ul class="pricing p-yel">
<li>
<img src="http://bread.pp.ua/n/settings_y.svg" alt="">
<big>Good</big>
</li>
<li>Responsive Design</li>
<li>Color Customization</li>
<li>HTML5 & CSS3</li>
<li>Styled elements</li>
<li>
<h3>$299</h3>
<span>per month</span>
</li>
<li>
<button>Join Now</button>
</li>
</ul>
<ul class="pricing p-red">
<li>
<img src="http://bread.pp.ua/n/settings_r.svg" alt="">
<big>Ultima</big>
</li>
<li>Responsive Design</li>
<li>Color Customization</li>
<li>HTML5 & CSS3</li>
<li>Styled elements</li>
<li>
<h3>$399</h3>
<span>per month</span>
</li>
<li>
<button>Join Now</button>
</li>
</ul>
</div>
</div><!-- /block -->
</div><!-- /row -->
</section>
<!-- end packges -->
