Design comparison
Community feedback
- @MelvinAguilarPosted almost 2 years ago
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 beQR code to frontendmentor.io
If you want to learn more about the
alt
attribute, you can read this article. ๐.
- The
width: 100%
property in thebody
tag is not necessary. Thebody
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 helpful2 -
- @HassiaiPosted almost 2 years ago
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 GitHubJoin 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