Задачи:
Сверстать лендинг на основе файлов PSD
Настроить формы, всплывающие окна, анимацию (НЕ паралакс)
Настроить страницу конфиденциальности
Сделать страницы: Thank you page и Политика Конфиденциальности (страницы предоставлю)
Установить на лендинге коды: вебаналитики и ретаргетинга, обратный звонок и дургие (коды представлю)
Настроить цели
PSD-файлы тут:
Требования:
Валидность верстки
Кроссбраузерность
Адаптивная верстка (корректно отображался на разных экранах десктоп, ноутбуки и планшеты – НЕ нужна отдельная верстка на все устройства и девайсы)
Высокая скорость загрузки (зеленая зона теста PageSpeed Insights)
Чтобы весь функционал работал безотказно
Функции для программирования:
Блок "Акция дня"
Форма "Получить подарок"
"100% гарантия конфиденциальности" – при нажатии на текст появляется страница с политикой конфиденциальностью = эта функция для всех форм на сайте
Внутри формы при заполнении телефона должно появляться подсказка +7 (___) ___-__-__ для облегчения ввода номера телефона. Поле не дает возможности вводить буквы.
Если номер введен не корректно, то внутри формы появляется сообщение "укажите ваш телефон"
Настроить анти-спам на форме
После заполнения любой формы загружается страница благодарности site.ru/thank.html – загружается без задержки, чтобы пользователь несколько раз не нажимал кнопку "отправить"
После заполнения формы загружается страница благодарности
Все вышеописанные функции для всех форм на сайте
Блок "Какие потолки мы устанавливаем?"
При нажатии на кнопку "Рассчитать стоимость" появляется всплывающее окно
"Оставьте ваш номер телефона"
При наведении на изображении потолков, срабатывает анимация
Анимация:
Увеличение изображения при наведение мышкой на него:
Так происходит для всех изображений потолков на сайте
При нажатии на картинку потолка с лупой появляется всплывающая Форма "Хотите такой же потолок"?
Она появляется при нажатии на картинку с потолком с лупой внизу т.е. при нажатии хоть на лупе. хоть на картинке, должна появляться эта форма. При этом происходит затемнение экрана.
В форме должна быть анимация салюта как в этом примере:
Блок "примеры наших работ"
В нем есть меню. При нажатии на типы потолков показываются только эти потолки
Блок "Отзывы наших клиентов"
При нажатии на надпись "Послушать оригинал" или иконку, происходит проигрывание записи аудиоотзыва
Блок "Что чаще всего волнует клиентов?"
Первый вопрос и ответ видны, у других ответов не видно.
При нажатии на вопрос, появляется под ним ответ, а ответ к предидущему вопросу скрывается
Исполнитель выбирается на основе следующих данных:
1. Примеры работ (ссылки на сайты в вебе, НЕ макеты)
2. Изучите ТЗ и задайте три вопроса к нему
3. Ваша цена и сроки