Ground Tutorial is a blog that shares tutorials on web design and development. Here you will find designs and tutorials on HTML, CSS, JavaScript, Bootstrap and JQuery.
Responsive Our Team Section Using FlexBox & CSS
Get link
Facebook
X
Pinterest
Email
Other Apps
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.
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;
}
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;
}
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.
<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);
}
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);
}
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;
}
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);
}
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.
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...
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:...
Rotating Border Animation is a common web element that is used in many different places. This type of border animation can be used in various buttons, login forms, profile cards, etc. There is no substitute for this type of Rotating Border Animation to enhance the beauty. You can create this kind of simple animation using Pure CSS. Four colors have been used for the 4 edges of the box. These colors revolve around the elements. If you want to know how these are made then this tutorial will help you. Rotating Border Animation CSS Here I have given three sections. First I gave a preview which is above. From this preview, you can learn how it works. Then I gave a step-by-step tutorial. And at the end of all, there is a button with the help of which you can directly download the code needed to create this Rotating Border Animation CSS . See the Pen Untitled by Shantanu Jana ( @shantanu-jana ) on CodePen . Now the question arises in your mind about how it was made. So l...
Comments
Post a Comment
Tell me what you think ??😎