Вёрстка по макету из олимпиады. Часть 6
В этом интерактивном курсе мы разбираем вёрстку макета из студенческой олимпиады по фронтенду от HTML Academy и Яндекса. Участникам нужно было сверстать сайт по графическому макету с учётом адаптивности и переполнения.
Это шестая часть курса. В ней мы завершим вёрстку десктопной версии, без адаптивности. Вот графический макет компонента.
В пятой части мы сделали разметку и базовую стилизацию шапки. Продолжаем с этого состояния.
Добавим минимальную высоту для блока .hero, чтобы блок хорошо выглядел и при небольшом количестве контента.
Создадим правило для элемента .hero__wrapper, который содержит текстовую часть блока. Определим максимальную ширину для элемента.
Укажем поля. Значения возьмём из макета.
Разместим изображение под блоком с текстом. Для этого зададим изображению position: absolute;, а блоку .hero__wrapper, который в разметке следует сразу за изображением, зададим position: relative;. Благодаря этому .hero__wrapper останется в потоке, но будет перекрывать изображение.
Можете удалить position: relative; у .hero__wrapper и посмотреть, что произойдёт.
Изображение должно занимать всю площадь блока .hero, как будто это фон.
Зададим position: relative; блоку .hero, а затем задададим 100% ширину и высоту изображению. Благодаря абсолютному позиционированию изображение привяжется по высоте и ширине к блоку .hero.
CSS-свойство object-fit со значением cover поможет картинке сохранять пропорции.
Добавим отступы для заголовка .hero__title. Для начала сбросим отступы по умолчанию, а затем добавим внешний отступ снизу. Значение возьмём из макета.
Ограничим по ширине элемент .hero__text.
По аналогии с заголовком, сбросим отступы по умолчанию и добавим отступ снизу. Значение, как обычно, получим из макета.
Чтобы разместить кнопку Подробнее о курсе добавим дополнительный отступ сверху. Для правила используем класс .hero__link. Он отвечает за расположение элемента внутри блока hero. Так мы предусмотрим, что button в других блоках может размещаться иначе.
Определим сеточные стили самой кнопки. Поменяем CSS-свойство display на значение block. Добавим ширину, внутренние отступы.
Добавим скругление.
Определим стили для состояния кнопки при наведении. Добавим медиавыражение @media (hover: hover), которое скажет применить стили для состояния :hover только на устройствах, которые работают с мышью.
Настроим стили в состоянии фокуса.
На финальном шаге проверим компонент на переполнение. Для этого добавим тексты из кейсов, которые есть в макете, и оценим результат. Компонент прошёл проверку на переполнение.
Кстати, чтобы достичь нужного поведения при переполнении, мы задали контейнеру .hero минимальную высоту 640px, а вложенному контейнеру .hero__wrapper небольшой нижний паддинг размером 30px.
Вёрстка десктопной версии промоблока полностью завершена!
