Product Landing-page project

I have completed my landing page, i would like your suggestions.
link: https://codepen.io/LEGRAY/pen/wbjBpr

Hey @legray

The landing page is good. But with certain changes it can look better.

  1. Try to align the texts beside the watermelon logo.
  2. Add margin top for the watermelon logo.
  3. I feel like there is a lot of white space all around the image in the center. Instead you can set the same image as the entire background for the div - watermelon field and set its height and width to 100vh.
  4. Try to convey the what you product can solve and then set the call to heading and action. I can see that the Call to action - Email field is just below the image in the center. Try to set the same email field at the end before the footer after you have explained about the product.
  5. Allow your footer to take the entire width of the page.
  6. Add some margin or padding of the content inside the footer.
  7. Add some padding for the email input element.
  8. set Scroll behavior as smooth for the body, so that on clicking the nav-link, the body will have a smooth effect.
  9. The Website is not responsive. Try to make responsive.
1 Like

@legray Nice color combination. The webpage looks beautiful. Keep up the good work!

adi188288 sure did give you a lot of useful feedback. Here is mine:

I suggest (in my opinion):

  • Centering vertically the menu items
  • I think the hovering watermelon bowl is not necessary. Use animations where it makes a bit more sense.
    For example, using it to fade something in on page load is cool.
  • Make the menu bar stay on top of the moving watermelon bowl.
  • Not making the page responsive is a big fail. Responsiveness is a must these days.

I am going to buy some watermelon as soon as I see them selling it in the stores. It is pretty tasty.

Well tried, now start learning flexbox for layout as i can see a lot of alignment problems

adi188288 thank you for suggestions .

brandon wallace thank you for suggestions.

IAmRC1 thank you for suggestions.