Вёрстка по макету из олимпиады. Часть 1
В этом интерактивном курсе мы разбираем вёрстку макета из студенческой олимпиады по фронтенду от HTML Academy и Яндекса. Участникам нужно было сверстать сайт по графическому макету с учётом адаптивности и переполнения.
Это первая часть курса. В ней мы разберём разметку и базовую стилизацию первого компонента — шапки. Вот графический макет шапки.
Начнём с разметки. Создадим элемент <header>. Назначим ему класс header. Для названий классов используем БЭМ.
Добавим контейнер — обёртку для содержимого шапки. Класс для обёртки назовём header__wrap — элемент wrap блока header.
Добавим изображение с логотипом компании. Укажем размеры, альтернативное описание.
Обернём логотип в тег <a> с классом header__logo-link и укажем ссылку на главную страницу.
Создадим ненумерованный список для навигационных ссылок <ul class="header__list">.
Добавим элемент списка со ссылкой на раздел Гастротуры. В качестве имён классов для элемента списка и ссылки используем header__item и header__link соответственно.
Ссылки будут вести на разделы лендинга. Заполним атрибут href якорной ссылкой.
Якорная ссылка ― это ссылка, которая ведёт не на другую страницу, а на определенный элемент на этой же странице.
В нашем случае ссылка Гастротуры будет вести на раздел с идентификатором events.
Добавим элемент списка со ссылкой на раздел Бронирование. Ссылка будет вести на раздел с идентификатором booking.
Добавим элемент списка со ссылкой на раздел О нас. Ссылка будет вести на раздел с идентификатором about.
Добавим элемент списка со ссылкой на раздел Отзывы. Ссылка будет вести на раздел с идентификатором reviews.
Добавим элемент списка со ссылкой на раздел Фотографии. Ссылка будет вести на раздел с идентификатором gallery.
Добавим элемент списка со ссылкой на раздел Контакты. Ссылка будет вести на раздел с идентификатором contacts.
Добавим блок с номером телефона для быстрого вызова. Телефон разметим как ссылку с атрибутом href="tel:". Так пользователи смогут нажать на неё и открыть приложение для звонков с уже набранным номером. Дополнительно обернём телефон в элемент <p> с классом header__phone.
Разметка компонента завершена.
Перейдём к базовой стилизации. Она включает параметры текста и фоны. Делать её будем на основе десктопной версии компонента.
С помощью правила @font-face подключим нестандартный шрифт Montserrat. Набор шрифтов с нужными параметрами начертания выдавался участникам олимпиады перед стартом.
Добавим стили для тега body. Установим семейство шрифтов, размер шрифта, высоту строки и цвет текста. Эти значения унаследуют большинство вложенных элементов.
Добавим стили для класса .header, чтобы задать фон оранжевого цвета.
Настроим стили для ссылок внутри шапки. Укажем белый цвет текста и уберём подчеркивание.
Добавим стили для телефона: увеличим размер шрифта и высоту строки, сделаем текст жирным и установим цвет текста белым.
Добавим для телефона выравнивание текста по правому краю.
Для ссылки внутри блока с телефоном добавим наследование цвета текста, чтобы переопределить браузерные стили. Уберём подчеркивание.
Разметка и базовая стилизация шапки готовы. В базовую стилизацию мы обычно включаем параметры текста и фоны. В следующей части мы продолжим работу над сеточными стилями компонента.
