Hi @Jonee2, here is some feedback as promised. Take this and apply to all of your solutions
- As others have said, all content must be contained within landmarks. This page should have a
main
for the component (card) and afooter
for the attribution. - Inside main have a div to be your component. It does not need to be a flex column as all of it's contents would stack by default anyway.
- Use a heading and paragraph.
- Note the
<b>
tag is deprecated and meaningless. Don't use it. - Img elements must always have an alt attribute. This is extremely important. Read the excellent post in the discord resources channel about how and when to write alt text. In this challenge the image is very important content so must include what the image is (QR code) and where it goes to (to the Frontend Mentor website)
- NEVER write font site in pixels. Use rem. Read the post and make sure you understand why this is so important.
- Don't use large margins to try and build a layout. Margins and paddings should always be small. To center the component on the page use flex properties just as you have done, but also include min-height 100vh (or svh) so the body extends to at least the screen height. By default the body is only as tall as its content.
- Always use a modern CSS reset at the start of the styles in every project. Get into the habit now! Andy Bell and Josh Comeau both have good examples online you could use. This will set sensible defaults, set images to display block and iron out discrepancies between different browser's default styles.
- You have made all of this tiny. The style guide gives the base font size and that is what the paragraphs in the design should look like. Don't make them smaller!
- Make sure you understand the difference between padding and margin. The card needs padding (internal spacing to create space inside it). The card's child elements only need vertical margins to (external spacing to create space between them)
- The image must not have an explicit width. It should be display block and max-width 100% (both a standard part of any modern CSS reset).
- The card should not have a width and it's max width should be in rem. I advise you steer clear of key words like min-content and max-content and fit-content. They are advanced concepts and you will rarely, if ever, need to use them.
- The card does not need a height. It's the browsers job to decide how much height the component needs, so let it do its job.
- Border radius should be in a fixed amount not in percentage. Percentage will only work on square / perfectly circular radius it will cause bizarre corners on rectangles so is best avoided in cases where you want slightly rounded corners.