Вёрстка по макету из олимпиады. Часть 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
, чтобы задать фон оранжевого цвета.
Настроим стили для ссылок внутри шапки. Укажем белый цвет текста и уберём подчеркивание.
Добавим стили для телефона: увеличим размер шрифта и высоту строки, сделаем текст жирным и установим цвет текста белым.
Добавим для телефона выравнивание текста по правому краю.
Для ссылки внутри блока с телефоном добавим наследование цвета текста, чтобы переопределить браузерные стили. Уберём подчеркивание.
Разметка и базовая стилизация шапки готовы. В базовую стилизацию мы обычно включаем параметры текста и фоны. В следующей части мы продолжим работу над сеточными стилями компонента.