Необходимо сверстать 4 страницы для сайта в тематике недвижимость с помощью bootstrap. Срок выполнения 5 дней.
1. Главная
2. Страница каталога
3. Страница конкретной новостройки
4. Лэндинг про франшизу
Для страниц 1-3
- анимация списка меню
У каждого пункта слева стоит линия. При наведении эта линия должна вытянуться по ширине (по горизонтали), покрыв всю область под текстом. То есть по выходу у нас получается белый текст пункта меню на оранжевом прямоугольнике.
- анимация карты
На карте округ при наведении приобретает чуть более темный цвет. Анимация происходит резкая, без плавных переходов. Аналог
При нажатии (выборе) округа, он приобретает самый темный оттенок (в файле они все есть) и остается таковым.
В архиве:
- шрифты, используемые во всех макетах;
- главная страница 1170 px в .psd и .jpg;
- главная страница с открытой картой со всеми видами подсветки 1170 px .psd и .jpg;
- карта России в форматах .ai и .jpg;
- страница каталога новостроек 1170 px .psd и .jpg;
- страница карты новостройки 1170 px .psd и .jpg
Для страницы 4 ниже описали анимацию элементов, которая возникает при прокрутке страницы
Анимация элементов:
- Первый экран
Контурные иконки на 6 цветных ромбах, при наведении, меняются на залите сплошным цветом (белым) и появляется тень под самой иконкой. В файле все есть (hover). Все плавно.
- Лестница (Заголовок)
Плавно появляется сначала лестница, а затем начинают появляться цифры с текстом ПО ОЧЕРЕДИ. 1 пункт с текстом, затем 2-й и так далее.
- Организаторы
Логотипы просто по очереди появляются ПЛАВНО.
- Концепция
Сначала появляются круги, анимация плавная, но быстрая, можно сделать эффект, будто бы они упали сверху.
Текст появляется плавно.
- Единая команда
Сначала появляется логотип и слоган «соединяем регионы устраняем барьеры». От него вырастают пунктирные линии, а из пунктирных линий образовываются шарики. В них затем появляется текст, по кругу, начиная с «Все новостройки России». Не более 4-5 секунд!
- География присутствия
Все округа карты это отдельный слой. Начиная слева, округа появляются, как только появились все появляется текст и маркеры. Не более 3 секунд!
- Что требуется от вас
По аналогии с Концепцией
Разделы Сколько это стоит сначала левая часть, затем вторая.
- Последний экран
Форма и заголовок как бы «падает», лого и телефон выезжает слева к форме.
Архив с материалами для верстки