Сверстать простой лендинг, используя HTML и CSS без JS

Страницу сайта (лендинг) https://www.uxcrush.com/figma-landing-page-template-for-app необходимо сверстать в 2 этапа.

Этап 1. Сверстать сайт с использованием HTML CSS, используя только пункты 1.1 – 1.10 из https://html5book.ru/osnovy-html/ и пункты 2.1 – 2.14 из https://html5book.ru/osnovy-css/ . Создать архив.

Этап 2.Изменить вёрстку сайта из прошлого задания, используя возможности HTML5 и CSS3. Предусмотреть:
+ Общую структуру (к примеру - хедер, футер, боковые поля, основной контент и т.д.) выстроить с использованием grid.
+ Блок с использованием flex-box.
+ Использовать теги HTML5. (1.1 – 1.10 из https://html5book.ru/osnovy-html/ )
+ Использовать переменные CSS3 (2.15 – 2.31 из https://html5book.ru/osnovy-css/)