We are making some new changes to our site due to which some links may not work.

How to Create Stylish About Us Page in Blogger Website

How to Create Stylish About Us Page in Blogger Website

Hello, Welcome to ASThemesWorld. 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.

Steps to Create About Us Page

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

Step 2. Now switch to HTML mode then copy and paste the code below 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://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.

© Copyright - ASThemesWorld

8 comments

  1. what theme is this
    1. iMagz Theme
  2. i used this code to about but total posts number is not showing brother..what to do
    1. The total post number will not appear automatically, you have to write it yourself. For example, where the Website Design is written, replace it with total post and in JavaScript, where we have marked the Website Design Number, replace it with your total post number.

      Change these :-
      <h3 class="project-name">Websites Designed</h3>

      websitesDesigned.innerHTML = "43"

    2. Thank you brother..justnow i did.. when ever your are free ..please create code for " how to add jw player in the blogger" I am searching for to include code but it is not available in youtube.
    3. Sure, whenever I get time, I will write an article on this topic too.
  3. how to create automatic count total post?
    1. Cannot create automatic total post counter. You have to add the post number manually.