Team

<!-- Team Style 1 -->
<div class="card-hover text-center" style="max-width: 306px;">
  <img src="assets/img/landing/creative-agency/team/02.jpg" class="d-block rounded-5 mb-4" alt="Image">
  <h3 class="h5 mb-1">Alisa Black</h3>
  <p class="text-body-secondary mb-2">Head of marketing</p>
  
  <!-- Visible on hover on screens > 991px -->
  <div class="d-none d-lg-flex nav justify-content-center opacity-0">
    <a href="#" class="nav-link btn btn-icon btn-sm fs-sm fw-normal me-1" aria-label="Instagram">
      <i class="ai-instagram"></i>
    </a>
    <a href="#" class="nav-link btn btn-icon btn-sm fs-sm fw-normal me-1" aria-label="Facebook">
      <i class="ai-facebook"></i>
    </a>
    <a href="#" class="nav-link btn btn-icon btn-sm fs-sm fw-normal" aria-label="LinkedIn">
      <i class="ai-linkedin"></i>
    </a>
  </div>
  
  <!-- Always visible on screens < 992px -->
  <div class="d-lg-none nav justify-content-center">
    <a href="#" class="nav-link btn btn-icon btn-sm fs-sm fw-normal me-1" aria-label="Instagram">
      <i class="ai-instagram"></i>
    </a>
    <a href="#" class="nav-link btn btn-icon btn-sm fs-sm fw-normal me-1" aria-label="Facebook">
      <i class="ai-facebook"></i>
    </a>
    <a href="#" class="nav-link btn btn-icon btn-sm fs-sm fw-normal" aria-label="LinkedIn">
      <i class="ai-linkedin"></i>
    </a>
  </div>
</div>

<!-- Team Style 2 -->
<div class="card card-hover border-0 rounded-5 overflow-hidden" style="max-width: 416px;">
  <img src="assets/img/landing/corporate/team/01.jpg" alt="Image">
  <div class="position-absolute top-0 start-0 w-100 h-100 opacity-0">
    <div class="bg-dark position-absolute top-0 start-0 w-100 h-100 opacity-50"></div>
    <div class="card-body d-flex flex-column justify-content-end h-100 position-relative z-2 text-center" data-bs-theme="dark">
      <h3 class="h5 mb-1">Guy Hawkins</h3>
      <p class="text-body mb-3">Head of marketing</p>
      <div class="d-flex justify-content-center">
        <a href="#" class="btn btn-icon btn-sm btn-light btn-facebook rounded-circle mx-2" aria-label="Facebook">
          <i class="ai-facebook"></i>
        </a>
        <a href="#" class="btn btn-icon btn-sm btn-light btn-x rounded-circle mx-2" aria-label="X">
          <i class="ai-x"></i>
        </a>
        <a href="#" class="btn btn-icon btn-sm btn-light btn-linkedin rounded-circle mx-2" aria-label="LinkedIn">
          <i class="ai-linkedin"></i>
        </a>
      </div>
    </div>
  </div>
</div>

<!-- Team Style 3 -->
<div class="card-hover pb-3" style="max-width: 396px;">
  <div class="position-relative">
    <img src="assets/img/landing/creative-agency/team/06.jpg" alt="Image">
    <div class="d-flex justify-content-center position-absolute start-0 bottom-0 w-100 px-3 mb-4 opacity-0">
      <a href="#" class="btn btn-icon btn-sm btn-light btn-facebook rounded-circle mx-2" aria-label="Facebook">
        <i class="ai-facebook"></i>
      </a>
      <a href="#" class="btn btn-icon btn-sm btn-light btn-x rounded-circle mx-2" aria-label="X">
        <i class="ai-x"></i>
      </a>
      <a href="#" class="btn btn-icon btn-sm btn-light btn-behance rounded-circle mx-2" aria-label="Behance">
        <i class="ai-behance"></i>
      </a>
    </div>
  </div>
  <div class="border-bottom pt-4 pb-3">
    <h3 class="h4 mb-2">Edward Jones</h3>
    <span class="fs-lg text-body-secondary">Branding Designer</span>
  </div>
</div>

<!-- Team Style 4 -->
<a href="#" class="d-block card-hover text-decoration-none" style="max-width: 416px;">
  <div class="bg-secondary rounded-5 position-relative overflow-hidden">
    <div class="position-absolute top-0 start-0 w-100 h-100 bg-size-cover bg-position-center opacity-0" style="background-image: url(assets/img/landing/blog/authors/hover.svg);"></div>
    <img src="assets/img/landing/blog/authors/01.png" class="position-relative z-2" alt="Author picture">
  </div>
  <div class="border-bottom pt-4 pb-3">
    <h3 class="h4 mb-1">Jane Cooper</h3>
    <p class="text-body-secondary mb-0">Chief editor</p>
  </div>
</a>