CodePen Challenge: Menu Layout

#html #css #codepen

This week's CodePen challenge involves creating a digital menu for a café - taking a raw HTML file with no styling, and doing something creative with it. It's a great open brief with loads of possibilities, and we decided to answer it by creating a menu as it might appear in real life - with the added bonus of making fold down nicely for mobile displays.

Features

• Flexbox layout of 3 panels within a container
• CSS skew transform to create the 3d fold effect
• Global variables to define colour system, padding system etc.
• Mobile responsiveness with some overrides below 768px

Check out our design below, and be sure to view it in a mobile to see its responsiveness in action! Take a look at the HTML and CSS to see how we answered the problem.

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.