Feedback on Product Landing Page please :)

Code Feedback
1

I have tried to create a product landing page, it passes all the tests and I haven’t spent any time on how it looks but any help on how to make everything look better?

have a look:

By better I mean make everything better aligned on the page

Thank you!

2

Let’s start with the errors.

  1. You have <hmtl> it should be <html>.

  2. You have closed the body element after the header element, it should be closed before the closing </html> tag.

  3. After you fix 1 and 2 i believe you will have to give your svg icons a size (width).

  4. Wrapping your nav links in button elements is not needed (When To Use The Button Element)

  5. You have an incorrect closing form tag, <form/> should be </form>.

  6. Fixing 6, you will have to add display: flex; to #Howitworks (it should have that anyway to make justify-content work).

  7. I think you meant to give .pricing display: grid, not flex.

3

Your layout isn’t too bad, you’re using both flexbox and grid. All in all, I think you did a pretty good job.

  1. Give your page sections more vertical space. Right now it’s a bit claustrophobic. Also, add some space between the price elements.

  2. Style your nav links, and give them a hover style.

  3. Use media queries to make the page responsive, you need to switch to a one column layout on small screen sizes.

  4. Add cursor: pointer; to your submit input.

  5. Look for a color scheme you like and see if you can give the page some more life.

  6. width: 160% on the nav-bar is causing an overflow, try the below CSS instead.

#nav-bar {
  display: flex;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  justify-content: flex-end;
}
4

Add Bootstrap to your CSS by importing it as an external stylesheet in settings. Do this and see your navbar instantly look a little better. Use Google Fonts to style up your heading tags (h2, for example).

What helped me the most was looking at the code of other pages that I thought looked great, and figuring out what they used and how they used it to get their pages looking so nice.

5

Thank you all for your help, I have made most of the recommended changes. I couldn’t add the bootstrap without re-writing it all again or I wasn’t sure how to do that