Верстка страниц при помощи flexbox

В ходе этого задания вам предстоит научиться верстать адаптивные страницы с использованием flexbox.

Задание 1

Создайте отдельный проект с двумя папками html и css.
В каждой папке должно быть по пять файлов, названных цифрами от одного до пяти (5 .html файлов и 5 файлов .css)
Свяжите файлы стилей с .html файлами.
Сверстайте пять страниц, согласно приведенным ниже макетам:

Не забывайте о правильном оформление тега <head>;
В качестве переломных точек нужно использовать те, что были приведены в лекции об адаптивности;
Ширину блоков можно указывать как в процентах, так и с помощью соотвветствующих свойств flexbox;
Внутри блоков могут быть как буквы/слова, приведенные на макетах, так и ваш собственный контент (но в этом случае позаботьтесь о том, чтобы границы блоков хорошо считывались)

Создайте отдельный проект с файлами .html и .css
Скачайте необходимые для задания картинки и распакуйте их в папку /images внутри вашего проекта

Ассеты.zip
Сверстайте полноценную страничку, используя эти макеты для десктопной и мобильной версии:

Десктопная версия

Мобильная версия страницы

Подберите кастомный шрифт на сайте Google Fonts и подключите его к странице;
При клике на иконки сервисов должны открываться новые страницы соотвветствующих сайтов. Вы можете использовать как ссылки на главные странички этих сайтов, так и адреса конкретных аккаунтов на них;
В мобильной версии меню должно быть полностью скрыто;
Не нужно верстать пиксель в пиксель. Важно лишь соблюдать одинаковые расстояния между аналогичными элементами и придерживаться общей компановки элементов так, как показано на изображениях выше.