QR CODE COMPONENTS | HTML/CSS-FLEXBOX

Hi Débora Carvalho,

Congratulation on completing your first frontend mentor challenge. I have some suggestions regarding your solution if you don't mind:

• In my opinion, the image is an important content. The alternate text is needed on this image. The alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor not describes the image.

• Page should contain <h1>. In this challenge, as it’s supposed to be a part of a whole page, you may use<h1> visually hidden with class=”sr-only”. You can find it here

• It’s not recommended to use <br> in the <p> to make the paragraph break in new line, You may use max-width to <p> and remove that <br>. Adding <br /> is semantically incorrect! <br> is meant to be used when the division of lines is significant. E.g. addresses, poems, etc...

• An explicit width is not a good way to have responsive layout . Consider using max-width to the card in rem.

• height: 500px It's not recommended to set fixed height to component, you almost never want to set it. let the content of the component define the height.

• Consider using rem and em units as they are flexible, for font-size better to use rem. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

• Remember a modern css reset on every project that make all browsers display elements the same.

Overall, great work! hopefully this feedback helps.

It should solve the problem of the card of not being at the centre:

1. Give the 'position: relative' to the body.
2. Give the 'position: absolute' to the footer.
3. Then give 'bottom: 5px' to the footer. It will fix the position of the footer to the bottom. Hope it helps.

Hey, @DeboraCristinaP congratulation on completing the challenge.

• add box-sizing; border-box; in the * (universal selector).
• add min-height: 100vh; in the body element.
• remove margin:50px; from main element.
• you can do width:100%.

. . keep it up........