I have completed the Rothko Painting course. I do all the exercises twice, once on freeCodeCamp, and on VS Code. For some reason the painting is not displaying correctly on the browser, I double checked the data on VS Code, everything is accurate. I tried different browsers, it still doesn’t work. Any suggestions?
can you show us some screen shots so we can understand what is different?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rothko Painting</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="frame">
<div class="canvas">
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.canvas{
width: 500px;
height: 600px;
background-color: #4d0f00;
overflow: hidden;
filter:blur(2px);
}
.frame{
border: black solid 50px;
width: 500px;
padding: 50px;
margin: 20px auto;
}
.one{
width: 425px;
height: 150px;
background-color: #efb762;
margin:20px auto;
box-shadow: 0 0 3px 3px #efb762;
border-radius: 9px;
transform: rotate(-0.6deg);
}
.two{
width: 475px;
height: 200px;
background-color: #8f0401;
margin: 0 auto 20px;
box-shadow: 0 0 3px 3px #8f0401;
border-radius: 8px 10px;
transform:rotate(0.4deg);
}
.three{
width: 91%;
height: 28%;
background-color: #b20403;
margin: auto;
filter:blur(2px);
box-shadow: 0 0 5px 5px #b20403;
border-radius: 30px 25px 60px 12px;
transform:rotate(-0.2deg);
}
.one,.two{
filter: blur(1px);
}
This is what you see in vsCode?
for some reason I cannot paste the html.
But the picture is what I have in VSCode.
Tried other browsers same thing
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
Another question. Your code looks short. Are you using the code from a certain step?
No, that’s it. There are divs and then css applied to each div.
Thanks for the back ticks. We keep learning…
1 Like
I will book mark this and try it as soon as I get to a laptop. Should be interesting and will let you know if I get a different result.
Our editor specifically expects the stylesheet to be linked to ./styles.css, not css/styles.css.
But that’s just a path. I always make a css folder on my computer.
Right, and its the wrong path for where the file lives in freeCodeCamp’s editor.
okay so I tried it and in my case I see the exact same thing as the fCC editor.
(but I didn’t preview it inside vs Code itself, I just previewed it in the browser)
Then I tried copying your index.html specifically (I was copying directly from fcc the first time I tried), and again, I modified the path to work with the styles.css I have and BINGO, the whole thing changed to the wrong thing!
So then I compared your code against the fcc code and I found the following differences:
2 additions were made to the head element:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and the div one, two and three were all changed
<div class="canvas">
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</div>
They are nested in your version.
Try copying the code exactly and it will work exactly.
Thank you thank you thank you. I did not realized they should not be nested, because started with canvas nested in frame, and I kept going like those matryoshka dolls. Thanks a lot.
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.