6.2 KiB
🌐 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-интерактивов
📄 Лицензия
Этот проект учебный.