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

Tell us what’s happening:
I’m getting the error: " You should set the filter property to blur(2px)." But I already have. Is this a glitch ? (I’ve seen some other posts with the same issue but no fix)

Your code so far

/* file: styles.css */
.canvas {
  width: 500px;
  height: 600px;
  background-color: #4d0f00;
  overflow: hidden;
.canvas {
  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;
}

.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 (X11; Linux x86_64; rv:107.0) Gecko/20100101 Firefox/107.0

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

Link to the challenge:

you wrote a new .canvas and placed it inside the existing .canvas which is not allowed
They just wanted you to add the filter property to the existing .canvas

Ugh, thank you for pointing that out. I don’t know why I didn’t see that.

1 Like