<section id="pricing">
<div class="container">
<div class="row mt-10">
<div class="col-md-4 pricing-table col-sm-4">
<div class="pricing-box border-radius-5">
<h3 class="dark-color mb-0">Personal</h3>
<h4 class="dark-color">Basic and simple website.</h4>
<h2 class="font-60px dark-color sm-font-30px"><sup>$</sup><span>15</span></h2>
<ul>
<li>Mobile-Optimized Website</li>
<li>Powerful Website Metrics</li>
<li>Free Custom Domain</li>
<li>24/7 Customer Support</li>
<li>Fully Integrated E-Commerce</li>
<li>Sell Unlimited Products & Accept Donations</li>
</ul>
<div class="pricing-box-bottom"> <a class="btn btn-dark btn-lg btn-rounded btn-block text-white">Try it Now</a> </div>
</div>
</div>
<div class="col-md-4 pricing-table col-sm-4 featured">
<div class="pricing-box featured border-radius-5">
<div class="featured-mark">
Featured
</div>
<h3 class="default-color mb-0">Professional</h3>
<h4 class="dark-color">Basic and simple website.</h4>
<h2 class="font-60px default-color sm-font-30px"><sup class="default-color">$</sup><span>50</span></h2>
<div class="pricicng-feature">
<ul>
<li>Mobile-Optimized Website</li>
<li>Powerful Website Metrics</li>
<li>Free Custom Domain</li>
<li>24/7 Customer Support</li>
<li>Fully Integrated E-Commerce</li>
<li>Sell Unlimited Products & Accept Donations</li>
</ul>
</div>
<div class="pricing-box-bottom"> <a class="btn btn-danger btn-lg btn-rounded btn-block text-white">Try it Now</a> </div>
</div>
</div>
<div class="col-md-4 pricing-table col-sm-4">
<div class="pricing-box border-radius-5">
<h3 class="dark-color mb-0">Ultimate</h3>
<h4 class="dark-color">Basic and simple website.</h4>
<h2 class="font-60px dark-color sm-font-30px"><sup>$</sup><span>35</span></h2>
<ul>
<li>Mobile-Optimized Website</li>
<li>Powerful Website Metrics</li>
<li>Free Custom Domain</li>
<li>24/7 Customer Support</li>
<li>Fully Integrated E-Commerce</li>
<li>Sell Unlimited Products & Accept Donations</li>
</ul>
<div class="pricing-box-bottom"> <a class="btn btn-dark btn-lg btn-rounded btn-block text-white">Try it Now</a> </div>
</div>
</div>
</div>
</div>
</section>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
section {
padding: 20px 0px;
position: relative;
z-index: 10;
background: #e6f8f9;
overflow: hidden;
}
.pricing-table{margin:80px 0;}
.pricing-box{padding:40px;background:#fff;transition:all 0.2s ease;position:relative;}
.pricing-box:hover{box-shadow:0 10px 30px 5px rgba(17,21,23,.1);}
.pricing-table.featured{margin:40px 0;}
.pricing-box.featured{padding:80px 40px 80px 40px;}
.pricing-box.featured .featured-mark{display:block;padding:5px 18px 5px 10px;position:absolute;top:44px;left:-4px;text-transform:uppercase;font-size:12px;line-height:1.4;font-weight:700;color:#fff;background-color:#F5325C;}
.pricing-box.featured .featured-mark:after{content:"";position:absolute;top:0;right:0;border-right:9px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;}
.pricing-box h4{font-size: 18px;margin-top: 5px;font-family: 'Cardo', serif;font-weight: 700;}
.pricing-box h3{font-size:30px;font-weight:700;}
.pricing-box h2{margin-top:25px;margin-bottom:25px;font-weight:700;}
.pricing-box h2 sup{font-size:25px;top:-15.6px;}
.pricing-box h2 span{font-weight:700;}
.pricing-box ul{margin:20px 0;padding:0;}
.pricing-box li{display:block;margin-bottom:10px;list-style:none;font-size:14px;}
.pricing-box-bottom{margin-top:40px;}
.pricing-table-featured{margin:5px 0;}
.pricing-table-featured .pricicng-feature{min-height:180px;}
</style>