Learn Responsive Web Design by Building a Piano - Step 6

Tell us what’s happening:
I’ve tried adding “black–key” to the second, third, fifth, sixth, and seventh .key elements but it’s not accepting my submission. I’m not sure where I have gone wrong. Should I omit the original “key” from the class?

Your code so far

<!-- 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 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>
    </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/111.0.0.0 Safari/537.36

Challenge: Learn Responsive Web Design by Building a Piano - Step 6

Link to the challenge:

Hey! The code you submitted does not have the necessary classes to pass the challenge.

Please follow the instructions, try again and post the copy/paste the code that you’re having trouble with. Sometimes, an extension or your browser version might effect the website in which case, you might have to refresh the website or change the browser you’re using.

It’s the “second, third, fifth, sixth, and seventh” elements. Your counting is off by one.

That’s embarrassing! haha Thank you!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.