Simple 3 column card using basic HTML and CSS

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

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

CSS 🎨:

• The button elements needs to have a hover state with transparent background, 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 elements during hover

• Let's look an example

button:hover {
  background: rgba(0,0,0,0);
  color: white;
  outline: 1px solid white;
  transform: scale(1.02);
}

• Additionally, I want to address the duplication of rules which you've been applied for button elements. Currently this is your rules for them,

.button-1{
    padding: 12px 30px 12px 30px;
    border-radius: 20px;
    border: none;
    background-color: white;
    color: var(--Bright-orange);
    font-family: "Lexend Deca";
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    justify-content: flex-end;
    margin-top: 60px;
}

.button-2{
    padding: 12px 30px 12px 30px;
    border-radius: 20px;
    ....      // Same rules
}

.button-3{
    padding: 12px 30px 12px 30px;
    border-radius: 20px;
    .....    // Same rules
}

• We don't need this much of duplication in our code, this will result in poor result when it comes to web performance!

• Here's the refactored style rules

button {
    padding: 12px 30px 12px 30px;
    border-radius: 20px;
    border: none;
    background: white;
    font-family: "Lexend Deca";
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    justify-content: flex-end;
    margin-top: 60px;
}

.button-1 {
   color: var(--Bright-orange);
}
.button-2 {
   color: var(--Dark-cyan);
}
.button-3 {
   color: var(--Very--dark-cyan);
}

• In the above rules, we selected all button elements to apply general button styles and then we added the classes you've added in markup for modifying like button-1, button-2 and so on to apply unique colors for each of them without duplicating entire styles.

• Now you have gotten the desired result for hovering 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.

• If you have any questions or need further clarification, you can always check out my submission for this challenge where i used this technique and feel free to reach out to me.

.

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

Happy coding!