<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=Lato:300,400,700,900&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"> <div class="price-sec-wrap"> <div class="container"> <div class="row"> <div class="col-md-8 offset-md-2"> <div class="main-heading">PRICING TABLE</div> </div> </div> <div class="row"> <div class="col-lg-4"> <div class="price-box"> <div class=""> <div class="price-label basic">Basic Plan</div> <div class="price">$ 5.99</div> <div class="price-info">Per Month, Inlc GST.</div> </div> <div class="info"> <ul> <li><i class="fas fa-check"></i>5k Searchable messages</li> <li><i class="fas fa-check"></i>10 custom Apps/services</li> <li><i class="fas fa-check"></i>Minimum 3 users, max 10 users</li> <li><i class="fas fa-check"></i>1 Voice and video call</li> </ul> <a href="#" class="plan-btn">Join Basic Plan</a> </div> </div> </div> <div class="col-lg-4"> <div class="price-box"> <div class=""> <div class="price-label value">Value Plan</div> <div class="price">$ 10.99</div> <div class="price-info">Per Month, Inlc GST.</div> </div> <div class="info"> <ul> <li><i class="fas fa-check"></i>5k Searchable messages</li> <li><i class="fas fa-check"></i>10 custom Apps/services</li> <li><i class="fas fa-check"></i>Minimum 3 users, max 10 users</li> <li><i class="fas fa-check"></i>1 Voice and video call</li> </ul> <a href="#" class="plan-btn">Join Value Plan</a> </div> </div> </div> <div class="col-lg-4"> <div class="price-box"> <div class=""> <div class="price-label premium">Premium Plan</div> <div class="price">$ 15.99</div> <div class="price-info">Per Month, Inlc GST.</div> </div> <div class="info"> <ul> <li><i class="fas fa-check"></i>5k Searchable messages</li> <li><i class="fas fa-check"></i>10 custom Apps/services</li> <li><i class="fas fa-check"></i>Minimum 3 users, max 10 users</li> <li><i class="fas fa-check"></i>1 Voice and video call</li> </ul> <a href="#" class="plan-btn">Join Premium Plan</a> </div> </div> </div> </div> </div> </div>

.price-sec-wrap { width: 100%; float: left; padding: 60px 0; font-family: 'Lato', sans-serif; } .main-heading { text-align: center; font-weight: 600; padding-bottom: 15px; position: relative; text-transform: capitalize; font-size: 24px; margin-bottom: 25px; } .price-box { box-shadow: 0 0 35px rgba(0, 0, 0, 0.10); padding: 20px; background: #fff; border-radius: 4px; } .price-box ul { padding: 10px 0px 30px; margin: 17px 0 0 0; list-style: none; border-top: solid 1px #e9e9e9; } .price-box ul li { padding: 7px 0; font-size: 14px; color: #808080; } .price-box ul li .fas { color: #68AE4A; margin-right: 7px; font-size: 12px; } .price-label { font-size: 16px; font-weight: 600; line-height: 1.34; margin-bottom: 0; padding: 6px 15px; display: inline-block; border-radius: 3px; } .price-label.basic { background: #E8EAF6; color: #3F51B5; } .price-label.value { background: #E8F5E9; color: #4CAF50; } .price-label.premium { background: #FBE9E7; color: #FF5722; } .price { font-size: 44px; line-height: 44px; margin: 15px 0 6px; font-weight: 900; } .price-info { font-size: 14px; font-weight: 400; line-height: 1.67; color: inherit; width: 100%; margin: 0; color: #989898; } .plan-btn { text-transform: uppercase; font-weight: 600; display: block; padding: 11px 30px; border: 2px solid #b3b3b3; color: #000; margin-top: 5px; overflow: hidden; position: relative; z-index: 1; margin: 0; border-radius: 5px; text-decoration: none; width: 100%; text-align: center; font-size: 14px; } .plan-btn::after { position: absolute; left: -100%; top: 0; content: ""; height: 100%; width: 100%; background: #000; z-index: -1; transition: all 0.35s ease-in-out; } .plan-btn:hover::after { left: 0; } .plan-btn:hover, .plan-btn:focus { text-decoration: none; color: #fff; border: 2px solid #000; } @media (max-width: 991px) { .price-box { margin-bottom: 20px; } } @media (max-width: 575px) { .main-heading { font-size: 21px; } .price-box { margin-bottom: 20px; } }