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 using HTML5 and CSS Flexbox

@suzzy-dszy

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?

-Particularly proud of quickly defining the structure and content as required as this was just simple CSS.💯

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

  • First time implementing a local font / font file into my code so had to research how to do it correctly.
  • Getting the smooth transition back to the original colour for the H1 when user stops hovering on the card and how to implement the shadow behind card using box-shadow.
    • To overcome this, after defining the pseudo code to target the H1; .container:hover > H1 {color: #f4d04e;}, simply had to add transition: color 0.5s ease-in-out; to the H1 in my CSS.

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

None in particular but any help / feedback would be greatly appreciated. 👍

Community feedback

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