Лендинг (посадочная страница) — одностраничный сайт, который знакомит с продуктом, услугой или событием и побуждает к действию (подписка, покупка, регистрация). После практики вёрстки создадим полноценный лендинг, используя всё, чему научились: HTML, CSS, Flexbox, адаптивность.
Аналог из курса Python: «Шифр Цезаря» — там закреплялись циклы и строки; здесь — вёрстка и визуальная структура. Проект объединяет Flexbox, адаптивность и формы.
Создать одностраничный лендинг, который:
header, main, section, footerfooter@media для адаптива:hover для интерактивностиinput, button<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Название продукта</title>
<link rel="stylesheet" href="style.css">
</head>
Заголовок, подзаголовок, кнопка. Фон — градиент или изображение. Flex для центрирования.
3 карточки в ряд (flex, flex-wrap). На мобильном — в колонку. Иконка/заголовок/описание.
Блок призыва к действию. Форма: email + кнопка «Подписаться». Контрастный фон.
Колонки или одна строка. Ссылки, копирайт. Адаптивно.
header, hero, секции, footerМы создали лендинг — типовую структуру одностраничного сайта. На следующем уроке начнём изучать JavaScript: переменные и типы данных.
viewport в head — на мобильных разрешениях вёрстка не будет адаптироваться.id — ссылки не будут работать корректно.label или с неправильным for — это будет неудобно для доступности.Выбери тему: курс, приложение, событие, продукт. Доработай контент: реальные тексты, осмысленные заголовки.
Добавь блок с 2–3 отзывами. Карточка: аватар (placeholder), имя, текст, рейтинг (звёзды — символы).
Сделай навигацию со ссылками на секции: #hero, #features, #cta. При клике — прокрутка к секции. Задай id секциям.
Проверь лендинг на 320px, 768px, 1024px. Подкорректируй отступы, размеры шрифтов, переносы.
Создай переменные CSS (или дублируй стили) для светлой и тёмной темы. Переключатель пока не нужен — просто две версии (например, index.html и index-dark.html).
Добавь секцию с 4–6 изображениями (placeholder). Сетка 2×3 или 3×2, адаптивно.
Блок «Тарифы»: 2–3 карточки с названием, ценой, списком возможностей, кнопкой. Одна карточка — акцентная (другой цвет, «Популярный»).