Product Landing Page - opinions?

Code Feedback
1

Oh, I had my fun with this, hope you do too :slight_smile:
Heavy CSS3 usage, so a relatively recent browser is needed. Works in recent FF and Chrome.
Enjoy: https://codepen.io/azbosakov/full/ewZqrK

2 Likes
2

This is a really creative product landing page!

Nobody but you would’ve thought to make this!

There are some things you need to change:

  • widen the window with your main content in it and add a little padding to the left and right sides of it so that your text is positioned around the center a little more.
  • There is some kind of empty footer at the bottom of your page. Remove it or leave it there for an actual reason.
  • The fixed nav bar takes up a bit too much space. If you can, make it slide down on a user’s click from a hamburger button or a dropdown thing.

At all else, great job.
:smiley: :clap:

3

It’s not an empty footer, it’s a scrollbar for the related products. There was one more of them, then I didn’t like it and removed it, then I forgot to add another one in its place. I’ll think of something. Resize the window to a smaller size, when the ribbon with the products overflows, it’ll be more obvious as a scrollbar. Also, the header shrinks and re-arranges at smaller window sizes.
EDIT: Did some minor tweaks of the shadow around the body, added a fifth product to see the scroll bar.
EDIT 2: The footer scrollbar is overlay over the real one, with ‘pointer-events: none’, clicking/dragging it actually clicks/drags the real scrollbar bellow. So, no ‘cursor: …’ prop to set it to ‘<->’ on hover. Haven’t thought about this when I came up with the idea.

1 Like
4

@AZBosakov, if it’s not needed on a larger screen then use visibility: hidden; or display: none;
They act differently so research and find which will work best for you.

5

Great work,

I like it!

Some ideas:

  • a little more spacing to the border, because the long lines are harder to read