Submitted 7 months ago

Rotating QR Card Component

#accessibility#bem

Anosha Ahmed• 9,560

@anoshaahmed

Preview Site View Code

This is a solution for...

QR code component

HTML
CSS

1newbie

View Challenge

Design Comparison

SolutionDesign

Report

Accessibility Issues

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

Mushfiq Rahman• 300

@Ayon95

Posted 7 months 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.

Anosha Ahmed• 9,560

@anoshaahmed

Posted 7 months ago

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

Mushfiq Rahman• 300

@Ayon95

Posted 6 months ago

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

Marked as helpful

Chamu• 11,350

@ChamuMutezva

Posted 7 months ago

Great solution Anosha, well done

Anosha Ahmed• 9,560

@anoshaahmed

Posted 6 months ago

@ChamuMutezva thanks Chamu!

Naveen Gumaste• 10,510

@Crazimonk

Posted 6 months ago

This looks dope! Nice work

Anosha Ahmed• 9,560

@anoshaahmed

Posted 6 months ago

@Crazimonk thanks Naveen!

Aakash Verma• 6,680

@skyv26

Posted 6 months ago

Keep it Up 🔥🔥🔥

Anosha Ahmed• 9,560

@anoshaahmed

Posted 6 months ago

@skyv26 thanks Aakash!!

bilal ahmed• 0

@bilal1836

Posted 6 months ago

Looks 👌🏻 nice one ✔

Anosha Ahmed• 9,560

@anoshaahmed

Posted 6 months ago

@bilal1836 thanks Bilal!

Kamasah-Dickson• 5,260

@Kamasah-Dickson

Posted 6 months 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 :)

Anosha Ahmed• 9,560

@anoshaahmed

Posted 6 months ago

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

Anosha Ahmed• 9,560

@anoshaahmed

Posted 6 months ago

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

xZAYEDx• 220

@xZAYEDx

Posted 6 months ago

adding the rotation to the card was really creative 👍

Anosha Ahmed• 9,560

@anoshaahmed

Posted 6 months ago

@xZAYEDx thanks Zayed!

Vinicius Henrique• 400

@viniciusshenri96

Posted 6 months ago

great job, the rotation was very good.👏

Anosha Ahmed• 9,560

@anoshaahmed

Posted 6 months ago

@viniciushenri96 thank you!

ALLOGNON Dieudonné• 100

@dieudonneallognon

Posted 6 months ago

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

Anosha Ahmed• 9,560

@anoshaahmed

Posted 6 months ago

@dieudonneallognon The design that FEM provides

Harmanjot Singh• 1,005

@arkharman12

Posted 6 months 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

Anosha Ahmed• 9,560

@anoshaahmed

Posted 6 months ago

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

Harmanjot Singh• 1,005

@arkharman12

Posted 6 months 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.

Anosha Ahmed• 9,560

@anoshaahmed

Posted 6 months ago

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

Anosha Ahmed• 9,560

@anoshaahmed

Posted 6 months ago

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

Victor• 350

@therealmaduanusi

Posted 6 months ago

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

Anosha Ahmed• 9,560

@anoshaahmed

Posted 6 months ago

@therealmaduanusi thanks Victor!!

rafael tivane• 645

@rafael-the-dev

Posted 6 months ago

Congratulation for the great job, keep it up.

Anosha Ahmed• 9,560

@anoshaahmed

Posted 6 months ago

@rafael-the-dev thanks Rafeal!

Ammar Jalabi• 110

@AmmarCode

Posted 6 months ago

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

Anosha Ahmed• 9,560

@anoshaahmed

Posted 6 months ago

@AmmarCode thanks Ammar!!

Ali Mousavi Nizhad• 270

@mnizhadali-afg

Posted 6 months ago

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

Anosha Ahmed• 9,560

@anoshaahmed

Posted 6 months ago

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

Ali Mousavi Nizhad• 270

@mnizhadali-afg

Posted 6 months ago

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

Omar A.• 100

@i-5iici

Posted 6 months ago

Great work Anosha, that is a nice touch!

Anosha Ahmed• 9,560

@anoshaahmed

Posted 6 months ago

@i-5iici thanks Omar!

pranav• 120

@PrAnAvViNaYaKjAdHaV

Posted 6 months ago

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

Anosha Ahmed• 9,560

@anoshaahmed

Posted 6 months ago

@PrAnAvViNaYaKjAdHaV thank u Pranav :)

Lucas Nascimento• 50

@lucsn

Posted 6 months 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

Anosha Ahmed• 9,560

@anoshaahmed

Posted 6 months ago

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