"Gradient Bootstrap Pricing Table"
Bootstrap 3.3.0 Snippet by jpknegtel

<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="section-content"> <h1 class="section-header">Our pricing is all P/M </h1> <h3>As you move along, you get all the features of the previous boxes</h3> </div> <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</h6> <h1 class="bs-caption"><sup>€</sup>0</h1> <p><b>For Startups</b></p> <hr> <ul> <li><b>Access to basic data</b></li> <li>Limited filters</li> <li>Weekly digest</li> <li> </li> </ul> <a href="#0" class="btn btn-success btn-round m-top-40">Signup now</a> </div> </div> <div class="col-md-3 no-padding"> <div class="bs-five active"> <h6 class="text-uppercase">Premium</h6> <h1 class="bs-caption"><sup>€</sup>200</h1> <p><b>Single seat</b></p> <hr> <ul> <li><b>All data & filters</b></li> <li><b>CSV export</b></li> <li>Growth signals</li> <li>Customer Support</li> </ul> <a href="#0" class="btn btn-success btn-round m-top-40">Free trial</a> </div> </div> <div class="col-md-3 no-padding"> <div class="bs-five"> <h6 class="text-uppercase">Premium Plus</h6> <h1 class="bs-caption"><sup>€</sup>350</h1> <p><b>For VC teams</b></p> <hr> <ul> <li><b>All other features </b></li> <li>4 custom reports a year</li> <li>Add seats for + 50</li> <li>Priority Customer Support</li> </ul> <a href="#0" class="btn btn-success btn-round m-top-40">Free trial</a> </div> </div> <div class="col-md-3 no-padding"> <div class="bs-five"> <h6 class="text-uppercase">Business</h6> <h1 class="bs-caption"><sup>€</sup>1000</h1> <p><b>For large companies</b></p> <hr> <ul> <li><b>API access</b></li> <li>Reports upon request</li> <li>Custom search</li> <li>Priority Customer Support</li> </ul> <a href="#0" class="btn btn-success btn-round m-top-40">Contact us</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; } .section-content{ text-align: center; } /*================================================= 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: #92C1E0; transition: all 0.4s; } .bs-five-area .bs-five.active { background: #179880; background: -webkit-linear-gradient(left, #92C1E0 , #6AABD5); background: -o-linear-gradient(right, #92C1E0, #6AABD5); background: -moz-linear-gradient(right, #92C1E0, #6AABD5); background: linear-gradient(to right, #92C1E0 , #6AABD5); } .bs-five-area .bs-five .btn-success{ padding: 10px 50px; display: inline-block; border-radius: 30px; background-color: #6AABD5; border-color: #6AABE5; } .bs-five-area .bs-five.active .btn.btn-success, .bs-five-area .bs-five:hover.bs-five .btn.btn-success{ background: #6AABD5 ; 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; }

Related: See More


Questions / Comments: