QR code

Hello, @nuwanchandrasekara congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!

I've checked your Git repository to understand why the image was not importing.

You've missed to declare the image path location, this time the image is in the same folder than the index.html so you can insert like this <img class="qr-code" src="image-qr-code.png" alt="qr code">.

In other cases if you're using the folder locally the local server recognizes the image location, but with a live solution you need to indicate where the image is. [ay attention, when the image is inside the repository folder use dot slash ./ and if is inside a subfolder use dot dot slash ../ If the image is the same folder of the html without folder just add normal path.

👋 I hope this helps you and happy coding!

Hi @Nuwan,

Good start. Even though I'm still learning and new to HTML and CSS I would like to share some feedback based on my learnings.

1. For the body consider using flex and its properties to align the container to the center of the page. Consider using this:

body { min-height: 100vh; display: flex; justify-content: center; background-color: hsl(212, 45%, 89%); }

1. Consider using semantics elements (for eg: <picture> ) which clearly defines its content.

2. I think the path for the image is wrong hence the QR code image is not showing. While I add images I always declare its width and height in the img markup. And use width of 100% and height auto in the CSS to make it responsive. You can also consider using Object-fit: contain; to retain its original aspect ratio and it will fit within the given dimension.

Since, you have declared img as a class="qr-code" use that in your CSS rule.

<img src="<path> alt="QR-code-image" width= " " height " ">

.qr-code { width: 100%; height: auto; padding: 1rem; border-radius: 15px; }

Image no found.

the image link is not correct, that is why it doesn't show it. this is the correct: <img class="qr-code" src="image-qr-code.png" alt="qr code">