Skip to content
Submitted about 2 months ago

Blog preview card using flexbox and hover effects

P
lawless•130
@djlaw90
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Most proud of nice hover effects, would probably do vertical spacing better next time

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

Vertical spacing issues and issue with card type highlight-- wasn't sure about the best way to implement. I assigned it a width but it may break if the word is longer.

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

better solution for card-type issue

Community feedback

  • P
    andreasdahlgren78•100
    @andreasdahlgren78Posted about 2 months ago

    I like the shadow effect. Could add @media query to fix it for other sizes of screens (mobile devices).

    Easy to read and understand the code, well structured.

    Marked as helpful
    0
  • Ajay Singh Panwar•60
    @AjaySinghPanwarPosted about 2 months ago

    You are doing great!!!

    For the colors and common things like spacing you can use css variables

    :root { --yellow: #f4d04e; --spacing-lg: 24px; }

    Try to replicate the design as close as possible. You are mising border radius on image. Try adding the shadow as well. Thanks

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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