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
Top comments (0)