How it works: 3 steps

What you receive in Webflow

• 16 native elements and 7 classes.
• Breakpoints: mobile landscape (767px).
• 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="steps1">
  <div class="steps1-inner">
    <h2 class="steps1-title">How it works</h2>
    <div class="steps1-grid">
      <div class="steps1-step"><div class="steps1-num">1</div><h3 class="steps1-step-title">Sign up</h3><p class="steps1-text">Create your account in under a minute.</p></div>
      <div class="steps1-step"><div class="steps1-num">2</div><h3 class="steps1-step-title">Connect</h3><p class="steps1-text">Link your tools and import your data.</p></div>
      <div class="steps1-step"><div class="steps1-num">3</div><h3 class="steps1-step-title">Launch</h3><p class="steps1-text">Go live and watch the results roll in.</p></div>
    </div>
  </div>
</section>
<style>
.steps1 { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; padding:96px 24px; background:#f7f8fc; }
.steps1-inner { max-width:1000px; margin:0 auto; text-align:center; }
.steps1-title { font-size:40px; color:#0f172a; margin:0 0 48px; }
.steps1-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:32px; }
.steps1-num { width:48px; height:48px; border-radius:999px; background:#0f172a; color:#fff; font-weight:700; font-size:18px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.steps1-step-title { font-size:20px; color:#0f172a; margin:0 0 8px; }
.steps1-text { font-size:15px; color:#64748b; line-height:1.6; margin:0; }
@media (max-width:767px) { .steps1-grid { grid-template-columns:1fr; } }
</style>