Пожалуйста, ВНИМАТЕЛЬНО ОЗНАКОМЬТЕСЬ прежде, чем оставлять заявку.
Прикладываю ТЗ. Большая часть работы уже выполнена, остается только закончить.
Дизайн-макет и комментарии к нему, а так же полное изначальное тз можно посмотреть по ссылке:
1. Исходники PSD, готовые к верстке (сетка, слои по папкам и т.д) и уже написанный код отправим отдельно
2. Технические условия для верстки:
2.1. Блочная верстка (HTML5 и CSS3 приветствуется).
(!) Сайт должен быть резиновым и адекватно открываться во всех масштабах браузера, а также на устройствах (!).
2.2. Cоблюдение стандартов W3C.
2.3. Комментирование кода (обязательно).
2.4. Для скриптов использовать библиотеку JQuery и ее плагины.
2.5. Использование CSS-эффектов вместо картинок (там, где это возможно).
2.6. Hover эффекты на CSS3 (transition – delay: 0.3 – 0.5).
2.7. Добавить Яндекс.Метрику. Коды предоставим (цели для Метрики, привязанные к успешно выполненным заявкам).
2.8. Вставить favicon (фавикон) в виде первой буквы названия, либо логотипа.
2.9. Все картинки, особенно большие фоновые, должны быть оптимизированы, сжаты и открываться максимально быстро.
2.10. Для заголовков каждого блока использовать тэги H1 – H5.
3. Важные моменты, которые нужно учесть:
3.1. – Ссылки в верхнем (плавающем) меню должны быть привязаны к якорям на странице (смотреть в папке с макетом какой якорь к какому блоку должен быть привязан).
3.2. – Название страницы, отображаемое во вкладке в браузере, скопировать из самого верхнего заголовка. (тег – title)
3.3. – При всплывании модальных окон, сайт должен затемняться примерно на 70%.
3.4. – Необходимо доделать модальные окна
3.5. – При клике на сорта робусты и арабики (сорт *, скрин*) должны открываться фотографии. Нужно заменить их на правильные.
4. Заявки должны приходить со следующими пометками в теме письма:
4.1. – Верхнее (плавающее) меню: «Получить консультацию из верхнего меню»
4.2. – Кнопка «Заказать звонок» под телефоном в шапке: «Заказ звонка (вверху)»
4.3. – Кнопка «Заказать звонок» под телефоном в подвале: «Заказ звонка (внизу)»
4.4. – Первый экран: «Заявка с первого экрана»
4.5. – «Заявка из карточки арабики»;
4.6. – «Заявка из карточки робусты»;
4.7. – Блок «Акция! При заказе от…»: «Заявка по акции – бесплатная доставка от 300кг»;
4.8. – Блок «Есть вопросы по условиям доставки и оплаты?»: «Нужна консультация по доставке и оплате»
4.9. – Блок «Получите условия эксклюзивного сотрудничества»: «Эксклюзивное сотрудничество»
4.10. – Блок «Получите наши образцы…»: «Заявка на образцы»
4.1. В последнем блоке на карте «Задайте вопрос нашему специалисту»: «Вопрос для специалиста»
5. Формы обратной связи и всплывающие окна:
5.1. – Вставить в формы захвата проверку ввода.
5.2. – Наличие телефона и email (где он есть) обязательно.
5.3. – Выводить уведомление-сообщение «Неверно заполнено поле» (пример на макете), если телефон или email (где он есть) не заполнен. При этом курсор ставить в верхнее обязательное поле.
5.4. – Все всплывающие окна закрываются крестиком в правом верхнем углу, либо кликом вне модального окна.
6. Другие важные моменты:
6.1. – Все кнопки, ссылки, поля, стрелочки имеют ховеры.
6.2. – Убрать прокрутку яндекс-карты мышкой. Сделать масштабирование только при нажатии на кнопки изменения масштаба сбоку.
6.3. – Вставить ссылку на разработчика внизу по центру: Разработано в «ВОСТРЕЦОВ & ДРУЖИНИН» (адрес для ссылки vdstudio.net) и логотип.
7. ВАЖНО: В вашем коде будут разбираться другие! Будьте, пожалуйста, Людьми!:)
8. Из скриптов нужно подключить:
8.1. – Модальное окно для того, чтобы получить консультации
8.2. – Модальное окно для того, чтобы узнать стоимость
8.3. – Модальное окно успеха
8.4. – Цели для Метрики, привязанные к успешно выполненным заявкам
8.5. – У каждого якоря должен быть свой адрес для привязки горячих ссылок в контекстной рекламе
Так же потребуется сделать динамические эффекты для главной страницы и заголовков. Заголовки должны подниматься снизу при прокрутке страницы, а на главной странице треугольники с преимуществами вокруг поля заявки должны "съезжаться" с боков страницы.
9. Крайний срок: 2 дня с момента принятия заказа с правками.
Очень сильно надеемся на приятное и долгосрочное сотрудничество с профессиональным верстальщиком (!) + помните, что для Вас это еще один симпатичный дизайн в Ваше портфолио.
Уже сделано: