В этом испытании вам предстоит сверстать визитную карточку. Все декоративные стили уже готовы, осталось только описать сетку карточки.

Визитка должна иметь фиксированную ширину и внутренние отступы со всех сторон.

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

Обратите внимание, порядок элементов в разметке не соответствует порядку элементов на макете. Используйте грид-области и выравнивание, чтобы правильно разместить элементы.

Решение

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

.raccoon-card {
  width: 490px;
  padding: 20px;
  display: grid;
  grid-template-columns: 100px 200px 150px;
  grid-template-areas: "avatar name name"
                        "avatar email phone"
                        "skills skills qr";
  gap: 20px;
}

.avatar {
  grid-area: avatar;
}

.name {
  grid-area: name;
  align-self: end;
}

.phone {
  grid-area: phone;
}

.email {
  grid-area: email;
}

.skills {
  grid-area: skills;
}

.qr {
  grid-area: qr;
  align-self: end;
  justify-self: end;
}