<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <!-- price & service --> <div class="container"> <div class="row"> <h2 id="details">Choose your package</h2> </div><br> <!-- Pack 1--> <div class="col-md-3" id="home-box"> <div class="pricing_header"> <div class="row"> <div class="col-md-8 pull-left"><h3>Basic Plan</h2></div> <div class="col-md-4"><span class="badge text-left">USD 30</span></div> </div> <div class="hline-blue"></div> </div> <ul class="list-group"> <li class="list-group-item">Windows Server 2003</li> <li class="list-group-item">1 GHz</li> <li class="list-group-item">20 GB Memory</li> <li class="list-group-item">80 GB Storage</li> </ul> </div> <!-- Pack 2--> <div class="col-md-3" id="home-box"> <div class="pricing_header"> <h2>Premium User</h2> <div class="space"></div> </div> <ul class="list-group"> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Responsible design</li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> 3 examples</li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> HTML5 & CSS3</li> <li class="list-group-item off"><span class="glyphicon glyphicon-remove"></span> PSD included</li> <li class="list-group-item off"><span class="glyphicon glyphicon-remove"></span> Light and clean</li> <li class="list-group-item off"><span class="glyphicon glyphicon-remove"></span> Customizible HTML</li> </ul> <div class="try"> <p class="price">$ 44.99</p> <a class="btn btn-default" href="#" type="button">Abbonati</a> </div> </div> <!-- Pack 3--> <div class="col-md-3" id="home-box"> <div class="pricing_header"> <h2>Business User</h2> <div class="space"></div> </div> <ul class="list-group"> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Responsible design</li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> 3 examples</li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> HTML5 & CSS3</li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> PSD included</li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Light and clean</li> <li class="list-group-item off"><span class="glyphicon glyphicon-remove"></span> Customizible HTML</li> </ul> <div class="try"> <p class="price">$ 79.99</p> <button class="btn btn-default" href="#" type="button">Abbonati</button></li> </div> </div> <!-- Pack 4--> <div class="col-md-3" id="home-box"> <div class="pricing_header"> <h2>Customize</h2> <div class="space"></div> </div> <ul class="list-group"> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Responsible design</li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> 3 examples</li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> HTML5 & CSS3</li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> PSD included</li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Light and clean</li> <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Customizible HTML</li> </ul> <div class="try"> <p class="price">$ 119.99</p> <button class="btn btn-default" href="#" type="button">Abbonati</button></li> </div> </div> </div>

.container { padding-top: 40px; } #details { font-family: "Quicksand", sans-serif; font-size: 60px; } #home-box > h3 { font-family: "Quicksand", sans-serif; font-weight: 400; line-height: 1.1; color: #75b1ae; } #home-box > badge { font-family: "Quicksand", sans-serif; font-weight: 400; line-height: 1.1; color: #75b1ae; } .price { font-size: 25px; float: left; } .pricing_header { background: #d2e6ec; border-radius: 3px 3px 0px 0px; transition: background 0.4s ease-out 0s; } .pricing_header h3 { text-align:center; line-height: 25px; padding: 15px 0px; margin: 0px; font-family: "Quicksand", sans-serif; font-weight: 400; color: #75b1ae; } .pricing_header badge { text-align:center; line-height: 25px; padding: 15px 0px; margin: 0px; font-family: "Quicksand", sans-serif; font-weight: 400; color: #75b1ae; } .list-group-item:first-child { border-top-right-radius: 0px; border-top-left-radius: 0px; } .hline-blue {height: 2px; background-color: #75b1ae;}