25aa04e2e7
* chore(curriculum): accessibility-quiz * chore(curriculum): cafe-menu * chore(curriculum): ferris-wheel * chore(curriculum): fix ferris-wheel tests * chore(curriculum): colored-markers * chore(curriculum): photo-gallery * chore(curriculum): magazine * chore(curriculum): penguin * chore(curriculum): city-skyline * chore(curriculum): registration-form * chore(curriculum): picasso-painting * chore(curriculum): balance-sheet * chore(curriculum): piano * chore(curriculum): rothko-painting * fix: title min 15 chars
2.9 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 6140d1a351e88f159ed54fca | Step 10 | 0 | step-10 |
--description--
Using the same pattern, create a separate selector for the third .line, the fourth .line, the fifth .line, and the sixth .line.
Set the transform property for the third .line to rotate(120deg), the fourth to rotate(180deg), the fifth to rotate(240deg), and the sixth to rotate(300deg).
--hints--
You should create a .line:nth-of-type(3) selector.
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(3)'));
Your .line:nth-of-type(3) selector should have a transform property set to rotate(120deg).
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(3)')?.transform === 'rotate(120deg)');
You should create a .line:nth-of-type(4) selector.
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(4)'));
Your .line:nth-of-type(4) selector should have a transform property set to rotate(180deg).
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(4)')?.transform === 'rotate(180deg)');
You should create a .line:nth-of-type(5) selector.
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(5)'));
Your .line:nth-of-type(5) selector should have a transform property set to rotate(240deg).
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(5)')?.transform === 'rotate(240deg)');
You should create a .line:nth-of-type(6) selector.
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)'));
Your .line:nth-of-type(6) selector should have a transform property set to rotate(300deg).
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)')?.transform === 'rotate(300deg)');
--seed--
--seed-contents--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
.wheel {
border: 2px solid black;
border-radius: 50%;
margin-left: 50px;
position: absolute;
height: 55vw;
width: 55vw;
max-width: 500px;
max-height: 500px;
}
.line {
background-color: black;
width: 50%;
height: 2px;
position: absolute;
top: 50%;
left: 50%;
transform-origin: 0% 0%;
}
.line:nth-of-type(2) {
transform: rotate(60deg);
}
--fcc-editable-region--
--fcc-editable-region--