ContextQMD
Back to Freecodecamp

Step 5

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

latest2.9 KB
Original Source

--description--

Now it is time to style the settings-card container. Create a class selector for settings-card.

This will be where all of your formatting for the container will go. Set the max-width to 250px to define the overall size of your container.

Next, set your padding to 20px so that your content has space between it and the border of the container.

After this, create a rounded edge by setting your border-radius to 10px.

Then set a box-shadow with the values of 0 2px 6px rgba(0,0,0,0.2). This will create a subtle "lifted" look that will create depth for the container.

--hints--

You should have a class selector in your css for settings-card.

js
assert.exists(new __helpers.CSSHelp(document).getStyle(".settings-card"));

You should add max-width property to the .settings-card class selector.

js
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.maxWidth);

You should have a max-width property with a value of 250px.

js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.maxWidth, "250px");

You should add a padding property to the .settings-card class selector.

js
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.padding);

You should have a padding property with a value of 20px.

js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.padding, "20px");

You should add a border-radius property to your .settings-card class selector.

js
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.borderRadius);

You should have a border-radius property with a value of 10px.

js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.borderRadius, "10px");

You should add a box-shadow property to your .settings-card class selector.

js
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.boxShadow);

You should have a box-shadow with the value of 0 2px 6px rgba(0,0,0,0.2).

js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.boxShadow, "rgba(0, 0, 0, 0.2) 0px 2px 6px");

--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;
}

--fcc-editable-region--

--fcc-editable-region--