QR Code Card

Hello there 👋. Good job on completing the challenge !

I have other suggestions about your code that might interest you.

HTML 📄:

• Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io

CSS 🎨:

• Setting a defined height for the card component is not recommended (height: 37em;). The content should define the component height, otherwise, it will not be allowed to extend beyond your specifications.

• To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

I hope you find it useful! 😄

Happy coding!

Replace <h2> with <h1> and add the alt attribute alt=" " to the img tag to fix the accessibility and error issue.

the body has a wrong background-color, Use the colors that were given in the styleguide.md found in the zip folder you downloaded.

To center .card on the page, 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 .card on the page using flexbox:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

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

Reduce the width of .card for it to be equivalent to the width of the design and give it a padding value for all the sides. e.g: width 20em padding: 1em

Give the img a max-width of 100% and a border-radius value, the rest are not important.

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

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hi Amelia

Here are a few suggestions for improvement your code

Use CSS reset to standardize the default styles across different browsers, this can help you avoid cross-browser compatibility issues.

Consider using CSS variables to store values that are reused throughout the code. This makes it easier to maintain and update the styles.

Consider using CSS Flexbox or CSS Grid for better layout control and improved responsiveness.

Happy Coding