<div class="img">
<div class="img-block-1">
<div class="img-block-item-1">
</div>
<div class="img-block-item-2">
</div>
</div>
<div class="img-block-2">
<div class="img-block1-item">
</div>
<div class="img-block2-2-item">
</div>
<div class="img-block2-3-item">
</div>
</div>
<div class="img-block-3">
<div class="img-block3-1-item">
</div>
<div class="img-block-3__wrap">
<div class="img-block3-2-item">
</div>
<div class="img-block3-3-item">
</div>
</div>
</div>
</div>
.img {
width: 800px;
height: 800px;
background: grey;
margin: 0 auto;
}
.img-block-1 {
width: 100%;
display: flex;
padding: 20px;
}
.img-block-item-1 {
width: 117px;
height: 70px;
background: red;
margin-right: 20px;
}
.img-block-item-2 {
background: red;
width: 117px;
height: 70px;
}
.img-block1-item {
width: 78px;
height: 78px;
background: red;
margin-right: 20px;
}
.img-block2-2-item {
width: 78px;
height: 78px;
background: red;
margin-right: 20px;
}
.img-block2-3-item {
width: 78px;
height: 78px;
background: red;
}
.img-block-2 {
display: flex;
}
.img-block-3 {
display: flex;
margin-top: 20px;
}
.img-block-3__wrap {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.img-block3-1-item {
width: 92px;
height: 115px;
background: red;
margin-right: 20px;
}
.img-block3-2-item {
width: 177px;
height: 33px;
background: red;
}
.img-block3-3-item {
width: 179px;
height: 36px;
background: red;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.