HTML: Hero Section

Обновлено: 26 апр., 23:20
751
Студент
64%
Завершения

Термином Hero Section часто описывают заглавный блок сайта или лендинга. Его цель — максимальное выделение ключевой мысли и привлечение внимания в самые первые секунды нахождения пользователя на странице.

В этом испытании вы реализуете один из примеров такой секции:

Hero Section на CSS

Макет

Макет для вёрстки расположен на сервисе 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

Для полного доступа к испытанию нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов