"my pris"
Bootstrap 3.3.0 Snippet by croparts

<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="banner-pricing text-center"> <div class="container"> <div class="row"> <div class="col-md-12"> <h3 class="large-text">Prising</h3> </div> </div> <div class="row"> <div class="col-md-4"> <div class="plan" style="height: 318px;"> <aside style="height: 182px;"> <h4>SMALL BUSINESS</h4> <div class="price"> <sup>$</sup>179 / mont </div> <p>+50 employees</p> <p>24/7 support</p> </aside> <p> <a class="btn btn-lg reverse" href="#">Get started</a> </p> </div> </div> <div class="col-md-4"> <div class="plan best" style="height: 318px;"> <div class="best-banner">Recommended</div> <aside style="height: 182px;"> <h4>SMALL BUSINESS</h4> <div class="price"> <sup>$</sup>489 / mont </div> <p>+350 employees</p> <p>24/7 support</p> </aside> <p> <a class="btn btn-lg reverse" href="#">Get started</a> </p> </div> </div> <div class="col-md-4"> <div class="plan" style="height: 318px;"> <aside style="height: 182px;"> <h4>SMALL BUSINESS</h4> <div class="price"> <sup>$</sup>983 / mont </div> <p>+1000 employees</p> <p>24/7 support</p> </aside> <p> <a class="btn btn-lg reverse" href="#">Get started</a> </p> </div> </div> </div> </div> </div>
h4 { font-size: 22px; color: #333; } .banner-pricing { background: -webkit-linear-gradient(left, rgb(52, 207, 189) 0%, rgb(42, 181, 169) 100%); background: -o-linear-gradient(left, rgb(52, 207, 189) 0%, rgb(42, 181, 169) 100%); background: -ms-linear-gradient(left, rgb(52, 207, 189) 0%, rgb(42, 181, 169) 100%); background: -moz-linear-gradient(left, rgb(52, 207, 189) 0%, rgb(42, 181, 169) 100%); background: linear-gradient(to right, rgb(52, 207, 189) 0%, rgb(42, 181, 169) 100%); } .plan { background: #fff; border-radius: 5px; margin-bottom: 1em; padding: 20px; position: relative; } .plan .price { font-size: 40px; font-weight: bold; line-height: normal; margin: 30px 0; } .plan p { font-size: 16px; } .reverse { border-radius: 10px; border: 2px solid #ffd800; color: #272727; font-weight: 600; padding: 10px 40px; background: none; -webkit-transition: background 0.5s ease; } .reverse:hover { background: #ffd800; } .plan .btn { width: 80%; margin: 20px auto; } .plan.best { border-top-left-radius: 0px; border-top-right-radius: 0px; } .plan.best .best-banner { color: #fff; text-align: center; width: 100%; height: 33px; line-height: 35px; background: #FB6332; position: absolute; top: -33px; left: 0; border-top-left-radius: 5px; border-top-right-radius: 5px; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.1em; } .large-text { margin-bottom: 100px; text-transform: uppercase; font-weight: bold; font-size: 42px; color: #fff; }

Related: See More


Questions / Comments: