Nice Bootstrap Pricing Table

by Grobbert

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
  <div class="demo">
        <div class="container">
            <div class="row text-center">
                <h1 class="heading-title">CSS Pricing Table</h1>
            </div>

            <div class="row">
                <div class="col-md-4 col-sm-6">
                    <div class="pricingTable">
                        <div class="pricingTable-header">
                            <span class="heading">
                                Standard
                            </span>
                        </div>
                        <div class="pricing-plans">
                            <span class="price-value"><i class="fa fa-usd"></i><span>10</span></span>
                            <span class="subtitle">Lorem ipsum dolor</span>
                        </div>
                        <div class="pricingContent">
                            <ul>
                                <li><b>50GB</b> Disk Space</li>
                                <li><b>50</b>Email Accounts</li>
                                <li><b>50GB</b> Monthly Bandwidth</li>
                                <li><b>10</b> subdomains</li>
                                <li><b>15</b> Domains</li>
                            </ul>
                        </div><!-- /  CONTENT BOX-->

                        <div class="pricingTable-sign-up"><!-- BUTTON BOX-->
                            <a href="#" class="btn btn-block btn-default">buy now</a>
                        </div><!-- BUTTON BOX-->
                    </div>
               ...

CSS

.demo
{
	padding: 50px 0;
}
.heading-title
{
	margin-bottom: 50px;
}
.pricingTable {
    border: 1px solid #dbdbdb;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
    margin: 0 -15px;
    text-align: center;
    transition: all 0.4s ease-in-out 0s;
}

.pricingTable:hover{
    border: 2px solid #e46367;
    margin-top: -30px;
}

.pricingTable .pricingTable-header{
    padding: 30px 10px;
}

.pricingTable .heading{
    display: block;
    color: #000;
    font-weight: 900;
    text-transform: uppercase;
    font-size:21px;
}

.pricingTable .pricing-plans {
    padding-bottom: 25px;
    border-bottom: 1px solid #d0d0d0;
    color: #000;
    font-weight: 900;
}

.pricingTable .price-value{
    color: #474747;
    display: block;
    font-size: 25px;
    font-weight: 800;
    line-height: 35px;
    padding: 0 10px;
}

.pricingTable .price-value span{
    font-size: 50px;
}

.pricingTable .subtitle{
    color: #82919f;
    display: block;
    font-size: 15px;
    margin-top: 15px;
    font-weight: 100;
}

.pricingTable .pricingContent ul{
    padding: 0;
    list-style: none;
    margin-bottom: 0;
}

.pricingTable .pricingContent ul li{
    padding: 20px 0;
}

.pricingTable .pricingContent ul li:nth-child(odd) {
    background-color: #fff;
}

.pricingTable .pricingContent ul li:last-child{
    border-bottom: 1px solid #dbdbdb;
}

.pricingTable .pricingTable-sign-up{
    padding: 25px 0;
}

.pricingTable .btn-block{
    width: 50%;
    margin: 0 auto;
    background: #e46367;
    border:1px solid transparent;
    padding: 10px 5px;
    color:#fff;
    text-transform: capitalize;
    border-radius: 5px;
    transition:0.3s ease;
}

.pricingTable .btn-block:after{
    content: "\f090";
    font-family: 'FontAwesome';
    padding-left: 10px;
    font-size: 15px;
}

.pricingTable:hover .btn-block{
    background:#fff;
    color: #e46367;
    border:1px solid #e46367;
}

@media screen and (max-width:990px){
    .pricingTable{
        margin-bottom: 30px;
    }
}

@media...