Skip to content
Submitted over 3 years ago

Rotating QR Card Component

accessibility, bem
Anosha Ahmed•9,300
@anoshaahmed
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Would appreciate any advice on where and how to get better. Thank you x

Code

Please log in to post a comment

Log in

Community feedback

  • Lucas Nascimento•50
    @lucsn

    For some reason when translating the page into Portuguese the spaces in the copyright do not work properly the "Challenge byFrontend Mentor" (without the space between the by and the link). I already had this problem and solved it with  "&+nbsp+;(only remove the "+" because when I write without it literally becomes a space hahaha)" .

    Nice work, congratulations :))

    Marked as helpful
  • Harmanjot Singh•985
    @arkharman12

    Tested on iPhone 13 with Safari, the card flip animation seems to be having trouble. The card is already flipped and the text appears backward.

    Marked as helpful
  • Account deleted

    Congratulations!! Keep coding <3

  • pranav•120
    @PrAnAvViNaYaKjAdHaV

    That hover animation is too nice 😀😀😀😀😀😀

  • Omar A.•100
    @i-5iici

    Great work Anosha, that is a nice touch!

  • Ali Mousavi Nizhad•270
    @mnizhadali-afg

    @anoshaahmed - Brilliant Anosha Jan! I have issues with the challenge (Profile Card), can you help with that, please?

  • Ammar Jalabi•270
    @AmmarCode

    Perfect application of the design! Great work, keep it up👍

  • rafael tivane•645
    @rafael-the-dev

    Congratulation for the great job, keep it up.

  • Victor•730
    @therealmaduanusi

    I just love how you tackled these quickly when it's was just released. great job wishing you the best😁

  • ALLOGNON Dieudonné•100
    @dieudonneallognon

    @anoshaahmed hey, I really like your work ! Was wondering what tool do you use to attend perfect pixel code ? Thanks !

  • Vinicius Henrique•590
    @viniciusshenri96

    great job, the rotation was very good.👏

  • xZAYEDx•250
    @xZAYEDx

    adding the rotation to the card was really creative 👍

  • Kamasah-Dickson•5,570
    @Kamasah-Dickson

    I think after rotation, your name could have been a link to your frontendmentor bio or any.

    I realised after rotation when I tap on the card again it doesn't go back to the QR code I don't know if it is because am on mobile. Besides that's a great work there😎👍 Anosha :)

  • bilal ahmed•0
    @bilal1836

    Looks 👌🏻 nice one ✔

  • Aakash Verma•9,500
    @skyv26

    Keep it Up 🔥🔥🔥

  • Naveen Gumaste•10,420
    @NaveenGumaste

    This looks dope! Nice work

  • Chamu•13,820
    @ChamuMutezva

    Great solution Anosha, well done

  • Mushfiq Rahman•300
    @Ayon95

    Hi, your solution looks great. Good job on going the extra mile and implementing a rotating card. I looked at your HTML code and noticed that you used a <div> for 'card__side--back'. I think a <section> is a better choice as you have done for 'card__side--front'. The front side and back side of the card are like two sections of it.

  • Mariam Oluseyi-Alli•250
    @mariamALLI

    always impressive :)

  • Danilo Blas•6,300
    @Sdann26

    Quite an interesting solution. Well done.

  • Uttam Sharma•90
    @uttamsharma446

    Nice work, Congratulations!!

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