QR code component made with HTML and basic CSS

Hello there 👋. Good job on completing the challenge !

I have other suggestions about your code that might interest you.

HTML 🏷️:

• Wrap the page's whole main content in the <main> tag.

Alt text 📷:

• To make the alt attribute as useful and effective as possible, avoid using words such as "image", "photo", or "picture" as they are redundant because the image tag already conveys that information. Instead, try to make the description as human-readable and understandable as possible.

  The alt attribute should explain the purpose of the image, for example, in the case of a QR code, a description like "qr code to frontendmentor.io" would be more appropriate.

  If you want to learn more about the alt attribute, you can read this article. 📘.

CSS 🎨:

• You don't need to add font-family: "Outfit", sans-serif; to each <p>, <h*> separately. Instead, add it to body.

• It's not a big problem but the display: block; style on the .white-border element is unnecessary, that value is the default for the div tag.

CSS Reset 🔄:

• You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

  CSS resets that are widely used:

  • Reset CSS
  • "My Custom CSS Reset" by JoshWComeau

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

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 center .white-border on the page using flexbox, add align-items: center and min-height:100vh to .container.

There is no need to give .white-border a height value. For a responsive content , replace the width in .white-border with max-width and give the img a max-width of 100% instead of a width.

There is no need to give .container a width, height and margin values.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING