QR code component using HTML & CSS

Solution retrospective
What did you find difficult while building the project?
When I try to upload the page the image doesn't charge. It is because I add "/" in the src attribute
Which areas of your code are you unsure of?
In the elements' correct position
Do you have any questions about best practices?
No, I don't
Please log in to post a comment
Log in with GitHubCommunity feedback
- @md5dalton
Hello kaento. Congratulations on finishing this challenge👌
In order for you to use the provided font, this is how you should import it in your styles.css:
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
I've also just completed this and I did not need to use media queries. If you want to see my approach, here's a link to my solution: QR code component
I hope this may be of some help. Please feel free to ask if need any help👌
Marked as helpful - @correlucas
👾Hello @kaentovidal, Congratulations on completing this challenge!
The html structure is fine and works, but you can reduce at least 20% of your code cleaning the unnecessary elements, you start cleaning it by removing some unnecessary
<div>
. For this solution you wrap everything inside a single block of content using<div>
or<main>
(better option for accessibility) and put inside the whole content<img>
/<h1>
and<p>
.YOUR CURRENT CODE:
<body cz-shortcut-listen="true"> <div class="bg"> <div class="bg-s"> <div class="container"> <div class="qr-section"> <img src="images/image-qr-code.png" alt="qr"> <h1> Improve your Front-end skills by building projects</h1> <p> Scan the QR code to visit Fronted Mentor and take your coding skills to the next level </p> </div> </div> </div> </div> </body>
THE CODE AFTER YOU REMOVE THE DIV:
<body> <main> <img src="./images/image-qr-code.png" alt="Qr Code Image" > <h1>Improve your front-end skills by building projects</h1> <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </main> </body>
✌️ I hope this helps you and happy coding!
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