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

Tell us what’s happening:
i followed the example stated above but it’s not working for me please what can i do?

Step 34

The colors and shapes of your painting are too sharp to pass as a Rothko.

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);

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;

.three {
  width: 91%;
  height: 28%;
  background-color: #b20403;
  margin: auto;
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Rothko Painting</title>
    <link href="./styles.css" rel="stylesheet">
    <div class="frame">
      <div class="canvas">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>

Your browser information:

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

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

Link to the challenge:

Add a ‘filter’ property to your ‘canvas’ class. Read again the instruction and take a look above and below your code. Never repeat the same curly bracket one after another.

The example is just an example.

You are supposed to look at it and understand it then do something similar to it.

They want you to apply a blur to the .canvas element.

I suggest you restart this step and try this one again…

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