Responsive site using HTML and CSS

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

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

CSS 🎨:

• Looks like you declared each background color for each button which needs to be change the background color during the hover, actually 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 (a) elements during hover

• Let's look an example

.card-btn:hover {
  background: rgba(0,0,0,0);
  color: white;
  outline: 1px solid white;
}

• Now you can remove these individual declarations for the background for each button element

.card-1 a:hover {
  border: 1px solid white;
  background-color: hsl(31, 77%, 52%);
  color: white;
}
.card-2 a:hover {
  border: 1px solid white;
  background-color: hsl(184, 100%, 22%);
  color: white;
}
.card-3 a:hover {
  border: 1px solid white;
  background-color: hsl(179, 100%, 13%);
  color: white;
}

• Now you have gotten the desired result without hassling in an efficient way.

• Pro tip: you can use transparent value for background property to get the same effect as rgba(0,0,0,0) but using rgba provides more granular control over the color correction.

.

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

Happy coding!