Необходимо сверстать 4 страницы для сайта в тематике недвижимость с помощью bootstrap. Срок выполнения 5 дней.
1. Главная
2. Страница каталога
3. Страница конкретной новостройки
4. Лэндинг про франшизу
Для страниц 1-3
- анимация списка меню
У каждого пункта слева стоит линия. При наведении эта линия должна вытянуться по ширине (по горизонтали), покрыв всю область под текстом. То есть по выходу у нас получается белый текст пункта меню на оранжевом прямоугольнике.
- анимация карты
На карте округ при наведении приобретает чуть более темный цвет. Анимация происходит резкая, без плавных переходов. Аналог
www.realestate.com.au/buy При нажатии (выборе) округа, он приобретает самый темный оттенок (в файле они все есть) и остается таковым.
В архиве:
- шрифты, используемые во всех макетах;
- главная страница 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 секунд!
- Что требуется от вас
По аналогии с Концепцией
Разделы Сколько это стоит сначала левая часть, затем вторая.
- Последний экран
Форма и заголовок как бы «падает», лого и телефон выезжает слева к форме.
Архив с материалами для верстки
drive.google.com/file/d/0...