<div class="container container-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque facere molestias iste cum dolores, inventore hic. Quia hic eius maxime repellat beatae placeat dolorem illo nesciunt molestias. Molestiae officia sint, tempora ipsam laboriosam! Quod sapiente
necessitatibus est pariatur sequi, itaque tempora blanditiis placeat excepturi! Sed, debitis, eum. Quas, dolorem, suscipit?</p>
</div>
<div class="container container-2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque facere molestias iste cum dolores, inventore hic. Quia hic eius maxime repellat beatae placeat dolorem illo nesciunt molestias. Molestiae officia sint, tempora ipsam laboriosam! Quod sapiente
necessitatibus est pariatur sequi, itaque tempora blanditiis placeat excepturi! Sed, debitis, eum. Quas, dolorem, suscipit?</p>
</div>
@import url("https://fonts.googleapis.com/css2?family=Neucha&display=swap");
:root {
--content-width: 600px;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: "Neucha", cursive;
overflow-x: hidden; /*необходим для второго блока*/
}
.container {
background-color: #eee;
outline: 1px dashed #000;
}
.container-1 {
display: flex;
max-width: var(--content-width);
margin: 50px auto;
}
.container-1::before {
content: "";
display: block;
width: 50vw;
margin-left: calc(50% - 50vw);
background: deepskyblue url(https://cdn.gidfon.com/preview/4695.jpg) no-repeat center /
cover;
}
.container-1 p {
width: 50%;
padding: 20px;
}
.container-2 {
display: flex;
max-width: var(--content-width);
margin: 50px auto;
}
.container-2::after {
content: "";
display: block;
width: 50vw;
margin-right: calc(50% - 50vw);
background: deepskyblue url(https://cdn.gidfon.com/preview/4695.jpg) no-repeat center /
cover;
}
.container-2 p {
width: 50%;
padding: 20px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.