<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Mirza:400,700|Roboto" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<section id="team-section">
<h2 align="center">Our Team</h2>
<div class="container">
<div class="row team-data">
<div class="col-md-3 col-sm-3 col-xs-6">
<div class="team-profile">
<div class="member-img" align="center">
<img src="https://s4.postimg.org/7ec1711st/person.png" alt="">
</div>
<h4 align="center">Member 1</h4>
<div class="member-social" align="center">
<a href=""><i class="fa fa-facebook"></i></a>
<a href=""><i class="fa fa-twitter"></i></a>
<a href=""><i class="fa fa-google"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 ">
<div class="team-profile">
<div class="member-img" align="center">
<img src="https://s4.postimg.org/7ec1711st/person.png" alt="">
</div>
<h4 align="center">Member 2</h4>
<div class="member-social" align="center">
<a href=""><i class="fa fa-facebook"></i></a>
<a href=""><i class="fa fa-twitter"></i></a>
<a href=""><i class="fa fa-google"></i></a>
</div>
</div>
</div> <!-- member 1 ends here -->
<div class="col-md-3 col-sm-3 col-xs-6">
<div class="team-profile">
<div class="member-img" align="center">
<img src="https://s4.postimg.org/7ec1711st/person.png" alt="">
</div>
<h4 align="center">Member 3</h4>
<div class="member-social" align="center">
<a href=""><i class="fa fa-facebook"></i></a>
<a href=""><i class="fa fa-twitter"></i></a>
<a href=""><i class="fa fa-google"></i></a>
</div>
</div>
</div> <!-- member 2 ends here -->
<div class="col-md-3 col-sm-3 col-xs-6">
<div class="team-profile">
<div class="member-img" align="center">
<img src="https://s4.postimg.org/7ec1711st/person.png" alt="">
</div>
<h4 align="center">Member 4</h4>
<div class="member-social" align="center">
<a href=""><i class="fa fa-facebook"></i></a>
<a href=""><i class="fa fa-twitter"></i></a>
<a href=""><i class="fa fa-google"></i></a>
</div>
</div>
</div> <!-- member 3 ends here -->
</div>
</div>
</section>
h1,h2,h3,h4{
font-family: 'Mirza', cursive;
}
p,label{
font-family: 'Roboto', sans-serif;
}
#about-us{
max-width: 100%;
padding-top: 50px;
}
/*Team -section*/
#team-section h4{
text-shadow: 0px -1px 1px rgba(76, 78, 115, 1);
}
.member-img img{
padding-top: 10px;
width: 50%;
}
.team-profile{
background: #e0eafc;
}
.member-social {
background: #EECDA3; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #EF629F, #EECDA3); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #EF629F, #EECDA3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.member-social .fa{
color: white;
padding: 20px 5px;
font-size: 20px;
}
.member-social .fa:hover {
color: #5f98f4;
}
.team-data {
padding-top: 20px;
padding-bottom: 20px;
}
/*Team media queries*/
@media (max-width: 768px){
.team-data .col-xs-6 {
width: 50%;
padding-top : 10px;
}
}
/*Services*/
.my-services {
margin-top: 50px;
}
.service {
margin-top: 20px;
}
@media (max-width: 768px){
.img-responsive {
width: 60% !important;
}
}
@media (max-width: 320px){
.my-services img{
display: none !important;
}
.my-services{
text-align: center;
}
}
