Responsive QR Code Component using HTML, CSS, and Bootstrap
Design comparison
Solution retrospective
Please I would accept any feedback.
Community feedback
- @PJIceskullPosted over 1 year ago
Hi @kojozcodes, Overall your solution looks good but you missed a couple of things. These elements are the color of your heading text and your QR card lacking a box shadow.
- Heading font color is incorrect
One detail you missed in your solution is the color of your heading text, "Improve your front-end skills by building projects". In the design, the color of the heading is dark blue while yours is just black. I also took a look at your code using Chrome's developer tools saw a problem with your card-title class.
.card-title { margin-bottom: var(--bs-card-title-spacer-y); color: var(--bs-card-title-color); // This variable is undefined }
This should be a simple thing to fix since you find the hsl color values in the style guide provided by Frontend Mentor and under the #Color section. I also notice that you're using an
H6
tag for your heading. While this isn't really a problem, it would be a better idea if you just use anh1
tag if you're only using one heading tag.- Box-Shadow
While it's a bit feint, if you look at the bottom of the QR code in the design, you see that it has a
box shadow
under it. Box shadows can be tricky but make sure the x and y values are small and the color of the shadow has a low-opacity.Marked as helpful1@kojozcodesPosted over 1 year agoThank you for this detailed feedback. I will look into it and work on those mistakes. @PJIceskull
1 - @kojozcodesPosted about 1 year ago
I have made some updates to the QR card component. The card title and text color, the card text bottom margin and the card's box shadow.
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