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