Hello Guys, this challenge was pretty tough as I struggled with the eye background and how to position it, if you have an idea on how I could have done so better or any other feedback, feel free to inform me.
The eye image put it in the div.img-overlay.
Instead of using opacity in the div.img-overlay you can use the transparency in the background.
you can use display: flex within body to center the card: body { display: flex; align-items: center; justify-content: center; height: 100vh; }
and delete: .main { position: absolute; top: 50%; margin-top: -17%; left: 40%; }
