<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>
<title>Team Section with Carousel + Scroll Pop-In</title>
<style>
/* BASIC RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* BODY DEFAULTS */
body {
font-family: Arial, sans-serif;
background: #f2f2f2; /* optional page bg */
min-height: 200vh; /* so we can scroll & see the pop-in */
}
/* TEAM SECTION WRAPPER */
.team-section {
width: 90%;
max-width: 1200px;
margin: 2rem auto;
text-align: center;
/* INITIAL STATE: hidden + shifted down */
opacity: 0;
transform: translateY(50px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
/* WHEN VISIBLE IN VIEWPORT, animate in */
.team-section.animate-in {
opacity: 1;
transform: translateY(0);
}
/* SECTION HEADING */
.team-section h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
color: #333;
}
/* CAROUSEL CONTAINER: holds the horizontal row of cards, hides overflow */
.carousel-container {
position: relative; /* so we can position the arrow */
overflow: hidden; /* hide the cards that slide “offscreen” */
width: 100%;
}
/* The row of cards: we’ll slide it left/right with translateX */
.team-grid {
display: flex; /* all cards in one row */
gap: 2rem; /* spacing between cards */
transition: transform 0.5s ease; /* smooth slide */
}
/* INDIVIDUAL CARD */
.team-card {
flex: 0 0 calc(25% – 2rem); /* show 4 cards per “page” on large screens */
background-color: #f7f3ee;
border-radius: 8px;
padding: 2rem 1rem;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.team-card:hover {
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
transform: translateY(-5px);
}
/* PROFILE IMAGE (CIRCLE) */
.team-card img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
background: #ccc; /* fallback if no image */
margin-bottom: 1rem;
}
/* NAME & ROLE */
.team-card h3 {
font-size: 1.2rem;
color: #333;
margin-bottom: 0.3rem;
}
.team-card p {
font-size: 1rem;
color: #555;
margin-bottom: 1rem;
}
/* THIN LINE BETWEEN TEXT & ICONS */
.divider-line {
width: 60%;
height: 1px;
background: #ccc;
margin: 0 auto 1rem auto;
}
/* ICON ROW */
.icon-row {
display: flex;
justify-content: center;
gap: 1.5rem;
}
/* ICON LINK */
.icon-link {
display: inline-flex;
width: 24px;
height: 24px;
text-decoration: none;
}
.icon-link:hover svg {
filter: brightness(1.1);
transform: scale(1.1);
}
/* “NEXT” ARROW BUTTON */
.carousel-next {
position: absolute;
right: -3rem;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
cursor: pointer;
outline: none;
}
.carousel-next svg {
width: 48px;
height: 48px;
fill: #f17c34;
transition: transform 0.3s;
}
.carousel-next:hover svg {
transform: scale(1.1);
}
/* RESPONSIVE TWEAKS
If you want fewer than 4 cards per row on smaller screens: */
@media (max-width: 992px) {
.team-card {
flex: 0 0 calc(50% – 2rem); /* 2 per row on tablet */
}
}
@media (max-width: 600px) {
.team-card {
flex: 0 0 calc(100% – 2rem); /* 1 per row on mobile */
}
.carousel-next {
right: -2rem; /* tweak arrow position on small screens */
}
}
</style>
</head>
<body>
<section class=”team-section”>
<h2>Our Team</h2>
<!– Carousel container that hides overflow –>
<div class=”carousel-container”>
<!– The row of cards. We’ll slide it left/right in JS –>
<div class=”team-grid”>
<!– CARD 1 –>
<div class=”team-card”>
<img src=”https://oliveiralawyers.com/wp-content/uploads/2025/01/luciano-oliveira.png”
alt=”Luciano Oliveira Photo”>
<h3>Luciano Oliveira</h3>
<p>Founder and CEO</p>
<div class=”divider-line”></div>
<div class=”icon-row”>
<!– Email Icon –>
<a class=”icon-link” href=”mailto:[email protected]” title=”Email Us”>
<!– (Same SVG as before) –>
<svg viewBox=”0 0 24 24″ …> … </svg>
</a>
<!– Consultation Icon –>
<a class=”icon-link”
href=”https://app.squarespacescheduling.com/schedule.php?owner=23078148″
target=”_blank” rel=”noopener noreferrer” title=”Schedule Consultation”>
<!– (Same SVG as before) –>
<svg viewBox=”0 0 50 50″ …> … </svg>
</a>
</div>
</div>
<!– END CARD 1 –>
<!– CARD 2 –>
<div class=”team-card”>
<img src=”https://oliveiralawyers.com/wp-content/uploads/2025/01/paulo-sales.png”
alt=”Paulo Sales Photo”>
<h3>Paulo Sales</h3>
<p>Real Estate Transactions</p>
<div class=”divider-line”></div>
<div class=”icon-row”>
<!– same icon markup … –>
</div>
</div>
<!– CARD 3 –>
<div class=”team-card”>
<img src=”https://oliveiralawyers.com/wp-content/uploads/2025/02/Patricks-Pic.jpg”
alt=”Patrick Sales Photo”>
<h3>Patrick Moreth</h3>
<p>Immigration Services</p>
<div class=”divider-line”></div>
<div class=”icon-row”>
<!– same icon markup … –>
</div>
</div>
<!– CARD 4 –>
<div class=”team-card”>
<img src=”https://oliveiralawyers.com/wp-content/uploads/2025/01/camila-saunier.png”
alt=”Camila Saunier Photo”>
<h3>Camila Saunier</h3>
<p>Business Services</p>
<div class=”divider-line”></div>
<div class=”icon-row”>
<!– same icon markup … –>
</div>
</div>
<!– If you have more than 4, just keep adding them here:
CARD 5, CARD 6, CARD 7, etc. –>
</div><!– .team-grid –>
<!– NEXT ARROW BUTTON –>
<button class=”carousel-next” aria-label=”Next”>
<!– A simple right-arrow SVG –>
<svg viewBox=”0 0 24 24″><path d=”M8.12 4.29a1 1 0 0 0 0 1.42L13.17
11H4a1 1 0 1 0 0 2h9.17l-5.05 5.29a1
1 0 1 0 1.46 1.36l6.66-7a1 1 0 0 0
0-1.36l-6.66-7a1 1 0 0 0-1.46 0z”
fill=”#f17c34″/></svg>
</button>
</div> <!– .carousel-container –>
</section> <!– .team-section –>
<script>
document.addEventListener(“DOMContentLoaded”, function() {
// 1) Scroll-triggered pop-in (unchanged)
const teamSection = document.querySelector(“.team-section”);
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
teamSection.classList.add(“animate-in”);
observer.unobserve(teamSection);
}
});
}, { threshold: 0.1 });
observer.observe(teamSection);
// 2) Simple carousel logic
const grid = document.querySelector(“.team-grid”);
const nextBtn = document.querySelector(“.carousel-next”);
const cards = document.querySelectorAll(“.team-card”);
const cardCount = cards.length;
const pageSize = 4; // how many cards to show per “page”
let currentPage = 0;
// Figure out how many “pages” we have, rounding up
const totalPages = Math.ceil(cardCount / pageSize);
nextBtn.addEventListener(“click”, () => {
// Move to next page (cycle back if at end)
currentPage = (currentPage + 1) % totalPages;
// Each “page” is effectively an offset of (pageSize * cardWidth)
// But simpler if we compute the width from the container
const containerWidth = grid.parentElement.offsetWidth;
// Slide .team-grid left by currentPage * containerWidth
grid.style.transform = `translateX(-${currentPage * containerWidth}px)`;
});
});
</script>
</body>
</html>