🌐 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] Роль: Frontend-разработчик Цель: Практика адаптивной вёрстки, JS-анимаций и UX-интерактивов

📄 Лицензия

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