"Team Member Showcase"
Bootstrap 3.3.0 Snippet by kastya

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css?family=Mirza:400,700|Roboto" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <section id="team-section"> <h2 align="center">Our Team</h2> <div class="container"> <div class="row team-data"> <div class="col-md-3 col-sm-3 col-xs-6"> <div class="team-profile"> <div class="member-img" align="center"> <img src="https://s4.postimg.org/7ec1711st/person.png" alt=""> </div> <h4 align="center">Member 1</h4> <div class="member-social" align="center"> <a href=""><i class="fa fa-facebook"></i></a> <a href=""><i class="fa fa-twitter"></i></a> <a href=""><i class="fa fa-google"></i></a> </div> </div> </div> <div class="col-md-3 col-sm-3 col-xs-6 "> <div class="team-profile"> <div class="member-img" align="center"> <img src="https://s4.postimg.org/7ec1711st/person.png" alt=""> </div> <h4 align="center">Member 2</h4> <div class="member-social" align="center"> <a href=""><i class="fa fa-facebook"></i></a> <a href=""><i class="fa fa-twitter"></i></a> <a href=""><i class="fa fa-google"></i></a> </div> </div> </div> <!-- member 1 ends here --> <div class="col-md-3 col-sm-3 col-xs-6"> <div class="team-profile"> <div class="member-img" align="center"> <img src="https://s4.postimg.org/7ec1711st/person.png" alt=""> </div> <h4 align="center">Member 3</h4> <div class="member-social" align="center"> <a href=""><i class="fa fa-facebook"></i></a> <a href=""><i class="fa fa-twitter"></i></a> <a href=""><i class="fa fa-google"></i></a> </div> </div> </div> <!-- member 2 ends here --> <div class="col-md-3 col-sm-3 col-xs-6"> <div class="team-profile"> <div class="member-img" align="center"> <img src="https://s4.postimg.org/7ec1711st/person.png" alt=""> </div> <h4 align="center">Member 4</h4> <div class="member-social" align="center"> <a href=""><i class="fa fa-facebook"></i></a> <a href=""><i class="fa fa-twitter"></i></a> <a href=""><i class="fa fa-google"></i></a> </div> </div> </div> <!-- member 3 ends here --> </div> </div> </section>
h1,h2,h3,h4{ font-family: 'Mirza', cursive; } p,label{ font-family: 'Roboto', sans-serif; } #about-us{ max-width: 100%; padding-top: 50px; } /*Team -section*/ #team-section h4{ text-shadow: 0px -1px 1px rgba(76, 78, 115, 1); } .member-img img{ padding-top: 10px; width: 50%; } .team-profile{ background: #e0eafc; } .member-social { background: #EECDA3; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #EF629F, #EECDA3); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #EF629F, #EECDA3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .member-social .fa{ color: white; padding: 20px 5px; font-size: 20px; } .member-social .fa:hover { color: #5f98f4; } .team-data { padding-top: 20px; padding-bottom: 20px; } /*Team media queries*/ @media (max-width: 768px){ .team-data .col-xs-6 { width: 50%; padding-top : 10px; } } /*Services*/ .my-services { margin-top: 50px; } .service { margin-top: 20px; } @media (max-width: 768px){ .img-responsive { width: 60% !important; } } @media (max-width: 320px){ .my-services img{ display: none !important; } .my-services{ text-align: center; } }

Related: See More


Questions / Comments: