Live Demo - How to create responsive "Meet Our Team" page design using bootstrap

See Free Live Demo example of Meet our team Full page design using html and css. you can get "Meet our team" page design free code. responsive company team page design. you can get code of how to create meet our team web page snippet. we give you example of meet our team web page design , you can simple copy bellow code and u...

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container section-ourTeam">
	<div class="row">
		<div class="col-md-12 col-sm-12 col-xs-12 ourTeam-hedding text-center">
			<h1>Meet Our Team</h1>
		</div>
	</div>
	<div class="row">
		<div class="col-md-4 col-sm-4 col-xs-12">
			<div class="row section-success ourTeam-box text-center">
				<div class="col-md-12 section1">
					<img src="/demo/meet01.png">
				</div>
				<div class="col-md-12 section2">
					<p>LISA MAHETA</p><br>
					<h1>MARKETING</h1><br>
				</div>
				<div class="col-md-12 section3">
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
					</p>
				</div>
				<div class="col-md-12 section4">
					<i class="fa fa-facebook-official" aria-hidden="true"></i>
					<i class="fa fa-twitter" aria-hidden="true"></i>
					<i class="fa fa-google-plus" aria-hidden="true"></i>
					<i class="fa fa-envelope" aria-hidden="true"></i>
				</div>
			</div>
		</div>
		<div class="col-md-4 col-sm-4 col-xs-12">
			<div class="row section-info ourTeam-box text-center">
				<div class="col-md-12 section1">
					<img src="/demo/meet02.png">
				</div>
				<div class="col-md-12 section2">
					<p>JOHN MEKER</p><br>
					<h1>DESIGNER</h1><br>
				</div>
				<div class="col-md-12 section3">
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
					</p>
				</div>
				<div class="col-md-12 section4">
					<i class="fa fa-facebook-official" aria-hidden="true"></i>
					<i class="fa fa-twitter" aria-hidden="true"></i>
					<i class="fa fa-google-plus" aria-hidden="true"></i>
					<i class="fa fa-envelope" aria-hidden="true"></i>
				</div>
			</div>
		</div>
		<div class="col-md-4 col-sm-4 col-xs-12">
			<div class="row section-danger ourTeam-box text-center">
				<div class="col-md-12 section1">
					<img src="/demo/meet03.png">
				</div>
				<div class="col-md-12 section2">
					<p>VIN DEASEL</p><br>
					<h1>PRODUCTER</h1>
				</div>
				<div class="col-md-12 section3">
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
					</p>
				</div>
				<div class="col-md-12 section4">
					<i class="fa fa-facebook-official" aria-hidden="true"></i>
					<i class="fa fa-twitter" aria-hidden="true"></i>
					<i class="fa fa-google-plus" aria-hidden="true"></i>
					<i class="fa fa-envelope" aria-hidden="true"></i>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

body{
    background-color:#f1f1f1;
}
.ourTeam-hedding{
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../demo/hands-joined.jpg');
    height:200px;
    width:100%;
    background-size:100% 100%;
    background-repeat:no-repeat;
    background: linear-gradient(rgba(0,0,0,.10)); 
}
.ourTeam-hedding h1{
    color:#fff;
    padding:70px 0px;
    font-weight:900;
    z-index: 1;
}
.ourTeam-box{
    border-top: 6px solid #5DDDD3;
    background-color: #FFFFFF;
}
.section1{
    padding: 30px 0px 0px 0px;
}
.section1 img{
    border:5px solid #5DDDD3;
    padding:5px;
    border-radius:50%;
    height:170px;
    width: 170px;
}
.section2 h1{
    font-size:20px;
    color:#C1C1C1;
    margin:0px;
    border-bottom:2px solid #5DDDD3;
    display: inline-block;
    padding: 10px 0px;
}
.section2 p{
    background-color: #5DDDD3;
    display: inline-block;
    font-weight: bold;
    color:#fff;
    padding: 5px 15px;
    border-radius: 3px;
    margin-top: -20px;    
}
.section2 span{
    color:#979597;
}
.section2 label{
    background-color: #5DDDD3;
    padding: 8px 10px 8px 10px;
    color:#fff;
    font-weight: normal;
    margin: 30px 0px 35px 0px;
    border-radius: 2px;
}
.section3 p{
    padding: 10px 15px 0px 15px;
    font-size:12px;
    color:#c3c9c9;
}
.section4{
    padding:10px 0px 50px 0px;
}
.section4 i{
    color:#fff;
    padding:3px;
    border-radius: 2px; 
    font-size: 12px;
    background-color: #5DDDD3;
    cursor: pointer;
}
.section-info{
    border-top:6px solid #90DFAA;
}
.section-danger{
    border-top:6px solid #FD8469;
}
.section-info .section1 img{
    border:5px solid #90DFAA;
    padding:5px;
}
.section-info .section2 p{
    background-color: #90DFAA;
    color:#fff;
}
.section-danger .section2 p{
    background-color: #FD8469;
    color:#fff;
}
.section-danger .section1 img{
    border:5px solid #FD8469;
    padding:5px;
}
.section-info .section4 i{
    background-color: #90DFAA;  
}
.section-danger .section4 i{
    background-color: #FD8469;  
}
.section-info .section2 h1{
    border-bottom:2px solid #90DFAA;
}
.section-danger .section2 h1{
    border-bottom:2px solid #FD8469;
}