Hey fellow campers, can you give a feedback to my Product Landing page?

Hi,

I’ve just finished my product landing page. Can you guys give me a feedback and let me know what you think of it? https://codepen.io/pascal-bilal/full/KGwWNN/

P.s. I’ve used the following webiste for inspiration (without looking at the code :slight_smile: https://www.asus.com/us/Tower-PCs/ROG-GT51CH/

5 Likes

Hi Pvanloon1983,

This looks awesome! I think the page is really cohesive and attractive. I also really like the bold colors used with restraint. I’m not a designer but I think it works great.

I think that you need more empty space in the body. I think the right amount of ‘black/white’ space will really make this page pop.

The other thing I think is that you might want to is set your background image with CSS instead of HTML. CSS has some useful properties like

background-size: cover; background-position:center;

That make this easier to build responsively. I made a quick fork of your project to play with since I haven’t declared the background image in CSS very often and I wanted to refresh my memory on how it works!
This definitely helps with responsive layout and keeping the majority of your image in focus.

.

If you do this you will probably want to give the background image some top-margin so the text is still readable and over black background. Also, from my experience whenever I set the background image with CSS the 2 things I always forget are to write URL instead of SRC and to give the background image an absolute height. For some reason, this is required.

I hope this helps. This is seriously an awesome looking product landing page. My fork of the page is here and this is where I went to refresh my memory on the syntax for background image in CSS.

-Gabe

Thanks @Gabester0,

I have implemented your comments, And indeed it looks better now.

Hey Pvanloon1983 it looks really great!

I am really inspired by your landing page. I just think it has really cool design and execution.

I did realize that I kind of caused a little issue with my suggestion :slight_smile: because the monitor tower in the image is silver and your text is white. Now the monitor in the background makes it hard to read the text over the image!

Before, you had the page spaced out so that the text from #innertext-first-section p wasn’t over the background image.

I had thought about this before when I was playing around with your pen and I forgot about it because I wasn’t sure what to suggest as a fix. In my screenshot, I tried giving the paragraph a black mostly opaque background so there is more contrast between the picture and the text. I also made the white text a little opaque which makes it look grey instead of white. This is an effect I am really into right now but if you wanted a brighter white from the text you don’t have to do this.

You could probably experiment with making the background-image more opaque so the base background color bleeds through a little.

Whatever you want works here.

I seriously love your pen. Thanks for sharing it!

-Gabester0

Hi @Gabester0,

Thanks for your kind comments. Again, i have used your idea of the opaque text background.

I also changed the way the menu works. When the screen gets smaller, a hamburge icon appears and when clicked the menu items will show themselves. The reason why I have done this is that it work better when navigating through the page: https://codepen.io/pascal-bilal/full/KGwWNN/

Pascal

Hurray!

I am glad to be helpful. I love what you did adding an identical color/opacity shadow to the background box. I did a double take and had to check the CSS because I couldn’t tell if what I was seeing. Slick!

I hope to see more of your projects @Pvanloon1983.
-Gabester0

Woah! Superb design and execution @Pvanloon1983, congratulations!!

Thanks @2alin. Much appreciated.

Outstanding, this is all i have to say! Congratulations, very impressive!

Thanks @AdrianJ. I appreciate it.