Sections

Our team HTML CSS template free download

Hello everyone, in this post we will create our team section in HTML and CSS. In the last post, we created a testimonial box in HTML and CSS. Now let us create a team section in HTML and CSS.

Our team section in Html and CSS:

As you can see in the image we have created our team section in HTML and CSS. This section has all the information related to the team members. It has an image of the team member. The pictures of all the members are placed in a box. These boxes are arranged using flex property. All the boxes have round corners and border-radius. Borders are solid. The background is related to the images otherwise we can shadow in these boxes for better results. On that page or section, you can describe all the things related to your team members.

All the images have the same design and style. Below this, it has a heading of the name of the team member and then his/her skill. You can create it in the section of the website or you can create a separate page for the team section.

How to create our team section in HTML and CSS?

So, download it for free and then install it.

Source code of Html:

It’s a markup language and all the content in the team section is created with the help of HTML. Therefore, we need the code of HTML for creating it, and its code is given below so that you can simply copy it and then use it for free in your Html file.

<!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>OurTeam Section - FantacyDesigns</title>
    <link rel="stylesheet" href="css.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <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">
            <div class="col-md-3 col-sm-6">
                <div class="our-team">
                    <div class="pic">
                        <img src="image1.jpg">
                    </div>
                    <h3 class="title">Emma.</h3>
                    <span class="post">Web Developer</span>
                    <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>
                </div>
            </div>
     
            <div class="col-md-3 col-sm-6">
                <div class="our-team">
                    <div class="pic">
                        <img src="image2.jpg">
                    </div>
                    <h3 class="title">James.</h3>
                    <span class="post">Web Designer</span>
                    <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>
                </div>
            </div>
    
            <div class="col-md-3 col-sm-6">
                <div class="our-team">
                    <div class="pic">
                        <img src="image3.jpg">
                    </div>
                    <h3 class="title">Zoe</h3>
                    <span class="post">Full Stack</span>
                    <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>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="our-team">
                    <div class="pic">
                        <img src="image4.jpg">
                    </div>
                    <h3 class="title">Lucas</h3>
                    <span class="post">Graphic Designer</span>
                    <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="fab fa-linkedin"></a></li>
                    </ul>
                </div>
            </div>
    
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>OurTeam Section - FantacyDesigns</title>

B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

</head>

</div>

<span class="post">Web Developer</span>

</ul>

</div>

</div>

<h3 class="title">James.</h3>

<span class="post">Web Designer</span>

</ul>

</div>

</div>

<span class="post">Full Stack</span>

</ul>

</div>

</div>

<h3 class="title">Lucas</h3>

<span class="post">Graphic Designer</span>

</ul>

</div>

</body>

</html>

Source code of CSS:

It’s also a markup language and we have used it to design our team section properly and make it responsive across all the devices.

html{
    background: black;
    margin-top: 100px;
     
}
.container{
margin-top:70px;
    background: #000;

}
 
.our-team{
    padding: 20px 15px 30px;
    background: black;
    border-radius: 15px;
    text-align: center;
   border:1px solid #1DBF73;

}
.our-team:hover{
transition: .5s;
  box-shadow: 0px 1px 5px 0px #d1d1d1;
}
.our-team .pic{
    display: inline-block;
    width: 100%;
    height: 100%;
    background: #000;
    padding: 5px;
    margin-bottom: 25px;
    transition: all 0.5s ease 0s;
   border-radius: 50%;
}
.our-team:hover .pic{
    background: #1DBF73;
    border-radius: 50%;
}
.pic img{
    width: 100%;
    height: auto;
    border-radius: 50%;
}
.our-team .title{
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 7px 0;
}
.our-team .post{
    display: block;
    font-size: 15px;
    color: #1DBF73;
    text-transform: capitalize;
    margin-bottom: 15px;
}
.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{
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    font-size: 15px;
    color: #1DBF73;
    border: 1px solid #1DBF73;
    transition: all 0.5s ease 0s;
}
.our-team:hover .social li a{
    background: #1DBF73;
    color: #fff;
}
@media only screen and (max-width: 990px){
    .our-team{ margin-bottom: 30px; }
}

html{

background: black;

margin-top: 100px;

}

.container{

margin-top:70px;

background: #000;

}

.our-team{

padding: 20px 15px 30px;

background: black;

border-radius: 15px;

text-align: center;

border:1px solid #1DBF73;

}

.our-team:hover{

transition: .5s;

box-shadow: 0px 1px 5px 0px #d1d1d1;

}

.our-team .pic{

display: inline-block;

width: 100%;

height: 100%;

background: #000;

padding: 5px;

margin-bottom: 25px;

transition: all 0.5s ease 0s;

border-radius: 50%;

}

.our-team:hover .pic{

background: #1DBF73;

border-radius: 50%;

}

.pic img{

width: 100%;

height: auto;

border-radius: 50%;

}

.our-team .title{

display: block;

font-size: 20px;

font-weight: 600;

color: #fff;

text-transform: uppercase;

margin: 0 0 7px 0;

}

.our-team .post{

display: block;

font-size: 15px;

color: #1DBF73;

text-transform: capitalize;

margin-bottom: 15px;

}

.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{

display: block;

width: 30px;

height: 30px;

line-height: 30px;

border-radius: 50%;

font-size: 15px;

color: #1DBF73;

border: 1px solid #1DBF73;

transition: all 0.5s ease 0s;

}

.our-team:hover .social li a{

background: #1DBF73;

color: #fff;

}

@media only screen and (max-width: 990px){

.our-team{ margin-bottom: 30px; }

}

So, by using the code of HTML and CSS you can simply create a team section for any website, and the design will remain the same but you can modify it.

Download source code:

So, the Source code is also available for it and the link is given in the below button.

Task:

As you can see, the pictures and content are showing without the hover effect. You have to add extra information about the members without the hover effect. These icons and names should be viewable after hovering. Also apply grid effect rather than flex property.

We are uploading this type of content and design on regular basis. If you have subscribed to us then we will share all the premium templates with you for free because they are only available for our subscribers.

Thanks for reading this article.

Go to top

Download Source CodeClick to Download