HTML: Швейцарский плакат

Интернациональный типографический стиль, также известный как «Швейцарский стиль», является одним из самых известных направлений в графическом дизайне. Его отличает строгость в наборе, построение по сеткам и удобству чтения. Чаще всего это асимметричные макеты с выровненным по левому краю тексту и с использованием шрифтов без засечек. Так же зачастую плакаты имеют наклонные элементы.

В этом испытании вам предстоит сверстать швейцарский плакат, созданный по мотивам работ Майка Джойса. Финальным результатом испытания будет следующий макет:

Создайте вёрстку и стили. Основные настройки проекта можно найти в переменных, которые находятся в файле app.css

Основные стили плаката:

• Высота одной линии: 25vh. Единица измерения vh — процент от высоты viewport.
• Высота голубой линии: две высоты обычной линии. Линия начинается с середины оранженовой линии по вертикали.
• Расстояния между колонками: 40px по вертикали и 55px по горизонтали.
• Плакат использует 5-колоночную систему. Ширина колонки: 85px.
• Для смешения цветов используйте свойство opacity со значением 0.7.

Левый текст:

4 weekends
with guest bands

Правый текст:

january 12, 17, 18, 24, 25
plus sunday february 2 1975

Заголовок:

television

Подсказки

• В этом испытании вам пригодятся навыки использования позиционирования внутри grid-контейнера.
• Проанализируйте макет. Найдите место, откуда начинается сетка.