Общие требования:
При выполнении тестового надо использовать систему сборки gulp, bootstrap 4 последней версии. Использование jade будет плюсом. При выполнении задания pixel-perfect не требуется, необходимо визуальное соответствие макету.
Все элементы должны быть по максимуму реализованы с помощью классов bootstrap. Элементы макета отличающиеся от стандартных элементов bootstrap должны быть реализованы с помощью кастомизации соответствующих файлов scss bootstrap.
Требования к макету:
В макете есть header и footer фиксированной высоты, оставшееся место занимает контентная часть. Максимальная ширина контентной части 1200px.
Header: слева кнопка отвечающая за открытие/скрытие бокового меню, логотип и dropdown с двумя пунктами: русский и английский.
Content: состоит из бокового меню и основного блока с данными.
Боковое меню на десктопе по умолчанию открыто, при нажатии на кнопку меню в левой части хедера - меню прячется влево, при этом основной блок занимает все свободное пространство. В мобильной версии, меньше 1024px, боковое меню наезжает сверху на основной контент, при этом меню внутри блока скролится.
Основной блок состоит из трех колонок, левая и правая фиксированной ширины, а центральная часть занимает все оставшееся место. Контент во всех трех блоках независимо друг от друга скролится. В первой колонке, первый элемент всегда прижат к верху, а остальная часть скролится. На размерах экрана меньше 1024px отображаются первая и вторая колонки, на экране меньше 768px отображается только вторая колонка.
Пункты меню и текст для них в правой части, должны лежать в json файле. Нужно реализовать из этого файла вывод данных на страничку и по клику на определенных пункт в меню, показывать соответствующее содержимое
Минимальное разрешение экрана на котором должен корректно отображаться макет - 320px.
Что влияет на оценку тестового:
- чистота и аккуратность кода, как стилей так и верстки
- соответствие макету
- соответствие требованиям
- умение использовать имеющиеся классы
- умение организовать и оптимизировать работу с помощью gulp
Результатом выполненного задания, является АРХИВ со сборкой всего проекта. Проект должен запуститься после выполнение в консоли команд: npm i && gulp. При необходимости, если нужно выполнить другие команды, то укажите это в письме.
Все детали, не описанные в данном задании кандидат может решить на свое усмотрение.