Simple 3 column card using basic HTML and CSS

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  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!

  Marked as helpful

  1

  ---

  

  Lê Hoàng Long•290

  @JamesWallison1Posted 7 months ago

  @0xabdulkhalid Yes I have thought about shortening that part but still haven't figured it our how to shorten it and you helped me a lot! Thank you really much!

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  You're welcome @JamesWallison1 !

  1