В современной верстке есть 100 условий, как дизайнер хочет видеть данный макет в работе. Можно только предположить, что он нарисует "потом", когда будет готов мобильный макет. Поэтому нам нужен путь с наименьшим количеством противоречий и наиболее гибкий. Но при этом у верстальщика сегодня есть большой набор инструментов, чтобы сделать все, не прибегая к скриптам, только силами цсс.
Я соглашусь с
Александр Вейнберг, что нужно сделать флекс на синем фоне, но только для блока с текстом "Education..." и то, что ниже. Имеем примерно следующее, как я бы себе представил:
<!-- head -->
<div id="head">
<!-- сама, скорее всего, position: fixed, тут лого и меню -->
</div>
<!--/head -->
<!-- top нам нужно чисто для верхнего паддинга, чтобы отошло от хэда -->
<div id="top">
<!-- hero -->
<div id="hero">
<!-- center -- этот блок у нас везде position: relative и z-index: 1 (тут выше, чем image), он центрирует контент (например на 1200, а потом на 960... 768 и т.д.) -->
<div class="center">
<!-- флекс на 100%, align-items: center, padding: 100px 0, ну и поиграть с паддингами можно... -->
<div id="hero-contents">
<!-- даем ширину макс. 55%, например -->
<div id="hero-text">
<h1>Education...</h1>
</div>
</div>
</div>
<!--/center -->
<!-- hero-image на position: absolute бех z-index, она ниже, чем нужный нам текст -->
<div id="hero-image">
<!-- картинка на прозрачном фоне (вдруг параллакс захотят или анимацию?) с максимальной шириной (нужно подобрать), чтобы на полэкрана -->
<img src="/" alt="">
</div>
<!--/hero-image -->
</div>
<!--/hero -->
</div>
<!--/top -->
<!-- content -->
<div id="content">
<div class="section">
<div class="center">
<!-- контент секции -->
</div>
</div>
<div class="section">
<div class="center">
<!-- контент секции -->
</div>
</div>
...
</div>
<!--/content -->
img теперь всегда можно подстроить под нужный макет с помощью object-fit, object-position и ширины/высоты.
