Hello everyone, you can learn how to create a Responsive Team Section using HTML, CSS in this blog. So if you want to learn then follow all the steps carefully.
Watch Full Tutorial on YouTube
Source Code Of Responsive Team Section
Step 1: Create Index.html File
Create one file with the name index.html and paste the below code in this file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Responsive Team Section - Coding Power</title>
</head>
<body>
<h2>Our Team Members</h2>
<div class="container">
<div class="card">
<div class="content">
<div class="profile">
<img src="images/profile-1.jpg" alt="">
</div>
<div class="detail">
<h2>Coding Power</h2>
<h4>Front-End Developer</h4>
<div class="social">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-youtube-play"></i></a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="content">
<div class="profile">
<img src="images/profile-2.jpg" alt="">
</div>
<div class="detail">
<h2>Coding Power</h2>
<h4>Back-End Developer</h4>
<div class="social">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-youtube-play"></i></a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="content">
<div class="profile">
<img src="images/profile-3.jpg" alt="">
</div>
<div class="detail">
<h2>Coding Power</h2>
<h4>Full Stack Developer</h4>
<div class="social">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-youtube-play"></i></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Step 2: Create style.css File
Create one file with the name style.css and paste the below code in this file.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
}
body{
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #222;
color: white;
}
h2{
font-size: 30px;
margin: 15px;
font-weight: 600;
}
.container{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
}
.container .card{
width: 340px;
margin: 10px;
background: #444;
border-radius: 10px;
transition: 0.3s;
}
.container .card:hover{
background: coral;
}
.container .card .content{
transition: 0.3s;
}
.container .card .content:hover{
transform: scale(1.069);
}
.container .card .profile{
width: 140px;
height: 140px;
border-radius: 50%;
overflow: hidden;
margin: 20px auto;
border: 5px solid coral;
}
.container .card .profile img{
width: 100%;
height: 100%;
object-fit: cover;
}
.container .card .detail h2,
.container .card .detail h4{
margin: 10px 0;
}
.container .card .social{
margin: 15px 0;
width: 100%;
display: flex;
justify-content: center;
}
.container .card .detail .social a{
margin: 8px;
width: 40px;
height: 40px;
border-radius: 50%;
line-height: 40px;
text-align: center;
transition: 0.2s;
}
.container .card .social a:hover{
background: #222;
}
.container .card .social a i{
font-size: 21px;
color: white;
}That's It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.
