Техническое задание
Нужно сверстать landing page на основе предоставляемого дизайна.
Дизайн в psd скину отдельно:
PSD готовый, сетка и все такое.
Тех условия для верстки
1. блочная верстка (html5 и CSS3 приветствуется). Сайт должен быть резиновым и адекватно открываться во всех масштабах!!!
2. соблюдение стандартов W3C
3. комментирование кода (обязательно)
4. Для скриптов использовать библиотеку JQuery и ее плагины
5. Использование CSS эффектов вместо картинок (там где это возможно)
6. Hover эффекты на CSS3 (transition – delay: 0.3 – 0.5)
7. Вставить Метрику. Коды предоставим. (Цели для Метрики, привязанные к успешно выполненным заявкам. Цель должна засчитываться только после того как введен корректно телефон, заявка ушла и показалось окно успеха)
8. Вставить фавикон в виде первой буквы названия либо логотипа
9. Собрать на популярной цмс (утвердить у нас). На выходе клиент должен иметь возможность редактировать все блоки (менять текст и картинки, заголовки, добавлять-удалять информацию).
Моменты, которые нужно учесть:
1. Логотип наверху сделать кликабельный, перебрасывающий на главную страницу
2. Название страницы, отображаемое во вкладке в браузере, скопировать из самого верхнего заголовка.
3. Верхнее меню должно быть закреплено и при прокрутке всегда оставаться на перед глазами
4. Заявки должны приходить со следующими пометками в теме письма:
- Меню: «Запрос бесплатной консультации из меню»
- Первый экран кнопка Оставить заявку: «Заявка с первого экрана»
- Товар из карточки товара: «Заказ на конкретный товар из карточки товара» (автоматом должно подставляться название конкретного товара)
- Кнопка Купить под карточкой товара «Заказ на конкретный товар под карточкой товара» (автоматом должно подставляться название конкретного товара)
- Кнопка Хочу оформить заказ: «Заказ после каталога»
- Кнопка заказать с подрком: «Заказ товара с подарком»
- Кнопка Задать вопрос перед футером: «Вопрос с сайта»
- Кнопка Заказать звонок в футере: «Заказ звонка из футера»
4. Вставить в формы захвата проверку ввода. Имя не обязательно. Наличие телефона обязательно. При установке курсора в поле «телефон» должен появляться шаблон номера серым цветом в формате (+_ (___) ___-____). Выводить сообщение «Введите правильно свой телефон» если телефон не заполнен.
5. Окна Заказать звонок и Окно успеха закрываются крестиком либо кликом вне модального окна.
6. Видео-отзыв нам предоставят в течение пары дней, сразу передадим вам.
7. Вставить ссылку на разработчика внизу по центру: Разработано в «ВОСТРЕЦОВ & ДРУЖИНИН» (адрес для ссылки vdstudio.net) и логотип.
8. Для автобустеров в карточках товара написать сноску, что Данный товар не участвует в акции
ВАЖНО: В вашем коде будут разбираться другие! Будьте Людьми!:)
Из скриптов нужно подключить:
-Модальное окно на заказ звонка
-Модальное окно успеха
-Модальное окно с описанием каждого товара
- Модальное окно на «Оставить заявку»
- Цели для Метрики, привязанные к успешно выполненным заявкам
-Динамическое плавающее меню
Все детали рассказал в ТЗ
Дедлайн: 4 дня с момента принятия заказа с правками
Очень сильно надеемся на долгосрочное сотрудничество с толковым верстальщиком!!! + для Вас это еще один симпатичный дизайн в Ваше портфолио.
Ссылка на макет:
модальные окна: