Submitted 5 months ago

NFT Preview Card

daniel• 80

@retailescapeartist

Preview site View code

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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/

Community feedback

Daniel 🛸• 38,070

@danielmrz-dev

Posted 5 months ago

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

daniel• 80

@retailescapeartist

Posted 5 months ago

I will put this in my notes to remind me. Thank you for the helpful tip@danielmrz-dev

Adenuga Abubakr• 170

@abubakr01

Posted 5 months ago

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

daniel• 80

@retailescapeartist

Posted 5 months ago

yeah, I forgot the two icons. Appreciate you looking at it and the advice@abubakr01

Please log in to post a comment

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