QR-card

👾Hi Giovanni, congratulations for your first solution!👋 Welcome to the Frontend Mentor Coding Community!

Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:

Your component is perfect, but is not responsive yet, this is due the fixed width you've applied to the container.

Look both width and max-width the main difference between these properties is that the first(width) is fixed and the second(max-width) is flexible, for example, a component with width: 320px will not grow or shrink because the size will be ever the same, but a container with max-width: 320px or min-width: 320px can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

Note that there's no need to use height here, because since you set a height for an element, this means that this element will grow until a certain point and after that the inner content (as texts or images) will start to pop out the element due its fixed height, so isn't necessary to set the height the container height comes from the elements, its paddings and height.

✌️ I hope this helps you and happy coding!

Hi Giovanni, congratulations on completing the challenge, great job! 😁

Some little tips for optimizing your code:

• remove height and padding properties from main tag
• you can use article tag instead of a simple div to the container card for improve the Accessibility
• remove all unnecessary code, the less you write the better as well as being clearer: for example the figure container of image
• remove all margin from card class
• use flexbox to the body to center the card. Read here -> best flex guide
• after, add min-height: 100vh and margin: 0 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 😉