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

Responsive QR code component

Ahtasham 20

@ByteOverload

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


Hello mentors, this is my day 3 of learning HTML and CSS and i've made this. Eager to receive your kind feedback.

Community feedback

Lucas 👾 104,420

@correlucas

Posted

Hello Ahtasham, congratulations for you solution and welcome to the Frontend Mentor community.

You saw that you did everything right with your solution, the component is flexible, you've add some custom features like the hover and box-shadow, I liked it, sometimes I do some changes to my solutions too.

My only advice for is about the box-shadow, you can create a smoother box-shadow playing with the blur and opacity values. Is easier if you use Figma or an online tool to create the shadow design and just drop the code inside the css.

Check the report panel to fix the accessibility issues and improve your html semantic.

If you're not familiar to Figma, my recomendation is this online tool for box-shadows:

CSS BOX-SHADOW GENERATOR https://www.cssmatic.com/box-shadow

Congratulations and happy coding!

1
Mudi 180

@Mudi-Igbinoba

Posted

Great job. This looks good and it shows great initiative as a beginner. Also, try fixing the HTML and accessibility issues on your report

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