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.

What you’re building permalink

Demo shows the collection of three cards, headed with "Meet the team". The hover state on the first card shows the duotone effect being removed and a caret revealing itself.

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
: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 👋