HTML to Webflow examples

CTA: split with image

A call to action with text on the left and buttons on the right.

  • Responsive

What you receive in Webflow

  • 7 native elements and 6 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="cta2">
  <div class="cta2-inner">
    <div class="cta2-copy"><h2 class="cta2-title">Start building your next site today</h2><p class="cta2-text">Free for 14 days. Bring your team along.</p><a href="#" class="cta2-btn">Create free account</a></div>
    <img class="cta2-img" src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1000&q=80" alt="Laptop with code" loading="lazy">
  </div>
</section>
<style>
.cta2 { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background:#eef0ff; padding:80px 24px; }
.cta2-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.cta2-title { font-size:40px; line-height:1.15; color:#0f172a; margin:0 0 14px; }
.cta2-text { font-size:18px; color:#475569; margin:0 0 28px; }
.cta2-btn { display:inline-block; background:#4353ff; color:#fff; padding:14px 24px; border-radius:10px; text-decoration:none; font-weight:600; }
.cta2-img { width:100%; border-radius:16px; }
@media (max-width:767px) { .cta2-inner { grid-template-columns:1fr; } }
</style>