- 1280px
- 1024px
- 768px
- 320px
Здесь можно посмотреть как выглядит страничка
Обзор
- header - для подчёркивания выбора языка использован псевдокласс :hover, для отступа крайней ссылки был применён псевдокласс :not и :last-child - что обозначает применение к всем элементам списка кроме последнего
- lead, intro - для одинакового отступа картинки и текстового блока intro был создан блок обёртка lead-intro-wrap
- photo-grid - создано с помощью grid
- places - создано с помощью grid. пробывал создать с помощью flex, но оказалось слишком трудозатратно и дизайн подрозумевался, на мой взгляд, под использования grid. При изменении разрешения 768px меняет свое расположение. Ссылки анимированны псевдокласс :hover c прозрачностью 0,8.
- cover - создан для использования ссылкой. По задумке дизана сделана подложка из backgraund серого цвета и прозрачностью 0,8 и чтобы было видно текст он выдвинут на передний план. Это сделано с помощью псевдоэлемента ::before. Для анимирования было применен псевдокласс :hover c прозрачностью 0,3 и временем срабатывания 0,8секунды.
- footer - блок создан на flex. При изменении разрешения 320px меняет свое расположение с строчного в колонку.