Skip to content
Submitted over 1 year ago

3-Column Card Component HTML & CSS

Sador•200
@SadorDev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

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
    @fernandolapazPosted over 1 year ago

    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•200
    @SadorDevPosted over 1 year ago

    @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
    @fernandolapazPosted over 1 year ago

    @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

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