Passo 2

Instruções

Agora adicione quatro opções ao seu dropdown, All, Woodwinds, Brass e Percussion, nesta ordem. Para cada opção, use a opção em minúsculas para especificar o atributo id e o atributo value.

O que fazer:

Testes:

Você deve ter quatro elementos `option` no seu elemento `select`.
Seu primeiro elemento `option` deve ter o texto `All`.
Sua opção `All` deve ter um atributo `id` e um atributo `value` com o valor `all`.
Seu segundo elemento `option` deve ter o texto `Woodwinds`.
Sua opção `Woodwinds` deve ter um atributo `id` e um atributo `value` com o valor `woodwinds`.
Seu terceiro elemento `option` deve ter o texto `Brass`.
Sua opção `Brass` deve ter um atributo `id` e um atributo `value` com o valor `brass`.
Seu quarto elemento `option` deve ter o texto `Percussion`.
Sua opção `Percussion` deve ter um atributo `id` e um atributo `value` com o valor `percussion`.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Music Instruments product page</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <h1>Student Instruments</h1>

    <main>

      <select class="select-container">

      </select>

      <div class="products-container">
        <div class="card">
          <h2>Flute</h2>
          <p>$500</p>
        </div>
        <div class="card">
          <h2>Clarinet</h2>
          <p>$200</p>
        </div>
        <div class="card">
          <h2>Oboe</h2>
          <p>$4000</p>
        </div>

        <div class="card">
          <h2>Trumpet</h2>
          <p>$200</p>
        </div>
        <div class="card">
          <h2>Trombone</h2>
          <p>$300</p>
        </div>
        <div class="card">
          <h2>French Horn</h2>
          <p>$4300</p>
        </div>

        <div class="card">
          <h2>Drum Set</h2>
          <p>$500</p>
        </div>
        <div class="card">
          <h2>Xylophone</h2>
          <p>$3000</p>
        </div>
        <div class="card">
          <h2>Cymbals</h2>
          <p>$200</p>
        </div>
        <div class="card">
          <h2>Marimba</h2>
          <p>$3000</p>
        </div>
      </div>
    </main>
  </body>
</html>

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --dark-grey: #0a0a23;
  --white: #ffffff;
  --yellow: #f1be32;
}

body {
  background-color: var(--dark-grey);
  color: var(--white);
}

h1 {
  text-align: center;
  margin-top: 20px;
}

.select-container {
  display: block;
  margin: 25px auto;
  padding: 8px;
  border: 4px solid var(--white);
  border-radius: 4px;
  width: 200px;
}

.products-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

@media (min-width: 760px) {
  .products-container {
    flex-direction: row;
  }
}

.card {
  background-color: var(--white);
  color: var(--dark-grey);
  border: 4px solid var(--yellow);
  border-radius: 5px;
  padding: 10px;
  width: 200px;
}

Preview