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

Tell us what’s happening:
It says to set the filter property of .three to blur(2px) and i’ve done that but my code does not still pass.

  **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;
.three {
filter: blur(2px);
}
}
/* 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/102.0.5005.61 Safari/537.36

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

Link to the challenge:

you called the class three twice… Just insert the filter attribute inside the already existing class (.three)

my goodness, thank you so much!

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