Team component - 5
COPY
<section class="py-5 team">
<div class="container">
<div class="row mb-4">
<div class="col-8 col-lg-8 mx-auto">
<div class="title text-center mb-4">
<div class="pre-title text-primary fs-5">They are all professionals</div>
<h2 class="fs-1">Creative team and founders</h2>
<p>Pharetra morbi quis is massa maecenas vulputate elit non nullage a duis tortor mi massa pharetra. Massa maecenas vulputate elitr.</p>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6">
<div class="row justify-content-center">
<!-- Team item -->
<div class="col-md-10">
<div class="team-item text-center">
<div class="team-avatar">
<img src="/component/images/avatar/m1.jpg" class="img-fluid w-50 h-100 bg-light rounded-5" alt="Allen Smith">
</div>
<div class="team-desc mt-3">
<h5 class="team-name">Allen Smith</h5>
<div class="team-position text-primary">Founder</div>
<p class="text-muted mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pharetra morbi quis is massa maecenas vulputate elit non nullage a duis tortor mi massa pharetra. Massa maecenas vulputate elitr.</p>
<ul class="list-inline">
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- Team item -->
<div class="col-md-6">
<div class="team-item text-center">
<div class="team-avatar">
<img src="/component/images/avatar/m2.jpg" class="img-fluid w-50 h-100 bg-light rounded-5" alt="">
</div>
<div class="team-desc mt-3">
<h5 class="team-name">Peter Smith</h5>
<div class="team-position text-primary">Software Developer</div>
<p class="text-muted mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pharetra morbi quis is massa maecenas vulputate elit non nullage a duis
tortor mi massa pharetra. Massa maecenas vulputate elitr.</p>
<ul class="list-inline">
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- Team item -->
<div class="col-md-6">
<div class="team-item text-center">
<div class="team-avatar">
<img src="/component/images/avatar/m3.jpg" class="img-fluid w-50 h-100 bg-light rounded-5" alt="">
</div>
<div class="team-desc mt-3">
<h5 class="team-name">Emma Watson</h5>
<div class="team-position text-primary">Human Resource</div>
<p class="text-muted mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pharetra morbi quis is massa maecenas vulputate elit non nullage a duis
tortor mi massa pharetra. Massa maecenas vulputate elitr.</p>
<ul class="list-inline">
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- Team item -->
<div class="col-md-6">
<div class="team-item text-center">
<div class="team-avatar">
<img src="/component/images/avatar/m4.jpg" class="img-fluid w-50 h-100 bg-light rounded-5" alt="">
</div>
<div class="team-desc mt-3">
<h5 class="team-name">Jessica Mores</h5>
<div class="team-position text-primary">Web Developer</div>
<p class="text-muted mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pharetra morbi quis is massa maecenas vulputate elit non
nullage a duis tortor mi massa pharetra. Massa maecenas vulputate elitr.</p>
<ul class="list-inline">
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- Team item -->
<div class="col-md-6">
<div class="team-item text-center">
<div class="team-avatar">
<img src="/component/images/avatar/m5.jpg" class="img-fluid w-50 h-100 bg-light rounded-5" alt="">
</div>
<div class="team-desc mt-3">
<h5 class="team-name">Emma Mores</h5>
<div class="team-position text-primary">Web Developer</div>
<p class="text-muted mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pharetra morbi quis is massa maecenas vulputate elit non
nullage a duis tortor mi massa pharetra. Massa maecenas vulputate elitr.</p>
<ul class="list-inline">
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
:root {
--bs-blue: #0038dd;
--bs-blue-dark: #3a33af;
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-black);
}
body {
font-size: .90rem;
}
.team a,
.text-primary {
color: var(--bs-primary) !important;
}
.team a:hover {
color: var(--bs-blue-dark) !important;
}
.team .social-icons-link i {
font-size: 24px;
}
.team .team-avatar img {
filter: grayscale(100%);
}
.team .team-avatar img:hover {
filter: none;
opacity: .9;
}
.team .team-position {
font-weight: 500;
}
Team component - 6
COPY
<section class="py-5 team">
<div class="container">
<div class="row">
<div class="col-10 col-md-8 mx-auto">
<div class="title mb-5">
<div class="pre-title text-primary fs-5">They are all professionals</div>
<h2 class="fs-1">Creative team and founders</h2>
<p>Pharetra morbi quis is massa maecenas vulputate elit non nullage a duis tortor mi massa pharetra. Massa maecenas vulputate elitr.</p>
</div>
<div class="row">
<!-- Team item -->
<div class="col-md-6">
<div class="team-item">
<div class="team-avatar">
<img src="/component/images/avatar/m1.jpg" class="img-fluid w-50 h-100 bg-light" alt="Allen Smith">
</div>
<div class="team-desc mt-3">
<h5 class="team-name">Allen Smith</h5>
<div class="team-position text-primary">Founder</div>
<p class="text-muted mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pharetra morbi quis is massa maecenas vulputate elit non nullage a duis tortor mi massa pharetra. Massa maecenas vulputate elitr.</p>
<ul class="list-inline">
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- Team item -->
<div class="col-md-6">
<div class="team-item">
<div class="team-avatar">
<img src="/component/images/avatar/m2.jpg" class="img-fluid w-50 h-100 bg-light" alt="">
</div>
<div class="team-desc mt-3">
<h5 class="team-name">Peter Smith</h5>
<div class="team-position text-primary">Software Developer</div>
<p class="text-muted mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pharetra morbi quis is massa maecenas vulputate elit non nullage a duis
tortor mi massa pharetra. Massa maecenas vulputate elitr.</p>
<ul class="list-inline">
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- Team item -->
<div class="col-md-6">
<div class="team-item">
<div class="team-avatar">
<img src="/component/images/avatar/m3.jpg" class="img-fluid w-50 h-100 bg-light" alt="">
</div>
<div class="team-desc mt-3">
<h5 class="team-name">Emma Watson</h5>
<div class="team-position text-primary">Human Resource</div>
<p class="text-muted mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pharetra morbi quis is massa maecenas vulputate elit non nullage a duis
tortor mi massa pharetra. Massa maecenas vulputate elitr.</p>
<ul class="list-inline">
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- Team item -->
<div class="col-md-6">
<div class="team-item">
<div class="team-avatar">
<img src="/component/images/avatar/m4.jpg" class="img-fluid w-50 h-100 bg-light" alt="">
</div>
<div class="team-desc mt-3">
<h5 class="team-name">Jessica Mores</h5>
<div class="team-position text-primary">Web Developer</div>
<p class="text-muted mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pharetra morbi quis is massa maecenas vulputate elit non
nullage a duis tortor mi massa pharetra. Massa maecenas vulputate elitr.</p>
<ul class="list-inline">
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
:root {
--bs-blue: #0038dd;
--bs-blue-dark: #3a33af;
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-black);
}
body {
font-size: .90rem;
}
.team a,
.text-primary {
color: var(--bs-primary) !important;
}
.team a:hover {
color: var(--bs-blue-dark) !important;
}
.team .social-icons-link i {
font-size: 24px;
}
.team .team-avatar img:hover {
filter: grayscale(100%);
opacity: .9;
}
.team .team-position {
font-weight: 500;
}
.team .team-item {
padding-bottom: 20px;
}
Team component - 4
COPY
<section class="py-5 team">
<div class="container content-space-1 content-space-md-3">
<div class="row justify-content-center">
<div class="col-10 col-md-8">
<!-- Heading -->
<div class="text-center mb-5">
<h1 class="fs-1">Team Members</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
</div>
<!-- End Heading -->
<div class="row justify-content-center mb-sm-5">
<div class="col-sm-6 col-lg-4 mb-5">
<!-- Team -->
<div class="w-75 text-center mx-auto">
<img class="img-fluid rounded-circle" src="/component/images/avatar/m1.jpg" alt="Image Description">
<h6 class="my-1 mt-2 text-uppercase">Christina Kray</h6>
<div class="text-muted">Founder / CEO</div>
<div class="d-flex justify-content-center flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
<!-- End Team -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-5">
<!-- Team -->
<div class="w-75 text-center mx-auto">
<img class="img-fluid rounded-circle" src="/component/images/avatar/m2.jpg" alt="Image Description">
<h6 class="my-1 mt-2 text-uppercase">Jeff Fisher</h6>
<div class="text-muted">Project Manager</div>
<div class="d-flex justify-content-center flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
<!-- End Team -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-5">
<!-- Team -->
<div class="w-75 text-center mx-auto">
<img class="img-fluid rounded-circle" src="/component/images/avatar/m3.jpg" alt="Image Description">
<h6 class="my-1 mt-2 text-uppercase">Sophia Harrington</h6>
<div class="text-muted">Project Manager</div>
<div class="d-flex justify-content-center flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
<!-- End Team -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-5">
<!-- Team -->
<div class="w-75 text-center mx-auto">
<img class="img-fluid rounded-circle" src="/component/images/avatar/m6.jpg" alt="Image Description">
<h6 class="my-1 mt-2 text-uppercase">David Forren</h6>
<div class="text-muted">Support Consultant</div>
<div class="d-flex justify-content-center flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
<!-- End Team -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-5">
<!-- Team -->
<div class="w-75 text-center mx-auto">
<img class="img-fluid rounded-circle" src="/component/images/avatar/m4.jpg" alt="Image Description">
<h6 class="my-1 mt-2 text-uppercase">Amil Evara</h6>
<div class="text-muted">UI/UX Designer</div>
<div class="d-flex justify-content-center flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
<!-- End Team -->
</div>
<!-- End Col -->
<div class="col-sm-6 col-lg-4 mb-5">
<div class="w-75 text-center mx-auto">
<img class="img-fluid rounded-circle" src="/component/images/avatar/m5.jpg" alt="Image Description">
<h6 class="my-1 mt-2 text-uppercase">Tom Lowry</h6>
<div class="text-muted">UI/UX Designer</div>
<div class="d-flex justify-content-center flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
:root {
--bs-green: #5b0097;
--bs-green-dark: #016615;
--bs-black: #000000;
--bs-red: #d11800;
--bs-red-dark: #a01300;
--bs-primary: var(--bs-green);
--bs-secondary: var(--bs-black);
}
body {
font-size: .90rem;
}
.team a,
.team .text-primary {
color: var(--bs-primary) !important;
}
.team a:hover {
color: var(--bs-green-dark) !important;
}
.text-red {
color: var(--bs-red);
}
.team .team-item {
width: 95%;
}
.team .social-icons-link i {
font-size: 24px;
}
.team .rounded-circle {
border: 1px solid #ddd;
padding: 5px;
}
.team img:hover {
opacity: .9;
}
Team component - 3
COPY
<section class="py-5 team">
<div class="container">
<div class="row mb-4">
<div class="col-12 col-lg-8 mx-auto">
<div class="title text-center mb-4">
<div class="pre-title text-primary fs-5">They are all professionals</div>
<h2 class="fs-1">Creative team and founders</h2>
<p>Pharetra morbi quis is massa maecenas vulputate elit non nullage a duis tortor mi massa pharetra. Massa maecenas vulputate elitr.</p>
</div>
</div>
</div>
<div class="row justify-content-center">
<!-- Team item -->
<div class="col-sm-6 col-md-3">
<div class="team-item text-center">
<div class="team-avatar">
<img src="/component/images/avatar/m1.jpg" class="img-fluid w-100 h-100 bg-light" alt="Allen Smith">
</div>
<div class="team-desc mt-3">
<h5 class="team-name">Allen Smith</h5>
<div class="team-position text-primary">Founder</div>
<p class="text-muted mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<ul class="list-inline">
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- Team item -->
<div class="col-sm-6 col-md-3">
<div class="team-item text-center">
<div class="team-avatar">
<img src="/component/images/avatar/m2.jpg" class="img-fluid w-100 h-100 bg-light" alt="">
</div>
<div class="team-desc mt-3">
<h5 class="team-name">Peter Smith</h5>
<div class="team-position text-primary">Software Developer</div>
<p class="text-muted mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<ul class="list-inline">
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- Team item -->
<div class="col-sm-6 col-md-3">
<div class="team-item text-center">
<div class="team-avatar">
<img src="/component/images/avatar/m3.jpg" class="img-fluid w-100 h-100 bg-light" alt="">
</div>
<div class="team-desc mt-3">
<h5 class="team-name">Emma Watson</h5>
<div class="team-position text-primary">Human Resource</div>
<p class="text-muted mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<ul class="list-inline">
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- Team item -->
<div class="col-sm-6 col-md-3">
<div class="team-item text-center">
<div class="team-avatar">
<img src="/component/images/avatar/m4.jpg" class="img-fluid w-100 h-100 bg-light" alt="">
</div>
<div class="team-desc mt-3">
<h5 class="team-name">Jessica Mores</h5>
<div class="team-position text-primary">Web Developer</div>
<p class="text-muted mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<ul class="list-inline">
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- Team item -->
<div class="col-sm-6 col-md-3 mt-2">
<div class="team-item text-center">
<div class="team-avatar">
<img src="/component/images/avatar/m5.jpg" class="img-fluid w-100 h-100 bg-light" alt="">
</div>
<div class="team-desc mt-3">
<h5 class="team-name">Jessica Mores</h5>
<div class="team-position text-primary">Web Developer</div>
<p class="text-muted mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<ul class="list-inline">
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- Team item -->
<div class="col-sm-6 col-md-3 mt-2">
<div class="team-item text-center">
<div class="team-avatar">
<img src="/component/images/avatar/m6.jpg" class="img-fluid w-100 h-100 bg-light" alt="">
</div>
<div class="team-desc mt-3">
<h5 class="team-name">Jessica Mores</h5>
<div class="team-position text-primary">Web Developer</div>
<p class="text-muted mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<ul class="list-inline">
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="list-inline-item pb-2 px-1">
<a class="social-icons-link" href="#"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
:root {
--bs-blue: #0038dd;
--bs-blue-dark: #3a33af;
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-black);
}
body {
font-size: .90rem;
}
.team a,
.text-primary {
color: var(--bs-primary) !important;
}
.team a:hover {
color: var(--bs-blue-dark) !important;
}
.team .team-item {
width: 95%;
}
.team .social-icons-link i {
font-size: 24px;
}
.team .team-avatar img {
filter: grayscale(100%);
}
.team .team-avatar img:hover {
filter: none;
opacity: .9;
}
.team .team-position {
font-weight: 500;
}
Team component - 2
COPY
<section class="team">
<div class="container py-5">
<div class="row justify-content-between">
<div class="col-md-5">
<div class="py-0 py-md-5">
<h2 class="fs-1 fw-medium">
<span class="text-danger">Creative</span> team and <span class="text-primary">founders</span>
</h2>
<p class="mt-3">Pharetra morbi quis is massa maecenas vulputate elit non nullage a duis
tortor mi massa pharetra. Massa maecenas vulputate elitr.
</p>
<p class="mt-3">Morbi quis is massa maecenas vulputate elit non nullage a duis
tortor mi massa pharetra. Massa maecenas vulputate.
</p>
</div>
</div>
<div class="col-md-7">
<div class="row">
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<div class="card card-metro rounded-0 border-0">
<div class="card-image">
<img src="/component/images/avatar/m1.jpg" class="img-fluid rounded-1" alt="card image">
</div>
<div class="d-flex flex-column p-0">
<h6 class="my-1 mt-3 text-uppercase">Christina Kray</h6>
<div class="text-muted">Founder / CEO</div>
<div class="d-flex flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<div href="#" class="card card-metro rounded-0 border-0">
<div class="card-image">
<img src="/component/images/avatar/m2.jpg" class="img-fluid rounded-1" alt="card image">
</div>
<div class="d-flex flex-column p-0">
<h6 class="my-1 mt-3 text-uppercase">JEFF FISHER</h6>
<div class="text-muted">Project Manager</div>
<div class="d-flex flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<div href="#" class="card card-metro rounded-0 border-0">
<div class="card-image">
<img src="/component/images/avatar/m3.jpg" class="img-fluid rounded-1" alt="card image">
</div>
<div class="d-flex flex-column p-0">
<h6 class="my-1 mt-3 text-uppercase">Christina Kray</h6>
<div class="text-muted">Founder / CEO</div>
<div class="d-flex flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<div href="#" class="card card-metro rounded-0 border-0">
<div class="card-image">
<img src="/component/images/avatar/m4.jpg" class="img-fluid rounded-1" alt="card image">
</div>
<div class="d-flex flex-column p-0">
<h6 class="my-1 mt-3 text-uppercase">SOPHIA HARRINGTON</h6>
<div class="text-muted">Project Manager</div>
<div class="d-flex flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<div href="#" class="card card-metro rounded-0 border-0">
<div class="card-image">
<img src="/component/images/avatar/m4.jpg" class="img-fluid rounded-1" alt="card image">
</div>
<div class="d-flex flex-column p-0">
<h6 class="my-1 mt-3 text-uppercase">SOPHIA HARRINGTON</h6>
<div class="text-muted">Project Manager</div>
<div class="d-flex flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<div href="#" class="card card-metro rounded-0 border-0">
<div class="card-image">
<img src="/component/images/avatar/m5.jpg" class="img-fluid rounded-1" alt="card image">
</div>
<div class="d-flex flex-column p-0">
<h6 class="my-1 mt-3 text-uppercase">SOPHIA HARRINGTON</h6>
<div class="text-muted">Project Manager</div>
<div class="d-flex flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Card item 1 -->
<div class="col-sm-6 col-lg-3 mb-4">
<div href="#" class="card card-metro rounded-0 border-0">
<div class="card-image">
<img src="/component/images/avatar/m6.jpg" class="img-fluid rounded-1" alt="card image">
</div>
<div class="d-flex flex-column p-0">
<h6 class="my-1 mt-3 text-uppercase">SOPHIA HARRINGTON</h6>
<div class="text-muted">Project Manager</div>
<div class="d-flex flex-row">
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-linkedin text-primary"></i>
</a>
</div>
<div class="p-2">
<a href="#">
<i class="bi fs-5 bi-facebook text-primary"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Load more END -->
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #0d6efd;
--bs-blue-rgb: 13, 110, 253;
--bs-primary: var(--bs-blue);
--bs-primary-rgb: var(--bs-blue-rgb);
}
body {
font-family: 'Inter', sans-serif;
font-size: .80rem;
font-weight: normal;
}
.team {
background: url(/component/images/bg/abstract-lines.svg);
background-repeat: no-repeat;
background-size: cover;
}
.card-metro {
overflow: hidden;
text-decoration: none;
background: transparent;
}
.card-metro:hover .card-image img {
-webkit-transform: scale(1.08);
transform: scale(1.08);
}
.card-metro img {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.team h6 {
font-size: .9rem;
}
Team component - 1
COPY
<section class="team-section py-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<div class="pb-5">
<h2 class="h1 mb-lg-4 text-primary">Our Active Team</h2>
<p>Vestibulum nisl tortor, consectetur quis imperdiet bibendum, laoreet sed arcu. Sed
condimentum iaculis ex, in faucibus lorem accumsan non. Donec mattis tincidunt metus. Morbi
sed tortor a risus luctus dignissim.</p>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-md-5">
<div class="card shadow bg-primary text-white pt-5 my-5 position-relative border-0">
<div class="card-body p-4">
<div class="member-profile position-absolute w-100 text-center">
<img class="rounded-circle mx-auto d-inline-block shadow-sm border-1" src="/component/images/avatar/m1.jpg" width="130" height="130" alt="">
</div>
<div class="card-text pt-3 text-center">
<h5 class="mb-2 text-center ">John Lynch</h5>
<div class="mb-4 text-center">Co-founder / CEO</div>
<div class="text-white-75">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</div>
</div>
</div><!--//card-body-->
<div class="card-footer bg-white bg-opacity-25 border-0 text-center py-3 mt-3">
<!--social-list-->
<ul class="social-list list-inline mb-0 mx-auto">
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-linkedin fs-4"></i>
</a>
</li>
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-twitter fs-4"></i>
</a>
</li>
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-skype fs-4"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-5">
<div class="card shadow bg-primary text-white pt-5 my-5 position-relative border-0">
<div class="card-body p-4">
<div class="member-profile position-absolute w-100 text-center">
<img class="rounded-circle mx-auto d-inline-block shadow-sm border-1" src="/component/images/avatar/m2.jpg" width="130" height="130" alt="">
</div>
<div class="card-text pt-3 text-center">
<h5 class="mb-2 text-center ">Joe Thomas</h5>
<div class="mb-4 text-center">Co-founder / CTO</div>
<div class="text-white-75">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</div>
</div>
</div><!--//card-body-->
<div class="card-footer bg-white bg-opacity-25 border-0 text-center py-3 mt-3">
<!--social-list-->
<ul class="social-list list-inline mb-0 mx-auto">
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-linkedin fs-4"></i>
</a>
</li>
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-twitter fs-4"></i>
</a>
</li>
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-skype fs-4"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card shadow bg-primary text-white pt-5 my-5 position-relative border-0">
<div class="card-body p-4">
<div class="member-profile position-absolute w-100 text-center">
<img class="rounded-circle mx-auto d-inline-block shadow-sm" src="/component/images/avatar/m4.jpg" width="120" height="120" alt="">
</div>
<div class="card-text pt-1 text-center">
<h5 class="mb-0">Jean Torres</h5>
<div class="mb-3">Marketing</div>
<div class="text-white-75">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</div>
</div>
</div>
<div class="card-footer bg-white bg-opacity-25 border-0 text-center py-3 mt-3">
<!--social-list-->
<ul class="social-list list-inline mb-0 mx-auto">
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-linkedin fs-4"></i>
</a>
</li>
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-twitter fs-4"></i>
</a>
</li>
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-skype fs-4"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card shadow bg-primary text-white pt-5 my-5 position-relative border-0">
<div class="card-body p-4">
<div class="member-profile position-absolute w-100 text-center">
<img class="rounded-circle mx-auto d-inline-block shadow-sm" src="/component/images/avatar/m3.jpg" width="120" height="120" alt="">
</div>
<div class="card-text pt-1 text-center">
<h5 class="mb-0 ">Doris Meyer</h5>
<div class="mb-3">Product Manager</div>
<div class="text-white-75">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</div>
</div>
</div>
<div class="card-footer bg-white bg-opacity-25 border-0 text-center py-3 mt-3">
<!--social-list-->
<ul class="social-list list-inline mb-0 mx-auto">
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-linkedin fs-4"></i>
</a>
</li>
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-twitter fs-4"></i>
</a>
</li>
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-skype fs-4"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card shadow bg-primary text-white pt-5 my-5 position-relative border-0">
<div class="card-body p-4">
<div class="member-profile position-absolute w-100 text-center">
<img class="rounded-circle mx-auto d-inline-block shadow-sm" src="/component/images/avatar/m5.jpg" width="120" height="120" alt="">
</div>
<div class="card-text pt-1 text-center">
<h5 class="mb-0">Ronald Reid</h5>
<div class="mb-3">iOS Developer</div>
<div class="text-white-75">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</div>
</div>
</div>
<div class="card-footer bg-white bg-opacity-25 border-0 text-center py-3 mt-3">
<!--social-list-->
<ul class="social-list list-inline mb-0 mx-auto">
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-linkedin fs-4"></i>
</a>
</li>
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-twitter fs-4"></i>
</a>
</li>
<li class="list-inline-item">
<a class="text-dark" href="#">
<i class="bi bi-skype fs-4"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div><!--//row-->
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #4f46e5;
--bs-blue-rgb: 79, 70, 229;
--bs-blue-dark: #3a33af;
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .90rem;
}
/*
.text-primary {
color: var(--bs-blue) !important;
}
.bg-primary {
--bs-primary-rgb: var(--bs-blue-rgb);
} */
.team-section a {
color: var(--bs-white) !important;
}
.team-section a:hover {
color: var(--bs-black) !important;
}
.member-profile {
top: -50px;
left: 0;
}
.social-list .list-inline-item {
margin: 0 10px;
}
More coming soon