Product Landing Page using CSS Grid

Hi, arey! 👋

Nice work on this challenge! 🙌 Your solution looks pretty good and is responsive! 👏

A couple of things I'd like to suggest are,

• Maybe not using CSS grid to lay out the entire page. It isn't really necessary since block-level elements stack on top of each other by default. You should be good by just having the header, main element, and footer next to each other in your markup because they will display one after the other on the page.
• Setting background-size to cover and adding background-repeat: no-repeat to the background image to make it look more like the original design (especially in the mobile view).
• Turning the social media links at the bottom of the page into actual links by wrapping each of them in a link tag. You should also include some screen reader-only text inside the links or add an aria-label to each of them to show what the links are for.
• Perhaps using a link tag for the "Register" CTA since those commonly take users to a register or sign-up page. 😉

Hope you find these tips helpful. 😊

Keep coding (and happy coding, too)! 😁

Hi Arey,

Very nice design.

Try focusing more on your margins, padding and image placing. On the button, you needed to add some box-shadow property.

Also, I always use an HTML/CSS validator to check the code before submitting my code because then I know that my code is 100% before submitting.

Hope that helps you out.

Happy coding :)