Learn Responsive Web Design by Building a Piano - Step 6

I cannot figure out what is wrong with my code. I have tried many different things but none of them worked. It says that the second .key needs to have a class of black–key, and it does, but it still won’t let me pass.

<!-- 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" />
  </head>
  <body>

<!-- User Editable Region -->

    <div id="piano">
      <div class="keys">
        <div class="key" class="black--key"></div>
        <div class="key" class="black--key"></div>
        <div class="key"></div>
        <div class="key" class="black--key"></div>
        <div class="key" class="black--key"></div>
        <div class="key" class="black--key"></div>
        <div class="key" class="black--key"></div>
      </div>
    </div>

<!-- User Editable Region -->

  </body>
</html>
/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 Edg/121.0.0.0

Challenge Information:

Learn Responsive Web Design by Building a Piano - Step 6

an element can’t have multiple attributes with the same name, instead place a space inside the quotes and write the second class name inside the quotes

That didn’t work :face_with_diagonal_mouth: it keeps on saying that my second key element should have a class of black–key.

Hello!
Reset your lesson step.
Then in your class attribute add a space and add the text black–key. It should look somehting similiar to this.

And your black–key attribute should only be added to the second, third, fifth, sixth, and seventh key attributes.

1 Like

Example

class="one two"

That way you can add second class to an existing class attribute. You need to add black–key after key a space between.
@beloved1480

2 Likes