Верстка главной страницы для сайта адаптивно

Нужно сверстать главную страницу для сайта адаптивно. Исходник в Photoshop. Мобильная версия отдельно не прорисовывалась, будут даны пожелания как должны перемещаться блоки при сужении экрана.

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

• Использование препроцессора и наличие методологии для разработки стилей обязательно.
• Использование фреймворков приветствуется, за исключением экзотических. Использовании фреймворков необходимо обозначить в заявке и согласовать.
• Изображения, которые могут быть представлены в векторном формате (логотипы, иконки, специфические символы, элементы декора, рисованные линиями без градиентов изображения и т.п.) должны быть реализованы как SVG. При отсутствии соответствующих файлов в пакете исходников необходимо запрашивать недостающие файлы или согласовать использование растровых изображений.
• Программирование JavaScript не нужно, осуществляется отдельно от верстки.

• Шапка

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

  . Активный пункт меню должен отличаться от стальных наличием дополнительного класса (например, "active") для соответствующего контейнера
. Телефон и электронная почта вместе с иконкой должны быть реализованы в контейнерах ссылок . При сужении экрана и дефиците места в шапке должны отображаться: логотип без надписи "Оценка качества клиентского сервиса №1 в России и СНГ", телефон с почтой, пустой квадратный блок для символа раскрывающегося меню.
• Первый блок со 2мя вкладками

  Ярлыки ко вкладкам "Тайный покупатель" и "Экспертная помощь", а также сами вкладки, могут быть активными и неактивными. Состояние ярлыков и вкладок определяется наличием дополнительных классов (например, "active") для соответствующих контейнеров ярлыка и вкладки. Необходимо сверстать все состояния ярлыков и вкладок. Переключение реализовывать не нужно. При сужении экране и дефиците места ярлыки превратить в кнопки, иллюстрация перемещается вверх, над списком "01, 02...", под текстом "Целая "армия"...".

• Блоки с кнопками "Написать"

При сужении экране и дефиците места иллюстрации людей допустимо убирать (на усмотрение верстальщика), кнопка перемещается вниз.

• Блок с Акцией

Таймер обратного отсчета не верстается. Реализовать отдельным адаптивным контейнером с шириной 100%, вставив в него изображение для наглядности. При сужении экране и дефиците места иллюстрация перемещается вверх, над текстом "Закажите 7...", под заголовком "АКЦИЯ С...".

• Блок с Клиентами

При наведении на логотип фоном отображается иллюстрация к логотипу, а сам логотип обесцвечивается и осветляется.

• Блок с Кейсами

Верстается только то, что отображено в проекте, без переключений. Заголовок "Автомобильная отрасль" и текст "Известный автомобильный..." должны находиться в отдельном контейнере для возможности будущей реализации переключений. Точки навигации верстать не нужно, временно реализовать через отдельный контейнер с изображением для наглядности. При сужении экране и дефиците места заголовок "Автомобильная отрасль" перемещается вверх, над текстом "Известный автомобильный...", под заголовком "Кейсы", контейнер с точками перемещается вниз, под кнопки "Банковская отрасль" и "Ритейл".

• Блок с Отзывами

Из отзывов верстается только один блок с отзывом (например, "Nespresso"). Точки навигации верстать не нужно, временно реализовать через отдельный контейнер с изображением для наглядности.

• Фоотер

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

, внутри
- пункты меню . Телефон и электронная почта вместе с иконкой должны быть реализованы в контейнерах ссылок . При сужении экране и дефиците места блок с контактами должен оказаться 2ым по счету, после блока с логотипом и адресом, а блоки с меню - 3им и 4ым соответственно.

• Если у вас нет или почти нет отзывов, то частичная предоплата только через Безопасный платеж. Если отзывы имеются, то предоплата так же возможна через YooMoney и на карты РФ. Через сомнительные сервисы типа PaySend и т.п. не работаю, просьба учитывать это обстоятельство.
• Я стараюсь основательно подходить к описанию задания. Если у вас после его прочтения и просмотра исходников остается много вопросов, особенно тех, на которые есть ответы в задании, скорее всего, не стоит тратить свое и мое время.
• Если вы не указываете цену, я не рассматриваю вас в качестве исполнителя и удаляю заявку.
• Если вы представляете студию, я не рассматриваю вас в качестве исполнителя и удаляю заявку.

• check-insight-index-final-1.psd - исходник с открытой вкладкой "Тайный покупатель"
• check-insight-index-final-1.psd - исходник с открытой вкладкой "Экспертная помощь"
• check-insight-index-hovers.psd - hover'ы
• остальное и так понятно