Skip to content
Submitted almost 3 years ago

NFT Preview Card Component

Pamela Herrera•30
@pammelitas
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

I had trouble aligning the icons and the text (ethereum and clock), I don't quite understand how to place them together, I put them inside a div, however I wasn't able to align them as smooth as I'd like. Any positive feedback is greatly appreciated, I'm just getting started.

Community feedback

  • bikeinman•1,080
    @BikeInManPosted almost 3 years ago

    Pamela,

    I too had the same problem. I fixed it with referring to the following example on MDN.

    MDN

    Give it a try. Good Luck.

    Marked as helpful
    0
  • juanmfretes•90
    @juanmfretesPosted almost 3 years ago

    You can use flexbox to make both <div> ("eth" and "time") flex containers and then use "column-gap" to space each icon from the <p>

    Marked as helpful
    0
  • Lty•110
    @LithyiePosted almost 3 years ago

    Hello,

    For the icons, its possible to add them using pseudo-element :before to your <p> in your css.

    This solution make them easier to place and considering those icons are only used for decoration purpose, it makes your html lighter. (others solutions are also viable tho)

    Regards, Lty

    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