Skip to content
Submitted over 1 year ago

Frontend Mentor - QR code component solution

tailwind-css
Ivis1991•70
@Ivis1991
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Responsive page operation for selected screens

What challenges did you encounter, and how did you overcome them?

In the case of the image, I would have liked to be able to use tailwind to round the edges instead of specifying them directly using the CSS

What specific areas of your project would you like help with?
Code

Please log in to post a comment

Log in

Community feedback

  • Lord Robins•610
    @ZenitsuAg

    Hi Ivis, the work you've done is really amazing fr. I like it. Maybe we can collabo on something in the future who knows :)

    To round the edges of the image in Tailwind, did you try adding rounded-[5%] class to your img tag? Or adding the image to your tailwind.config.js file?

    Other things I noticed

    • Your favicon is missing, you can fix this by adding <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png"> to your code.
    • And you didn't also use the Outfit font as per the style guide, you can do so by adding this @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap'); to the top of your index.css and then add the class to your html file.

    You did a really great job. Have a great day. Happy Coding :)

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