Design comparison
Solution retrospective
Please rate my spacings and correlation to the real design!
Community feedback
- @PJIceskullPosted 11 months ago
Hey @Lovethrech, your spacing is good but one major element that needs attention is the box shadow. The box-shadow's x and y positions are wrong and the color should be a solid black. An easy fix is setting the blur value (the third value in your box-shadow property) to 0. You will also need to remove the transparency of your box shadow's color. For the box-shadow to appear on the bottom of the card you have to set the y-offset to a position value.
In short, your box-shadow code should look something like this:
.card-container { box-shadow: 10px 10px 0px #000000; }
Another thing to note is that the card's box shadow should change when you hover over it just like your <h1>. This change can be seen in the image showing the active states. For this, all you have to do is add a hover-state on your .card-container class and change the x and y values on the box shadow. An example would be something like this:
.card-container:hover { box-shadow: 30px 30px 0px #222222; }
0@LovethrechPosted 11 months ago@PJIceskull thanks so much for the correction. I will work on it now.
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