Free Section
Team & Leadership Showcase Grid
An engineering and executive team showcase grid with monochrome-to-color hover transitions and social profile links.
Colours in this gradient
#090d16#3b82f6#8b5cf6#ffffff
background: ;The code
Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<section class="team-sec">
<div class="team-header">
<span class="team-badge">Core Builders</span>
<h2>Built by engineers, for engineers</h2>
<p>Our team previously scaled distributed systems at leading research labs and cloud providers.</p>
</div>
<div class="team-grid">
<div class="team-card">
<div class="team-photo tp-1">
<span class="tp-emoji">👨💻</span>
</div>
<div class="team-name">Ravindra Nath Jha</div>
<div class="team-role">Founder & AI Architect</div>
<div class="team-socials">
<span>GitHub</span> · <span>X</span> · <span>LinkedIn</span>
</div>
</div>
<div class="team-card">
<div class="team-photo tp-2">
<span class="tp-emoji">👩💻</span>
</div>
<div class="team-name">Elena Rostova</div>
<div class="team-role">Head of Infrastructure</div>
<div class="team-socials">
<span>GitHub</span> · <span>X</span>
</div>
</div>
<div class="team-card">
<div class="team-photo tp-3">
<span class="tp-emoji">⚡</span>
</div>
<div class="team-name">Devon Vance</div>
<div class="team-role">Lead Systems Engineer</div>
<div class="team-socials">
<span>GitHub</span> · <span>LinkedIn</span>
</div>
</div>
</div>
</section>The AI prompt
Paste this into an AI coding tool to generate the same section, then ask it to adapt the colours, text or framework to your project.
Create a responsive 3-column team leadership section in HTML and CSS. Requirements: - Centered header with category pill. - 3 cards with avatar photo, name, engineering title, and social links. - Soft translateY lift on card hover. Return one HTML file with a <style> block.
How to build it, step by step
- 1
Set up 3-column grid that folds to single column on tablet/mobile.
- 2
Add circular gradient avatars with shadow.
Customisation tips
- Keep social links understated with muted gray that highlights on hover.