Mobile first component using HTML, CSS and FLEX

Greetings, SnowFox! 👋

Congratulations on completing your first Frontend Mentor challenge! 🎉 Nice work on this one! 🙌 The different image that you added is a nice touch! 😀

One super tiny suggestion I have is to add a max-width to the card so that it isn't so wide when the layout first changes from desktop to mobile.

And I don't think you should use an <article> tag for the container holding the image in the card component (since it isn't really a self-contained element that makes sense by itself). An <article> tag for the entire card and <div>s for the containers inside it might be a little better for semantics. Check out this thorough article from CSS Tricks to learn more about the <article> and <section> tags and their usage. 😉

Keep coding (and happy coding, too)! 😁

Well first I got to say that I do like the image change you made 🌟🌟🌟🌟🌟. It helps the overall design and feel of the project. Maybe if you made the photo grayscale and tried to match the purple overlay more it would be even better

The only other thing I see is your attribution if changing location in the mobile view and hiding behind your layout

I updated the code as you said, made the image grayscale, and fixed the HTML. I couldn't center the card component and have the attribution at the bottom of the page, so I added an empty header to body in order to have space between the two using flex. So having an empty header is kinda bugging me 😅.