Skip to content
Submitted 7 months ago

Frontend Mentor - QR code component solution

Ivis1991•70
@Ivis1991
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

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?

Community feedback

  • Lord Robins•550
    @ZenitsuAgPosted 7 months ago

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

    1
    Ivis1991•70
    @Ivis1991Posted 7 months ago

    @ZenitsuAg Thank you very much, I will try to achieve a better version of the solution with all the suggestions, sometimes the answer is in front of our eyes and we no longer see anything, the road is long but here we go :)

    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