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 preview card component using CSS Flexbox

@amar215

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 wanted to make the text on the button transparent so that it would show the card's background color. but I could not do that. Instead, I had to give color to each button manually. If you have a solution to this problem please let me know. Thank you very much!

Community feedback

@0xabdulkhaliq

Posted

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your doubts that I believe will be of great interest to you.

CSS 🎨:

  • "I wanted to make the text on the button transparent so that it would show the card's background color. but I could not do that. Instead, I had to give color to each button manually", Yeah we can handle that issue with a css color function named rgba()
  • The rgba() function define colors using the Red-green-blue-alpha (RGBA) model. RGBA color values are an extension of RGB color values with an alpha channel, which helps us to take control over the opacity of the color.
  • So just add rgba(0,0,0,0) for the button elements during hover
  • Let's look an example
button:hover {
background-color: rgba(0,0,0,0);
}
  • Now you have gotten the desired result without hassling in an efficient way.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

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