<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 text-center"> <div class="col-md-12"> <br/><br/> <h3> Hope you enjoy this snipppet, for more go to <a href="http://www.htmlbootstrap.com/" target="_blank" style="text-decoration:none;color:red">www.htmlbootstrap.com</a> <br> <br><br> Special Thanks to Bootsnipp </h3> <br/><br/> </div> </div> <div class="row "> <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> <div class="db-wrapper"> <div class="db-pricing-seven"> <ul> <li class="price"> <i class="glyphicon glyphicon-qrcode"></i> BASIC - 29 $ </li> <li>Web Designing</li> <li>Web Designing</li> <li>Logo Assesment</li> <li>Digital Marketing</li> </ul> <div class="pricing-footer"> <a href="#" class="btn btn-default btn-lg">BUY <i class="glyphicon glyphicon-play-circle"></i></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-seven"> <ul> <li class="price"> <i class="glyphicon glyphicon-indent-right"></i> MEDIUM - 49 $ </li> <li>Web Designing</li> <li>Logo Assesment</li> <li>Web Designing</li> <li>Logo Assesment</li> <li>Digital Marketing</li> </ul> <div class="pricing-footer"> <a href="#" class="btn btn-default btn-lg">BUY<i class="glyphicon glyphicon-play-circle"></i></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-seven"> <ul> <li class="price"> <i class="glyphicon glyphicon-list-alt"></i> ULTIMATE - 99 $ </li> <li>Web Designing</li> <li>Logo Assesment</li> <li>Digital Marketing</li> <li>Web Designing</li> <li>Logo Assesment</li> <li>Digital Marketing</li> </ul> <div class="pricing-footer"> <a href="#" class="btn btn-default btn-lg">BUY <i class="glyphicon glyphicon-play-circle"></i></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-seven"> <ul> <li class="price"> <i class="glyphicon glyphicon-align-justify"></i> EXTENDED - 199 $ </li> <li>Web Designing</li> <li>Logo Assesment</li> <li>Digital Marketing</li> <li>Web Designing</li> <li>Logo Assesment</li> <li>Digital Marketing</li> </ul> <div class="pricing-footer"> <a href="#" class="btn btn-default btn-lg">BUY <i class="glyphicon glyphicon-play-circle"></i></a> </div> </div> </div> </div> </div> <div class="row "> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="db-wrapper"> <div class="db-pricing-seven"> <ul> <li class="price"> <i class="glyphicon glyphicon-qrcode"></i> BASIC - 29 $ </li> <li>Web Designing</li> <li>Web Designing</li> <li>Logo Assesment</li> <li>Digital Marketing</li> </ul> <div class="pricing-footer"> <a href="#" class="btn btn-default btn-lg">BUY <i class="glyphicon glyphicon-play-circle"></i></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-seven"> <ul> <li class="price"> <i class="glyphicon glyphicon-indent-right"></i> MEDIUM - 49 $ </li> <li>Web Designing</li> <li>Logo Assesment</li> <li>Web Designing</li> <li>Logo Assesment</li> <li>Digital Marketing</li> </ul> <div class="pricing-footer"> <a href="#" class="btn btn-default btn-lg">BUY<i class="glyphicon glyphicon-play-circle"></i></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-seven"> <ul> <li class="price"> <i class="glyphicon glyphicon-list-alt"></i> ULTIMATE - 99 $ </li> <li>Web Designing</li> <li>Logo Assesment</li> <li>Digital Marketing</li> <li>Web Designing</li> <li>Logo Assesment</li> <li>Digital Marketing</li> </ul> <div class="pricing-footer"> <a href="#" class="btn btn-default btn-lg">BUY <i class="glyphicon glyphicon-play-circle"></i></a> </div> </div> </div> </div> </div> </div>

/*============================================================= Authour URL: www.designbootstrap.com http://www.designbootstrap.com/ License: MIT ======================================================== */ .db-pricing-seven { margin-bottom: 30px; margin-top: 30px; text-align: center; border: 1px solid #C5C2C2; background-color: #EDEDED; } .db-pricing-seven:hover { margin-top: 5px; -moz-transition: margin-top 0.25s ease 0s; -ms-transition: margin-top 0.25s ease 0s; transition: margin-top 0.25s ease 0s; } .db-pricing-seven ul { list-style: none; margin: 0; text-align: center; padding-left: 0px; } .db-pricing-seven ul li { border-bottom: solid 1px #D8D8D8; padding-top: 20px; padding-bottom: 20px; cursor: pointer; text-transform: uppercase; } .db-pricing-seven ul li.price { background-color: #fff; padding: 40px 20px 20px 20px; font-size: 20px; font-weight: 900; color: #353c3e; font-weight: 900; } .db-pricing-seven ul li.price i { padding: 30px; font-size: 50px; display: block; } .db-pricing-seven .pricing-footer { padding: 20px; } .db-pricing-seven .pricing-footer a i { margin: 5px; top: 3px; }