Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to design Meet the Team Page using HTML and CSS
In this article, we will learn how to design “Meet the team” page using the various properties of HTML and CSS. The team Page plays a very important role while creating websites for any business or organization. People from different countries connect the business through a team member. The team page is a great way to introduce the team that shows the member of the organization or company.
Properties Used
The following properties used in the example are −
text-align − Define the header element to be the center.
background-color − Define the body color of the background.
color − Define the color of the text.
padding − Define the space between the content and border.
width − Define the width of the team card.
gap − Define the size between rows and columns.
border − This property allows the styling of the width and color of the border element.
border-radius − Define the radius corner of the image of an individual member.
display − Define the value by flex which sets the automatic width and height of the body.
justify-content − Define how the browser displays the content in the body.
Margin-top − Define the top margin of an element.
Margin-bottom − Define the bottom margin of an element.
Example 1
In the following example, we will create a simple webpage that shows the team of four members. The webpage starts with a header that includes a large heading with a straight line. The main content of the page is enclosed in a container with the class name "team-body". The container displays four cards, each representing a team member. Each card has an image of the team member, their name, and their designation mentioned in it. The styling of the page is done through internal CSS. The background color of the page is set to a shade of pink and the text color to white. The cards are styled with rounded corners and a border. The images are also rounded, and the text inside the cards is aligned to the center. The overall design of the page is simple and effective in showcasing the team members.
<!DOCTYPE html>
<html>
<title>Team Page in HTML</title>
<head>
<style>
.team-header{
text-align:center;
}
body{
background-color: #c41a55;
color: white;
padding:20px;
}
.card{
width:20%;
gap:5%
border:1px solid grey;
border-radius:30px;
background-color: #9f8;
}
.team-detail{
padding:5px 10px;
}
img{
width:100%;
height:auto;
border-radius: 20px;
}
.team-body{
display:flex;
justify-content:center;
align-items:center;
gap:6%;
margin-top:20px;
}
</style>
</head>
<body>
<div class="team-header">
<p class="heading" Style="font-size: 50px;">Meet My Team</p>
<hr style="border-color:white; width:280px; margin-bottom:20px">
</div>
<div class="team-body">
<div class="card">
<img class="team-member-image" src="https://img.freepik.com/premium-vector/confident-corporate-beard-professional-man-with-black-suit-tie-cartoon-vector-illustration_123673-147.jpg?w=2000">
<div class="team-detail">
<p class="name" style="color:black; text-align:center;">Akshay Shinde</p>
<p class="designation" style="color:grey; text-align:center; font-weight:bold;">PHP Developer </p>
</div>
</div>
<div class="card">
<img class="team-member-image" src="https://img.freepik.com/premium-vector/confident-corporate-beard-professional-man-with-black-suit-tie-cartoon-vector-illustration_123673-147.jpg?w=2000">
<div class="team-detail">
<p class="name" style="color:black; text-align:center;">Shriansh</p>
<p class="designation" style="color:grey; text-align:center; font-weight:bold;">Java Developer</p>
</div>
</div>
<div class="card">
<img class="team-member-image" src="https://img.freepik.com/premium-vector/confident-corporate-beard-professional-man-with-black-suit-tie-cartoon-vector-illustration_123673-147.jpg?w=2000">
<div class="team-detail">
<p class="name" style="color:black; text-align:center;">Keshav</p>
<p class="designation" style="color:grey; text-align:center; font-weight:bold;">IOS Developer</p>
</div>
</div>
<div class="card">
<img class="team-member-image" src="https://img.freepik.com/premium-vector/confident-corporate-beard-professional-man-with-black-suit-tie-cartoon-vector-illustration_123673-147.jpg?w=2000">
<div class="team-detail">
<p class="name" style="color:black; text-align:center;">Manish Das</p>
<p class="designation" style="color:grey; text-align:center;font-weight:bold;">SQL Developer</p>
</div>
</div>
</div>
</body>
</html>
Conclusion
We saw the above output showing the example of the design of a team page using HTML and CSS. The individual team members were displayed with the help of the properties of CSS whereas the profile designation of the individual team member was displayed with the help of the properties of inline CSS.
857 Views
