How to Create Stylish About Us Page in Blogger Website

Hello, Welcome to AS Themes World. Today in this article I'm going to guide you step by step to Create Stylish About Us Page in Blogger Website. So, follow the easy steps and learn more about how to create custom about us page in the Blogger.

What is About Us Page

An About page is a special web page on a site where your readers/visitors learn more about you.

About Us Demo

Create About Us Page

First of all, on Blogger Dashboard, click Pages and create a new page.

 Switch to HTML mode then copy and paste the code below into your page content.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/themes/odometer-theme-default.min.css"
/>
</head>
<body>
<div
class="about-container">
<div class="profile-image">
<img src="profile-image.png" alt="" />
</div>

<div
class="description">
<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque a
quam nulla ipsa natus quisquam!

</p>
<p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum ex
odit tenetur alias expedita impedit in veritatis mollitia ipsam quae
et quia, deleniti facere praesentium sunt assumenda earum saepe
aperiam ullam sit. Tempora animi maxime a velit soluta laboriosam quo!

</p>
<p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, tempora!
</p>
</div>

<div
class="projects-container">
<div
class="project">
<h3
class="project-name">Websites Designed</h3>
<div
class="project-number odometer websites-designed">0</div>
</div>

<div
class="project">
<h3
class="project-name">Apps Developed</h3>
<div
class="project-number odometer apps-developed">0</div>
</div>
</div>

<h2
class="our-team-heading">Our Team</h2>

<div
class="our-team">
<div
class="team-member">
<img
src="team-member-1.png" alt="" />
<div
class="designation">
<strong>
Alice J.,</strong> (Project Manager)
</div>
</div>

<div
class="team-member">
<img
src="team-member-2.png" alt="" />
<div
class="designation">
<strong>
Dave B.,</strong> (Lead Designer)
</div>
</div>

<div
class="team-member">
<img
src="team-member-3.png" alt="" />
<div
class="designation">
<strong>
Jeniffer A.,</strong> (Lead Programmer)
</div>
</div>
</div>

<div
class="our-mission">
<img
class="quote-icon" src="https://1.bp.blogspot.com/-Iij0jkd8th0/YH8t-pqkUwI/AAAAAAAAGQk/PENL5X6JtqIo6e3YLmReELFrdNQBzKtfgCPcBGAYYCw/s130/quote-icon.png" alt="" />
<p>
Our mission is to provide the best services to our clients.</p>
</div>
</div>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/odometer.min.js"></script>

<script>

const websitesDesigned = document.querySelector(".websites-designed");
const appsdeveloped = document.querySelector(".apps-developed");

setTimeout(() => {
websitesDesigned.innerHTML = "43";
appsdeveloped.innerHTML = "15";
}, 400);
</script>
</body>
</html>


<style>

.about-container {
max-width: 900px;
margin: 0 auto;
font-family: "Roboto", sans-serif;
}

.about-container p {
line-height: 2;
padding: 0 20px;
}

.about-container .profile-image {
text-align: center;
padding: 30px;
}

.about-container .profile-image img {
width: 200px;
border-radius: 50%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
padding: 8px;
}

.projects-container {
display: flex;
justify-content: center;
padding: 8px;
box-shadow: 0 4px 16px -6px rgba(0, 0, 0, 0.4);
max-width: 550px;
margin: 24px auto;
border-radius: 20px;
}

.projects-container .project {
height: 160px;
width: 200px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0 32px;
}

.projects-container .project-name {
font-size: 16px;
}

.projects-container .project-number {
font-size: 72px;
font-weight: bold;
}

.our-team-heading {
text-align: center;
text-transform: uppercase;
font-size: 48px;
padding-top: 64px;
}

.our-team {
display: flex;
padding: 30px;
}

.our-team img {
width: 100%;
}

.our-team .team-member {
margin: 0 4px;
position: relative;
}

.our-team .designation {
position: absolute;
bottom: 30px;
background: #fff;
padding: 12px 20px;
border-radius: 0 20px 20px 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
font-size: 14px;
}

.about-container .our-mission {
padding: 20px;
position: relative;
display: flex;
align-items: center;
}

.about-container .our-mission .quote-icon {
position: absolute;
opacity: 0.2;
height: 80px;
}

.about-container .our-mission p {
margin-left: 100px;
font-size: 20px;
font-style: italic;
}

@media (max-width: 700px) {
.our-team {
flex-direction: column;
align-items: center;
}

.our-team img {
height: 250px;
width: 300px;
object-fit: cover;
}
}

</style>

Change the marked parts as per your liking.

Video Tutorial

Added Soon


I hope this article helps you to create Stylish About Us Page. If there are questions or sections that are not understood, let us know in the comments.



Article "How to Create Stylish About Us Page in Blogger Website" protected

Post a Comment

Previous Post Next Post