How to Create Responsive Our Team Section Using HTML and CSS | Team Section HTML CSS

Easy Learning February 18, 2023

 


A team section in a Website is a very Important section. Where you can introduce about your team members to other. In today article i will teach you How to Create Responsive Our Team Section Using HTML and CSS in website. So Let's Start...

First of all create a index.html file and copy below code in it




	<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Meet Team</title>
	<!-- link CSS file -->
	<link rel="stylesheet" type="text/css" href="style.css">
	
</head>
<body>
	<section>
		<h1 class="mainHeading">MEET our Team</h1>
		<br><br>
		<div class="container">
			<div class="box">
				<div class="teamPic">
					<img src="image/one.jpg" alt="">
				</div>
				<div class="text">
					<h1>Name</h1>
					<h4>Appointment</h4>
				</div>
			</div>

			<div class="box">
				<div class="teamPic">
					<img src="image/two.jpg" alt="">
				</div>
				<div class="text">
					<h1>Name</h1>
					<h4>Appointment</h4>
				</div>
			</div>

			<div class="box">
				<div class="teamPic">
					<img src="image/three.jpg" alt="">
				</div>
				<div class="text">
					<h1>Name</h1>
					<h4>Appointment</h4>
				</div>
			</div>

			<div class="box">
				<div class="teamPic">
					<img src="image/four.jpg" alt="">
				</div>
				<div class="text">
					<h1>Name</h1>
					<h4>Appointment</h4>
				</div>
			</div>

			<div class="box">
				<div class="teamPic">
					<img src="image/five.jpg" alt="">
				</div>
				<div class="text">
					<h1>Name</h1>
					<h4>Appointment</h4>
				</div>
			</div>

			<div class="box">
				<div class="teamPic">
					<img src="image/six.jpg" alt="">
				</div>
				<div class="text">
					<h1>Name</h1>
					<h4>Appointment</h4>
				</div>
			</div>

			<div class="box">
				<div class="teamPic">
					<img src="image/seven.jpg" alt="">
				</div>
				<div class="text">
					<h1>Name</h1>
					<h4>Appointment</h4>
				</div>
			</div>

			<div class="box">
				<div class="teamPic">
					<img src="image/eight.jpg" alt="">
				</div>
				<div class="text">
					<h1>Name</h1>
					<h4>Appointment</h4>
				</div>
			</div>

			<div class="box">
				<div class="teamPic">
					<img src="image/nine.jpg" alt="">
				</div>
				<div class="text">
					<h1>Name</h1>
					<h4>Appointment</h4>
				</div>
			</div>

			<div class="box">
				<div class="teamPic">
					<img src="image/ten.jpg" alt="">
				</div>
				<div class="text">
					<h1>Name</h1>
					<h4>Appointment</h4>
				</div>
			</div>
		</div>
	</section>	
</body>
</html>

Replace img src path with your team member image address

Now make a New File with the name style.css and pasted the below code in it

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

section{
	width: 100%;
	height: 100vh;
	margin-top: 10px;
}

.mainHeading{
	text-align: center;
	text-transform: uppercase;
	font-size: 32px;
	text-decoration: underline;
}

.container{
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	
}

.box{
	width: 250px;
	height: 250px;
	position: relative;
	margin: 3px;
}

.teamPic img{
	width: 100%;
	height: 100%;
	filter: grayscale(100%);
}

.text{
	position: absolute;
	bottom: 0;
	text-align: center;
	background: black;
	width: 250px;
	overflow: hidden;
	color: white;
	display: none;
}

.text h1{
	font-size: 32px;
}

.text h4{
	font-size: 24px;
}

.teamPic img:hover{
	filter: none;
	cursor: pointer;
}

.teamPic:hover ~ .text{
	display: block;
}

Done Can also check my Video Tutorials


Tags:

Post a Comment

0 Comments