Loving the look of my Product Landing Page

Code Feedback
1

I still need to make my page responsive, but I’m loving the look of it at full screen. But as always, this forum gives incredible feedback on my code.

https://codepen.io/terrifricker/full/rNVwgPx

2

Here are some suggestions I have for you:

  • Put your main content inside a container.
  • The promises text numbers are black and don’t contrast well with the red background
  • The form submit button doesn’t match your overall look. Since everything looks like rectangles and your button is rounded.
  • The about us section could be split into two columns with one having the text, and the other with an image.
  • Adjust the line height a bit
  • Elementary, Middle, and High School buttons of where it says select, they could be block and would look nice.

I created a button that I think would suit your design a bit:
https://codepen.io/razzakeducation19/pen/OJVxMGb

I think that should be about it.

Have a great day!

3

Wow! Thanks. I actually have a question about and . I think that is what is used for SEO (Search Engine Optimization)? But I’m trying to use the semantic element tags. I don’t really know the difference between the two.

Do you mean the line height in the about section? I’ll fix the buttons and promise numbers.

4

Your page looks good @terrifricker. The only thing I have to add is to check that the user has filled in their email and if not, show and HTML5 validation error. You learned how to do that when you made your form.

5

Looks good.

  1. You need to add a z-index to the #nav-bar otherwise the #promises h2 elements go on top of the navbar. Or, instead of using position relative on the h2 use flexbox on the div container and vertically center the text using align-items: center (would be my pick of the two).
#promise-container > div {
  display: flex;
  align-items: center;
}
  1. You need to put more work into making the page fully responsive.

Good job, keep it up!

1 Like