Bootstrap Responsive Our Team Section | Team Profile Hover Effect – Codewithrandom

Bootstrap Responsive Our Team Section | Team Profile Hover Effect – Codewithrandom

Welcome🎉 to Code With Random blog. In this blog, we learn how to create a Bootstrap Responsive Our Team Section. We use HTML & CSS ,bootstrap  for Bootstrap Responsive Our Team Section. Hope you enjoy our blog so let’s start with a basic HTML& bootstrap structure for Bootstrap Responsive Our Team Section. 

HTML&Bootstrap code

 <!DOCTYPE html>  
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Team Section Using HTML5 , CSS3 , Bootstrap 4</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:500,700&display=swap" rel="stylesheet">
</head>
<body>
<section class="section-team">
<div class="container">
<!-- Start Header Section -->
<div class="row justify-content-center text-center">
<div class="col-md-8 col-lg-6">
<div class="header-section">
<h3 class="small-title">Our Experts</h3>
<h2 class="title">Let's meet with our team members</h2>
</div>
</div>
</div>
<!-- / End Header Section -->
<div class="row">
<!-- Start Single Person -->
<div class="col-sm-6 col-lg-4 col-xl-3">
<div class="single-person">
<div class="person-image">
<img src="https://i.ibb.co/G2CBWvb/person1.jpg" alt="">
<span class="icon">
<i class="fab fa-html5"></i>
</span>
</div>
<div class="person-info">
<h3 class="full-name">John Doe</h3>
<span class="speciality">Web Developer</span>
</div>
</div>
</div>
<!-- / End Single Person -->
<!-- Start Single Person -->
<div class="col-sm-6 col-lg-4 col-xl-3">
<div class="single-person">
<div class="person-image">
<img src="https://i.ibb.co/nbpNr4r/person2.jpg" alt="">
<span class="icon">
<i class="fab fa-wordpress-simple"></i>
</span>
</div>
<div class="person-info">
<h3 class="full-name">Robert Smith</h3>
<span class="speciality">WordPress Developer</span>
</div>
</div>
</div>
<!-- / End Single Person -->
<!-- Start Single Person -->
<div class="col-sm-6 col-lg-4 col-xl-3">
<div class="single-person">
<div class="person-image">
<img src="https://i.ibb.co/25zdRMr/person3.jpg" alt="">
<span class="icon">
<i class="fab fa-angular"></i>
</span>
</div>
<div class="person-info">
<h3 class="full-name">John Doe</h3>
<span class="speciality">Angular Developer</span>
</div>
</div>
</div>
<!-- / End Single Person -->
<!-- Start Single Person -->
<div class="col-sm-6 col-lg-4 col-xl-3">
<div class="single-person">
<div class="person-image">
<img src="https://i.ibb.co/w0ynr2Q/person4.jpg" alt="">
<span class="icon">
<i class="fab fa-js"></i>
</span>
</div>
<div class="person-info">
<h3 class="full-name">John Smith</h3>
<span class="speciality">Javascript Developer</span>
</div>
</div>
</div>
<!-- / End Single Person -->
</div>
</div>
</section>
</body>
</html>

There is all HTML&Bootstrap code for the Bootstrap Responsive Our Team Section. Now, you can see output without CSS, then we write CSS for the bootstrap Responsive Our Team Section.

Output

CSS code

 p,a,h1,h2,h3,h4 {  
margin: 0;
padding: 0;
}
.section-team {
font-family: "Poppins", sans-serif;
padding: 80px 0;
}
.section-team .header-section {
margin-bottom: 50px;
}
.section-team .header-section .small-title {
margin-bottom: 25px;
font-size: 16px;
font-weight: 500;
color: #3e64ff;
}
.section-team .header-section .title {
font-weight: 700;
font-size: 45px;
}
.section-team .single-person {
margin-top: 30px;
padding: 30px;
background-color: #f6f9ff;
border-radius: 5px;
}
.section-team .single-person:hover {
background: linear-gradient(to right, #016cec, #00b5f7);
}
.section-team .single-person .person-image {
position: relative;
margin-bottom: 50px;
border-radius: 50%;
border: 4px dashed transparent;
transition: padding .3s;
}
.section-team .single-person:hover .person-image {
padding: 12px;
border: 4px dashed #fff;
}
.section-team .single-person .person-image img {
width: 100%;
border-radius: 50%;
}
.section-team .single-person .person-image .icon {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%,50%);
display: inline-block;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
background: linear-gradient(to right, #016cec, #00b5f7);
color: #fff;
border-radius: 50%;
font-size: 24px;
}
.section-team .single-person:hover .person-image .icon {
background: none;
background-color: #fff;
color: #016cec;
}
.section-team .single-person .person-info .full-name {
margin-bottom: 10px;
font-size: 28px;
font-weight: 700;
}
.section-team .single-person .person-info .speciality {
text-transform: uppercase;
font-size: 14px;
color: #016cec;
}
.section-team .single-person:hover .full-name,
.section-team .single-person:hover .speciality {
color: #fff;
}

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output


Now we have completed our CSS section,  Here is our updated output with CSSHope you like the bootstrap Responsive Our Team Section, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

This post teaches us how to create a Bootstrap Responsive Our Team Section using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – Hamza Gourram

Check out more…..



Leave a Reply