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

Instructions are to " Use the filter property to blur the painting by 2px in the .canvas element." I’m not sure where my issue is.

/* file: styles.css */
.canvas {
  width: 500px;
  height: 600px;
  background-color: #4d0f00;
  overflow: hidden;

/* User Editable Region */

p {
  filter: blur(2px);
}

/* User Editable Region */

}

.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 problem is the selector you are using. You are applying the blur to a p element, not the the canvas itself.

You are also selecting an element when you are already in an element. It can get confusing at times when the rest of the code is off the screen, but make sure to have a look at the code before and after the section you are editing.

3 Likes

Thanks! I was definitely overthinking it.

1 Like

Dude don’t take stress but take it easy with cool and calm mind :blush:

1 Like

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