Концепт: вёрстка лендинга детской школы программирования «Орбита»

Используемые навыки CSS3 HTML5 Landing Page Верстка Мобильные сайты

Описание

Разработать концепт лендинга для вымышленной детской школы программирования «Орбита» для детей 8–14 лет. Реального заказчика нет. Сделать дизайн и адаптивную вёрстку на HTML и CSS без конструкторов и фреймворков, с корректным отображением на ПК, планшете (до 1080 px) и телефоне (до 640 px).

Решение

— Спроектировала структуру и сверстала адаптивный лендинг на чистом HTML и CSS, без конструкторов и фреймворков.
— Реализовала три состояния: ПК, планшет до 1080 px, телефон до 640 px.
— Собрала первый экран с заголовком, кнопкой записи на пробный урок и фото.
— Добавила 4 карточки с цифрами и 4 карточки курсов по возрасту.
— Оформила 3 шага обучения и 3 тарифа с выделенным популярным.
— Внедрила частые вопросы на нативных details/summary.
— Сверстала форму записи (имя родителя, телефон, возраст ребёнка) с согласием на обработку данных и подвал.
— Настроила CSS Grid/Flexbox, переменные CSS; сетка карточек 4 → 2 → 1 колонка; на телефоне меню в кнопку, кнопки во всю ширину, плавная прокрутка к якорям.

Результат

Создала адаптивный лендинг-концепт вымышленной школы «Орбита» с полной структурой от первого экрана до подвала. Все блоки корректно отображаются на ПК, планшете и телефоне: сетка перестраивается, меню сворачивается в кнопку, кнопки растягиваются, аккордеон и форма работают нативно. Реальных данных о конверсиях и поведении нет, так как проект концептуальный.