Got some difficulties to align properly the white box to the border: div { display: block; margin-left: auto; margin-right: auto; margin-top: 15%; } I did that way but it might not be the most efficiant.
@FluffyKas
Posted
Hey there,
First of all, congrats on uploading your first solution!
Apart from the things @Alucard2169 said already, I'd just suggest reducing the transition time on the image. ^^ 0.2-0.3s would work a lot better for such a short animation, longer transitions than this can look a bit "laggy".
Marked as helpful
@Nazemrap
Posted
@FluffyKas Correction applied, it's way smoother like that. Thanks ;)
@Alucard2169
Posted
hi @Nazemrap great work.
For centering the card property with the body
you can put your card in a container and then use display: flex on the body, remember to set a height on your body of 100vh and then use justify-content and align-items property.
Flexbox and grid are very important to make responsive designs. and they also make the work a lot easier.
here this video gives a great understanding of flexbox
Marked as helpful
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
