DEV Community

Cover image for CodePen Challenge: Menu Layout
Drawcard
Drawcard

Posted on • Originally published at drawcard.com.au

CodePen Challenge: Menu Layout

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.

Top comments (0)