Skip to content
Submitted about 1 year ago

QR code component using html, css, and flexbox

Firerenza•60
@Firerenza
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

Had some trouble getting the footer to stay at the bottom of the page, as well as getting the body to fill the entire page so that the main container could sit in the middle of the page. Not sure if everything is organized correctly, but it seems to work. Also I'm not sure if the "mobile" layout is responsive. I did not do anything special for that, and I'm not sure if I was supposed to.

Community feedback

  • _nehal💎•6,710
    @NehalSahu8055Posted about 1 year ago

    Hello Coder 👋.

    Congratulations on successfully completing the challenge! 🎉

    Few suggestions regarding design.

    • Use Semantics for the proper design of your code.
    <body>
<main>... main content goes here ...</main>
<footer>... .attribution div goes here ... </footer>
</body>
    • For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".

    I hope you find this helpful.

    Happy coding😄

    Marked as helpful
    2
  • Daniel Muri•440
    @dmuriPosted about 1 year ago

    Hi there, well done!

    It looks like site has some issues with the font. You can easly add this to your site by two small changes in the html and css.

    HTML:

    <link rel="preconnect" href="https://fonts.googleapis.com">

... Add these two lines
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">
...

<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

    CSS:

    body {
   font-family: 'Outfit', sans-serif;
}

    I would recommend watching a video on adding fonts with "Google Font" to a project. https://www.youtube.com/watch?v=eLY5KSXcQ6c&ab_channel=RosemaryBarker

    This one is a short nice introduction to it.

    Happy coding!

    Marked as helpful
    0

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