Вёрстка Адаптивная.
Есть макет.
Шапка сайта. Шапка всегда закреплена вверху экрана, даже когда пользователь находится в другой части страницы. При скроле имеет непрозрачность 90% и блюр эффект.
Пример:
www.apple.com/ru/ При наведении на любую из 9 кнопок (Логотип, Портфолио, О продукте, Цвета, Список моделей, Доставка и оплата, Прайс-лист, Отзывы? 8 ХХХ ХХХ ХХ ХХ) белый цвет меняется на 20% серого (см. в psd).
При нажатии на кнопку «ЛОГОТИП» пользователь попадает на начало страницы (плавная анимация в виде скрола из любой части страницы).
При нажатии на кнопку «О продукте» пользователь попадает на раздел «О продукте» (плавная анимация в виде скрола из любой части страницы).
При нажатии на кнопку «Цвета» пользователь попадает на раздел «Цвета» (плавная анимация в виде скрола из любой части страницы).
При нажатии на кнопку «Модели» пользователь попадает на раздел «Список моделей» (плавная анимация в виде скрола из любой части страницы).
При нажатии на кнопку «Доставка и оплата» пользователь попадает на раздел «Доставка и оплата» (плавная анимация в виде скрола из любой части страницы).
При нажатии на кнопку «Прайс» пользователь попадает на раздел «Прайс-лист» (плавная анимация в виде скрола из любой части страницы).
При нажатии на кнопку «Отзывы» пользователь попадает на раздел «Отзывы» (плавная анимация в виде скрола из любой части страницы).
При нажатии на кнопку «8 ХХХ ХХХ ХХ ХХ» пользователю предлагается позвонить по этому номеру телефона.
При нажатии на иконку «WhatsApp» или надпись «WhatsApp» или "Отвечаем до 5 мин" в новой вкладке браузера создаётся чат в WhatsApp с номером +7 ХХХ ХХХ ХХ ХХ.
1-й экран. Чехлы с логотипом.
При наведении на один из 12 логотипов активный логотип становится цветным, пропадает жёлтый стикер и отображается соответствующий активному логотипу дизайн чехлов.
При нахождении курсора за пределами 12 логотипов появляется жёлтый стикер на чехле и 12 логотипов становятся серого цвета.
2-й экран. Брендированная защита телефонов Ваших клиентов и сотрудников.
Статичная картинка. Нужно сделать небольшую тень под чехлом, который находится справа.
3-й экран. Защищает ровно столько…
Ползунок у картинки можно двигать.
Пример:
www.spigen.com/pages/expl... только телефон чёрного цвета всегда, а чехол прозрачный.
4-й экран. О продукте.
При наведении на кнопку «Хочу в гости» оттенок кнопки становится светлее (см. в psd).
При нажатии на кнопку «Хочу в гости» открывается pop-up форма с открытыми полями «ИМЯ» и «ТЕЛЕФОН» и рядом кнопка «Хочу в гости».
При нажатии на кнопку «Хочу в гости» происходит отправка заполненных данных на почту [Email скрыт]
5-й экран. Силиконовые чехлы.
Сначала появляется чёрный чехол на белом фоне, а затем анимация с правой части экрана появляется прозрачный чехол на чёрном треугольнике.
6-й экран. Портфолио.
Встроить виджет инстаграм, который отображает последние 9 фотографий из профиля:
Instagram.com/XXXXXX
При нажатии на виджет в новой вкладке браузера открывается ссылка Instagram.com/XXXXXX
При нажатии на кнопку «Подписаться» происходит подписка на данный профиль Instagram.com/XXXXXX
7-й экран. Цвета.
Статичная картинка.
8-й экран. Список моделей.
Важно сделать так, чтобы по SEO хорошо продвигались данные запросы в Яндекс и Google.
Пример:
youcase.ru/examples 9-й экран. Доставка и оплата.
При наведении на кнопку «Запросить счёт» оттенок кнопки становится светлее (см. в psd).
При нажатии на кнопку «Запросить счёт» открывается pop-up форма с открытыми полями «ИМЯ» и «ТЕЛЕФОН» и рядом кнопка «Запросить счёт».
При нажатии на кнопку «Запросить счёт» происходит отправка заполненных данных на почту [Email скрыт]
При наведении на кнопку «Оплата картой» оттенок кнопки становится светлее (см. в psd).
При нажатии на кнопку происходит переход в новой вкладке браузера по ссылке:
tochka.com/my/XXXXXX 10-й экран. Прайс-лист.
При наведении на кнопку «Получить КП» оттенок кнопки становится светлее (см. в psd).
При нажатии на кнопку «Получить КП» открывается pop-up форма с открытыми полями «ИМЯ» и «ТЕЛЕФОН» и рядом кнопка «Получить КП».
При нажатии на кнопку «Получить КП» происходит отправка заполненных данных на почту [Email скрыт]
11-й экран. Отзывы.
Статичные картинки.
12-й экран. Подвал сайта.
При нажатии на иконку Instagram в новой вкладке браузера открывается ссылка
www.instagram.com/XXXXXX При наведении на кнопку «Рассчитать стоимость» оттенок кнопки становится светлее (см. в psd).
При заполненных полях «ИМЯ» и «EMAIL» и нажатии на кнопку «Рассчитать стоимость» происходит отправка заполненных данных на почту [Email скрыт]
---
Просьба прикреплять портфолио к своему отклику