Skip to content
Submitted almost 3 years ago

Rotating QR Card Component

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 over 2 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 over 2 years ago

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

    0
  • Harmanjot Singh•985
    @arkharman12Posted almost 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 almost 3 years ago

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

    0
    Harmanjot Singh•985
    @arkharman12Posted almost 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 over 2 years ago

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

    0
    Anosha Ahmed•9,300
    @anoshaahmedPosted over 2 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 over 2 years ago

    @hcristha thank u Helena <3

    0
  • pranav•120
    @PrAnAvViNaYaKjAdHaVPosted almost 3 years ago

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

    1
    Anosha Ahmed•9,300
    @anoshaahmedPosted over 2 years ago

    @PrAnAvViNaYaKjAdHaV thank u Pranav :)

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

    Great work Anosha, that is a nice touch!

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

    @i-5iici thanks Omar!

    0
  • Ali Mousavi Nizhad•270
    @mnizhadali-afgPosted almost 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 almost 3 years ago

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

    1
    Ali Mousavi Nizhad•270
    @mnizhadali-afgPosted almost 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 almost 3 years ago

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

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

    @AmmarCode thanks Ammar!!

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

    Congratulation for the great job, keep it up.

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

    @rafael-the-dev thanks Rafeal!

    1
  • Victor•510
    @therealmaduanusiPosted almost 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 almost 3 years ago

    @therealmaduanusi thanks Victor!!

    0
  • ALLOGNON Dieudonné•100
    @dieudonneallognonPosted almost 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 almost 3 years ago

    @dieudonneallognon The design that FEM provides

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

    great job, the rotation was very good.👏

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

    @viniciushenri96 thank you!

    0
  • xZAYEDx•250
    @xZAYEDxPosted almost 3 years ago

    adding the rotation to the card was really creative 👍

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

    @xZAYEDx thanks Zayed!

    1
  • Kamasah-Dickson•5,590
    @Kamasah-DicksonPosted almost 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 almost 3 years ago

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

    0
    Anosha Ahmed•9,300
    @anoshaahmedPosted over 2 years ago

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

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

    Looks 👌🏻 nice one ✔

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

    @bilal1836 thanks Bilal!

    0
  • Aakash Verma•6,710
    @skyv26Posted almost 3 years ago

    Keep it Up 🔥🔥🔥

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

    @skyv26 thanks Aakash!!

    1
  • Naveen Gumaste•10,480
    @NaveenGumastePosted almost 3 years ago

    This looks dope! Nice work

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

    @Crazimonk thanks Naveen!

    0
  • Chamu•13,130
    @ChamuMutezvaPosted almost 3 years ago

    Great solution Anosha, well done

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

    @ChamuMutezva thanks Chamu!

    0
  • Mushfiq Rahman•300
    @Ayon95Posted almost 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 almost 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 almost 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 over 2 years ago

    always impressive :)

    0
  • Danilo Blas•6,300
    @Sdann26Posted over 2 years ago

    Quite an interesting solution. Well done.

    0
  • Uttam Sharma•90
    @uttamsharma446Posted over 2 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