Design comparison
Solution retrospective
This project was fairly straightforward. I utilized CSS to style a container to match the design file. I didn't incorporate any libraries or dependencies for this project. I did some reading on responsive design and managed to create a component that responds to the viewport size. However, I still don't feel very confident that I achieved this "correctly" and would appreciate any feedback.
What challenges did you encounter, and how did you overcome them?I had issues (I suspect it may have been a cache issue) getting the QR code image to display in my project. Although my image tag was formatted correctly, it still wasn't displaying on my live preview server. For no apparent reason, it started working. Then, when I deployed my project to Github Pages, same issue. And again, for no apparent reason, it now displays correctly.
What specific areas of your project would you like help with?Based on the above stated issue, if you have any suggestions on what may have been causing the issue, please let me know. If there is something I should do differently, please let me know as well. I also welcome any and all feedback in relation to my adherence to convention when it comes to writing efficient, readable code.
Community feedback
- @RetroApePosted 3 days ago
Congratulations on completing the challenge :)
I checked your code and it is very readable.
Looking at the solution itself, I can see several things that differ from the design:
- radius of QR image is too big; it should be
border-radius: 10px;
- text color is black; it should be:
.qr-header {color: #1F314F;}
Slate-900.qr-info {color: #68778D;}
Slate-500
- shadow is missing below the card:
box-shadow: #0000000D 0 25px 25px 0px;
- it seems that the card is a bit too short
Those are some of the things I have noticed. I hope it helps.
Best of Luck!
0 - radius of QR image is too big; it should be
- @eminentbitPosted 3 days ago
When I tried to use his code on github, the page wasn't s responsive as it was given in the design
0
Please log in to post a comment
Log in with GitHubJoin 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