Team Page Template in HTML CSS

Team Page Template in HTML CSS
Code Snippet:Modern our team #html #flexbox #scss
Author: Kristen
Published: March 4, 2024
Last Updated: March 4, 2024
Downloads: 2,174
License: MIT
Edit Code online: View on CodePen
Read More

This HTML and CSS template helps you to create a stylish team page on your website. It displays team members’ details in cards with images, names, and roles. The HTML structures the page with header content introducing the company and a section displaying team members.

This code is perfect for company websites needing a polished team page. It’s versatile and easy to customize for various businesses. It offers a clean layout to spotlight team members attractively.

How to Create Team Page Template In HTML CSS

1. First of all, create the HTML structure for the team page as follows. Replace the sample names, positions, and images with your team members’ details. Ensure each member has a unique "card" section.

<div class="circle-top"></div>
<div class="circle-bottom"></div>
<header>
  <div class="header-content">
    <span>company management</span>
    <h1>Meet a team of experts and innovators who are pioneers in their field</h1>
  </div>
</header>
<section>
  <div class="card-top">
    <div class="card">
      <img src="https://images.pexels.com/photos/2811089/pexels-photo-2811089.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=11" alt="Alexandra Smith">
      <h2>Alexandra Smith</h2>
      <p>Founder and Chief Operations Officer</p>
    </div>
    <div class="card">
      <img src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="John Smith">
      <h2>John Smith</h2>
      <p>Founder and Chief Executive Officer</p>
    </div>
  </div>
  <div class="card">
    <img src="https://images.pexels.com/photos/2379005/pexels-photo-2379005.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Erik Longman">
    <h2>Erik Longman</h2>
    <p>Chief Process and Innovation Officer</p>
  </div>
  <div class="card">
    <img src="https://images.pexels.com/photos/2216607/pexels-photo-2216607.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Matthew Foster">
    <h2>Matthew Foster</h2>
    <p>Chief Sales Officer</p>
  </div>
  <div class="card">
    <img src="https://images.pexels.com/photos/1043473/pexels-photo-1043473.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Artur Dichter">
    <h2>Artur Dichter</h2>
    <p>Chief Financial Officer</p>
  </div>
  <div class="card">
    <img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Oliver Rohlsson">
    <h2>Oliver Rohlsson</h2>
    <p>Chief Technical Officer</p>
  </div>
  <div class="card">
    <img src="https://images.pexels.com/photos/262391/pexels-photo-262391.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="James Hedge">
    <h2>James Hedge</h2>
    <p>Chief Legal Officer</p>
  </div>
  <div class="card">
    <img src="https://images.pexels.com/photos/1181690/pexels-photo-1181690.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Eve Johnsson">
    <h2>Eve Johnsson</h2>
    <p>HR Manager</p>
  </div>
</section>

2. Now, style the team page using the following CSS styles. Adjust colors, fonts, or sizes to match your website’s theme. Be cautious not to alter the structure unless you’re familiar with CSS.

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  background: #1f2c3a !important;
  font-family: "Nunito", sans-serif;
  position: relative;
  overflow-x: hidden;
}

img {
  border-radius: 50%;
  width: clamp(100px, 40vw, 120px);
  height: clamp(100px, 40vw, 120px);
  object-fit: cover;
  object-position: top;
}

.circle-top {
  width: clamp(25rem, 30vw, 31.25rem);
  position: absolute;
  top: 3em;
  left: -8em;
  height: clamp(25rem, 30vw, 31.25rem);
  background: #00458f;
  background: radial-gradient(circle, #00458f8f 0%, #00458e00 60%, #ffffff00 100%);
  background: -moz-radial-gradient(circle, #00458f8f 0%, #00458e00 60%, #ffffff00 100%);
  background: -webkit-radial-radial-gradient(circle, #00458f8f 0%, #00458e00 60%, #ffffff00 100%);
  border-radius: 50%;
}

.circle-bottom {
  width: clamp(25rem, 30vw, 31.25rem);
  position: absolute;
  bottom: -5em;
  right: -8em;
  height: clamp(25rem, 30vw, 31.25rem);
  background: #00458f;
  background: radial-gradient(circle, #00458f8f 0%, #00458e00 65%, #ffffff00 100%);
  background: -moz-radial-gradient(circle, #00458f8f 0%, #00458e00 65%, #ffffff00 100%);
  background: -webkit-radial-radial-gradient(circle, #00458f8f 0%, #00458e00 65%, #ffffff00 100%);
  border-radius: 50%;
}

header {
  background: linear-gradient(to top, #1f2c3a 0%, #2f3c4742 100%), url("https://images.unsplash.com/photo-1529156069898-49953e39b3ac?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat 50% 50%/cover;
  width: 100%;
  min-height: 25em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
header .header-content {
  width: min(37.5em, 90%);
  margin-top: 5em;
  position: relative;
  z-index: 10;
}
header .header-content span {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.063rem;
  font-size: clamp(0.8rem, 0.7625rem + 0.1875vw, 0.95rem);
}
header .header-content h1 {
  font-size: clamp(1.5rem, 1.375rem + 0.625vw, 2rem);
  font-weight: 700;
}

section {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 75em;
  margin-inline: auto;
  gap: 0.938rem;
  transform: translatey(-3em);
  position: relative;
  z-index: 10;
}
section .card {
  padding: 1.875em 1.25em;
  max-width: 18.75rem;
  width: 90%;
  height: 16.875rem;
  display: grid;
  place-content: center;
  place-items: center;
  text-align: center;
  position: relative;
}
section .card::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  z-index: -1;
  border: 0.125rem solid transparent;
  background: linear-gradient(45deg, #1e272e, #48627a) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
section .card h2 {
  color: #fff;
  letter-spacing: 0.05rem;
  font-size: clamp(1rem, 0.9375rem + 0.3125vw, 1.25rem);
  margin-top: 0.625em;
  margin-bottom: 0.188em;
}
section .card p {
  color: #afafaf;
  font-size: clamp(0.8rem, 0.7625rem + 0.1875vw, 0.95rem);
}
section .card-top {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  gap: 0.938rem;
  flex-wrap: wrap;
}
section .card-top .card img {
  width: clamp(120px, 40vw, 150px);
  height: clamp(120px, 40vw, 150px);
}

Feel free to experiment and personalize the template according to your specific needs and preferences. You can customize the card dimensions and page’s background according to your needs.

That’s all! hopefully, you have successfully integrated this team page template into your website. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X