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

CSS: Grid 10 сообщений
116
Студентов
70%
Завершения
Обновлено: 09 июня, 20:20

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

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

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

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

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

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

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