Scribd
Upload
14 views3 pages

Team Section

xvzxv

Uploaded by

rajputbhushan9020
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views3 pages

Team Section

xvzxv

Uploaded by

rajputbhushan9020
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

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>Our Team Section</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.0/js/all.min.js">
<style>
@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@300;400;500;600&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Poppins;
}
.home-container{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #0c52a1;
}
.profile-card{
position: relative;
width: 220px;
height: 220px;
background-color: #fff;
padding: 30px;
border-radius: 50%;
box-shadow: -5px 8px 45px rgba(51, 51, 51, 0.126);
transition: all .4s;
margin: 0 20px;
}
.profile-card:hover{
border-radius: 10px;
height: 260px;
}
.profile-card .img{
position: relative;
width: 100%;
height: 100%;
}
.profile-card:hover img{
border-radius: 10px;
transform: translateY(-70px);
}
.img img{
object-fit: fill;
width: 100%;
border-radius: 50%;
transition: all .4s;
z-index: 99;
}
.caption{
text-align: center;
transform: translateY(-90px);
opacity: 0;
pointer-events: none;
transition: all .5s;
}
.profile-card:hover .caption{
opacity: 1;
pointer-events: all;
}
.caption h3{
font-size: 21px;
color: #0c52a1;
font-weight: 600;
}
.caption p{
font-size: 15px;
font-weight: 500;
margin: 2px 0 12px 0;
}
.caption .social-links i{
font-size: 21px;
margin: 0 3px;
cursor: pointer;
color: #333;
transition: all .4s;
}
.caption .social-links i:hover{
color: #0c52a1;
}
</style>
</head>
<body>
<div class="home-container">
<div class="profile-card">
<div class="img">
<img src="./man.jpg">
</div>
<div class="caption">
<h3>Tom Cruise</h3>
<p>Full Stack Developer</p>
<div class="social-links">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-instagram"></i>
</div>
</div>
</div>
<div class="profile-card">
<div class="img">
<img src="./man.jpg">
</div>
<div class="caption">
<h3>David Wornar</h3>
<p>Front End Developer</p>
<div class="social-links">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-instagram"></i>
</div>
</div>
</div>
<div class="profile-card">
<div class="img">
<img src="./man.jpg">
</div>
<div class="caption">
<h3>Vin Diesel</h3>
<p>Back End Developer</p>
<div class="social-links">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-instagram"></i>
</div>
</div>
</div>
</div>

</body>
</html>

You might also like