Product Landing - computers(WIP)

Hello. I would like some feedback on my landing page as well as some help.
I clearly dont have an eye for design but here is my page: Product landing page fork (codepen.io)
what I need help with is the email section. it seems no matter what I do I cant it to be on separate lines.

HI @Mholt193!

Welcome to the forum!

I would get rid of the br tags and set the input and label to display:block;

1 Like

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

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • Mentioning because you have elements out of order. Everything the browser renders belongs in the body element. You have main element and header element (and all it’s contents) outside
    • review this for an understanding of the HTML boilerplate tags
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Check that the user has entered a valid email addr. Throw an HTML5 validation error if not.
    • You learned to do this when coding the survey form