b36cdbafd1
* chore: rename part to step * chore: update metas * chore: more renaming * chore: update tooling * chore: update frontmatter * chore(tools): title testing
1.9 KiB
1.9 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 612e89562043183c86df287c | Step 9 | 0 | step-9 |
--description--
Browsers can apply default margin and padding values to specific elements. To make sure your piano looks correct, you need to reset the box model.
Add an html rule selector to your CSS file, and set the box-sizing property to border-box.
--hints--
You should have an html selector.
assert(new __helpers.CSSHelp(document).getStyle('html'));
Your html selector should have the box-sizing property set to border-box.
assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box');
--seed--
--seed-contents--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
--fcc-editable-region--
--fcc-editable-region--