<!--
@type: Team Section
@industry: Marketing
@style: Dark
@category: Support, Content
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-300: #d1d5db;
--color-gray-400: #9ca3af;
--color-gray-900: #111827;
--color-blue-400: #60a5fa;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
/* Spacing */
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-16: 4rem;
--spacing-20: 5rem;
/* Typography */
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif;
}
/* Base styles */
.team-section {
background-color: var(--color-gray-900);
padding: 6rem 1rem;
overflow: hidden;
}
.header {
max-width: 32rem;
margin: 0 auto 5rem;
text-align: center;
}
@media (min-width: 1024px) {
.header {
max-width: 56rem;
}
}
.header-tag {
color: var(--color-blue-400);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: var(--text-base);
}
.header-title {
margin-top: 0.5rem;
font-size: var(--text-3xl);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-white);
}
@media (min-width: 640px) {
.header-title {
font-size: var(--text-4xl);
}
}
.header-description {
margin-top: 1.5rem;
font-size: var(--text-lg);
line-height: 2rem;
color: var(--color-gray-300);
}
.team-grid {
display: grid;
grid-template-columns: 1fr;
gap: 4rem 2rem;
max-width: 80rem;
margin: 0 auto;
}
@media (min-width: 640px) {
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.team-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.team-member {
position: relative;
}
.member-image-container {
aspect-ratio: 3/4;
width: 100%;
border-radius: 1rem;
overflow: hidden;
}
.member-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.team-member:hover .member-image {
transform: scale(1.05);
}
.member-info {
margin-top: 1.5rem;
}
.member-name {
font-size: var(--text-lg);
font-weight: 600;
line-height: 2rem;
letter-spacing: -0.025em;
color: var(--color-white);
}
.member-role {
font-size: var(--text-base);
line-height: 1.75rem;
color: var(--color-blue-400);
}
.member-description {
margin-top: 1rem;
font-size: var(--text-base);
line-height: 1.75rem;
color: var(--color-gray-300);
}
.social-links {
display: flex;
gap: 1.5rem;
margin-top: 1.5rem;
list-style: none;
}
.social-link {
color: var(--color-gray-400);
transition: color 0.2s ease;
}
.social-link:hover {
color: var(--color-blue-400);
}
.social-icon {
width: 1.25rem;
height: 1.25rem;
}
.cta-container {
margin-top: 5rem;
text-align: center;
}
.cta-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-weight: 600;
color: var(--color-white);
background-color: var(--color-blue-600);
border-radius: 0.5rem;
text-decoration: none;
transition: background-color 0.2s ease;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.cta-button:hover {
background-color: var(--color-blue-700);
}
.cta-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-gray-900), 0 0 0 4px var(--color-blue-500);
}
.cta-icon {
width: 1.25rem;
height: 1.25rem;
}
@media (min-width: 640px) {
.team-section {
padding: 8rem 1.5rem;
}
}
</style>
<section class="team-section" aria-labelledby="team-heading">
<div class="header">
<h3 class="header-tag">Our Team</h3>
<h2 id="team-heading" class="header-title">Meet the Creative Minds Behind Our Success</h2>
<p class="header-description">We're a diverse team of marketing experts, strategists, and creative professionals dedicated to transforming your brand's digital presence.</p>
</div>
<div class="team-grid">
<!-- Team member 1 -->
<div class="team-member">
<div class="member-image-container">
<img src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-1.webp" alt="Sarah Johnson - Marketing Director" class="member-image">
</div>
<div class="member-info">
<h3 class="member-name">Sarah Johnson</h3>
<p class="member-role">Marketing Director</p>
<p class="member-description">10+ years of experience in digital marketing strategy and team leadership.</p>
</div>
<ul class="social-links" role="list">
<li>
<a href="#" class="social-link" aria-label="Sarah Johnson's LinkedIn profile">
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
</li>
<li>
<a href="#" class="social-link" aria-label="Sarah Johnson's Twitter profile">
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>
</a>
</li>
</ul>
</div>
<!-- Team member 2 -->
<div class="team-member">
<div class="member-image-container">
<img src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-2.webp" alt="Michael Chen - Creative Strategist" class="member-image">
</div>
<div class="member-info">
<h3 class="member-name">Michael Chen</h3>
<p class="member-role">Creative Strategist</p>
<p class="member-description">Specializes in brand development and creative campaign execution.</p>
</div>
<ul class="social-links" role="list">
<li>
<a href="#" class="social-link" aria-label="Michael Chen's LinkedIn profile">
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
</li>
<li>
<a href="#" class="social-link" aria-label="Michael Chen's Twitter profile">
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>
</a>
</li>
</ul>
</div>
<!-- Team member 3 -->
<div class="team-member">
<div class="member-image-container">
<img src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-3.webp" alt="Emma Rodriguez - Digital Strategist" class="member-image">
</div>
<div class="member-info">
<h3 class="member-name">Emma Rodriguez</h3>
<p class="member-role">Digital Strategist</p>
<p class="member-description">Expert in data-driven marketing strategies and campaign optimization.</p>
</div>
<ul class="social-links" role="list">
<li>
<a href="#" class="social-link" aria-label="Emma Rodriguez's LinkedIn profile">
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
</li>
<li>
<a href="#" class="social-link" aria-label="Emma Rodriguez's Twitter profile">
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>
</a>
</li>
</ul>
</div>
</div>
<div class="cta-container">
<a href="#" class="cta-button" aria-label="Join our team">
Join Our Team
<svg class="cta-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
</svg>
</a>
</div>
</section>
<!--
@type: Team Section
@industry: Marketing
@style: Dark
@category: Support, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-900 py-24 sm:py-32 overflow-hidden" aria-labelledby="team-heading">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-4xl text-center mb-20">
<p class="text-blue-400 font-semibold tracking-wide uppercase">Our Team</p>
<h2 id="team-heading" class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">Meet the Creative Minds Behind Our Success</h2>
<p class="mt-6 text-lg leading-8 text-gray-300">We're a diverse team of marketing experts, strategists, and creative professionals dedicated to transforming your brand's digital presence.</p>
</div>
<div class="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2 lg:grid-cols-3">
<!-- Team member 1 -->
<div class="group relative">
<div class="aspect-[3/4] w-full rounded-2xl overflow-hidden">
<!-- Marketing team lead image by Pexels -->
<img src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-1.webp" alt="Sarah Johnson - Marketing Director" class="object-cover w-full h-full transition duration-300 group-hover:scale-105">
</div>
<div class="mt-6">
<h3 class="text-lg font-semibold leading-8 tracking-tight text-white">Sarah Johnson</h3>
<p class="text-base leading-7 text-blue-400">Marketing Director</p>
<p class="mt-4 text-base leading-7 text-gray-300">10+ years of experience in digital marketing strategy and team leadership.</p>
</div>
<ul role="list" class="mt-6 flex gap-x-6">
<li>
<a href="#" class="text-gray-400 hover:text-blue-400 transition-colors" aria-label="Sarah Johnson's LinkedIn profile">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-400 hover:text-blue-400 transition-colors" aria-label="Sarah Johnson's Twitter profile">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>
</a>
</li>
</ul>
</div>
<!-- Team member 2 -->
<div class="group relative">
<div class="aspect-[3/4] w-full rounded-2xl overflow-hidden">
<!-- Creative strategist image by Pexels -->
<img src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-2.webp" alt="Michael Chen - Creative Strategist" class="object-cover w-full h-full transition duration-300 group-hover:scale-105">
</div>
<div class="mt-6">
<h3 class="text-lg font-semibold leading-8 tracking-tight text-white">Michael Chen</h3>
<p class="text-base leading-7 text-blue-400">Creative Strategist</p>
<p class="mt-4 text-base leading-7 text-gray-300">Specializes in brand development and creative campaign execution.</p>
</div>
<ul role="list" class="mt-6 flex gap-x-6">
<li>
<a href="#" class="text-gray-400 hover:text-blue-400 transition-colors" aria-label="Michael Chen's LinkedIn profile">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-400 hover:text-blue-400 transition-colors" aria-label="Michael Chen's Twitter profile">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>
</a>
</li>
</ul>
</div>
<!-- Team member 3 -->
<div class="group relative">
<div class="aspect-[3/4] w-full rounded-2xl overflow-hidden">
<!-- Digital strategist image by Pexels -->
<img src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-3.webp" alt="Emma Rodriguez - Digital Strategist" class="object-cover w-full h-full transition duration-300 group-hover:scale-105">
</div>
<div class="mt-6">
<h3 class="text-lg font-semibold leading-8 tracking-tight text-white">Emma Rodriguez</h3>
<p class="text-base leading-7 text-blue-400">Digital Strategist</p>
<p class="mt-4 text-base leading-7 text-gray-300">Expert in data-driven marketing strategies and campaign optimization.</p>
</div>
<ul role="list" class="mt-6 flex gap-x-6">
<li>
<a href="#" class="text-gray-400 hover:text-blue-400 transition-colors" aria-label="Emma Rodriguez's LinkedIn profile">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-400 hover:text-blue-400 transition-colors" aria-label="Emma Rodriguez's Twitter profile">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>
</a>
</li>
</ul>
</div>
</div>
<div class="mt-20 text-center">
<a href="#" class="inline-flex items-center gap-x-2 rounded-lg bg-blue-600 px-6 py-3 font-semibold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-gray-900 transition-colors" aria-label="Join our team">
Join Our Team
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</section>
