@Abdelghafour122
Posted
Hello shettyankith, you did a great job on this challenge especially on the card styles. However, I have some suggestions for you that might further improve the solution:
** I've noticed that the card element isn't centered, and the overlay is relative to the container not the image **
You can solve that by adding these styles:
1.Add height: 100%; to both body and html elements, for the page to take the full height of the screen.
2.Add these styles to the body element to center the card in all screens:
display: flex; align-items: center; justify-content: center;
3.Make the Overlay absolute in it's parent element (image) by setting it's parent element's display property to relative, it should be the direct parent.
4.You don't have to set the overlay's height and width by px yourself, you can just say height: 100% or width: 100% and it will be set automatically for you.
Other than that, every thing looks great! I hope you find my suggestions helpful ! Have a good time coding ! ;)
Marked as helpful
@Shettyankith
Posted
Thank you @Abdelghafour122 for your feedback and suggestions! I really appreciate your kind words and the time you took to provide these valuable insights. Your suggestions are indeed helpful, and I'll definitely implement them to improve the solution.
