Design a Set of Colored Boxes - Design a Set of Colored Boxes

HTML-CSS
1

Tell us what’s happening:

All the colors are the way the instructions want, but tests 6 7 8, and 9 fail. What am I doing wrong?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Boxes</title>
    <link rel="stylesheets" href="styles.css">
</head>
<body>
    <div class="color-grid">
        <div class="color-box color1"></div>
        <div class="color-box color2"></div>
        <div class="color-box color3"></div>
        <div class="color-box color4"></div>
        <div class="color-box color5"></div>
    </div>
</body>
</html>

/* file: styles.css */
body{
  background-color: #f4f4f4
}
.color-box{
  width: 100px;
  height: 60px;
}
.color1{
  background-color: #4CAF5f
}
.color2{
  background-color: rgb(26, 82, 59)
}
.color3{
  background-color: green
}
.color4{
  background-color: hsl(150, 21%, 52%)
}
.color5{
  background-color: red;
}

Your browser information:

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

Challenge Information:

Design a Set of Colored Boxes - Design a Set of Colored Boxes

2

Hi. Try putting semi-colons after all the color values that won’t pass. That worked for me when I tried it with your code.

1 Like
3

I hate that it did not throw an error or not work but just failed the tests without the semi-colons.

1 Like
4

I agree that semi-colons may have been unnecessary where there is only one value in the curly braces.

Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.