Skip to content
Submitted about 3 years ago

Preview Card || with flexbox and hover-effects

Louise Norrsén•140
@louisenorrsen
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Please give feedback! What did I do good and how can I make it even better?

Please log in to post a comment

Log in with GitHub

Community feedback

  • Boris•110
    @borakb
    1. The image hover overlay and the image have different border-radius
    2. The Ethereum and the Clock icon are not aligned in the middle of their container, to fix this add display: flex and align-items: center to the .price and the .time-left div elements

    If this has helped you I would appreciate if you could mark my feedback as useful! Thank you for reading.

    Marked as helpful
  • Mohamed Fathy•160
    @M0hamedF

    Great job 👍 you made it look nearly perfect to the preview. You can make the transition smoother by adding "transition: 0.3s; or what suits you in sec " by adding it in 1- ".hover:hover" will make it change smoothly to the color. 2- ".hover" will change it back. For more info click on the link "https://www.w3schools.com/css/css3_transitions.asp" Keep up the good work!

    Marked as helpful

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