QR Code Component (CSS - HTML)

There are some important issues in this that need refactoring.

1. It's great you've included a main landmark. But the attribution belongs in a footer not main. Make sure you update your link in the footer too, so it goes to your github or frontend mentor profile.
2. The image is the most important content on this whole challenge. It's definitely not a decorative image so must have alt text that says what it is (QR code) and where it goes (to FrontendMentor.io).
3. This is a card component being built in isolation. But when we build components we have to think about how they will be used on the end website. This kind of card would never act as the title for a whole page, so it should not have a h1. Use a h2 instead. 4.Get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use. That will set sensible defaults for cross browser styling.
4. Your solution is broken when viewed on my phone, especially in landscape orientation because you have set the html, body and main height all to 100%. Remove this. To center the component on the screen all this needs is a min-height 100svh on the way, and flex column properties for the centering.
5. Font size must be in rem not px.
6. The card should not have an explicit width, especially not in px. This is an important principle to understand. When you set width it is fixed and removes all options for the browser to be able to make adjustments when it needs to. Instead, set a max-width in rem. This allows the card to shrink narrower if it needs to, like when viewed on a smaller screen. And using rem means the layout will scale correctly for all users including those who have a different text size.
7. To ensure the component can't hit screen edges you can give a wrapping element padding (like the body).
8. It looks like you have double padding at the end of the card. I recommend you onle set padding-inline on the content or use an alternative method if you want to limit its width within the card (eg margin-inline auto and a max width in rem or ch units).

There may be a couple of other things I'm not sure when the css is so hard to read minified.

Hey Eman Salama! Good to see your solution.

I would recommend to put anything around an image, like a div, if it is on the same node level like another div. It might help prevent other issues. This was also the base for my real tip :D => also without a div around the image, if you put a line-height: 0 on .box you remove the (not wanted) space between img and .content

Your solution looks very close to the design. You have too much space between the end of the text and the end of the card. Your name at the bottom is rendering as a link because you have it in an a tag but it doesn't go anywhere when interacted with. The CSS is hard to read, it looks like it is all in one line but I don't know if that meets another standard that I am not aware of.