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

@anoshaahmed

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

0

Accessibility Issues

0

HTML Issues

View Report

Anosha Ahmed’s questions for the community

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

Community Feedback

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

@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

P
Chamu 11,350

@ChamuMutezva

Posted

Great solution Anosha, well done

1


Anosha Ahmed 9,560

@anoshaahmed

Posted

@ChamuMutezva thanks Chamu!

0

Naveen Gumaste 10,510

@Crazimonk

Posted

This looks dope! Nice work

1


Anosha Ahmed 9,560

@anoshaahmed

Posted

@Crazimonk thanks Naveen!

0

Aakash Verma 6,680

@skyv26

Posted

Keep it Up 🔥🔥🔥

1


Anosha Ahmed 9,560

@anoshaahmed

Posted

@skyv26 thanks Aakash!!

1

@bilal1836

Posted

Looks 👌🏻 nice one ✔

1


Anosha Ahmed 9,560

@anoshaahmed

Posted

@bilal1836 thanks Bilal!

0

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

@anoshaahmed

Posted

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

0

Anosha Ahmed 9,560

@anoshaahmed

Posted

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

0

xZAYEDx 220

@xZAYEDx

Posted

adding the rotation to the card was really creative 👍

1


Anosha Ahmed 9,560

@anoshaahmed

Posted

@xZAYEDx thanks Zayed!

1

@viniciusshenri96

Posted

great job, the rotation was very good.👏

1


Anosha Ahmed 9,560

@anoshaahmed

Posted

@viniciushenri96 thank you!

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

@anoshaahmed

Posted

@dieudonneallognon The design that FEM provides

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

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

@anoshaahmed

Posted

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

0

Anosha Ahmed 9,560

@anoshaahmed

Posted

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

0

Victor 350

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

@anoshaahmed

Posted

@therealmaduanusi thanks Victor!!

0

@rafael-the-dev

Posted

Congratulation for the great job, keep it up.

1


Anosha Ahmed 9,560

@anoshaahmed

Posted

@rafael-the-dev thanks Rafeal!

1

@AmmarCode

Posted

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

1


Anosha Ahmed 9,560

@anoshaahmed

Posted

@AmmarCode thanks Ammar!!

1

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

@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

Omar A. 100

@i-5iici

Posted

Great work Anosha, that is a nice touch!

1


Anosha Ahmed 9,560

@anoshaahmed

Posted

@i-5iici thanks Omar!

0

pranav 120

@PrAnAvViNaYaKjAdHaV

Posted

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

1


Anosha Ahmed 9,560

@anoshaahmed

Posted

@PrAnAvViNaYaKjAdHaV thank u Pranav :)

0

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

@anoshaahmed

Posted

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

0

@hcristha

Posted

Congratulations!! Keep coding <3

1


Anosha Ahmed 9,560

@anoshaahmed

Posted

@hcristha thank u Helena <3

0

@uttamsharma446

Posted

Nice work, Congratulations!!

0

Danilo Blas 6,400

@Sdann26

Posted

Quite an interesting solution. Well done.

0

@mariamALLI

Posted

always impressive :)

0

Please focus on giving high-quality, helpful feedback and answering any questions anoshaahmed might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!