Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code

Eddie Villegasโ€ข 40

@EddieVillegas

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@MelvinAguilar

Posted

Hello there ๐Ÿ‘‹. Good job on completing the challenge !

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

  • Alt text should provide a clear and accurate description of the image's content or purpose. In this challenge, if you scan the QR code you will be redirected to the "frontendmentor.io" website, so a better alt attribute would be QR code to frontendmentor.io

    If you want to learn more about the alt attribute, you can read this article. ๐Ÿ“˜.

  • 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! ๐Ÿ˜„ Above all, the solution you submitted is great!

Happy coding!

Marked as helpful

2
Hassia Issahโ€ข 50,670

@Hassiai

Posted

Replace <h3> with <h1> to fix the accessibility issue.

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

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

There is no need to give .card a height value. increase the width of .card for it to be equivalent to the width of design. width: 320px /20rem . Give the img a max-width of 100% instead of a width and height value.

Give p opacity of 0.5 for the faded color.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord