Product landing page - I would appreciate feedback

Hi everyone. I’m new to forum myself so please forgive me if I type something wrong or somewhere where it doesn’t belong.
Please note that my code has all of the tags that codepen does not require(such as body etc). I do not build my projects in codepen (instead I use atom and live server) and therefore I copy/paste my code in code pen.

I would like to get some feedback on my overall layout (color choices) and responsiveness as well.
I passed all the tests and here’s a link to my [Product landing page](codepen: https://codepen.io/dino-muratovic/pen/qBBGjEw )

I wish you all happy Thanksgiving and all the upcoming holidays as well as happy coding!

1 Like

Hi, @DinoM!!! Welcome to the forum. :hugs:
I like your project, I can see You have some experience with css and html.
I don’t speak english so i will try to explains the best I can some things. :sweat_smile:

The first thing I can see You pasted the complete code. CodePen only requires you paste the code contained between body tag.

Second, that’s how you Page looks in small devices.


Maybe you have to set margins and padding smaller to fit all the screen. And the nav var is too big and the nav links too small.

There are more things you can improve, but its a great work! Congrats! :grin:

Thank you. You are right I do need to make navbar smaller for smaller devices it covers too much of the user screen. I have removed body, html and head. The only one I can’t remove is link to google fonts otherwise it will change fonts.

Thank you for your feedback I really appreciate it. I will make changes to navbar tomorrow.
Cheers!

You can do it in the pen settings :wink:

The same for the test script you can paste this link in the javascript section of the pen settings and delete from the code.
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js

Oh wow. I didn’t know that at all! Well I have learned something new about codepen today. Thank you so much!

1 Like

and @ricardoantonio

Actually, for fonts, click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box since a link(s) to your font(s) would go in the <head> </head> tags