Price Table
<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>