<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="price-table"> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-3"> <div class="pricing text-center"> <div class="pricing-top"> <p>^$<em>55</em>/mo</p> <span>Basic</span> </div> <ul> <li>Html5 + Css3</li> <li>Bootstrap</li> <li>Java script</li> <li>Jquery</li> <li>php</li> <li>More..</li> </ul> <div class="btn">Order Now</div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="pricing text-center"> <div class="pricing-top"> <p>^$<em>55</em>/mo</p> <span>Gold</span> </div> <ul> <li>Html5 + Css3</li> <li>Bootstrap</li> <li>Java script</li> <li>Jquery</li> <li>php</li> <li>More..</li> </ul> <div class="btn">Order Now</div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="pricing text-center"> <div class="pricing-top"> <p>^$<em>55</em>/mo</p> <span>Dimond</span> </div> <ul> <li>Html5 + Css3</li> <li>Bootstrap</li> <li>Java script</li> <li>Jquery</li> <li>php</li> <li>More..</li> </ul> <div class="btn">Order Now</div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="pricing text-center"> <div class="pricing-top"> <p>^$<em>55</em>/mo</p> <span>Pro</span> </div> <ul> <li>Html5 + Css3</li> <li>Bootstrap</li> <li>Java script</li> <li>Jquery</li> <li>php</li> <li>More..</li> </ul> <div class="btn">Order Now</div> </div> </div> </div> </div> </div>

.price-table { margin-top: 100px; } .pricing { background: #000000; padding: 20px; border-radius: 5px; color:#fff; margin-bottom:30px; } .pricing-top { width: 140px; height: 140px; border-radius: 100%; border: 5px solid #fff; margin: 0 auto; } .pricing-top p{ margin-top: 20px; } .pricing-top sup{ font-size: 20px; top: -3px; left: -5px; } .pricing-top em{ font-size: 25px; } .pricing-top span{ text-transform: uppercase; font-size: 20px; margin-left: 20px; } .pricing ul{ padding: 0; } .pricing ul li{ max-width: 140px; border-bottom: 1px solid #fff; list-style: none; margin: 0 auto; padding: 10px 0; font-size: 15px; } .btn { background: #fff; color: #39393a; text-transform: uppercase; border-radius: 0; margin-top: 10px; font-weight: bold; padding: 5px 20px; transform: .5s; } .pricing:hover { background: #808080; color: #000; transition-duration:.5s; } .pricing:hover .pricing-top{ background: #fff; color: #000; transition-duration: .5s; } .pricing:hover .btn{ background: #000; color: #fff; transition-duration: .5s; }