css breakpoint, flex display, css var for colors

Hie Elekviktor 👋🏾

Great work on the QR Code Challenge 🔥🔥 I will be giving feedback on your work using the following guidelines

1. Does the solution include semantic HTML? NO
2. Is it accessible, and what improvements could be made? NO (read notes for more details)
3. Does the layout look good on a range of screen sizes? YES
4. Is the code well-structured, readable, and reusable? YES
5. Does the solution differ considerably from the design? NO

Notes

• The code works and your solution is very close to what was provided in the Figma designs (Well done!). However, l think we could leverage the semantic HTML tags like <main>...</main> instead of the <div class='container'>...</div> to indicate that this is the main focus or content of your page.
• You could also wrap the bottom content inside a footer tag <footer>...</footer> instead of the <div class='attribution'>...</div>.
• Semantic tags clearly convey the purpose of each section.
• Additionally, screen readers used by visually impaired people rely on semantic HTML to understand the structure of a webpage and navigate it effectively. Screen readers can interpret headings, recognize landmarks like headers and footers, and present the content in a way that makes sense to the user. This provides accessibility of your webpage.