Адаптивная верстка лендинга

Основные требования:

• Верстка (HTML5) кроссбраузерная под FF, Chrome, Opera, IE 11 and latest.
• Верстка должна быть блочная - используем минимум вложенных блоков
• Единицы измерения должны быть rem, кроме отдельно оговоренных вариантов
• Используем БЭМ для именования
• Верстка должна быть адаптивный: на ЛЮБОЙ ширине экрана не должно быть “не влезающих”, не корректно “переносимых”, “съезжающих” блоков. Минимальную ширину принимаем в 320 пикселей.
• Весь JS подключается верстальщиком - используем clean JS - без подключения тяжелых библиотек фреймворков (например jQuery), если это не оговорено отдельно
• CSS код (CSS3):

• Структурный, отбивка табами. + минимизированный.
• Комментариями обозначены начало/конец крупных модулей/блоков разметки.
• Допускается использование вендорных префиксов.
• Создаем critical Css для каждой сверстанной страницы.

• Изображения:
  • Для “устаревших” браузеров используем jpg, png
  • Для современных браузеров используем webp (в том числе и для фоновых изображений)
  • Используем LazyLoading
• Шрифты: все шрифты подключаем с https://fonts.google.com, если это не оговорено отдельно. Все шрифты должны подключатся с display=swap.
• Микро разметка / микро данные: минимально необходимо: Навигация, Хлебные крошки, Организация, Товар.
• для js и css файлов делаем preload
• Пиксель перфект: умеренно (главное чтобы блоки были как в макете, шрифты соответствовали)

Блок “Шапка” - должна быть зафиксирована вверху для всех ширин экрана

Блок “поиск” - поведение на декстоп версии (http://joxi.ru/brRLexaI7vX4p2): при фокусировке на поле поиска оно (или блок поиска в целом) увеличивается вдвое и закрывает блок телефона. в мобильной версии поле поиска показывается под шапкой

Блок “Слайдер на главной” (http://joxi.ru/Dr8v3YdIo8BpB2) - не смотря на то, что контролы управления слайдами не отрисованы, поведение слайдера должно быть реализовано, т.е. слайды должны листаться на автомате (для моб версии должен поддерживаться свайп), с задержкой например в 5 секунд.

Блок “Каталог” - кнопка “Показать все” (для мобильной версии) - показывает заранее скрытые блоки карточек категорий

Блок “Реализованные проекты” (http://joxi.ru/bmokYKxI34ZQym)

• 1 - кнопки переключения между слайдерами
• 2 - текущий активный слайдер