Steinbach Piano - Product Landing Page : What do you guys think?

Project Feedback
#1

Hey,

I just finished my Product Landing Page and I’m looking for feedback.

How do I create 3 price boxes that are the same size? Besides that, is there something else I could improve? Any suggestions?

Have a good one,

yeezus

#2

Hi @yeezus1992 !

Looks great, well done!

For the price boxes, my suggestion is that you put them in wrapper div. Set display: flex; on the wrapper, then flex: 1; on every price box. That should make them always have the same width.

On narrow viewports, the “About us”-link goes into the logo. You might want to remedy that with a media query.

Another issue when narrowing down is that there’s a lot of white space to the right of the text paragraphs.

Keep up the good work!

1 Like
#3

Thanks for the answer! I’m going to work on it. Thanks for the input.

#4

Your page looks good @yeezus1992. Some things to revisit;

  • When using codepen it only expects the code you’d put within the <body> </body> element in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
    • Mentioning because codepen provides the boilerplate for you. You have an error where your footer element is outside of the body element. Everything that the browser renders belongs in the body element.
      Run your HTML code through the W3C validator.
    • There are coding errors you need to address.
    • In “Beschreibung des Klavierverkaufshops” you missed closing the .grid div
  • Don’t use <br> to force spacing. Use margin and/or padding in CSS.
  • Minor issue. You gave your nav links a weight of 700 but you only imported the weight of 300.
    • you only need to link or import the font. Unnecessary to do both.
1 Like
#5

Thanks for the info! I’m going to fix it.