Landing Page, Sections

About us page design in Html and CSS with source code

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:

About Us, pages are usually created to share information related to the website or company. It includes short and long descriptions, contact information, and location as well. So, it’s a simple way to show all the information related to our business on the website page. 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.

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

We have gone through the purpose of the about us page, but our purpose is to create an About Us page using Html and CSS languages. We have created a basic structure for our website and it is built using Html and CSS languages. For learning the complete development process along with source code, follow us till the end. 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:

VS CODE
Brackets
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.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us Page - FantacyDesigns</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="about-section">
        <div class="inner-container">
            <h1>About Us</h1>
            <p class="text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus velit ducimus, enim inventore earum, eligendi nostrum pariatur necessitatibus eius dicta a voluptates sit deleniti autem error eos totam nisi neque voluptates sit deleniti autem error eos totam nisi neque.
            </p>
            <div class="skills">
                <span class="active">Web Design</span>
                <span>Pro Develpor</span>
                <span>Android Develpor</span>
            </div>
        </div>
    </div>
</body>
</html>

<head>

<title>About Us Page - FantacyDesigns</title>

</head>

<body>

<h1>About Us</h1>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus velit ducimus, enim inventore earum, eligendi nostrum pariatur necessitatibus eius dicta a voluptates sit deleniti autem error eos totam nisi neque voluptates sit deleniti autem error eos totam nisi neque.

</p>

<span class="active">Web Design</span>

<span>Pro Develpor</span>

<span>Android Develpor</span>

</div>

</body>

</html>

Source code of CSS:

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

*{
    margin: 0;
    padding: 0;
    font-family: "Open Sans",sans-serif;
    box-sizing: border-box;
}

body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f1f1f1;
}

.about-section{
    background: url(pic.jpg) no-repeat left;
    background-size: 55%;
    background-color: #fdfdfd;
    overflow: hidden;
    height: 100%;
    padding: 100px 0;
}

.inner-container{
    width: 55%;
    float: right;
    background-color: #fdfdfd;
    padding: 150px;
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;

}
.inner-container h1{
    margin-bottom: 30px;
    font-size: 30px;
    font-weight: 900;
}

.text{
    font-size: 13px;
    color: #545454;
    line-height: 30px;
    text-align: justify;
    margin-bottom: 40px;
}
h1{
  color: #F85370;
}

.skills{
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 13px;
}

@media screen and (max-width:1200px){
    .inner-container{
        padding: 80px;
    }
}

@media screen and (max-width:1000px){
    .about-section{
        background-size: 100%;
        padding: 100px 40px;
    }
    .inner-container{
        width: 100%;
    }
}

@media screen and (max-width:600px){
    .about-section{
        padding: 0;
    }
    .inner-container{
        padding: 60px;
    }
}
span{
  cursor: pointer;
  font-size: 16px;
text-align: center;
padding: 10px;
  width: 500px;
}
span:hover{
background-image: linear-gradient(to right top, #f85370, #f35470, #ee5570, #e8556f, #e3566f);
color: #fff;
border-radius: 20px;
transition: 0.5s;

}
.active{
  background-image: linear-gradient(to right top, #f85370, #f35470, #ee5570, #e8556f, #e3566f);
  color: #fff;
  border-radius: 20px;


}

100

101

margin: 0;

padding: 0;

font-family: "Open Sans",sans-serif;

box-sizing: border-box;

}

body{

min-height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background-color: #f1f1f1;

}

.about-section{

background: url(pic.jpg) no-repeat left;

background-size: 55%;

background-color: #fdfdfd;

overflow: hidden;

height: 100%;

padding: 100px 0;

}

.inner-container{

width: 55%;

float: right;

background-color: #fdfdfd;

padding: 150px;

box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;

}

.inner-container h1{

margin-bottom: 30px;

font-size: 30px;

font-weight: 900;

}

.text{

font-size: 13px;

color: #545454;

line-height: 30px;

text-align: justify;

margin-bottom: 40px;

}

h1{

color: #F85370;

}

.skills{

display: flex;

justify-content: space-between;

font-weight: 700;

font-size: 13px;

}

@media screen and (max-width:1200px){

.inner-container{

padding: 80px;

}

@media screen and (max-width:1000px){

.about-section{

background-size: 100%;

padding: 100px 40px;

}

.inner-container{

width: 100%;

}

@media screen and (max-width:600px){

.about-section{

padding: 0;

}

.inner-container{

padding: 60px;

}

span{

cursor: pointer;

font-size: 16px;

text-align: center;

padding: 10px;

width: 500px;

}

span:hover{

background-image: linear-gradient(to right top, #f85370, #f35470, #ee5570, #e8556f, #e3566f);

color: #fff;

border-radius: 20px;

transition: 0.5s;

}

.active{

background-image: linear-gradient(to right top, #f85370, #f35470, #ee5570, #e8556f, #e3566f);

color: #fff;

border-radius: 20px;

}

Download source code:

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

Task:

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 off 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.

Go to top

Download Source CodeClick to Download