<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-md-4"> <div class="panel panel-white"> <div class="panel-heading"> <h3 class="text-center title">Diagnostika těla</h3> <p class="text-center subtitle">na váze Tanita</p> </div> <div class="panel-body text-center"> <p class="lead price"><strong>100,-</strong></p><hr class="price-hr" /> </div> <ul class="list-group list-group-flush text-center"> <li class="list-group-item text"> Určení % tělesného tuku, svalové hmoty,<br /> kostní tkáně<hr class="hr" /> </li> <li class="list-group-item text"> Zjištění svalových disbalancí na pravé<br /> a levé straně těla = měření tuku a svalů<br /> na každé končetině<hr class="hr" /> </li> <li class="list-group-item text"> Určení optimálního denního příjmu kalorií<hr class="hr" /> </li> <li class="list-group-item text"> Stanovení metabolického věku<hr class="hr" /> </li> <li class="list-group-item text"> Změření útrobního tuku a stanovení<br /> indikátoru zdraví a trend </li> </ul> <div class="panel-footer"> <a class="btn btn-lg btn-green" href="#">Přijďte se nechat změřit</a> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="text-center">MEDIUM TEAM</h3> <p class="text-center">MAX TEAM SIZE 50</p> </div> <div class="panel-body text-center"> <p class="lead" style="font-size:30px"><strong>$40/month</strong></p> </div> <ul class="list-group list-group-flush text-center"> <li class="list-group-item"> <span class="glyphicon glyphicon-calendar"></span> Unlimited Events </li> <li class="list-group-item"> <span class="glyphicon glyphicon-envelope"></span> Unlimited Email Invitations </li> <li class="list-group-item"> <span class="glyphicon glyphicon-heart"></span> Fantastic Support </li> </ul> <div class="panel-footer"> <a class="btn btn-lg btn-block btn-danger" href="#">SUBSCRIBE</a> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="text-center">LARGE TEAM</h3> <p class="text-center">MAX TEAM SIZE 100</p> </div> <div class="panel-body text-center"> <p class="lead" style="font-size:30px"><strong>$60/month</strong></p> </div> <ul class="list-group list-group-flush text-center"> <li class="list-group-item"> <span class="glyphicon glyphicon-calendar"></span> Unlimited Events </li> <li class="list-group-item"> <span class="glyphicon glyphicon-envelope"></span> Unlimited Email Invitations </li> <li class="list-group-item"> <span class="glyphicon glyphicon-heart"></span> Fantastic Support </li> </ul> <div class="panel-footer"> <a class="btn btn-lg btn-block btn-danger" href="#">SUBSCRIBE</a> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="text-center">HUGE TEAM</h3> <p class="text-center">MAX TEAM SIZE 300</p> </div> <div class="panel-body text-center"> <p class="lead" style="font-size:30px"><strong>$100/month</strong></p> </div> <ul class="list-group list-group-flush text-center"> <li class="list-group-item"> <span class="glyphicon glyphicon-calendar"></span> Unlimited Events </li> <li class="list-group-item"> <span class="glyphicon glyphicon-envelope"></span> Unlimited Email Invitations </li> <li class="list-group-item"> <span class="glyphicon glyphicon-heart"></span> Fantastic Support </li> </ul> <div class="panel-footer"> <a class="btn btn-lg btn-block btn-green" href="#">SUBSCRIBE</a> </div> </div> </div> </div> </div>

.panel { transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; /* Firefox 4 */ -webkit-transition: all .5s ease-in-out; /* Safari and Chrome */ -o-transition: all .5s ease-in-out; /* Opera */ -ms-transition: all .5s ease-in-out; /* IE9 (maybe) */ } .panel:hover { transform: scale(1.1); } .panel-white { background-color: #fff; } .panel .title { font-size: 32px; color: #828282; margin: 0; padding: 0; } .panel .subtitle { margin:0; padding: 0; font-size: 28px; color: #828282; } .panel .text { font-size: 16px; color: #828282; } .panel .price { color: #73b822; font-size: 35px; font-weight: 600; } .panel .price-hr { width: 85%; border: 0px; background-color: #73b822; color: #73b822; height: 1px; } .panel .hr { width: 85%; border: 0px; background-color: #eeeeee; color: #eeeeee; height: 1px; } .btn-green { background-color: #73b822; color: #fff; width: 90%; font-size: 16px; } .panel-footer { text-align: center; background-color: #fff; margin-top: 30px; } .btn-green:hover { color: #fff; } .list-group-item { border: 0px; margin: 0; padding: 0; }