How to Create Team Page in Blogger | ProzTrick

How to create Our Team Page On Blogger

Introduction :

Team is a page where Blog's admins or Contributer listed in with some effect and features about them.

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.

Steps to Create Our Team Page :

Step 01

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

Step 02

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>

Step 03

Go To Theme > Edit HTML > Click Ctrl+f and search </b:skin>

Step 04

Paste the style Code below the </b:skin> Style code given below

<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>

YouTube Tutorial

Watch Directly On YouTube

Conclusion :

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.

ProzTrick

How to Create Team Page in Blogger | ProzTrick

Introduction :

Steps to Create Our Team Page :

Step 01

Step 02

Step 03

Step 04

YouTube Tutorial

Watch Directly On YouTube

Conclusion :

Post a Comment

How to Add Carbon Generator Module For Any Telegram Bot in GitHub

Series Download Button in Blog Post

How to Solve Source Code Violates Problem of Heroku | Telegram Bots

How to Create Widget Purchase Box in Blogger

Why Should we learn C++ in 2022 | Reason to learn C++