Markup
<section class="section-padding"> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="section-title"> <h2>Pricing <span>Plans</span></h2> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse illum dolore eu feugiat nulla facilisis at vero eros et.</p> </div> </div> </div> <div class="row"> <div class="col-md-3"> <div class="single-pricing-box"> <h3>Personal</h3> <div class="pricing-icon"> <div class="pricing-icon-table"> <div class="pricing-icon-tablecell"> <img src="assets/img/price_icon1.png" alt="Price Icon"> </div> </div> </div> <div class="pricing-list"> <ul> <li>2 GB Web Space</li> <li>Free Domain Register</li> <li class="special">Special Offers</li> <li>Service Uptime</li> </ul> </div> <h3 class="pricing-amount">$15/mo</h3> <a href="#" class="bordered-button">Order now</a> </div> </div> <div class="col-md-3"> <div class="single-pricing-box"> <h3>Professional</h3> <div class="pricing-icon"> <div class="pricing-icon-table"> <div class="pricing-icon-tablecell"> <img src="assets/img/price_icon2.png" alt="Price Icon"> </div> </div> </div> <div class="pricing-list"> <ul> <li>2 GB Web Space</li> <li>Free Domain Register</li> <li class="special">Special Offers</li> <li>Service Uptime</li> </ul> </div> <h3 class="pricing-amount">$15/mo</h3> <a href="#" class="bordered-button">Order now</a> </div> </div> <div class="col-md-3"> <div class="single-pricing-box"> <h3>Business</h3> <div class="pricing-icon"> <div class="pricing-icon-table"> <div class="pricing-icon-tablecell"> <img src="assets/img/price_icon3.png" alt="Price Icon"> </div> </div> </div> <div class="pricing-list"> <ul> <li>2 GB Web Space</li> <li>Free Domain Register</li> <li class="special">Special Offers</li> <li>Service Uptime</li> </ul> </div> <h3 class="pricing-amount">$15/mo</h3> <a href="#" class="bordered-button">Order now</a> </div> </div> <div class="col-md-3"> <div class="single-pricing-box"> <h3>Enterprise</h3> <div class="pricing-icon"> <div class="pricing-icon-table"> <div class="pricing-icon-tablecell"> <img src="assets/img/price_icon4.png" alt="Price Icon"> </div> </div> </div> <div class="pricing-list"> <ul> <li>2 GB Web Space</li> <li>Free Domain Register</li> <li class="special">Special Offers</li> <li>Service Uptime</li> </ul> </div> <h3 class="pricing-amount">$15/mo</h3> <a href="#" class="bordered-button">Order now</a> </div> </div> </div> </div> </section>
Style
/* Base CSS */ .alignleft { float: left; margin-right: 15px; } .alignright { float: right; margin-left: 15px; } .aligncenter { display: block; margin: 0 auto 15px; } a:focus { outline: 0 solid } img { max-width: 100%; height: auto; } h1, h2, h3, h4, h5, h6 { margin: 0 0 15px; font-weight: 700; } body { } a:hover { text-decoration: none } section.section-padding { padding: 80px; } body { color: #787978; } .section-title { margin-bottom: 50px; text-align: center; } h1, h2, h3, h4, h5, h6 { color: #333; } .section-title h2 span { color: #26a65b; } .single-pricing-box { border: 1px solid #ddd; padding: 30px; text-align: center; transition: 0.3s; } .single-pricing-box img { transition: 0.3s; } .single-pricing-box:hover { border-color: #26A65B; box-shadow: 0 0 30px #a9a9a9; } .single-pricing-box:hover img { opacity: 0.7; } .single-pricing-box h3 { margin-bottom: 30px; text-transform: uppercase; } .pricing-icon-table { display: table; height: 60px; width: 100%; } .pricing-icon-tablecell { display: table-cell; vertical-align: middle; } .pricing-icon { margin-bottom: 30px; } .pricing-list ul { list-style: outside none none; margin: 0; padding: 0; padding-left: 20px; line-height: 25px; } .pricing-list ul li:before { font-family: fontAwesome; content: "\f00c"; color: #26A65B; padding-right: 10px; } .pricing-list ul li.special:before { font-family: fontAwesome; content: "\f00d"; color: #F01313; } .pricing-list { margin: 0 auto 25px; max-width: 200px; text-align: left; } .single-pricing-box h3.pricing-amount { text-transform: none; } a.bordered-button { border: 1px solid #26a65b; border-radius: 50px; color: #333; display: inline-block; padding: 10px 30px; transition: 0.3s; } a.bordered-button:hover { background: #26A65B; color: #fff; }