About us page design in Html and CSS with source code

about us page

This time we are building an about us page design. In the last post, we discussed how to create a Header and footer design. Lets, ‘s focus on today’s post that how to create an about us page.

About us page design in Html and CSS:

It has all the information related to the business and the type of website. It may have pictures and written content.

It is explaining the information related to the website. It has both written content and pictures. The picture is placed on the left side which is related to the category of the website or business. Then it is a heading on the right side “About us”. Below this, it has a paragraph that explains the purpose and business of the website. Then at the bottom, it has headings related to the category of the website or services of the website.

So, it was a short introduction to the page. Now our purpose is to create this type of page for our website. You can achieve it if you will follow our steps one by one.

You might like it:

How to create an About us page design in Html and CSS?

It’s simple and easy enough that anyone can create an about us page by following the below steps for development. Follow the given steps.

Download an IDE to your device:

Some famous code editors are:



Sublime text 3

Procedure for About us page design in Html and CSS:

The procedure for the about us page design is simple. 

Create files. 

Html source code

CSS Source code

Download source code

Source code of Html:

Create an Html file with any name and save it using .html at the end of the file name.

Source code of CSS:

CSS is also a markup language, not a programming language.

Download source code:

If you are failing in creating it then we have a .zip file and the link is present below.


This about us page is divided into two sections using div tags and aligned using the flex property of CSS. Now you have to flip both sections with each other. Also, add icons inside the box. The icons can be of social media platforms, contact, email, phone, etc. The box has a straight border without any radius. Provide a radius of 10 to each corner and make it round. 

For premium, templates follow us and we will send them to your email.

Thanks for your precious time.

Download Source CodeClick to Download
Latest Post
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x