Learn Responsive Web Design by Building a Piano - Step 6

HTML-CSS
1

Tell us what’s happening:
I am struggling to proceed on step 6. Actually, I think I managed to add the class attribute set to black–key as instructed but it seems I have got it wrong. Can someone please assist me?

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"></div>
        <div class="key" class="black--key"></div>
        <div class="key"></div>
        <div class="key" class="black--key"></div>
        <div class="key"></div>
        <div class="key" class="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:

2

The instruction: " Add this to your second, third, fifth, sixth, and seventh .key elements."

You didn’t follow the instruction.
Also, if you have more than one class in an html element, follow the rule:

<element class="value1 value2 value3"></element>
3

It worked, thanks very much.

1 Like
4

then also consider it as a “solution” as well, happy learning :slight_smile:

5

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