Product Landing page with live video header, your feedbacks really needed

Hi everyone,
So, I decided to go for something entirely different from what I’ve been seeing frequently here. I decided to include my video as a background for my hero/header/banner anyhow you call it.
I’m not sure how well I did, but I know I tried very hard. Please guys, check it out, and tell me what you think about the whole stuff. thanks.
here’s the link:
https://codepen.io/tonymandated/full/NWRjdOx

2 Likes

HI @tonymandated!

I think your page looks good.

For the video, it would be nice if it was on autoplay instead of having the user scroll down and pressing play.

I would dig around online to see how to do that.
This might be a helpful resource

For the products, it would be nice if the titles and buttons lined up.

Keep up the good work!

2 Likes

Thanks for your feedback, I’ve effected your recommendations. Kindly check out the project now and if you have further observations, I’ll be glad to work on them.

1 Like

Hey @tonymandated this page looks great but just a tiny suggestion I think it would look much better if both the video backgorund section and the subscribe to mail section were of same height and both of them have height of full viewport.
Also I think you should add box-shadow to your cart button it should stand out from the rest of the page but without box-shadow it just blends in with everything that is white or white-ish.
Other than that your page looks great!! Good Job!

1 Like

Thanks very much, I have done as you suggested, and I love the subscribe section now. Please take a look at the box-shadow effect, I’m not sure I’ve done it in the best way, thanks so much for your time.

Yes now the sections looks good. And about the box-shadow, you can try putting this box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); in #cart-logo you can change the values as per your liking.

1 Like

Your page looks good @tonymandated. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Check that the user has entered a valid email addr. Throw an HTML5 validation error if not.
    • You learned to do this when coding the survey form
1 Like