pricing table style : demo 132

$ 10

Standard

  • 50GB Disk Space
  • 50 Email Accounts
  • 50GB Bandwidth
  • 15 Subdomains
$ 20

Business

  • 50GB Disk Space
  • 50 Email Accounts
  • 50GB Bandwidth
  • 15 Subdomains
$ 30

Premium

  • 50GB Disk Space
  • 50 Email Accounts
  • 50GB Bandwidth
  • 15 Subdomains

HTML

(Icons : Fontawesome & CSS Framwork: Bootstrap)
                        
$ 10

Standard

  • 50GB Disk Space
  • 50 Email Accounts
  • 50GB Bandwidth
  • 15 Subdomains
$ 20

Business

  • 50GB Disk Space
  • 50 Email Accounts
  • 50GB Bandwidth
  • 15 Subdomains

CSS

(Fonts required: Open Sans.)
                        .demo{ background-color: #dbdbdb; }
                        .pricingTable{
                            background: #fff;
                            font-family: 'Open Sans', sans-serif;
                            text-align: center;
                            margin: 40px 0 70px;
                            border: 1px solid rgba(0,0,0,0.2);
                            border-radius:50px 50px 30px 30px;
                            position: relative;
                            z-index: 1;
                        }
                        .pricingTable:before{
                            content: "";
                            background: linear-gradient(to right,#00e8b5,#008fc7);
                            width: 100%;
                            height: 50px;
                            border-radius: 50px 50px 0 0;
                            position: absolute;
                            top: 0;
                            left: 0;
                            z-index: -1;
                        }
                        .pricingTable .pricingTable-header{
                            color: #fff;
                            margin: -35px 0 25px;
                        }
                        .pricingTable .pricingTable-header:after{
                            content: '';
                            clear: both;
                            background: linear-gradient(to right,#00e8b5,#008fc7);
                            height: 4px;
                            width: 40px;
                            margin: 0 auto;
                            display: block;
                        }
                        .pricingTable .price-value{
                            background: linear-gradient(to right,#00e8b5,#008fc7);
                            font-weight: 600;
                            letter-spacing: -1px;
                            line-height: 120px;
                            width: 120px;
                            height: 120px;
                            margin: 0 auto 25px;
                            border-radius: 100%;
                            box-shadow: 0 0 0 10px rgba(0,0,0,0.05) inset;
                        }
                        .pricingTable .price-value .currency{
                            font-size: 35px;
                            display: inline-block;
                        }
                        .pricingTable .price-value .amount{
                            font-size: 50px;
                            display: inline-block;
                        }
                        .pricingTable .title{
                            background: linear-gradient(to right,#00e8b5,#008fc7);
                            font-size: 18px;
                            font-weight: 600;
                            letter-spacing: 2px;
                            text-transform: uppercase;
                            padding: 13px 25px;
                            margin: 0 0 20px;
                            text-shadow: 0 0 3px #555;
                            border-radius: 100px;
                            display: inline-block;
                        }
                        .pricingTable .pricing-content{
                            text-align: left;
                            padding: 0;
                            margin: 0 15px 40px;
                            list-style: none;
                        }
                        .pricingTable .pricing-content li{
                            color: #555;
                            font-size: 16px;
                            text-transform: uppercase;
                            padding: 0 35px 0 20px;
                            margin-bottom: 30px;
                            position: relative;
                        }
                        .pricingTable .pricing-content li:last-child{ margin: 0; }
                        .pricingTable .pricing-content li:before,
                        .pricingTable .pricing-content li:after{
                            content: "";
                            background: linear-gradient(to top,#00e8b5,#008fc7);
                            width: 10px;
                            height: 10px;
                            position: absolute;
                            top: 7px;
                            left: 0;
                        }
                        .pricingTable .pricing-content li.disable:before{ background: #9b9b9b; }
                        .pricingTable .pricing-content li:after{
                            content: "\f00c";
                            color: #00e8b5;
                            background: transparent;
                            font-family: "Font Awesome 5 Free";
                            font-size: 17px;
                            font-weight: 900;
                            text-align: center;
                            line-height: 22px;
                            height: 25px;
                            width: 25px;
                            border: 2px solid #008fc7;
                            transform: translateY(-50%);
                            left: auto;
                            right: 0;
                            top: 50%;
                        }
                        .pricingTable .pricing-content li.disable:after{
                            content: "\f00d";
                            color: #9b9b9b;
                            border-color: #9b9b9b;
                        }
                        .pricingTable .pricingTable-signup a{
                            color: #fff;
                            background: linear-gradient(to right,#00e8b5,#008fc7);
                            font-size: 20px;
                            text-transform: uppercase;
                            line-height: 50px;
                            width: 170px;
                            height: 70px;
                            margin: 0 auto -70px;
                            border-radius: 0 0 115px 115px;
                            display: block;
                            position: relative;
                            z-index: 1;
                            transition: all 0.3s;
                        }
                        .pricingTable .pricingTable-signup a:hover{
                            font-weight: 600;
                            text-shadow: -3px 3px 5px #000;
                        }
                        .pricingTable .pricingTable-signup a:before,
                        .pricingTable .pricingTable-signup a:after{
                            content: "";
                            background: linear-gradient(to right,#008fc7,#00e8b5);
                            width: 95%;
                            height: 65px;
                            border-radius: 0 0 115px 115px;
                            transform: translateX(-50%);
                            position: absolute;
                            top: 0;
                            left: 50%;
                            z-index: -1;
                        }
                        .pricingTable .pricingTable-signup a:after{
                            background: #fff;
                            width: 50px;
                            height: 2px;
                            top: auto;
                            bottom: 25px;
                        }
                        .pricingTable.orange:before,
                        .pricingTable.orange .price-value,
                        .pricingTable.orange .pricingTable-header:after,
                        .pricingTable.orange .title,
                        .pricingTable.orange .pricingTable-signup a{
                            background: linear-gradient(to right,#FBA350,#FE5098);
                        }
                        .pricingTable.orange .pricingTable-signup a:before{
                            background: linear-gradient(to left,#FBA350,#FE5098);
                        }
                        .pricingTable.orange .pricing-content li:before{
                            background: linear-gradient(to bottom,#FBA350,#FE5098);
                        }
                        .pricingTable.orange .pricing-content li.disable:before{ background: #9b9b9b; }
                        .pricingTable.orange .pricing-content li:after{
                            color: #FBA350;
                            border-color: #FE5098;
                        }
                        .pricingTable.orange .pricing-content li.disable:after{
                            color: #9b9b9b;
                            border-color: #9b9b9b;
                        }
                        .pricingTable.pink:before,
                        .pricingTable.pink .price-value,
                        .pricingTable.pink .pricingTable-header:after,
                        .pricingTable.pink .title,
                        .pricingTable.pink .pricingTable-signup a{
                            background: linear-gradient(to right,#F260DC,#318CFA);
                        }
                        .pricingTable.pink .pricingTable-signup a:before{
                            background: linear-gradient(to left,#F260DC,#318CFA);
                        }
                        .pricingTable.pink .pricing-content li:before{
                            background: linear-gradient(to bottom,#F260DC,#318CFA);
                        }
                        .pricingTable.pink .pricing-content li.disable:before{ background: #9b9b9b; }
                        .pricingTable.pink .pricing-content li:after{
                            color: #F260DC;
                            border-color: #318CFA    ;
                        }
                        .pricingTable.pink .pricing-content li.disable:after{
                            color: #9b9b9b;
                            border-color: #9b9b9b;
                        }
                        @media only screen and (max-width: 990px){
                            .pricingTable{ margin: 40px 0 120px; }
                        }
                    
License Terms