QR Code Component with Pure HTML and CSS

Solution retrospective
- Created a visually appealing QR code component with clean HTML structure
- Properly implemented Google Fonts with preconnect for optimization
- Added responsive design with centered content
- Included proper attribution
- Designed a responsive card component that works across screen sizes
- Implemented the design using appropriate typography and spacing
- Organized the project files with proper structure
Well what is the best practice, to make it convenient and maintaince proof?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @mun10
Great work, and it's fairly close to the intended design! However, there are some minor visible differences, such as the size and the position of the card. You can improve these aspects in a few different ways
- @Jascran23
I believe that if you reduce the container by 20px, you can make the size more aligned so that the text is in the same frame.
- @Asya0601
For greater similarity with the task, you can add display:none to .attribution so that the line under the card is visible only in the code, and also slightly increase the sizes of p and h1, focusing on the template on the sizes of the last line in the example (in the sample it ends with "the next level"). If the emphasis is on individual creativity, everything is great, keep it up!👍
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord