Aprenda design responsivo para a web criando um piano - Passo 27

Alguém sabe qual o problema? Eu estou digitando o código que é pedido mas diz que está com erro. Mas onde está esse erro? Está tudo como pedido mas estou travado aqui, que coisa mais estranha.

  **Seu código até o momento**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Piano</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <div id="piano">
    <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
    <div class="keys">
      <div class="key"></div>
      <div class="key black--key"></div>
      <div class="key black--key"></div>
      <div class="key"></div>
      <div class="key black--key"></div>
      <div class="key black--key"></div>
      <div class="key black--key"></div>

      <div class="key"></div>
      <div class="key black--key"></div>
      <div class="key black--key"></div>
      <div class="key"></div>
      <div class="key black--key"></div>
      <div class="key black--key"></div>
      <div class="key black--key"></div>

      <div class="key"></div>
      <div class="key black--key"></div>
      <div class="key black--key"></div>
      <div class="key"></div>
      <div class="key black--key"></div>
      <div class="key black--key"></div>
      <div class="key black--key"></div>
    </div>
  </div>
</body>
</html>
/* file: styles.css */
html {
box-sizing: border-box;
}

*, *::before, *::after {
box-sizing: inherit;
}

#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
position: relative;
border-radius: 10px;
}

.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
}

.key {
background-color: #ffffff;
position: relative;
width: 41px;
height: 175px;
margin: 2px;
float: left;
border-radius: 0 0 3px 3px;
}

.key.black--key::after {
background-color: #1d1e22;
content: "";
position: absolute;
left: -18px;
width: 32px;
height: 100px;
border-radius: 0 0 3px 3px;
}

.logo {
width: 200px;
position: absolute;
top: 23px;
}

@media{
max-width: 768px;
}
  **Informações de seu navegador:**

Agente de usuário: Mozilla/5.0 (X11; Linux x86_64; rv:103.0) Gecko/20100101 Firefox/103.0

Desafio: Aprenda design responsivo para a web criando um piano - Passo 27

Link para o desafio:

Oi, @gbssdias. O problema, na prática, é na sintaxe da media query.

Aqui você encontra uma explicação mais detalhada.
A sintaxe é:

@media (especifique aqui em parênteses a limitação) {

}

Para esse primeiro exercício sobre media queries, você não precisa colocar nada dentro das chaves. Colocando entre os parênteses a especificação solicitada (a largura máxima de tela), você já passará no teste. Avise-nos depois se a explicação ajudou. Bons estudos! :smiley:

1 Like