Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code HTML & CSS

@skubiak447

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I have no idea why these two warnings are popping up for me:

  1. Document should have one main landmark
<html lang="en">

2.All page content should be contained by landmarks

<div class="card">

Community feedback

Patryk Sz 210

@dedku

Posted

1.Remove your style tag from head and move attribution class to your css file. More info: Here

2.Your body should look like this:

  <body>
   **</main>**
    <div class="card">
      <img alt="screen" src="./images/image-qr-code.png" />
      <h1 class="title">Improve your front-end skills by building projects.</h1>
      <p class="desc">
        Scan the QR code to visit Frontend Mentor and take your coding skills to
        the next level.
      </p>
    </div>
   **</main>**
  **<footer>**
    <div class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by
      <a href="https://github.com/skubiak447" target="_blank">Szymon Kubiak</a>.
    </div>
  ** </footer>**
  </body>

move footer into the body tag, and wrap all your html code from beggining of body till footer in main tag. More info: Here

Cheers!

Marked as helpful

1

@skubiak447

Posted

@dedku Thank you very much, I understand now

0

Please log in to post a comment

Log in with GitHub
Discord logo

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