Travolgi 🍕• 31,420
@denielden
Posted
Hi Michael, good job! I took some time to look at your code and have some ideas for improving it:
- add
main
tag and wrap the card for improve the Accessibility - The way you used for the
: hover
effect is fine, another way is to create adiv
that appears on hover. I used tailwind but you can see and understand which CSS properties I used and how to do it alternatively. Look here -> my solution - if you want to center a
div
usingabsolute
you don't need themargin
but just usetop: 50%, left: 50% and transform: translate (-50%, -50%)
- but centering a
div
withabsolute
positioning is now deprecated, it uses modern css likeflexbox or grid
- remove all
margin
fromcard
class - use flexbox to the body for center the card. Read here -> best flex guide
- after, add
min-height: 100vh
to body because Flexbox aligns child items to the size of the parent container - instead of using
px
try to use relative units of measurement -> read here
Overall you did well 😉
Hope this help and happy coding!
Marked as helpful
1
Michael Surgeon• 30
@MichaelSurgeon
Posted
@denielden Thanks for your feedback!
1