Hi, Welcome to Danish FX. Today in this article I will direct you bit by bit to Create Stylish About Us Page in Blogger Website. Thus, follow the simple tasks and study how to make custom about us page in the Blogger.
What is About Us Page
The about us page is frequently an impression of the reason and character of the business and its proprietors or top representatives. At last, the page can likewise consolidate contact or locational data. One method for review the about us idea is as a text self-representation or short self-portrayal made by a business.
Steps to Create About Us Page
Stage 1. As a matter of first importance, on Blogger Dashboard, click Pages and make another page.
Stage 2. Presently change to HTML mode then reorder the code underneath into your page content and save the page.
<!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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIxZ-JN1JKZ2JBc0EuT2Wf_c04kwAAa9pTYdaN0GlEXLuNcuTrozm3r7czWz9rClidLkTI0TuuuG5Z0rEs4UA7CAzyP0wh5FH4QFDKulHwuaE_t0s-pJWPQPIdWIZnqfHpxV1cmAEEUSk/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>
Post a Comment