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

3-Column Card Component HTML & CSS

Sadorβ€’ 190

@SadorDev

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


I found this challenge fairly straightforward, not difficult at all. The only thing I tried to get the button text to be clear transparency so it could match the background's colour.

On the to the next one I goβœ¨πŸ™‚πŸ‘πŸΎ

Community feedback

Ferβ€’ 3,970

@fernandolapaz

Posted

Hi πŸ‘‹, regarding your comment:

You could use the mix-blend-mode property (which specifies how an element's content should blend with its direct parent background):

And removing the transparency that you gave to the color.

Something like this:

.button {
.
.
.
color: rgba(0, 0, 0);
background-color: var(--very-light-gray);
mix-blend-mode: screen;
}

I hope you find it useful, any questions do not hesitate.

And please let me know if it worked πŸ™‚

Regards,

Marked as helpful

0

Sadorβ€’ 190

@SadorDev

Posted

@fernandolapaz You learn something new everyday in web dev. Thank you so much, I tried hard to figure this one out tooπŸ‘πŸΎπŸ™‚

0
Ferβ€’ 3,970

@fernandolapaz

Posted

@SadorDev That's right, learning never ends : )

I am glad it was useful πŸ‘

0

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