Html: Hero Section

CSS: Основы Flex 14 сообщений
Обновлено: 20 окт., 23:20
123
Студента
65%
Завершения

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

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

Hero Section на CSS

Макет

Макет для вёрстки расположен на сервисе Figma. Используйте его для определения размера отступов, шрифтов и размера различных элементов. Изображение и шрифты находятся в директории assets.

Подсказки

  1. Определите размер основного контейнера. В этом вам помогут направляющие — вертикальные красные линии.
  2. Задайте горизонтальные внутренние отступы. Здесь тоже можно воспользоваться направляющими.
  3. Задайте вертикальные внутренние отступы. Ориентируйтесь по расстоянию от края макета до слоёв.
  4. Цифры «01» располагаются на 30 пикселей ниже своего изначального месторасположения в потоке документа.

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

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

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