Всем привет!
Долго мучалась над этим испытанием, проходила его 2 раза с промежутком в полгода.
Гуглила, пробовала разные варианты, читала форум и смотрела решение других участников. И даже это не особо помогло.
НО! Я наконец-то разобралась и решила создать эту тему, где постараюсь подробно объяснить логику решения этого испытания, мне бы такой ответ очень бы помог в своё время и, надеюсь, кому-то тоже пригодится.
Итак, вот последовательность решения.
Самым первым и логичным шагом будет изучение html кода. В нём мы видим:
- 2 дива шутеров (shooter-1 и shooter-2).
- В этих дивах есть повторяющийся ul target.
- В этом ul target есть по 5 li.
3.1. У shooter-1 в 3х li есть класс miss. - У каждой li внутри есть 2 дива hitbox и lever.
- У lever внутри есть пустой span.
Всё просто. Осталось понять кто есть кто.
Первым делом смотрим на цвет первых двух селекторов, очевидно это главные блоки. А именно shooter-1 и shooter-2. У первого еще и бордер черточками.
.shooter-1 {
padding: 55px 0 55px 0;
border-bottom: 1px dashed #cccccc;
background: #fcf8e3;
}
.shooter-2 {
padding: 55px 0 55px 0;
background: #d9edf7;
}
Далее смотрим на третий селектор и видим его размер и цвет 200х25px- это белый прямоугольник, а значит наш target.
.target {
display: flex;
justify-content: space-between;
width: 200px;
height: 25px;
margin: 0 auto;
padding: 10px 15px 10px 15px;
border-radius: 2px;
background: white;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
overflow: hidden;
list-style: none;
}
Двигаемся дальше. Какие-то черные кружочки. Тут я догадалась не сразу, думала что это как раз хитбоксы. Но методом тыка, поняла что это все наши li. Тоесть первым делом мы рисуем 5 черных кружков.
li {
position: relative;
width: 22px;
height: 22px;
border: 1px solid black;
border-radius: 50%;
background: #333333;
font-size: 0;
}
А вот следующее свойство, какой-то серый маленький кружочек и есть наш hitbox.
.hitbox {
width: 10px;
height: 10px;
margin: 6px auto;
border-radius: 50%;
background: #999999;
}
Двигаемся далее. И начинаем понимать что тут нужно сделать.
Главная разгадка. Сначала ми рисуем все хитбоксы, потом сверху них все леверы, а потом просто скрываем ненужные леверы.
Следующее свойство как раз наш левер.
.lever {
position: absolute;
top: -2px;
left: -2px;
width: 26px;
height: 26px;
border-radius: 50%;
background: #f5f5f5;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
Но он пока без ножки. Где же она? Логично что прямо под ним. Вспоминаем html. Кто там был внутри левера? А точно, пустой span.
span {
position: absolute;
top: 12px;
left: 11px;
width: 5px;
height: 25px;
background: #f5f5f5;
box-shadow:
-1px 15px 2px rgba(0, 0,0 , 0.3),
1px 15px 2px rgba(0, 0, 0, 0.3);
}
И теперь у нас есть все хитбоксы и все леверы, вот только леверы перекрывают хитбоксы, нам нужно спрятать лишние.
У первого шутера ненужные помечены классом miss.
.miss .lever {
display: none;
}
А у второго придется воспользоваться псевдоклассами.
.shooter-2 li:first-child .lever {
display: none;
}
.shooter-2 li:nth-child(4) .lever {
display: none;
}
.shooter-2 li:nth-child(5) .lever {
display: none;
}
Надеюсь это объяснение будет кому-то полезно.
Выполнено на 100%. В коде никаких изменений не делала.
