8.9K
Responsive Team Section Design
When you add a team section to your website user can interact with team numbers easily and directly. They can share their ideas and give feedback to team members. Before starting this tutorial first you have to make one folder in your desired location and then put three images inside the folder. You can give suitable images name as you want. Here I have given the names img1, img2, and img3 respectively. In this tutorial, I am going to create a responsive team section design using HTML and CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Our Team Section design </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class ="top"><span>Meet Our Team</span></div>
<div class="wrap">
<div class="box">
<img src ="img2.jpg">
<div class="social">
<a href="#"><i class ="fa fa-facebook"></i></a>
<a href="#"><i class ="fa fa-twitter"></i></a>
<a href="#"><i class ="fa fa-youtube"></i></a>
<a href="#"><i class ="fa fa-linkedin"></i></a>
<a href="#"><i class ="fa fa-instagram"></i></a>
</div>
<div class="text">
<h1>Krishtina Kunal</h1>
<p> App Developer</p>
</div>
</div>
<div class="box">
<img src ="img1.jpg">
<div class="social">
<a href="#"><i class ="fa fa-facebook"></i></a>
<a href="#"><i class ="fa fa-twitter"></i></a>
<a href="#"><i class ="fa fa-youtube"></i></a>
<a href="#"><i class ="fa fa-linkedin"></i></a>
<a href="#"><i class ="fa fa-instagram"></i></a>
</div>
<div class="text">
<h1>John Doe</h1>
<p> UI Designer</p>
</div>
</div>
<div class="box">
<img src ="img3.jpg">
<div class="social">
<a href="#"><i class ="fa fa-facebook"></i></a>
<a href="#"><i class ="fa fa-twitter"></i></a>
<a href="#"><i class ="fa fa-youtube"></i></a>
<a href="#"><i class ="fa fa-linkedin"></i></a>
<a href="#"><i class ="fa fa-instagram"></i></a>
</div>
<div class="text">
<h1>Deepk Adhikari</h1>
<p> Project Manager</p>
</div>
</div>
</div>
</body>
</html>
CSS
body{
padding: 10px;
font-family: Arial;
}
.top{
font-size: 3em;
font-weight: bold;
text-align: center;
}
.wrap{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 30px;
max-width: 1000px;
margin: auto;
margin-top: 50px;
}
.box{
background: gray;
border-radius: 10px;
}
img{
width:100%;
height: 300px;
}
.social{
margin-top: -270px;
background: #2b3da6;
border-radius: 0 20px 20px 0 ;
position: absolute;
}
a{
display: flex;
margin: 5px;
position: relative;
text-decoration: none;
font-size:15px;
color:#fff;
padding: 5px;
}
.fa{
line-height: 30px;
width:30px;
height: 30px;
position: relative;
text-align: center;
}
.text{
text-align: center;
color:#fff;
}
p{
font-size:20px;
}
