HTML: Футуристический плакат

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

Реализуйте футуристический плакат представленный на макете

Футуристический плакат на CSS

Основные стили

Плакат

  • Сетка состоит из 6 колонок и 6 строк с автоматическим размером
  • Плакат выровнен по центру на странице
  • Ширина плаката: 980px
  • Высота плаката: на всю высоту viewport
  • Цвет каждой ячейки: #15141c
  • Ячейки, накладывающиеся на изображение имеют цвет #673ab7 и прозрачность со значением 60%.

Заголовок первого уровня

  • Заголовок первого уровня «The Future Is Now» занимает ширину трёх ячеек
  • Размер шрифта: 4em
  • Внутренние отступы: 50 пикселей слева и справа

Заголовок второго уровня Hexlet

  • Размер шрифта: 2em
  • Внутренние отступы: 50 пикселей слева и справа

Изображение и шрифт вы найдёте в директории assets. Для фонового изображения используйте следующие стили:

background-position-x: center;
background-size: cover;

Подключите шрифт Roboto в файле app.css

Сетка готового макета выглядит следующим образом:

Сетка футуристического плаката

Изображение иллюстрирует только область future-poster, а не всей страницы

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

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

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