Заказ закрыт
Страница с меню

Срочный заказ Ссылка на заказ
Бюджет: по договоренности
Заказчик выбрал исполнителя:
Фрилансер  
Необходимо сверстать тестовую страницу согласно дизайн-макетам.

Дизайн-макеты доступны в Figma по ссылке: www.figma.com/file/5dPAPZ...

## Конечный результат

Конечным результатом является ZIP архив, включающий package.json и настроенный сборщик Gulp с двумя командами: `npm run build` и `npm run dev`. 

Первая команда компилирует готовый HTML файл `index.html` и собирает файл CSS из SCSS-файлов.

Вторая команда запускает локальный сервер с активным слежением и перезагрузкой браузера при изменении файлов HTML и SCSS.

Название файла архива должно быть в формате `front-ivanov.zip`, где `ivanov` – Ваша фамилия. 

Архив пришлите в чате задания.

Готовый скомпилированный проект закачайте на публичный сервер (например GitHub) и пришлите ссылку.

## Меню

### Горизонтальное меню

Горизонтальное меню должно прилипать к верхнему краю экрана, когда пользователь скроллит вниз. Спустя 200px дальнейшей прокрутки вниз меню должно плавно уезжать наверх за пределы экрана. При прокрутке наверх меню должно плавно выезжать. При прокрутке до верха страницы меню должно вставать на исходное положение.

Для прилипания использовать свойство `position: sticky`.

При изменении высоты верхней части шапки, где расположен логотип, положение и поведение прилипающего меню должны оставаться корректными.

На мобильных и планшетах горизонтальное меню не показывать.

### Мобильное меню

На дизайн-макете в левой части экрана отображено мобильное меню. На десктопе его не показывать.

Мобильное меню должно плавно выезжать при клике на иконку-гамбургер и закрываться при клике на неактивную область или иконку-крестик.

### Подменю

По ховеру на элемент меню показывать подменю. Использовать только CSS.

## Шрифты

Использовать Google Fonts. Размеры шрифтов указывать в `rem`.

## Размеры

Для отступов использовать `rem` за исключением отступов между колонками с постами, где нужно использовать `px`.

## Retina

Все изображения должны поддерживать Retina экраны и включать `srcset` атрибут.

## Посты

Использовать flex для создания трехколоночной сетки. На планшетах отображать две колонки, на мобильных одну.

Отступ между постами и горизонтальным меню – `3rem`.
Опубликован 21.11.2022 в 14:26 Последнее изменение: 21.11.2022 в 14:34
Заказ находится в архиве

Выберите способ верификации:

Обновите страницу после прохождения верификации.