Цільова сторінка Тату-студії 🎨

Вигляд:

Цей репозиторій містить вихідний код для сучасної та адаптивної цільової сторінки тату-студії. Сторінка має повноекранну "героїчну" секцію, динамічний слайдер-галерею, форму запису та контактну інформацію. Усі елементи покращено плавними анімаціями та ефектами паралакса.

Репозиторій Демо-сторінка

Можливості

✔Адаптивний дизайн: Гнучкий макет, що легко адаптується до екранів настільних комп'ютерів, планшетів і мобільних пристроїв.

✔Повноекранна "героїчна" секція: Привертає увагу відвідувачів з перших секунд.

✔Плавний, анімований FAQ-акордеон для лаконічного відображення інформації.

✔Ефекти паралакс-прокрутки для фону "героїчної" секції.

✔Витончені анімації появи контенту під час прокручування.

✔Додаткова, святкова анімація падаючого снігу для візуального ефекту.

✔Темний/світлий режим: Автоматично визначає налаштування системної теми та дозволяє перемикати її вручну. Вибір користувача зберігається в локальному сховищі для постійності.

✔Динамічна галерея: Слайдер для демонстрації робіт татуювання.

✔Форма запису: Інтерактивна форма для бронювання сеансу.

✔Контактна інформація: Забезпечує легкий доступ до номерів телефонів, електронної пошти та посилань на соціальні мережі.

✔Анімації та ефекти паралакса: Плавні візуальні ефекти, що покращують досвід користувача.

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

HTML

SCSS (BEM)

JavaScript

Структура проєкту

├── 📁 css/             # Скомпільовані CSS-файли.
├── 📁 fonts/           # Файли шрифту (Oswald).
├── 📁 img/             # Фонові зображення, лого та інші ресурси.
├── 📁 js/              # JavaScript-файли.
│   └── 📄 main.js      # Основна логіка застосунку, обробка подій та анімації.
├── 📁 scss/            # Вихідні SCSS-файли, організовані за призначенням.
│   ├── 📁 abstracts/   # Змінні, міксіни, анімації та шрифти SCSS.
│   ├── 📁 base/        # Базові стилі (reset, typography тощо).
│   ├── 📁 components/  # Стилі для повторно використовуваних елементів UI (кнопки, інпути тощо).
│   ├── 📁 layout/      # Стилі для основних секцій сторінки (хедер, футер, інтро).
│   └── 🎨 main.scss    # Головний SCSS-файл для імпорту всіх частин.
├── 📁 video/           # Відеофайли для головної секції.
└── 🌐 index.html       # Основний HTML-файл із усім контентом і структурою.