133 lines
4.9 KiB
Markdown
133 lines
4.9 KiB
Markdown
|
||
---
|
||
|
||
# 🎓 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)]*
|
||
|
||
---
|
||
|
||
## 📄 Лицензия
|
||
|
||
Этот проект учебный.
|
||
|
||
---
|
||
|
||
|