ТЗ по макету «eXtraSchool»
- фиксированная ширина 1200 пикселей
- на мобильных телефонах и планшетах лендинг вписывается в размер экрана, если разрешение экрана устройства выше или равно 1200 пикселям
- расположение по центру окна браузера по бокам фоновый цвет блока
- эффект параллакса, фоновое видео, видео в модальных окнах вынесено за рамки сроков и делается в последнюю очередь
- адаптивное меню и стрелки у слайдеров, условие менее 1600 пикселей
- Все попапы внутри PSD файла
100% внешнее соответствие макету. Лендинг должен всегда занимать 100% ширины экрана устройства и одинаково выглядеть как на мобилках, так и на десктопах.
1. Меню фиксированное, «следует за пользователем» при прокрутке
2. При нажатии на один из пунктов меню пользователь плавно переносятся к якорю. Расположение якорей следующее:
1) Преимущества- 2-ой экран
2) Отзывы – 3-ий экран
3) Free Вебинары – 4-ый экран
4) Курсы – 5-ый экран
5) Содержание курсов – 7-ой экран
6) ВК – открывает в новой вкладке
7) Ютуб – открывает в новой вкладке
8) Инстаграм – открывает в новой вкладке
9) Контакты – якорь на последний экран
10) На главную – открывает extraschool.ru
3. При наведении на пункты меню они окрашиваются в цвет f94550 (Соц сети тоже)
4. На первом экране вместо фотографии фоновое видео
Видео проигрывается автоматически, в случае, если на устройстве нельзя воспроизвести фоновое видео, то используется картинка из макета
4. Кнопка «начать подготовку» плавно пролистывает на следующий экран
При наведении на двойную бледную стрелочку она становится белой
ВТОРОЙ ЭКРАН
5. «Наши гарантии» – при наведении становится белой и открывает попап в котором текстом написано «Если вы решите, что наша подготовка неэффективна, то мы вернем деньги. Для этого напишите нам через форму Контакты, которая находится внизу сайта.» и кнопка «закрыть», закрывающая попап
6. Две белых стрелочки на втором экране становятся желтыми при наведении, при нажатии пролистывают на один экран ниже
ТРЕТИЙ ЭКРАН
Слайдер на 3 пролистывания. Вместо фотографий видео.
Пока не все видео отзывы собраны. Вместо каждой из фото вставляем случайное видео к канала
ЧЕТВЕРТЫЙ ЭКРАН
Плитки нужны именно разных размеров, как на макете. Пока пользователь не навел мышку в квадрате написана тема вебинара. При наведении квадрат становится желтым и в нем появляется время и дата проведения вебинара.
В первом: «Основы грамматики» при наведении «10 СЕНТЯБРЯ» «20:00»
Во втором: «Важнейшая лексика » при наведении «20 СЕНТЯБРЯ» «16:00»
В третьем: «Фразовые глаголы » при наведении «30 СЕНТЯБРЯ» «18:00»
Как выглядит плитка при наведении показано в середине
Легкий параллакс эффект на 3 желтый кружочка
По клику на «Записаться» открывается extraschool.ru, т.к. страница еще не готова
ПЯТЫЙ ЭКРАН
По клику на «Купить» появляется попап, макет которого приложен. При наведении на «купить» кнопка заливается красным цветом, шрифт становится белым. Пример по середине.
ШЕСТОЙ ЭКРАН
При наведение на правую плитку
СЕДЬМОЙ ЭКРАН
Слайдер на 3 картинки
При нажатии на «купить курсы» появляется попап покупки
ВОСЬМОЙ ЭКРАН
Повтор пятого экрана
ДЕВЯТЫЙ ЭКРАН
При нажатии на «купить» появляется четвертая версия попапа, где указано, что в пакет входят все четыре курса
БЛОК «КОНТАКТЫ»
При наведении на «ВК» «Почта» и «YouTube» они закрашиваются красным цветом
Кнопка «Спросить» отправляет письмо на UnitedGamersFederation@gmail.com
Если все поля заполнены, то появляется уведомление "Спасибо, ваше пиьсмо отправлено, ожидайте ответа"
Если какое-то из полей не заполнено, то выскакивает уведомление «не все поля заполнены»