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