Product landing page: How do i do this?


I have seen on many people’s product page, something like the image above. And i have no idea how to do it. The code i have seen is complicated to me. Especially the css part. The solution i found on CSS-TRICKS gave me a headache.
Is there an easy way to do this? How do i go about making this thing? I was shocked to see a solution that used " ul" and " li "tags. I just thought it was placing a bunch of div boxes side by side.

1 Like

Search it on Codepen, and look at their code. Or, if you see it on a website, look at in in dev tools. I’ve never made it before, but I should be able to help you if I give it some thought.

how do i get the “boxes” to stay side by side. i am trying to do it now but they are ontop of one another, not side by side

Check the challenges on CSS Flexbox.

Try to use display: flex; then set flex-direction to “row” and also set their width to 33%, depends on how many boxes you like on one row. I think another alternative is to use display: inline-block on the boxes, but I commonly use the flex method.
Oh and here if you are unfamiliar with the flexbox method:

1 Like

If you need help, look at this pen. As @dlaan07 said, use flexbox.

1 Like