Pages Easy

Team Page

A team / people page with department filters, profile cards with avatar, role, bio, and social links. Hover effects and responsive grid.

Open in Lab

vanilla-js css

Targets: JS HTML

Code

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  background: #f8fafc;
  color: #1e293b;
  line-height: 1.6;
  min-height: 100vh;
}

.team-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

/* Hero */
.team-hero {
  text-align: center;
  padding: 64px 0 24px;
}

.team-hero h1 {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
}

.team-subtitle {
  font-size: 1.125rem;
  color: #64748b;
  margin-top: 8px;
}

/* Stats */
.team-stats {
  text-align: center;
  padding: 16px 0 32px;
}

.stats-text {
  font-size: 0.9375rem;
  color: #94a3b8;
}

.stats-text strong {
  color: #475569;
}

.member-count {
  font-variant-numeric: tabular-nums;
}

/* Department Filters */
.department-filters {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.dept-tab {
  padding: 8px 20px;
  border-radius: 9999px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dept-tab:hover {
  border-color: #94a3b8;
  color: #334155;
}

.dept-tab.active {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}

.dept-count {
  opacity: 0.7;
  margin-left: 2px;
}

/* Team Grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* Team Card */
.team-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 32px 24px 28px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.team-card.card-hidden {
  display: none;
}

.team-card.card-fade-in {
  animation: cardFadeIn 0.3s ease forwards;
}

@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Avatar */
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.initials {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  user-select: none;
}

/* Name & Role */
.member-name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}

.member-role {
  font-size: 0.8125rem;
  color: #94a3b8;
  font-weight: 500;
  margin-bottom: 12px;
}

/* Bio */
.member-bio {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 16px;
}

/* Social Links */
.social-links {
  display: flex;
  gap: 12px;
  justify-content: center;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.team-card:hover .social-links {
  opacity: 1;
  transform: translateY(0);
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #94a3b8;
  transition: color 0.15s ease, background 0.15s ease;
}

.social-link:hover {
  color: #1e293b;
  background: #f1f5f9;
}

/* Responsive */
@media (max-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .team-hero h1 {
    font-size: 2rem;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .team-card {
    padding: 24px 18px 22px;
  }

  .social-links {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 480px) {
  .team-page {
    padding: 0 16px 60px;
  }

  .team-hero {
    padding: 40px 0 16px;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }
}

(function () {
  var tabs = document.querySelectorAll(".dept-tab");
  var cards = document.querySelectorAll(".team-card");
  var memberCount = document.querySelector(".member-count");

  tabs.forEach(function (tab) {
    tab.addEventListener("click", function () {
      var dept = tab.getAttribute("data-dept");

      // Update active tab
      tabs.forEach(function (t) {
        t.classList.remove("active");
      });
      tab.classList.add("active");

      // Filter cards
      var visibleCount = 0;

      cards.forEach(function (card) {
        var cardDept = card.getAttribute("data-department");
        var shouldShow = dept === "all" || cardDept === dept;

        if (shouldShow) {
          card.classList.remove("card-hidden");
          card.classList.add("card-fade-in");
          visibleCount++;
        } else {
          card.classList.add("card-hidden");
          card.classList.remove("card-fade-in");
        }
      });

      // Update count
      memberCount.textContent = visibleCount;

      // Remove animation class after it completes
      setTimeout(function () {
        cards.forEach(function (card) {
          card.classList.remove("card-fade-in");
        });
      }, 350);
    });
  });
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Meet the Team</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="team-page">
    <!-- Hero -->
    <header class="team-hero">
      <h1>Meet the Team</h1>
      <p class="team-subtitle">The people building the future of our product</p>
    </header>

    <!-- Stats -->
    <div class="team-stats">
      <span class="stats-text"><strong class="member-count">12</strong> team members across <strong>4</strong> departments</span>
    </div>

    <!-- Department Filters -->
    <div class="department-filters">
      <button class="dept-tab active" data-dept="all">All <span class="dept-count">12</span></button>
      <button class="dept-tab" data-dept="engineering">Engineering <span class="dept-count">4</span></button>
      <button class="dept-tab" data-dept="design">Design <span class="dept-count">3</span></button>
      <button class="dept-tab" data-dept="product">Product <span class="dept-count">2</span></button>
      <button class="dept-tab" data-dept="marketing">Marketing <span class="dept-count">3</span></button>
    </div>

    <!-- Team Grid -->
    <div class="team-grid">
      <!-- Engineering -->
      <div class="team-card" data-department="engineering">
        <div class="avatar" style="background: linear-gradient(135deg, #6366f1, #8b5cf6);">
          <span class="initials">AK</span>
        </div>
        <h3 class="member-name">Alex Kim</h3>
        <p class="member-role">Lead Engineer</p>
        <p class="member-bio">Architect behind the core platform. Passionate about distributed systems and developer experience.</p>
        <div class="social-links">
          <a href="#" class="social-link" aria-label="Twitter">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
          </a>
          <a href="#" class="social-link" aria-label="LinkedIn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
          </a>
          <a href="#" class="social-link" aria-label="GitHub">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>
          </a>
        </div>
      </div>

      <div class="team-card" data-department="engineering">
        <div class="avatar" style="background: linear-gradient(135deg, #06b6d4, #3b82f6);">
          <span class="initials">SP</span>
        </div>
        <h3 class="member-name">Sara Patel</h3>
        <p class="member-role">Senior Backend Engineer</p>
        <p class="member-bio">Database whisperer and API design expert. Keeps the servers running smoothly at scale.</p>
        <div class="social-links">
          <a href="#" class="social-link" aria-label="Twitter">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
          </a>
          <a href="#" class="social-link" aria-label="LinkedIn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
          </a>
          <a href="#" class="social-link" aria-label="GitHub">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>
          </a>
        </div>
      </div>

      <div class="team-card" data-department="engineering">
        <div class="avatar" style="background: linear-gradient(135deg, #10b981, #059669);">
          <span class="initials">MC</span>
        </div>
        <h3 class="member-name">Marcus Chen</h3>
        <p class="member-role">Frontend Engineer</p>
        <p class="member-bio">Crafts pixel-perfect interfaces with a focus on accessibility and performance optimization.</p>
        <div class="social-links">
          <a href="#" class="social-link" aria-label="Twitter">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
          </a>
          <a href="#" class="social-link" aria-label="GitHub">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>
          </a>
        </div>
      </div>

      <div class="team-card" data-department="engineering">
        <div class="avatar" style="background: linear-gradient(135deg, #f59e0b, #d97706);">
          <span class="initials">LR</span>
        </div>
        <h3 class="member-name">Lena Rodriguez</h3>
        <p class="member-role">DevOps Engineer</p>
        <p class="member-bio">Automates everything. Builds CI/CD pipelines and keeps infrastructure resilient and cost-effective.</p>
        <div class="social-links">
          <a href="#" class="social-link" aria-label="LinkedIn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
          </a>
          <a href="#" class="social-link" aria-label="GitHub">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>
          </a>
        </div>
      </div>

      <!-- Design -->
      <div class="team-card" data-department="design">
        <div class="avatar" style="background: linear-gradient(135deg, #ec4899, #f43f5e);">
          <span class="initials">JW</span>
        </div>
        <h3 class="member-name">Jordan West</h3>
        <p class="member-role">Head of Design</p>
        <p class="member-bio">Leads the design vision with a sharp eye for detail and a deep understanding of user behavior.</p>
        <div class="social-links">
          <a href="#" class="social-link" aria-label="Twitter">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
          </a>
          <a href="#" class="social-link" aria-label="LinkedIn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
          </a>
        </div>
      </div>

      <div class="team-card" data-department="design">
        <div class="avatar" style="background: linear-gradient(135deg, #a855f7, #7c3aed);">
          <span class="initials">EN</span>
        </div>
        <h3 class="member-name">Elena Novak</h3>
        <p class="member-role">UX Researcher</p>
        <p class="member-bio">Turns user interviews and data into actionable insights that shape product decisions.</p>
        <div class="social-links">
          <a href="#" class="social-link" aria-label="Twitter">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
          </a>
          <a href="#" class="social-link" aria-label="LinkedIn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
          </a>
        </div>
      </div>

      <div class="team-card" data-department="design">
        <div class="avatar" style="background: linear-gradient(135deg, #14b8a6, #0d9488);">
          <span class="initials">TJ</span>
        </div>
        <h3 class="member-name">Tyler James</h3>
        <p class="member-role">UI Designer</p>
        <p class="member-bio">Creates beautiful interfaces and maintains the design system. Obsessed with spacing and typography.</p>
        <div class="social-links">
          <a href="#" class="social-link" aria-label="Twitter">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
          </a>
          <a href="#" class="social-link" aria-label="LinkedIn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
          </a>
        </div>
      </div>

      <!-- Product -->
      <div class="team-card" data-department="product">
        <div class="avatar" style="background: linear-gradient(135deg, #3b82f6, #1d4ed8);">
          <span class="initials">RH</span>
        </div>
        <h3 class="member-name">Rachel Hart</h3>
        <p class="member-role">VP of Product</p>
        <p class="member-bio">Bridges the gap between users and engineering. Shapes the product roadmap with data-driven decisions.</p>
        <div class="social-links">
          <a href="#" class="social-link" aria-label="Twitter">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
          </a>
          <a href="#" class="social-link" aria-label="LinkedIn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
          </a>
        </div>
      </div>

      <div class="team-card" data-department="product">
        <div class="avatar" style="background: linear-gradient(135deg, #f97316, #ea580c);">
          <span class="initials">DO</span>
        </div>
        <h3 class="member-name">David Okonkwo</h3>
        <p class="member-role">Product Manager</p>
        <p class="member-bio">Prioritizes features, writes specs, and ensures every release delivers real value to users.</p>
        <div class="social-links">
          <a href="#" class="social-link" aria-label="Twitter">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
          </a>
          <a href="#" class="social-link" aria-label="LinkedIn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
          </a>
        </div>
      </div>

      <!-- Marketing -->
      <div class="team-card" data-department="marketing">
        <div class="avatar" style="background: linear-gradient(135deg, #e11d48, #be123c);">
          <span class="initials">MF</span>
        </div>
        <h3 class="member-name">Maya Foster</h3>
        <p class="member-role">Head of Marketing</p>
        <p class="member-bio">Builds the brand and drives growth through creative campaigns, content strategy, and partnerships.</p>
        <div class="social-links">
          <a href="#" class="social-link" aria-label="Twitter">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
          </a>
          <a href="#" class="social-link" aria-label="LinkedIn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
          </a>
        </div>
      </div>

      <div class="team-card" data-department="marketing">
        <div class="avatar" style="background: linear-gradient(135deg, #84cc16, #65a30d);">
          <span class="initials">BT</span>
        </div>
        <h3 class="member-name">Ben Torres</h3>
        <p class="member-role">Content Strategist</p>
        <p class="member-bio">Writes compelling copy and manages the blog. Turns complex features into clear, engaging stories.</p>
        <div class="social-links">
          <a href="#" class="social-link" aria-label="Twitter">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
          </a>
          <a href="#" class="social-link" aria-label="LinkedIn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
          </a>
        </div>
      </div>

      <div class="team-card" data-department="marketing">
        <div class="avatar" style="background: linear-gradient(135deg, #f472b6, #db2777);">
          <span class="initials">CL</span>
        </div>
        <h3 class="member-name">Claire Liu</h3>
        <p class="member-role">Growth Marketing Manager</p>
        <p class="member-bio">Runs experiments, optimizes funnels, and scales acquisition channels with a data-first mindset.</p>
        <div class="social-links">
          <a href="#" class="social-link" aria-label="Twitter">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
          </a>
          <a href="#" class="social-link" aria-label="LinkedIn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
          </a>
        </div>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

Team Page

A team directory page with department filtering, profile cards showing avatar, name, role, short bio, and social links. Clean grid layout with hover effects.

Features

Department filters — All, Engineering, Design, Product, Marketing tabs
Profile cards — avatar (CSS gradient placeholder), name, role, short bio, social icons
Hover effect — card lifts with shadow, social icons appear
Team stats — count of team members by department
Responsive — 4 cols to 3 to 2 to 1

When to use it

Company about / team page
Team directory for internal tools
Agency portfolio team section