Responsive Our Team Section Using FlexBox & CSS

Responsive Our Team Section Using FlexBox

In this tutorial, you will learn how to create a Responsive Our Team Section using Flexbox and CSS. Earlier I shared many more types of CSS Team Section tutorials with you. But in that case, I used CSS to make it responsive. I did not use any extra CSS to make this design responsive. 

Here I have taken the help of Flexbox. This Responsive Our Team Section Using FlexBox design is fully responsive so you can use it directly in your project.

I took the help of Glassmorphism design to make it. The Our Team page that we have created here is absolutely simple. First, there is a profile image than a name, email id, some basic information, then two buttons, at the end there are four social media icons.

Responsive Our Team Section

This design is made according to the transparent i.e. Glassmorphism design. As a result, the elements in the background can be seen clearly. As I said before, the help of Flexbox has been taken here to make it responsive. I didn't have to use any CSS code separately.

Below I have given a preview that will help you to know how this Our Team Section Using FlexBox design works. Below you will find a preview and the required source code. If you only want to download the source code, you can use the download button at the bottom of the article.


See the Pen Responsive Our Team Section by Ground Tutorial (@groundtutorial) on CodePen.


As you can see above, two colorful circles have been created on a webpage. Which is basically used to understand Glassmorphism design in a beautiful way. After that, I made three profile cards. 

The background of these profile cards is almost transparent i.e. the colorful elements in the background can be seen very clearly. However, backdrop-filter: blur (10px) has been used in each card, which makes the background look blurry.

How to Create Our Team Section Using FlexBox

First the profile image, then a name, email id, then some basic information, two buttons, four social media icons. The background has been blurred to highlight these social icons. 

If you use a smaller device, then this Responsive Our Team Section will be able to adjust its size according to the size of the device. If you want to create this Our Team page, you must have a basic idea about HTML and CSS.

Step 1: Create colorful elements on the webpage

Using the HTML and CSS codes below, I created two colorful circles at the top of the web page. If you want to use it for any professional work, you can skip these colorful circles.

<div class="background">
    <div class="shape"></div>
    <div class="shape"></div>
</div>

Using the code below, I designed the webpage and added a background color to the webpage.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Open Sans", sans-serif;
}

body {
  background-color: #080710;
}

Design the webpage

I designed that circle using the following CSS codes. First I created an area in which the circles can be seen. When you use it for yourself, you will adjust these sizes to your liking.

Border-radius: 50% is used to make each circle height: 200px, width: 200px and round. I have used different gradient background colors for both.

.background{
   width: 430px;
   height: 520px;
   position: absolute;
   transform: translate(-50%,-50%);
   left: 50%;
   top: 50%;
}
.background .shape{
   height: 200px;
   width: 200px;
   position: absolute;
   border-radius: 50%;
}
.shape:first-child{
   background: linear-gradient(
       #1845ad,
       #23a2f6
   );
   left: -80px;
   top: -80px;
}
.shape:last-child{
   background: linear-gradient(
       to right,
       #ff512f,
       #f09819
   );
   right: -30px;
   bottom: 10px;
}

Create colorful elements on the webpage

Step 2: Html code of our team section

Below is the HTML code needed to create this Our Team design. I have given all the HTML together so that you can understand. However, I have given the information of each line so that you can understand which code I have used.

<!--Basic Area of Team Section-->
<div class="wrapper">
  <div class="team">

    <!--First team member's information-->
    <div class="team_member">
      <!--Profile image-->
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQpYJQKSoM7S75P_KMRtQHqAAIPh133CSxByw&usqp=CAU" alt="team_member_image">
      <!--Basic information-->
      <h3>Anita Roy</h3>
      <span>pauldoe@gmail.com</span>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam </p>
      <!--button-->
      <div class="btn_grp">
        <a href="#">hire me</a>
        <a href="#">follow</a>
      </div>
      <!-- Social media buttons-->
      <div class="social">
        <li><i class="fab fa-facebook"></i></li>
        <li><i class="fab fa-twitter"></i></li>
        <li><i class="fab fa-whatsapp"></i></li>
        <li><i class="fab fa-linkedin"></i></li>
      </div>
    </div>

    <!--Second Team Member's Information-->
    <div class="team_member">
      <!--Profile image-->
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfXZKv2aTnCUvYqIzw-kzO6y94wR0chJTLZWno9s4Ko21c9By_T8q6JInL3mR7iZzRo3cE5vExhTxFC_h1-hjLoOw5ec5Bo1lk-_H3z7Y9aoJ_BDPX2iV-LvlihWOtN9QXkE8OdLBQTIs/s16000/team-1-2.jpg" alt="team_member_image">
      <!--Basic information-->
      <h3>Rosie Meg</h3>
      <span>rosie.meg@gmail.com</span>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam </p>
      <!--button-->
      <div class="btn_grp">
        <a href="#">hire me</a>
        <a href="#">follow</a>
      </div>
      <!-- Social media buttons-->
      <div class="social">
        <li><i class="fab fa-facebook"></i></li>
        <li><i class="fab fa-twitter"></i></li>
        <li><i class="fab fa-whatsapp"></i></li>
        <li><i class="fab fa-linkedin"></i></li>
      </div>
    </div>

    <!--Third Team Member's Information-->

    <div class="team_member">
      <!--Profile image-->
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUilmLx__c_vh1oycDjI3L6-0BPYJ4d5Rt4YghyphenhyphentNcwWwbor299wJeFQgRCGyqk1zAPa1vc9OtMaB8FfmKDTH4McIa2kNbwDcf-DesimspO9IBwJxoFPi2bJEeNZgQHwsQkTtkcZ9F5tQ/s16000/team-1-3.jpg" alt="team_member_image">
      <!--Basic information-->
      <h3>Alex Wood</h3>
      <span>alex@gmail.com</span>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam </p>
      <!--button-->
      <div class="btn_grp">
        <a href="#">hire me</a>
        <a href="#">follow</a>
      </div>
      <!-- Social media buttons-->
      <div class="social">
        <li><i class="fab fa-facebook"></i></li>
        <li><i class="fab fa-twitter"></i></li>
        <li><i class="fab fa-whatsapp"></i></li>
        <li><i class="fab fa-linkedin"></i></li>
      </div>
    </div>

  </div>
</div>

I designed the basics of this Responsive Team section using the following CSS codes. The width: 325px and height of each profile card here will depend on the amount of content. 

The width of the image here is 100px and a border-radius has been used to make it round.

.wrapper {
  margin-top: 50px;
}

.wrapper .team .team_member,
.wrapper .team .team_member .btn_grp a,
.social li i{
background-color: rgba(255,255,255,0.13);
border-radius: 10px;
backdrop-filter: blur(10px);
border: 2px solid rgba(255,255,255,0.1);
box-shadow: 0 0 40px rgba(8,7,16,0.6);
}
.wrapper .team {
  width: auto;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
}

.wrapper .team .team_member {
  width: 325px;
  margin: 10px;
  border-radius: 6px;
  padding: 25px;
}

.wrapper .team .team_member img {
  width: 100px;
  border-radius: 100%;
  backdrop-filter: blur(10px);
  border: 7px solid rgba(255,255,255,0.1);
  background-color: rgba(255,255,255,0.13);
}
Html code of our team section

Step 3: Design headings and basic text with CSS

I have used the following CSS codes to design the name, email id, and basic text here.

.wrapper .team .team_member h3 {
  color: #e7dcdc;
  font-size: 23px;
}

.wrapper .team .team_member span {
  font-size: 14px;
  color: #85ebd9;
}

.wrapper .team .team_member p {
  margin: 15px 0;
  color: rgb(196, 196, 189);
}

Design headings and basic text with CSS

Step 4: Design the buttons in the Team Section

As you can see above I have used two buttons here. The following code has been used to design those buttons. The width of these buttons is 125px and the text color is white. The background here has been somewhat blurred.

.wrapper .team .team_member .btn_grp {
  display: flex;
}

.wrapper .team .team_member .btn_grp a {
  display: block;
  width: 125px;
  border-radius: 6px;
  color: white;
  margin: 0 10px;
  padding: 10px;
  text-transform: capitalize;
  transition: all 0.3s ease;
}
Design the buttons in the Team Section

Step 5: Design social icons using CSS below

Now the social icons have been designed. Here I have used four social icons. The following codes have been used to design those icons. Width: 40px, height: 40px is used for each icon. Added hover color to each icon.

.social{
  display: flex;
}
.social li{
  color: transparent;
  margin-top: 15px;
}
.social li i{
  color: white;
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 8.5px;
}

.social li i:hover{
  color: rgb(80, 247, 230);
}
Responsive Our Team Section Using FlexBox
Responsive Our Team Section

Hopefully from the above tutorial, you have learned how the Responsive Our Team Section has been created using FlexBox. 

If you have any difficulty understanding the above code, you can use the download button. You can definitely comment on how you like this Our Team Design tutorial.






Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha
Read more

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code: The following
Read more

Simple RGB Color Generator Using JavaScript & CSS

Image
In this article, you will learn how to create RGB Color Generator using JavaScript. Earlier I shared with you the project of different types of JavaScript color generators . Some projects create background colors, some gradient colors, and some generate random colors.  Using this simple RGB Color Generator you can manually generate RGB color . It is much more modern and professional than other color generators. Here you can mix different colors together and create gradients.  This JavaScript RGB Color Generator project has various control buttons. With the help of which you can create gradients by adding colors in different ways.  JavaScript RGB Color Generator Many times I use different applications or websites to create my gradient color . In that case, such a project will help you. You can get the required code of the color you have created from here. Which you can copy directly and use as CSS code. Below I have given a demo that will help you to know how this project (RGB Color
Read more