readme_1

2025-10-05 22:06:23 +03:00
parent 563f19822c
commit 754d01618f
1 changed files with 132 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,132 @@
+
+---
+
+# 🎓 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)]*
+
+---
+
+## 📄 Лицензия
+
+Этот проект учебный.
+
+---
+
+