Features: alternating image rows

What you receive in Webflow

• 13 native elements and 8 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="feat2">
  <div class="feat2-row">
    <div class="feat2-copy"><div class="feat2-tag">Collaborate</div><h2 class="feat2-title">Work together in real time</h2><p class="feat2-text">Comment, review and approve without the email chains. Everyone sees the latest version, always.</p></div>
    <img class="feat2-img" src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1000&q=80" alt="Team collaborating" loading="lazy">
  </div>
  <div class="feat2-row feat2-row-reverse">
    <div class="feat2-copy"><div class="feat2-tag">Automate</div><h2 class="feat2-title">Let the boring parts run themselves</h2><p class="feat2-text">Build workflows with simple rules. Hand-offs, reminders and reports happen on time, every time.</p></div>
    <img class="feat2-img" src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1000&q=80" alt="Charts on a laptop" loading="lazy">
  </div>
</section>
<style>
.feat2 { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; padding:96px 24px; background:#fff; }
.feat2-row { max-width:1100px; margin:0 auto 80px; display:flex; align-items:center; gap:64px; }
.feat2-row-reverse { flex-direction:row-reverse; margin-bottom:0; }
.feat2-copy { flex:1; }
.feat2-img { flex:1; width:50%; border-radius:16px; }
.feat2-tag { color:#4353ff; font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:12px; }
.feat2-title { font-size:36px; line-height:1.2; color:#0f172a; margin:0 0 16px; }
.feat2-text { font-size:17px; line-height:1.7; color:#64748b; margin:0; }
@media (max-width:767px) { .feat2-row { flex-direction:column; gap:28px; } .feat2-row-reverse { flex-direction:column; } .feat2-img { width:100%; } }
</style>