229fa686ca
* feat: initial infra * feat: initial step breakdown * feat: expand instructions * feat: write tests! * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * chore: more tweaks * chore: ferris → Ferris * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: no lang * chore: fix lint issues Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
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> Learn CSS Animations by Building a 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--