Learn the CSS Box Model by Building a Rothko Painting - Step 35

HTML-CSS
1

Tell us what’s happening: what am I missing here? error says- You should have a .one, .two selector list.

Describe your issue in detail here.

  **Your code so far**

/* file: styles.css */
.canvas {
width: 500px;
height: 600px;
background-color: #4d0f00;
overflow: hidden;
filter: blur(2px);
}

.frame {
border: 50px solid black;
width: 500px;
padding: 50px;
margin: 20px auto;
}

.one {
width: 425px;
height: 150px;
background-color: #efb762;
margin: 20px auto;
}

.two {
width: 475px;
height: 200px;
background-color: #8f0401;
margin: 0 auto 20px;
}

.one .two {
filter: blur(1px);
}

.three {
width: 91%;
height: 28%;
background-color: #b20403;
margin: auto;
}

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Rothko Painting</title>
  <link href="./styles.css" rel="stylesheet">
</head>
<body>
  <div class="frame">
    <div class="canvas">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
    </div>
  </div>
</body>
</html>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Learn the CSS Box Model by Building a Rothko Painting - Step 35

Link to the challenge:

2

That’s not correct syntax for what you need to do here.

You need some kind of separator between .one and .two

You already did stuff like that earlier in the course, try to recall it :slightly_smiling_face:

1 Like
3

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