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
Let’s start with the errors.
<hmtl> it should be
You have closed the body element after the header element, it should be closed before the closing
After you fix 1 and 2 i believe you will have to give your svg icons a size (width).
Wrapping your nav links in button elements is not needed (When To Use The Button Element)
You have an incorrect closing form tag,
<form/> should be
Fixing 6, you will have to add
display: flex; to #Howitworks (it should have that anyway to make justify-content work).
I think you meant to give .pricing
display: grid, not flex.
Your layout isn’t too bad, you’re using both flexbox and grid. All in all, I think you did a pretty good job.
Give your page sections more vertical space. Right now it’s a bit claustrophobic. Also, add some space between the price elements.
Style your nav links, and give them a hover style.
Use media queries to make the page responsive, you need to switch to a one column layout on small screen sizes.
cursor: pointer; to your submit input.
Look for a color scheme you like and see if you can give the page some more life.
width: 160% on the nav-bar is causing an overflow, try the below CSS instead.
padding: 14px 16px;
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.
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