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)