Нужно сверстать landing page на основе предоставляемого дизайна.
Дизайн прикрепляю к заданию:
ТЗ в видео формате (3:57 минуты):
PSD готовый, модальное окно, ховеры, страница Спасибо.
Работаем по СБР
Всяческую помощь я предоставляю.
Тех условия для верстки
1. блочная верстка (html5 и CSS3 приветствуется)
2. соблюдение стандартов W3C
3. комментирование кода (обязательно)
4. Для скриптов использовать библиотеку JQuery и ее плагины
5. Использование CSS эффектов вместо картинок (там где это возможно)
6. Hover эффекты должны быть реализованы на CSS3 (transition-delay:
0.3-0.5)
ВАЖНО: В вашем коде будут разбираться другие! Будьте Людьми!:)
Стандарты:
Необходимо точное соответствие PSD-макету по всем параметрам, пиксель
в пиксель.
Верстка должна быть фиксирована по центру, кроссбраузерна и
отображаема на мобильных устройствах в том же формате, что и на ПК.
Верстаемая страница всегда должна состоять из частей с фиксированной
шириной (контентом) и «резиновых» фоновых изображений, которые
должны адекватно растягиваться на всю ширину любого монитора
(стандартно на 1980 px.)
При верстке необходимо оптимизировать изображения под быструю
загрузку, с минимальными потерями качества.
В целом, всегда должен быть приоритет на быструю загрузку сайта.
Все тексты, располагаемые на сайте, должны быть реализованы именно в
виде текста, а не изображения.
Все модальные окна должны появляться строго по центру экрана и оставаться в фиксированном положении. Закрываться данные окна должны при нажатии на «крестик» в правом верхнем углу и при нажатии на область вне окна. Область вне окна должна затемняться в соответствии с дизайном. Крестик при наведении и нажатии должен видоизменяться.
Из скриптов нужно подключить:
-Модальное окно на заказ звонка, заказ товара, получение прайс листа. На почту приходят разные письма с пометкой – Заявка нп обратный звонок, Запрос на получение прайс листа, Заказ товара. С основной формы – Заявка на расчет доставки, Заявка на консультацию.
На форму захвата настроить реферальные хвосты для отслеживания данных о посетителе. Пример я покажу
Поля ввода должны реагировать на вставку курсора. То есть вставляя курсор, маска формы должна исчезать. Также поле, в котором находится курсор. обретает рамку или иной эффект.
В поле Телефон должна быть обязательная проверка данных. При вводе букв в этом поле, форма должна ругаться выводя сообщение «*Введите корректный номер телефона»
Настроить страницу Спасибо. После оформления заявки на обратный звонок, консультацию, заказ товара и т.д Открывается отдельная страница Спасибо. В этой странице надо поменять картинку на такую же которая стоит на главной сайта.
Все кнопки должны иметь 3 состояния: в обычном положении, при наведении мышки и при нажатии мышки. Пример реализации: lp4key.ru кнопка должна реалистично «нажиматься». Текст в кнопке должен быть реализован именно текстом, а не
изображением. Сама по себе кнопка должна быть реализована через CSS3.
Все элементы сайта должны быть сделаны выезжающей анимацией – пример lp4key.ru
Данные для замены реквизитов в футере, я предоставлю.
Скорость загрузки сайта должна быть минимальной. Проверка страницы здесь
по всем пунктам должно быть 100 из 100.
Заменить номер телефона.
Загрузить на наш хостинг.
Все детали рассказал в ТЗ
Срок выполнения работы – 3 дня
Очень сильно надеемся на долгосрочное сотрудничество с толковым верстальщиком!!! + для Вас это еще один симпатичный дизайн в Ваше портфолио.
Если понравится с вами работать, через 2-3 дня дадим еще один заказ на верстку лендинга.