Skip to content

Repository files navigation

📚 Booksy Project

Створено командою “CodeVibe” в рамках освітнього проєкту GoIT, потік FSON120

⚙️ Технічний опис проєкту

Booksy — адаптивний багатосекційний лендинг, створений командою CodeVibe згідно з технічним завданням курсу GoIT FullStack Developer.


📋 Загальні вимоги

  • Розмітка семантична та валідна.
  • Підключено сучасний ресет і нормалізацію стилів.
  • Використано систему змінних CSS.
  • Код стилів організований за принципом mobile-first.
  • Адаптивна верстка для трьох точок розбиття:
    • 320px+ — мобільна версія,
    • 768px+ — планшетна,
    • 1440px+ — десктопна.
  • Застосовано Flexbox для побудови макета.
  • Використано JavaScript для інтерактивності та роботи динамічних елементів.

🧩 Структура сторінки

  1. Header (Ігор Коваленко) — логотип, навігація, кнопка відкриття модального вікна.
  2. Hero (Skyline) — головний заклик до дії з зображенням і кнопкою переходу із використанням Swiper.js.
  3. Article + Events (Світлана Дуда) — коротка інформація про платформу та перелік актуальних подій із використанням Swiper.js.
  4. Books (Євгенія Ріпа) — динамічний рендер списку книжок через JS, зображення і ціна.
  5. Feedbacks (Дмитро Фарбун) — відгуки користувачів, реалізовані через Swiper.js.
  6. Location (Максим Сичов) — інтерактивна карта та контактна інформація.
  7. Modal Window Modal Window Books (Ірина Пона) — модальне вікно з формою реєстрації.
  8. Modal Window Books (Карен) — модальне вікно з детальною інформацією про книгу реалізовано через JS.
  9. Footer (Михайло K.) — навігація, соцмережі, політика конфіденційності.

💡 JavaScript функціональність

  • Ініціалізація Swiper для секцій Hero, Events і Feedbacks.
  • Реалізація відкриття/закриття модальних вікон.
  • Обробка подій кліків для навігації та форм.
  • Плавна прокрутка до секцій.
  • Анімації появи елементів при скролі.
  • Рендер контенту через JS (Books,Hero,Modals Window,feedbacks, Events).
  • Валідація форм перед відправкою.

🚀 Ключові ролі

РольУчасникGitHub
🧠 Team LeadДмитро Фарбун@Diamond-Fox.ua
🧭 Scrum-майстерДуда Світлана@Svitwave

👥 Команда розробників

УчасникРозділGitHub
Ігор Коваленко🧠 Header@Ihor-Kovalenko13
Ірина Пона💬 Modal Window,🔧 Modal Window Books@iryna-pona
Skyline💡 Hero Section@Skyline
Світлана Дуда📰 Article, 🎉 Events@Світлана-Дуда
Євгенія Ріпа📚 Books@Yevheniia Ripa
Максим Сичов📍 Location@Максим-Сичов
Михайло K.🔧 Footer, 💬 Feedbacks@Mykhailo-K
Карен🔧 Modal Window Books@karen

🔗 Посилання на Pull Requests

🧩 Список основних пул-реквестів кожного учасника (номери вкажіть після злиття):

УчасникРозділPull Requests
Ігор КоваленкоHeader#... , #...
Ірина ПонаModal Window#... , #...
Дмитро ЧорнийHero#... , #...
Світлана ДудаArticle + Events#Diamond-FoxUA#4, #Diamond-FoxUA#13
Євгенія РіпаBooks#... , #...
Дмитро ФарбунFeedbacks#... , #...
Максим СичовLocation#...
Михайло KрупаFooter#... , #...
Kарен ІсмаіловModal Window Books#... , #...

🧾 Примітка

Внесок кожного учасника збережений в історії комітів та записах Pull Request-ів на GitHub.


🌐 Опис проєкту

Booksy — це вебсайт для книжкової спільноти, де можна:

  • 📖 знаходити та купувати нові книги;
  • 🎟️ дізнаватись про події та зустрічі;
  • 🗞️ реєструватись на зустрічі;
  • 💬 залишати відгуки;
  • 🌍 знаходити локації книжкових подій.

🛠 Використані технології

HTML5CSS3JavaScriptGitHub



📐 Додаткові деталі

  • Макет виконано у Figma: Booksy Design
  • Тестування адаптивності через Chrome DevTools.
  • Валідація HTML/CSS — W3C Validator.
  • Оптимізація зображень — squoosh.
  • Деплой — GitHub Pages.

❤️ Вдячність

Проєкт реалізовано з любов’ю та ентузіазмом командою CodeVibe
під час навчання в GoIT FullStack Developer

Made with love

About

Booksy

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages