How to make Our Team Section with Neutrophils Cards using CSS only?
Hello, friends in this article I will show you how to create Our Team Setion using HTML and CSS programming code. Here I have created 4 social media buttons which are made up of three complete dimensions. HTML code has been used to structure them and CSS programming code has been used to design them. These buttons are made by hover. When someone clicks on the buttons or moves the mouse over them, the buttons will rise slightly above normal and change color. Different colors have been used for each button.
Today I am going to show you how to create a Responsive our 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.
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. 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.In this article, I will try to show you in full step by step and with all the information How i made it our team section using css. Here I have shown step by step which programming code is used to create an element.
HTML for make Fan
Now open your vs code editor and go to the right top section and click on file and select new file then save filename.html after this press ctrl+1 then html syntax generate automatically on your editor. This feature inbuild only visual code editor so i suggested you download this editor and make projects easily because it is a best code editor software. And this design for stand fan project make a fast with visual studio code editor.
Now we will learn how to write html for our team section using css. So let’s know that first you have to go to the body tag, after that you will take the div tag and together with the class whose name is to be named cards. Then after that we will take div tag again and we will name its class as card 1. Again we will take div tag and name its class as card 2 after that we will take div tag again and we will name its class as card 3. Again we will take div tag and name its class as Pankhdi 2, then again take div tag and name its class as Pankdi 3. Now in the last we will take the div tag and name its class as center.
CSS for Our Team Section Design
Now we will design the stand fan using css. So let’s design, first of all you have to know how we write css. We write css in 3 ways first we can write inline and second we can write it internal and third we can write it external so that we have to create new css file but in this article we have used internal css so that We will not have to create css file separately and we can work inside the same file.
First of all we have to go inside the head section and going inside we have to take style tag then we will take * tag and by applying curly braces open and close in it we will keep margin as 0 and padding as 0. And will keep its box sizing border box. Then we will take the body tag and flex the display in it, then we will center the justify content, after that we will center the align items and also make the background color rgb.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(22, 22, 22);
}
Follow the tutorial below to know step by step how I have created this Our Team Sections design using HTML and CSS.
Source Code..
<!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>Neumorphism Cards</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Poppins:wght@200&family=Righteous&family=Russo+One&family=Ubuntu+Mono&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgb(228, 228, 228);
}
.cards{
display: flex;
}
.card-1{
width: 250px;
height: 300px;
background-color: rgb(228, 228, 228);
box-shadow: 4px 5px 8px rgb(199, 199, 199),
4px 5px 12px rgb(218, 218, 218),
-4px -5px 8px white,
-4px -5px 12px rgb(247, 247, 247);
border-radius: 10px;
margin-right: 35px;
transition: 0.4s;
}
.card-2{
width: 250px;
height: 300px;
background-color: rgb(228, 228, 228);
box-shadow: 4px 5px 8px rgb(199, 199, 199),
4px 5px 12px rgb(218, 218, 218),
-4px -5px 8px white,
-4px -5px 12px rgb(247, 247, 247);
border-radius: 10px;
margin-right: 35px;
transition: 0.4s;
}
.card-3{
width: 250px;
height: 300px;
background-color: rgb(228, 228, 228);
box-shadow: 4px 5px 8px rgb(199, 199, 199),
4px 5px 12px rgb(218, 218, 218),
-4px -5px 8px white,
-4px -5px 12px rgb(247, 247, 247);
border-radius: 10px;
margin-right: 35px;
transition: 0.4s;
}
img{
width: 100px;
height: 100px;
border-radius: 50%;
margin: 30px 0 0 70px;
}
h3{
text-align: center;
margin-top: 20px;
color: rgb(73, 46, 69);
}
p{
text-align: center;
margin-top: 5px;
}
.social-icon{
display: flex;
justify-content: center;
align-items: center;
margin-top: 5px;
}
.social-icon ion-icon{
font-size: 25px;
margin: 10px;
color: rgb(75, 75, 75);
}
.hover:hover{
background: linear-gradient(to bottom, rgb(2,253,241), rgb(240,161,161));
transform: translateY(-15px);
cursor: pointer;
}
</style>
</head>
<body>
<div>
<div>
<img src="./team-1.png" alt="png">
<h3>James Ford</h3>
<p>Director General</p>
<div>
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
</div>
</div>
<div>
<img src="./team-2.png" alt="png">
<h3>Ann Brown</h3>
<p>Manager</p>
<div>
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
</div>
</div>
<div>
<img src="./team-3.png" alt="png">
<h3>Nancy Daniel</h3>
<p>Developer</p>
<div>
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
</div>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>Watch video related this article…
