Blog Preview Card Component With HTML/CSS
Design comparison
Solution retrospective
I am proud that I have done this project myself, in between 2-4 hours.
What challenges did you encounter, and how did you overcome them?I found it challenging to make the card center of the page
What specific areas of your project would you like help with?I think my project is perfect, but I need feedback on it to do it better.
Community feedback
- @EFEELEPosted 6 months ago
Your project is very well done!!
I want to give you an extra piece of advice to make it look even better!!
In your .container, you can add these two attributes. The first one is a** transform: translate** to move your card and compensate for the box-shadow you added, this way it will seem like the card is moving and not the shadow. And the second attribute is changing to cursor: pointer to make it look much better. Remember, this is done using the :hover pseudo-class.
.container:hover { box-shadow: 15px 15px #111; transform: translate(-5px, -5px); cursor: pointer; }
¡Congratulations!
Marked as helpful0
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