How to Create Our Team Page in Blogger Website | Meet the Team Page

How to Create Our Team Page in Blogger Website

Hello guys, welcome to ASThemesWorld. Today in this article I'm going to guide you step by step to Create Our Team Page in Blogger Website. So, follow the easy steps and learn more about how to create our team page in the Blogger.

Adding a 'Our Team' page or section to your website is an easy, effective way to give your business a accessible face. It gives prospects an idea of who exactly they'll be working with, and shows potential employees that you're proud of the people on your team.

See the demo of Our Team Page before creating this.

Steps to Create Our Team 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 given 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>Our Team</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="team-container">
  <h2 class="team-heading">Our Team</h2>
  <div class="ceo">
   <div class="profile-pic">
     <img src="team-member1.png" alt="" />
  </div>

<div class="team-member-name">Alice J. Holland</div>
 <div class="meta">Founder & CEO</div>
  </div>

 <h3>Our Core Team</h3>

 <div class="core-team-container">
  <div class="team-member">
   <div class="profile-pic">
  <img src="team-member2.png" alt="" />
 </div>

 <div class="team-member-name">Daniel Stewart</div>
  <div class="meta">Tech Lead</div>
 </div>

 <div class="team-member">
  <div class="profile-pic">
  <img src="team-member3.png" alt="" />
 </div>

  <div class="team-member-name">Connie Hansen</div>
 <div class="meta">Lead Programmer</div>
  </div>

 <div class="team-member">
  <div class="profile-pic">
    <img src="team-member4.png" alt="" />
  </div>

 <div class="team-member-name">Jack Ruiz</div>
   <div class="meta">Lead Designer</div>
       </div>
     </div>
   </div>
 </body>
</html>


<style>
.team-container {
  padding: 24px 0;
  max-width: 1000px;
  margin: 0 auto;
}
.team-container h2 {
  text-align: center;
  font-size: 48px;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 8px;
  background: #222;
  color: #eee;
  width: 100%;
  margin: 48px auto;
}
.team-container .ceo {
  text-align: center;
  padding: 8px;
}
.team-container .ceo img {
  width: 200px;
  height: 200px;
}
.team-container img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  box-shadow: 0 8px 29px -17px rgba(0, 0, 0, 0.4);
}
.team-member {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 16px;
}
.team-container .team-member-name {
  font-weight: bold;
  font-size: 22px;
  margin: 12px 0;
}
.team-container .ceo .team-member-name {
  font-size: 28px;
}
.core-team-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.team-container h3 {
  text-align: center;
  margin: 48px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 24px;
  text-transform: uppercase;
  font-weight: normal;
}
</style>
  • Change the markes parts as per your linking.

If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button.

This is all about creating Our Team Page in Blogger Website. I hope this article is very helpful for you and you love it. Please share your feedback in comments.