What you receive in Webflow
- 30 native elements and 10 classes.
- Breakpoints: mobile landscape (767px), tablet (991px).
- No Embed elements. Everything is native.
How to paste it
- Click Copy for Webflow.
- Open your page in the Webflow Designer.
- Press ⌘V or Ctrl+V.
HTML
<section class="feat1">
<div class="feat1-inner">
<div class="feat1-head"><h2 class="feat1-title">Everything you need to ship</h2><p class="feat1-sub">Powerful features that stay out of your way.</p></div>
<div class="feat1-grid">
<div class="feat1-card"><div class="feat1-icon">⚡</div><h3 class="feat1-card-title">Fast by default</h3><p class="feat1-card-text">Pages load in under a second, everywhere in the world.</p></div>
<div class="feat1-card"><div class="feat1-icon">🔒</div><h3 class="feat1-card-title">Secure</h3><p class="feat1-card-text">SSO, audit logs and encryption at rest come standard.</p></div>
<div class="feat1-card"><div class="feat1-icon">📈</div><h3 class="feat1-card-title">Analytics</h3><p class="feat1-card-text">See what works with real-time dashboards and reports.</p></div>
<div class="feat1-card"><div class="feat1-icon">🧩</div><h3 class="feat1-card-title">Integrations</h3><p class="feat1-card-text">Connect the tools you already use in a couple of clicks.</p></div>
<div class="feat1-card"><div class="feat1-icon">🌍</div><h3 class="feat1-card-title">Localization</h3><p class="feat1-card-text">Translate your site into 40+ languages automatically.</p></div>
<div class="feat1-card"><div class="feat1-icon">💬</div><h3 class="feat1-card-title">Support</h3><p class="feat1-card-text">Real humans, 24/7, with a median reply under 5 minutes.</p></div>
</div>
</div>
</section>
<style>
.feat1 { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; padding:96px 24px; background:#fff; }
.feat1-inner { max-width:1200px; margin:0 auto; }
.feat1-head { text-align:center; max-width:640px; margin:0 auto 56px; }
.feat1-title { font-size:40px; line-height:1.15; color:#0f172a; margin:0 0 12px; }
.feat1-sub { font-size:18px; color:#64748b; margin:0; }
.feat1-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; }
.feat1-card { border:1px solid #e2e8f0; border-radius:14px; padding:28px; }
.feat1-icon { width:44px; height:44px; border-radius:10px; background:#eef0ff; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:18px; }
.feat1-card-title { font-size:19px; color:#0f172a; margin:0 0 8px; }
.feat1-card-text { font-size:15px; line-height:1.6; color:#64748b; margin:0; }
@media (max-width:991px) { .feat1-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:767px) { .feat1-grid { grid-template-columns:1fr; } .feat1-title { font-size:32px; } }
</style>