Creating an About Us Section

Previous Next

Learn How to Add an About Us Section Using HTML

In this chapter, students will extend the webpage created in Chapter 1 by adding an About Us section. This section includes a heading, text, an image, and a simple two-column layout using Flexbox.

Chapter Goal

Create a centered section heading
Add text content
Insert an image
Build a two-column layout using display:flex

What is an About Us Section?

An About Us section tells visitors about the company, service, or person behind the website. It usually contains:

A heading
Some descriptive text
An image related to the business

Step 1: Add the About Us Heading

Below the hero section, add a centered heading.


<div>
    <h1 style="text-align:center;">About Us</h1>
</div>

Run Code

text-align:center moves the heading to the center.

Step 2: Create a Two-Column Layout

Now create a container with two columns using Flexbox.


<div style="display:flex; padding:0px 50px; gap:30px;">

</div>

Run Code

display:flex – places items side by side
padding – adds left and right space
gap – space between columns

Step 3: Add Text Content (Left Side)


<div style="width:50%;">
    <p>
        This program is free software; you can redistribute it and/or modify
        it under the terms of the GNU General Public License as published by the
        Free Software Foundation.
    </p>

    <p>
        This program is free software; you can redistribute it and/or modify
        it under the terms of the GNU General Public License as published by the
        Free Software Foundation.
    </p>
</div>

Run Code

width:50% means this column takes half of the available space.

Step 4: Add Image (Right Side)


<div style="width:50%;">
    <img src="about-pic.webp" style="width:100%;">
</div>

Run Code

Final Output Code

This is the complete combined code for Chapter 1 and Chapter 2.


<html>
<head></head>

<body style="margin:0px;">

    <div style="background-color:dodgerblue; color:white; padding:50px;">
        <h1>Welcome to ABC Interiors</h1>
        <p>Let's create your perfect home</p>
    </div>

    <div>
        <h1 style="text-align:center;">About Us</h1>
    </div>

    <div style="display:flex; padding:0px 50px; gap:30px;">

        <div style="width:50%;">
            <p>This program is free software; you can redistribute it and/or 
            modify it under the terms of the GNU General Public License.</p>
            <p>This program is free software; you can redistribute it and/or 
            modify it under the terms of the GNU General Public License.</p>
        </div>

        <div style="width:50%;">
            <img src="about-pic.webp" style="width:100%;">
        </div>

    </div>

</body>
</html>

Run Code

Practice Task

Change the About Us text
Replace the image
Increase or decrease the gap between columns

Chapter Summary

Created an About Us section
Used Flexbox for a two-column layout
Added and resized images

Watch video

Previous Next