Skip to content
Submitted over 1 year ago

NFT Preview Card

daniel•80
@retailescapeartist
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

the most difficult thing I found was getting the background to appear over the image when you hover. I had to ask around to get some ideas.

I'm still unsure about how to correctly divide up the sections. I felt that I put a lot of things in here that weren't needed. I will continue to practice these skills.

Any tips on how to separate sections easier is always welcomed.

Everyday is an adventure!

Keep on keepin' on my fellow web devs \o/

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Daniel 🛸•44,810
    @danielmrz-dev

    Hello Daniel!

    Your project looks great!

    You can separate the sections setting display: grid on your div.card and then using gap to separate them. By using gap, you create an equally sized space between all the elements inside a Grid or Flex container. If you do this, you won't need margins to separate the elements.

    One more suggestion:

    • You can replace your div.container with main.container. This won't change anything visually, but it makes your HTML code more semantic. This improves SEO optimization as well as the accessibility of your project.

    I hope it helps!

    Other than that, great job!

    Marked as helpful
  • Adenuga Abubakr•170
    @abubakr01

    You omitted the two icons towards the end of the design. I mean the eth and the number of days lcons. I wouldn't know whether you forgot to add it or you had some issues with the placement.

    But, lemme just say, you could put them in two separate divs, the you use "display:flex" "Align -items:center"

    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