HTML to Webflow examples

Team: 4 people

Team members with photo, name and role.

  • Responsive

What you receive in Webflow

  • 20 native elements and 7 classes.
  • Breakpoints: tablet (991px).
  • No Embed elements. Everything is native.

How to paste it

  1. Click Copy for Webflow.
  2. Open your page in the Webflow Designer.
  3. Press ⌘V or Ctrl+V.

HTML

<section class="team1">
  <div class="team1-inner">
    <h2 class="team1-title">Meet the team</h2>
    <div class="team1-grid">
      <div class="team1-card"><img class="team1-photo" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&q=80" alt="Alex Morgan" loading="lazy"><h3 class="team1-name">Alex Morgan</h3><p class="team1-role">CEO</p></div>
      <div class="team1-card"><img class="team1-photo" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&q=80" alt="Jamie Rivera" loading="lazy"><h3 class="team1-name">Jamie Rivera</h3><p class="team1-role">CTO</p></div>
      <div class="team1-card"><img class="team1-photo" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&q=80" alt="Sam Okafor" loading="lazy"><h3 class="team1-name">Sam Okafor</h3><p class="team1-role">Head of Design</p></div>
      <div class="team1-card"><img class="team1-photo" src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&q=80" alt="Lena Fischer" loading="lazy"><h3 class="team1-name">Lena Fischer</h3><p class="team1-role">Head of Growth</p></div>
    </div>
  </div>
</section>
<style>
.team1 { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; padding:96px 24px; background:#fff; }
.team1-inner { max-width:1100px; margin:0 auto; text-align:center; }
.team1-title { font-size:40px; color:#0f172a; margin:0 0 48px; }
.team1-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:24px; }
.team1-photo { width:100%; aspect-ratio:1 / 1; object-fit:cover; border-radius:16px; margin-bottom:14px; }
.team1-name { font-size:18px; color:#0f172a; margin:0 0 4px; }
.team1-role { font-size:15px; color:#64748b; margin:0; }
@media (max-width:991px) { .team1-grid { grid-template-columns:1fr 1fr; } }
</style>