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

Испытание: щит Завтрамэна

В каждой стране есть свой национальный супер-герой. В Америке соответственно — Капитан Америка, а в России — Завтрамэн. Капитан Америка, как известно, защищает американских граждан от негодяев, а Завтрамэн призван уберечь наших соотечественников от ненужных и даже вредных дел.

Капитан Америка Завтрамэн

У Завтрамэна тоже есть свой щит. Давайте его соберём с помощью HTML и CSS.

Вам нужно подобрать недостающие селекторы в CSS.

Подсказка: в задании используются псевдоэлементы ::before и ::after.

Решение

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

body {
  margin: 0;
  padding: 0;
  width: 570px;
  background-color: #f5f5f5;
  color: #333333;
}

main {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 300px;
  height: 300px;
}

.shield {
  position: relative;
  top: 5%;
  margin: 0 auto;
  width: 90%;
  height: 90%;
  background-color: #ffffff;
  box-shadow: 0 2px 3px #cccccc;
}

.shield,
.shield::before,
.shield::after {
  border-radius: 50%;
}

.shield::before {
  width: 75%;
  height: 75%;
  background-color: #0039a6;
}

.shield::after {
  width: 50%;
  height: 50%;
  background-color: #d52b1e;
}

.shield::before,
.shield::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.shield-logo {
  position: relative;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 82px;
  transform: translate(-41px, -20px);
}

.shield-logo::before,
.shield-logo::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 10px solid #ffffff;
  border-radius: 50% 50% 0;
  content: "";
  transform: rotate(-45deg);
}

.shield-logo::after {
  right: 0;
  left: auto;
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
}

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

index.html

HTML

Испытание: щит Завтрамэна

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