<section class="logo-colors-font">
<div class="logo-colors-font-1-bg"></div>
<div class="all-bg">
<div class="pos-abs logo-colors-font-2-bg"></div>
<div class="pos-abs logo-colors-font-3-bg"></div>
<div class="pos-abs logo-colors-font-4-bg"></div>
</div>
<div class="logo-colors-font-container">
</div>
</section>.pos-abs {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
.logo-colors-font {
position: relative;
.all-bg {
position: relative;
height: 512px;
.logo-colors-font-2-bg {
height: 512px;
background-color: @blue;
top: auto;
bottom: auto;
z-index: 5;
width: calc(50% + 10em);
}
.logo-colors-font-3-bg {
height: 402px;
background-color: @yel;
top: auto;
bottom: auto;
}
.logo-colors-font-4-bg {
height: 110px;
background-color: red;
top: auto;
bottom: 0;
}
}
.logo-colors-font-1-bg {
height: 674px;
background-color: @fff;
}
.logo-colors-font-container {
position: absolute;
margin: 0 auto;
height: 1185px;
width: 1094px;
top: 0;
left: 0;
right: 0;
border: 1px solid red;
z-index: 10;
}
}<body>
<div class="third_stage">
<div class="bg_4">
<div class="text_bg text_bg_4">
<h2>3 Этап</h2>
<h2>Дизайн</h2>
<p>Подготовив гайдлайн приступили к разработке дизайна приложения.</p>
<p>Интерфейс выполнен в “плоском” стиле. При разработке дизайна очень важно было учитывать простоту и скорость трансформации интерфейса под другие игры в следующих версиях приложения. Выбранный стиль отлично подошел для решения этой задачи.</p>
<p>Помимо элементов интерфейса и иконок разработаны уникальные иллюстрации для главного меню приложения — “Игры”, “Призы”, “Рейтинги”.</p>
</div>
</div>
</div>
</body>.third_stage {
background: linear-gradient(30deg, #315a7b 30%, #6b5a7b 30%, #6b5a7b 100%);
min-width: 1235px;
position: relative;
z-index: 20;
}
.bg_4 {
background: url(../images/phone.png) no-repeat 200px top;
position: relative;
z-index: 3;
margin: 0 auto;
height: 4431px;
width: 1235px;
outline: 1px solid red;
}
.text_bg_4 {
background: transparent;
top: 200px;
left: 0;
}