Passo 17

Instruções

Em seguida, você deve estilizar o contêiner principal. Selecione o elemento com a classe container e defina seu background-color para o código hexadecimal #ffffff1a. Um código hexadecimal é uma combinação de seis dígitos de números e letras usados em HTML e CSS para representar cores. Ele começa com um # seguido por três pares:

Os dois primeiros dígitos representam o vermelho
Os próximos dois representam verde
Os dois últimos representam azul

Por exemplo, #ffffff é branco puro porque tem o valor máximo para vermelho, verde e azul. Você também pode adicionar dois dígitos extras no final para controlar a opacidade (chamado de canal alfa). Em #ffffff1a, o 1a torna a cor branca semi-transparente. Quanto menor o valor alfa, mais transparente a cor aparece. Você aprenderá mais sobre códigos hexadecimais mais adiante!

O que fazer:

Testes:

Você deve direcionar o elemento com a classe `container`.
Defina a propriedade `background-color` para `#ffffff1a`.

<!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>

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

Preview