Требуется HTML-верстка/Front-end разработка сайта по дизайн-макетам в PSD.

Максимальный срок сдачи: 25.03.2017.

Бюджет: по договоренности.

Макеты: PSD макеты приведены в порядок, слои сгруппированы по папкам, слоям и папкам заданы понятные имена, для требуемых элементов в отдельных слоях прорисованы состояния «active» и «hover».

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

• максимально разумное использование БЭМ;
• семантическая адаптивная верстка;
• максимальное соответствие версии для ПК макету PSD;
• желательна следующая связка: jQuery/HTML 5/CSS 3/Less;
• оптимизация размера страницы и скорости выполнения скриптов;
• код сопровождается понятными комментариями.

Описание функционала:

На всех страницах сайта: Меню выпадающее. Формы работают через AJAX, ответ отображается в том же окне. Реализовать AJAX запросы к тестовым скриптам, которые будут возвращать типовой ответ (для форм заказа ответ «Успешно» и пр.). AJAX запросы должны уметь обрабатывать ошибки и выводить соответствующее сообщение пользователю (для форы заказа ответ «Произошла ошибка при отправке формы. Свяжитесь с нами по телефону NNN-NN-NN» и пр.).

Главная страница («cb_main»):

• 1 ЭКРАН: Меню скрывается/раскрывается при клике/тапе (как и на всем сайте).
• 2 ЭКРАН: Пример работы: http://verstaemvse.ru/demo/eraser. При стирании верхнего слоя более чем на 90% открывается попап с формой. Работает при проведении пальцем по экрану и при проведении курсором мыши с зажатой левой клавишей.
• 3 ЭКРАН: Фон блока анимировано становится ярким при наведении курсора мыши, при тапе на любую часть блока кроме кнопки.
• 4 ЭКРАН: Фоновая картинка блока панорама и шире ширины блока. При перетаскивании мышкой или тапом фон сдвигается в направлении перетаскивания.
• 5 ЭКРАН: При нажатии на «Показать еще» открывается страница с галереей.

Страницы с услугами («cb_polirovka», «cb_tonirovka», «cb_detailing_all», «cb_modesta»):

• 1 ЭКРАН: Содержание дополнительного меню будет разное на страницах разных услуг. Видео автоматически начинает проигрываться при открытии сайта, присутствует кнопка включения/отключения звука.

Все страницы формируются из типовых блоков:

• БЛОК «Этапы». Может состоять из одного или нескольких этапов. После последнего этапа кнопка «Записаться» открывает попап с формой.
• БЛОК «Галерея работ». Состоит из фотографий различных элементов машины до и после оказания услуги. При наведении курсора/тапе конечное фото анимировано меняется на фото до оказания услуги. При нажатии на кнопку «Показать еще» отправляется AJAX запрос для загрузки дополнительных элементов галереи.
• БЛОК «Видео». Встроенный плеер с видео. Продумать возможность использования своего плеера для проигрывания видео с хостинга сайта (как и на всем сайте).
• БЛОК «Оборудование». При наведении курсора/тапе анимировано пропадает полупрозрачная заливка и текст блока.

Страница услуги мойка («cb_detailing_all»):

Отличие от внутренней страницы с услугами: Этапы оказания услуги состоят из трех частей. В зависимости от выбранного типа услуги в блоке этапы оказания услуг выводятся те или иные этапы. Итоговая цена выводится для каждого типа услуги своя. Пример: двухфазная мойка – выводим 9 этапов, стоимость от 900 руб., трехфазная мойка – выводим 9+1 этапов, стоимость от 1500 руб. и т.п.

Страница галереи («cb_gallery» и «cb_gallery_photo»):

В списке могут отображаться фото и видео. При клике/тапе на фото открывается попап с увеличенной версией фото. При клике/тапе на видео открывается попап с плеером и автоматически начинается проигрывание ролика. Попап закрывается при клике на фото или на затемненную область вокруг фото/видео. Видео будут загружаться на сторонний сервис (vimeo или youtube). При нажатии на кнопку «Показать еще» через AJAX подгружаются следующие 12 элементов галереи (фото или видео).

Остальные элементы и страницы без особенностей.

Адаптивность:

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

Для мобильных устройств и планшетов создается адаптивная версия: В шапке не выводится фоновое видео, меню минифицируется до иконки, при тапе на которую разворачивается/сворачивается меню. Остальные элементы перестраиваются и масштабируются.


* Ищем удаленных верстальщика и дизайнера на постоянное сотрудничество. Много интересных проектов.