---

# 🎓 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           # Документация проекта
```

---

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

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

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

2. Перейди в папку проекта:

   ```bash
   cd Figma_1
   ```

3. Открой файл `index.html` в браузере:

   * двойным кликом,
   * или с помощью Live Server в VS Code.

---

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

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

```html
<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](https://git.homyk.space/Alena)]*

---

## 📄 Лицензия

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

---