Швейцарский плакат Испытание курса: CSS: Grid

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

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

Плакат, созданный по мотивам работ Майка Джойса

Создайте вёрстку и стили. Основные настройки проекта можно найти в переменных, которые находятся в файле 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-контейнера.
  • Проанализируйте макет. Найдите место, откуда начинается сетка.
Успешных завершений: 68%

Для полного доступа к испытанию нужна профессиональная подписка

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

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Последние код-ревью

Автор Дата обновления Версий
nubikk 19 янв., 20:20 1
computeric-max 08 янв., 04:53 1
peredery 07 янв., 22:39 2
mikhailr1337 24 дек., 18:20 2
alexenl 24 дек., 15:56 1