Would like feedback on this. Mainly criticisms

Code Feedback
1

Product Landing Page

2

Narrow your browser window as far as it will go. Is that how you want it to look?

1 Like
3

nah. looks awful, pretty unprofessional. would like some solution tho

4

I know you wanted criticisms but to be honest, your page looks better then mine. I could lie and roast you a ton, (trust me, i am good at that) but I really like it.

1 Like
5

First off, you already have a lot there. It’s a matter of “massaging” the details. Saul Bass had a great way of putting it:

Consider the following as suggestions … in the end, it’s subjective

  • Regarding the mobile layout
    • fix one section after another with media queries
    • nav: likely hidden (e.g. hamburger) menu, or links below logo
    • rest of the content “stacked” on top of each other
    • tablet: likely a few (two) column parts, mix between desktop and phone
  • general
    • pick a less intense background color
      • (possibly black, and red accents instead)
  • navbar
    • make logo on desktop smaller
    • center all navbar items vertically
    • fix navbar covering part of the content when clicking on links
  • videos
    • center the whole video block horizontally
    • possibly change the size of videos more fluently / avoid “holes” in the layout
      • e.g. keep 3 videos in a row on large devices and shrink them together in proportion to window
      • e.g. keep 1 video large on top and 2 below, again shrink them together proportionally to the window width
  • sign-up
    • add spacing between text block and sign-up block
    • style the form elements more interestingly
      • (see codpen or dribble for inspiration)
    • make the form elements bigger
      • e.g. see material design docs for reference proportions
    • helper text for email-input: add spacing on the left
    • center textblock+sign-up vertically within the section or reduce hight …
  • features
    • keep similar font styles like rest of page
      • e.g. above is condensed and only features are not condensed
    • add spacing around list items
    • solve bullet points sticking out of container
      • e.g. remove them or make them fit in the container with spacing
    • possibly add spacing or a simple footer section, so the features don’t stick to the bottom
1 Like
6

Narrow your browser as skinny as you can make it and style the page so that it looks good. This will be your base CSS. Then slowly widen your browser until you think you have enough horizontal room for your first break point, create the break point (using min-width: XXem) and style. Continue on for as many break points as you think you need.

1 Like