How to add a Sticky top page loading progress bar using JS and CSS

Hello everyone, Welcome here, Your website might have an about page but it may be simple, nowadays several websites come with beautiful about pages and you might want to make your about page attractive then this tutorial is for you. In this tutorial we are going to show you How to create a beautiful About page using pure CSS, Before going to the tutorial please check the demo given below:-

Hope you will like the design, If you like the design then let's continue to the tutorial without wasting time.

Before following these steps we recommend you take a backup of your Blogger template, By chance if any mistakes have been done we can undo changes using that backup.

How to create a beautiful About page using pure CSS on a website?

• First of all, open the About page .html file
• Then paste the following CSS just above </head> the tag

<style>/* About card page (Teorzo) */.prof,.profB{position:relative}.prof,.prof .img-area{border:1px solid #e4e3e1}.prof{width:90%;padding:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-direction:column}.prof .img-area{height:150px;width:150px;border-radius:20px;display:flex;align-items:center;justify-content:center}.img-area .inner-area{height:calc(100% - 25px);width:calc(100% - 25px);border-radius:20px}.inner-area img{height:100%;width:100%;border-radius:20px;object-fit:cover}.prof .name{font-size:23px;font-weight:500;color:inherit;margin:10px 0 5px}.prof .about{color:inherit;opacity:.8;font-weight:400;font-size:16px}.profB:hover:before{z-index:-1;border-radius:5px}.profB:hover{background:0 0;border:1px solid #e4e3e1;color:inherit}.profB{width:100%;border:none;outline:0;padding:12px 0;text-align:center;justify-content:center;color:#fff;font-size:18px;font-weight:400;border-radius:5px;cursor:pointer;margin-top:20px;background:#00f}.prof:by{content:'Teorzo'}.profB:first-child{margin-right:10px}.profB:last-child{margin-left:10px}</style>

• Then find </body> and paste the following HTML code just above it

<!--{ Profile page card (Teorzo) }-->
<div class="prof">
    <div class="img-area">
      <div class="inner-area">
        <!--{ Logo Source }-->
        <img src="Paste_here_your_image_link" loading="lazy" alt="ALT_text_here">
      </div>
    </div>
    <!--{ Name }-->
    <div class="name">Name_here</div>
    <!--{ About website }-->
    <div class="about">About_text_here</div>
  <!--{ Button }-->
      <a href="Button_link_here" target="_blank" class="profB">Button_text_here</a>
  </div>

Don't forget to replace highlighted places with your texts and links.

• Now Save the HTML file

---

How to create a beautiful About page using pure CSS in Blogger?

• First of all, go to your Blogger dashboard
• Then click on the Theme option from the sidebar
• Then click on the drop-down icon near Customize option
• Then click on the Edit HTML option from the drop-down menu
• Then Find ]]></b:skin> and paste the following CSS just above it or you can paste the following CSS just above </head> by creating <style></style> Tags

/* About card page (Teorzo) */.prof,.profB{position:relative}.prof,.prof .img-area{border:1px solid #e4e3e1}.prof{width:90%;padding:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-direction:column}.prof .img-area{height:150px;width:150px;border-radius:20px;display:flex;align-items:center;justify-content:center}.img-area .inner-area{height:calc(100% - 25px);width:calc(100% - 25px);border-radius:20px}.inner-area img{height:100%;width:100%;border-radius:20px;object-fit:cover}.prof .name{font-size:23px;font-weight:500;color:inherit;margin:10px 0 5px}.prof .about{color:inherit;opacity:.8;font-weight:400;font-size:16px}.profB:hover:before{z-index:-1;border-radius:5px}.profB:hover{background:0 0;border:1px solid #e4e3e1;color:inherit}.profB{width:100%;border:none;outline:0;padding:12px 0;text-align:center;justify-content:center;color:#fff;font-size:18px;font-weight:400;border-radius:5px;cursor:pointer;margin-top:20px;background:#00f}.prof:by{content:'Teorzo'}.profB:first-child{margin-right:10px}.profB:last-child{margin-left:10px}

• Then Save the HTML by clicking on the save icon
• Then click on the Pages option from the sidebar 
• Then open your About page or create one
• Then switch its view to HTML view
• If you editing an existing page then remove every old code from that page and paste the following HTML code, If you created a new page then simply paste the following HTML code

<!--{ Profile page card (Teorzo) }-->
<div class="prof">
    <div class="img-area">
      <div class="inner-area">
        <!--{ Logo Source }-->
        <img src="Paste_here_your_image_link" loading="lazy" alt="ALT_text_here">
      </div>
    </div>
    <!--{ Name }-->
    <div class="name">Name_here</div>
    <!--{ About website }-->
    <div class="about">About_text_here</div>
  <!--{ Button }-->
      <a href="Button_link_here" target="_blank" class="profB">Button_text_here</a>
  </div>

Don't forget to replace highlighted places with your texts and links.

Now click on Publish option to save and publish the page

---

Conclusion

Hope this tutorial will help you to create a beautiful About page on your website, If you have any doubts related to this tutorial ask me in the comment, Don't forget to share it with your friends. Thanks for visiting, Have a nice day.