Pricing Tables

Please get example html code below then change the content to build the pricing tables

Style 01

<div class="pricing"><!-- Pricing Table Row -->

    <div class="text-center">

        <h5 class="text-uppercase mb60">Register now <span class="second-font">Or</span> try it free for 30 days</h5>

    </div>

    <div class="row"><!-- Basic Plan -->

        <div class="col-md-3 mb30">

            <ul class="pricing-table style-1 hover-up hover-shadow">

                <li class="title">Basic Plan</li>

                <li class="bullet-item">15 Email Account</li>

                <li class="bullet-item">100Gb Space <i class="fa fa-check color-base">&nbsp;</i></li>

                <li class="bullet-item">1 Domain Name</li>

                <li class="bullet-item">500Gb Bandwidth <i class="fa fa-check color-base">&nbsp;</i></li>

                <li class="bullet-item">25 MySQL Databases</li>

                <li class="bullet-item">Enhanced Sercurity</li>

                <li class="price"><span class="currency">$</span>185<span class="period">monthy</span></li>

                <li class="cta-button"><a class="dexp-shortcodes-button btn btn-sm bg-dark " href="#" role="button">Get Plan</a></li>

            </ul>

        </div>

        <!-- Business Plan -->

        <div class="col-md-3 mb30">

            <ul class="pricing-table style-1 hover-up hover-shadow">

                <li class="title">Business Plan</li>

                <li class="bullet-item">15 Email Account</li>

                <li class="bullet-item">100Gb Space <i class="fa fa-check color-base">&nbsp;</i></li>

                <li class="bullet-item">1 Domain Name</li>

                <li class="bullet-item">500Gb Bandwidth <i class="fa fa-check color-base">&nbsp;</i></li>

                <li class="bullet-item">25 MySQL Databases</li>

                <li class="bullet-item">Enhanced Sercurity</li>

                <li class="price"><span class="currency">$</span>235<span class="period">monthy</span></li>

                <li class="cta-button"><a class="dexp-shortcodes-button btn btn-sm bg-dark " href="#" role="button">Get Plan</a></li>

            </ul>

        </div>

        <!-- Premium Plan -->

        <div class="col-md-3 mb30">

            <ul class="pricing-table style-1 hover-up hover-shadow">

                <li class="title">Premium Plan</li>

                <li class="bullet-item">15 Email Account</li>

                <li class="bullet-item">100Gb Space <i class="fa fa-check color-base">&nbsp;</i></li>

                <li class="bullet-item">1 Domain Name</li>

                <li class="bullet-item">500Gb Bandwidth <i class="fa fa-check color-base">&nbsp;</i></li>

                <li class="bullet-item">25 MySQL Databases</li>

                <li class="bullet-item">Enhanced Sercurity</li>

                <li class="price"><span class="currency">$</span>185<span class="period">monthy</span></li>

                <li class="cta-button"><a class="dexp-shortcodes-button btn btn-sm bg-dark " href="#" role="button">Get Plan</a></li>

            </ul>

        </div>

        <!-- Ultimate Plan -->

        <div class="col-md-3 mb30">

            <ul class="pricing-table style-1 hover-up hover-shadow">

                <li class="title">Ultimate Plan</li>

                <li class="bullet-item">15 Email Account</li>

                <li class="bullet-item">100Gb Space <i class="fa fa-check color-base">&nbsp;</i></li>

                <li class="bullet-item">1 Domain Name</li>

                <li class="bullet-item">500Gb Bandwidth <i class="fa fa-check color-base">&nbsp;</i></li>

                <li class="bullet-item">25 MySQL Databases</li>

                <li class="bullet-item">Enhanced Sercurity</li>

                <li class="price"><span class="currency">$</span>235<span class="period">monthy</span></li>

                <li class="cta-button"><a class="dexp-shortcodes-button btn btn-sm bg-dark " href="#" role="button">Get Plan</a></li>

            </ul>

        </div>

    </div>

</div>

Style 02

<div class="pricing style-2"><!-- Pricing Table Row -->

    <div class="row"><!-- Basic Plan -->

        <div class="col-md-3 mb30"><!-- Plan Icon -->

            <div class="icon"><img alt="" src="http://statics.drupalexp.com/zap/price-icon-1.png"></div>

            <ul class="pricing-table style-2">

                <li class="title">Basic</li>

                <li class="price"><span class="currency">$</span>185<span class="period">monthy</span></li>

                <li class="bullet-item">15 Email Account</li>

                <li class="bullet-item">100Gb Space</li>

                <li class="bullet-item">1 Domain Name</li>

                <li class="bullet-item">500Gb Bandwidth</li>

                <li class="bullet-item">25 MySQL Databases</li>

                <li class="bullet-item">Enhanced Sercurity</li>

                <li class="cta-button"><a class="dexp-shortcodes-button btn btn-lg bg-dark " href="#" role="button">GET PLAN NOW</a></li>

            </ul>

        </div>

        <!-- BUSINESS Plan -->

        <div class="col-md-3 mb30"><!-- Plan Icon -->

            <div class="icon"><img alt="" src="http://statics.drupalexp.com/zap/price-icon-2.png"></div>

            <ul class="pricing-table style-2">

                <li class="title">BUSINESS</li>

                <li class="price"><span class="currency">$</span>185<span class="period">monthy</span></li>

                <li class="bullet-item">15 Email Account</li>

                <li class="bullet-item">100Gb Space</li>

                <li class="bullet-item">1 Domain Name</li>

                <li class="bullet-item">500Gb Bandwidth</li>

                <li class="bullet-item">25 MySQL Databases</li>

                <li class="bullet-item">Enhanced Sercurity</li>

                <li class="cta-button"><a class="dexp-shortcodes-button btn btn-lg bg-dark " href="#" role="button">GET PLAN NOW</a></li>

            </ul>

        </div>

        <!-- Premium Plan -->

        <div class="col-md-3 mb30"><!-- Plan Icon -->

            <div class="icon"><img alt="" src="http://statics.drupalexp.com/zap/price-icon-3.png"></div>

            <ul class="pricing-table style-2">

                <li class="title">premium</li>

                <li class="price"><span class="currency">$</span>185<span class="period">monthy</span></li>

                <li class="bullet-item">15 Email Account</li>

                <li class="bullet-item">100Gb Space</li>

                <li class="bullet-item">1 Domain Name</li>

                <li class="bullet-item">500Gb Bandwidth</li>

                <li class="bullet-item">25 MySQL Databases</li>

                <li class="bullet-item">Enhanced Sercurity</li>

                <li class="cta-button"><a class="dexp-shortcodes-button btn btn-lg bg-dark " href="#" role="button">GET PLAN NOW</a></li>

            </ul>

        </div>

        <!-- Ultimate Plan -->

        <div class="col-md-3 mb30"><!-- Plan Icon -->

            <div class="icon"><img alt="" src="http://statics.drupalexp.com/zap/price-icon-4.png"></div>

            <ul class="pricing-table style-2">

                <li class="title">ultimate</li>

                <li class="price"><span class="currency">$</span>185<span class="period">monthy</span></li>

                <li class="bullet-item">15 Email Account</li>

                <li class="bullet-item">100Gb Space</li>

                <li class="bullet-item">1 Domain Name</li>

                <li class="bullet-item">500Gb Bandwidth</li>

                <li class="bullet-item">25 MySQL Databases</li>

                <li class="bullet-item">Enhanced Sercurity</li>

                <li class="cta-button"><a class="dexp-shortcodes-button btn btn-lg bg-dark " href="#" role="button">GET PLAN NOW</a></li>

            </ul>

        </div>

    </div>

</div>

Style 03

<div class="pricing style-3"><!-- Pricing Table Row -->

    <div class="row"><!-- Basic Plan -->

        <div class="col-md-3 mb30">

            <ul class="pricing-table style-3">

                <li class="price"><img alt="" class="bg-img" src="http://statics.drupalexp.com/zap/pricing-table-bg-1.png">

                    <h5>Basic</h5>

                    <span class="currency">$</span>185<span class="period">monthy</span></li>

                <li class="bullet-item">15 Email Account</li>

                <li class="bullet-item">100Gb Space</li>

                <li class="bullet-item">1 Domain Name</li>

                <li class="bullet-item">500Gb Bandwidth</li>

                <li class="bullet-item">25 MySQL Databases</li>

                <li class="bullet-item">Enhanced Sercurity</li>

                <li class="cta-button"><a class="dexp-shortcodes-button btn btn-lg bg-gray " href="#" role="button">GET PLAN NOW</a></li>

            </ul>

        </div>

        <!-- BUSINESS Plan -->

        <div class="col-md-3 mb30">

            <ul class="pricing-table style-3">

                <li class="price"><img alt="" class="bg-img" src="http://statics.drupalexp.com/zap/pricing-table-bg-2.png">

                    <h5>BUSINESS</h5>

                    <span class="currency">$</span>185<span class="period">monthy</span></li>

                <li class="bullet-item">15 Email Account</li>

                <li class="bullet-item">100Gb Space</li>

                <li class="bullet-item">1 Domain Name</li>

                <li class="bullet-item">500Gb Bandwidth</li>

                <li class="bullet-item">25 MySQL Databases</li>

                <li class="bullet-item">Enhanced Sercurity</li>

                <li class="cta-button"><a class="dexp-shortcodes-button btn btn-lg bg-gray " href="#" role="button">GET PLAN NOW</a></li>

            </ul>

        </div>

        <!-- PREMIUM Plan -->

        <div class="col-md-3 mb30">

            <ul class="pricing-table style-3">

                <li class="price"><img alt="" class="bg-img" src="http://statics.drupalexp.com/zap/pricing-table-bg-3.png">

                    <h5>PREMIUM</h5>

                    <span class="currency">$</span>185<span class="period">monthy</span></li>

                <li class="bullet-item">15 Email Account</li>

                <li class="bullet-item">100Gb Space</li>

                <li class="bullet-item">1 Domain Name</li>

                <li class="bullet-item">500Gb Bandwidth</li>

                <li class="bullet-item">25 MySQL Databases</li>

                <li class="bullet-item">Enhanced Sercurity</li>

                <li class="cta-button"><a class="dexp-shortcodes-button btn btn-lg bg-gray " href="#" role="button">GET PLAN NOW</a></li>

            </ul>

        </div>

        <!-- ULTIMATE Plan -->

        <div class="col-md-3 mb30">

            <ul class="pricing-table style-3">

                <li class="price"><img alt="" class="bg-img" src="http://statics.drupalexp.com/zap/pricing-table-bg-4.png">

                    <h5>ULTIMATE</h5>

                    <span class="currency">$</span>185<span class="period">monthy</span></li>

                <li class="bullet-item">15 Email Account</li>

                <li class="bullet-item">100Gb Space</li>

                <li class="bullet-item">1 Domain Name</li>

                <li class="bullet-item">500Gb Bandwidth</li>

                <li class="bullet-item">25 MySQL Databases</li>

                <li class="bullet-item">Enhanced Sercurity</li>

                <li class="cta-button"><a class="dexp-shortcodes-button btn btn-lg bg-gray " href="#" role="button">GET PLAN NOW</a></li>

            </ul>

        </div>

    </div>

</div>

results matching ""

    No results matching ""