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

sass htlm5 css3 grid flexbox res

kappa 180

@kappa20

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


responsive without using media query instead i mobile first approach and max-width and min-width to prevent the card container from expanding

Community feedback

Dev Rathore 2,600

@GitHub-dev12345

Posted

If you want to reduce your accessibility, Change this code. 😊

<div class="container"> to <main> ( Used main tag for main card design ) <div class="attribution"> to <footer> ( Used footer tag for footer design)

I hope you find this helpful

1
Dev Rathore 2,600

@GitHub-dev12345

Posted

Congratulations 👏👏🎉🎉🎉 to complete your challenges. I suggest you in your card design to give border-radius: 13px. I hope you find this helpful

1
Jérémy 1,020

@jrmydix

Posted

Hi! Well done!

If this can help, I have a suggestion:

  • Fix accessibility issues: to do so, change your <h3> to <h1>. For the landmark issue, change <div class="container"> to <main> and change your <div class="attribution"> to <footer>

If you have any questions feel free to ask, I'll try my best to help and answer! 🙂

1
kappa 180

@kappa20

Posted

Thank you <3

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