figma_02_readme

README.md

@@ -0,0 +1,127 @@
+🌐 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-интерактивов
+
+📄 Лицензия
+
+Этот проект учебный.