Product Landing Page - Looking for feedback

Code Feedback
1

Link to my Product Landing Page in Codepen

It took me a good couple of weeks to figure out all the components.

Let me know your thoughts.

Thanks
Pete

2

Welcome back!

As for your page…

It is very nice, however, I have a few improvements to suggest.

  1. The color scheme is distracting and or strains the user’s eyes. Try to use more modern colors like white and gray. On my Portfolio page you can see how I used a white color scheme with black text in order to make the page easier to read.

  2. Replace your banner at the top to be 100% of the width like on my portfolio page. It’s a background image (w/ background-attachment: fixed; ) and then I centered content over it using flexbox.

justify-content: center;
align-items: center;

Check out CSS Tricks Guide to Flexbox for very clean and well-presented documentation on how to use flexbox.

  1. Move your footer to the bottom of the page. It does not need to follow the user.

  2. Make your images for the items smaller. They should all be one size which should be perfectly square. Use Google Advanced Image Search and then use the aspect ratio drop-down list.

  3. On my portfolio page, I linked above, you can see I alternated the sections between white and black, and gray to add some varaity. Try this with your page. I suggest making the video content area black (or some other dark color) like what I did with my goals section.

  4. Then for your About us section, put the image on the left and some text on the right like with http://www.anderssonwise.com/. You can see how they did the About us section. It doesn’t have to be the same sizes and everything but you get the idea.

Notes

Please hit the reply button or I do not get notified.

Helpful tools–> https://codepen.io/Mike-was-here123/post/check-out-these-sites

3

Thanks @michaelnicol

I will have a look at the sites you suggested and digest.

Cheers
Pete

1 Like