Learn Responsive Web Design by Building a Piano - Step 6

Tell us what’s happening:
Describe your issue in detail here.
Can someone explain what I have to do here

  **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>
  <div id="piano">
    <div class="keys">
      <div class="key"></div>
      <div class="black--key"></div>
      <div class="key"></div>
      <div class="key"></div>
      <div class="key"></div>
      <div class="key"></div>
      <div class="key"></div>
    </div>
  </div>
</body>
</html>
/* file: styles.css */

  **Your browser information:**

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

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

Link to the challenge:

Hello there.

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.

I am not understanding what i am suppose to do in this step.
instruction shows we should add class of black–key in second element of key
and i have done that but it is showing some incorrectness in this step

I think you missed something:

Add this to your second, third, fifth, sixth, and seventh .key elements.

i tried this but its not working
can you please show me how to write that code

Please try and if it doesn’t work you can post the new code here for review.

remember, class attributes can take as many values as you want, all you need to is add a space between those values.

Example:

The value .good can be treated as a separate class under css from the value .bad

please, let me know if you find understand or if I need to expantiate.

1 Like