How to Create a Team Section with HTML And CSS
In this section, we'll create a basic structure for the meet the team page. We will attach the icon and put the text that will be placed on the card of members will add button.
The HTML code is used to create a structure of meet the team page. Since it does not contain CSS so it is just a basic structure. We will use some CSS property to make it attractive.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<!-- linking font awesome for icons -->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
Meet The Team Page
<!-- First member of the team -->
Mike Tyson
CEO & Founder
Feel your customer make
them happy
<button class="button">View</button>
<!-- Other members of the team -->
Ching Lee
Developer Head
A website should be user-friendly
and attractive
<button class="button">View</button>
Hashim Ahmed
Content Head
Content should be popular
and trending
<button class="button">View</button>
Rihana Gomez
Marketing Head
Sell the product like
Greatest Mary Kay Ash
<button class="button">View</button>
</body>
</html>
In the previous section, we have created the structure of the basic structure of the team page and already added the icons for the members. In this section, we will add CSS property to design the card as required.
CSS code: CSS code is employed to form a beautiful team page. This CSS property is employed to form the cards stylish and responsive.
<style>
/* Whole html box designing */
html {
box-sizing: border-box;
}
/* Body width fixing */
body {
max-width: 100%;
}
/* Box sizing depending on parent */
*,
*:before,
*:after {
box-sizing: inherit;
}
/* Styling column */
.column {
float: left;
width: 33%;
margin-bottom: 16px;
padding: 2px 10px;
}
/* Column width change depends
on screen size */
@media screen and (max-width: 670px) {
.column {
width: 100%;
text-align: none;
}
}
/* Card designing */
.card {
background-color: gray;
border: 1px solid black;
}
.container {
padding: 0 16px;
}
/* Icon styling */
.fa {
margin: 10px;
font-size:68px;
}
.fa:hover {
transform: rotateY(180deg);
transition: transform 0.8s;
}
.container::after,
.row::after {
content: "";
clear: both;
display: table;
}
/* Button designing */
.button {
border: none;
padding: 8px;
color: white;
background-color: #449D44;
text-align: center;
cursor: pointer;
width: 100%;
margin-bottom: 10px;
}
/* Hover efect on button */
.button:hover {
background-color: green;
}
/* Margin first member of team */
#gfg {
float: none;
margin: auto;
}
</style>
Combining the HTML and CSS Code: This example combines both HTML and CSS code to design the meet the team page.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<!-- linking font awesome for icons -->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* Whole html box designing */
html {
box-sizing: border-box;
}
/* Body width fixing */
body {
max-width: 100%
}
/* Box sizing depending on parent */
*,
*:before,
*:after {
box-sizing: inherit;
}
/* Styling column */
.column {
float: left;
width: 33%;
margin-bottom: 16px;
padding: 5px 10px;
}
/* Column width change depends on screen size */
@media screen and (max-width: 670px) {
.column {
width: 100%;
text-align: none;
}
}
/* Card designing */
.card {
background-color: gray;
border: 1px solid black;
}
.container {
padding: 0 16px;
}
/* Icon styling */
.fa {
margin: 10px;
font-size:68px;
}
.fa:hover {
transform: rotateY(180deg);
transition: transform 0.8s;
}
.container::after,
.row::after {
content: "";
clear: both;
display: table;
}
/* Button designing */
.button {
border: none;
padding: 8px;
color: white;
background-color: #449D44;
text-align: center;
cursor: pointer;
width: 100%;
margin-bottom: 10px;
}
/* Hover efect on button */
.button:hover {
background-color: green;
}
/* Margining first member of team */
#gfg {
float:none;
margin:auto;
}
</style>
</head>
<body>
Meet The Team Page
<!-- First member of the team -->
Mike Tyson
CEO & Founder
Feel your customer make
them happy
<button class="button">View</button>
<!-- Other members of the team -->
Ching Lee
Developer Head
A website should be user-friendly
and attractive
<button class="button">View</button>
Hashim Ahmed
Content Head
Content should be popular
and trending
<button class="button">View</button>
Rihana Gomez
Marketing Head
Sell the product like
Greatest Mary Kay Ash
<button class="button">View</button>
</body>
</html>
No comments: