Qr Code Challenge

wrap <div class="attribution"> in the footer tag and replace <h2> with <h1> to fix the accessibility issues

There is no need to give the body a width value.

To center .container on tthe page using flexbox or grid instead of a margin, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

To center .container on the page using flexbox:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

To center .container on the page using grid:
body{
min-height: 100vh;
display: grid;
place-items: center;
}

Increase the padding value in the .container padding: 1rem Give the img a max-width of 100% for a responsive image and border-radius, the rest are not needed.

Give h1 and p the same font-size of 15px, 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 👋. Congratulation on successfully completing your first challenge 🎉 ! !

I have some recommendations regarding your code that I believe will be of great interest to you.

HTML 🏷️:

• Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

CSS 🎨:

• Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.

• The width: 100% property in the body tag is not necessary. The body tag is a block element and it will take the full width of the page by default.

I hope you find it useful! 😄

Happy coding!