---
id: 68eb058081504963447bfa60
title: Step 17
challengeType: 0
dashedName: step-17
---

# --description--

Next, you should style the main container. Select the element with the class `container` and set its `background-color` to the hex-code `#ffffff1a`.

A hex code is a six-digit combination of numbers and letters used in HTML and CSS to represent colors. It starts with a `#` followed by three pairs:

- The first two digits represent red
- The next two represent green
- The last two represent blue

For example, `#ffffff` is pure white because it has the maximum value for red, green, and blue.

You can also add two extra digits at the end to control opacity (called the alpha channel). In `#ffffff1a`, the `1a` makes the white color semi-transparent. The lower the alpha value, the more transparent the color appears. You'll learn more about hex codes later!

# --hints--

You should target the element with the class `container`.

```js
assert(new __helpers.CSSHelp(document).getStyle('.container'));
```

Set the `background-color` property to `#ffffff1a`.

```js
const style = new __helpers.CSSHelp(document).getStyle('.container')
assert.strictEqual(style?.backgroundColor, 'rgba(255, 255, 255, 0.1)')
```

# --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>Parent Teacher Conference Form</title>
  <link rel="stylesheet" href="./styles.css" />
</head>

<body>
  <main class="container">
    <h1 class="title center">Parent Teacher Conference Form</h1>
    <p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>

    <form>
      <fieldset>
        <legend>Student Information</legend>
        <label for="student-name">Full Name: </label>
        <input
            type="text"
            name="student-name"
            id="student-name"
            required
            placeholder="E.g., Jane Doe"
          />

        <label for="grade">Student Grade: </label>
        <input
            type="number"
            name="grade"
            id="grade"
            required
            placeholder="E.g., 4"
          />
      </fieldset>

      <fieldset>
        <legend>Parent/Guardian Information</legend>
        <label for="parent-name">Parent/Guardian Name: </label>
        <input
            type="text"
            name="parent-name"
            id="parent-name"
            required
            placeholder="E.g., Nancy Doe"
          />
      </fieldset>

      <fieldset>
        <legend>Preferred Contact Method</legend>
        <label class="contact-method" for="email">Email: </label>
        <input
            id="email"
            class="contact-method-radio-btn"
            type="radio"
            name="contact-method"
            value="email"
            checked
          />

        <label class="contact-method" for="phone">Phone: </label>
        <input
            id="phone"
            class="contact-method-radio-btn"
            type="radio"
            name="contact-method"
            value="phone"
          />
      </fieldset>

      <fieldset>
        <legend>Additional Notes</legend>
        <label for="notes"
            >Any specific concerns or topics you'd like to discuss?</label>
        <textarea id="notes" name="notes" rows="4" cols="50"></textarea>
      </fieldset>

      <button class="submit-btn" type="submit">Submit Form</button>
    </form>
  </main>
</body>

</html>
```


```css
body {
  background-color: MidnightBlue;
  color: whitesmoke;
}

--fcc-editable-region--

--fcc-editable-region--
```
