HTML, CSS flexbox & overlay with absolute and relative positioning

Community feedback

• 

  Hexer•3,660

  @EmmanuelHexerPosted almost 3 years ago

  Great job overall man.

  • To fix your accessibility issues wrap your card with main element.

  0
• 

  Heli0s•670

  @zeerobitPosted almost 3 years ago

  Good work on completing this challenge, here are a few pointers:

  • the images should also be wrapped in anchor tag since they're supposed to be interactive elements
  • don't necessarily need a min-height for the main tag, let the content dictates the height instead
  • remove width: 18rem; from ".main-logo" instead make it max-width: 100% so the image can scale
  • no need to set a width on ".main-logo" and ".content", in your main tag change padding: 0.5rem 0; to something like `padding: 1.5rem;' and that will keep the content from hitting the corners
  • in your ".overlay-container" remove the min-height and add height: 100% , switch the background-color to rgb so you can add the opacity value to get the transparency effect, it should be like this background-color: rgb(0, 255, 247, 0.4);
  • in ".overlay-container:hover" remove the background-color and change the opacity to 1
  • to center the eye image you don't need to use position property, simply make ".overlay-container" display: flex then add align-items: center; justify-content: center;

  Hope this helps, Happy coding!!!

  0
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  Hay ! Fahim Good Job on challenge

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body <main class="container"></main>

  -> Learn more on accessibility issues

  If this comment helps you then pls mark it as helpful!

  Have a good day and keep coding 👍!

  0