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

 

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.