Back to Hero Sections
Hero

Split Hero with Image

Text on the left, image on the right.

#hero#split#image

Live preview

Source code

html
<section class="py-5">
  <div class="container py-5">
    <div class="row align-items-center g-5">
      <div class="col-lg-6">
        <h1 class="display-4 fw-bold">A modern way to grow your business.</h1>
        <p class="lead text-muted mt-3">Launch faster with conversion-ready sections.</p>
        <a href="#" class="btn btn-primary btn-lg mt-2"><i class="bi bi-rocket-takeoff me-2"></i>Start free</a>
      </div>
      <div class="col-lg-6">
        <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=900" class="img-fluid rounded-4 shadow" alt="Hero">
      </div>
    </div>
  </div>
</section>

More designs in this section