Вёрстка по макету из олимпиады. Часть 5
В этом интерактивном курсе мы разбираем вёрстку макета из студенческой олимпиады по фронтенду от HTML Academy и Яндекса. Участникам нужно было сверстать сайт по графическому макету с учётом адаптивности и переполнения.
Это пятая часть курса. В ней мы создадим разметку и базовую стилизацию промо-блока. Вот графический макет компонента.
Начнём со структуры секции. Добавим элемент <section> с классом hero. Он будет контейнером для всех элементов компонента.
Добавим изображение в раздел. Мы считаем, что это содержательное изображение, поэтому добавляем его в разметку. Однако, реализация с помщью фона тоже возможна. Определим значения атрибутов src, width и height. Укажем alt для альтернативного описания картинки.
Добавим элемент <div> с классом hero__wrapper. Элемент используем в качестве обертки для текста и ссылки. Это поможет в дальнейшем стилизовать текст и ссылку отдельно от изображения.
Внутри обертки добавим заголовок <h2> с классом hero__title. Здесь возможны два варианта разметки — <h1> или <h2>. Если считаете, что это заголовок всей страницы, можете использовать h1. Мы считаем, что это заголовок подраздела, а заголовок всей страницы должен быть другим, поэтому используем <h2>.
Добавим описание с помощью <p> с классом hero__text.
Для текста Подробнее о курсе используем ссылку <a>. Как правило, клик по подобному элементу перенаправляет пользователя на страницу или раздел с подробной информацией. Для элемента добавим два класса hero__link и button. Первый класс говорит о его принадлежности к блоку hero. Второй — о том, что это самостоятельный независимый блок button.
Перейдём к стилизации компонента.
Это не первый компонент страницы. До этого мы сверстали шапку страницы. А значит, часть стилей у нас уже есть. Переиспользуем их.
Перечислим, что уже готово:
- Подключены шрифты.
- Заданы общие стили для
body. - Для элементов используется
box-sizing: border-box;.
В промоблоке, помимо шрифта Montserrat, используется ещё один шрифт — Playfair Display.
Добавим правила @font-face с подключением этого шрифта.
Для удобства все общие стили вынесем в файл common.css. Подключим его к проекту.
Дальнейшие шаги удобнее будет смотреть с мастабом мини-браузера 0.5 или 0.75.
Мы временно убрали из style.css стили предыдущего блока (шапки), и пока здесь будут только стили промо-блока.
Добавим для блока hero цвет фоновой заливки. Так мы будем готовы к тому, что белый цвет текста (а по макету он белый) не потеряется на фоне, если картинка не загрузилась.
Добавим стили для заголовка hero__title. С помощью font-family укажем шрифт. Определим цвет, размер шрифта и высоту строки.
Установим значение font-weight.
Опишем стили для текста hero__text. Укажем размер шрифта и высоту строки.
Зададим цвет текста для hero__text.
Опишем стили для кнопки с классом button. Установим параметры шрифта.
Добавим насыщенность для текста кнопки.
Поменяем цвет текста на белый.
Уберём подчеркивание.
Добавим выравнивание текста по центру (в качестве перестраховки, если когда-то ширину кнопки будут увеличивать).
Добавим цвет фона.
Разметка и базовая стилизация промо-блока готова!
