Skip to content
Submitted about 3 years ago

Rotating QR Card Component

#accessibility#bem
Anosha Ahmed•9,300
@anoshaahmed
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

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

Community feedback

  • Lucas Nascimento•50
    @lucsnPosted about 3 years ago

    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
    1
    Anosha Ahmed•9,300
    @anoshaahmedPosted about 3 years ago

    @Lucsn oh wow thank u for teaching me that Lucas!

    0
  • Harmanjot Singh•985
    @arkharman12Posted about 3 years ago

    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
    1
    Anosha Ahmed•9,300
    @anoshaahmedPosted about 3 years ago

    @arkharman12 i know i noticed :/ i wonder how to fix it

    0
    Harmanjot Singh•985
    @arkharman12Posted about 3 years ago

    @anoshaahmed Look into this question on Stackoverflow ( https://stackoverflow.com/questions/22559756/changing-hover-to-touch-click-for-mobile-devices ). Or convert your hover effect to a click instead when on smaller screens.

    1
    Anosha Ahmed•9,300
    @anoshaahmedPosted about 3 years ago

    @arkharman12 Fixed the issue. but it’s still not perfect

    0
    Anosha Ahmed•9,300
    @anoshaahmedPosted about 3 years ago

    @arkharman12 Fixed the issue. but it’s still not perfect

    0
  • Account deleted

    Congratulations!! Keep coding <3

    1
    Anosha Ahmed•9,300
    @anoshaahmedPosted about 3 years ago

    @hcristha thank u Helena <3

    0
  • pranav•120
    @PrAnAvViNaYaKjAdHaVPosted about 3 years ago

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

    1
    Anosha Ahmed•9,300
    @anoshaahmedPosted about 3 years ago

    @PrAnAvViNaYaKjAdHaV thank u Pranav :)

    0
  • Omar A.•100
    @i-5iiciPosted about 3 years ago

    Great work Anosha, that is a nice touch!

    1
    Anosha Ahmed•9,300
    @anoshaahmedPosted about 3 years ago

    @i-5iici thanks Omar!

    0
  • Ali Mousavi Nizhad•270
    @mnizhadali-afgPosted about 3 years ago

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

    1
    Anosha Ahmed•9,300
    @anoshaahmedPosted about 3 years ago

    @mnizhadali-afg for sure, what's the problem?

    1
    Ali Mousavi Nizhad•270
    @mnizhadali-afgPosted about 3 years ago

    @anoshaahmed - Thank you, dear! Actually, I saw your code and now the (background-position ) problem is solved right now :)

    1
  • Ammar Jalabi•270
    @AmmarCodePosted about 3 years ago

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

    1
    Anosha Ahmed•9,300
    @anoshaahmedPosted about 3 years ago

    @AmmarCode thanks Ammar!!

    1
  • rafael tivane•645
    @rafael-the-devPosted about 3 years ago

    Congratulation for the great job, keep it up.

    1
    Anosha Ahmed•9,300
    @anoshaahmedPosted about 3 years ago

    @rafael-the-dev thanks Rafeal!

    1
  • Victor•660
    @therealmaduanusiPosted about 3 years ago

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

    1
    Anosha Ahmed•9,300
    @anoshaahmedPosted about 3 years ago

    @therealmaduanusi thanks Victor!!

    0
  • ALLOGNON Dieudonné•100
    @dieudonneallognonPosted about 3 years ago

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

    1
    Anosha Ahmed•9,300
    @anoshaahmedPosted about 3 years ago

    @dieudonneallognon The design that FEM provides

    0
  • Vinicius Henrique•590
    @viniciusshenri96Posted about 3 years ago

    great job, the rotation was very good.👏

    1
    Anosha Ahmed•9,300
    @anoshaahmedPosted about 3 years ago

    @viniciushenri96 thank you!

    0
  • xZAYEDx•250
    @xZAYEDxPosted about 3 years ago

    adding the rotation to the card was really creative 👍

    1
    Anosha Ahmed•9,300
    @anoshaahmedPosted about 3 years ago

    @xZAYEDx thanks Zayed!

    1
  • Kamasah-Dickson•5,570
    @Kamasah-DicksonPosted about 3 years ago

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

    1
    Anosha Ahmed•9,300
    @anoshaahmedPosted about 3 years ago

    @Kamasah-Dickson Yeah there are some issues on phone :/

    0
    Anosha Ahmed•9,300
    @anoshaahmedPosted about 3 years ago

    @Kamasah-Dickson Fixed the issue. but it’s still not perfect

    0
  • bilal ahmed•0
    @bilal1836Posted about 3 years ago

    Looks 👌🏻 nice one ✔

    1
    Anosha Ahmed•9,300
    @anoshaahmedPosted about 3 years ago

    @bilal1836 thanks Bilal!

    0
  • Aakash Verma•9,480
    @skyv26Posted about 3 years ago

    Keep it Up 🔥🔥🔥

    1
    Anosha Ahmed•9,300
    @anoshaahmedPosted about 3 years ago

    @skyv26 thanks Aakash!!

    1
  • Naveen Gumaste•10,420
    @NaveenGumastePosted about 3 years ago

    This looks dope! Nice work

    1
    Anosha Ahmed•9,300
    @anoshaahmedPosted about 3 years ago

    @Crazimonk thanks Naveen!

    0
  • Chamu•13,690
    @ChamuMutezvaPosted about 3 years ago

    Great solution Anosha, well done

    1
    Anosha Ahmed•9,300
    @anoshaahmedPosted about 3 years ago

    @ChamuMutezva thanks Chamu!

    0
  • Mushfiq Rahman•300
    @Ayon95Posted about 3 years ago

    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.

    1
    Anosha Ahmed•9,300
    @anoshaahmedPosted about 3 years ago

    @Ayon95 i wanted to but <section> requires a heading :/ so it would have created an accessibility issue

    1
    Mushfiq Rahman•300
    @Ayon95Posted about 3 years ago

    @anoshaahmed Hmm fair point. I guess using a <div> in this case is not a problem.

    Marked as helpful
    0
  • Mariam Oluseyi-Alli•250
    @mariamALLIPosted about 3 years ago

    always impressive :)

    0
  • Danilo Blas•6,300
    @Sdann26Posted about 3 years ago

    Quite an interesting solution. Well done.

    0
  • Uttam Sharma•90
    @uttamsharma446Posted about 3 years ago

    Nice work, Congratulations!!

    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