@elaineleung
Posted
Hi Leonardo, great job on your second challenge! I think you did well in finding a solution to display the eye icon and how to position it; often times it's the creative solutions that help us learn how to do problem solving.
For the overlay, I also would use position: absolute, like what you did. For the eye, instead of using position: absolute, I would use add display: grid on the overlay and use that to put the eye in center position.
Here's how it looks like:
.overlay {
display: grid;
place-content: center;
// rest of your CSS
}
// you can just remove the position: absolute properties for the eye icon
You can use the same technique to center your component; all you need to do is to add these lines in the body selector:
body {
display: grid;
place-content: center;
min-height: 100vh;
}
Hope this helps you out a bit, and happy coding! 😊
Marked as helpful
@LeonardoSchuquel
Posted
@elaineleung Elaine I'm glad you liked mine I confess that when I finished working I thought it was too messy and that it should have been a much easier and more convenient way to have done it so I'm glad you liked it
@elaineleung
Posted
@LeonardoSchuquel Hey Leonardo, I also made a lot of mistakes in my earlier projects (which is why I've been going back to fix them), so no worries, I totally understand how you feel! I honestly think you should be proud of yourself in putting this together, because your solution looks pretty close to the design at least, even if you used a lot of "hacks" along the way. Just keep going and keep learning how to get better, and one day you'll see how far you've come 🙂
Marked as helpful
