Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog Preview Card

@PatricioZarauz

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

What I'm most proud of are the animations I added for the hover over the card and title. What I would do different is to make sure to code in a mobile first approach, making sure of having completed the mobile layout first and then make any other changes for the desktop version.

What challenges did you encounter, and how did you overcome them?

The main challenge I encountered was regarding the animations. To overcome this I watched a lot of youtube videos and looked over the web for getting more knowledge.

What specific areas of your project would you like help with?

I'm open to receive any code improvements suggestions, and mainly getting feedback on how to improve the color text transition, in order to achieve the following animation: transition the color from left to right on hover and again from left to right when the mouse leaves the hover area.

Community feedback

@davidkhuu

Posted

I love the hover transition. My only gripe is there appears to be an odd half pixel border on the text when hovered. Otherwise, it looks great!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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