Duotone is a lovely effect which we can finally achieve with CSS. Popularised by Spotify: it’s become a very common design treatment on the web, so let’s have some fun and make a set of duotone cards.
The briefpermalink
Take the design assets and re-create these duotone cards whatever front-end technology you want. Consider how the cards work responsively, too. How do they stack, or do they even stack at all? 🤔
Make sure that your challenge solution does the following as a minimum:
- Uses semantic elements
- Is usable with mouse, touch and keyboard
- Presents an acceptable focus state (pro-tip: this should be additional to the hover state)
Bonus points awarded if:
- You use modern CSS
- Your solution is lightweight and performant
- Your solution is fully accessible
- You create appropriate transitions and/or animations between states
Assetspermalink
I’ve used Figma to design this challenge and you can run it with a completely free account!
Here’s some assets to get you going:
Here are some CSS Custom Properties for your colours:
- Code language
- css
:root { --color-pink: #faa7ed; --color-navy: #0c1f72; --color-navy-opaque: rgba(6, 0, 79, 0.77); --color-light: #ffffff; --color-dark: #252525; }
Wrapping uppermalink
When you’ve tried building this one for yourself, head over to the solution to see how I built it!
See you at the next one 👋
