<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;
}
This Pen doesn't use any external JavaScript resources.