What do you guys think of this Product Landing Page?

Code Feedback
1

Hi

What do you guys think of this ?

https://codepen.io/usernameonline/pen/yWpxaw

1 Like
2

Nice design, but the images don’t display for me. Also, I’d personally make the navbar links Roboto, but that’s your choice.

1 Like
3

Try find a new site to host images on. Imgur does not work on codepen.

1 Like
4

@userNameOnline
You can you use postimage. org. That website works well with Codepen.
The project looks pretty good. I dig the colors. It is hard to give comments without the pictures. Pictures are an important part of the website.
It seems that you will have to change the menu to be responsive. The menu items are wrapping when the page is shrunken.

1 Like
5

Hi, for me the Project “Landing Page” is ahead still :slightly_smiling_face:. Hopefully I will do as good as you. Only one remark from my side the buttons “home” and “contact” are linking both to the same part of the site. Is this like you want this to work?:thinking:

1 Like
6

Thanks man!

I uploaded all the images onto a different site so hopefully they will show up now and yeah I changed the font on the menu lol… I did think it was a little bit cheezy using that font and hearing someone else suggesting it be changed made me rethink that haha

1 Like
7

Cool beans, thanks for the recommendation!

I uploaded all the images onto that site, so hopefully they will now all be visible to everyone. I’ll take another look at the media queries I have set up right now and tinker around with them a bit more. I kinda rushed that part of the project when I was setting this up.

1 Like
8

@userNameOnline Much nicer! The right images make the website come alive. Now I can critique the website.

  • I say to change the menu items to stack on top of each other or make a hamburger menu. If the item list is short just stack them. If the list is long change it to a hamburger.
    Here is an image of the page at 350px width.

menu

  • Set the video to 100% width below 680px width and make it responsive.
1 Like
9

That is really nice man!! love it!

1 Like
10

These are my opinion but a couple small changes that I would make to the page to give it a little better feel for the user:

I would add a hover effect to your nav links. To keep with a similar style I would just lessen the transparency on hover like below.

.nav-link:hover { background: rgba(0, 0, 0, .65); }

For your email element I would do the following:

  • Add a hover effect similar to above adjusting the transparency.
  • Change the cursor to a pointer to indicate that it is clickable.
  • Increase the padding on the button and email area to 8px - 10px to give it more focus.
  • Increase the width of the email area to ~250px.