QR Code Component Solution using Html CSS

Hello Shivangi, your work is very nice. I think the challenge you have is an omission of the image path. When I inspected your code, I see you have included the image source as: <img src ="image/image-qr-code.png">. but the file path is not included in uploaded project. I believe once you include the folder everything will just fine.

Hi Shivangi!

Welcome, just did my first challenge too =)

I notice that the QR image is not on the repository. To solve the QR Code missing image you need to upload your project images folder to the repository.

The easiest way I found to do this is to drag and drop the folder from your desktop to your repository page.

And as @Hassiai says, also change the file path of the image as they did in the href of the favicon with a ./ at the beggining:

So your path should end up like this:

I hope you find this helpful!

Good luck and Happy Coding!

Replace <div class="container"> with the main tag and <h2> with <h1> to fix the accessibility issues. add the alt attribute to the img tag , the value of the alt is the description of the image.

To make the Qr-image visible add "./" to beginning of the src value . e.g: <img src="./images/image-qr-code.png"> instead of <img src="images/image-qr-code.png">.

Add justify-content: center to the body, to center .container using flexbox. there is no need to give .container a margin value.

Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To

Hope am helpful Happy coding

HEY SHIVANGI!

Congratulation on completing your first challenge

Your solution is so close to being perfect however I noticed a few things I would like to point out:

• You either forgot to include your image or the link is broken because it is not showing up, you should check up on this.

• You have some accessibility issues, I can help you with some of them:

  • You will need to give your img an alt text.

  • Instead of using a div for <div class="container">, you should instead opt for a more semantic element like main

HOPE I COULD BE OF HELP :)

HAPPY CODING!