fa84f6c449
* feat: generating steps - Steps 1-32 done. - Steps 33-80 done. - Instructions 1-26 done. - Instructions 27-61 done. - More steps. - Instructions 62-88 done. - Clarify instructions for new concepts. - build fixes - Audit instructions on live site. * fix: add helpCategory * feat: write tests * feat: add intro * chore: use the right selectors Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> * chore: cannot read property Shaun of undefined :) Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * feat: Shau-ptional chaining * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: uncross my wires * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
1.8 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 60b69a66b6ddb80858c5157f | Part 9 | 0 | part-9 |
--description--
Typically, HTML is rendered in a top-down manner. Elements at the top of the code are positioned at the top of the page. However, many times you may want to move the elements to different positions. You can do this with the position attribute.
Set the position attribute for the back-wall element to absolute. An absolute position takes the element out of that top-down document flow and allows you to adjust it relative to its container.
When an element is manually positioned, you can shift its layout with top, left, right, and bottom. Set the back-wall to have a top value of 0, and a left value of 0.
--hints--
Your #back-wall selector should have the position property set to absolute.
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute');
Your #back-wall selector should have the top property set to 0.
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px');
Your #back-wall selector should have the left property set to 0.
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px');
--seed--
--seed-contents--
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>freeCodeCamp Picasso Painting</title>
<link rel="stylesheet" type="text/css" href="./styles.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>
<body>
<div id="back-wall"></div>
</body>
</html>
body {
background-color: rgb(184, 132, 46);
}
#back-wall {
background-color: #8B4513;
width: 100%;
height: 60%;
--fcc-editable-region--
--fcc-editable-region--
}