ProductLandingPage

Hi,

Please spare some time to take a look at my Product Landing Page and offer your honest feedback.

Some of the specific problems I encountered include:

  1. I can’t make the (fixed) header opaque. Hence when I scroll, the header text and logo overlay the main section text.

  2. I can’t add the orange-coloured icons before the features items (i.e. the icons before the Fast Shipping, Premium Materials, and Quality Assurance sections). I checked the FreeCodeCamp code for this project but I didn’t quite understand how those icons were achieved.

  3. I couldn’t center the nav bar on mobile, so I had to force it using: padding-left: 25%; Not sure if this is appropriate.

Any suggestions on how to fix these problems and others I might not even be aware of (being the novice that I am) would be immensely appreciated.

Thank you in advance.

I think maybe the reason no one has commented on your page yet is because you copied the FCC example. While it appears you have not copied directly from the example and have even made some improvements (for example, you added heading tags to the instrument cards) I would still suggest you pick a product of your own (I think people get bored of seeing the same example over and over again).

As for your questions:

  1. HTML elements do not have background colors by default (they are transparent). Hopefully that is enough of a hint to fix your problem.

  2. The FCC example is using Font Awesome icons. This is not the only way to do it but is definitely one of the most popular. You can find all the information you need on their website.

  3. When you take a block level element (like <nav>) out of the default flow by using position: fixed then it no longer automatically expands horizontally to take up as much space as possible (it only takes up as much as needed). So even though you have text-align: center set on the <nav> it doesn’t appear to be centering the list on the page because the <nav> isn’t stretching all the way across the page. If you make it stretch across the page then it will center the list.

1 Like

Thank you, @bbsmooth, for your feedback and for pointing out the reason why people might not want to comment on my post. Although I replicated the FCC example, I never looked at their code until I was done with mine. And when I did look, it was simply to compare things and see how I could have done better; never with the intention to cheat.

But I get your point. Henceforth, I’ll always strive to be original. Thank you again – I appreciate your time and comments on my post.

Nice page
I think this is as same as the sample Page.
But it looks nice
Thank u
By the way shivani from this side please visit mine and review it
REDACTED
This is mine please visit.

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