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)

DEV runs on 100% open source code known as Forem.

Β 
Contribute to the codebase or host your own.
Β 
Check these out! πŸ‘‡