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 in so simple way

@RyanAbdaul

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


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,850

@rayaatta

Posted

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

@RyanAbdaul

Posted

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