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 Component using Html and Css/Sass

@HugoPadilla

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi all, Thank you for taking time to review my code! I appreciate any recommendation. Thanks

Community feedback

Travolgi 🍕 31,420

@denielden

Posted

Hi Hugo, congrats on completing the challenge!

I had a look at your final solution and I have a few suggestions for you that I hope will be useful:

  • adding the follow property to the main tag for center the card
justify-content: center;
align-items: center;
  • remove all margin from .card class become superfluous

Very nice the enlargement effect with hover :)

You did well, keep it up ;) and happy coding!

Marked as helpful

1

@HugoPadilla

Posted

@denielden Thanks for your comment. You are right, trying to center the card using margin: auto can be confusing at first glance. I will follow your recommendations. Thank you very much.

1
T
Chamu 13,110

@ChamuMutezva

Posted

Hi Hugo

Well done, that looks pretty close to the design for me. In the main I see you have this css declaration widows: 100%. I haven't used it before, but I read that it has to do with number of lines, I am interested to know more about it especially what changes or differences is it bringing to your site.

1

@HugoPadilla

Posted

@ChamuMutezva Thanks for your comment! It doesn't really make any significant change. It is a mistake on my part, maybe I wanted to use the width: 100% property, which in fact is not necessary because I want the width driven by the child elements, but for some reason I have snuck this property.

Thanks for your question, I have corrected my code.

1

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