First mentor QR Code Component

Replace<div class="container">with the main tag and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

To make the image visible remove "../" in the src value of the img <img src="image-qr-code.png"> instead of <img src="../image-qr-code.png">.

Add the alt attribute alt=" " to the img tag and give it a value to fix the error issue. The value of the alt attribute is the description of the image. For decorative images like icons, there is no need to give it an alt value, for more on alt attribute Click here.

There is no need to give the body a margin value. To center .container on the page using flexbox, replace the height in the body with min-height: 100vh.

There is no need to give .container a margin-top value.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Asalam o Alaikum! @Abdelrahman-Muhammed13. 🎯Congratulations on completing the challenge !

💬I have some suggestions about your code.

HTML 🔔:

▪ It is advisable that you place all your main site content in a landmark element <main>. Wrap the body code in main tag. Click & Wrap the code

<div class="main-container">

▪ It's necessary for images to have short, descriptive alt text so screen reader users clearly understand the image's contents and purpose.

<img src="../image-qr-code.png" >

CSS: 🎨

📍▪ Instead of using pixels in font-size, using relative units like em or rem is a good practice.

I hope you find it useful! By the way, the solution was great. 🙌💯

Enjoy coding, Stay Safe! 🤞