Bootstrap snippet: Team portrait

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,portrait,css,html,code



<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container" id="team"> <div class="content"> <div class="row"> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="team-portrait block"> <div class="title"> <h2>Michael Chang</h2> <h3 class="italic">Developer</h3> </div> <div class="portrait"> <a href="#"> <img src="http://lorempixel.com/400/400/people/1/" alt="Team Portrait"> <span class="overlay"><span class="valign"></span><i class="icon-envelope"></i></span> </a> </div> <p>Hi, I'm Michael Chang. I am a developer who specializes on CSS, HTML and Javascript. I'm excited to work more and learn more about design.</p> <div class="social-media"> <a href="#" data-toggle="tooltip" title="" data-original-title="twitter"><i class="fa fa-twitter"></i></a> <a href="#" data-toggle="tooltip" title="" data-original-title="facebook"><i class="fa fa-facebook"></i></a> <a href="#" data-toggle="tooltip" title="" data-original-title="linkedin"><i class="fa fa-linkedin"></i></a> <a href="#" data-toggle="tooltip" title="" data-original-title="github"><i class="fa fa-github"></i></a> <a href="#" data-toggle="tooltip" title="" data-original-title="pinterest"><i class="fa fa-pinterest"></i></a> <span class="stretch"></span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="team-portrait block"> <div class="title"> <h2>Jane Doe</h2> <h3 class="italic">Founder</h3> </div> <div class="portrait"> <a href="#"> <img src="http://lorempixel.com/400/400/people/9/" alt="Team Portrait"> <span class="overlay"><span class="valign"></span><i class="icon-envelope"></i></span> </a> </div> <p>I am Jane Doe, a web designer who loves designing and building websites. I founded this company to help bring web design to those who need it.</p> <div class="social-media"> <a href="#" data-toggle="tooltip" title="" data-original-title="twitter"><i class="fa fa-twitter"></i></a> <a href="#" data-toggle="tooltip" title="" data-original-title="facebook"><i class="fa fa-facebook"></i></a> <a href="#" data-toggle="tooltip" title="" data-original-title="linkedin"><i class="fa fa-linkedin"></i></a> <a href="#" data-toggle="tooltip" title="" data-original-title="github"><i class="fa fa-github"></i></a> <a href="#" data-toggle="tooltip" title="" data-original-title="pinterest"><i class="fa fa-pinterest"></i></a> <span class="stretch"></span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="team-portrait block"> <div class="title"> <h2>Jessica Smith</h2> <h3 class="italic">Graphic Designer</h3> </div> <div class="portrait"> <a href="#"> <img src="http://lorempixel.com/400/400/people/6/" alt="Team Portrait"> <span class="overlay"><span class="valign"></span><i class="icon-envelope"></i></span> </a> </div> <p>My name is Jessica Smith. I work mainly as a graphic designer, designing beautiful web elements, buttons, backgrounds.</p> <div class="social-media"> <a href="#" data-toggle="tooltip" title="" data-original-title="twitter"><i class="fa fa-twitter"></i></a> <a href="#" data-toggle="tooltip" title="" data-original-title="facebook"><i class="fa fa-facebook"></i></a> <a href="#" data-toggle="tooltip" title="" data-original-title="linkedin"><i class="fa fa-linkedin"></i></a> <a href="#" data-toggle="tooltip" title="" data-original-title="github"><i class="fa fa-github"></i></a> <a href="#" data-toggle="tooltip" title="" data-original-title="pinterest"><i class="fa fa-pinterest"></i></a> <span class="stretch"></span> </div> </div> </div> </div> </div> </div>
body{ background:#eee; } #team { margin-top:40px; } .block { background-color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; box-shadow: 0 2px 2px 0 rgba(0,0,0,.07); } #team .team-portrait { text-align: center; } #team .title { padding: 30px 0; } #team .title h2 { margin: 0; padding: 0 10px; line-height: 36px; color: #3e4258; } #team .title h3 { color: #9295a7; margin: 0; padding: 0 10px; font-size: 14px; line-height: 16px; } #team .btn { margin: 5px 10px 0 0; } #team p { padding: 0 30px; font-size: 13px; margin-bottom: 15px; line-height: 30px; text-align: left; } .portrait { position: relative; margin-bottom: 20px; padding: 0; width: 100%; height: 200px; overflow: hidden; -webkit-transition: border-color .5s; transition: border-color .5s; } .team .row [class*="col-"]:hover .portrait { border-color: #fff; } .portrait img { width: 100%; } .social-media { padding: 0 30px; color: #fff; width: 100%; text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; } .social-media a { display: inline-block; font-size: 20px; color: #3e4258; } .social-media a i { -webkit-transition: .3s; transition: .3s; } .social-media a:hover i { color: #444; } @media (max-width: 992px) { .portrait { height: auto; } } @media (min-width: 768px) and (max-width: 992px) { .team .social-media a { height: 30px; width: 30px; font-size: 15px; padding-top: 3px; } } .stretch { width: 100%; display: inline-block; font-size: 0; line-height: 0; }
Dey-Dey

Team portrait

Dey-Dey
  Dec 26th 2014, 12:09
3.8K Views