HTML5, CSS3, Flexbox, VScode, Git and Github

👾Hello @charbavito, congratulations on your first solution!👋 Welcome to the Frontend Mentor Coding Community!

Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

1.You can use <main> to replace the <div> containing the whole content, <div> is a block element without meaning and <main> is a tag the shows which is the most important block of content in this page.

2.Fix the component responsiveness, its not working yet and this is due the fixed width you've applied to the container. The difference between width and max-width is that the first(width) is fixed and the second(max-width) is flexible and make the element shrink when the screen starts to scale down. So if you want a responsive block element, never use width choose or min-width or max-width.

3.For future projects, think about using relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices.

4.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the article below where you can copy and paste this CSS code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

✌️ I hope this helps you and happy coding!

Hey @charbavito congratulation on solving your first challenge you did a great job, I loved you're code very much.

A couple of hints tho to really complete this challenge:-

• Change the font-weight of the heading to 700
• Add a box-shadow to the card.

You're more than welcome to contact me if you ever get stuck in you're upcoming challenges at [email protected]