Prodcut langing page feedback

People here is my work from today i need yours feedback

thank you :slight_smile:

nice work. keep it up :+1:

1 Like

Typo for spelling on “Feautures” → Should be Features*

Center the elements within the footer, and it could look better. The footer element itself is centered, but the content within the footer isn’t.

There’s a hover effect on the buttons within the card, it would be nice if that hover effect was also on the Nav items.

For overall layout, I would use Grid + Flexbox.

Grid for page layout, then flexbox for the items within the layout.

Video on left side in the beginning, then “Premium materials / fast shipping etc” next to it on the right.
Underneath that have the 3 cards with different prices, and finally the e-mail for the newsletter.

Alternatively have newsletter at very top still, but definitely an improvement with the video and the premium materials / fast shipping etc next to it would look much nicer and a better experience in my opinion.

You don’t need to use “align-items” here. Removing it puts the submit button next to the e-mail field, which I think is better. Style the button so it sits flush next to the text field, and matches with height etc.

            display: flex;
            flex-direction: column;
/*             align-items: center; */
            justify-content: center;
            text-align: center;
            height: 200px;
            margin-top: 50px;
        }

Also, this is in the section that’s called “Hero” but it’s not actually the hero, it’s the newsletter / an e-mail list. And the text in the h2, doesn’t describe the e-mail list / newsletter button at all, so the text should be changed or moved, so it properly describes what it is attached to.

 nav > ul {
            width: 35vw;
            display: flex;
            justify-content: flex-end;
            gap:2em;
        }

You didn’t need to use row here, and instead of using space-around, you can just use the gap attribute and provide a value for the gap you want between items. Flex end to align to the right for better layout / space.

Some small things, but overall improvements, hope some of this helps.

Also, if you’re centering a bunch of things on your page in general. It can be worthwhile to just make a class and then apply the class to whatever you want to center.

.centerGrid { 
        display:grid;
        place-items:center; 
}
.centerFlex {
        display:flex;
        justify-content:center;
        align-content:center;
}

Then on whatever you want to center, in the html you just add the appropriate class to that element. This prevents writing the same code multiple times, and gives a cleaner, more readable code structure.