Team
These sections highlight the people behind a company, organization, or project.
Overview
"Team" blocks are sections on websites or applications that highlight the people behind a company, organization, or project. These components typically showcase individual team members with their details. The goal is to introduce users to the people driving the brand or service, building trust and creating a sense of personal connection.
Some of these examples make use of Swiper.js, a mobile-friendly slider library. To include Swiper in your project, add the following CDN links to your HTML file.
JavaScript
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
CSS
<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet" />
Examples
Below are a few examples of “Team” sections.
Example 1
Our Team
Introducing the faces behind us
Rahul Mehta
Marketing Head
Jane Smith
Product Designer
Nguyen Minh
Software Engineer
Neha Gupta
Content Strategist
<section class="bg-body py-5">
<div class="container">
<div class="text-center">
<h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Our Team</h1>
<h2 class="mb-4">Introducing the faces behind us</h2>
</div>
<div class="row g-3 g-lg-4">
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar6.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Rahul Mehta</h5>
<p class="text-muted mb-0">Marketing Head</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar1.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Jane Smith</h5>
<p class="text-muted mb-0">Product Designer</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar7.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Nguyen Minh</h5>
<p class="text-muted mb-0">Software Engineer</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar3.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Neha Gupta</h5>
<p class="text-muted mb-0">Content Strategist</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="text-center"> <h1 class="text-primary fw-semibold text-uppercase
fs-5 mb-2">Our Team</h1> <h2 class="mb-4">Introducing the faces
behind us</h2> </div> <div class="row g-3 g-lg-4"> <div
class="col-6 col-md-3"> <div class="card bg-secondary shadow border-0 h-100
p-0"> <img src="/assets/images/avatars/avatar6.jpg"
class="card-img-top" alt="Team Member Photograph"> <div
class="card-body p-3"> <h5 class="card-title">Rahul
Mehta</h5> <p class="text-muted mb-0">Marketing Head</p>
</div> </div> </div> <div class="col-6 col-md-3"> <div
class="card bg-secondary shadow border-0 h-100 p-0"> <img
src="/assets/images/avatars/avatar1.jpg" class="card-img-top" alt="Team
Member Photograph"> <div class="card-body p-3"> <h5
class="card-title">Jane Smith</h5> <p class="text-muted
mb-0">Product Designer</p> </div> </div> </div> <div
class="col-6 col-md-3"> <div class="card bg-secondary shadow border-0 h-100
p-0"> <img src="/assets/images/avatars/avatar7.jpg"
class="card-img-top" alt="Team Member Photograph"> <div
class="card-body p-3"> <h5 class="card-title">Nguyen
Minh</h5> <p class="text-muted mb-0">Software Engineer</p>
</div> </div> </div> <div class="col-6 col-md-3"> <div
class="card bg-secondary shadow border-0 h-100 p-0"> <img
src="/assets/images/avatars/avatar3.jpg" class="card-img-top" alt="Team
Member Photograph"> <div class="card-body p-3"> <h5
class="card-title">Neha Gupta</h5> <p class="text-muted
mb-0">Content Strategist</p> </div> </div> </div> </div>
</div> </section>
Example 2
Our Team
Introducing the faces behind us
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet.
Rahul Mehta
Marketing Head
Jane Smith
Product Designer
Nguyen Minh
Software Engineer
Neha Gupta
Content Strategist
Amara Evans
Sales Executive
Reena Paul
HR Lead
Aaron Thomas
UI Designer
Jack Smith
Sales Lead
<section class="bg-body py-5">
<div class="container">
<div class="row mb-4">
<div class="col-md-6">
<h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Our Team</h1>
<h2 class="mb-md-0">Introducing the faces behind us</h2>
</div>
<div class="col-md-6">
<p class="text-muted mb-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet.
</p>
</div>
</div>
<div class="row mb-4 g-3 g-lg-4">
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar6.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Rahul Mehta</h5>
<p class="text-muted mb-0">Marketing Head</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar1.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Jane Smith</h5>
<p class="text-muted mb-0">Product Designer</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar7.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Nguyen Minh</h5>
<p class="text-muted mb-0">Software Engineer</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar3.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Neha Gupta</h5>
<p class="text-muted mb-0">Content Strategist</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar2.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Amara Evans</h5>
<p class="text-muted mb-0">Sales Executive</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar4.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Reena Paul</h5>
<p class="text-muted mb-0">HR Lead</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar11.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Aaron Thomas</h5>
<p class="text-muted mb-0">UI Designer</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar9.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Jack Smith</h5>
<p class="text-muted mb-0">Sales Lead</p>
</div>
</div>
</div>
</div>
<div class="text-center text-md-end">
<button class="btn btn-outline-secondary">See all members<i class="ri-arrow-right-line ms-2"></i></button>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row mb-4"> <div class="col-md-6"> <h1
class="text-primary fw-semibold text-uppercase fs-5 mb-2">Our Team</h1>
<h2 class="mb-md-0">Introducing the faces behind us</h2> </div>
<div class="col-md-6"> <p class="text-muted mb-0"> Lorem ipsum
dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos
provident nulla nemo! Quam impedit dolores vel sit amet. </p> </div> </div>
<div class="row mb-4 g-3 g-lg-4"> <div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0"> <img
src="/assets/images/avatars/avatar6.jpg" class="card-img-top" alt="Team
Member Photograph"> <div class="card-body p-3"> <h5
class="card-title">Rahul Mehta</h5> <p class="text-muted
mb-0">Marketing Head</p> </div> </div> </div> <div
class="col-6 col-md-3"> <div class="card bg-secondary shadow border-0 h-100
p-0"> <img src="/assets/images/avatars/avatar1.jpg"
class="card-img-top" alt="Team Member Photograph"> <div
class="card-body p-3"> <h5 class="card-title">Jane Smith</h5>
<p class="text-muted mb-0">Product Designer</p> </div> </div>
</div> <div class="col-6 col-md-3"> <div class="card bg-secondary
shadow border-0 h-100 p-0"> <img src="/assets/images/avatars/avatar7.jpg"
class="card-img-top" alt="Team Member Photograph"> <div
class="card-body p-3"> <h5 class="card-title">Nguyen
Minh</h5> <p class="text-muted mb-0">Software Engineer</p>
</div> </div> </div> <div class="col-6 col-md-3"> <div
class="card bg-secondary shadow border-0 h-100 p-0"> <img
src="/assets/images/avatars/avatar3.jpg" class="card-img-top" alt="Team
Member Photograph"> <div class="card-body p-3"> <h5
class="card-title">Neha Gupta</h5> <p class="text-muted
mb-0">Content Strategist</p> </div> </div> </div> <div
class="col-6 col-md-3"> <div class="card bg-secondary shadow border-0 h-100
p-0"> <img src="/assets/images/avatars/avatar2.jpg"
class="card-img-top" alt="Team Member Photograph"> <div
class="card-body p-3"> <h5 class="card-title">Amara
Evans</h5> <p class="text-muted mb-0">Sales Executive</p>
</div> </div> </div> <div class="col-6 col-md-3"> <div
class="card bg-secondary shadow border-0 h-100 p-0"> <img
src="/assets/images/avatars/avatar4.jpg" class="card-img-top" alt="Team
Member Photograph"> <div class="card-body p-3"> <h5
class="card-title">Reena Paul</h5> <p class="text-muted
mb-0">HR Lead</p> </div> </div> </div> <div class="col-6
col-md-3"> <div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar11.jpg" class="card-img-top"
alt="Team Member Photograph"> <div class="card-body p-3"> <h5
class="card-title">Aaron Thomas</h5> <p class="text-muted
mb-0">UI Designer</p> </div> </div> </div> <div
class="col-6 col-md-3"> <div class="card bg-secondary shadow border-0 h-100
p-0"> <img src="/assets/images/avatars/avatar9.jpg"
class="card-img-top" alt="Team Member Photograph"> <div
class="card-body p-3"> <h5 class="card-title">Jack Smith</h5>
<p class="text-muted mb-0">Sales Lead</p> </div> </div>
</div> </div> <div class="text-center text-md-end"> <button
class="btn btn-outline-secondary">See all members<i
class="ri-arrow-right-line ms-2"></i></button> </div>
</div> </section>
Example 3
Our team
Lorem ipsum dolor sit amet consect adipisi elit. Dolorum quibus libero corpori dignis provident nulla nemo!
Rahul Mehta
Marketing Head
Nguyen Minh
Software Engineer
Neha Gupta
Content Strategist
Jane Smith
Product Designer
<section class="bg-body py-5">
<div class="container">
<div class="row">
<div class="col-md-4">
<i class="ri-group-line text-primary fs-1"></i>
<h2 class="mb-2">Our team</h2>
<p class="text-muted mb-3">
Lorem ipsum dolor sit amet consect adipisi elit. Dolorum quibus libero corpori dignis provident nulla nemo!
</p>
<button class="btn btn-outline-secondary">All members<i class="ri-arrow-right-line ms-2"></i></button>
</div>
<div class="col-md-8 mt-4 mt-md-0">
<!-- Slider main container -->
<div class="swiper ex3Swiper">
<div class="swiper-wrapper mb-5">
<div class="swiper-slide" style="height: auto;">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar6.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Rahul Mehta</h5>
<p class="text-muted mb-0">Marketing Head</p>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar7.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Nguyen Minh</h5>
<p class="text-muted mb-0">Software Engineer</p>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar3.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Neha Gupta</h5>
<p class="text-muted mb-0">Content Strategist</p>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar1.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Jane Smith</h5>
<p class="text-muted mb-0">Product Designer</p>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row"> <div class="col-md-4"> <i class="ri-group-line
text-primary fs-1"></i> <h2 class="mb-2">Our team</h2> <p
class="text-muted mb-3"> Lorem ipsum dolor sit amet consect adipisi elit. Dolorum
quibus libero corpori dignis provident nulla nemo! </p> <button class="btn
btn-outline-secondary">All members<i class="ri-arrow-right-line
ms-2"></i></button> </div> <div class="col-md-8 mt-4
mt-md-0"> <!-- Slider main container --> <div class="swiper
ex3Swiper"> <div class="swiper-wrapper mb-5"> <div
class="swiper-slide" style="height: auto;"> <div class="card
bg-secondary shadow border-0 h-100 p-0"> <img
src="/assets/images/avatars/avatar6.jpg" class="card-img-top" alt="Team
Member Photograph"> <div class="card-body p-3"> <h5
class="card-title">Rahul Mehta</h5> <p class="text-muted
mb-0">Marketing Head</p> </div> </div> </div> <div
class="swiper-slide" style="height: auto;"> <div class="card
bg-secondary shadow border-0 h-100 p-0"> <img
src="/assets/images/avatars/avatar7.jpg" class="card-img-top" alt="Team
Member Photograph"> <div class="card-body p-3"> <h5
class="card-title">Nguyen Minh</h5> <p class="text-muted
mb-0">Software Engineer</p> </div> </div> </div> <div
class="swiper-slide" style="height: auto;"> <div class="card
bg-secondary shadow border-0 h-100 p-0"> <img
src="/assets/images/avatars/avatar3.jpg" class="card-img-top" alt="Team
Member Photograph"> <div class="card-body p-3"> <h5
class="card-title">Neha Gupta</h5> <p class="text-muted
mb-0">Content Strategist</p> </div> </div> </div> <div
class="swiper-slide" style="height: auto;"> <div class="card
bg-secondary shadow border-0 h-100 p-0"> <img
src="/assets/images/avatars/avatar1.jpg" class="card-img-top" alt="Team
Member Photograph"> <div class="card-body p-3"> <h5
class="card-title">Jane Smith</h5> <p class="text-muted
mb-0">Product Designer</p> </div> </div> </div> </div>
<div class="swiper-pagination"></div> </div> </div>
</div> </div> </section>
.swiper-pagination-bullet {
background: var(--bs-primary);
}
.swiper-pagination-bullet-active {
background: var(--bs-primary);
}
.swiper-pagination-bullet { background: var(--bs-primary); } .swiper-pagination-bullet-active {
background: var(--bs-primary); }
document.addEventListener('DOMContentLoaded', () => {
var swiper = new Swiper(".ex3Swiper", {
slidesPerView: 1,
spaceBetween: 20,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
breakpoints: {
576: {
slidesPerView: 2,
spaceBetween: 30,
}
}
});
});
document.addEventListener('DOMContentLoaded', () => { var swiper = new
Swiper(".ex3Swiper", { slidesPerView: 1, spaceBetween: 20, pagination: { el:
".swiper-pagination", clickable: true, }, autoplay: { delay: 3000,
disableOnInteraction: false, }, breakpoints: { 576: { slidesPerView: 2, spaceBetween: 30, } }
}); });
Example 4
Our Team
Get to know the team
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nemo.
<section class="bg-body py-5">
<div class="container">
<div class="row mb-4">
<div class="col-md-6">
<h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Our Team</h1>
<h2 class="mb-md-0">Get to know the team</h2>
</div>
<div class="col-md-6">
<p class="text-muted mb-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
corporis dignissimos provident nemo.
</p>
</div>
</div>
<div class="row g-3 g-lg-4">
<div class="col-sm-6 col-md-3">
<div class="card bg-secondary shadow border-0 p-0">
<figure class="img-scale rounded-top-4 mb-0">
<img src="/assets/images/avatars/avatar6.jpg" class="card-img-top" alt="Team Member Image">
</figure>
<div class="card-body p-3">
<p class="card-title mb-2">Rahul Mehta</p>
<p class="text-muted mb-2">Marketing Head</p>
<a href="#" class="text-primary text-decoration-none mb-0">
Learn more <i class="ri-arrow-right-line"></i>
</a>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="card bg-secondary shadow border-0 p-0 mt-0 mt-md-4">
<figure class="img-scale rounded-top-4 mb-0">
<img src="/assets/images/avatars/avatar7.jpg" class="card-img-top" alt="Team Member Image">
</figure>
<div class="card-body p-3">
<p class="card-title mb-2">Nguyen Minh</p>
<p class="text-muted mb-2">Software Engineer</p>
<a href="#" class="text-primary text-decoration-none mb-0">
Learn more <i class="ri-arrow-right-line"></i>
</a>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="card bg-secondary shadow border-0 p-0">
<figure class="img-scale rounded-top-4 mb-0">
<img src="/assets/images/avatars/avatar3.jpg" class="card-img-top" alt="Team Member Image">
</figure>
<div class="card-body p-3">
<p class="card-title mb-2">Neha Gupta</p>
<p class="text-muted mb-2">Content Strategist</p>
<a href="#" class="text-primary text-decoration-none mb-0">
Learn more <i class="ri-arrow-right-line"></i>
</a>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="card bg-secondary shadow border-0 p-0 mt-0 mt-md-4">
<figure class="img-scale rounded-top-4 mb-0">
<img src="/assets/images/avatars/avatar1.jpg" class="card-img-top" alt="Team Member Image">
</figure>
<div class="card-body p-3">
<p class="card-title mb-2">Jane Smith</p>
<p class="text-muted mb-2">Product Designer</p>
<a href="#" class="text-primary text-decoration-none mb-0">
Learn more <i class="ri-arrow-right-line"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row mb-4"> <div class="col-md-6"> <h1
class="text-primary fw-semibold text-uppercase fs-5 mb-2">Our Team</h1>
<h2 class="mb-md-0">Get to know the team</h2> </div> <div
class="col-md-6"> <p class="text-muted mb-0"> Lorem ipsum dolor sit
amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident
nemo. </p> </div> </div> <div class="row g-3 g-lg-4"> <div
class="col-sm-6 col-md-3"> <div class="card bg-secondary shadow border-0
p-0"> <figure class="img-scale rounded-top-4 mb-0"> <img
src="/assets/images/avatars/avatar6.jpg" class="card-img-top" alt="Team
Member Image"> </figure> <div class="card-body p-3"> <p
class="card-title mb-2">Rahul Mehta</p> <p class="text-muted
mb-2">Marketing Head</p> <a href="#" class="text-primary
text-decoration-none mb-0"> Learn more <i
class="ri-arrow-right-line"></i> </a> </div> </div>
</div> <div class="col-sm-6 col-md-3"> <div class="card
bg-secondary shadow border-0 p-0 mt-0 mt-md-4"> <figure class="img-scale
rounded-top-4 mb-0"> <img src="/assets/images/avatars/avatar7.jpg"
class="card-img-top" alt="Team Member Image"> </figure> <div
class="card-body p-3"> <p class="card-title mb-2">Nguyen
Minh</p> <p class="text-muted mb-2">Software Engineer</p> <a
href="#" class="text-primary text-decoration-none mb-0"> Learn more <i
class="ri-arrow-right-line"></i> </a> </div> </div>
</div> <div class="col-sm-6 col-md-3"> <div class="card
bg-secondary shadow border-0 p-0"> <figure class="img-scale rounded-top-4
mb-0"> <img src="/assets/images/avatars/avatar3.jpg"
class="card-img-top" alt="Team Member Image"> </figure> <div
class="card-body p-3"> <p class="card-title mb-2">Neha
Gupta</p> <p class="text-muted mb-2">Content Strategist</p> <a
href="#" class="text-primary text-decoration-none mb-0"> Learn more <i
class="ri-arrow-right-line"></i> </a> </div> </div>
</div> <div class="col-sm-6 col-md-3"> <div class="card
bg-secondary shadow border-0 p-0 mt-0 mt-md-4"> <figure class="img-scale
rounded-top-4 mb-0"> <img src="/assets/images/avatars/avatar1.jpg"
class="card-img-top" alt="Team Member Image"> </figure> <div
class="card-body p-3"> <p class="card-title mb-2">Jane
Smith</p> <p class="text-muted mb-2">Product Designer</p> <a
href="#" class="text-primary text-decoration-none mb-0"> Learn more <i
class="ri-arrow-right-line"></i> </a> </div> </div>
</div> </div> </div> </section>
Example 5
Our Team
Driven by people, backed by passion
Lorem ipsum dolor sit amet consect adipis elit. Doloru quibus libero corpor digniss provide nemuam impedit dolor vel sit amet.
<section class="bg-body py-5">
<div class="container">
<div class="text-start text-sm-center">
<h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Our Team</h1>
<h2 class="mb-2">Driven by people, backed by passion</h2>
<p class="text-muted mb-4">
Lorem ipsum dolor sit amet consect adipis elit. Doloru quibus libero
corpor digniss provide nemuam impedit dolor vel sit amet.
</p>
</div>
<div class="swiper ex5Swiper">
<div class="swiper-wrapper mb-5">
<div class="swiper-slide" style="height: auto;">
<figure class="img-grayscale">
<img src="/assets/images/avatars/avatar6.jpg" class="img-fluid rounded-4" alt="Team Member Avatar">
</figure>
<h5 class="mb-2"><a href="#" class="text-decoration-none link-primary">Rahul Mehta</a></h5>
<span class="badge text-bg-secondary text-uppercase border shadow">Marketing Head</span>
</div>
<div class="swiper-slide" style="height: auto;">
<figure class="img-grayscale">
<img src="/assets/images/avatars/avatar1.jpg" class="img-fluid rounded-4" alt="Team Member Avatar">
</figure>
<h5 class="mb-2"><a href="#" class="text-decoration-none link-primary">Jane Smith</a></h5>
<span class="badge text-bg-secondary text-uppercase border shadow">Product Designer</span>
</div>
<div class="swiper-slide" style="height: auto;">
<figure class="img-grayscale">
<img src="/assets/images/avatars/avatar7.jpg" class="img-fluid rounded-4" alt="Team Member Avatar">
</figure>
<h5 class="mb-2"><a href="#" class="text-decoration-none link-primary">Nguyen Minh</a></h5>
<span class="badge text-bg-secondary text-uppercase border shadow">Software Engineer</span>
</div>
<div class="swiper-slide" style="height: auto;">
<figure class="img-grayscale">
<img src="/assets/images/avatars/avatar3.jpg" class="img-fluid rounded-4" alt="Team Member Avatar">
</figure>
<h5 class="mb-2"><a href="#" class="text-decoration-none link-primary">Neha Gupta</a></h5>
<span class="badge text-bg-secondary text-uppercase border shadow">Content Strategist</span>
</div>
<div class="swiper-slide" style="height: auto;">
<figure class="img-grayscale">
<img src="/assets/images/avatars/avatar2.jpg" class="img-fluid rounded-4" alt="Team Member Avatar">
</figure>
<h5 class="mb-2"><a href="#" class="text-decoration-none link-primary">Amara Evans</a></h5>
<span class="badge text-bg-secondary text-uppercase border shadow">Sales Executive</span>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="text-start text-sm-center"> <h1 class="text-primary fw-semibold
text-uppercase fs-5 mb-2">Our Team</h1> <h2 class="mb-2">Driven by
people, backed by passion</h2> <p class="text-muted mb-4"> Lorem ipsum
dolor sit amet consect adipis elit. Doloru quibus libero corpor digniss provide nemuam impedit
dolor vel sit amet. </p> </div> <div class="swiper ex5Swiper">
<div class="swiper-wrapper mb-5"> <div class="swiper-slide"
style="height: auto;"> <figure class="img-grayscale"> <img
src="/assets/images/avatars/avatar6.jpg" class="img-fluid rounded-4"
alt="Team Member Avatar"> </figure> <h5 class="mb-2"><a
href="#" class="text-decoration-none link-primary">Rahul
Mehta</a></h5> <span class="badge text-bg-secondary text-uppercase border
shadow">Marketing Head</span> </div> <div class="swiper-slide"
style="height: auto;"> <figure class="img-grayscale"> <img
src="/assets/images/avatars/avatar1.jpg" class="img-fluid rounded-4"
alt="Team Member Avatar"> </figure> <h5 class="mb-2"><a
href="#" class="text-decoration-none link-primary">Jane
Smith</a></h5> <span class="badge text-bg-secondary text-uppercase border
shadow">Product Designer</span> </div> <div
class="swiper-slide" style="height: auto;"> <figure
class="img-grayscale"> <img src="/assets/images/avatars/avatar7.jpg"
class="img-fluid rounded-4" alt="Team Member Avatar"> </figure>
<h5 class="mb-2"><a href="#" class="text-decoration-none
link-primary">Nguyen Minh</a></h5> <span class="badge
text-bg-secondary text-uppercase border shadow">Software Engineer</span>
</div> <div class="swiper-slide" style="height: auto;">
<figure class="img-grayscale"> <img
src="/assets/images/avatars/avatar3.jpg" class="img-fluid rounded-4"
alt="Team Member Avatar"> </figure> <h5 class="mb-2"><a
href="#" class="text-decoration-none link-primary">Neha
Gupta</a></h5> <span class="badge text-bg-secondary text-uppercase border
shadow">Content Strategist</span> </div> <div
class="swiper-slide" style="height: auto;"> <figure
class="img-grayscale"> <img src="/assets/images/avatars/avatar2.jpg"
class="img-fluid rounded-4" alt="Team Member Avatar"> </figure>
<h5 class="mb-2"><a href="#" class="text-decoration-none
link-primary">Amara Evans</a></h5> <span class="badge
text-bg-secondary text-uppercase border shadow">Sales Executive</span>
</div> </div> <div class="swiper-pagination"></div>
</div> </div> </section>
.swiper-pagination-bullet {
background: var(--bs-primary);
}
.swiper-pagination-bullet-active {
background: var(--bs-primary);
}
.swiper-pagination-bullet { background: var(--bs-primary); } .swiper-pagination-bullet-active {
background: var(--bs-primary); }
document.addEventListener('DOMContentLoaded', () => {
var swiper = new Swiper(".ex5Swiper", {
slidesPerView: 1,
spaceBetween: 20,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
breakpoints: {
576: {
slidesPerView: 2,
spaceBetween: 20,
},
768: {
slidesPerView: 3,
spaceBetween: 20,
}
}
});
});
document.addEventListener('DOMContentLoaded', () => { var swiper = new
Swiper(".ex5Swiper", { slidesPerView: 1, spaceBetween: 20, pagination: { el:
".swiper-pagination", clickable: true, }, autoplay: { delay: 3000,
disableOnInteraction: false, }, breakpoints: { 576: { slidesPerView: 2, spaceBetween: 20, },
768: { slidesPerView: 3, spaceBetween: 20, } } }); });
Example 6
<section class="bg-body py-5">
<div class="container">
<div class="d-flex flex-column flex-md-row align-items-start align-items-md-end justify-content-between gap-3 mb-4">
<div>
<span class="badge fs-6 text-body fw-medium border rounded-pill">Our team</span>
<h1 class="fw-semibold mt-2 mb-0">Get to know the people behind the work</h1>
</div>
<div class="d-flex flex-row gap-2">
<a href="#" class="btn btn-outline-secondary" id="swiper-button-prev"><i class="ri-arrow-left-line"></i></a>
<a href="#" class="btn btn-outline-secondary" id="swiper-button-next"><i class="ri-arrow-right-line"></i></a>
</div>
</div>
<div class="swiper ex6Swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" style="height: auto;">
<div class="card bg-blue-soft border-0 p-0">
<div class="card-body p-3">
<span class="badge text-body bg-blue bg-opacity-10 text-uppercase fw-medium rounded-pill">Marketing Head</span>
<h5 class="fs-2 mt-2"><a href="#" class="text-decoration-none text-body">Rahul Mehta</a></h5>
<p class="text-muted mb-0">Driven professional contributing to growth and innovation.</p>
</div>
<img src="/assets/images/avatars/avatar6.jpg" class="img-fluid rounded-4 w-100" alt="Team Member Photograph">
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card bg-green-soft border-0 p-0">
<div class="card-body p-3">
<span class="badge text-body bg-green bg-opacity-10 text-uppercase fw-medium rounded-pill">Product Designer</span>
<h5 class="fs-2 mt-2"><a href="#" class="text-decoration-none text-body">Jane Smith</a></h5>
<p class="text-muted mb-0">Focused on delivering quality results and team success.</p>
</div>
<img src="/assets/images/avatars/avatar1.jpg" class="img-fluid rounded-4 w-100" alt="Team Member Photograph">
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card bg-yellow-soft border-0 p-0">
<div class="card-body p-3">
<span class="badge text-body bg-yellow bg-opacity-10 text-uppercase fw-medium rounded-pill">Software Engineer</span>
<h5 class="fs-2 mt-2"><a href="#" class="text-decoration-none text-body">Nguyen Minh</a></h5>
<p class="text-muted mb-0">Dedicated team player helping ideas turn into impact.</p>
</div>
<img src="/assets/images/avatars/avatar7.jpg" class="img-fluid rounded-4 w-100" alt="Team Member Photograph">
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card bg-red-soft border-0 p-0">
<div class="card-body p-3">
<span class="badge text-body bg-red bg-opacity-10 text-uppercase fw-medium rounded-pill">Content Strategist</span>
<h5 class="fs-2 mt-2"><a href="#" class="text-decoration-none text-body">Neha Gupta</a></h5>
<p class="text-muted mb-0">Committed to building strong connections and solutions.</p>
</div>
<img src="/assets/images/avatars/avatar3.jpg" class="img-fluid rounded-4 w-100" alt="Team Member Photograph">
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card bg-blue-soft border-0 p-0">
<div class="card-body p-3">
<span class="badge text-body bg-blue bg-opacity-10 text-uppercase fw-medium rounded-pill">Sales Executive</span>
<h5 class="fs-2 mt-2"><a href="#" class="text-decoration-none text-body">Amara Evans</a></h5>
<p class="text-muted mb-0">Motivated individual helping drive progress and consistency.</p>
</div>
<img src="/assets/images/avatars/avatar2.jpg" class="img-fluid rounded-4 w-100" alt="Team Member Photograph">
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card bg-green-soft border-0 p-0">
<div class="card-body p-3">
<span class="badge text-body bg-green bg-opacity-10 text-uppercase fw-medium rounded-pill">Sales Lead</span>
<h5 class="fs-2 mt-2"><a href="#" class="text-decoration-none text-body">Jack Smith</a></h5>
<p class="text-muted mb-0">Adaptable team member strengthening projects and processes.</p>
</div>
<img src="/assets/images/avatars/avatar9.jpg" class="img-fluid rounded-4 w-100" alt="Team Member Photograph">
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="d-flex flex-column flex-md-row align-items-start align-items-md-end
justify-content-between gap-3 mb-4"> <div> <span class="badge fs-6
text-body fw-medium border rounded-pill">Our team</span> <h1
class="fw-semibold mt-2 mb-0">Get to know the people behind the work</h1>
</div> <div class="d-flex flex-row gap-2"> <a href="#"
class="btn btn-outline-secondary" id="swiper-button-prev"><i
class="ri-arrow-left-line"></i></a> <a href="#"
class="btn btn-outline-secondary" id="swiper-button-next"><i
class="ri-arrow-right-line"></i></a> </div> </div> <div
class="swiper ex6Swiper"> <div class="swiper-wrapper"> <div
class="swiper-slide" style="height: auto;"> <div class="card
bg-blue-soft border-0 p-0"> <div class="card-body p-3"> <span
class="badge text-body bg-blue bg-opacity-10 text-uppercase fw-medium
rounded-pill">Marketing Head</span> <h5 class="fs-2 mt-2"><a
href="#" class="text-decoration-none text-body">Rahul
Mehta</a></h5> <p class="text-muted mb-0">Driven professional
contributing to growth and innovation.</p> </div> <img
src="/assets/images/avatars/avatar6.jpg" class="img-fluid rounded-4 w-100"
alt="Team Member Photograph"> </div> </div> <div
class="swiper-slide" style="height: auto;"> <div class="card
bg-green-soft border-0 p-0"> <div class="card-body p-3"> <span
class="badge text-body bg-green bg-opacity-10 text-uppercase fw-medium
rounded-pill">Product Designer</span> <h5 class="fs-2 mt-2"><a
href="#" class="text-decoration-none text-body">Jane
Smith</a></h5> <p class="text-muted mb-0">Focused on delivering
quality results and team success.</p> </div> <img
src="/assets/images/avatars/avatar1.jpg" class="img-fluid rounded-4 w-100"
alt="Team Member Photograph"> </div> </div> <div
class="swiper-slide" style="height: auto;"> <div class="card
bg-yellow-soft border-0 p-0"> <div class="card-body p-3"> <span
class="badge text-body bg-yellow bg-opacity-10 text-uppercase fw-medium
rounded-pill">Software Engineer</span> <h5 class="fs-2 mt-2"><a
href="#" class="text-decoration-none text-body">Nguyen
Minh</a></h5> <p class="text-muted mb-0">Dedicated team player
helping ideas turn into impact.</p> </div> <img
src="/assets/images/avatars/avatar7.jpg" class="img-fluid rounded-4 w-100"
alt="Team Member Photograph"> </div> </div> <div
class="swiper-slide" style="height: auto;"> <div class="card
bg-red-soft border-0 p-0"> <div class="card-body p-3"> <span
class="badge text-body bg-red bg-opacity-10 text-uppercase fw-medium
rounded-pill">Content Strategist</span> <h5 class="fs-2
mt-2"><a href="#" class="text-decoration-none text-body">Neha
Gupta</a></h5> <p class="text-muted mb-0">Committed to building
strong connections and solutions.</p> </div> <img
src="/assets/images/avatars/avatar3.jpg" class="img-fluid rounded-4 w-100"
alt="Team Member Photograph"> </div> </div> <div
class="swiper-slide" style="height: auto;"> <div class="card
bg-blue-soft border-0 p-0"> <div class="card-body p-3"> <span
class="badge text-body bg-blue bg-opacity-10 text-uppercase fw-medium
rounded-pill">Sales Executive</span> <h5 class="fs-2 mt-2"><a
href="#" class="text-decoration-none text-body">Amara
Evans</a></h5> <p class="text-muted mb-0">Motivated individual
helping drive progress and consistency.</p> </div> <img
src="/assets/images/avatars/avatar2.jpg" class="img-fluid rounded-4 w-100"
alt="Team Member Photograph"> </div> </div> <div
class="swiper-slide" style="height: auto;"> <div class="card
bg-green-soft border-0 p-0"> <div class="card-body p-3"> <span
class="badge text-body bg-green bg-opacity-10 text-uppercase fw-medium
rounded-pill">Sales Lead</span> <h5 class="fs-2 mt-2"><a
href="#" class="text-decoration-none text-body">Jack
Smith</a></h5> <p class="text-muted mb-0">Adaptable team member
strengthening projects and processes.</p> </div> <img
src="/assets/images/avatars/avatar9.jpg" class="img-fluid rounded-4 w-100"
alt="Team Member Photograph"> </div> </div> </div> </div>
</div> </section>
document.addEventListener('DOMContentLoaded', () => {
var swiper = new Swiper(".ex6Swiper", {
slidesPerView: 1,
spaceBetween: 24,
navigation: {
nextEl: "#swiper-button-next",
prevEl: "#swiper-button-prev",
},
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
breakpoints: {
576: {
slidesPerView: 2,
spaceBetween: 24,
},
768: {
slidesPerView: 3,
spaceBetween: 24,
},
992: {
slidesPerView: 4,
spaceBetween: 24,
}
}
});
});
document.addEventListener('DOMContentLoaded', () => { var swiper = new
Swiper(".ex6Swiper", { slidesPerView: 1, spaceBetween: 24, navigation: { nextEl:
"#swiper-button-next", prevEl: "#swiper-button-prev", }, autoplay: { delay:
2500, disableOnInteraction: false, }, breakpoints: { 576: { slidesPerView: 2, spaceBetween: 24,
}, 768: { slidesPerView: 3, spaceBetween: 24, }, 992: { slidesPerView: 4, spaceBetween: 24, } }
}); });
Example 7
Our team
Get to know the people behind the work
A team of dedicated experts collaborating closely to deliver excellence through innovation and teamwork.
<section class="bg-body py-5">
<div class="container">
<div class="text-center">
<span class="badge fs-6 text-body fw-medium border rounded-pill">Our team</span>
<h1 class="fw-semibold mt-2">Get to know the people behind the work</h1>
<p class="fs-5 text-muted mb-5">A team of dedicated experts collaborating closely to deliver excellence through innovation and teamwork.</p>
</div>
<div class="row g-4">
<div class="col-md-6 col-xl-3">
<div class="position-relative overflow-hidden">
<div class="pb-4">
<img src="/assets/images/avatars/avatar1.jpg" class="img-fluid w-100" style="border-radius: 3rem var(--bs-border-radius-lg) var(--bs-border-radius-lg) var(--bs-border-radius-lg);" alt="Jane Smith">
</div>
<a href="#" class="text-decoration-none">
<div class="bg-blue-soft border border-blue-soft rounded position-absolute bottom-0 start-50 translate-middle-x w-75 p-3">
<div class="d-flex justify-content-between align-items-center">
<div>
<h5 class="fs-4 text-body mb-1">Jane Smith</h5>
<p class="text-muted mb-0">Product Designer</p>
</div>
<i class="ri-arrow-right-s-line fs-4"></i>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="position-relative overflow-hidden">
<div class="pb-4">
<img src="/assets/images/avatars/avatar7.jpg" class="img-fluid w-100" style="border-radius: var(--bs-border-radius-lg) 3rem var(--bs-border-radius-lg) var(--bs-border-radius-lg);" alt="Nguyen Minh">
</div>
<a href="#" class="text-decoration-none">
<div class="bg-green-soft border border-green-soft rounded position-absolute bottom-0 start-50 translate-middle-x w-75 p-3">
<div class="d-flex justify-content-between align-items-center">
<div>
<h5 class="fs-4 text-body mb-1">Nguyen Minh</h5>
<p class="text-muted mb-0">Software Engineer</p>
</div>
<i class="ri-arrow-right-s-line fs-4"></i>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="position-relative overflow-hidden">
<div class="pb-4">
<img src="/assets/images/avatars/avatar3.jpg" class="img-fluid w-100" style="border-radius: 3rem var(--bs-border-radius-lg) var(--bs-border-radius-lg) var(--bs-border-radius-lg);" alt="Neha Gupta">
</div>
<a href="#" class="text-decoration-none">
<div class="bg-yellow-soft border border-yellow-soft rounded position-absolute bottom-0 start-50 translate-middle-x w-75 p-3">
<div class="d-flex justify-content-between align-items-center">
<div>
<h5 class="fs-4 text-body mb-1">Neha Gupta</h5>
<p class="text-muted mb-0">Content Strategist</p>
</div>
<i class="ri-arrow-right-s-line fs-4"></i>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="position-relative overflow-hidden">
<div class="pb-4">
<img src="/assets/images/avatars/avatar2.jpg" class="img-fluid w-100" style="border-radius: var(--bs-border-radius-lg) 3rem var(--bs-border-radius-lg) var(--bs-border-radius-lg);" alt="Amara Evans">
</div>
<a href="#" class="text-decoration-none">
<div class="bg-red-soft border border-red-soft rounded position-absolute bottom-0 start-50 translate-middle-x w-75 p-3">
<div class="d-flex justify-content-between align-items-center">
<div>
<h5 class="fs-4 text-body mb-1">Amara Evans</h5>
<p class="text-muted mb-0">Sales Executive</p>
</div>
<i class="ri-arrow-right-s-line fs-4"></i>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="text-center"> <span class="badge fs-6 text-body fw-medium border
rounded-pill">Our team</span> <h1 class="fw-semibold mt-2">Get to
know the people behind the work</h1> <p class="fs-5 text-muted mb-5">A
team of dedicated experts collaborating closely to deliver excellence through innovation and
teamwork.</p> </div> <div class="row g-4"> <div
class="col-md-6 col-xl-3"> <div class="position-relative
overflow-hidden"> <div class="pb-4"> <img
src="/assets/images/avatars/avatar1.jpg" class="img-fluid w-100"
style="border-radius: 3rem var(--bs-border-radius-lg) var(--bs-border-radius-lg)
var(--bs-border-radius-lg);" alt="Jane Smith"> </div> <a
href="#" class="text-decoration-none"> <div class="bg-blue-soft
border border-blue-soft rounded position-absolute bottom-0 start-50 translate-middle-x w-75
p-3"> <div class="d-flex justify-content-between align-items-center">
<div> <h5 class="fs-4 text-body mb-1">Jane Smith</h5> <p
class="text-muted mb-0">Product Designer</p> </div> <i
class="ri-arrow-right-s-line fs-4"></i> </div> </div> </a>
</div> </div> <div class="col-md-6 col-xl-3"> <div
class="position-relative overflow-hidden"> <div class="pb-4">
<img src="/assets/images/avatars/avatar7.jpg" class="img-fluid w-100"
style="border-radius: var(--bs-border-radius-lg) 3rem var(--bs-border-radius-lg)
var(--bs-border-radius-lg);" alt="Nguyen Minh"> </div> <a
href="#" class="text-decoration-none"> <div class="bg-green-soft
border border-green-soft rounded position-absolute bottom-0 start-50 translate-middle-x w-75
p-3"> <div class="d-flex justify-content-between align-items-center">
<div> <h5 class="fs-4 text-body mb-1">Nguyen Minh</h5> <p
class="text-muted mb-0">Software Engineer</p> </div> <i
class="ri-arrow-right-s-line fs-4"></i> </div> </div> </a>
</div> </div> <div class="col-md-6 col-xl-3"> <div
class="position-relative overflow-hidden"> <div class="pb-4">
<img src="/assets/images/avatars/avatar3.jpg" class="img-fluid w-100"
style="border-radius: 3rem var(--bs-border-radius-lg) var(--bs-border-radius-lg)
var(--bs-border-radius-lg);" alt="Neha Gupta"> </div> <a
href="#" class="text-decoration-none"> <div class="bg-yellow-soft
border border-yellow-soft rounded position-absolute bottom-0 start-50 translate-middle-x w-75
p-3"> <div class="d-flex justify-content-between align-items-center">
<div> <h5 class="fs-4 text-body mb-1">Neha Gupta</h5> <p
class="text-muted mb-0">Content Strategist</p> </div> <i
class="ri-arrow-right-s-line fs-4"></i> </div> </div> </a>
</div> </div> <div class="col-md-6 col-xl-3"> <div
class="position-relative overflow-hidden"> <div class="pb-4">
<img src="/assets/images/avatars/avatar2.jpg" class="img-fluid w-100"
style="border-radius: var(--bs-border-radius-lg) 3rem var(--bs-border-radius-lg)
var(--bs-border-radius-lg);" alt="Amara Evans"> </div> <a
href="#" class="text-decoration-none"> <div class="bg-red-soft
border border-red-soft rounded position-absolute bottom-0 start-50 translate-middle-x w-75
p-3"> <div class="d-flex justify-content-between align-items-center">
<div> <h5 class="fs-4 text-body mb-1">Amara Evans</h5> <p
class="text-muted mb-0">Sales Executive</p> </div> <i
class="ri-arrow-right-s-line fs-4"></i> </div> </div> </a>
</div> </div> </div> </div> </section>
Example 8
Our team
Join Us
Get to know the people behind the work
Jane Smith
Product Designer
Nguyen Minh
Software Engineer
Neha Gupta
Content Strategist
Amara Evans
Sales Executive
<section class="bg-body py-5">
<div class="container">
<div class="d-flex flex-column flex-md-row align-items-start align-items-md-end justify-content-between gap-3 mb-5">
<div>
<span class="badge fs-6 text-body fw-medium border rounded-pill">Our team</span>
<h1 class="fw-semibold mt-2 mb-0">Get to know the people behind the work</h1>
</div>
<a href="#" class="btn btn-lg btn-outline-secondary text-nowrap">Join Us <i class="ri-arrow-right-line ms-1"></i></a>
</div>
<div class="row g-4">
<div class="col-sm-6 col-lg-3">
<div class="card bg-blue-soft border-0 text-center">
<div class="position-relative">
<div class="bg-body rounded-circle mx-auto" style="width: 108px; height: 108px; transform: translateY(-54px); margin-bottom: -54px; display: flex; align-items: center; justify-content: center;">
<img src="/assets/images/avatars/avatar1.jpg" alt="Team Member Photograph" class="rounded-circle" style="width: 96px; height: 96px; object-fit: cover;">
</div>
</div>
<h5 class="fs-4 mt-3 mb-1">Jane Smith</h5>
<p class="text-muted mb-0">Product Designer</p>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card bg-green-soft border-0 text-center">
<div class="position-relative">
<div class="bg-body rounded-circle mx-auto" style="width: 108px; height: 108px; transform: translateY(-54px); margin-bottom: -54px; display: flex; align-items: center; justify-content: center;">
<img src="/assets/images/avatars/avatar7.jpg" alt="Team Member Photograph" class="rounded-circle" style="width: 96px; height: 96px; object-fit: cover;">
</div>
</div>
<h5 class="fs-4 mt-3 mb-1">Nguyen Minh</h5>
<p class="text-muted mb-0">Software Engineer</p>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card bg-yellow-soft border-0 text-center">
<div class="position-relative">
<div class="bg-body rounded-circle mx-auto" style="width: 108px; height: 108px; transform: translateY(-54px); margin-bottom: -54px; display: flex; align-items: center; justify-content: center;">
<img src="/assets/images/avatars/avatar3.jpg" alt="Team Member Photograph" class="rounded-circle" style="width: 96px; height: 96px; object-fit: cover;">
</div>
</div>
<h5 class="fs-4 mt-3 mb-1">Neha Gupta</h5>
<p class="text-muted mb-0">Content Strategist</p>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card bg-red-soft border-0 text-center">
<div class="position-relative">
<div class="bg-body rounded-circle mx-auto" style="width: 108px; height: 108px; transform: translateY(-54px); margin-bottom: -54px; display: flex; align-items: center; justify-content: center;">
<img src="/assets/images/avatars/avatar2.jpg" alt="Team Member Photograph" class="rounded-circle" style="width: 96px; height: 96px; object-fit: cover;">
</div>
</div>
<h5 class="fs-4 mt-3 mb-1">Amara Evans</h5>
<p class="text-muted mb-0">Sales Executive</p>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="d-flex flex-column flex-md-row align-items-start align-items-md-end
justify-content-between gap-3 mb-5"> <div> <span class="badge fs-6
text-body fw-medium border rounded-pill">Our team</span> <h1
class="fw-semibold mt-2 mb-0">Get to know the people behind the work</h1>
</div> <a href="#" class="btn btn-lg btn-outline-secondary
text-nowrap">Join Us <i class="ri-arrow-right-line
ms-1"></i></a> </div> <div class="row g-4"> <div
class="col-sm-6 col-lg-3"> <div class="card bg-blue-soft border-0
text-center"> <div class="position-relative"> <div
class="bg-body rounded-circle mx-auto" style="width: 108px; height: 108px;
transform: translateY(-54px); margin-bottom: -54px; display: flex; align-items: center;
justify-content: center;"> <img src="/assets/images/avatars/avatar1.jpg"
alt="Team Member Photograph" class="rounded-circle" style="width: 96px;
height: 96px; object-fit: cover;"> </div> </div> <h5 class="fs-4
mt-3 mb-1">Jane Smith</h5> <p class="text-muted mb-0">Product
Designer</p> </div> </div> <div class="col-sm-6 col-lg-3">
<div class="card bg-green-soft border-0 text-center"> <div
class="position-relative"> <div class="bg-body rounded-circle mx-auto"
style="width: 108px; height: 108px; transform: translateY(-54px); margin-bottom: -54px;
display: flex; align-items: center; justify-content: center;"> <img
src="/assets/images/avatars/avatar7.jpg" alt="Team Member Photograph"
class="rounded-circle" style="width: 96px; height: 96px; object-fit:
cover;"> </div> </div> <h5 class="fs-4 mt-3 mb-1">Nguyen
Minh</h5> <p class="text-muted mb-0">Software Engineer</p>
</div> </div> <div class="col-sm-6 col-lg-3"> <div
class="card bg-yellow-soft border-0 text-center"> <div
class="position-relative"> <div class="bg-body rounded-circle mx-auto"
style="width: 108px; height: 108px; transform: translateY(-54px); margin-bottom: -54px;
display: flex; align-items: center; justify-content: center;"> <img
src="/assets/images/avatars/avatar3.jpg" alt="Team Member Photograph"
class="rounded-circle" style="width: 96px; height: 96px; object-fit:
cover;"> </div> </div> <h5 class="fs-4 mt-3 mb-1">Neha
Gupta</h5> <p class="text-muted mb-0">Content Strategist</p>
</div> </div> <div class="col-sm-6 col-lg-3"> <div
class="card bg-red-soft border-0 text-center"> <div
class="position-relative"> <div class="bg-body rounded-circle mx-auto"
style="width: 108px; height: 108px; transform: translateY(-54px); margin-bottom: -54px;
display: flex; align-items: center; justify-content: center;"> <img
src="/assets/images/avatars/avatar2.jpg" alt="Team Member Photograph"
class="rounded-circle" style="width: 96px; height: 96px; object-fit:
cover;"> </div> </div> <h5 class="fs-4 mt-3 mb-1">Amara
Evans</h5> <p class="text-muted mb-0">Sales Executive</p>
</div> </div> </div> </div> </section>
Example 9
Our team
Get to know the people behind the work
A team of dedicated experts collaborating closely to deliver excellence through innovation and teamwork.
Join Us
<section class="bg-body py-5">
<div class="container">
<div class="row align-items-center g-4">
<div class="col-lg-6">
<span class="badge fs-6 text-body fw-medium border rounded-pill">Our team</span>
<h1 class="fw-semibold mt-2">Get to know the people behind the work</h1>
<p class="fs-5 text-muted">A team of dedicated experts collaborating closely to deliver excellence through innovation and teamwork.</p>
<a href="#" class="btn btn-lg btn-primary">Join Us <i class="ri-arrow-right-line ms-1"></i></a>
</div>
<div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-1">
<div class="team-photos d-flex align-items-center border-top border-bottom">
<div class="photo-column column-left me-3">
<div class="photo-track">
<!-- Original Set of Photos -->
<figure class="photo"><img src="/assets/images/avatars/avatar1.jpg" alt="Team Member Photograph"></figure>
<figure class="photo"><img src="/assets/images/avatars/avatar2.jpg" alt="Team Member Photograph"></figure>
<figure class="photo"><img src="/assets/images/avatars/avatar3.jpg" alt="Team Member Photograph"></figure>
<figure class="photo"><img src="/assets/images/avatars/avatar5.jpg" alt="Team Member Photograph"></figure>
<figure class="photo"><img src="/assets/images/avatars/avatar7.jpg" alt="Team Member Photograph"></figure>
<!-- Duplicated Set for Seamless Loop -->
<figure class="photo"><img src="/assets/images/avatars/avatar1.jpg" alt="Team Member Photograph"></figure>
<figure class="photo"><img src="/assets/images/avatars/avatar2.jpg" alt="Team Member Photograph"></figure>
<figure class="photo"><img src="/assets/images/avatars/avatar3.jpg" alt="Team Member Photograph"></figure>
<figure class="photo"><img src="/assets/images/avatars/avatar5.jpg" alt="Team Member Photograph"></figure>
<figure class="photo"><img src="/assets/images/avatars/avatar7.jpg" alt="Team Member Photograph"></figure>
</div>
</div>
<div class="photo-column column-right ms-3">
<div class="photo-track">
<!-- Original Set of Photos -->
<figure class="photo"><img src="/assets/images/avatars/avatar4.jpg" alt="Team Member Photograph"></figure>
<figure class="photo"><img src="/assets/images/avatars/avatar6.jpg" alt="Team Member Photograph"></figure>
<figure class="photo"><img src="/assets/images/avatars/avatar8.jpg" alt="Team Member Photograph"></figure>
<figure class="photo"><img src="/assets/images/avatars/avatar10.jpg" alt="Team Member Photograph"></figure>
<figure class="photo"><img src="/assets/images/avatars/avatar7.jpg" alt="Team Member Photograph"></figure>
<!-- Duplicated Set for Seamless Loop -->
<figure class="photo"><img src="/assets/images/avatars/avatar4.jpg" alt="Team Member Photograph"></figure>
<figure class="photo"><img src="/assets/images/avatars/avatar6.jpg" alt="Team Member Photograph"></figure>
<figure class="photo"><img src="/assets/images/avatars/avatar8.jpg" alt="Team Member Photograph"></figure>
<figure class="photo"><img src="/assets/images/avatars/avatar10.jpg" alt="Team Member Photograph"></figure>
<figure class="photo"><img src="/assets/images/avatars/avatar7.jpg" alt="Team Member Photograph"></figure>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row align-items-center g-4"> <div class="col-lg-6"> <span
class="badge fs-6 text-body fw-medium border rounded-pill">Our team</span>
<h1 class="fw-semibold mt-2">Get to know the people behind the work</h1>
<p class="fs-5 text-muted">A team of dedicated experts collaborating closely to
deliver excellence through innovation and teamwork.</p> <a href="#"
class="btn btn-lg btn-primary">Join Us <i class="ri-arrow-right-line
ms-1"></i></a> </div> <div class="col-sm-6 offset-sm-3
col-lg-4 offset-lg-1"> <div class="team-photos d-flex align-items-center
border-top border-bottom"> <div class="photo-column column-left me-3">
<div class="photo-track"> <!-- Original Set of Photos --> <figure
class="photo"><img src="/assets/images/avatars/avatar1.jpg"
alt="Team Member Photograph"></figure> <figure
class="photo"><img src="/assets/images/avatars/avatar2.jpg"
alt="Team Member Photograph"></figure> <figure
class="photo"><img src="/assets/images/avatars/avatar3.jpg"
alt="Team Member Photograph"></figure> <figure
class="photo"><img src="/assets/images/avatars/avatar5.jpg"
alt="Team Member Photograph"></figure> <figure
class="photo"><img src="/assets/images/avatars/avatar7.jpg"
alt="Team Member Photograph"></figure> <!-- Duplicated Set for Seamless
Loop --> <figure class="photo"><img
src="/assets/images/avatars/avatar1.jpg" alt="Team Member
Photograph"></figure> <figure class="photo"><img
src="/assets/images/avatars/avatar2.jpg" alt="Team Member
Photograph"></figure> <figure class="photo"><img
src="/assets/images/avatars/avatar3.jpg" alt="Team Member
Photograph"></figure> <figure class="photo"><img
src="/assets/images/avatars/avatar5.jpg" alt="Team Member
Photograph"></figure> <figure class="photo"><img
src="/assets/images/avatars/avatar7.jpg" alt="Team Member
Photograph"></figure> </div> </div> <div class="photo-column
column-right ms-3"> <div class="photo-track"> <!-- Original Set of
Photos --> <figure class="photo"><img
src="/assets/images/avatars/avatar4.jpg" alt="Team Member
Photograph"></figure> <figure class="photo"><img
src="/assets/images/avatars/avatar6.jpg" alt="Team Member
Photograph"></figure> <figure class="photo"><img
src="/assets/images/avatars/avatar8.jpg" alt="Team Member
Photograph"></figure> <figure class="photo"><img
src="/assets/images/avatars/avatar10.jpg" alt="Team Member
Photograph"></figure> <figure class="photo"><img
src="/assets/images/avatars/avatar7.jpg" alt="Team Member
Photograph"></figure> <!-- Duplicated Set for Seamless Loop --> <figure
class="photo"><img src="/assets/images/avatars/avatar4.jpg"
alt="Team Member Photograph"></figure> <figure
class="photo"><img src="/assets/images/avatars/avatar6.jpg"
alt="Team Member Photograph"></figure> <figure
class="photo"><img src="/assets/images/avatars/avatar8.jpg"
alt="Team Member Photograph"></figure> <figure
class="photo"><img src="/assets/images/avatars/avatar10.jpg"
alt="Team Member Photograph"></figure> <figure
class="photo"><img src="/assets/images/avatars/avatar7.jpg"
alt="Team Member Photograph"></figure> </div> </div> </div>
</div> </div> </div> </section>
.photo-column {
width: 50%;
max-height: 400px;
overflow: hidden;
}
.photo-track {
display: flex;
flex-direction: column;
gap: 1rem;
}
.photo {
height: 160px;
border-radius: 12px;
overflow: hidden;
}
.photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.photo-track {
transform: translateY(0);
}
.column-left .photo-track {
animation: scroll-down 20s linear infinite;
will-change: transform;
}
.column-right .photo-track {
animation: scroll-down 20s linear infinite reverse;
will-change: transform;
}
@keyframes scroll-up {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
} /* move up by one set height */
}
@keyframes scroll-down {
0% {
transform: translateY(-50%);
}
100% {
transform: translateY(0);
} /* move down by one set height */
}
@media (max-width: 991.98px) {
.team-photos {
flex-direction: row;
}
.photo {
height: 140px;
}
}
@media (max-width: 575.98px) {
.team-photos {
flex-direction: row;
}
.photo-column {
width: 50%;
max-height: 300px;
}
.photo {
height: 110px;
}
}
.photo-column { width: 50%; max-height: 400px; overflow: hidden; } .photo-track { display: flex;
flex-direction: column; gap: 1rem; } .photo { height: 160px; border-radius: 12px; overflow:
hidden; } .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-track { transform: translateY(0); } .column-left .photo-track { animation: scroll-down
20s linear infinite; will-change: transform; } .column-right .photo-track { animation:
scroll-down 20s linear infinite reverse; will-change: transform; } @keyframes scroll-up { 0% {
transform: translateY(0); } 100% { transform: translateY(-50%); } /* move up by one set height
*/ } @keyframes scroll-down { 0% { transform: translateY(-50%); } 100% { transform:
translateY(0); } /* move down by one set height */ } @media (max-width: 991.98px) { .team-photos
{ flex-direction: row; } .photo { height: 140px; } } @media (max-width: 575.98px) { .team-photos
{ flex-direction: row; } .photo-column { width: 50%; max-height: 300px; } .photo { height:
110px; } }
Example 10
Our team
Get to know the people behind the work
A team of dedicated experts collaborating closely to deliver excellence through innovation and teamwork.
Learn More
Jane Smith
Product Designer
Nguyen Minh
Software Engineer
Neha Gupta
Content Strategist
Amara Evans
Sales Executive
Jack Smith
Sales Lead
Jane Smith
Product Designer
Nguyen Minh
Software Engineer
Neha Gupta
Content Strategist
Amara Evans
Sales Executive
Jack Smith
Sales Lead
<section class="bg-body py-5">
<div class="container">
<div class="text-center mb-5">
<span class="badge fs-6 text-body fw-medium border rounded-pill">Our team</span>
<h1 class="fw-semibold mt-2">Get to know the people behind the work</h1>
<p class="fs-5 text-muted">A team of dedicated experts collaborating closely to deliver excellence through innovation and teamwork.</p>
<a href="#" class="btn btn-lg btn-primary">Learn More <i class="ri-arrow-right-line ms-1"></i></a>
</div>
</div>
<!-- Marquee Section -->
<section class="marquee-wrapper py-3">
<div class="container-fluid overflow-hidden">
<div class="marquee d-flex">
<!-- Original + duplicate content inside -->
<div class="marquee-track d-flex">
<!-- Original content -->
<div class="marquee-content me-2">
<div class="bg-blue-soft rounded-pill d-flex flex-row align-items-center gap-3 p-3">
<div class="bg-body rounded-circle shadow mx-auto" style="width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;">
<img src="/assets/images/avatars/avatar1.jpg" alt="Team Member Photograph" class="rounded-circle" style="width: 64px; height: 64px; object-fit: cover;">
</div>
<div>
<h5 class="mb-1">Jane Smith</h5>
<p class="text-muted mb-0">Product Designer</p>
</div>
</div>
</div>
<div class="marquee-content me-2">
<div class="bg-green-soft rounded-pill d-flex flex-row align-items-center gap-3 p-3">
<div class="bg-body rounded-circle shadow mx-auto" style="width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;">
<img src="/assets/images/avatars/avatar7.jpg" alt="Team Member Photograph" class="rounded-circle" style="width: 64px; height: 64px; object-fit: cover;">
</div>
<div>
<h5 class="mb-1">Nguyen Minh</h5>
<p class="text-muted mb-0">Software Engineer</p>
</div>
</div>
</div>
<div class="marquee-content me-2">
<div class="bg-yellow-soft rounded-pill d-flex flex-row align-items-center gap-3 p-3">
<div class="bg-body rounded-circle shadow mx-auto" style="width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;">
<img src="/assets/images/avatars/avatar3.jpg" alt="Team Member Photograph" class="rounded-circle" style="width: 64px; height: 64px; object-fit: cover;">
</div>
<div>
<h5 class="mb-1">Neha Gupta</h5>
<p class="text-muted mb-0">Content Strategist</p>
</div>
</div>
</div>
<div class="marquee-content me-2">
<div class="bg-red-soft rounded-pill d-flex flex-row align-items-center gap-3 p-3">
<div class="bg-body rounded-circle shadow mx-auto" style="width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;">
<img src="/assets/images/avatars/avatar2.jpg" alt="Team Member Photograph" class="rounded-circle" style="width: 64px; height: 64px; object-fit: cover;">
</div>
<div>
<h5 class="mb-1">Amara Evans</h5>
<p class="text-muted mb-0">Sales Executive</p>
</div>
</div>
</div>
<div class="marquee-content me-2">
<div class="bg-green-soft rounded-pill d-flex flex-row align-items-center gap-3 p-3">
<div class="bg-body rounded-circle shadow mx-auto" style="width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;">
<img src="/assets/images/avatars/avatar9.jpg" alt="Team Member Photograph" class="rounded-circle" style="width: 64px; height: 64px; object-fit: cover;">
</div>
<div>
<h5 class="mb-1">Jack Smith</h5>
<p class="text-muted mb-0">Sales Lead</p>
</div>
</div>
</div>
<!-- Duplicate content for seamless loop -->
<div class="marquee-content me-2">
<div class="bg-blue-soft rounded-pill d-flex flex-row align-items-center gap-3 p-3">
<div class="bg-body rounded-circle shadow mx-auto" style="width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;">
<img src="/assets/images/avatars/avatar1.jpg" alt="Team Member Photograph" class="rounded-circle" style="width: 64px; height: 64px; object-fit: cover;">
</div>
<div>
<h5 class="mb-1">Jane Smith</h5>
<p class="text-muted mb-0">Product Designer</p>
</div>
</div>
</div>
<div class="marquee-content me-2">
<div class="bg-green-soft rounded-pill d-flex flex-row align-items-center gap-3 p-3">
<div class="bg-body rounded-circle shadow mx-auto" style="width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;">
<img src="/assets/images/avatars/avatar7.jpg" alt="Team Member Photograph" class="rounded-circle" style="width: 64px; height: 64px; object-fit: cover;">
</div>
<div>
<h5 class="mb-1">Nguyen Minh</h5>
<p class="text-muted mb-0">Software Engineer</p>
</div>
</div>
</div>
<div class="marquee-content me-2">
<div class="bg-yellow-soft rounded-pill d-flex flex-row align-items-center gap-3 p-3">
<div class="bg-body rounded-circle shadow mx-auto" style="width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;">
<img src="/assets/images/avatars/avatar3.jpg" alt="Team Member Photograph" class="rounded-circle" style="width: 64px; height: 64px; object-fit: cover;">
</div>
<div>
<h5 class="mb-1">Neha Gupta</h5>
<p class="text-muted mb-0">Content Strategist</p>
</div>
</div>
</div>
<div class="marquee-content me-2">
<div class="bg-red-soft rounded-pill d-flex flex-row align-items-center gap-3 p-3">
<div class="bg-body rounded-circle shadow mx-auto" style="width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;">
<img src="/assets/images/avatars/avatar2.jpg" alt="Team Member Photograph" class="rounded-circle" style="width: 64px; height: 64px; object-fit: cover;">
</div>
<div>
<h5 class="mb-1">Amara Evans</h5>
<p class="text-muted mb-0">Sales Executive</p>
</div>
</div>
</div>
<div class="marquee-content me-2">
<div class="bg-green-soft rounded-pill d-flex flex-row align-items-center gap-3 p-3">
<div class="bg-body rounded-circle shadow mx-auto" style="width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;">
<img src="/assets/images/avatars/avatar9.jpg" alt="Team Member Photograph" class="rounded-circle" style="width: 64px; height: 64px; object-fit: cover;">
</div>
<div>
<h5 class="mb-1">Jack Smith</h5>
<p class="text-muted mb-0">Sales Lead</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="text-center mb-5"> <span class="badge fs-6 text-body fw-medium
border rounded-pill">Our team</span> <h1 class="fw-semibold
mt-2">Get to know the people behind the work</h1> <p class="fs-5
text-muted">A team of dedicated experts collaborating closely to deliver excellence
through innovation and teamwork.</p> <a href="#" class="btn btn-lg
btn-primary">Learn More <i class="ri-arrow-right-line
ms-1"></i></a> </div> </div> <!-- Marquee Section -->
<section class="marquee-wrapper py-3"> <div class="container-fluid
overflow-hidden"> <div class="marquee d-flex"> <!-- Original +
duplicate content inside --> <div class="marquee-track d-flex"> <!--
Original content --> <div class="marquee-content me-2"> <div
class="bg-blue-soft rounded-pill d-flex flex-row align-items-center gap-3 p-3">
<div class="bg-body rounded-circle shadow mx-auto" style="width: 70px; height:
70px; display: flex; align-items: center; justify-content: center;"> <img
src="/assets/images/avatars/avatar1.jpg" alt="Team Member Photograph"
class="rounded-circle" style="width: 64px; height: 64px; object-fit:
cover;"> </div> <div> <h5 class="mb-1">Jane Smith</h5>
<p class="text-muted mb-0">Product Designer</p> </div> </div>
</div> <div class="marquee-content me-2"> <div
class="bg-green-soft rounded-pill d-flex flex-row align-items-center gap-3 p-3">
<div class="bg-body rounded-circle shadow mx-auto" style="width: 70px; height:
70px; display: flex; align-items: center; justify-content: center;"> <img
src="/assets/images/avatars/avatar7.jpg" alt="Team Member Photograph"
class="rounded-circle" style="width: 64px; height: 64px; object-fit:
cover;"> </div> <div> <h5 class="mb-1">Nguyen
Minh</h5> <p class="text-muted mb-0">Software Engineer</p>
</div> </div> </div> <div class="marquee-content me-2">
<div class="bg-yellow-soft rounded-pill d-flex flex-row align-items-center gap-3
p-3"> <div class="bg-body rounded-circle shadow mx-auto" style="width:
70px; height: 70px; display: flex; align-items: center; justify-content: center;">
<img src="/assets/images/avatars/avatar3.jpg" alt="Team Member
Photograph" class="rounded-circle" style="width: 64px; height: 64px;
object-fit: cover;"> </div> <div> <h5 class="mb-1">Neha
Gupta</h5> <p class="text-muted mb-0">Content Strategist</p>
</div> </div> </div> <div class="marquee-content me-2">
<div class="bg-red-soft rounded-pill d-flex flex-row align-items-center gap-3
p-3"> <div class="bg-body rounded-circle shadow mx-auto" style="width:
70px; height: 70px; display: flex; align-items: center; justify-content: center;">
<img src="/assets/images/avatars/avatar2.jpg" alt="Team Member
Photograph" class="rounded-circle" style="width: 64px; height: 64px;
object-fit: cover;"> </div> <div> <h5 class="mb-1">Amara
Evans</h5> <p class="text-muted mb-0">Sales Executive</p>
</div> </div> </div> <div class="marquee-content me-2">
<div class="bg-green-soft rounded-pill d-flex flex-row align-items-center gap-3
p-3"> <div class="bg-body rounded-circle shadow mx-auto" style="width:
70px; height: 70px; display: flex; align-items: center; justify-content: center;">
<img src="/assets/images/avatars/avatar9.jpg" alt="Team Member
Photograph" class="rounded-circle" style="width: 64px; height: 64px;
object-fit: cover;"> </div> <div> <h5 class="mb-1">Jack
Smith</h5> <p class="text-muted mb-0">Sales Lead</p> </div>
</div> </div> <!-- Duplicate content for seamless loop --> <div
class="marquee-content me-2"> <div class="bg-blue-soft rounded-pill d-flex
flex-row align-items-center gap-3 p-3"> <div class="bg-body rounded-circle
shadow mx-auto" style="width: 70px; height: 70px; display: flex; align-items: center;
justify-content: center;"> <img src="/assets/images/avatars/avatar1.jpg"
alt="Team Member Photograph" class="rounded-circle" style="width: 64px;
height: 64px; object-fit: cover;"> </div> <div> <h5
class="mb-1">Jane Smith</h5> <p class="text-muted
mb-0">Product Designer</p> </div> </div> </div> <div
class="marquee-content me-2"> <div class="bg-green-soft rounded-pill d-flex
flex-row align-items-center gap-3 p-3"> <div class="bg-body rounded-circle
shadow mx-auto" style="width: 70px; height: 70px; display: flex; align-items: center;
justify-content: center;"> <img src="/assets/images/avatars/avatar7.jpg"
alt="Team Member Photograph" class="rounded-circle" style="width: 64px;
height: 64px; object-fit: cover;"> </div> <div> <h5
class="mb-1">Nguyen Minh</h5> <p class="text-muted
mb-0">Software Engineer</p> </div> </div> </div> <div
class="marquee-content me-2"> <div class="bg-yellow-soft rounded-pill
d-flex flex-row align-items-center gap-3 p-3"> <div class="bg-body
rounded-circle shadow mx-auto" style="width: 70px; height: 70px; display: flex;
align-items: center; justify-content: center;"> <img
src="/assets/images/avatars/avatar3.jpg" alt="Team Member Photograph"
class="rounded-circle" style="width: 64px; height: 64px; object-fit:
cover;"> </div> <div> <h5 class="mb-1">Neha Gupta</h5>
<p class="text-muted mb-0">Content Strategist</p> </div>
</div> </div> <div class="marquee-content me-2"> <div
class="bg-red-soft rounded-pill d-flex flex-row align-items-center gap-3 p-3">
<div class="bg-body rounded-circle shadow mx-auto" style="width: 70px; height:
70px; display: flex; align-items: center; justify-content: center;"> <img
src="/assets/images/avatars/avatar2.jpg" alt="Team Member Photograph"
class="rounded-circle" style="width: 64px; height: 64px; object-fit:
cover;"> </div> <div> <h5 class="mb-1">Amara
Evans</h5> <p class="text-muted mb-0">Sales Executive</p>
</div> </div> </div> <div class="marquee-content me-2">
<div class="bg-green-soft rounded-pill d-flex flex-row align-items-center gap-3
p-3"> <div class="bg-body rounded-circle shadow mx-auto" style="width:
70px; height: 70px; display: flex; align-items: center; justify-content: center;">
<img src="/assets/images/avatars/avatar9.jpg" alt="Team Member
Photograph" class="rounded-circle" style="width: 64px; height: 64px;
object-fit: cover;"> </div> <div> <h5 class="mb-1">Jack
Smith</h5> <p class="text-muted mb-0">Sales Lead</p> </div>
</div> </div> </div> </div> </div> </section>
</section>
ESC