Дизайн представляет собой многостраничный сайт (или длинный Landing Page) для онлайн-школы или курсов. Основная цель сайта — привлечь студентов,Стиль: Минимализм, Corporate, Clean UI. Используется модульная сетка (обычно Bootstrap-совместимая), много "воздуха" (отступов), что облегчает восприятие контента.
Типографика: Используется современный шрифт без засечек (Sans Serif), скорее всего Ubuntu или Lato. Заголовки крупные, жирные, хорошо структурированные по иерархии (H1, H2, H3).
Графика: Качественные фото людей (студентов, менторов) в деловом стиле, векторные иконки (outline стиль) для преимуществ.
3. Структура главной страницы (UX/UI Breakdown)
Для описания работы можно разбить страницу на ключевые блоки:
Header (Шапка): Логотип, навигационное меню (About, Courses, Events, Blog, Contacts), кнопки входа/регистрации и кнопка "Get consultation".
Hero Section (Первый экран):
Крупный заголовок с УТП (Уникальное Торговое Предложение).
Кнопки действия ("Explore courses", "About us").
Справа — крупное изображение (герой/студент), создающее позитивный образ.
Внизу часто идет блок статистики (количество студентов, выпускников, опыт).
About Us (О нас): Текстовый блок с описанием миссии + фото или иллюстрация.
Featured Courses (Популярные курсы):
Сетка карточек (Grid).
Карточка содержит: фото курса, категорию (Marketing, Management, HR), название, цену и имя преподавателя.
Benefits (Преимущества): Секция с иконками и кратким описанием (например: "Только практикующие преподаватели", "Поддержка 24/7").
Events (События): Список ближайших вебинаров или лекций в виде горизонтальных карточек с датой, временем и кнопкой регистрации.
Certificate (Сертификат): Блок доверия, показывающий пример сертификата, который получит студент.
Team / Tutors (Команда): Слайдер или сетка с фото преподавателей, их именами и должностями.
Testimonials (Отзывы): Слайдер с цитатами студентов.
Blog (Блог): Превью последних статей (картинка, дата, заголовок, тег).
Subscribe (Подписка): Форма захвата (Lead Magnet) для подписки на новости.
Footer (Подвал): Сложная структура с колонками (карты сайта, контакты, соцсети, копирайт).
Разработка Landing Page для онлайн-школы "Createx"
Задача: Сверстать адаптивный, кроссбраузерный сайт для образовательной платформы с современным UI.
Стек технологий: HTML5, CSS3 (SCSS), JavaScript (ES6+),
Особенности реализации:
PixelPerfect: Точное соответствие макету Figma.
Адаптив: Сайт корректно отображается на мобильных (Mobile First), планшетах и десктопах.
Интерактив: Реализованы слайдеры (Swiper.js/Slick), модальные окна, бургер-меню, ховер-эффекты на кнопках и карточках.
Семантика: Использованы семантические теги для улучшения SEO.
Формы: Валидация форм подписки и регистрации.







