<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!-- this section wraps the team members as a container--> <section class="cf team-container"> <h1 class="team-h1">Our Team</h1> <!-- member--> <div class="team-member"> <img class="team-photo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44742/profile/profile-512_2.jpg"> <h3>Person's Name</h3> <span>This section could be used to show a very short bio description for each member</span> <a class="email" href="mailto:email@something.com"><span >email</span></a> </div> <!-- member--> <div class="team-member"> <img class="team-photo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44742/profile/profile-512_2.jpg"> <h3>Person's Name</h3> <span>This section could be used to show a very short bio description for each member</span> <a class="email" href="mailto:email@something.com"><span >email</span></a> </div> <!-- member--> <div class="team-member"> <img class="team-photo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44742/profile/profile-512_2.jpg"> <h3>Person's Name</h3> <span>This section could be used to show a very short bio description for each member</span> <a class="email" href="mailto:email@something.com"><span >email</span></a> </div> <!-- member--> <div class="team-member"> <img class="team-photo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44742/profile/profile-512_2.jpg"> <h3>Person's Name</h3> <span>This section could be used to show a very short bio description for each member</span> <a class="email" href="mailto:email@something.com"><span >email</span></a> </div> <!-- member--> <div class="team-member"> <img class="team-photo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44742/profile/profile-512_2.jpg"> <h3>Person's Name</h3> <span>This section could be used to show a very short bio description for each member</span> <a class="email" href="mailto:email@something.com"><span >email</span></a> </div> </section>

/* Team Member CSS ===========================*/ h1.team-h1 { margin: 0; position: absolute; top: -16px; text-align: center; left: 40%; font-family: georgia; font-style: italic; background-color: white; padding: 0px 20px; color: #222; } .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .cf { *zoom: 1; } .team-container { max-width: 1000px; margin: auto; border-top: 1px #e9e9e9 solid; border-bottom: 1px #e9e9e9 solid; padding-top: 5em; padding-bottom: 5em; margin-top: 3em; position: relative; } .team-member { width: 16%; float: left; text-align: center; margin-right: 5%; } .team-member:last-child {margin-right: 0;} .team-member span, .team-member h3 { max-width: 200px; font-family: sans-serif; letter-spacing: -1px; } .team-member h3 { color: #1CA3A3; } .email { color: #EA2678; } .team-member span { display: block; } .team-photo { border-radius: 50%; text-align: center; margin: auto; max-width: 100%; height: auto; transition: 0.1s transform ease-in-out; } .team-photo:hover { transform: scale(0.9); cursor: pointer; } /* code for phone layout */ @media (max-width:850px){ .team-member { width:25%; margin-left: 4%; margin-right: 4%; margin-bottom: 40px; } } @media (max-width:650px){ .team-member { float: none; display: block; margin: 50px auto; width: 100%; text-align: center; } .team-member h3, .team-member span { margin: 15px auto; } } /* ENDS Team Member CSS ===========================*/