- 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 create an about / about us page for website with CSS?
The about page of a website has the team details including the name, designation, contact details, contact button, etc. First, a container is set for the about page. Withing that, set the child containers for the column, card, person profile, etc. The profile includes the name, designation and a button to contact. Let us see how to create an about us page for website with HTML and CSS.
Create a div container
The container is set for the team details of the about page. The team card in the container includes other child containerd −
<div class="teamColumn"> <div class="teamCard"> <img src="https://images.pexels.com/photos/839011/pexels-photo-839011.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" /> <div class="personContainer"> <h3>Jane Doe</h3> <p class="Designation">CTO</p> <p><button class="contact">Contact</button></p> </div> </div> </div>
Create a child container for profile
Withing the parent div, we will create a child div for the person details −
<div class="personContainer"> <h3>Jane Doe</h3> <p class="Designation">CTO</p> <p><button class="contact">Contact</button></p> </div>
Columns for the team members
We have created three columns for the details of the three members of the team −
.teamColumn { display: inline-block; width: 300px; height: 400px; margin-bottom: 16px; padding: 0 8px; }
The team card
The team card is styled like this −
.teamCard { background-color: rgb(162, 162, 255); text-align: center; font-size: 20px; }
The profile details with person container
Within the team card div, we have the person container. The designation for the team members is also styled here −
.personContainer { padding: 0 16px; } .Designation { color: rgb(15, 0, 100); font-weight: bolder; font-size: 20px; }
Contact button
The button to contact the team member is styled here. The cursor property is set to pointer to make the button look like clickable −
.contact { border: none; outline: 0; display: inline-block; padding: 12px; color: white; font-weight: bolder; background-color: rgb(78, 0, 102); text-align: center; cursor: pointer; width: 100%; }
Example
To create an about page, the code is as follows −
<!DOCTYPE html> <html> <head> <style> html { box-sizing: border-box; } body { font-family: monospace, serif, sans-serif; margin: 0px; padding: 0px; } h1 { text-align: center; background-color: rgb(108, 18, 131); color: white; padding-top: 40px; padding-bottom: 40px; margin-top: 0px; } .teamContainer { margin-left: 10%; } img { width: 100%; height: 200px; } *, *:before, *:after { box-sizing: inherit; } .teamColumn { display: inline-block; width: 300px; height: 400px; margin-bottom: 16px; padding: 0 8px; } @media screen and (max-width: 650px) { .teamColumn { display: block; } } .teamCard { background-color: rgb(162, 162, 255); text-align: center; font-size: 20px; } .personContainer { padding: 0 16px; } .personContainer::after, .teamContainer::after { content: ""; clear: both; display: table; } .Designation { color: rgb(15, 0, 100); font-weight: bolder; font-size: 20px; } .contact { border: none; outline: 0; display: inline-block; padding: 12px; color: white; font-weight: bolder; background-color: rgb(78, 0, 102); text-align: center; cursor: pointer; width: 100%; } .contact:hover { background-color: #555; } </style> </head> <body> <h1>About Us</h1> <div class="teamContainer"> <div class="teamColumn"> <div class="teamCard"> <img src="https://images.pexels.com/photos/839011/pexels-photo-839011.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" /> <div class="personContainer"> <h3>Jane Doe</h3> <p class="Designation">CTO</p> <p><button class="contact">Contact</button></p> </div> </div> </div> <div class="teamColumn"> <div class="teamCard"> <img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" /> <div class="personContainer"> <h3>Mike Ross</h3> <p class="Designation">Front End Developer</p> <p><button class="contact">Contact</button></p> </div> </div> </div> <div class="teamColumn"> <div class="teamCard"> <img src="https://images.pexels.com/photos/736716/pexels-photo-736716.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" /> <div class="personContainer"> <h3>John Doe</h3> <p class="Designation">FullStack Developer</p> <p><button class="contact">Contact</button></p> </div> </div> </div> </div> </body> </html>