Skip to content
Submitted 6 months ago

QR Code Component Solution

Affan840•750
@Affan840
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

  • Adem Tozlu•160
    @Adem-TozluPosted 6 months ago

    Hello, I took a look at your code and there seem to be errors. and it is important that you have a main tag in your body, try it like this. Replace your div id=container tag with main and add this in your CSS and best of all, don't make so many div containers that you don't need. Have I sent you a suggested solution, you can mess around with it a bit

    HTML

    <body> <main> 
    <div class="qr-code">
  <img src="images/image-qr-code.png" alt="QR Code">
  <h2>Improve your front-end skills by building projects
  </h2>
  <p class="text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
    </main> </body>

    CSS

    body{

    font-size: 15px;
font-family: Outfit, sans-serif;
background-color: var(--color-Light-gray);

    }

    main

    { height: 97vh; display: flex; justify-content: center; align-items: center;

    }

    .qr code img{ width: 100%; border-radius: 0.5rem;

    }

    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