Takane Ichinose
Posted on June 18, 2021
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
Posted on June 18, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.