<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 navbar-fixed-top header"> <img class="header-img" src="http://lakshmip.com/images/bond-logo.png" id="bond-logo" /> </div> <div class="offer"> <div class="row text-center section"> <h2 class="labels">VARSITY STUDIOS INC.</h2> <h1 class="values">$150,000</h1> <h2 class="labels">TOTAL LOAN AMOUNT</h2> </div> <div class="row section"> <div class="col-xs-6 right-border"> <h2 class="text-center values no-pad">3.9%</h2> <h2 class="text-center labels no-pad">INTEREST RATE</h2> </div> <div class="col-xs-6"> <h2 class="values text-center no-pad">15%</h2> <h2 class="labels no-pad text-center">APR</h2> </div> </div> <div class="row section"> <div class="col-xs-4"> <h2 class="labels text-left">LOAN TERM</h2> </div> <div class="col-xs-8"> <h2 class="values-small text-right">36 Months</h2> </div> </div> <div class="row section"> <div class="col-xs-5"> <h2 class="labels text-left">SEMI-MONTHLY PAYMENT</h2> </div> <div class="col-xs-7"> <h2 class="values-small text-right">$15,000</h2> </div> </div> <div class="row section"> <div class="col-xs-4"> <h2 class="labels text-left">TO BE TRANSFERRED</h2> </div> <div class="col-xs-8"> <h2 class="values-small text-right">$145,000</h2> </div> </div> <div class="row"> <button class="btn btn-lg btn-primary btn-block" type="submit"> <span class="glyphicon glyphicon-lock left"></span>APPROVE AND SIGN YOUR LOAN</button> </div> <div class="row section"> <h2 class="labels text-center">THIS OFFER WILL EXPIRE IN 30 DAYS</h2> </div> </div> </div>

body { padding-top: 70px; } .header { background-color: #ffffff; border-bottom: 1px solid #CCC; } .header-img { margin: 15px auto 10px; display: block; /*-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;*/ } .offer { max-width: 330px; margin: 0 auto; } .labels { font-size: 10px; color: #CCC; } .no-pad { padding:0px; line-height:15px; margin-bottom:10px; margin-top:20px; } .section { border-bottom: 1px solid #CCC; padding: 0px 0 0 0; } .values { color: #000; font-weight:300; } .btn { color:#fff; font-size:11px; border-radius: 0; width:360px; background-color:#39ce39; border: 1px solid #39ce39; } .col-xs-4, .col-xs-8, .col-xs-6, .col-xs-5, .col-xs-7 { padding: 5px 0px 5px 0;; } .right-border { border-right: 1px solid #CCC; } .values-small { color: #000; font-size:14px; font-weight:300; } .left { float:left; }