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