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 Component Solution

Affan840 750

@Affan840

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Adem Tozlu 160

@Adem-Tozlu

Posted

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
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