ContextQMD
Back to Freecodecamp

Step 3

curriculum/challenges/english/blocks/workshop-game-settings-panel/68f1560aff1214103ab6b59b.md

latest2.4 KB
Original Source

--description--

Now you will begin sprucing the page up with some CSS styling. Begin by creating the body selector.

Set the body to have a height property with a value of 100vh and a background-color property with a value of #f0f0f0.

The height of 100vh makes the body take up the full height of the browser viewport, while the light gray background color provides a subtle base for the page.

Lastly, set a text-align property with the value of center. This will center all inline-content contained within the page unless a child element overrides it with its own alignment.

--hints--

You should use the body type selector.

js
assert.exists(new __helpers.CSSHelp(document).getStyle("body"));

You should add the height property within the body type selector.

js
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle("body")?.height);

You should have a height property with the value of 100vh.

js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle("body")?.height, "100vh");

You should add the background-color property within the body type selector.

js
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle("body")?.backgroundColor);

You should have a background-color property with a value of #f0f0f0.

js
assert.equal(new __helpers.CSSHelp(document).getStyle("body")?.backgroundColor, "rgb(240, 240, 240)");

You should add the text-align property within the body type selector.

js
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle("body")?.textAlign);

You should have a text-align property with the value of center.

js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle("body")?.textAlign, "center");

--seed--

--seed-contents--

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Game Settings Panel</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div>
      <h1>Game Settings</h1>
      <label> <input type="checkbox" />Sound Effects</label>
      <label> <input type="checkbox" />Background Music</label>
      <label> <input type="checkbox" />Hard Mode</label>
      <label> <input type="checkbox" />Haptic feedback</label>
    </div>
  </body>
</html>
css
--fcc-editable-region--

--fcc-editable-region--