Our Team Section Design using HTML and CSS

In this article you will learn how to create Our Team Section design using HTML and CSS. Even if you are a beginner, you can easily create a Our Team Section by following the tutorial.

First I designed the webpage and arranged the three images along the row. Normally the images are round and all the information on the card is hidden.

Watch its live demo to learn how it works.Whenever you click on these images or move your mouse over them, the images move upwards. As a result, all the information can be seen below. With this the image will take the shape of a square to a square. In the description I added names, some basic text and three social media icons.

Follow the tutorial below to know step by step how I have created this Our Team Section design using HTML and CSS.

Step 1: Basic structure of Team Section

I have created the basic structure of this profile card with the help of the code below. I have basically made a round box in which the images can be seen. This box is 220px in width and height and I have used border-radius to make it round.

<div class="main">
 <div class="profile-card">

 </div>
</div>

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: Exo;
   }

   .main{
     width: 100%;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #0c5db9;
   }

   .profile-card{
     position: relative;
     font-family: sans-serif;
     width: 220px;
     height: 220px;
     background: #fff;
     padding: 30px;
     border-radius: 50%;
     box-shadow: 0 0 22px #3336;
     transition: .6s;
     margin: 0 25px;
   }

Now I have added the hover effect on the round box with the help of CSS code. Whenever you click on that round box with the mouse, the box will be square and its height will be 260 px.

 .profile-card:hover{
     border-radius: 10px;
     height: 260px;
   }

Step 2: Add an image to Our Team Design

Now I have added images using HTML and CSS.

<div class="img">
   <img src="team-1.jpg">
 </div>

   .profile-card .img{
     position: relative;
     width: 100%;
     height: 100%;
     transition: .6s;
     z-index: 99;
   }

   .img img{
     width: 100%;
     border-radius: 50%;
     box-shadow: 0 0 22px #3336;
     transition: .6s;
   }

Now with the help of this css I have added hover effect in this image. Whenever you click on this image, the image will move upwards along the y axis. With this the image will take any shape from round to four.

   .profile-card:hover .img{
     transform: translateY(-60px);
   }

   .profile-card:hover img{
     border-radius: 10px;
   }

Step 3: Add information to the profile box

Now using this code I have added some descriptions. In the description I first added a name, then added to his work or profession. You can add some other text here if you want. I have used font-size: 21px to increase the size of the name used here.

<div class="caption">

  <h3>Vin Diesel</h3>
  <p>Senior App Developer</p>

</div>

   .caption{
     text-align: center;
     transform: translateY(-80px);
     opacity: 0;
     transition: .6s;
   }
   .profile-card:hover .caption{
     opacity: 1;
   }
   .caption h3{
     font-size: 21px;
     font-family: sans-serif;
   }
   .caption p{
     font-size: 15px;
     color: #0c52a1;
     font-family: sans-serif;
     margin: 2px 0 9px 0;
   }

Step 4: Add social icons in our team section

Now is the time to add three icons to social media. I have added icons to social media here on Facebook, Instagram and Twitter. You can add more icons of your choice here if you want.

<div class="social-links">
  <a href="#"><i class="fab fa-facebook"></i></a>
  <a href="#"><i class="fab fa-instagram"></i></a>
  <a href="#"><i class="fab fa-twitter"></i></a>
</div>

 .caption .social-links a{
     color: #333;
     margin-right: 15px;
     font-size: 21px;
     transition: .6s;
   }
   .social-links a:hover{
     color: #0c52a1;
   }

Step 5: Create more cards to create our team template

Now I have created two more designs like the one above. I created my second profile card using below HTML.

Here we have changed only the image and the basic description, the rest is as it was. You do not need to use a separate css for this.

<div class="profile-card">
   <div class="img">
      <img src="team-2.jpg">
   </div>
   <div class="caption">
     <h3>David Corner</h3>
     <p>Front End Developer</p>
    <div class="social-links">
      <a href="#"><i class="fab fa-facebook"></i></a>
      <a href="#"><i class="fab fa-instagram"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
    </div>
  </div>
</div>

I created the third profile card using the following HTML. Here too I have used another image and changed the description.

<div class="profile-card">
  <div class="img">
     <img src="team-3.jpg">
  </div>
  <div class="caption">
    <h3>Tom Cruise</h3>
    <p>Full Stact Developer</p>
  <div class="social-links">
    <a href="#"><i class="fab fa-facebook"></i></a>
    <a href="#"><i class="fab fa-instagram"></i></a>
    <a href="#"><i class="fab fa-twitter"></i></a>
  </div>
 </div>
</div>

Now I have created a css team section by combining these three profile cards together. Currently it is not Responsive. If you want to make it responsive, you can follow me on Instagram(@foolishdeveloper). I will upload this responsive version in a few days.

Related Post:

1. Responsive Footer HTML CSS
2. International Schools in Bangalore
3. Simple Stopwatch using JavaScript
4. International Schools in Hyderabad
5. javaScript Password Generator
6. Sidebar Menu Using HTML CSS

Hopefully from this article you will learn how to create our team section design. Be sure to comment on how it looks.

Comments

[Rahul kumar]

Please have look at my app that i built with next+react+node.

check-here