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

Rotating QR Card Component

#accessibility#bem
Anosha Ahmed 9,340

@anoshaahmed

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


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

Community feedback

@lucsn

Posted

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

@anoshaahmed

Posted

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

0

@arkharman12

Posted

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

@anoshaahmed

Posted

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

0

@arkharman12

Posted

@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,340

@anoshaahmed

Posted

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

0
Anosha Ahmed 9,340

@anoshaahmed

Posted

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

0

Account Deleted

Congratulations!! Keep coding <3

1

Anosha Ahmed 9,340

@anoshaahmed

Posted

@hcristha thank u Helena <3

0
pranav 120

@PrAnAvViNaYaKjAdHaV

Posted

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

1

Anosha Ahmed 9,340

@anoshaahmed

Posted

@PrAnAvViNaYaKjAdHaV thank u Pranav :)

0
Omar A. 100

@i-5iici

Posted

Great work Anosha, that is a nice touch!

1

Anosha Ahmed 9,340

@anoshaahmed

Posted

@i-5iici thanks Omar!

0

@mnizhadali-afg

Posted

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

1

Anosha Ahmed 9,340

@anoshaahmed

Posted

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

1

@mnizhadali-afg

Posted

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

1

@AmmarCode

Posted

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

1

Anosha Ahmed 9,340

@anoshaahmed

Posted

@AmmarCode thanks Ammar!!

1

@rafael-the-dev

Posted

Congratulation for the great job, keep it up.

1

Anosha Ahmed 9,340

@anoshaahmed

Posted

@rafael-the-dev thanks Rafeal!

1
Victor 470

@therealmaduanusi

Posted

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

1

Anosha Ahmed 9,340

@anoshaahmed

Posted

@therealmaduanusi thanks Victor!!

0

@dieudonneallognon

Posted

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

1

Anosha Ahmed 9,340

@anoshaahmed

Posted

@dieudonneallognon The design that FEM provides

0

@viniciusshenri96

Posted

great job, the rotation was very good.👏

1

Anosha Ahmed 9,340

@anoshaahmed

Posted

@viniciushenri96 thank you!

0
xZAYEDx 250

@xZAYEDx

Posted

adding the rotation to the card was really creative 👍

1

Anosha Ahmed 9,340

@anoshaahmed

Posted

@xZAYEDx thanks Zayed!

1

@Kamasah-Dickson

Posted

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

@anoshaahmed

Posted

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

0
Anosha Ahmed 9,340

@anoshaahmed

Posted

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

0

@bilal1836

Posted

Looks 👌🏻 nice one ✔

1

Anosha Ahmed 9,340

@anoshaahmed

Posted

@bilal1836 thanks Bilal!

0
P
AK 6,700

@skyv26

Posted

Keep it Up 🔥🔥🔥

1

Anosha Ahmed 9,340

@anoshaahmed

Posted

@skyv26 thanks Aakash!!

1
Naveen Gumaste 10,480

@NaveenGumaste

Posted

This looks dope! Nice work

1

Anosha Ahmed 9,340

@anoshaahmed

Posted

@Crazimonk thanks Naveen!

0
P
Chamu 12,970

@ChamuMutezva

Posted

Great solution Anosha, well done

1

Anosha Ahmed 9,340

@anoshaahmed

Posted

@ChamuMutezva thanks Chamu!

0

@Ayon95

Posted

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

@anoshaahmed

Posted

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

1

@Ayon95

Posted

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

Marked as helpful

0
Danilo Blas 6,300

@Sdann26

Posted

Quite an interesting solution. Well done.

0

@uttamsharma446

Posted

Nice work, Congratulations!!

0

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