🎓 Createx Online Courses Landing Page

Адаптивный одностраничный сайт онлайн-школы Createx, разработанный с использованием HTML, CSS и JavaScript. Проект демонстрирует современный дизайн, плавные анимации, фильтрацию курсов, слайдеры и адаптацию под разные устройства.

📋 Содержание

Описание
Функционал
Используемые технологии
Структура проекта
Установка и запуск
Подключаемые библиотеки
Автор
Лицензия

🧩 Описание

Createx — это промо-лендинг для онлайн-школы, предлагающей курсы по маркетингу, дизайну, HR, менеджменту и разработке. Сайт выполнен в современном стиле и включает интерактивные элементы: фильтрацию направлений, слайдер преподавателей, плавную прокрутку и адаптивное меню.

⚙️ Функционал

🌐 Адаптивная верстка под все устройства
📂 Фильтрация курсов с помощью MixItUp
🧭 Плавная навигация по якорям
🧍‍♂️ Слайдер преподавателей на Slick Slider
💬 Слайдер отзывов
📁 Аккордеон в разделе программы
🍔 Бургер-меню и затемнение фона
🖼 Fancybox — для открытия видео-превью
🗺 Поддержка подключения Google Maps (в коде закомментировано)

🧱 Используемые технологии

HTML5 — семантическая разметка
CSS3 / Flex / Grid — стилизация и адаптивность
JavaScript (ES6) — интерактивность
jQuery — обработка событий и анимации
Slick Slider — реализация слайдеров
MixItUp — фильтрация направлений
Fancybox — модальные окна для видео

📂 Структура проекта

project/
│
├── index.html          # Основной HTML-файл
├── style.css           # Главные стили проекта
├── js.js               # Скрипты взаимодействия
│
├── fonts.css           # Подключение шрифтов
├── reset.css           # Сброс стандартных стилей браузера
│
├── /images/            # Изображения и иконки
│   ├── /1/ ...         # Элементы шапки
│   ├── /2/ ...         # Блоки контента
│   ├── /3/ ...         # Слайдер преподавателей
│
│── /fonts/             # Шрифты
│
└── README.md           # Документация проекта

🚀 Установка и запуск

Склонируй проект:

git clone https://git.homyk.space/Alena/Figma_1.git

Перейди в папку проекта:
```
cd Figma_1
```
Открой файл index.html в браузере:
- двойным кликом,
- или с помощью Live Server в VS Code.

🔗 Подключаемые библиотеки

Проект использует следующие внешние ресурсы:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.0/dist/fancybox/fancybox.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mixitup@3/dist/mixitup.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.0/dist/fancybox/fancybox.umd.js"></script>

👤 Автор

Createx Landing Page разработан как учебный проект. Автор: [Алёна Трущёва / plx112] Email: [plx112@homyk.space] Git: [https://git.homyk.space/Alena]

📄 Лицензия

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

4.9 KiB Raw Blame History Unescape Escape