a563b3b4e4
* feat(curriculum): add initial steps Add the initial step files for this project. * feat(curriculum): write test texts Add some test text (tests coming soon). * feat: tests for HTML bits Add tests for the HTML bits - CSS holding off until parser lands. * feat: CSS tests New CSS parser works great! * fix: link href Fix the href in the boilerplate. * chore: apply suggestions from code review Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> * fix: clarify link element * fix: optional chaining * fix: remove unused meta props * fix: update helper and fix tests * chore: apply tom's review suggestions Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * chore: no console logs Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * feat: intro Add introductory text, tweak instructions a bit. Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
1.5 KiB
1.5 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 60a3e3396c7b40068ad69985 | Part 28 | 0 | part-28 |
--description--
Use margins to adjust the spacing between one and two.
Change the margin of .one to 20px auto 20px so the top margin is 20 pixels, it's centered horizontally, and the bottom margin is 20 pixels.
--hints--
You should set the margin property to 20px auto 20px.
const hasMarginRegex = /20px\s*auto\s*20px/;
// TODO: Why is this stripped? Because margins are the same?
assert(hasMarginRegex.test(code));
Your .one element should have a margin value of 20px auto 20px.
const oneMarginRegex = /\.one\s*{[^}]*margin:\s*20px\s*auto\s*20px;?\s*}/
assert(oneMarginRegex.test(code));
--seed--
--seed-contents--
.canvas {
width: 500px;
height: 600px;
background-color: #4d0f00;
overflow: hidden;
}
.frame {
border: 50px solid black;
width: 500px;
padding: 50px;
margin: 20px auto;
}
.one {
width: 425px;
height: 150px;
background-color: #efb762;
--fcc-editable-region--
margin: 20px auto;
--fcc-editable-region--
}
.two {
width: 475px;
height: 200px;
background-color: #8f0401;
margin: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rothko</title>
<link href="./styles.css" rel="stylesheet">
</head>
<body>
<div class="frame">
<div class="canvas">
<div class="one"></div>
<div class="two"></div>
</div>
</div>
</body>
</html>