Blanchard - художественная галерея

HTML-верстка
216 просмотров
18.08.2021
1920×71798 МБ
Blanchard Desktop 1920.png

[h3]Лендинг имеет адаптивную вёрстку и корректно отображается на компьютере, планшете и мобильном устройстве, все информация доступна и отображается. [/h3][h3][u] [/u][url=http://blanchard.sergey-gadaev.tmweb.ru/][u]Ссылка на сайт[/u][/url] [/h3] [b]Шапка сайта[/b] [list=1][*]Логотип.[*]Ссылка "войти".[*]Меню - при клике на пункт меню осуществляется плавный переход к соответствующему блоку.[*]Нижнее меню - с выпадающими списками, внутри них реализован кастомный скролл (с определенными стилями).[*]Поиск по сайту.[/list]В планшетной\мобильной версии меню предоставляет собой кнопку, при нажатии на которую меню открывается и закрывается. Ссылка "войти" так же переезжает в это меню. [b]Hero-блок[/b] [list=1][*]Фоновое изображение анимируется - фон то приближается, то удаляется от пользователя. Каждые 2 секунды фоновое изображение меняется на следующее, всего 3 слайда.[*]Заголовок.[*]Описание.[*]Подписка - плавно переводит пользователя в конец сайта, к карте.[/list] [i]В мобильной версии все элементы центрируются.[/i] [b]Основной контент с семью разделами[/b] [b]1. О нас:[/b] [list][*]Заголовок.[*]Описание.[/list][b]2. Галерея:[/b] [list][*]Заголовок.[*]Селект для фильтрации галереи (без функционала)[*]Примечание.[*]Слайдер - возможность листать фотографии.[/list] [i] В мобильной версии перелистывание слайдов работает по свайпу, перелистывание меняется, вместо шести элементов листается по одному[/i]. [i] При клике на фотографию появляется модальное окно с фотографией в увеличенном виде с описанием.[/i] [b]3. Каталог:[/b] [list][*]Заголовок.[*]Описание.[*]Табы с выбором языка\страны (плавное переключение блоков).[*]По клику на имя деятеля искусства слева меняется деятель.[/list] [i]В мобильной версии по клику на деятеля происходит скрол до нужного деятеля.[/i] [b]4. События:[/b] [list][*]Заголовок.[*]Карточки с фото и описанием события.[*]Кнопка "все события" - изначально событий шесть, три из них скрыты. по клику на кнопку показываются все события, а кнопка скрывается.[/list] [i]В мобильной версии события превращаются в слайдер с точками.[/i] [b]5. издания:[/b] [list][*]Заголовок.[*]Категории - кастомные чекбоксы.[*]Инпуты ввода цены.[*]Слайдер изданий.[*]Само издание - фото, описание, кнопка "заказать" (без функционала).[/list] В мобильной версии категории становятся спойлером, слайдер превращается в обычные блоки. [b]6. Проекты:[/b] [list][*]Заголовок.[*]Описание (так же реализованы тултипы - всплывающие подсказки).[*]Слайдер партнеров проекты показывается по три элемента, при наведении логотипы становятся цветными.[/list][b]7. Контакты:[/b] [list][*]Заголовок.[*]Адрес.[*]Форма обратной связи - валидация полей формы. Отправка формы на почту заказчика.[*]Ссылки WhatsApp и Telegram с возможностью перехода.[*]Карта - реализация чёрно-белой карты с цветным маркером.[/list] [b]Футер сайта[/b] [list=1][*]Логотип.[*]Соцсети - три ссылки: "ВКонтакте", Instagram, Facebook.[/list]