Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to design Meet the Team Page using HTML and CSS
In this article, we will learn how to design a "Meet the Team" page using HTML and CSS. The team page plays a very important role while creating websites for any business or organization. People from different countries connect with the business through team members. The team page is a great way to introduce the team that shows the members of the organization or company.
Key Properties Used
The following CSS properties are used in this example
text-align Aligns text content to center, left, or right.
background-color Sets the background color of elements.
color Defines the text color.
padding Creates space between content and border.
width Sets the width of elements.
gap Defines space between flex items.
border Adds borders with specified width, style, and color.
border-radius Creates rounded corners on elements.
display: flex Creates flexible layout containers.
justify-content Controls horizontal alignment of flex items.
margin Sets outer spacing around elements.
Example: Team Page with Four Members
The following example creates a team page showcasing four team members with their photos, names, and designations
<!DOCTYPE html>
<html>
<head>
<title>Meet Our Team</title>
<style>
body {
background-color: #c41a55;
color: white;
padding: 20px;
font-family: Arial, sans-serif;
}
.team-header {
text-align: center;
margin-bottom: 30px;
}
.team-header h1 {
font-size: 3rem;
margin-bottom: 10px;
}
.team-header hr {
border: 2px solid white;
width: 300px;
margin: 0 auto;
}
.team-body {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 2rem;
flex-wrap: wrap;
}
.card {
width: 250px;
border: 2px solid #fff;
border-radius: 20px;
background-color: #f0f8ff;
overflow: hidden;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
.card img {
width: 100%;
height: 200px;
object-fit: cover;
border-bottom: 2px solid #ddd;
}
.team-detail {
padding: 15px;
text-align: center;
}
.name {
color: #333;
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 5px;
}
.designation {
color: #666;
font-weight: 600;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="team-header">
<h1>Meet Our Team</h1>
<hr>
</div>
<div class="team-body">
<div class="card">
<img src="/html/images/profile1.jpg" alt="Team Member">
<div class="team-detail">
<p class="name">Akshay Shinde</p>
<p class="designation">PHP Developer</p>
</div>
</div>
<div class="card">
<img src="/html/images/profile2.jpg" alt="Team Member">
<div class="team-detail">
<p class="name">Shriansh Kumar</p>
<p class="designation">Java Developer</p>
</div>
</div>
<div class="card">
<img src="/html/images/profile3.jpg" alt="Team Member">
<div class="team-detail">
<p class="name">Keshav Sharma</p>
<p class="designation">iOS Developer</p>
</div>
</div>
<div class="card">
<img src="/html/images/profile4.jpg" alt="Team Member">
<div class="team-detail">
<p class="name">Manish Das</p>
<p class="designation">SQL Developer</p>
</div>
</div>
</div>
</body>
</html>
A team page with a pink background displays "Meet Our Team" as the main heading with a horizontal line below it. Four team member cards are arranged horizontally, each showing a profile image, name, and job designation on a light blue background. The cards have rounded corners and a hover effect that lifts them slightly.
Key Features
Responsive Design Uses flexbox with flex-wrap for responsive layout
Hover Effects Cards lift slightly when hovered over
Clean Styling Proper spacing, typography, and color contrast
Image Handling Uses object-fit to maintain aspect ratio
Conclusion
This team page design demonstrates effective use of CSS flexbox for layout, proper color schemes, and interactive hover effects. The design is clean, professional, and easily customizable for different organizations and team sizes.
2K+ Views
