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

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

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

/* User Editable Region */

.canvas {
  filter: blur(200px)
}

/* 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 browser information:

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

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

Link to the challenge:

2

Hi there and welcome to our community!

It’s helpful if you can learn to describe the issues you’re facing in your own words.
Not only is it a vital skill in coding but also, the more you say, the more we can help!

Use the filter property to blur the painting by 2px in the .canvas element.

You haven’t applied a 2px blur filter.

3

Use the filter property to blur the painting by 2px in the .canvas element.

Here’s an example of a rule that add a 3px blur:

p {
  filter: blur(3px);
}

I am wondering why this code doesn’t work and it always says "You should set the filter property to blur(2px) :
.canvas {
filter: blur(2px);
}

4

That’s not a 2px blur.
Oh, I just spotted also that you’re trying to add an additional selector for .canvas. You should be adding the filter property inside the existing selector.

1 Like
5

thank you. solved it :slight_smile:

6

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