Skip to content
Submitted 5 days ago

Responsive Qr-Code with HTML and CSS

Brenda•10
@DevDiva56
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

What are you most proud of, and what would you do differently next time?

I am most proud of completing this project

What challenges did you encounter, and how did you overcome them?

I encountered challenges with the size of the two squares which took me time to work on but I finally got it after a bit of research and trial and error

What specific areas of your project would you like help with?

CSS

Community feedback

  • micjik•10
    @micjikPosted 5 days ago

    Does the solution include semantic HTML?yes Is it accessible, and what improvements could be made?yes Does the layout look good on a range of screen sizes? yes Is the code well-structured, readable, and reusable? yes Does the solution differ considerably from the design? no

    1
  • OmarReyesC•10
    @OmarReyesCPosted 5 days ago

    Congratulations on your great work.

    May I perhaps suggest importing the font from Google fonts? You can paste it inside the head HTML tag. That would bring the end result closer to the original design.

      <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:[email protected]&display=swap" rel="stylesheet">

    I personally use it inside the html element in CSS so that it is inherited by the whole document.

    html {
    font-family: "Outfit", sans-serif;
}

    I hope you find this 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