HTML-лендинг для мастер-класса флориста
Для флориста Венеры Вышкиной разработан адаптивный лендинг для регистрации на бесплатный онлайн мастер-класс.
Страница собрана как самостоятельный проект на HTML, CSS и JavaScript. В лендинг входят программа мероприятия, примеры работ, отзывы и форма регистрации.
Задача
Нужно было создать отдельную страницу для продвижения онлайн мастер-класса и сбора регистраций.
Пользователь должен получить информацию о программе и формате встречи, посмотреть примеры работ и оставить контактные данные.
Лендинг не зависит от CMS. Его можно разместить на обычном хостинге, отдельном домене или поддомене.
Технологии
- HTML5;
- CSS3;
- JavaScript;
- CSS Grid;
- Flexbox;
- HTML-валидация формы;
- HTTPS.
Структура лендинга
Страница ведет пользователя от первого знакомства с мастер-классом к форме регистрации.
Первый экран
Название мастер-класса, дата, основное предложение и кнопки перехода к записи.
Программа и примеры
Темы занятия, примеры флористических работ и информация о формате.
Регистрация
Форма для контактов участника и блок с подарком после записи на мастер-класс.
Программа мастер-класса
В исходной странице программа разделена на четыре самостоятельные темы. Такая структура помогает быстро просмотреть содержание занятия до регистрации.
Цвет и настроение
Подбор оттенков и формирование общей палитры букета.
Форма букета
Круглые, свободные и асимметричные композиции.
Визуальные акценты
Работа с зеленью, фактурой и деталями композиции.
Упаковка
Финальное оформление букета без лишней декоративности.
Визуальная система
Лендинг оформлен как самостоятельный рекламный проект со своей цветовой системой. В дизайне используются сиреневые, розовые и светлые оттенки.
Крупные скругления, карточки, мягкие тени и цветочные изображения связывают разные блоки страницы.
CSS-переменные
Основные цвета, радиусы, фон карточек и тени вынесены в CSS-переменные. Цветовую систему можно менять без редактирования каждого блока отдельно.
Адаптивная верстка
Для основных сеток используются CSS Grid и Flexbox. Колонки перестраиваются при уменьшении экрана.
Десктоп
Блоки используют многоколоночную структуру и всю доступную ширину страницы.
Планшет
Сложные сетки сокращают число колонок и сохраняют порядок смысловых элементов.
Смартфон
Форма и карточки переходят в одну колонку, кнопки занимают доступную ширину.
Форма регистрации
В форме пользователь оставляет имя, телефон, e-mail и комментарий. Для обязательных полей используется базовая HTML-валидация.
Данные участника
- имя;
- телефон;
- e-mail;
- комментарий;
- согласие на обработку данных.
После регистрации
Заявка передается организатору. Для участника предусмотрено автоматическое письмо со ссылкой на онлайн-встречу.
В письмо входит подарок: гайд «Как собрать стильный букет».
Отправка заявок и проверка данных
Для формы настроен почтовый обработчик. Организатор получает контактные данные и комментарий участника.
Обязательные поля не позволяют отправить полностью пустую форму. Для e-mail используется проверка формата, а перед отправкой требуется согласие на обработку персональных данных.
Страница работает через HTTPS. Передача данных формы происходит по защищенному соединению.
Скриншот лендинга
На скриншоте показана готовая страница: первый экран, программа, примеры работ, отзывы и форма регистрации.
Что получилось
Готовая самостоятельная страница объединяет презентацию мастер-класса, примеры работ и сбор регистраций.
Без CMS
Лендинг работает как самостоятельная HTML-страница.
Адаптивная верстка
Сетка и форма перестраиваются под разные размеры экранов.
Сбор заявок
Регистрация встроена непосредственно в структуру лендинга.