Markup
<div class="section-padding"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="section-heading"> <h2>Expert Team</h2> <p>Duis autem vel eum iriure dolor in hendrerit putate</p> </div> </div> </div> <div class="row"> <div class="col-md-3 col-sm-3"> <div class="single-team-item"> <img src="assets/img/staff-1.jpg" alt=""> <div class="team-social-icons"> <a href="" target="_blank"><i class="fa fa-facebook"></i></a> <a href="" target="_blank"><i class="fa fa-twitter"></i></a> <a href="" target="_blank"><i class="fa fa-youtube"></i></a> <a href="" target="_blank"><i class="fa fa-linkedin"></i></a> </div> <h4>Rasel Ahmed <span>Web Developer</span></h4> </div> </div> <div class="col-md-3 col-sm-3"> <div class="single-team-item"> <img src="assets/img/staff-2.jpg" alt=""> <div class="team-social-icons"> <a href="" target="_blank"><i class="fa fa-facebook"></i></a> <a href="" target="_blank"><i class="fa fa-twitter"></i></a> <a href="" target="_blank"><i class="fa fa-youtube"></i></a> <a href="" target="_blank"><i class="fa fa-linkedin"></i></a> </div> <h4>Humaira Asima <span>Web Developer</span></h4> </div> </div> <div class="col-md-3 col-sm-3"> <div class="single-team-item"> <img src="assets/img/staff-3.jpg" alt=""> <div class="team-social-icons"> <a href="" target="_blank"><i class="fa fa-facebook"></i></a> <a href="" target="_blank"><i class="fa fa-twitter"></i></a> <a href="" target="_blank"><i class="fa fa-youtube"></i></a> <a href="" target="_blank"><i class="fa fa-linkedin"></i></a> </div> <h4>Fahmid Al Hossain <span>Web Developer</span></h4> </div> </div> <div class="col-md-3 col-sm-3"> <div class="single-team-item"> <img src="assets/img/staff-4.jpg" alt=""> <div class="team-social-icons"> <a href="" target="_blank"><i class="fa fa-facebook"></i></a> <a href="" target="_blank"><i class="fa fa-twitter"></i></a> <a href="" target="_blank"><i class="fa fa-youtube"></i></a> <a href="" target="_blank"><i class="fa fa-linkedin"></i></a> </div> <h4>Suzanna Smith <span>Web Developer</span></h4> </div> </div> </div> </div> </div>
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-heading { margin-bottom: 70px; text-align: center; } body { font-weight: 400; } .section-heading h2 { font-size: 40px; font-weight: 700; } .single-team-item { border: 2px solid #e8e8e8; } .team-social-icons { background: #5ba939 none repeat scroll 0 0; margin-left: 25px; margin-right: 25px; margin-top: -27px; padding: 5px; position: relative; text-align: center; z-index: 2; } .team-social-icons a { border: 1px solid; border-radius: 5px; color: #fff; display: inline-block; height: 30px; line-height: 30px; margin: 5px; text-align: center; width: 30px; } .single-team-item h4 { font-size: 20px; font-weight: 700; margin-top: 16px; text-align: center; } .single-team-item h4 span { color: #5ba939; display: block; font-size: 80%; font-weight: 300; margin-top: 5px; }