Team portrait

This bootstrap snippet called "Team portrait" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: bootstrap,snippet,team,portrait,css,html,code

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<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="https://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="https://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="https://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>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

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;
}

                                    

Similar snippets

Bootstrap snippet team members tab

team members tab

View

Bootstrap snippet team members with left social icons

team members with left social icons

View

Bootstrap snippet Team hover effect

Team hover effect

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.1

Created: Dec 20th 2014, 21:01

Views: 5.3K

Rated 5/5 based on 2 reviews