Mobile first Responsive page with css grid

Community feedback

• 

  Josh•320

  @Ao-chiPosted almost 2 years ago

  Hi~ Congrats on finishing this challenge!

  One way to solve the hover effect on contact link is by making a new variable with lighter opacity of your --white color like this: --light-white: hsl(0, 0%, 100%, 0.4);. Now you can use this as the background color for hover effect.

  ._links:last-child:hover {
      color: var(--white);
      background-color: var(--light-white);
  }
  

  Also to make your links accessible for screen readers, it's advisable to put discernible text like this <a href="#">Home<a>. But if you'll only put an icon or image you should add aria-label attribute. For example:

  <a href="#" aria-label=""Website logo>
       <img src="images/logo.svg" alt="icon">
  </a>
  

  If you have any questions you can reach out to me. Hope this helps~ Happy Coding!!

  Marked as helpful

  1

  ---

  

  Godstime01•320

  @Godstime01Posted almost 2 years ago

  @Ao-chi Thank you I will do just that

  0