Теория
Теория

Испытание: Программа тура

Вам предстоит самостоятельно сверстать сетку страницы:

Разметка и декоративные стили готовы, осталось написать сеточные стили. Советуем сразу обнулить внешние отступы у <body>, а для создания колонок использовать гриды.

В шапке должно быть две колонки: правая имеет фиксированный размер, а левая занимает всё оставшееся пространство. Не забудьте про внутренние отступы.

Список дней также нужно разделить на две колонки, на этот раз одинаковой ширины. Колонки должны занимать всё доступное пространство. Не забудьте убрать у списка внешние отступы по умолчанию и переопределить внутренние отступы. Обратите особое внимание на отступы между элементами, они разные у рядов и колонок.

Подвал страницы довольно простой, но у него отличается внутренний отступ сверху.

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

body {
  margin: 0;
}

.page-header {
  display: grid;
  grid-template-columns: 1fr 160px;
  padding-top: 30px;
  padding-right: 20px;
  padding-bottom: 70px;
  padding-left: 20px;
}

.days-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 30px;
  column-gap: 20px;
  margin: 0;
  padding-top: 25px;
  padding-right: 20px;
  padding-bottom: 40px;
  padding-left: 20px;
}

.page-footer {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}

Минимальный вид табов

index.html

HTML

Испытание: Программа тура

Притормози, дружище