Skip to content

Latest commit

 

History

History
112 lines (93 loc) · 7.6 KB

README.md

File metadata and controls

112 lines (93 loc) · 7.6 KB
Raw

Курсовая работа "Создание одностраничного сайта для проекта "Blanchard - художественная галерея".

Стэк: HTML, CSS, чистый JavaScript, верстка на Flexbox без bootsrap, библиотеки: Slider Swipper, JQueryAccordion, fslightbox, choices, tippy, just-validate, inputmask, API Яндекс карты.

В курсе "Профессия "Фронтенд разработчик с нуля до PRO", образовательной платформы Skillbox.ru

Функциональные требования

  • адаптивная вёрстка с корректным отображением на компьютере, планшете и мобильном устройстве: вся информация доступна и отображается
  • одинаковое отображение в браузерах Chrome, Firefox, Safari, Opera, Edge

Шапка сайта

  1. Логотип
  2. Ссылка "войти"
  3. Меню - при клике на пункт меню осуществляется плавный переход к соответствующему блоку.
  4. Нижнее меню — с выпадающими списками, внутри них должен быть реализован кастомный скролл (с определёнными стилями).
  5. Поиск по сайту.

В планшетной/мобильной версии: меню представляет собой кнопку, при нажатии на которую меню открывается и закрывается. Ссылка «войти» также переезжает в это меню.

Hero-блок

  1. Фоновое изображение. Оно должно анимироваться — фон должен то приближаться, то удаляться от пользователя.
  2. Заголовок.
  3. Описание.
  4. Подписка — плавно переводит пользователя в конец сайта, к карте.

В мобильной версии: все элементы центрируются.

Основной контент с семью разделами

О нас:

  • заголовок,
  • описание.

Галерея:

  • заголовок,
  • селект для фильтрации галереи (без функционала),
  • примечание,
  • слайдер - возможность листать фотографии.

В мобильной версии:

  • перелистывание слайдера должно работать по свайпу;
  • перелистывание меняется, вместо шести элементов листоается по одному.

Каталог:

  • заголовок,
  • описание,
  • табы с выбором языка\страны (переключение блоков табов должно быть плавным,
  • аккордеон с возможностью выбора художественного деятеля,
  • по клику на имя деятеля искусства слева меняется деятель.

События:

  • заголовок,
  • карточки с фото и описанием события,
  • кнопка "все события" - изначально событий должно быть шесть, три из них скрыты; по клику на кнопку показываем все события, кнопку скрываем.

В мобильной версии: события превращаются в слайдер с точками

Издания:

  • заголовок,
  • категории - кастомные чекбоксы,
  • инпуты ввода цены,
  • слайдер изданий,
  • само издание - фото, описание, кнопка "заказать" (без функционала).

В мобильной версии: категории становятся спойлером, слайдер превращается в обычные блоки.

Проекты:

  • заголовок,
  • описание (нужно также правильно реализовать тултипы - всплывающие подсказки),
  • слайдер партнёров проекта, показываем по три элемента; по наведении логотипы должны становиться цветными.

Контакты:

  • заголовок,
  • адрес,
  • форма обратной связи - валидация полей формы,
  • ссылки на whatsApp и Telegram с возможностью перехода,
  • карта - реализация черно-белой карты с цветным маркером, адрес маркера указан.

Футер сайта

  1. Логотип.
  2. Соцсети 0 три ссылки: "ВКонтакте", Instagram, Facebook.

Технологические требования

  1. Чистая, адаптивная, семантическая вёрстка.
  2. Пиксель-перфект вёрстка (под все разрешения). Возможны отличия на 1–3 пикселя.
  3. В каждом из браузеров должна открываться абсолютно идентичная вёрстка.
  4. Сайт проверен и в портретных, и в альбомных режимах. Весь контент должен быть доступен.
  5. БЭМ-именование классов.
  6. Минимум медиазапросов для реализации адаптива.
  7. Использование SVG-иконок.
  8. Удобный юзабилити для пользователя; все кнопки и ссылки явно дают понять, что на них можно кликнуть (имеют ховер-эффект) и курсор-лапку, также отменён outline, но заменён на всех кликабельных элементах на псевдокласс :focus.
  9. На мобильных устройствах ховеры не должны работать, вступает псевдокласс :active.
  10. Флексбокс-вёрстка, без использования фреймворков.
  11. Теги HTML- и CSS-документов должны быть валидными.

Улучшения и дополнения

Эти задачи не являлись обязательными, но они все реализованы.

  1. Модальные окна:
  • при открытии картин в Галереи в увеличенном виде с описанием;
  • при отправке заявки.
  1. На мобильной версии скролл к деятелю искусства после его выбора (блок "Каталог").
  2. Отправка заявки на email - форма в блоке "Контакты".
  3. Смена фонового изображения на первом экране сайта.

Использованные плагины