DEV Community

Cover image for Create an Exclusive Product Landing Page using HTML CSS & JS

Create an Exclusive Product Landing Page using HTML CSS & JS

Aniket on September 01, 2021

Hello dear developers, In today's blog, we'll see how to make an exclusive Product landing page using HTML CSS & JavaScript for your website. ...
Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️ • Edited
.right_container {
    width: 100%;
    height: 100%;
    /* ... */
}
Enter fullscreen mode Exit fullscreen mode

This right here tells me you haven't completely given your soul to the grid 😆

You don't need to (nor should you 😖) set the width and height on the children; the grid should set a default for how the elements are aligned and stretched within.

This is how I'd do it instead:

.wrapper {
   display: grid;
   place-items: stretch;
   place-items: stretch;
   /* ... */
}
Enter fullscreen mode Exit fullscreen mode

😉

Collapse
 
ananiket profile image
Aniket

That's a great change ! Thanks a lot for enriching my knowledge as well...

Happy Coding 🙏🏻

Collapse
 
shikkaba profile image
Me

My only issue with this awesomeness is that there is sooooo much movement. It's distracting. Make sure you add the ability to turn off or minimize movement for prefers-reduced-motion.

Collapse
 
ananiket profile image
Aniket

Yuppp ! Got it sir, will make it more smooth but thanks for watching 🙏🏻

Happy Coding 🤓

Collapse
 
diegojeptha profile image
Diego

Looks insanely awesome, may I ask does it scale well on mobile view?

Collapse
 
ananiket profile image
Aniket

Not yet sir ! But I will work on it to make it responsive. Thank for watching 🙂

Collapse
 
dillonheadley profile image
Dillon Headley • Edited

Nice! One small thing, according to html spec you should only have one < main > element in an HTML document. You could move the main tag higher up and use < article > tags instead where you have main

Collapse
 
ananiket profile image
Aniket

Yup I knew it ! But to keep all the tags differently so I used it..

But thank u for enriching my knowledge 👍
Happy coding 🙂

Collapse
 
craftogrammer profile image
Rahul

Bro, link live-preview of the site.

Collapse
 
ananiket profile image
Aniket

Yes Sir, Extremly Sorry ! But not yet decided to make it live, beacause webpage isn't mobile first for now...

Collapse
 
obaino82 profile image
Obaino82

Nice work

Collapse
 
ananiket profile image
Aniket

Thank you sir ! If you want to see more coding tutorial's please check out channel link in the top of the post.

Happy coding 🤓