QR code component

wrap <div class="attribution"> in the footer tag to fix the accessibility issue.

To center the section on the page using flexbox, replace the height in the main with min-height: 100vh.

For a responsive content, replace the width in the section and img with max-width.

Give h1 and p the same font-size of 15px which is 0.9375rem, text-align: center, the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hello Mariam! Congratulations on completing your first project! 🎊

To fix the accessibility error, you need to change this thing in your code:

• Just nest the attribution group element inside the <main> tag. This will fix the landmark error.

Other Suggestions:

• In CSS always try to use relative units like em or rem instead of absolute units like px. Using these relative units will improve the responsiveness. Read this for a better understanding 👉 Should we use Rem, Em, or Pixel?
• There's a slight drop shadow under the card. Try to add a box shadow to the card. This will bring your solution near to perfect.

Otherwise! You did an amazing job! Well Done! 👌

I hope this will help you to improve! 😄

Happy Coding!

To fix the accessibility issue you should replace the "<div class="attribution">" with footer tag someone told me about that before i am just a beginner. and the design looks almost identical well done !

It looks really good ) nothing to say, happy coding! ))