<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,800,900%7cRaleway:300,400,500,600,700" rel="stylesheet"> <section class="pricing-area pt-100 pb-100" id="pricing"> <div class="container"> <div class="row"> <div class="col-xl-8 mx-auto text-center"> <div class="section-title"> <h4>cheap rate</h4> <h2>our prices</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting.</p> </div> </div> </div> <div class="row"> <div class="col-xl-4"> <div class="single-price"> <div class="price-title"> <h4>standard</h4> </div> <div class="price-tag"> <h2>$25 <span>month</span></h2> </div> <div class="price-item"> <ul> <li>100GB Monthly Bandwidth</li> <li>100 Google AdWords</li> <li>100 Domain Hosting</li> <li>SSL Shopping Cart</li> <li>24/7 Live Support</li> </ul> </div> <a href="" class="box-btn">purchase now</a> </div> </div> <div class="col-xl-4"> <div class="single-price"> <div class="price-title"> <h4>professional</h4> </div> <div class="price-tag center"> <h2>$125 <span>month</span></h2> </div> <div class="price-item"> <ul> <li>100GB Monthly Bandwidth</li> <li>100 Google AdWords</li> <li>100 Domain Hosting</li> <li>SSL Shopping Cart</li> <li>24/7 Live Support</li> </ul> </div> <a href="" class="box-btn">purchase now</a> </div> </div> <div class="col-xl-4"> <div class="single-price"> <div class="price-title"> <h4>business</h4> </div> <div class="price-tag"> <h2>$225 <span>month</span></h2> </div> <div class="price-item"> <ul> <li>100GB Monthly Bandwidth</li> <li>100 Google AdWords</li> <li>100 Domain Hosting</li> <li>SSL Shopping Cart</li> <li>24/7 Live Support</li> </ul> </div> <a href="" class="box-btn">purchase now</a> </div> </div> </div> </div> </section>

.pb-100 { padding-bottom: 100px; } .pt-100 { padding-top: 100px; } a{ text-decoration:none; } .section-title h4 { font-size: 14px; font-weight: 500; color: #777; } .section-title h2 { font-size: 32px; text-transform: capitalize; margin: 15px 0; display: inline-block; position: relative; font-weight: 700; padding-bottom: 15px; letter-spacing: 1px; text-transform: uppercase; } .section-title p { font-weight: 300; font-size: 14px; } .black-bg .section-title h2, .black-bg .section-title h4, .black-bg .section-title p { color:#fff } .section-title h2:before { position: absolute; content: ""; width: 150px; height: 1px; background-color: #777; bottom: 0; left: 50%; margin-left: -75px; } .section-title h2:after { position: absolute; content: ""; width: 80px; height: 3px; background-color: #e16038; border: darkblue; bottom: -1px; left: 50%; margin-left: -40px; } .section-title { margin-bottom: 70px; } .single-price { text-align: center; padding: 30px; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } .price-title h4 { font-size: 24px; text-transform: uppercase; font-weight: 600; } .price-tag { margin: 30px 0; } .price-tag { margin: 30px 0; background-color: #fafafa; color: #000; padding: 10px 0; } .center.price-tag { background-color: tomato; color:#fff } .price-tag h2 { font-size: 45px; font-weight: 600; font-family: poppins; } .price-tag h2 span { font-weight: 300; font-size: 16px; font-style: italic; } .price-item ul { margin: 0; padding: 0; list-style: none; } .price-item ul li { font-size: 14px; padding: 5px 0; border-bottom: 1px dashed #eee; margin: 5px 0; } .price-item ul li:last-child { border-bottom: 0; } .single-price a { margin-top: 15px; } a.box-btn { background-color: tomato; padding: 5px 20px; display: inline-block; color: #fff; text-transform: capitalize; border-radius: 3px; font-size: 15px; transition: .3s; } a.box-btn:hover, a.border-btn:hover { background-color: #d35400; }