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

Tell us what’s happening:
Describe your issue in detail here.
Create a rule that targets both .one and .two and increase their blur effect by 1 pixel.
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;
}
<!-- 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 6.1; Win64; x64) AppleWebKit/537.36 (HTML5, like Gecko) Chrome/107.0.0.0 Safari/537.36

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

Link to the challenge:

use a comma between the class selector names to select both types at the same time

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