Skip to content
Submitted 10 months ago

QR Code Challenge Solution w HTML&CSS

JJ-codes-9•90
@JJ-codes-9
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

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,310
    @danielmrz-devPosted 10 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
    0
    JJ-codes-9•90
    @JJ-codes-9Posted 10 months ago

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

    1

Please log in to post a comment

Log in with GitHub

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