<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 ----------> <section id="bs-pricing-five" class="bs-pricing-five p-top-100 bg-white"> <div class="container"> <div class="row"> <div class="bs-five-area bs-radius"> <div class="col-md-3 no-padding"> <div class="bs-five"> <h6 class="text-uppercase">Free Trial</h6> <h1 class="bs-caption">^$00</h1> <p>No Credit Cart Needed</p> <ul> <li><b>25 Free Images</b></li> <li>Custom Domain</li> <li>24/7 Customer Support</li> <li> </li> </ul> <a href="#0" class="btn btn-success btn-round m-top-40">Buy Now</a> </div> </div> <div class="col-md-3 no-padding"> <div class="bs-five active"> <h6 class="text-uppercase">Planet</h6> <h1 class="bs-caption">^$49</h1> <p>No Credit Cart Needed</p> <ul> <li><b>60 Free Images</b></li> <li>Monthly Backups</li> <li>Custom Domain</li> <li>24/7 Customer Support</li> </ul> <a href="#0" class="btn btn-success btn-round m-top-40">Buy Now</a> </div> </div> <div class="col-md-3 no-padding"> <div class="bs-five"> <h6 class="text-uppercase">Standard</h6> <h1 class="bs-caption">^$69</h1> <p>No Credit Cart Needed</p> <ul> <li><b>60 Free Images</b></li> <li>Monthly Backups</li> <li>Custom Domain</li> <li>24/7 Customer Support</li> </ul> <a href="#0" class="btn btn-success btn-round m-top-40">Buy Now</a> </div> </div> <div class="col-md-3 no-padding"> <div class="bs-five"> <h6 class="text-uppercase">Business</h6> <h1 class="bs-caption">^$89</h1> <p>No Credit Cart Needed</p> <ul> <li><b>60 Free Images</b></li> <li>Monthly Backups</li> <li>Custom Domain</li> <li>24/7 Customer Support</li> </ul> <a href="#0" class="btn btn-success btn-round m-top-40">Buy Now</a> </div> </div> </div> </div> </div> </section> <div style="text-align: center;margin-top: 150px; margin-bottom:100px"> | <a href="http://bootstrapthemes.co/"target="_blank"> Snippet By Bootstrapthemes.co </a> |</div>

/* Author: Bootstrapthemes Author URI: http://bootstrapthemes.co */ /* ========================================================================== Author's custom styles ========================================================================== */ .p-top-100{ padding:100px 0; } .m-top-40{ margin-top: 40px; } /*================================================= Pricint fiv ===================================================*/ .bs-five-area{ width:100%; display: inline-block; box-shadow: 0px 0px 6px 0px #ddd; overflow: hidden; position: relative; font-family: 'Open Sans', sans-serif; text-align: center; } .bs-five-area.bs-radius{ border-radius: 30px; } .bs-five-area > div{ padding:0; } .bs-five-area .bs-five{ position: relative; width: 100%; margin: auto; transition: all 0.4s; padding:20px 0px; } .bs-five-area .bs-five h6{ font-weight: 700; letter-spacing: 2px; } .bs-five-area .bs-five h1{ font-size:64px; font-weight: 100; line-height: 72px; } .bs-five-area .bs-five h1 sup{ font-size:30px; top:-30px; } .bs-five-area .bs-five ul { margin:0; padding:0; list-style: none; } .bs-five-area .bs-five ul li{ line-height: 45px; border-bottom:0px; } .bs-five-area .bs-five:hover{ background: #179880; transition: all 0.4s; } .bs-five-area .bs-five.active { background: #179880; background: -webkit-linear-gradient(left, #179880 , #21A476); background: -o-linear-gradient(right, #179880, #21A476); background: -moz-linear-gradient(right, #179880, #21A476); background: linear-gradient(to right, #179880 , #21A476); } .bs-five-area .bs-five .btn-success{ padding: 10px 50px; display: inline-block; border-radius: 30px; background-color: #179880; border-color: #21A476; } .bs-five-area .bs-five.active .btn.btn-success, .bs-five-area .bs-five:hover.bs-five .btn.btn-success{ background: #E0FFF6 ; color:#444 ; } .bs-five-area .bs-five.active, .bs-five-area .bs-five.active ul li, .bs-five-area .bs-five:hover.bs-five, .bs-five-area .bs-five:hover.bs-five ul li { color:#fff; } /*copyright ==================*/ .footer{ background-color: #333; } .copyright{ padding: 20px 10px; } .copyright p { font-size:12px; color:#fff; } .copyright p i { padding: 0px 5px; color: red; } .copyright p a { padding: 0px 5px; color: yellow; }