CodePen project not appearing correctly in browser

Hello guys! I have been going through the curriculum material and I enountered a problem on the third project of the Responsive Web Design Certficate. I tried to copy and paste the html and css code on two seperate files locally on my pc and connect them with these lines in the html document.

<link rel="stylesheet" type="text/css" href="original.css">

The thing is that the page doesn’t show up like in codepen. I’m testing the example given, not my implementation. The result is this:

The yellow signs warn about “unknown property name” or “invalid property value”. Why is this happening? I kind of lost my motivation by not being sure that what I create in code pen works flawlessly… I’ve tried both in Chrome and Firefox.

Do you have the link for your codepen? Did you put the CSS in the code pane for css?

The pen is the one provided as an example for the project. Here it is:
codepen .io/freeCodeCamp/full/RKRbwL
I didn’t understand your question. I created one original.html file and one original.css file and pasted inside the code. As I mentioned, in the .html file I added on top the lines that link to the .css file.
I’ve added a space in the codepen link because I’m new and I’m not allowed to post links yet.

It is because the CSS is written using SCSS/SASS

If you click the down chevron/arrow on the CSS code box and then click “View Complied CSS” it will output the normal CSS, copy paste that instead.


Ah, what lasjorg said, they used SCSS in their example so you need to compile it before copying it out.