ContextQMD
Back to Freecodecamp

Step 8

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

latest2.6 KB
Original Source

--description--

You need some spacing between the checkboxes and the labels. Begin by using the selector for label in your CSS and set a display property of block.

Next, set a margin property of 8px auto to add vertical spacing between elements. This will create consistent spacing above and below each element, helping to separate content and improve readability.

Finally, set the cursor property to pointer on the label elements. This will change the cursor to a hand icon when a user hovers over a label, signaling that the element is clickable and improving the overall user experience.

--hints--

You should have a type selector in your CSS for label.

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

You should add a display property to your label selector.

js
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle("label")?.display);

You should have a display property with a value of block.

js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle("label")?.display, "block");

You should add the margin property to your label selector.

js
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle("label")?.margin);

You should have a margin property with a value of 8px auto.

js
assert.equal(new __helpers.CSSHelp(document).getStyle("label")?.margin, "8px auto");

You should add a cursor property to your label selector.

js
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle("label")?.cursor);

You should have a cursor property with a value of pointer.

js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle("label")?.cursor, "pointer");

--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 class="settings-card">
      <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
body {
  height: 100vh;
  background-color: #f0f0f0;
  text-align: center;
}

.settings-card {
  max-width: 250px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  margin: auto;
  text-align: left;
}

h1 {
  text-align: center;
}
--fcc-editable-region--

--fcc-editable-region--