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

This is the HTML code for this bootstrap snippet

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

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

This is the CSS code for this bootstrap snippet

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

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

                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.1

Created: Dec 20th 2014, 21:01

Views: 5.2K

Rated 5/5 based on 1 reviews