Bootstrap snippet: Team member

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: users,list,team,bootstrap,snippet,content,social



<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"> <div class="container bootstrap snippet"> <section id="team" class="white-bg padding-top-bottom"> <div class="container bootstrap snippet"> <h1 class="section-title text-center page-title">Meet our team</h1> <p class="section-description text-center">We are a small team with great skills. See the faces behind the lines of code. </p> <div class="row member-content"> <div class="col-sm-3 col-sm-offset-1 member-thumb fade-right in"> <img class="img-responsive img-center img-thumbnail img-circle" src="http://bootdey.com/img/Content/User_for_snippets.png" alt=""> <h4>El jefe</h4> <p class="title">Lead Designer &amp; Founder</p> </div> <div class="col-sm-7"> <div class="details"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <ul class="social-content"> <li><a href="mailto:mail@example.com"><i class="fa fa-envelope fa-fw"></i></a></li> <li><a href="#link"><i class="fa fa-twitter fa-fw"></i></a></li> <li><a href="#link"><i class="fa fa-facebook fa-fw"></i></a></li> <li><a href="#link"><i class="fa fa-linkedin fa-fw"></i></a></li> </ul> </div> </div> </div> <div class="row member-content right"> <div class="col-sm-3 col-sm-push-8 member-thumb"> <img class="img-responsive img-center img-thumbnail img-circle" src="http://bootdey.com/img/Content/user-453533-fdadfd.png" alt=""> <h4>El monito</h4> <p class="title">Designer</p> </div> <div class="col-sm-7 col-sm-pull-2"> <div class="details"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <ul class="social-content"> <li><a href="mailto:mail@example.com"><i class="fa fa-envelope fa-fw"></i></a></li> <li><a href="#link"><i class="fa fa-twitter fa-fw"></i></a></li> <li><a href="#link"><i class="fa fa-facebook fa-fw"></i></a></li> <li><a href="#link"><i class="fa fa-linkedin fa-fw"></i></a></li> </ul> </div> </div> </div> <div class="row member-content"> <div class="col-sm-3 col-sm-offset-1 member-thumb"> <img class="img-responsive img-center img-thumbnail img-circle" src="http://bootdey.com/img/Content/HexGames349.jpg" alt=""> <h4>El morenito</h4> <p class="title">Lead Developer</p> </div> <div class="col-sm-7 "> <div class="details"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <ul class="social-content"> <li><a href="mailto:mail@example.com"><i class="fa fa-envelope fa-fw"></i></a></li> <li><a href="#link"><i class="fa fa-twitter fa-fw"></i></a></li> <li><a href="#link"><i class="fa fa-facebook fa-fw"></i></a></li> <li><a href="#link"><i class="fa fa-linkedin fa-fw"></i></a></li> </ul> </div> </div> </div> </div> </section> </div>
.page-title{ color:#5bc0de; } .member-content .social-content li a{ display:inline-block; padding:0; min-width:40px; height:40px; font-size:21px; line-height:40px; color:#5cc9df; border-radius:5px; box-shadow:0 3px 0 0 transparent; -webkit-transition:all .3s ease-out; transition:all .3s ease-out; } .member-content .details { margin:20px 0 0 20px; position:relative; padding:30px; padding-left:100px; background:#f5f5f5; border-radius:10px; box-shadow:5px 5px 0 rgba(0,0,0,0.08); -webkit-transition:all .3s ease-out; transition:all .3s ease-out; } .member-content { margin-bottom:30px; } .member-thumb{ text-align:center; } .member-thumb h4{ font-size:21px; margin:10px 0; } .member-thumb .title{ font-size:18px; margin:10px 0; color:#5CC9DF; } .member-content:hover .details { background:#5bc0de; color:#fff; } .member-content.right .details { margin:20px 20px 0 0; box-shadow:-5px 5px 0 rgba(0,0,0,0.08); } .member-content .details:after { display:block; content:""; position:absolute; left:-18px; top:30px; width:0px; height:0px; background:transparent; border:20px solid transparent; border-left:20px solid #f5f5f5; box-shadow:-3px 0 0 rgba(0,0,0,0.08); -webkit-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transition:border-left-color .3s ease-out; transition:border-left-color .3s ease-out; } .member-content.right .details:after { position:absolute; left:auto; right:-17px; border-left:20px solid transparent; border-right:20px solid #f5f5f5; box-shadow:3px 0 0 0 rgba(0,0,0,0.08); -webkit-transform:rotate(45deg); transform:rotate(45deg); -webkit-transition:border-right-color .3s ease-out; transition:border-right-color .3s ease-out; } .member-content:hover .details:after { border-left-color:#5CC9DF; } .member-content.right:hover .details:after { border-left-color:transparent; border-right-color:#5CC9DF; } .member-content .details:before { display:block; content:"\201D"; position:absolute; left:20px; top:50px; font-size:120px; font-weight:800; line-height:60px; font-family:Arial; color:#5cc9df; -webkit-transition:all .3s ease-out; transition:all .3s ease-out; } .member-content:hover .details:before { color:#fff; } .member-content .social-content { list-style:none; margin:0; padding:0; } .member-content .social-content li { display:inline; text-align:center; margin:0 2px; } .member-content:hover .social-content li a { color:#fff; } .member-content .social-content li a:hover{ background:#fff; color:#5cc9df; box-shadow:0 3px 0 0 rgba(0,0,0,0.05); }
Dey-Dey

Team member

Dey-Dey
  Aug 1st 2014, 13:47
5.3K Views