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

Talisson 190

@talissoncosta

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


The second small project working with Tailwind CSS, now I see how it is powerful and how you get used to the syntax. It just come on your mind and you just need to make it happen.

Any tip is really welcome :D

Community feedback

Shaxboz 1,230

@shakhboz-shukhrat

Posted

Hello there👋! Congratulations on completing this challenge!

The code seems to be fine but there is a small typo in line 5. Instead of "displays site properly based on user's device", it should be "displays the site properly based on the user's device". Here's the corrected code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | QR code component</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main>
    <div class="flex bg-blue-100 w-full min-h-screen">
      <div class="flex flex-col m-auto bg-white gap-4 max-w-xs pt-3 pl-3 pr-3 pb-6 rounded-2xl filter:drop-shadow(4px 4px 4pxpx rgb(0 0 0 / 0.1));">
        <img class="m-auto rounded-xl" width="256" height="256" src="./images/image-qr-code.png" alt="QR Code"/>
        <div class="flex flex-col gap-4 w-64 m-auto pl-2 pr-2">
          <h1 class="font-bold text-lg text-center">Improve your front-end skills by building projects</h1>
          <div class="text-center text-gray-400 text-sm">
            Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
          </div>
        </div>
      </div>
    </div>
  </main>
  <footer class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="https://talissoncosta.github.io/">Talisson Costa</a>.
  </footer>
</body>
</html>

Anyway, your solution is great. Hope you will find this helpful. Happy coding!

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