|
Описание: |
Нужно сверстать главную страницу для сайта адаптивно. Исходник в Photoshop. Мобильная версия отдельно не прорисовывалась, будут даны пожелания как должны перемещаться блоки при сужении экрана.
Общие требования к верстке:
Использование препроцессора и наличие методологии для разработки стилей обязательно.
Использование фреймворков приветствуется, за исключением экзотических. Использовании фреймворков необходимо обозначить в заявке и согласовать.
Изображения, которые могут быть представлены в векторном формате (логотипы, иконки, специфические символы, элементы декора, рисованные линиями без градиентов изображения и т.п.) должны быть реализованы как SVG. При отсутствии соответствующих файлов в пакете исходников необходимо запрашивать недостающие файлы или согласовать использование растровых изображений.
Программирование JavaScript не нужно, осуществляется отдельно от верстки.
Специфические требования текущего задания:
Шапка
Меню верстается в одном уровне, выпадающие меню верстать не нужно. Меню должно быть реализовано в контейнере немаркированного списка <ul></ul>. Активный пункт меню должен отличаться от стальных наличием дополнительного класса (например, "active") для соответствующего контейнера <li></li>. Телефон и электронная почта вместе с иконкой должны быть реализованы в контейнерах ссылок <a></a>. При сужении экрана и дефиците места в шапке должны отображаться: логотип без надписи "Оценка качества клиентского сервиса №1 в России и СНГ", телефон с почтой, пустой квадратный блок для символа раскрывающегося меню.
Первый блок со 2мя вкладками
Ярлыки ко вкладкам "Тайный покупатель" и "Экспертная помощь", а также сами вкладки, могут быть активными и неактивными. Состояние ярлыков и вкладок определяется наличием дополнительных классов (например, "active") для соответствующих контейнеров ярлыка и вкладки. Необходимо сверстать все состояния ярлыков и вкладок. Переключение реализовывать не нужно. При сужении экране и дефиците места ярлыки превратить в кнопки, иллюстрация перемещается вверх, над списком "01, 02...", под текстом "Целая "армия"...".
Блоки с кнопками "Написать"
При сужении экране и дефиците места иллюстрации людей допустимо убирать (на усмотрение верстальщика), кнопка перемещается вниз.
Блок с Акцией
Таймер обратного отсчета не верстается. Реализовать отдельным адаптивным контейнером с шириной 100%, вставив в него изображение для наглядности. При сужении экране и дефиците места иллюстрация перемещается вверх, над текстом "Закажите 7...", под заголовком "АКЦИЯ С...".
Блок с Клиентами
При наведении на логотип фоном отображается иллюстрация к логотипу, а сам логотип обесцвечивается и осветляется.
Блок с Кейсами
Верстается только то, что отображено в проекте, без переключений. Заголовок "Автомобильная отрасль" и текст "Известный автомобильный..." должны находиться в отдельном контейнере для возможности будущей реализации переключений. Точки навигации верстать не нужно, временно реализовать через отдельный контейнер с изображением для наглядности. При сужении экране и дефиците места заголовок "Автомобильная отрасль" перемещается вверх, над текстом "Известный автомобильный...", под заголовком "Кейсы", контейнер с точками перемещается вниз, под кнопки "Банковская отрасль" и "Ритейл".
Блок с Отзывами
Из отзывов верстается только один блок с отзывом (например, "Nespresso"). Точки навигации верстать не нужно, временно реализовать через отдельный контейнер с изображением для наглядности.
Фоотер
Текст "Посмотреть на карте" - отдельная ссылка в контейнере <a></a>. Меню во второй и третьей колонке должны быть реализованы в отдельных контейнерах немаркированного списка <ul></ul>, внутри <li></li> - пункты меню <a></a>. Телефон и электронная почта вместе с иконкой должны быть реализованы в контейнерах ссылок <a></a>. При сужении экране и дефиците места блок с контактами должен оказаться 2ым по счету, после блока с логотипом и адресом, а блоки с меню - 3им и 4ым соответственно.
Мои условия для сотрудничества:
Если у вас нет или почти нет отзывов, то частичная предоплата только через Безопасный платеж. Если отзывы имеются, то предоплата так же возможна через YooMoney и на карты РФ. Через сомнительные сервисы типа PaySend и т.п. не работаю, просьба учитывать это обстоятельство.
Я стараюсь основательно подходить к описанию задания. Если у вас после его прочтения и просмотра исходников остается много вопросов, особенно тех, на которые есть ответы в задании, скорее всего, не стоит тратить свое и мое время.
Если вы не указываете цену, я не рассматриваю вас в качестве исполнителя и удаляю заявку.
Если вы представляете студию, я не рассматриваю вас в качестве исполнителя и удаляю заявку.
Исходники по этой ссылке
check-insight-index-final-1.psd - исходник с открытой вкладкой "Тайный покупатель"check-insight-index-final-1.psd - исходник с открытой вкладкой "Экспертная помощь"check-insight-index-hovers.psd - hover'ыостальное и так понятно
Ищу исполнителя на перспективу дальнейшего сотрудничества. Работа появляется регулярно. Если сможете предоставить ссылки на готовые работы, где можно будет взглянуть на код (интересует качество), это будет существенным плюсом. Опыт верстки под Wordpress особенно приветствуется (указать в заявке). |
