Skip to content
Submitted over 1 year ago

QR Code Component using HTML and CSS

ItVang•20
@ItVang
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

In my CSS, what are the more conventional/cleaner ways of solving this challenge?

Community feedback

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

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

    HTML

    In order to fix the accessibility issues:

    • You don't need <header> tags inside the <div class="attribution">
    • However, you need to replace <div class="attribution"> with the <main class="attribution"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
    <body>
  <main class="attribution">
    <img src = "images/image-qr-code.png">
    <h1>Improve your front-end skills by building projects</h1>
    <p>Scan the QR code to visit Frontend<br> 
      Mentor and take your coding skills to<br> 
      the next level.</p>
  </main>
</body>

    After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

    CSS

    • It would be better if you change the name of the div to .attribution and the header to h1:
    .attribution {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  border-radius: 15px;
  margin: auto;
  background-color: white;
  width: 400px;
  padding: 20px;
}

h1 {     
  font-family: "Outfit", sans-serif;
  font-weight: 900;
  color: hsl(218, 44%, 22%);
  font-size: 15px;
}

    Hope I am helpful. :)

    Marked as helpful
    1
  • Bader Idris•2,880
    @Bader-IdrisPosted over 1 year ago

    You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:

    .container {
  display: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

    the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful

    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