На уроках 9–12 мы изучили Flexbox, позиционирование, псевдоклассы и адаптивность. Этот урок — практика перед проектом «Лендинг»: закрепим комплексные навыки вёрстки.
Сверстай hero-блок: заголовок, подзаголовок, кнопка. По центру, на фоне градиента или картинки.
Три карточки с иконками в ряд. На мобильном — в колонку. Flex, gap, media queries.
Footer: три колонки (О компании, Контакты, Соцсети). На мобильном — в столбец. Flex или grid (если знаком).
Карточка с наложением: изображение, полупрозрачный оверлей, текст по центру. Адаптивная высота.
Мы закрепили навыки вёрстки. На следующем уроке создадим мини-проект «Лендинг».
max-width у изображений — картинки могут «разъехаться.margin: auto не всегда срабатывает с flex — и всё равно использовать оба подхода сразу.Сверстай верхнюю часть лендинга: hero (заголовок, подзаголовок, кнопка) и ниже — блок «Преимущества» из 3 карточек. Адаптивно.
Блок «О нас»: слева — текст (заголовок, абзацы), справа — изображение. На мобильном — изображение сверху. Flex, order или меняй direction.
Шапка: логотип, навигация, кнопка. На мобильном — компактнее. Фиксированная при скролле (sticky или fixed).
Три отзыва в ряд. Карточка: аватар, имя, текст, рейтинг. Адаптив. При hover — подсветка.
Call-to-action: призыв к действию, кнопка, контрастный фон. По центру, с отступами.
Собери из блоков уроков 9–13 целостный прототип: hero, преимущества, о нас, отзывы, CTA, footer. Без полного контента — достаточно структуры и стилей.
Сетка 3×2 изображений. gap, адаптивность. При hover — лёгкое увеличение или overlay.