diff --git a/README.md b/README.md index e69de29..178ae4e 100644 --- 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 + + + + + + +``` + +--- + +## 👤 Автор + +**Createx Landing Page** разработан как учебный проект. +Автор: *[Алёна Трущёва / plx112]* +Email: *[plx112@homyk.space]* +Git: *[[https://git.homyk.space/Alena](https://git.homyk.space/Alena)]* + +--- + +## 📄 Лицензия + +Этот проект учебный. + +--- + +