How to create an about us page in HTML?
The About Us page contains insightful information about the website. It contains information about the purpose of the website, owner details, top employees, contact details, etc.
This page is widely used especially in the business website. Here, we will learn to design this about us page with CSS.
Creating About Us page
The about us page may contain some heading text, images, and social media buttons, etc. Wrap all the contents within <div> element and set the width: 100%, add some background-color and margin also.
Style each component with CSS properties and use Font Awesome library to add social media icon buttons.
Example: Creating About Us page with CSS
In this example, we have added a simple About US page where we have a rounded image, some text, and social media buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.About-us {
width: 100%;
text-align: center;
background-color: #ccc;
margin-top: 30px;
margin-bottom: 30px;
}
h1{
color: red;
font-size: 35px;
}
img {
border-radius: 50%;
}
p {
font-size: 20px;
}
h3 {
text-shadow:
}
a {
padding: 20px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
background: #3B5998;
color: white;
border-radius: 8px;
font-size: 50px;
}
</style>
</head>
<body>
<div class="About-us">
<h1> About Us </h1>
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1628677506-101156.png">
<p>Our mission is to empower young Students to be the inventors and creators.</p>
<hr>
<p>In a world where so much is being done for technology and so little for the environment, education is not even a part of most discussions.</p>
<p>We at Studytonight believe that by widening the reach of education, by making it freely available, so much can be achieved.</p>
<p>And this journey started in 2013 when a young boy thought "wouldn't it be great, to have a website, with simple tutorials for programming languages, just like a friend would teach you!", and Studytonight was born.</p>
<h3> follow us on </h3>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-linkedin"></a>
</div>
</body>
</html>
Output
Here is the output of the above program.
Example: Create an About us page with CSS
In this example, we have added cards to add information about the creator of the website. The card contains images and some text.
Conclusion
In this tutorial, we have learned to create About us Page with CSS. We can add elements and customize it with some basic CSS properties like background-color, padding, margin, font- size, and so on.
