mobile-first solution using CSS flexbox

Hello, Yakubu! 👋

Congratulations on completing your first Frontend Mentor challenge! 🎉 Good effort on this challenge! It's great that now your solution has no issues! Great job with the update! 👍

Some suggestions from me.

• Alternative text for images should not contain any words that related to image (e.g. picture, photo, logo, icon, graphic, avatar, etc). It's already an image element so the screen reader will pronounce it as an image.
• There should not be text in span and div alone whenever possible; instead wrap the text with a meaningful element like a paragraph element.
• The Equilibrium image*, Equilibrium #3429, and Jules Wyvern should be wrapped link elements. They have interactivity so they should be wrapped with interactive elements.
• I recommend making the body element a flex container to center the card both vertically and horizontally.

That's it! Hope this helps. 😊

P.S. I notice that your score is still 0 even though you've submitted a solution. I recommend contacting the Frontend Mentor by using email or DM Matt Studdert (founder of this platform) through Slack to fix this issue. Don't forget to give the link of your profile, I'm sure Frontend Mentor team will need it.

Hey Yakubu, congratulations on completing the challenge! You did a great job 😉

Let me give you some little tips for optimizing your code:

• to make it look as close to the design as possible add width: 20rem to container class
• to make transparent the cyan background on hover set background-color: hsl(178, 100%, 50%, .5) to .image-overlay class
• remove all margin and padding from .container class
• use flexbox to the body to center the card. Read here -> best flex guide
• after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
• instead of using px use relative units of measurement like rem -> read here

Hope this help! Happy coding 😁

Hey!! Cheers 🥂 on completing this challenge.. .

Here are my suggestions..

• You should use <main class="main"> instead of <div class="main">.
• You should also add alt text to your image tags to aid screen readers

This should fix most of your accessibility issues

. Regardless you did amazing... hope you find this useful... Happy coding!!!

Hi, I have not checked your source code yet but the report indicates that you have a lot of accessibility problem, if this feedback has helped you mark it as util thanks you