Submitted 8 months ago

QR Code Challenge Solution w HTML&CSS

JJ-codes-9• 60

@JJ-codes-9

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

-Struggled to remove the scroll of the page. -I couldn't add the Outfit font even though I've downloaded it to my computer and added the font family to the Fonts. -I would like to learn to simply center the .whitebox element in the center of the page. -I've deployed the page on Github but the image link is broken. I've double-checked the path on HTML but didn't see an issue.

Thank you for your feedback:)

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted 8 months ago

Hello @JJ-codes-9!

Your don't need to download the font-family. You can import directly from Google fonts just by adding this to your code inside the <head> tag:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit&display=swap" rel="stylesheet">

After importing it, you can add it to your texts using CSS.

I hope it helps! 😊

Marked as helpful

JJ-codes-9• 60

@JJ-codes-9

Posted 8 months ago

Thank you, had no idea! 🥳 @danielmrz-dev

Please log in to post a comment

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