"checkout"
Bootstrap 3.3.0 Snippet by devlopereswar

<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="package"> <div class="pheader"> Package Header </div> <div class="pbody"> <p> Your package: 250/10 sessions + 10 meal of Dosirak <b>(valid 12 weeks)</b> </p> <h4 class="text-center">Package Subscription Card</h4> <div class="cards"> <select class="form-control"> <option>One</option> <option>One</option> <option>One</option> </select> <a href="#" class="acard_detail">Add Card Details</a> <button class="btn btn-primary center-block btn-md">Suscribe</button> </div> </div> </div> <br/> <br/> <br/> <div class="package2"> <div class="stripe"> </div> <div class="pheader2"> Package Header </div> <div class="pbody"> <p> Your package: 250/10 sessions + 10 meal of Dosirak <b>(valid 12 weeks)</b> </p> <h4 class="text-center">Package Subscription Card</h4> <div class="cards"> <select class="form-control"> <option>One</option> <option>One</option> <option>One</option> </select> <a href="#" class="acard_detail">Add Card Details</a> <button class="btn btn-primary center-block btn-md">Suscribe</button> </div> </div> </div>
body{background:#eee;} .package{margin:auto; width:35%; background:#fff; box-shadow:0 0 5px #aaa;} .pheader{float:left; width:100%; text-align:center;font-size:20px; font-weight:800; padding:10px;border-bottom:1px solid #aaa; margin-bottom:10px; } .pbody{padding:25px;} .cards{margin:auto; width:70%; margin-bottom:20px;} .acard_detail{float:left; width:100%; text-align:center; font-size:16px; padding-top:10px;color:#333; margin-bottom:10px;} .acard_detail:hover{color:#333; text-decoration:none;} /****/ .package2{float:left; width:50%; background:#fff;margin-left:25%;margin-bottom:30px; box-shadow:0 0 5px #aaa; position:relative;} .stripe{width:100px; height:100px; border-radius:10em; background:url(https://stripe.com/img/v3/home/twitter.png); background-size:cover; background-position:center; position:absolute; top:-50px;left:43%; /*border:5px solid #ececec;*/ box-shadow:0 0 5px #333; } .pheader2{float:left; width:100%; text-align:center;font-size:20px; font-weight:800; padding:70px 10px 10px 10px;border-bottom:1px solid #aaa; margin-bottom:10px; } .pbody2{padding:25px;} .cards2{float:left; width:50%; margin-bottom:20px;} .acard_detail2{float:left; width:100%; font-size:16px; padding-top:10px;color:#333; margin-bottom:10px;} .acard_detail2:hover{color:#333; text-decoration:none;}

Related: See More


Questions / Comments: