<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 text-center"> <div class="col-md-12"> <br/><br/> <h3> Server Ranks <br> <font size="1">This server is not pay-to-win. All ranks have useless perks. About every hat that they get can be obtained in the game (except for the staff hats).<br>Enter your username and BL_ID when you make your purchase.</font> </h3> <br/><br/> </div> </div> <div class="row "> <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> <div class="db-wrapper"> <div class="db-pricing-seven"> <ul> <li class="price"> <i class="glyphicon glyphicon-qrcode"></i> VIP - 5 $ </li> <li>Access to VIP Lounge</li> <li>VIP Shop</li> <li>Eclusive Hat</li> <li>[VIP] Tag</li> </ul> <div class="pricing-footer"> <a href="#" class="btn btn-default btn-lg">BUY <i class="glyphicon glyphicon-play-circle"></i></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-seven"> <ul> <li class="price"> <i class="glyphicon glyphicon-indent-right"></i> VIP+ - 9 $ </li> <li>Exclusive Hat</li> <li>Unlimited Beer</li> <li>[VIP+] tag</li> <li>VIP Lounge Access</li> <li>Access to /hide and /unhide</li> </ul> <div class="pricing-footer"> <a href="#" class="btn btn-default btn-lg">BUY<i class="glyphicon glyphicon-play-circle"></i></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-seven"> <ul> <li class="price"> <i class="glyphicon glyphicon-list-alt"></i> Premium - 16 $ </li> <li>Exclusive Games</li> <li>Giant Collection of Hats</li> <li>HUGE lounge</li> <li>Premium Tag</li> <li>15,000 points</li> <li>Access to closed betas</li> </ul> <div class="pricing-footer"> <a href="#" class="btn btn-default btn-lg">BUY <i class="glyphicon glyphicon-play-circle"></i></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-seven"> <ul> <li class="price"> <i class="glyphicon glyphicon-align-justify"></i> MVP - 26 $ </li> <li>Custom Tag</li> <li>Access to all lounges</li> <li>Extended Hatroom</li> <li>Name in the Hall of Fame</li> <li>Rank-only shop</li> <li>More useless things</li> </ul> <div class="pricing-footer"> <a href="#" class="btn btn-default btn-lg">BUY <i class="glyphicon glyphicon-play-circle"></i></a> </div> </div> </div> </div> </div> </div> </div>

/*============================================================= Authour URL: www.designbootstrap.com http://www.designbootstrap.com/ License: MIT ======================================================== */ .db-pricing-seven { margin-bottom: 30px; margin-top: 30px; text-align: center; border: 1px solid #C5C2C2; background-color: #EDEDED; } .db-pricing-seven:hover { margin-top: 5px; -moz-transition: margin-top 0.25s ease 0s; -ms-transition: margin-top 0.25s ease 0s; transition: margin-top 0.25s ease 0s; } .db-pricing-seven ul { list-style: none; margin: 0; text-align: center; padding-left: 0px; } .db-pricing-seven ul li { border-bottom: solid 1px #D8D8D8; padding-top: 20px; padding-bottom: 20px; cursor: pointer; text-transform: uppercase; } .db-pricing-seven ul li.price { background-color: #fff; padding: 40px 20px 20px 20px; font-size: 20px; font-weight: 900; color: #353c3e; font-weight: 900; } .db-pricing-seven ul li.price i { padding: 30px; font-size: 50px; display: block; } .db-pricing-seven .pricing-footer { padding: 20px; } .db-pricing-seven .pricing-footer a i { margin: 5px; top: 3px; }