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

Landing page using flexbox

@nischhal-hub

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

Travolgi 🍕 31,420

@denielden

Posted

Hi Nischhal, I took some time to look at your solution and you did a great job!

Also I have some tips for improving your code:

  • add main tag and wrap the card for Accessibility
  • the qr image is broken, fix the src of image like this: <img src="images/image-qr-code.png"> or <img src="./images/image-qr-code.png"> and not <img src="/images/image-qr-code.png">
  • add descriptive text in the alt attribute of the image
  • remove all margin from .container class because with flex they are superfluous
  • add justify-content: center; flexbox property to the body for center the card
  • instead of using px try to use relative units of measurement -> read here

Overall you did well 😉

Hope this help and happy coding!

0

@nischhal-hub

Posted

@denielden Oh thank you very much . I was wondering why it didn't show up when hosting in GitHub because it was running fine when locally hosted 😁 And i highly appreciate for the recommendation and advice.

1
darthTh0t 50

@darthTh0t

Posted

Hi, the required QR code image is not visible. Please make sure that you have given proper path in img href attribute.

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