HTML code
Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection
<div class="container bootstrap snippet">
<div class="jumbotron">
<h1>My new Snippet</h1>
</div>
</div>
<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>Digant</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 Digant sajjan. 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>ruchita</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 ruchita, 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>alfred</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 alfred. 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{margin-top:20px;}