Антон Усачев

Табличная верстка? Фи...

td {
    width: 80%;
}
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Размер текста можно задавать в величинах vw, vh, vmin, vmax, например, font-size: 2.5vw даст размер шрифта в 2,5% от ширины экрана.

Даю подсказку. Это если все делать на цсс.

А так-то можно и svg воткнуть.

Никак, потому что псевдоэлементы принадлежат блоку.
Обход такой. Если нужно дать какой-то фон, дать его для :after с z-index: 1.
Для :before – z-index по умолчанию (он будет под :after).
Таким образом имитируем что-то под фоном блока.
Для контента блока z-index: 2 (если там будет контент).,
Ну и не забываем играть с position, чтобы все это расставить по местам.

В современной верстке есть 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 и ширины/высоты.

function setNewBlockContent(source, target) {
	target.html(source.html());
}
//	дайте всем блокам один класс для простоты выборки, например
$('.myBlock').on('mouseover', function() {
	setNewBlockContent($(this), $('#text'));
});

Ну или .text(), если нужно.

Я тоже за локальное размещение шрифтов. (Да, бывает, что гугль недоступен, и шрифты не идут с адреса гугль-фонтс).
Однако рекомендую обработать ttf или otf программкой типа этой, и подключить получившийся цсс.

Да.
Например, сделать окно общего стиля, а внутрь напихать блоков с disaplay: none.
На div-trigger вешать атрибут типа data-pop="pop-01", "pop-02" и т.д., и давать блокам класс pop-01, pop-02...
Соответственно в скрипте писать примерно так:

$('[data-pop]').click(function() {
	var popName = $(this).attr('data-pop'); // или $(this).data('pop')

	$('.pop-' + popName).addClass('active') // что подразумевает в цсс-файле .data-pop.active {display: block}
});

Остальным блокам убирать класс active.
Это один из подходов. Может, вы прям из базы тягяете контент или аяксом, тогда все еще проще: подтягиваем контент и показываем поп-ап.