"home page"
Bootstrap 3.3.0 Snippet by pindipoluravikumar

<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"> <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3" style="margin-left:15%"> <div class="db-wrapper"> <div class="db-pricing-eleven db-bk-color-one"> <div class="price"> <p class="plan-name">Basic</p> <span class="price-text">$</span>299 </div> <div class="plan-div"> <p class="plan-text"> The watch will be analyzed and graded by one of our professional watchmakers. Due to demand, completion of grading currently takes two to three weeks from receipt of the watch. </p> </div> <div class="pricing-footer"> <a href="#" class="btn db-button-color-square btn-m round">Select Plan</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-one"> <div class="price"> <p class="plan-name">Premium</p> <span class="price-text">$</span>379 </div> <div class="plan-div"> <p class="plan-text"> Our premium package includes the services in our Basic Package as well as expedited fulfillment. Each watch is returned via overnight delivery and we guarantee completion of grading within 7 business days from receipt of the watch. </p> </div> <div class="pricing-footer"> <a href="#" class="btn db-button-color-square btn-m round">Select Plan</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-one"> <div class="price"> <p class="plan-name">Luxe</p> <span class="price-text">$</span>499 </div> <div class="plan-div"> <p class="plan-text"> Our Luxe Package includes the services in our Premium Package as well as our Refinishing Service. Each watch is returned via overnight delivery and we guarantee completion of grading and polishing within 7 business days from receipt of the watch. </p> </div> <div class="pricing-footer"> <a href="#" class="btn db-button-color-square btn-m round">Select Plan</a> </div> </div> </div> </div> </div> <div class="row" styel="padding-top:10px"> <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3" style="margin-left:25%"> <div class="db-wrapper"> <div class="db-pricing-eleven db-bk-color-one"> <div class="price"> <p class="plan-name">Finishing</p> <span class="price-text">$</span><span style="font-size: 27px;">149</span> </div> <div class="plan-div"> <p class="plan-text"> Refinishing : Luxe Certified will refinish a users watch to improve its appearance if necessary. Luxe Certified will repair the movement if necessary. Crystal Replacement : Luxe Certified will repair or replace the crystal if necessary. </p> </div> <div class="pricing-footer"> <a href="#" class="btn db-button-color-square btn-m round">Select Plan</a> </div> </div> </div> </div> <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3"> <div class="db-wrapper"> <div class="db-pricing-eleven db-bk-color-one"> <div class="price"> <p class="plan-name">Basic</p> <span class="price-text" >$</span>799 </div> <div class="plan-div"> <p class="plan-text"> Our Luxe Package includes the services in our Premium Package as well as our Refinishing Service. Each watch is returned via overnight delivery and we guarantee completion of grading and polishing within 7 business days from receipt of the watch. </p> </div> <div class="pricing-footer"> <a href="#" class="btn db-button-color-square btn-m round">Select Plan</a> </div> </div> </div> </div> </div> </div>
.db-bk-color-one { background-color: #f8f8f8; } .plan-text{ font-family: calibri; font-size: 13px; text-align: left; color:black; font-size:13px; } .plan-div{ padding:2%; height:130px; } .price-text{ font-size: 12px; } .plan-name{ font-size:14px; margin-bottom:30px; } .db-padding-btm { padding-bottom: 10px; } .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 round:hover { color: #fff; background-color: rgba(0, 0, 0, 0.50); border: none; } .db-wrapper{ padding-left:8%; } .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: 15px; } .round { border-radius: 24px; } .db-pricing-eleven .price { background-color: #68ceee; padding: 20px 20px 20px 20px; font-size: 30px; 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; }

Related: See More


Questions / Comments: