Home
how to
plugin

How to make Stylish About Us Page

Step 1. Go To Blogger's Dashboard and click pages. Step 2. Create New Page Step 2 :- Click the pen button and press HTML view. Step 3 :- Remove any...

Hello Guys and welcome to Wolv Themes Our Tutorial today is about How To Make Stylish About Us.

What is the About Us Page :-

the about us page is the page that reflex what your website, to make the right About Us page there are some things that it should be having
  1. Attractive design
  2. a description that really describes your website
  3. your profile photo
  4. How Many Post You have in your website
but don't worry you will find all that in this tutorial.

Let's Start

How to make stylish about us page :-

#Note This Method is only for Median ui, Fletro pro, imagz users, it is not tested on other templates

Step 1:- Go To Blogger's Dashboard and click pages.
Step 2:- Create New Page
Step 2 :- Click the pen button and press HTML view.
Step 3 :- Remove any codes then Copy and paste the following provided code

<html lang="en">
  <head>
<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 alt="yourblog/websitename" src="yourimglink" />      </div>

      <div class="description">
        <p>
          <b>yourblog/websitename</b>. yourblog/websitedescription.
        </p>
      </div>

      <div class="projects-container">
        <div class="project">
          <h3 class="project-name">Total Posts</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>
      </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 = "32";
        appsdeveloped.innerHTML = "48";
      }, 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>
Step 4 :- Replace all the blue highlighted words and numbers with your content..

32 replace it with the number of your total posts, and 48 replace it with the number of total apps you developed ,and yourimglink replace it with the link of your profile photo, and yourblog/websitedescription replace it with your website/blog description, and yourblog/websitename replace it with your blog/website name

if you don't have or can't make description for your website then try our new About Us Generator

Post a Comment