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
- @shakhboz-shukhratPosted over 1 year ago
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 GitHubJoin 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