Product Landing Page - Piano

Hello, I’ve just completed my landing page for Steinway and Sons piano, and I wanted to get some feedback from the community, please!

Thanks in advance

Link to the page

1 Like

Wow! Very nice, neat, and simple. I really like the parallax background! :+1:

That’s great, thank you!

I love this landing page so far but it could definitely be refined! Below is my advice.

Major issues:
-It’s not responsive for mobile or tablet/ipad. It only works on full screen.

Minor issues:
-You are able to scroll up on the home page which causes the title text to start lower than the center of the page.
-When you click on the links, the navbar is covering part of the title of the page.
-When you switch quickly between one piano and the other, both images flip at the same time which looks a little funny.
-In the contact section you should add more spacing in between the text, email input, and submit button and make the submit button less wide, which will make it look cleaner and more readable.

Thank you for the feedback! I realised that I updated the code offline but I need to update the codepen so it should work for iPad and mobile properly now.

Can you explain how to make it so that when you click on the nav links it does not cover part of the page?

Not sure how to fix the weird image flip bug but I can change the contact info spacing!

Welcome to the forums @RyanzpLee. Your page looks good. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should be aware of and address.
  • And while </br> is not a valid HTML element you don’t want to use <br> to force line breaks or spacing either. That’s what CSS is for.
  • You have this stray piece of code scroll-padding-top: 70px; on line 2 of the HTML section. Looks to be a propery: value; pair that belongs in CSS.
  • In your html declaration you have font-family:"Lato", ; It’s missing the fallback font. Google fonts recommends sans-serif