Задание: HTML-верстальщик. Сформировать резиновую адаптивную вёрстку страницы-презентации объекта «Фрунзенская набережная» (Дистанционная работа)
Этапы работы над задачей
Скачайте архив проекта, разархивируйте его и добавьте в свою рабочую область редактора кода.
Откройте макет в Figma, экспортируйте и подключите графику для кадрирования и ретинизации экранов (пример кадрирования, пример ретинизации).
Настройте плагин Live Sass Compiler так, чтобы он компилировал CSS-файл в папку /css/style.css.
Для того чтобы CSS-файл скомпилировался в папку /css, откройте файл settings.json (скриншот) и переопределите настройки плагина в строке savePath (скриншот) на "savePath": "~/../css/".
Адаптивно сверстайте основное содержимое страницы landing.html, используя подготовленные миксины, которые находятся в папке scss/global/_mixin.scss, основываясь на дизайне из предоставленного макета Figma (скриншот).
Доработайте утилитарный класс
и адаптивную вёрстку страницы под корректное отображение на любой ширине экрана с применением «резинового» подхода.
Сформируйте все состояния интерактивных элементов согласно UI-kit (скриншот).
Критерии оценки
Применена «резиновая» вёрстка для корректного отображения страницы на любой ширине от 360 до 4000 пикселей.
Вёрстка адаптирована под все разрешения, указанные в макете.
Растровые изображения подготовлены для экранов с плотностью пикселей 2х.
Изображения подключены с учётом их адаптации.
Стилизация выполнена с помощью препроцессора Sass.
Семейства шрифтов и цвета записаны в SCSS-переменных.
Сформированы все состояния элементов из UI-kit.
При недостаточной высоте основного содержимого подвал страницы прижат к низу экрана (скриншот).
Поля формы находятся внутри тега
