<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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-12"> <div class="detalis all holder image price"> <div class="detalis holder about image price"> <h2>OUR <span> PRICING </span></h2> </div> <div class="detalis about image price"> <h2>LOREM IPSUM DOLOR</h2> </div> <div class="hr-title-holder about image price"> <div class="hr-title"> <hr> </div> </div> </div> </div> </div> </div> <div class="price-table"> <div class="container"> <div class="row"> <div class="col-sm-4 col-md-4"> <div class="pricing text-center on"> <div class="pricing-top on"> <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 on">SUBSCRIBE NOW</div> </div> </div> <div class="col-sm-4 col-md-4"> <div class="pricing text-center two"> <div class="pricing-top two"> <p>^$<em>55</em>/mo</p> <span>STANDARD</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 two">SUBSCRIBE NOW</div> </div> </div> <div class="col-sm-4 col-md-4"> <div class="pricing text-center three"> <div class="pricing-top three"> <p>^$<em>55</em>/mo</p> <span>PREMIUM</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 three">SUBSCRIBE NOW</div> </div> </div> </div> </div> </div>

.price-table { margin-top: 16px; } .pricing { padding: 20px; border-radius: 5px; 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: 40px; top: -5px; left: 0px; } .pricing-top em { font-size: 47px; font-family: fantasy; } .pricing-top span { text-transform: uppercase; font-size: 16px; margin-left: 3px; } .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; } .pricing:hover { background: #808080; color: #d4145a; transition-duration:.5s; } .pricing:hover .pricing-top{ background: #fff; color: #d4145a; transition-duration: .5s; } .pricing-top.on { background: #0a9c3a; color: white; cursor: pointer; } .pricing-top.two { background: #0071bc; color: white; cursor: pointer; } .pricing-top.three { background: #d4145a; color: white; cursor: pointer; } .pricing.text-center.on { border: 5px solid #0a9c3a; color: #0a9c3a; background: white; } .pricing.text-center.on ul li { border-bottom: 1px solid #0a9c3a; cursor: pointer; } .pricing.text-center.two { border: 5px solid #0071bc; color: #0071bc; background: white; } .pricing.text-center.two ul li { border-bottom: 1px solid #0071bc; cursor: pointer; } .pricing.text-center.three { background: white; border: 5px solid #d4145a; color: #d4145a; } .pricing.text-center.three ul li { border-bottom: 1px solid #d4145a; cursor: pointer; } .btn.on { background: #0a9c3a; color: white; width: 50%; padding: 8px; font-size: 15px; letter-spacing: 1px; word-spacing: 2px; } .btn.on:hover{ background: white; color: #0a9c3a; border:1px solid #0a9c3a; } .btn.two { color: white; background: #0071bc; color: white; width: 50%; padding: 8px; font-size: 15px; letter-spacing: 1px; word-spacing: 2px; } .btn.two:hover { background: white; color: #0071bc; border: 1px solid #0071bc; } .btn.three { color: white; background: #d4145a; color: white; width: 50%; padding: 8px; font-size: 15px; letter-spacing: 1px; word-spacing: 2px; } .btn.three:hover{ background: white; color: #d4145a; border:1px solid #d4145a; } .pricing-top.on:hover { color: #0a9c3a; border: 5px solid #0a9c3a; } .pricing-top.three:hover { color: #d4145a; border: 5px solid #d4145a; } .pricing-top.two:hover { color: #0071bc; border: 5px solid #0071bc; } .detalis.holder.about.image.price h2 { font-size: 46px; }