Product Landing Page - Personal Training site

Hey guys! I’d like some feedback on my personal training product landing page. If you have any feedback or constructive criticism for how I can improve the site, please let me know! Thanks in advance!

Product Landing Page

1 Like

Nice job on this. I really like the colors you added. You need to change quite a few things and here are a few of them:

  • That input that you’re supposed to enter you email into is too long and too thin. It seems more like a very long button if you come to think about it. A user may not put their email in if they can’t see it properly.
  • When I click on one of the links that “teleport” me to another part of the page, there is no animation of getting there. try assigning the scroll-behavior css property to html, body and set it to “smooth”.
  • At the bottom of the page, the “product tiles” or items are all different sizes. Try to make them the same.

At all else, great job. Keep up the great work.

Great work you did. As said above, there are a few things that you need to improve.

  • the navbar is not well aligned (the brand on the left with the menu on the right)
  • I suggest you move the email form in the nav (in the center)
  • for your staff member: divide the section in two bloc, one for image and one another for description
    *try to increase the size of the font

Good luck

Hi @fauletto, your page looks good. Some things to revisit;

  • On using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
  • If the user clicks the submit button without filling in their email they should get an HTML5 validation error. You learned how to do this when you did the survey form.