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

HTML-CSS
1

Tell us what’s happening:

body
{
background-color:#f4f4f4;

.color-box

{
width: 100px;
height: 40px;
display:inline-block;
}

.color1
{
background-color:#116C31;
}
.color2
{
background-color:rgb(162, 27, 27);

}
.color3
{
background-color:orange;
}
.color4
{
background-color:hsl(240, 56%, 42%);
}
.color5{
background-color: yellow;
}

Keep showing error on .color5 class.

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="stylesheet" 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: 40px;
  display:inline-block;
}

.color1
{
  background-color:#116C31;
}
.color2
{
  background-color:rgb(162, 27, 27);

}
.color3
{
  background-color:orange;
}
.color4
{
  background-color:hsl(240, 56%, 42%);
}
.color5{
  background-color: yellow;
}

Your browser information:

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

Challenge Information:

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

2

Hi.

You haven’t done the closing curly brace on the first CSS entry and it’s throwing it all off. Fix that and it should pass

1 Like
3

Thanks a lot it worked:)

1 Like