Responsive Team Section design with Bootstrap

Hello Friends, in this project, we will learn how to create a responsive team section design using HTML, CSS, and bootstrap. The team member or the employees are a key part of a company's progress. All company website add their valuable team members to their website. When visitors see the profiles of the trust level increase and buying services from that company increases. So team section design is an integral part of the web design process. I have shared many snippets based on CSS animation examples, javascript, bootstrap in this blog. Please make sure to check those as well apart from this project. For clear understanding, I would suggest you follow the below tutorial.

I hope you watched the whole video and grab the basic coding behind this snippet. In this project, I have three bootstrap responsive column grids to create three columns for the team member. I have included an image with a nice overlay animation on hover. In the bottom part of each box, I have used the name and designation of that particular person. Without more explanation, I am providing the code below.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>Team Section design using Bootstrap</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    
    <div class="team-area">
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="single-team">
          <div class="img-area">
            <img src="https://i.postimg.cc/qRjsQy6r/1.jpg" class="img-responsive" alt="">
            <div class="social">
              <ul class="list-inline">
                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
              </ul>
            </div>
          </div>
          <div class="img-text">
            <h4>John Doe</h4>
            <h5>Front-End Developer</h5>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="single-team">
          <div class="img-area">
            <img src="https://i.postimg.cc/wMMhrMDm/2.jpg" class="img-responsive" alt="">
            <div class="social">
              <ul class="list-inline">
                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
              </ul>
            </div>
          </div>
          <div class="img-text">
            <h4>Dave Wood</h4>
            <h5>Back-End Developer</h5>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="single-team">
          <div class="img-area">
            <img src="https://i.postimg.cc/PqMYrY4D/3.jpg" class="img-responsive" alt="">
            <div class="social">
              <ul class="list-inline">
                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
              </ul>
            </div>
          </div>
          <div class="img-text">
            <h4>Claire Chedd</h4>
            <h5>Back-End Developer</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

ADD CSS:

body{
    background: #262626;
}
.team-area{
    padding-top: 5%;
}
.single-team{
    background-color: #000;
    margin-bottom: 10px;
}
.single-team:hover .social{
    cursor: pointer;
    opacity: 1;
    transform: rotateY(0deg) scale(1, 1);
}
.img-area{
    overflow: hidden;
    position: relative;
}
.img-area img{
    width: 100%;
}
.img-area:hover img{
    transform: scale(1.2)
}
.img-area img{
    transition: all 0.4s ease 0s;
}
@media (max-width: 768px){
    .img-area img{
        display: inline-block;
    }
}
.img-area .social{
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    text-align: center;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    transition: .5s;
    transform: rotateY(180deg) scale(0.5, 0.5);
}
.img-area .social ul{
    text-align: center;
    position: relative;
    top: 175px;
}
.img-area .social ul li a{
    border: 1px solid #fff;
    color: #fff;
    display: block;
    font-size: 20px;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
}
.img-area .social ul li a:hover{
    background-color: #fff;
    color: #000;
    border: 1px solid transparent;
}
.img-text{
    padding: 25px;
    color: #fff;
    text-align: center;
}
.img-text h4{
    margin: 0 0 5px;
    font-size: 30px;
    font-family: bignoodletitling;
    letter-spacing: 5px;
}
.img-text h5{
    font-size: 17px;
    text-transform: uppercase;
    font-weight: bold;
}

I hope you liked the project. If so, please share it and follow this blog to get more like this in the near future. Thank you for stopping by this blog.

Post a Comment

Post a Comment

About Us

Contact Form

Responsive Team Section design with Bootstrap

You might like

Post a Comment

Post a Comment

Contact Form