Shopping Layout Sample Design

#codepen #webdev #design #uiweekly

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

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.