Responsive Our Team Section Using HTML, CSS and Bootstrap

Responsive Our Team Section Using HTML, CSS and Bootstrap

Today I am going to show you how to create a Responsive Team section using only simple HTML and CSS programming code. Earlier I designed many more types of team sections. Hope you like this design.

 The team section is a type of web element that you can use to introduce your team members to different types of service websites and portfolio websites. You can easily arrange all the identities of the significant people in your team or your company. I used HTML, CSS programming code to create this team section. I designed it using HTML code, I designed it using CSS code. I also made it responsive using bootstrap code. It is fully responsive which means you can use it for any type of device. So of course you can add it to your website. In this team section, I have used different hover color effects. 

In this section, I have divided it into four columns. You can add more team member information here if you want. The hover effect has been used here, meaning that the color change can be seen by moving the mouse over the image of each team member.

How To Create Responsive Team Section Using HTML & CSS

In this article, I will try to show you in full step by step and with all the information how I made it. Here I have shown step by step which programming code is used to create an element. You can use the download button at the bottom of the article to download the source codes. Here is the bootstrap CDN link used which I have given below. 

Add this link to the head section which will help you to make this team section responsive. Also here I have used font awesome's icon CDN link. Icons have been created with it.

Step 1: Create the basic structure


<!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>Document</title>
    <link rel="stylesheet" href="css.css">

    <!--font-awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <!--Bootstrap 4-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body style="background: black;">
    <div class="container">
        <div class="row">
           
                <!-- team section-->
    
        </div>
    </div>
</body>
</html>


Result:

Step 2: Add team member image and information


    <!--1st member-->
<div class="col-md-3 col-sm-6">
                <div class="our-team">
                    <div class="pic">
                        <img src="image1.jpg">
                    </div>
                    <h3 class="title">Williamson</h3>
                    <span class="post">Web Developer</span>

                    <!--social icon-->

                </div>
            </div>

    <!--2nd member-->
     
            <div class="col-md-3 col-sm-6">
                <div class="our-team">
                    <div class="pic">
                        <img src="image2.jpg">
                    </div>
                    <h3 class="title">Kristiana</h3>
                    <span class="post">Web Designer</span>

                     <!--social Icon-->

                </div>
            </div>

    <!--3rd member-->
    
            <div class="col-md-3 col-sm-6">
                <div class="our-team">
                    <div class="pic">
                        <img src="image3.jpg">
                    </div>
                    <h3 class="title">Kristiana</h3>
                    <span class="post">Web Designer</span>
                    
                     <!--social icon-->
   
                </div>
            </div>

    <!--4th member-->

            <div class="col-md-3 col-sm-6">
                <div class="our-team">
                    <div class="pic">
                        <img src="image4.jpg">
                    </div>
                    <h3 class="title">Kristiana</h3>
                    <span class="post">Web Designer</span>

                     <!--social icon-->

                </div>
            </div>



          
    html{
    background: #000000;
    margin-top: 100px;
     
}
.container{
    background: #000000;
}
 
.our-team{
    border-radius: 15px;
    text-align: center;
    padding: 20px 15px 30px;
    background: #fff;

}
.our-team .pic{
    background: #fff;
    padding: 10px;
    margin-bottom: 25px;
    display: inline-block;
    width: 100%;
    height: 100%;
    transition: all 0.5s ease 0s;
}
.our-team:hover .pic{
    background: #17bebb;
    border-radius: 50%;
}
.pic img{
    width: 100%;
    height: auto;
    border-radius: 50%;
}
.our-team .title{
    font-weight: 600;
    color: #2e282a;
    text-transform: uppercase;
    display: block;
    font-size: 20px;
    margin: 0 0 7px 0;
}
.our-team .post{
    color: #17bebb;
    text-transform: capitalize;
    display: block;
    font-size: 15px;
    margin-bottom: 15px;
}


Result:

Step 3: Add social icons to each section


        
        <ul class="social">
               <li><a href="#" class="fa fa-facebook"></a></li>
               <li><a href="#" class="fa fa-twitter"></a></li>
               <li><a href="#" class="fa fa-google-plus"></a></li>
               <li><a href="#" class="fa fa-linkedin"></a></li>
        </ul>



.our-team .social{
    padding: 0;
    margin: 0;
    list-style: none;
}
.our-team .social li{
    display: inline-block;
    margin-right: 5px;
}
.our-team .social li a{
    border-radius: 50%;
    font-size: 15px;
    color: #17bebb;
    border: 1px solid #17bebb;
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    transition: all 0.5s ease 0s;
}
.our-team:hover .social li a{
    background: #17bebb;
    color: #fff;
}

Result:

Step 4: Add a hover effect to the image


.our-team:hover .pic{
    background: #17bebb;
    border-radius: 50%;
}
.our-team:hover .social li a{
    background: #17bebb;
    color: #fff;
}

Result:

Hopefully from this article, you have learned how to create a Responsive Team Section. If there is any problem, you can let us know by commenting.







Tags
Foolish Developer

Foolish Developer

Hello, I am shantanu jana a web developer. In this blog, I share tutorials related to web design and development. Here you will find complete step-by-step tutorials and source code. facebook twitter youtube instagram external-link

You may like these posts

Show more