pricing table style : demo 12

Standard

$10/per month
  • 50GB Disk Space
  • 50 Email Accounts
  • 50GB Monthly Bandwidth
  • 50 Domains
  • Unlimited Subdomains

Business

$20/per month
  • 50GB Disk Space
  • 50 Email Accounts
  • 50GB Monthly Bandwidth
  • 50 Domains
  • Unlimited Subdomains

Premium

$30/per month
  • 50GB Disk Space
  • 50 Email Accounts
  • 50GB Monthly Bandwidth
  • 50 Domains
  • Unlimited Subdomains

Extra

$40/per month
  • 50GB Disk Space
  • 50 Email Accounts
  • 50GB Monthly Bandwidth
  • 50 Domains
  • Unlimited Subdomains

HTML

                    

Standard

$10/per month
  • 50GB Disk Space
  • 50 Email Accounts
  • 50GB Monthly Bandwidth
  • 50 Domains
  • Unlimited Subdomains

CSS

                    .pricingTable{
                        text-align: center;
                        background: #e6e6e6;
                    }
                    .pricingTable:hover{
                        margin-top: 10px;
                    }
                    .pricingTable > .pricingTable-header{
                        color:#fff;
                    }
                    .pricingTable .pricingTable-header > .heading{
                        display: block;
                        padding: 20px 0;
                        background: #ed687c;
                    }
                    .pricingTable .pricingTable-header > .heading > h3{
                        margin: 0 0 12px 0;
                        text-transform: uppercase;
                        font-weight: bold;
                    }
                    .pricingTable .pricingTable-header > .heading > i{
                        font-size: 70px;
                        opacity: 0.5;
                    }
                    .pricingTable .pricingTable-header > .price-value{
                        display: block;
                        background: #ed687c;
                        margin: 20px 0;
                        padding: 10px 0;
                        font-size: 47px;
                        font-weight: bold;
                    }
                    .pricingTable .pricingTable-header > .price-value > .month{
                        display: block;
                        font-size: 14px;
                    }
                    .pricingTable > .pricingContent{
                        text-transform: capitalize;
                    }
                    .pricingTable > .pricingContent > ul{
                        list-style: none;
                        padding: 0;
                        margin-bottom: 0;
                    }
                    .pricingTable > .pricingContent > ul > li{
                        border-top: 1px solid #cdcdcd;
                        border-bottom: 1px solid #fff;
                        padding: 10px 0;
                        position: relative;
                        z-index: 1;
                        overflow: hidden;
                    }
                    .pricingTable > .pricingContent > ul > li:after{
                        content: "";
                        width: 100%;
                        height:100%;
                        position: absolute;
                        top:0;
                        left:-100%;
                        background: #b6b6b6;
                        z-index: -5;
                        transition: all 0.4s ease 0s;
                    }
                    .pricingTable > .pricingContent > ul > li:hover:after{
                        left:0;
                        transition: all 0.4s ease 0s;
                    }
                    .pricingTable .pricingTable-sign-up{
                        padding: 20px 0;
                    }
                    .pricingTable .pricingTable-sign-up > .btn-block{
                        padding: 15px 0;
                        text-transform: uppercase;
                        font-size: 16px;
                        font-weight: bold;
                        border-radius: 0px;
                        border: 1px solid #ed687c;
                        color: #ed687c;
                        background: #e6e6e6;
                        position: relative;
                        transition: all 0.6s ease 0s;
                    }
                    .pricingTable .pricingTable-sign-up > .btn-block:before{
                        content: "";
                        position: absolute;
                        top:0;
                        left:0;
                        width: 100%;
                        height:0;
                        z-index: -1;
                        transition: all 0.6s ease 0s;
                    }
                    .pricingTable .pricingTable-sign-up > .btn-block:after{
                        content: "";
                        position: absolute;
                        bottom:0;
                        right:0;
                        width: 100%;
                        height:0;
                        z-index: -1;
                        transition: all 0.6s ease 0s;
                    }
                    .pricingTable .pricingTable-sign-up > .btn-block:hover{
                        z-index: 1;
                        color:#fff;
                    }
                    .pricingTable .pricingTable-sign-up > .btn-block:hover:before,
                    .pricingTable .pricingTable-sign-up > .btn-block:hover:after{
                        background: #ed687c;
                        height:50%;
                    }
                    @media screen and (max-width: 990px){
                        .pricingTable{
                            margin-bottom: 20px;
                        }
                    }