Learn Responsive Web Design by Building a Piano - Step 6

HTML-CSS
1

This is what I need to do
Remember that a class attribute can have multiple values. To separate your white keys from your black keys, you’ll add a second class value of black--key . Add this to your second, third, fifth, sixth, and seventh .key elements.

This is the error I am getting
Your second .key element should also have a class of black--key .

I’m not sure how to resolve my issue plz help thx
My 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" 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>
    </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/118.0.0.0 Safari/537.36

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

Link to the challenge:

2

You can only have one class attribute on an element, but you can have multiple values (or class names in this instance) for the attribute. You’ve had multiple class names on elements plenty of times in previous courses. Do you remember how to do that? Hint: you do not use a comma to separate them.

4

Thank you for this hint. It worked with this reminder.

5

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