🌐 Landing_Figma

Landing_Figma — это адаптивный лендинг, разработанный по макету из Figma.
Проект демонстрирует современные приёмы вёрстки и интерактивности на чистом HTML, CSS и JavaScript — без сторонних библиотек и фреймворков.
Главный акцент сделан на микроанимациях, интерактивных элементах и чистой структуре кода, что делает страницу лёгкой и быстрой.

🧱 Основная идея проекта

Сайт разработан как демонстрация корпоративного лендинга SEO-агентства.
Он объединяет в себе четкую типографику, минимализм, логичную навигацию и живой интерфейс.
Каждая секция — отдельный акцент, от заголовка до анимированных карточек с услугами.

📁 Структура проекта
project/
│
├── index.html          # Основная HTML-разметка (структура всех блоков)
├── reset.css           # Сброс базовых стилей браузера
├── style.css           # Основные стили: сетка, адаптив, анимации, медиазапросы
├── main.js             # JS-функционал: бургер, слайдеры, аккордеоны, свайпы
└── /images/            # Все изображения (логотип, фоны, иконки, иллюстрации)

⚙️ Основной функционал
🔹 Навигация

Два состояния хедера: обычный и компактный для мобильных устройств

Активное выделение текущего пункта меню

Выпадающее подменю “Больше услуг” с динамическим изменением текста (“Меньше услуг” / “Больше услуг”)

🔹 Бургер-меню

Реализовано полностью на JavaScript

При открытии блокируется скролл страницы

Адаптировано под мобильные устройства с плавным появлением

🔹 Аккордеон-слайдер

Каждый элемент открывается кликом с плавной анимацией

При раскрытии активная карточка увеличивается, остальные сворачиваются

На мобильных устройствах аккордеон превращается в свайп-слайдер с точками навигации

🔹 Свайп-слайдер (mobile)

Работает при ширине экрана до 600px

Поддерживает перелистывание жестами

Индикаторы-сферы (dots) создаются динамически

Реализован через нативные JS-события touchstart, touchmove, touchend

🔹 Второй слайдер (раздел преимуществ)

Автоматическое выравнивание карточек

Реакция на клики и свайпы

Точки навигации появляются только на мобильных устройствах

Используется плавное смещение через transform: translateX()

💡 Технологии и подходы
Технология	Использование
HTML5	Семантическая и модульная структура
CSS3 / Flexbox / Grid	Гибкая адаптивная сетка
JavaScript (Vanilla)	Интерактивность, логика меню и слайдеров
Media Queries	Адаптив под разные устройства
Google Fonts (Roboto)	Единая типографика во всём проекте
SVG	Иконки без потери качества

🧩 Особенности реализации

Плавные анимации при наведении и кликах

Использование transform, opacity, transition для визуальных эффектов

Полная адаптивность: от десктопа до мобильных экранов

Все интерактивные элементы работают без перезагрузки страницы

Минимальное использование внешних зависимостей — чистый код и высокая производительность

Файловая структура упрощает дальнейшую поддержку и масштабирование

🚀 Как запустить проект

🔸 Вариант 1: Открыть напрямую

Скачай или клонируй репозиторий

Открой index.html в браузере

🔸 Вариант 2: Через локальный сервер

Чтобы корректно отображались пути и изображения:

# если установлен Node.js
npx http-server . -p 8080

# или с помощью Live Server в VS Code
# ПКМ → "Open with Live Server"


После этого сайт будет доступен по адресу:
👉 http://localhost:8080

📱 Адаптивность
Устройство	Поддержка
🖥️ Десктоп	Полноценная версия с анимацией
💻 Планшет	Перестроение блоков, сохранение интерактивности
📱 Смартфон	Свайп-слайдеры, бургер, оптимизированная структура
🧑‍💻 Автор проекта

Автор: [Алёна Трущёва / plx112]
Email: [plx112@homyk.space]
Git: [[https://git.homyk.space/Alena](https://git.homyk.space/Alena)]
Роль: Frontend-разработчик
Цель: Практика адаптивной вёрстки, JS-анимаций и UX-интерактивов

📄 Лицензия

Этот проект учебный.