Responsive landing page using CSS Flex Box

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 8 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.

  ---

  HELPING WITH YOUR CSS RULES 🎨:

  • 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()

  ---

  @media (min-width: 1140px) {
      .section-first button:hover {
              background-color: $Fondo-First-card;
              @extend %estilo-boton;
      }
      .section-second button:hover{
              background-color: $Fondo-Second-card;
              @extend %estilo-boton;
      }
      .section-third button:hover{
          background-color: $Fondo-Third-card;
          @extend %estilo-boton;
      }
  }
  

  • 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

  section button:hover {
     background-color: 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

  @media (min-width: 1140px) {
      .section-first button:hover {
              background-color: $Fondo-First-card;
              @extend %estilo-boton;
      }
      .section-second button:hover{
              background-color: $Fondo-Second-card;
              @extend %estilo-boton;
      }
      .section-third button:hover{
          background-color: $Fondo-Third-card;
          @extend %estilo-boton;
      }
  }
  

  ---

  • 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!

  0