DEV Community

loading...

Shopping Layout Sample Design

Takane Ichinose
A full-stack web developer who don't stop studying, and practicing.
・2 min read

Codepen Challenge Layouts: Shopping Layout

Description

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.

Explanation

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.

Fonts

Source Sans Pro

Reggae One

Oleo Script

Dela Gothic One

Atma

Discussion (0)