Hero: text left, image right

What you receive in Webflow

• 10 native elements and 9 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="hero2">
  <div class="hero2-inner">
    <div class="hero2-content">
      <h1 class="hero2-title">The smarter way to run your business</h1>
      <p class="hero2-text">Automate the busywork, see every number that matters, and give your team time back.</p>
      <div class="hero2-actions"><a href="#" class="hero2-btn">Get started</a><a href="#" class="hero2-link">Talk to sales →</a></div>
      <p class="hero2-note">Free 14-day trial · No credit card required</p>
    </div>
    <img class="hero2-img" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1200&q=80" alt="Dashboard preview" loading="lazy">
  </div>
</section>
<style>
.hero2 { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background:#f7f8fc; padding:96px 24px; }
.hero2-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.hero2-title { font-size:52px; line-height:1.1; color:#0f172a; margin:0 0 20px; letter-spacing:-0.02em; }
.hero2-text { font-size:19px; line-height:1.6; color:#475569; margin:0 0 32px; }
.hero2-actions { display:flex; align-items:center; gap:24px; }
.hero2-btn { background:#0f172a; color:#fff; padding:14px 22px; border-radius:10px; text-decoration:none; font-weight:600; }
.hero2-link { color:#0f172a; text-decoration:none; font-weight:600; }
.hero2-note { font-size:14px; color:#64748b; margin:20px 0 0; }
.hero2-img { width:100%; border-radius:16px; box-shadow:0 30px 60px rgba(15,23,42,.18); }
@media (max-width:991px) { .hero2-inner { grid-template-columns:1fr; } .hero2-title { font-size:40px; } }
</style>