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 using Bootstrap

Anh 30

@anhnguyn

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 am still figuring out how to make the text color of the buttons (click/hover state) inherit the background-color of the parent div, so that I don't have to create CSS for three buttons. Any help and feedback is appreciated!

Community feedback

@LucasAven

Posted

Hi! I'm still learning the basics, so I don't know if this way is the best one but at least it works :P

  1. store the background colors of each card in a variable. ie:
--background-color: hsl(31, 77%, 52%); /*it's important to write -- before the variable*/
background-color: var(--background-color); /*then apply it to each card*/
  1. use the variable --background-color inside of inside the class attached to your button(if you didn't create one use button{ } instead) to change its text color (to use it you must write it inside var(variable)). ie:
button {
color: var(--background-color);
}
  1. last you only have to change the color back to hsl(0, 0%, 95%) when is active.
button:active {
color: hsl(0, 0%, 95%);
}

hope it helps!

1

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