Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Complete solution using bare HTML and CSS

@prchristie

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This one was one of the easier ones but I got to practice and learn a few things

  • The solution has many reusable classes as all the cards are nearly identical except for the text content - the styling is consistent across all cards.
  • The button is an interesting problem that doesn't appear interesting until you actually try it. Essentially, we need to find a way to make the text transparent. But that isn't enough, because if we do we just see the button. We actually need to change the mix-blend-mode. In addition, the border of the button on click is not actually a border. This was a cool intro to how to make cool seethrough buttons :)

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord