Pricing Table Section and Animation

Markup

<section class="section-padding">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="section-title">
                    <h2>Pricing <span>Plans</span></h2>
                    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse illum dolore eu feugiat nulla facilisis at vero eros et.</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="single-pricing-box">
                    <h3>Personal</h3>
                    <div class="pricing-icon">
                        <div class="pricing-icon-table">
                            <div class="pricing-icon-tablecell">
                                <img src="assets/img/price_icon1.png" alt="Price Icon">
                            </div>
                        </div>
                    </div>
                    <div class="pricing-list">
                        <ul>
                            <li>2 GB Web Space</li>
                            <li>Free Domain Register</li>
                            <li class="special">Special Offers</li>
                            <li>Service Uptime</li>
                        </ul>
                    </div>
                    <h3 class="pricing-amount">$15/mo</h3>
                    <a href="#" class="bordered-button">Order now</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="single-pricing-box">
                    <h3>Professional</h3>
                    <div class="pricing-icon">
                        <div class="pricing-icon-table">
                            <div class="pricing-icon-tablecell">
                                <img src="assets/img/price_icon2.png" alt="Price Icon">
                            </div>
                        </div>
                    </div>
                    <div class="pricing-list">
                        <ul>
                            <li>2 GB Web Space</li>
                            <li>Free Domain Register</li>
                            <li class="special">Special Offers</li>
                            <li>Service Uptime</li>
                        </ul>
                    </div>
                    <h3 class="pricing-amount">$15/mo</h3>
                    <a href="#" class="bordered-button">Order now</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="single-pricing-box">
                    <h3>Business</h3>
                    <div class="pricing-icon">
                        <div class="pricing-icon-table">
                            <div class="pricing-icon-tablecell">
                                <img src="assets/img/price_icon3.png" alt="Price Icon">
                            </div>
                        </div>
                    </div>
                    <div class="pricing-list">
                        <ul>
                            <li>2 GB Web Space</li>
                            <li>Free Domain Register</li>
                            <li class="special">Special Offers</li>
                            <li>Service Uptime</li>
                        </ul>
                    </div>
                    <h3 class="pricing-amount">$15/mo</h3>
                    <a href="#" class="bordered-button">Order now</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="single-pricing-box">
                    <h3>Enterprise</h3>
                    <div class="pricing-icon">
                        <div class="pricing-icon-table">
                            <div class="pricing-icon-tablecell">
                                <img src="assets/img/price_icon4.png" alt="Price Icon">
                            </div>
                        </div>
                    </div>
                    <div class="pricing-list">
                        <ul>
                            <li>2 GB Web Space</li>
                            <li>Free Domain Register</li>
                            <li class="special">Special Offers</li>
                            <li>Service Uptime</li>
                        </ul>
                    </div>
                    <h3 class="pricing-amount">$15/mo</h3>
                    <a href="#" class="bordered-button">Order now</a>
                </div>
            </div>
            
        </div>
    </div>
</section>

Style

    /* Base CSS */
    .alignleft {
        float: left;
        margin-right: 15px;
    }
    .alignright {
        float: right;
        margin-left: 15px;
    }
    .aligncenter {
        display: block;
        margin: 0 auto 15px;
    }
    a:focus { outline: 0 solid }
    img {
        max-width: 100%;
        height: auto;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0 0 15px;
        font-weight: 700;
    }
    body {
    
    }
    a:hover { text-decoration: none }
    
    
    section.section-padding {
        padding: 80px;
    }
    body {
        color: #787978;
    }
    .section-title {
        margin-bottom: 50px;
        text-align: center;
    }
    h1, h2, h3, h4, h5, h6 {
        color: #333;
    }
    .section-title h2 span {
        color: #26a65b;
    }
    .single-pricing-box {
        border: 1px solid #ddd;
        padding: 30px;
        text-align: center;
        transition: 0.3s;
    }
    .single-pricing-box img {
        transition: 0.3s;
    }
    .single-pricing-box:hover {
        border-color: #26A65B;
        box-shadow: 0 0 30px #a9a9a9;
    }
    .single-pricing-box:hover img {
        opacity: 0.7;
    }
    .single-pricing-box h3 {
        margin-bottom: 30px;
        text-transform: uppercase;
    }
    .pricing-icon-table {
        display: table;
        height: 60px;
        width: 100%;
    }
    .pricing-icon-tablecell {
        display: table-cell;
        vertical-align: middle;
    }
    .pricing-icon {
        margin-bottom: 30px;
    }
    .pricing-list ul {
        list-style: outside none none;
        margin: 0;
        padding: 0;
        padding-left: 20px;
        line-height: 25px;
    }
    .pricing-list ul li:before {
        font-family: fontAwesome; 
        content: "\f00c";
        color: #26A65B;
        padding-right: 10px;
    }
    .pricing-list ul li.special:before {
        font-family: fontAwesome; 
        content: "\f00d";
        color: #F01313;
    }
    .pricing-list {
        margin: 0 auto 25px;
        max-width: 200px;
        text-align: left;
    }
    .single-pricing-box h3.pricing-amount {
        text-transform: none;
    }
    a.bordered-button {
        border: 1px solid #26a65b;
        border-radius: 50px;
        color: #333;
        display: inline-block;
        padding: 10px 30px;
        transition: 0.3s;
    }
    a.bordered-button:hover {
        background: #26A65B;
        color: #fff;
    }

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.