pricing table style : demo 31

$10monthly

Standard

  • 50GB Disk Space
  • 50 Email Accounts
  • 10 subdomains
  • 15 Domains
  • 50GB Monthly Bandwidth
$20monthly

Business

  • 60GB Disk Space
  • 60 Email Accounts
  • 15 subdomains
  • 20 Domains
  • 60GB Monthly Bandwidth
$30monthly

Premium

  • 70GB Disk Space
  • 70 Email Accounts
  • 20 subdomains
  • 25 Domains
  • 70GB Monthly Bandwidth
$40monthly

Extra

  • 80GB Disk Space
  • 80 Email Accounts
  • 25 subdomains
  • 30 Domains
  • 80GB Monthly Bandwidth

HTML

                        
$10monthly

Standard

  • 50GB Disk Space
  • 50 Email Accounts
  • 10 subdomains
  • 15 Domains
  • 50GB Monthly Bandwidth

CSS

                        .demo{
                            background: -webkit-linear-gradient(to left, #eecda3, #e49ff1);
                            background:  linear-gradient(to left, #eecda3, #e49ff1);
                        }
                        .pricingTable{
                            text-align: center;
                            background: #fff;
                            border-radius: 5px;
                            margin-top: 60px;
                        }
                        .pricingTable .pricingTable-header{
                            position: relative;
                            border-bottom: 1px solid #e3e0e0;
                            border-radius: 5px 5px 0 0;
                            padding: 45px 0 0;
                            transition: all 0.3s ease 0s;
                        }
                        .pricingTable:hover .pricingTable-header{
                            background-color: #b696e9;
                        }
                        .pricingTable .price-icon{
                            display: block;
                            width: 87px;
                            height: 48px;
                            background: #fff;
                            border-left: 2px solid #b696e9;
                            border-right: 2px solid #b696e9;
                            position: absolute;
                            top: -20px;
                            left: 35%;
                        }
                        .pricingTable .price-icon:after,
                        .pricingTable .price-icon:before{
                            content: "";
                            width: 61.5px;
                            height: 61.5px;
                            background: #fff;
                            border-bottom: 3px solid #b696e9;
                            border-left: 3px solid #b696e9;
                            position: absolute;
                            bottom: -31.012px;
                            left: 10.5px;
                            transform: scaleY(0.5774) rotate(-45deg);
                            border-radius: 0 7px;
                        }
                        .pricingTable .price-icon:before{
                            border: 0px none;
                            border-right: 3px solid #b696e9;
                            border-top: 3px solid #b696e9;
                            top: -31.012px;
                        }
                        .pricingTable .price-value{
                            font-size: 25px;
                            color: #b696e9;
                            position: absolute;
                            top: -24px;
                            left: 41%;
                        }
                        .pricingTable .month{
                            display: block;
                            font-size: 12px;
                            text-transform: uppercase;
                        }
                        .pricingTable .heading{
                            font-size: 17px;
                            color: #b696e9;
                            letter-spacing: 1px;
                            text-transform: uppercase;
                            margin: 15px 0;
                            transition: all 0.4s ease 0s;
                        }
                        .pricingTable:hover .heading{
                            color: #fff;
                        }
                        .pricingTable .pricingContent ul{
                            padding: 0;
                            margin: 0;
                            list-style: none;
                        }
                        .pricingTable .pricingContent ul li{
                            font-size: 14px;
                            color: #878787;
                            padding: 13px 0;
                            border-bottom: 1px solid #dfeaf0;
                        }
                        .pricingTable .pricingContent ul li i{
                            margin: 0 10px 0 0;
                            font-style: italic;
                            color: #b696e9;
                        }
                        .pricingTable .pricingTable-signup{
                            padding: 30px 0;
                        }
                        .pricingTable .pricingTable-signup a{
                            display: inline-block;
                            font-size: 14px;
                            font-style: italic;
                            color: #999;
                            text-transform: capitalize;
                            background-color: #fff;
                            border-radius: 25px;
                            padding: 10px 25px;
                            border: 2px solid #ece8e7;
                            transition: all 0.4s ease 0s;
                        }
                        .pricingTable .pricingTable-signup a:hover{
                            background: #b696e9;
                            color: #fff;
                            border-color: #b696e9;
                        }
                        .pricingTable .pricingTable-signup a i{
                            margin-right: 5px;
                        }
                        @media screen and (max-width: 990px){
                            .pricingTable{ margin-bottom: 20px; }
                            .pricingTable .price-icon{ left: 39%; }
                            .pricingTable .price-value{ left: 44%;}
                        }
                        @media screen and (max-width: 767px){
                            .pricingTable .price-icon{ left: 44%; }
                            .pricingTable .price-value{ left: 46%;}
                        }
                        @media screen and (max-width: 480px){
                            .pricingTable .price-icon{ left: 40%; }
                            .pricingTable .price-value{ left: 44%;}
                        }
                        @media screen and (max-width: 360px){
                            .pricingTable .price-icon{ left: 37%; }
                            .pricingTable .price-value{ left: 42%;}
                        }
                    
License Terms