<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 db-padding-btm db-attached"> <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> <div class="db-wrapper"> <div class="db-pricing-eleven db-bk-color-one"> <div class="price"> ^$99 <small>per quarter</small> </div> <div class="type"> BASIC PLAN </div> <ul> <li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li> <li><i class="glyphicon glyphicon-time"></i>150+ Projects </li> <li><i class="glyphicon glyphicon-trash"></i>Lead Required</li> </ul> <div class="pricing-footer"> <a href="#" class="btn db-button-color-square btn-lg">BOOK ORDER</a> </div> </div> </div> </div> <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> <div class="db-wrapper"> <div class="db-pricing-eleven db-bk-color-two popular"> <div class="price"> ^$199 <small>per quarter</small> </div> <div class="type"> MEDIUM PLAN </div> <ul> <li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li> <li><i class="glyphicon glyphicon-time"></i>150+ Projects </li> <li><i class="glyphicon glyphicon-trash"></i>Lead Required</li> </ul> <div class="pricing-footer"> <a href="#" class="btn db-button-color-square btn-lg">BOOK ORDER</a> </div> </div> </div> </div> <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> <div class="db-wrapper"> <div class="db-pricing-eleven db-bk-color-three"> <div class="price"> ^$249 <small>per quarter</small> </div> <div class="type"> ADVANCE PLAN </div> <ul> <li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li> <li><i class="glyphicon glyphicon-time"></i>150+ Projects </li> <li><i class="glyphicon glyphicon-trash"></i>Lead Required</li> </ul> <div class="pricing-footer"> <a href="#" class="btn db-button-color-square btn-lg">BOOK ORDER</a> </div> </div> </div> </div> <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> <div class="db-wrapper"> <div class="db-pricing-eleven db-bk-color-six"> <div class="price"> ^$599 <small>per quarter</small> </div> <div class="type"> EXTENDED PLAN </div> <ul> <li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li> <li><i class="glyphicon glyphicon-time"></i>150+ Projects </li> <li><i class="glyphicon glyphicon-trash"></i>Lead Required</li> </ul> <div class="pricing-footer"> <a href="#" class="btn db-button-color-square btn-lg">BOOK ORDER</a> </div> </div> </div> </div> </div> <div class="row db-padding-btm db-attached"> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="db-wrapper"> <div class="db-pricing-eleven db-bk-color-one"> <div class="price"> ^$99 <small>per quarter</small> </div> <div class="type"> SMALL PLAN </div> <ul> <li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li> <li><i class="glyphicon glyphicon-time"></i>150+ Projects </li> <li><i class="glyphicon glyphicon-trash"></i>Lead Required</li> </ul> <div class="pricing-footer"> <a href="#" class="btn db-button-color-square btn-lg">BOOK ORDER</a> </div> </div> </div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="db-wrapper"> <div class="db-pricing-eleven db-bk-color-two popular"> <div class="price"> ^$159 <small>per quarter</small> </div> <div class="type"> MEDIUM PLAN </div> <ul> <li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li> <li><i class="glyphicon glyphicon-time"></i>150+ Projects </li> <li><i class="glyphicon glyphicon-trash"></i>Lead Required</li> </ul> <div class="pricing-footer"> <a href="#" class="btn db-button-color-square btn-lg">BOOK ORDER</a> </div> </div> </div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="db-wrapper"> <div class="db-pricing-eleven db-bk-color-three"> <div class="price"> ^$799 <small>per quarter</small> </div> <div class="type"> ADVANCE PLAN </div> <ul> <li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li> <li><i class="glyphicon glyphicon-time"></i>150+ Projects </li> <li><i class="glyphicon glyphicon-trash"></i>Lead Required</li> </ul> <div class="pricing-footer"> <a href="#" class="btn db-button-color-square btn-lg">BOOK ORDER</a> </div> </div> </div> </div> </div> </div> </div>

/*============================================================= Authour URL: www.designbootstrap.com http://www.designbootstrap.com/ License: MIT ======================================================== */ /*============================================================ BACKGROUND COLORS ============================================================*/ .db-bk-color-one { background-color: #f55039; } .db-bk-color-two { background-color: #46A6F7; } .db-bk-color-three { background-color: #47887E; } .db-bk-color-six { background-color: #F59B24; } /*============================================================ PRICING STYLES ==========================================================*/ .db-padding-btm { padding-bottom: 50px; } .db-button-color-square { color: #fff; background-color: rgba(0, 0, 0, 0.50); border: none; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; } .db-button-color-square:hover { color: #fff; background-color: rgba(0, 0, 0, 0.50); border: none; } .db-pricing-eleven { margin-bottom: 30px; margin-top: 50px; text-align: center; box-shadow: 0 0 5px rgba(0, 0, 0, .5); color: #fff; line-height: 30px; } .db-pricing-eleven ul { list-style: none; margin: 0; text-align: center; padding-left: 0px; } .db-pricing-eleven ul li { padding-top: 20px; padding-bottom: 20px; cursor: pointer; } .db-pricing-eleven ul li i { margin-right: 5px; } .db-pricing-eleven .price { background-color: rgba(0, 0, 0, 0.5); padding: 40px 20px 20px 20px; font-size: 60px; font-weight: 900; color: #FFFFFF; } .db-pricing-eleven .price small { color: #B8B8B8; display: block; font-size: 12px; margin-top: 22px; } .db-pricing-eleven .type { background-color: #52E89E; padding: 50px 20px; font-weight: 900; text-transform: uppercase; font-size: 30px; } .db-pricing-eleven .pricing-footer { padding: 20px; } .db-attached > .col-lg-4, .db-attached > .col-lg-3, .db-attached > .col-md-4, .db-attached > .col-md-3, .db-attached > .col-sm-4, .db-attached > .col-sm-3 { padding-left: 0; padding-right: 0; } .db-pricing-eleven.popular { margin-top: 10px; } .db-pricing-eleven.popular .price { padding-top: 80px; }