<div class="container">
<div class="row">
<!-- Pricing Table -->
<div class="col-md-4 col-sm-12">
<div class="pricing-table">
<div class="txt-blue fw-6">Starter</div>
<div class="service-icon mx-auto">
<i class="fa fa-briefcase"></i>
</div>
<div class="pricing">
10<sup>$</sup>
</div>
<ul class="list-unstyled">
<li><strong>10GB</strong> Disk Space</li>
<li><strong>100GB</strong> Monthly Bandwidth</li>
<li><strong>20</strong> Email Accounts</li>
<li><strong>Unlimited</strong> subdomains</li>
</ul>
<a href="#" class="btn-theme btn-dark">Signup Now</a>
</div>
</div>
<!-- Pricing Table -->
<!-- Pricing Table -->
<div class="col-md-4 col-sm-12">
<div class="pricing-table best-seller">
<div class="txt-blue fw-6">Professional</div>
<div class="service-icon mx-auto">
<i class="fa fa-paper-plane"></i>
</div>
<div class="pricing">
40<sup>$</sup>
</div>
<ul class="list-unstyled">
<li><strong>Unlimited</strong> Disk Space</li>
<li><strong>Unlimited</strong> Monthly Bandwidth</li>
<li><strong>Unlimited</strong> Email Accounts</li>
<li><strong>Unlimited</strong> subdomains</li>
</ul>
<a href="#" class="btn-theme btn-danger">Signup Now</a>
</div>
</div>
<!-- Pricing Table -->
<!-- Pricing Table -->
<div class="col-md-4 col-sm-12">
<div class="pricing-table">
<div class="txt-blue fw-6">Basic</div>
<div class="service-icon mx-auto">
<i class="fa fa-plane"></i>
</div>
<div class="pricing">
20<sup>$</sup>
</div>
<ul class="list-unstyled">
<li><strong>2GB </strong> Disk Space</li>
<li><strong>25GB</strong> Monthly Bandwidth</li>
<li><strong>5</strong> Email Accounts</li>
<li><strong>Unlimited</strong> subdomains</li>
</ul>
<a href="#" class="btn-theme btn-dark">Signup Now</a>
</div>
</div>
<!-- Pricing Table -->
</div>
</div>
<title>Document</title>
<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">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body { background: #f1f1f1; font-family: 'Poppins', sans-serif; font-size: 16px;}
.pricing-table{
text-align: center;
background: #fafafa;
padding: 4rem 2rem;
}
.pricing {
position: relative;
font-size: 2.25rem;
font-weight: 600;
color: #ff3514;
padding: 35px 15px 0;
display: inline-block;
}
.pricing sup{
font-size: 50%;
color: #232323;
padding: 0 0 0 4px;
}
.pricing-table ul li{
padding: 10px 0;
font-size: 1rem.
}
.pricing-table .service-icon {
width: 105px;
height: 105px;
font-size: 2.825rem;
margin-top: 10px;
}
.best-seller{
background: #FFF;
border-style: solid;
border-width: 1px;
border-color: rgb(255, 53, 20);
box-shadow: 0px 0px 52px 0px rgba(28, 28, 28, 0.09);
}
.service-icon{
border-radius: 50%;
margin-right: 20px;
background-color: rgb(255, 255, 255);
box-shadow: 0px 6px 10px 0px rgba(255, 53, 20, 0.2);
width: 65px;
height: 65px;
z-index: 101;
text-align: center;
font-size: 24px;
color: rgb(183, 183, 183);
display: flex;
justify-content: space-around;
align-items: center;
}
.service-inner-content{
font-size: 14px;
color: #6f6f6f;
line-height: 1.571;
}
.service-inner-content h4{
color: #06163a;
line-height: 1.2;
text-align: left;
margin-bottom: 15px;
}
.btn-center{
margin-top: 70px;
margin-bottom: -20px;
}
.btn-theme{
color: #FFF !important;
padding: 0.5rem 1.9rem;
font-weight: 400;
font-size: 0.875rem;
display: inline-block;
display: inline-flex;
outline: none;
border: none;
cursor: pointer;
overflow: hidden;
z-index: 2;
align-items: center;
position: relative;
cursor: pointer;
-webkit-box-shadow: 0px 14px 47px 0px rgba(28, 28, 28, 0.24);
-moz-box-shadow: 0px 14px 47px 0px rgba(28, 28, 28, 0.24);
box-shadow: 0px 14px 47px 0px rgba(28, 28, 28, 0.24);
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
border-radius: 70px;
}
</style>