Skip to content
Submitted 8 months ago

Blog Preview Card (TailwindCSS)

keltiek•210
@keltiek
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?

Doesn't look as bad as I thought:)

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

Don't know enough about CSS/Flexbox and Tailwind

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

Any suggestions on how I can improve on my solution are welcome. Thank you!

Community feedback

  • Devon Hughes•220
    @DevonHughesCodesPosted 8 months ago

    Hello! @keltiek

    Your solution looks great!

    Just a quick suggestion, I can't see your stylesheet, however, for the active state on the element with the box-shadow there is a very subtle hover effect that's super easy to overlook in the design previews provided.

    Here's a snippet from my stylesheet for reference:

    .container { max-width: 400px; margin-inline: auto; background-color: var(--white); padding: 1.5rem; margin-bottom: 2rem; border: 2px solid var(--black); border-radius: 1rem; box-shadow: 10px 10px 0px var(--black); transition: 0.5s; }

    .container:hover { box-shadow: 15px 15px 0px var(--black); }

    Other than that, great work and Keep it up!

    Marked as helpful
    0
    keltiek•210
    @keltiekPosted 8 months ago

    @DevonHughesCodes Thanks a lot for your feedback! Indeed, I missed it, so I added it now. I'm using Tailwind CSS CDN for simplicity, so everything is done in index.html

    1

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