Our Team Section Design Html Css Simple Example Gradient Background
<!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>HTML VS CSS</title>
<style>
body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient( 109.8deg, rgba(62,5,116,1) -5.2%, rgba(41,14,151,1) -5.2%, rgba(216,68,148,1) 103.3% );
}
.section-heading {
font-family: "Dancing Script", cursive;
text-align: center;
font-size: 64px;
color: #ffffff;
margin: 0 0 70px;
}
.container {
display: flex;
justify-content: center;
width: 90%;
max-width: 1440px;
margin: 0 auto;
}
.profile {
position: relative;
transition: all 0.3s;
}
.profile:hover {
transform: translateY(25px);
}
.profile img {
max-width: 100%;
border-radius: 50%;
border: 5px solid #f7f7f7;
filter: drop-shadow(-20px 0 10px rgba(0, 0, 0, 0.1));
cursor: pointer;
}
.profile:not(:first-child) img {
margin-left: -20px;
}
.profile .name {
position: absolute;
background-color: #ffd000;
color: #fff;
font-family: "Bebas Neue", cursive;
padding: 15px 30px;
border-radius: 100px;
bottom: -80px;
left: 50%;
white-space: nowrap;
transform: translate(-50%, -50px);
letter-spacing: 1px;
font-size: 20px;
opacity: 0;
transition: all 0.3s;
}
.profile .name::before {
content: "";
position: absolute;
width: 15px;
height: 15px;
background-color: #00ffff;
top: 0;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
.profile img:hover+.name {
opacity: 1;
transform: translateX(-50%);
box-shadow: 0 10px 20px rgba(86, 86, 198, 0.3);
}
</style>
</head>
<body>
<section class="team">
<h2 class="section-heading">Our Team</h2>
<div class="container">
<div class="profile">
<img src="https://images.unsplash.com/photo-1530577197743-7adf14294584?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=801&q=80"
alt="" /><span class="name">Suchitra Tiwari</span>
</div>
<div class="profile">
<img src="https://images.unsplash.com/photo-1598641795816-a84ac9eac40c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=801&q=80"
alt="" /><span class="name">Sajid Ghani</span>
</div>
<div class="profile">
<img src="https://images.unsplash.com/photo-1484186139897-d5fc6b908812?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
alt="" /><span class="name">Dhriti</span>
</div>
<div class="profile">
<img src="https://images.unsplash.com/photo-1595152772835-219674b2a8a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
alt="" /><span class="name">Kalyan</span>
</div>
<div class="profile">
<img src="https://images.unsplash.com/photo-1485206412256-701ccc5b93ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=812&q=80"
alt="" /><span class="name">Major Sameer</span>
</div>
<div class="profile">
<img src="https://images.unsplash.com/photo-1618018352910-72bdafdc82a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
alt="" /><span class="name">Milind</span>
</div>
<div class="profile">
<img src="https://images.unsplash.com/photo-1529068755536-a5ade0dcb4e8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=801&q=80"
alt="" /><span class="name">Srikant Tiwari</span>
</div>
</div>
</section>
</body>
</html>
- Meet The Team Template
- Meet The Team Social Media Posts
- Our Team Content For Website
- Team Section Design 10
- Our Team Ui Design
- Meet The Team Captions
- Our Team - Company Profile
- Meet Our Team Of Professionals
How To Use This Cord
steps
- Fast One Copy Html File.
- Copy CSS File And Past Head Part Top Fo Html File.
- File Save Name.html
- Ran Html File
- Ready To Use
