Team Profile HTML Template
Introduce your team with headshots, titles, and short bios in a responsive grid.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Meet the Lumen Studio Team</title>
<style>
body { font-family: 'Inter', sans-serif; background: #0c111d; color: white; margin: 0; }
header { text-align: center; padding: 4rem 1.5rem 1rem; }
header p { color: rgba(255,255,255,0.7); max-width: 640px; margin: 0 auto; }
.grid { max-width: 1100px; margin: 0 auto 4rem; padding: 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
article { background: #111a2c; border-radius: 1.5rem; padding: 1.5rem; border: 1px solid rgba(255,255,255,0.07); position: relative; }
img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; }
h3 { margin: 0; }
span { color: #9ca3af; font-size: 0.95rem; }
p { color: #d1d5db; font-size: 0.95rem; margin-top: 0.8rem; }
</style>
</head>
<body>
<header>
<h1>Meet the team</h1>
<p>Strategists, artists, and builders who partner with climate-forward companies to ship meaningful work.</p>
</header>
<section class="grid">
<article>
<img src="https://images.unsplash.com/photo-1544723795-3fb6469f5b39?auto=format&fit=crop&w=200&q=80" alt="Portrait of Maya" />
<h3>Maya Chen</h3>
<span>Creative Director</span>
<p>Former IDEO lead focused on brand systems and motion identity.</p>
</article>
<article>
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=200&q=80" alt="Portrait of Diego" />
<h3>Diego Fernández</h3>
<span>Head of Product</span>
<p>Guides research sprints and bridges design with engineering.</p>
</article>
<article>
<img src="https://images.unsplash.com/photo-1546525848-3ce03ca516f6?auto=format&fit=crop&w=200&q=80" alt="Portrait of Priya" />
<h3>Priya Kapoor</h3>
<span>Engineering Lead</span>
<p>Specializes in performant web apps and inclusive front-end systems.</p>
</article>
</section>
</body>
</html>