Bootstrap snippet: My team

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: bootstrap,snippet,team,leader



<div class="container bootstrap snippet"> <div class="panel panel-info panel-shadow"> <div class="panel-heading"> <h3> <img class="img-circle img-thumbnail" src="http://bootdey.com/img/Content/user_1.jpg"> Deyson Bejarano </h3> </div> <div class="panel-body"> <div class="team padd"> <div class="container bootstrap snippet"> <div class="heading"> <h2>My Team</h2> <h6>Esse Quam Nihil Molestiae</h6> <div class="divider"></div> <p>At vero eos et accusamus et iustoccaecati cupiditate non provident, similos qui ratione voluptatem </p> <div class="divider"></div> </div> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="team-member"> <a href="#"><img src="http://lorempixel.com/400/400/people/1/" class="img-responsive" alt="Team-member"></a> <div class="member-details"> <h4><a href="#">H. Rackham</a></h4> <span>Director of the Company</span> </div> <div class="clearfix"></div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="team-member"> <a href="#"><img src="http://lorempixel.com/400/400/people/2/" class="img-responsive" alt="Team-member"></a> <div class="member-details"> <h4><a href="#">Jhon Wilson</a></h4> <span>MD of the Company</span> </div> <div class="clearfix"></div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="team-member"> <a href="#"><img src="http://lorempixel.com/400/400/people/3/" class="img-responsive" alt="Team-member"></a> <div class="member-details"> <h4><a href="#">D. Danial</a></h4> <span>CMD of the Company</span> </div> <div class="clearfix"></div> </div> </div> </div> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="team-member"> <a href="#"><img src="http://lorempixel.com/400/400/people/5/" class="img-responsive" alt="Team-member"></a> <div class="member-details"> <h4><a href="#">Deo Rachem</a></h4> <span>Designer of the Company</span> </div> <div class="clearfix"></div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="team-member"> <a href="#"><img src="http://lorempixel.com/400/400/people/6/" class="img-responsive" alt="Team-member"></a> <div class="member-details"> <h4><a href="#">Jennifer James</a></h4> <span>CA of the Company</span> </div> <div class="clearfix"></div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="team-member"> <a href="#"><img src="http://lorempixel.com/400/400/people/7/" class="img-responsive" alt="Team-member"></a> <div class="member-details"> <h4><a href="#">Pall Waths</a></h4> <span>Developer of the Company</span> </div> <div class="clearfix"></div> </div> </div> </div> </div> </div> </div> </div> </div>
.team{ border-top: 1px solid #e6e6e6; padding-bottom: 60px; } .panel-shadow{ box-shadow: rgba(0, 0, 0, 0.3) 7px 7px 7px; } .team .team-member{ margin-top: 20px; margin-bottom: 30px; } .team .team-member img{ max-width: 55px; float: left; border: 1px solid #f5f5f5; border-radius: 5px; } .team .team-member .member-details{ margin-left: 65px; } .team .team-member .member-details h4{ margin: 0; margin-bottom: 3px; padding-top: 9px; font-size: 14px; font-weight: bold; } .team .team-member .member-details h4 a{ color: #787878; } .team .team-member .member-details span{ display: block; margin-bottom: 2px; font-size: 12px; color: #aaaaaa; }
Dey-Dey

My team

Dey-Dey
  Sep 17th 2014, 08:46
3.6K Views