452
Студента
65%
Завершения
Термином 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
Для полного доступа к испытанию нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.