About us page in Html and CSS with source code

Section "About US"

Hello everyone, in this session we are going to learn how to develop an about us page using Html and CSS. In the last post, we have gone through how to create an About us page design in Html. Today’s topic is to create an about us page for our website using Html and CSS.

About us page:

It is mainly used by those websites which are selling their services like amazon, Fiverr, Upwork, or any other private company. By looking at the capability and features of the website one have to decide what to do and what not to do. 

Then at the center of the page, it has a heading “About Us”. On the left side of the page, it has a description related to the website.

Then it has a button read more. This button has round corners and solid background. When you point at the button then it hovers and changes its color. It is possible using the property of CSS. On the right side of the page, it has shown a graph which is showing the experty level of the developer in different skills. Web design knowledge is 90%, UI design knowledge is 70 and UX design knowledge level is 50%.

You might like it:

How to create an about us page?

Our main purpose for writing this article is to teach how to create a beautiful about us page for a website in HTML and CSS languages. Here we have added a heading, underline, vertical borders, paragraph, and progress bar as well. For the development of all these design elements we will be using CSS and CSS properties will be applied to the Html body. Follow the below steps to create this design effectively and source code will also be provided for each section. For the development of the about us page, we have followed some steps and which are given below.

Download an IDE:

VS CODE is a well-known code editor for Html, CSS, JS, and PHP languages. You can use it.

Source code of Html:

Source code of CSS:

We will use CSS to design our about us page and make it responsive across all the devices.

Download source code:

Many times new developers are unable to copy-paste or link the files with each other. For those, we have created a .zip file and it is downloadable for everyone for free.


The about us page shows information about a person or company or business. We have applied the same concept to individuals. It is showing the information of an individual person. With the help of div, all the information is shown on this about us page. It needs some modification. There is a line for showing the percentage of the skills. Add a round circle at the end of these moving lines. So, that it can highlight the skills of the users. 

I hope you like the post and it must be a helpful post for you to design a beautiful about us section for your website using Html and CSS.

Thanks for reading this article.

Latest Post
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x