<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 ----------> <section id="prices"> <div class="container"> <div class="row"> <div class="col-lg-6 col-lg-offset-3 text-center"> <h2><span class="ion-minus"></span>Prices<span class="ion-minus"></span></h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus </p><br> </div> </div> <div class="prices-box"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 pd0 price-table aos-init aos-animate" data-aos="fade-right"> <div class="top-content text-center"> <div class="title"> <h3>Basic</h3> </div> <div class="price"> <span>$10</span> </div> <a class="btn btn-default" href="#">Buy Now</a> </div> <div class="bottom-content text-center"> <ul class="features list-unstyled"> <li>2 Pages</li> <li>10 GB Storage</li> <li>100 GB Bandwidth</li> <li>1 Domain</li> <li>No Support</li> </ul> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 pd0 price-table aos-init aos-animate" id="price2" data-aos="fade-up"> <div class="top-content text-center"> <div class="title"> <h3>Standard</h3> </div> <div class="price"> <span>$10</span> </div> <a class="btn btn-default" href="#">Buy Now</a> </div> <div class="bottom-content text-center"> <ul class="features list-unstyled"> <li>10 Pages</li> <li>20 GB Storage</li> <li>200 GB Bandwidth</li> <li>5 Domain</li> <li>Limited Support</li> </ul> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 pd0 price-table aos-init aos-animate" data-aos="fade-left"> <div class="top-content text-center"> <div class="title"> <h3>Professional</h3> </div> <div class="price"> <span>$10</span> </div> <a class="btn btn-default" href="#">Buy Now</a> </div> <div class="bottom-content text-center"> <ul class="features list-unstyled"> <li>20 Pages</li> <li>50 GB Storage</li> <li>500 GB Bandwidth</li> <li>10 Domain</li> <li>UnlimitedSupport</li> </ul> </div> </div> </div> </div> </div> </section>

@import url(https://fonts.googleapis.com/css?family=Raleway:400,900,700,600,500,300,200,100,800); body{ font-family: 'Raleway', sans-serif; } .pd0{ margin: 0; padding: 0; } #prices span{ font-size:30px; color:#FFF; } #prices h3{ color:#FFF; } #prices .features li{ padding:10px; } #prices .btn.btn-default{ margin:20px 0px; } #prices .features-border li{ border-top:1px solid #c7c7c7; padding: 10px 0px; } #prices .features-border li:last-child{ border-bottom:1px solid #c7c7c7; } #price2 { box-shadow: 0 0 20px rgba(0,0,0,0.2); z-index: 2; } #price2:before { content: ""; width: 100%; height: 40px; background: #4d4d4d; position: absolute; left: 0; right: 0; top: -30px; margin: 0 auto; } .btn.btn-default { background-color: #5db4c0; color: #fff; border-radius: 0; border: none; padding: 13px 20px; font-size: 13px; font-weight: 600 } .prices-box{ margin:50px 0px; } .top-content{ background-color:#4d4d4d; padding:20px; } .bottom-content{ background-color:#f6f6f6; padding:60px; } .big-price span{ color: #333; font-size:40px; } .btn-price{ background-color:#5db4c0; color: #fff; border-radius:50%; border:none; padding:40px 20px; font-size: 13px; font-weight: 600; margin-top:20px; }