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