Create an About us Page using HTML and CSS
Last Updated :
25 Jun, 2025
An About Us page is a crucial part of any website. It introduces your organization, builds trust with visitors, and often serves as one of the most visited pages. Whether you're building a portfolio, company site, or educational platform, having a structured and visually appealing About page improves user engagement and helps visitors understand your mission and values more clearly.
What We Will Build
Here we are going to create an About Us page similar to the one shown in the image, using just HTML and CSS. It’s perfect for anyone looking to showcase their organization or platform in a simple yet appealing way.
About Us page previewThis layout includes:
- A fixed navigation bar with basic links
- An About Us section with a bold heading, short tagline, logo image, and descriptive text
- A simple “Read More” button
- A clean green gradient background
- A meet our team section with three profile cards - each card shows the team member’s image, name, role, and a contact button
Approach
We will begin by creating a structured layout using HTML, which includes a fixed header with navigation links, an About Us section, a responsive team section with three profile cards, and a footer.
Each section is clearly defined using semantic tags like <header>, <section>, and <footer>.
For styling, we will use CSS to:
- Apply a consistent green gradient background across the About section, header, and footer
- Style the navigation bar with hover effects and fixed positioning
- Design a two-column layout for the About Us content with an image and text side-by-side
- Create responsive team cards using Flexbox, with hover shadows and clean card formatting
- Ensure the entire layout is mobile-friendly using media queries
By keeping the structure simple and the styles reusable, the page remains both visually appealing and easy to maintain.
Below is full Source Code for the About Us page layout.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="style.css">
<title>About Us</title>
</head>
<body>
<header>
<nav>
<div class="logo">
GeeksforGeeks
</div>
<ul class="nav-links">
<li><a href="#">
Home</a>
</li>
<li><a href="#">
About</a>
</li>
<li><a href="#">
Services</a>
</li>
<li><a href="#">
Contact</a>
</li>
</ul>
</nav>
</header>
<section class="about">
<h1>About Us</h1>
<p style="font-weight: bold">
GeeksforGeeks is a leading platform...
</p>
<div class="about-info">
<div class="about-img">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230824153359/
371ba38b-8a03-4bff-916c-c3fa5396ceda.jfif" alt="Geeksforgeeks">
</div>
<div>
<p> GeeksforGeeks is a leading platform
that provides computer science resources
and coding challenges for programmers and
technology enthusiasts,along with interview
and exam preparations for upcoming aspirants.
With a strong emphasis on enhancing coding skills
and knowledge,it has become a trusted destination
for over 12 million plus registered users worldwide.
</p>
<button>Read More...</button>
</div>
</div>
</section>
<section class="team">
<h1>Meet Our Team</h1>
<div class="team-cards">
<!-- Cards here -->
<!-- Card 1 -->
<div class="card">
<div class="card-img">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230824122630/
business-office-business-woman-professional.jpg" alt="User 1">
</div>
<div class="card-info">
<h2 class="card-name">Jane</h2>
<p class="card-role">CEO and Founder</p>
<p class="card-email">[email protected]</p>
<p><button class="button">Contact</button></p>
</div>
</div>
<!-- Card 2 -->
<div class="card">
<div class="card-img">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230822183347/
man-portrait-businessman-male.jpg" alt="User 2">
</div>
<div class="card-info">
<h2 class="card-name">Miller</h2>
<p class="card-role">Co-Founder</p>
<p class="card-email">[email protected]</p>
<p><button class="button">Contact</button></p>
</div>
</div>
<!-- Card 3 -->
<div class="card">
<div class="card-img">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230824122630/
business-office-business-woman-professional.jpg" alt="User 3">
</div>
<div class="card-info">
<h2 class="card-name">Joe</h2>
<p class="card-role">Co-Founder</p>
<p class="card-email">[email protected]</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
</section>
<footer>
<p>© 2023 GeeksforGeeks. All Rights Reserved.</p>
</footer>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Global Styles */
body {
font-family: Arial, sans-serif;
}
/* Header */
header {
background-color: white;
color: rgb(0, 0, 0);
padding: 10px 0;
position: fixed;
width: 100%;
z-index: 100;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
margin: 5px auto;
padding: 0 20px;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: #40b736;
}
.nav-links {
list-style: none;
display: flex;
}
.nav-links li {
margin-right: 20px;
}
.nav-links a {
color: rgb(0, 0, 0);
padding: 10px;
font-weight: bold;
text-decoration: none;
}
.nav-links a:hover {
background-color: #40b736;
border-radius: 4px;
color: white;
}
/* About Section */
.about {
background: rgb(224, 251, 222);
background: linear-gradient(360deg, rgb(245, 255, 245) 0%, rgb(173, 252, 163) 100%);
padding: 100px 0 20px 0;
text-align: center;
}
.about h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.about p {
font-size: 1rem;
color: #323030;
max-width: 800px;
margin: 0 auto;
}
.about-info {
margin: 2rem 2rem;
display: flex;
align-items: center;
justify-content: center;
text-align: left;
}
.about-img {
width: 20rem;
height: 20rem;
}
.about-img img {
width: 100%;
height: 100%;
border-radius: 5px;
object-fit: contain;
}
.about-info p {
font-size: 1.3rem;
margin: 0 2rem;
text-align: justify;
}
button {
border: none;
outline: 0;
padding: 10px;
margin: 2rem;
font-size: 1rem;
color: white;
background-color: #40b736;
text-align: center;
cursor: pointer;
width: 15rem;
border-radius: 4px;
}
button:hover {
background-color: #1f9405;
}
/* Team Section */
.team {
padding: 30px 0;
text-align: center;
}
.team h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.team-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.card {
background-color: white;
border-radius: 6px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
width: 18rem;
height: 25rem;
margin-top: 10px;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
}
.card-img {
width: 18rem;
height: 12rem;
}
.card-img img {
width: 100%;
height: 100%;
object-fit: fill;
}
.card-info button {
margin: 2rem 1rem;
}
.card-name {
font-size: 2rem;
margin: 10px 0;
}
.card-role {
font-size: 1rem;
color: #888;
margin: 5px 0;
}
.card-email {
font-size: 1rem;
color: #555;
}
/* Footer */
footer {
background-color: #222;
color: white;
text-align: center;
padding: 20px 0;
}
@media (max-width: 768px) {
nav {
display: block;
}
.logo {
text-align: center;
}
.nav-links {
margin-top: 1rem;
justify-content: space-between;
}
.nav-links li {
margin-right: 0;
}
.about h1 {
font-size: 2rem;
}
.about p {
font-size: 0.9rem;
}
.about-info {
flex-direction: column;
text-align: center;
}
.about-img {
width: 60%;
height: 60%;
margin-bottom: 1rem;
}
.about-info p {
margin: 1rem 2rem;
}
.about-info button {
margin: 1rem 2rem;
width: 10rem;
}
.team {
margin: 0 1rem;
}
}
Output:
This output is a dummy About Us page for GeeksforGeeks, you can try modifying the content, layout, and styling using HTML and CSS to create your own custom version.
Design an About Us Page using CSS and HTML
Similar Reads
CSS Tutorial CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and enhance website presentation. CSS is one of the three main components of a webpage, along with HTML and JavaScript.HTML adds Structure to a web page.JavaScript adds logic to it and CSS makes it visually appealing or
7 min read
CSS Introduction CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the
4 min read
CSS Syntax CSS is written as a rule set, which consists of a selector and a declaration block. The basic syntax of CSS is as follows:The selector is a targeted HTML element or elements to which we have to apply styling.The Declaration Block or " { } " is a block in which we write our CSS.HTML<html> <h
2 min read
CSS Selectors CSS Selectors are used to target HTML elements on your pages, allowing you to apply styles based on their ID, class, type attributes, and more. There are mainly 5 types of selectors.Basic CSS Selectors: These are used to target elements by tag, .class, or # ID for fundamental styling needs.Combinato
7 min read
CSS Comments CSS comments are used to add notes or explanations to your code, helping you and others understand it better. They start with /* and end with */ and can be used for both single-line and multi-line comments. Note: Comments are ignored by browsers, so they won’t affect how your webpage looks or works.
2 min read
CSS Colors CSS colors are used to set the color of different parts of a webpage, like text, background, and borders. This helps make the page look more attractive and easier to read. You can define colors using names, hex codes, RGB values, and more.You can try different formats of colors here- #content-iframe
5 min read
CSS Borders Borders in CSS are used to create a visible outline around an element. They can be customized in terms ofWidth: The thickness of the border.Style: The appearance of the border (solid, dashed, dotted, etc.).Color: The color of the border.You can try different types of borders here- #custom-iframe{ he
5 min read
CSS Margins CSS margins are used to create space around an element, separating it from neighboring elements and the edges of the webpage. They control the layout by adjusting the distance between elements, providing better organization and readability.Syntax:body { margin: value;}HTML<html> <head>
4 min read
CSS Height and Width Height and Width in CSS are used to set the height and width of boxes. Their values can be set using length, percentage, or auto.Width and HeightThe width and height properties in CSS are used to define the dimensions of an element. The values can be set in various units, such as pixels (px), centim
4 min read
CSS Outline CSS outline is a property used to draw a line around an element's border. It does not affect the layout, unlike borders. It's often used to highlight elements, providing a visual emphasis without altering the dimensions of the element.Syntaxselector{ outline: outline-width outline-type outline-color
4 min read