Skip to content
Submitted over 1 year ago

QR code component

Matanski•110
@Matanski
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

Community feedback

  • Ecem Gokdogan•9,380
    @ecemgoPosted over 1 year ago

    Some recommendations regarding your code that could be of interest to you.

    HTML

    • If you want to use the recommended font-family for this project, you can add the following between the <head> tags in HTML file:
    <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:wght@400;700&display=swap" rel="stylesheet">

    CSS

    • After adding them to the HTML, you can add this font-family to the body
    body {
  font-family: "Outfit", sans-serif;
}
    • If you use max-width, the card will be responsive
    • You don't need to use border and you can remove it
    .qr {
  /* border: 1px solid white; */
  /* width: 15.6rem; */
  max-width: 15.6rem;
}
    • You don't need to give background-color to the text because you've already defined it in the .qr. So, you can remove it
    • You can update texts in this way
    /* h1,
p {
  background-color: white;
} */

h1 {
  font-size: 20px;
}

p {
  color: gray;
  margin: 10px 10px 30px;
}
    • Finally, if you follow the steps above, the solution will be responsive.

    Hope I am helpful. :)

    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