<article>
<section>
<div class="description">
<h1>NEW</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing</p>
</div>
<div class="img"><img src="https://picsum.photos/id/1015/180/230" width="180" height="230"></div>
</section>
<section>
<div class="description">
<h1>NEW</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing</p>
</div>
<div class="img"><img src="https://picsum.photos/id/1015/180/230" width="180" height="230"></div>
</section>
</article>
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
article {
display: grid;
width: 980px;
margin: auto;
//height: 500px;
grid-template-rows: 1fr 3rem 3rem 1fr;
grid-template-areas: "one" "two" "three" "four";
height: 575px;
&:before {
content: "";
background-color: #efebe7;
display: block;
grid-row: one / two;
grid-column: 1 /-1;
}
&:after {
content: "";
background: #c7b19e;
display: block;
grid-row: three / four;
grid-column: 1 /-1;
z-index: -1;
}
img {
//width: 100%;
height: auto;
display: flex;
margin: auto;
object-fit: cover;
width: auto;
height: 100%;
}
.description {
display: flex;
margin: auto;
flex-direction: column;
* {
margin: 0;
}
}
section {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "one two";
img {
width: 54%;
}
&:nth-child(1) {
grid-row: one / three;
grid-column: 1 /-1;
//background: lightgreen;
.description {
grid-column: one;
grid-row: 1;
}
.img {
grid-column: two;
grid-row: 1;
}
}
&:nth-child(2) {
grid-row: two / four;
grid-column: 1 /-1;
//background-color: orange;
z-index: 1;
.description {
grid-column: two;
grid-row: 1;
}
.img {
grid-column: one;
grid-row: 1;
}
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.