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

Испытание: «Волшебная дверь»

Вы доказали, что можете сверстать страницу, используя флексы, и готовы к новому испытанию. На этот раз вам нужно закончить вёрстку страницы-тизера для игры «Волшебная дверь».

Разметку менять не придётся, декоративные стили тоже уже написаны. Дело за малым — сверстать сетку страницы. Для вёрстки этой страницы используйте флексы.

Не забудьте обнулить внешние отступы у <body> и <ul>.

Списку дверей нужно задать фиксированную ширину и выровнять его по центру. Сиреневым цветом на макете обозначены внутренние отступы:

В подвале фон должен тянуться на всю ширину страницы, но содержимое при этом должно иметь фиксированную ширину и располагается по центру. Используйте обёртку — она уже есть в разметке. И не забудьте указать внутренние отступы.

Отступы между колонками в подвале должны быть разного размера. Между первой и второй нужно сделать фиксированный отступ, а третью колонку — прижать к правому краю контейнера. Также обратите внимание, что текст во второй колонке должен быть отцентрован по вертикали, а в третьей — прижат к нижней границе.

Решение

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

body {
  margin: 0;
}

.doors-list {
  display: flex;
  justify-content: space-between;
  width: 320px;
  margin: 0 auto;
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 40px;
  padding-left: 10px;
}

.door {
  width: 100px;
}


.container {
  width: 550px;
  margin: 0 auto;
  display: flex;
  padding: 5px;
}

.note-1 {
  width: 150px;
  margin-right: 25px;
}

.note-2 {
  width: 200px;
  margin-top: auto;
  margin-bottom: auto;
}

.note-3 {
  width: 100px;
  margin-top: auto;
  margin-left: auto;
}

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

index.html

HTML

Испытание: «Волшебная дверь»

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