HTML, CSS flexbox & overlay with absolute and relative positioning

Great job overall man.

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

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

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