pricing table style : demo 4

Standard

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

Business

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

Premium

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

Extra

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

HTML

                    

Standard

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

CSS

                    .pricingTable{
                        text-align: center;
                        transition:all 0.3s ease 0s;
                    }
                    .pricingTable > .pricingTable-header{
                        color:#fff;
                        position: relative;
                    }
                    .pricingTable-header > .heading{
                        background: #727cb6;
                        display: block;
                        padding: 30px 0;
                        border-radius: 10px 10px 0 0;
                    }
                    .heading > h3{
                        text-transform: capitalize;
                        margin: 0;
                    }
                    .pricingTable-header > .price-value{
                        background: #5f6795;
                        display: block;
                        padding: 20px 0;
                        font-size: 30px;
                        line-height: 27px;
                    }
                    .price-value > .mo{
                        display: block;
                        font-size: 13px;
                    }
                    .pricingTable > .pricingContent{
                        text-align: center;
                        text-transform: capitalize;
                    }
                    .pricingContent > ul{
                        list-style: none;
                        padding: 0;
                        margin-bottom: 0;
                    }
                    .pricingContent > ul > li{
                        padding: 10px 0;
                        border: 1px solid #DBDBDB;
                        border-top: 0px none;
                        background: #F5F5F5;
                    }
                    .pricingTable-sign-up{
                        padding: 15px 0;
                        border: 1px solid #DBDBDB;
                        border-top: 0px none;
                    }
                    .btn-block{
                        width: 40%;
                        margin: 0 auto;
                        border-radius: 4px;
                        text-transform: capitalize;
                        background: linear-gradient(#8991be 40%,#727cb6 60%);
                        border: 1px solid #727cb6;
                        color:#fff;
                        padding: 8px 0;
                    }
                    .btn-block:hover{
                        color:#fff;
                        border: 1px solid #727cb6;
                    }
                    .pink .heading{
                        background: #ed687c;
                    }
                    .pink .heading > .popular{
                        display: inline-block;
                        transform:rotate(-90deg);
                        position: absolute;
                        top:23px;
                        right: -10px;
                        background: #bb5163;
                        padding: 10px 30px 10px 8px
                    }
                    .pink .heading > .popular:before{
                        content: "";
                        width:40px;
                        height:40px;
                        background: #9d4352;
                        display: inline-block;
                        position: absolute;
                        top: 0px;
                        right:100%;
                    }
                    .pink .heading > .popular:after{
                        content: "";
                        border-bottom: 15px solid #bb5163;
                        border-left: 20px solid rgba(0, 0, 0, 0);
                        border-right: 20px solid rgba(0, 0, 0, 0);
                        position: absolute;
                        top: 30%;
                        left:-60%;
                        transform:rotate(90deg);
                    }
                    .pink .price-value{
                        background: #bb5163;
                    }
                    .pink .btn-block{
                        background: linear-gradient(#f499a8 40%,#ed687c 60%);
                        border: 1px solid #ed687c;
                    }
                    .green .heading{
                        background: #1abc9c;
                    }
                    .green .price-value{
                        background: #25917d;
                    }
                    .green .btn-block{
                        background: linear-gradient(#4ed7be 40%,#1abc9c 60%);
                        border: 1px solid #1abc9c;
                    }
                    .blue .heading{
                        background: #3498db;
                    }
                    .blue .price-value{
                        background: #3480b7;
                    }
                    .blue .btn-block{
                        background: linear-gradient(#5ba7dd 40%,#3498db 60%);
                        border: 1px solid #3498db;
                    }
                    .pricingTable:hover{
                        margin-top: -20px;
                    }
                    @media screen and (max-width: 990px){
                        .pricingTable{
                            margin-bottom: 20px;
                        }
                    }