Category: Sections

Pricing Table Section and Animation

Pricing Table 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;
    }

 

Mark up url: Click here

Bootstrap Collapse Section Customization

Markup

<section class="section-padding section-bg-1">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-6">
                <h2 class="section-title">reputation <span>management</span></h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. nibh euismo tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                <div class="styled-faq">                        
                    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingOne">
                                <h4 class="panel-title">
                                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        Identifying Problem Source
                                        <i class="fa fa-angle-up"></i>
                                        <i class="fa fa-angle-down"></i>
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                                <div class="panel-body">
                                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. nibh euismo tincidunt ut laoreet dolore magna aliquam erat volutpat.
                                </div>
                            </div>
                        </div>
                    
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                                <h4 class="panel-title">
                                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        Reducing the visiblity of the negative information
                                        <i class="fa fa-angle-up"></i>
                                        <i class="fa fa-angle-down"></i>
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                                <div class="panel-body">
                                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. nibh euismo tincidunt ut laoreet dolore magna aliquam erat volutpat.
                                </div>
                            </div>
                        </div>
                        
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingThree">
                                <h4 class="panel-title">
                                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                        Protecting brand integrity
                                        <i class="fa fa-angle-up"></i>
                                        <i class="fa fa-angle-down"></i>
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                                <div class="panel-body">
                                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. nibh euismo tincidunt ut laoreet dolore magna aliquam erat volutpat.
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!--end styled faq-->
            </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-bg-1:after {background-image: url('../img/bootstrap-collapse-accordion.jpg')}
    
    .section-bg-1 {
        position: relative;
    }
    .section-bg-1::after {
        background-position: center center;
        background-size: cover;
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 47%;
    }
    h2.section-title span {
        color: #19b5fe;
    }
    h2.section-title {
        font-size: 30px;
        font-weight: 700;
        text-transform: uppercase;
    }
    body {
        color: #848484;
        font-size: 15px;
        line-height: 1.7;
    }
    .styled-faq .panel-default > .panel-heading {
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
        border: medium none;
        border-radius: 0;
        padding: 0;
    }
    .styled-faq .panel .panel-collapse .panel-body {
        border: medium none;
    }
    .styled-faq .panel-group .panel {
        border-radius: 0;
        box-shadow: 0 0 0;
        margin-bottom: 15px;
    }
    .styled-faq .panel .panel-heading h4 a {
        display: block;
        padding: 15px;
        position: relative;
    }
    .styled-faq .panel .panel-heading h4 a i.fa {
        display: none;
        float: right;
        font-size: 150%;
        line-height: 15px;
    }
    .styled-faq .panel .panel-heading h4 a[aria-expanded="true"] i.fa.fa-angle-down {
        display: block;
    }
    .styled-faq .panel .panel-heading h4 a[aria-expanded="false"] i.fa.fa-angle-up {
        display: block;
    }
    .section-padding {
        padding: 50px 0;
        margin: 80px 0;
    }
    .styled-faq {
        margin-top: 30px;
        min-height: 320px;
    }

 

Mark up url: Click here

Multi-functional Service Section

Markup

<section class="section-padding">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="section-title">
                    <h2>Why choose us</h2>
                    <p>Duis autem vel eum iriure dolor in hendrerit in vumtate</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="single-service-item">
                    <div class="service-icon-container">
                        <div class="service-icon-table">
                            <div class="service-icon-tablecell">
                                <img src="assets/img/choose-icon-1.png" alt="Charity for Education">
                            </div>
                        </div>
                    </div>
                    <h3>Charity for Education</h3>
                    <p>Duis autem vel eum iriure dolor in hendre amvul utate velit esse molestie cons.</p>
                </div>
            </div>
            <div class="col-md-4">
                <a class="single-service-item">
                    <div class="service-icon-container">
                        <div class="service-icon-table">
                            <div class="service-icon-tablecell">
                                <img src="assets/img/choose-icon-2.png" alt="Home for Homeless">
                            </div>
                        </div>
                    </div>
                    <h3>Home for Homeless</h3>
                    <p>Duis autem vel eum iriure dolor in hendre amvul utate velit esse molestie cons.</p>
                </a>
            </div>
            <div class="col-md-4">
                <div class="single-service-item">
                    <div class="service-icon-container">
                        <div class="service-icon-table">
                            <div class="service-icon-tablecell">
                                <i class="fa fa-envelope"></i>
                            </div>
                        </div>
                    </div>
                    <h3>Help Little Hands</h3>
                    <p>Duis autem vel eum iriure dolor in hendre amvul utate velit esse molestie cons.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="single-service-item">
                    <div class="service-icon-container">
                        <div class="service-icon-table">
                            <div class="service-icon-tablecell">
                                <img src="assets/img/choose-icon-4.png" alt="Save Children">
                            </div>
                        </div>
                    </div>
                    <h3>Save Children</h3>
                    <p>Duis autem vel eum iriure dolor in hendre amvul utate velit esse molestie cons.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="single-service-item">
                    <div class="service-icon-container">
                        <div class="service-icon-table">
                            <div class="service-icon-tablecell">
                                <img src="assets/img/choose-icon-5.png" alt="Donate for Children">
                            </div>
                        </div>
                    </div>
                    <h3>Donate for Children</h3>
                    <p>Duis autem vel eum iriure dolor in hendre amvul utate velit esse molestie cons.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="single-service-item">
                    <div class="service-icon-container">
                        <div class="service-icon-table">
                            <div class="service-icon-tablecell">
                                <img src="assets/img/choose-icon-6.png" alt="Give Scholarship">
                            </div>
                        </div>
                    </div>
                    <h3>Give Scholarship</h3>
                    <p>Duis autem vel eum iriure dolor in hendre amvul utate velit esse molestie cons.</p>
                </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-padding {
        padding: 80px 0;
    }
    .section-title {
        margin-bottom: 60px;
        text-align: center;
    }
    .section-title h2 {
        margin-bottom: 20px;
        padding-bottom: 20px;
        position: relative;
    }
    .section-title h2::before {
        background: #f87900 none repeat scroll 0 0;
        bottom: 0;
        content: "";
        height: 2px;
        left: 50%;
        margin-left: -30px;
        position: absolute;
        width: 60px;
    }
    .section-title h2::after {
        background: #1a1a1a none repeat scroll 0 0;
        bottom: 0;
        content: "";
        height: 2px;
        left: 50%;
        margin-left: -10px;
        position: absolute;
        width: 20px;
        z-index: 1;
    }
    .single-service-item {
        color: #333;
        display: block;
        margin-bottom: 30px;
        text-align: center;
    }
    .single-service-item h3 {
        font-size: 25px;
        margin: 20px 0;
    }
    .service-icon-table {
        display: table;
        height: 80px;
        width: 100%;
    }
    .service-icon-tablecell {
        display: table-cell;
        vertical-align: middle;
    }
    .service-icon-container {
        color: #FF7876;
        font-size: 80px;
    }

 

Mark up url: Click here