Seeking feedback on my Product Landing Page Project

Code Feedback
1

Dear Campers,
This is a link to my Product Landing Page project.
Product Landing Page
Any constructive criticisms are welcome.

1 Like
2

Text over an image is hard for some people to read. I’d recommend only putting text over an image if you can find a clear portion of the image without any visual clutter.

1 Like
3

Thanks for the feedback. I looked for a clear image for that purpose but I couldn’t find one for free. So I went with what was available since I was just trying to learn the different positioning properties. I will change the image if I get a suitable one.

1 Like
4

A good hack that I often use is to have an overlay layer which will make the picture a little darker.

Was there a reason why you made the page so narrow?

I like the way your nav buttons enter the viewport. However, you could add a transition: 0.3s; on the hover class to fade in the BG. Also the border you have put on the .menu li a:hover class makes the element jump on hover.

1 Like
5

Thanks for the feedback. I have tried implementing some of the suggestions you and others have made. Hopefully it’s better now.

1 Like
6

:exploding_head: Great work :+1:

1 Like
7

Thank you for the feedback. Hopefully I will do better next time.

8

Hi Nibble,
overall looks ok!
You could perhaps review the color palette?
Also you could try using this trick to smoothly change background color on your links on hover:

.menu li a {
    background-color: transparent;
    transition: background-color .2s;
}

.menu li a:hover {
    background-color: green;
}

Cheers

Fabio

1 Like
9

Thanks @iClusterDev. I will definitely do so.