Feedback please! Product Landing Page

Hi!
I just finished my landing page! :sweat_smile: its very basic. Any suggestions and advice will be really appreciated.
Here is the link–>

Product Landing Page (codepen.io)

2 Likes

It’s well organised and looks nice…:blush:

1 Like

You have a gap between the header and the top of the viewport. When you scroll, you can see the main content showing in that gap that is visible.

1 Like

Ooh i didn’t notice that! Just fixed it . Thankyou!:relaxed:

1 Like

Looks good.
You can make your logo a link leading you to the top of your page.
And you can change the design of the email area.
A little space between Email area as a whole and Get started button may make it look better.
Some space between each section will allow your page to look a little better.
When I am checking the responsiveness of the page, I am seeing that the border-box of the #footer and the border-box of the other section in the body are of different sizes.

A tip that I found doing my last project after making it more and more complicated: Use media query for min-width 300px, 600px and 800px.
It will make your page more responsive.

Edit: There’s a gap between the Navbar and the viewport.
In the CSS:
You can remove the border from the body element.
You can add top: 0; to the #header element.

@HarshJohn If you want feedback on your own work please create a thread for it.

Sure, I edited my comment and deleted that particular part.

1 Like

The colors are well thought out, the fonts are good, the logos are cute, the little icons at the bottom are lovely. The elements are all very well integrated.


I have four design related tips for you:


FIRST: Header block text can be made into the Visual centerpiece of the website, by using a large and interesting text. Google Fonts has a good selection of interesting and importable fonts: GOOGLE FONTS



SECOND: Logos should usually be saved as .PNGs with invisible backgrounds. This way they can be used over any background, seamlessly.

I removed the background for the logo, and saved it as a png, here at IMGR : https://i.imgur.com/wXTMLfD.png if you would like it.

Screenshot 2022-03-08 10.04.40 AM




THIRD: Centering Elements is usually good. The list element is more balanced when centered.




FOURTH: Choosing good Spacing and sizing is important. The video could be made a bit larger. And a wider margin, or padding could be put below it.

Elements should rarely be too close, or too wide spaced… Like Goldie Locks, the spacing should be “just right” between the elements on a page.


2 Likes

Thank you so much for taking time out to explain these things! :heart: Really appreciate it!

1 Like