<main>
  <section class="hero">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 offset-lg-6">
          <div class="hero-content">
            <h1>Сделано с любовью</h1>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut ipsa culpa omnis eum, praesentium quasi ullam pariatur molestias dolorum officia?    </p>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut amet fugit ipsa aperiam ad quia quisquam neque doloremque dolores necessitatibus? Autem, voluptates laboriosam. Minima nam laborum impedit nihil neque obcaecati?
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>
.main {
  padding: 50px 0;
}

.hero {
  padding: 100px 0;
  position: relative;
  background-color: #FF4C62;
}

.hero::before {
  content: '';
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url('https://picsum.photos/1000/1000');
  background-repeat: no-repeat;
  background-size: cover;
  
}

.hero-content {
  padding-left: 50px;
  color: #fff;
  position: relative;
  z-index: 1;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.