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:

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?

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.

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

Go to top

Download Source CodeClick to Download