DEV Community

Takane Ichinose
Takane Ichinose

Posted on

Shopping Layout Sample Design

Codepen Challenge Layouts: Shopping Layout


I tried to make a sample layout of e-commerce in this week's Codepen challenge.

I looked at many e-commerce sites to have an idea in how to create a design. Although I thought it is not good enough.

I used many fonts to implement the design.

This layout is best viewed with Google Chrome, because I used backdrop-filter for the items.

The color scheme of this layout is black and yellow.

This layout might look bad on the mobile.


I didn't change the HTML code, after clicking the "Start a Pen" button. This is to challenge myself in ways of thinking of how to create a design based on the provided HTML code.

For the whole layout, I added display: flex on the <body> for me to easily design the whole layout.

For the header, I just rearranged it using display: grid code.

For each items, I translate the Y position upper, to overlap the logo. This is inspired by the design I browsed on the internet.

The description will be shown if the user hovered on the image. That's the best think I thought to compress the whole design.


Source Sans Pro

Reggae One

Oleo Script

Dela Gothic One


Discussion (0)