Responsive webpage using CSS

hey your design was great the layout was nice easy going @3akare 👌👌 but there is a big error in your code , if you cant find the file-path to your img-tag i think that is really bad though , right here in front end mentor we don't just do exercises just for points but also to gain knowledge to see what we lack and improve our qualities as a programmer , remember your img-tag(<img> ✔) shouldn't have a closing tag (</img> ❌) and also in the image src put a dot before the file-path for example(<img src="./images/image-qr-code.png" class="inner-card">) the rest was okay 👌. hope this was helpful 👍👍

Hi @3akare 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

I have some suggestions you might consider to improve your code:

• Use the <main> tag to wrap all the main content in your solution instead of using <div class="card"> to improve the accessibility of the website.

• Use <footer> instead of <div class="attribution">. The <footer> element contains authorship information.

• Since the entire component refers to scanning the QR code, the QR code image is considered important content. It is therefore necessary to add an alt attribute to the image to provide additional context. The alt attribute of the QR image should include descriptive text to explain the purpose of the QR image. Upon scanning the QR code, you will be redirected to the frontendmentor.io website, so an example of alternative text would be "QR code to frontendmentor.io". You can read more about alternative text here.

• Setting a defined height for the card component is not recommended. The content should define the component height, otherwise, it will not be allowed to extend beyond your specifications. Alternatively, you can use min-height.

• You can use relative file paths in your images, this can save future errors in your images:

<img src="./images/image-qr-code.png" class="inner-card" alt="QR code to frontendmentor.io">

More information.

• Always avoid skipping heading levels; Always start from <h1>, followed by <h2>, and so on up to <h6> (<h1>,<h2>,...,<h6>).

• Even though this challenge is a single component and not a full page, it is recommended that you use semantic tags and title tags in your solution. You can create an 'h1' inside 'main' that is not displayed visually, but that is visible to screen-readers and provides more information about the content.

<h1 class="sr-only">QR Card Component</h1>

The sr-only class is a class that you can add to hide content visually. The styles of this class can be copied here.

Also, Swap the <h3> tag with <h2>. Remember that you can reduce the font size using the font-size property.

Please don't worry if your suggestions are long, they are just details. In the end, the project is well done 👏. Hope you find those tips helpful! 👍

Good job, and happy coding! 😁