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

Desafio resolvido utilizando HTML e CSS

@leandrofa1980

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

Hamid Mahmoodโ€ข 540

@Hamid210545

Posted

Hello ..... you have done an amazing job.... but let me correct you ... your card is not in center of the screen as per as design requirements.... but you can fix it by taking one simple step: by setting the properties of body tag { display: flex ; justify-content: center ; align-items: center ; } ............... I hope this will fix your problem............ Thanks!

Marked as helpful

0

@MelvinAguilar

Posted

Hi @leandrofa1980 ๐Ÿ‘‹, good job completing this challenge, and welcome to the Frontend Mentor Community! ๐ŸŽ‰

I have some suggestions you might consider to improve your code:

  • To make alternative texts more worthwhile, add descriptive text to the alt attribute of the QR image to explain what the QR image does. Upon scanning the QR code, you will be redirected to the frontendmentor.io website, so an example of alternative text would be "QR code to frontendmentor.io". You can read more about alternative text here.
  • Setting a defined height for the card component is not recommended. The content should define the component height, otherwise, it will not be allowed to extend beyond your specifications. Alternatively, you can use min-height.
  • Use min-height: 100vh to the body selector instead of height. This property lets you set a height and let the element grow even more if necessary. Your elements will also be vertically centered when you use this property.

Above all, the project is done well๐Ÿ‘. I hope those tips will help you! ๐Ÿ‘

Good job, and happy coding! ๐Ÿ˜

Marked as helpful

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