<!--
@type: Team
@industry: Business
@style: Modern
@category: Support, Content
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--color-slate-50: #f8fafc;
--color-slate-200: #e2e8f0;
--color-slate-600: #475569;
--color-slate-900: #0f172a;
--color-indigo-600: #4f46e5;
--color-white: #ffffff;
/* Spacing */
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2.5rem;
--spacing-16: 4rem;
--spacing-24: 6rem;
/* Container max widths */
--max-width-3xl: 48rem;
--max-width-7xl: 80rem;
/* Font sizes */
--text-sm: 0.875rem;
--text-lg: 1.125rem;
--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, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* Component styles */
.team-section {
background-color: var(--color-slate-50);
padding: var(--spacing-16) 0;
}
.container {
max-width: var(--max-width-7xl);
margin: 0 auto;
padding: 0 var(--spacing-4);
}
.section-header {
max-width: var(--max-width-3xl);
margin: 0 auto;
text-align: center;
margin-bottom: var(--spacing-10);
}
.section-title {
font-size: var(--text-3xl);
font-weight: 700;
color: var(--color-slate-900);
margin-bottom: var(--spacing-4);
}
.section-description {
font-size: var(--text-lg);
color: var(--color-slate-600);
}
.team-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
}
.team-member {
background-color: var(--color-white);
border-radius: 0.75rem;
padding: var(--spacing-6);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
border: 1px solid var(--color-slate-200);
text-align: center;
}
.member-image {
width: 6rem;
height: 6rem;
border-radius: 50%;
margin: 0 auto var(--spacing-4);
object-fit: cover;
}
.member-name {
font-size: var(--text-lg);
font-weight: 700;
color: var(--color-slate-900);
line-height: 1.5;
}
.member-title {
color: var(--color-indigo-600);
margin-bottom: 0.75rem;
}
.member-bio {
font-size: var(--text-sm);
color: var(--color-slate-600);
line-height: 1.5;
}
/* Responsive breakpoints */
@media (min-width: 640px) {
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.team-section {
padding: var(--spacing-24) 0;
}
.section-title {
font-size: var(--text-4xl);
}
}
@media (min-width: 1024px) {
.team-grid {
grid-template-columns: repeat(4, 1fr);
}
}
</style>
<section class="team-section">
<div class="container">
<!-- Section heading -->
<div class="section-header">
<h2 class="section-title">Meet Our Leadership Team</h2>
<p class="section-description">Our experienced leadership team brings diverse expertise from various industries to deliver exceptional results for our clients.</p>
</div>
<div class="team-grid">
<div class="team-member">
<!-- Team member image by Pexels (CC0) -->
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp"
alt="Sarah Johnson, CEO"
class="member-image"
width="40"
height="40"
loading="lazy"
/>
<h4 class="member-name">Sarah Johnson</h4>
<p class="member-title">Chief Executive Officer</p>
<p class="member-bio">Former VP at Fortune 500 company with 15+ years of leadership experience in business transformation.</p>
</div>
<div class="team-member">
<!-- Team member image by Pexels (CC0) -->
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp"
alt="Michael Chen, CTO"
class="member-image"
width="40"
height="40"
loading="lazy"
/>
<h4 class="member-name">Michael Chen</h4>
<p class="member-title">Chief Technology Officer</p>
<p class="member-bio">Tech innovator with background in software development and AI implementation across multiple industries.</p>
</div>
<div class="team-member">
<!-- Team member image by Pexels (CC0) -->
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp"
alt="David Rodriguez, COO"
class="member-image"
width="40"
height="40"
loading="lazy"
/>
<h4 class="member-name">David Rodriguez</h4>
<p class="member-title">Chief Operations Officer</p>
<p class="member-bio">Operations expert specializing in streamlining processes and optimizing business performance.</p>
</div>
<div class="team-member">
<!-- Team member image by Pexels (CC0) -->
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-4.webp"
alt="Emily Taylor, CMO"
class="member-image"
width="40"
height="40"
loading="lazy"
/>
<h4 class="member-name">Emily Taylor</h4>
<p class="member-title">Chief Marketing Officer</p>
<p class="member-bio">Strategic marketing leader with expertise in brand development and digital marketing campaigns.</p>
</div>
</div>
</div>
</section>
<!--
@type: Team
@industry: Business
@style: Modern
@category: Support, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-slate-50 py-16 md:py-24">
<div class="container mx-auto px-4 max-w-7xl">
<!-- Section heading -->
<div class="max-w-3xl mx-auto text-center mb-10">
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Meet Our Leadership Team</h2>
<p class="text-lg text-slate-600">Our experienced leadership team brings diverse expertise from various industries to deliver exceptional results for our clients.</p>
</div>
<div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 text-center">
<!-- Team member image by Pexels (CC0) -->
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp"
alt="Sarah Johnson, CEO"
class="w-24 h-24 rounded-full mx-auto mb-4 object-cover"
width="40"
height="40"
loading="lazy"
/>
<h4 class="text-lg font-bold text-slate-900">Sarah Johnson</h4>
<p class="text-indigo-600 mb-3">Chief Executive Officer</p>
<p class="text-slate-600 text-sm">Former VP at Fortune 500 company with 15+ years of leadership experience in business transformation.</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 text-center">
<!-- Team member image by Pexels (CC0) -->
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp"
alt="Michael Chen, CTO"
class="w-24 h-24 rounded-full mx-auto mb-4 object-cover"
width="40"
height="40"
loading="lazy"
/>
<h4 class="text-lg font-bold text-slate-900">Michael Chen</h4>
<p class="text-indigo-600 mb-3">Chief Technology Officer</p>
<p class="text-slate-600 text-sm">Tech innovator with background in software development and AI implementation across multiple industries.</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 text-center">
<!-- Team member image by Pexels (CC0) -->
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp"
alt="David Rodriguez, COO"
class="w-24 h-24 rounded-full mx-auto mb-4 object-cover"
width="40"
height="40"
loading="lazy"
/>
<h4 class="text-lg font-bold text-slate-900">David Rodriguez</h4>
<p class="text-indigo-600 mb-3">Chief Operations Officer</p>
<p class="text-slate-600 text-sm">Operations expert specializing in streamlining processes and optimizing business performance.</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 text-center">
<!-- Team member image by Pexels (CC0) -->
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-4.webp"
alt="Emily Taylor, CMO"
class="w-24 h-24 rounded-full mx-auto mb-4 object-cover"
width="40"
height="40"
loading="lazy"
/>
<h4 class="text-lg font-bold text-slate-900">Emily Taylor</h4>
<p class="text-indigo-600 mb-3">Chief Marketing Officer</p>
<p class="text-slate-600 text-sm">Strategic marketing leader with expertise in brand development and digital marketing campaigns.</p>
</div>
</div>
</div>
</div>
</section>
