@PJIceskull
Posted
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 an h1
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 helpful
@kojozcodes
Posted
Thank you for this detailed feedback. I will look into it and work on those mistakes. @PJIceskull