Hey, developers welcome to Day 9 of our 90Days 90Projects challenge. And in Day 9 we are going to create an Our Team Page section design using HTML and CSS.
So to run the code you just need to copy the HTML and CSS code and run it into your code Editor.
Preview
HTML Code
index.html
<!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">
<title>Team Section</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-container">
<h2>Our Team</h2>
<hr>
<div class="members">
<div class="team-member">
<img src="./user.png">
<h4>John Doe</h4>
<p>Web Developer</p>
</div>
<div class="team-member">
<img src="./user.png">
<h4>John Doe</h4>
<p>Web Developer</p>
</div>
<div class="team-member">
<img src="./user.png">
<h4>John Doe</h4>
<p>Web Developer</p>
</div>
<div class="team-member">
<img src="./user.png">
<h4>John Doe</h4>
<p>Web Developer</p>
</div>
</div>
</div>
<!-- Our Team Page design using HTML CSS by raju_webdev -->
</body>
</html>
CSS Code
style.css
/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&family=Poppins:wght@400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background: linear-gradient(#d66f1b 0%, #ec2eef 100%);
}
.main-container {
background: #fff;
border-radius: 15px;
margin: 1rem;
padding: 20px;
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.4);
}
h2 {
text-align: center;
}
hr {
width: 10rem;
margin: 10px auto;
}
.members {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.team-member {
margin: 8px;
transition: all .3s ease;
cursor: pointer;
}
.team-member:hover {
transform: scale(1.1);
}
img {
width: 80px;
height: 80px;
border-radius: 50%;
margin: 10px;
}
h4,
p {
text-align: center;
font-size: 12px;
margin: 7px;
}
