Skip to content
Submitted 10 months ago

QR Code in so simple way

Ryan Abdaul•320
@RyanAbdaul
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

Hey buds! ✌ I'd rather to tell you what's new in this QR code that made than telling you things that you almost know like that I used Flex to align it in the middle and bla bla bla... Nothing much actually, what I did is.. -> Creating a smooth effect in both sides (right, left). 😆 -> When you hover the QR box becomes bigger.😉 That's it, I know, they didn't ask me to do that, but I did though, because I love adding my print in everything I do. If you have anything to say, if want to help me find any mistake I've made, pls tell me in the comments bellow. I hope that was beneficial for you ❤🤞

Community feedback

  • raya•2,870
    @rayaattaPosted 10 months ago

    Hi Bro 👋, congratulations on completing this challenge 🎉 I only have a few tips to suggest. 1 You need to make your html more semantic. Try changing <div class="qr-box"> to <main class="qr-box"> 2 Since the qr code image is not decorative fill it's alt attribute with text describing where it leads to i.e ```alt="qr code leading to frontend mentor.io"

    3 Change height: 100vh; to min-height:100vh; this ensures that content does not overflow on short devices or mobile devices in landscape mode.

    4 Bro this is awesome I specifically liked those flowing pseudo classes on hover,man this is amazing 🤩. Happy coding ✌️

    Marked as helpful
    2
    Ryan Abdaul•320
    @RyanAbdaulPosted 10 months ago

    Hey @rayaatta Thanks for your feedback, and for your tips either, I really appreciate them. I did as you said in my next design, the one that I am about to upload it now, so thanks again for these tip. plus, ehem, thanks for your compliment really thanks. I'm going to follow you so I can learn more from your design. It was great to see you.❤

    1

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