751
Студент
64%
Завершения
Термином Hero Section часто описывают заглавный блок сайта или лендинга. Его цель — максимальное выделение ключевой мысли и привлечение внимания в самые первые секунды нахождения пользователя на странице.
В этом испытании вы реализуете один из примеров такой секции:
Макет
Макет для вёрстки расположен на сервисе Figma. Используйте его для определения размера отступов, шрифтов и размера различных элементов. Изображение и шрифты находятся в директории assets.
Базовые настройки макета
- Размер контейнера с секцией:
1280px
- Межстрочный интервал:
2.3
. Установите его для<body>
- Внутренние отступы у колонок — по 30 пикселей слева и справа
- Внутренние отступы контейнера — по 100 пикселей сверху и снизу
Подсказки
- Отцентруйте весь макет с помощью Flex у элемента
<body>
. Не используйте внешние отступы для центровки макета - Мысленно разбейте макет на две равные колонки. Левая колонка является флекс-контейнером и центрирует весь контент по вертикали
- Правая колонка не является флекс-контейнером. Для позиционирования изображения можно использовать свойство
text-align
- Цифры «01» располагаются на
30px
ниже и100px
левее своего изначального месторасположения в потоке документа - Для стрелки используйте знак
→
. Для удобства позиционирования можете выставить ей межстрочный интервал0
- Используйте минимальное количество абсолютного и относительного позиционирования. Старайтесь не брать значения позиционирования из вкладки стилей в Figma
- Высота каждой колонки —
713px
. Вы можете зафиксировать это значение при работе с макетом - Пути к шрифтам:
../assets/fonts/Brygada-1918.woff2
../assets/fonts/OpenSans-Regular.woff2
../assets/fonts/OpenSans-Bold.woff2
Для полного доступа к испытанию нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.