Вёрстка по макету из олимпиады. Часть 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. Установим параметры шрифта.
Добавим насыщенность для текста кнопки.
Поменяем цвет текста на белый.
Уберём подчеркивание.
Добавим выравнивание текста по центру (в качестве перестраховки, если ширину кнопки будут увеличивать).
Добавим цвет фона.
Разметка и базовая стилизация промоблока готова!
