☕ Zernishko

Zernishko - лендинг кофейни, созданный с использованием Bootstrap и JavaScript.

Preview

📌 О проекте

Сайт содержит основные разделы:

• приветственный экран (Hero section)
• блок «О нас»
• интерактивное меню
• отзывы клиентов
• контакты
• форма бронирования
• карта расположения кофейни

Интерфейс построен на Bootstrap, после чего внешний вид компонентов был переработан с помощью собственных CSS-стилей.

🛠 Используемые технологии

• HTML5
• CSS3
• Bootstrap 5
• JavaScript (Vanilla JS)
• Yandex Maps API

Интересные технические детали

• Переключение категорий меню через data-атрибуты
  Кнопки используют data-action, благодаря чему JavaScript управляет отображением разных категорий меню.

• Кастомизация Bootstrap компонентов
  Стандартные элементы (navbar, card, buttons, forms) переработаны с помощью собственных CSS-классов.

• Использование Bootstrap Grid для каталога
  Карточки товаров реализованы через адаптивную сетку row-cols.

• Ленивая загрузка изображений
  Для изображений используется атрибут loading="lazy" для оптимизации загрузки страницы.

• Кастомный маркер карты
  Для карты используется собственная SVG-иконка через iconLayout: "default#image".

• Организация CSS-классов по принципам BEM
  Например: product__img, product__description, review-card__text.

Чему я научилась в этом проекте

• Подключать и работать с Bootstrap.
  Использовать готовые компоненты и адаптивную сетку для построения интерфейса.
  Пример:

  <div class="row row-cols-1 row-cols-md-3 g-4">

• Подключать внешние API.
  Интегрировать сторонние сервисы в проект. Пример: подключение Яндекс Карты

  ymaps.ready(init);

⚙ Запуск проекта

Склонировать репозиторий:

git clone https://github.com/MethodGirl/Zernishko.git

Открыть файл index.html в браузере.

🌐 Деплой проекта

https://methodgirl.github.io/Zernishko/