pricing table style : demo 8

$10per month

Standard

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

Business

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

Premium

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

Extra

  • 50GB Disk Space
  • 50 Email Accounts
  • 50GB Monthly Bandwidth
  • 50 Domains
  • Unlimited Subdomains

HTML

                    
$10per month

Standard

  • 50GB Disk Space
  • 50 Email Accounts
  • 50GB Monthly Bandwidth
  • 50 Domains
  • Unlimited Subdomains

CSS

                    .pricingTable{
                        text-align: center;
                        background: #fff;
                        border: 1px solid #e1e1e1;
                    }
                    .pricingTable > .pricingTable-header{
                        color:#fff;
                        padding:45px 0 0 0;
                        position: relative;
                    }
                    .pricingTable-header > .price-value{
                        width: 160px;
                        height: 160px;
                        border-radius: 50%;
                        margin: 0 auto;
                        background: #727cb6;
                        display: block;
                        font-size: 50px;
                        line-height: 30px;
                        padding: 45px 0;
                        border: 7px solid #fff;
                        box-shadow: 0 0 0 2px #727cb6;
                    }
                    .price-value > .mo{
                        font-size: 15px;
                        display: block;
                        text-transform: capitalize;
                    }
                    .price-value > .currency{
                        font-size: 24px;
                        position: relative;
                        bottom: 20px;
                        margin-right: 4px;
                    }
                    .pricingTable-header > .heading{
                        padding:30px 0 20px 0;
                        display: block;
                    }
                    .heading > h3{
                        color:#727272;
                        text-transform: uppercase;
                        margin: 0;
                        font-weight: 700;
                    }
                    .pricingTable > .pricingContent{
                        text-transform: capitalize;
                    }
                    .pricingTable > .pricingContent > ul{
                        list-style: none;
                        padding: 0;
                        margin-bottom: 0;
                    }
                    .pricingTable > .pricingContent > ul > li{
                        border-top: 1px solid #e1e1e1;
                        padding: 15px 0;
                        color:#818d9a;
                    }
                    .pricingTable > .pricingContent > ul > li:nth-child(odd){
                        background: #f8f8f8;
                    }
                    .pricingTable-sign-up{
                        padding: 40px 0;
                        border-top: 1px solid #e1e1e1;
                    }
                    .pricingTable-sign-up > .btn-block{
                        width: 60%;
                        margin: 0 auto;
                        border-radius: 0px;
                        padding: 10px 2px;
                        border: 2px solid #727272;
                        color:#727272;
                        text-transform: uppercase;
                        letter-spacing: 1px;
                        font-weight: 700;
                        transition: all 0.2s ease-in-out 0s;
                    }
                    .pricingTable-sign-up > .btn-block:hover{
                        background: #727272;
                        color:#fff;
                    }
                    .mid {
                        box-shadow: 0 0 10px 2px #e1e1e1;
                    }
                    .mid .pricingTable-header:after{
                        content: "hot";
                        width: 55px;
                        height:55px;
                        border-radius: 50%;
                        background: #727272;
                        display: block;
                        position: absolute;
                        top:10px;
                        right: 10px;
                        text-transform: uppercase;
                        line-height: 50px;
                        font-weight: bold;
                    }
                    .mid .price-value{
                        background: #727272;
                        box-shadow: 0 0 0 2px #727272;
                    }
                    @media screen and (max-width: 990px){
                        .pricingTable{
                            margin-bottom: 40px;
                        }
                    }