Design comparison
Solution retrospective
Hello everybody, back again with one more exercise!
Had trouble with 2 things:
- Getting the "days left" to align all the way to the right;
- The hover effect on the picture, how did the color changed?
If you have any tip or anything you would like to give me a heads up, please go ahead! 💛
Community feedback
- @denieldenPosted over 2 years ago
Hi Mariana, I took some time to look at your solution and you did a great job!
Also I have some tips for improving your code:
- You can add the effect
:hover
creating adiv
that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution - remove all
margin
fromcontainer
class - try to 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
Overall you did well 😉
Hope this help and happy coding!
Marked as helpful1 - You can add the effect
- @mariana-c-ramosPosted over 2 years ago
Hey @denielden, always showing up with great advice!
Fixed everything, will see now how to adapt the hover effect to css yes, but I got the general idea, the div will be on top of the image only when hovered, that's how the color changes and evene the eye shows up!
Thank you so much! 💛
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
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