Challenge: Duotone Card
Front-End Challenges Club - Challenge #003
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 brief permalink
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
Assets permalink
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 up permalink
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 👋