Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT Preview Card Solution

@clinto-bean

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow

This was used mostly as practice for two things: semantic HTML and CSS positioning. I was able to create the layout I wanted without using pseudo-elements which I had been doing in the past.

One thing I did not attempt with this challenge was to use Javascript to impact active states. Since I wanted to focus mostly on honing my CSS skills, this inherently left me at a disadvantage when it comes to getting more Javascript practice. One thing that I struggled with for the CSS portion of the project was creating the overlay on the main card image. I was not able to get it color-perfect because I used opacity properties on the element behind it (which became above it on hover), thus was unable to set the opacity in the child image (eyeball) even using the !important declaration.

For this I used the CSS documentation on MDN.

Community feedback

@lucasrgt

Posted

Your solution looks very good, but you may improve in some points:

The shadow of the card is very dark, you need to lighten it to become more soft.

.card { background-color: var(--card-bg); padding: 1.5rem; border-radius: 1rem; max-width: 350px; box-shadow: 0rem 0rem 2rem 0rem black; // instead of black, use a lighter color, like a marine blue or so. }

Other point is the alignment of the "eth balance", you need to align it with the text above (start).

The semantic HTML looks nice tho.

Marked as helpful

1

@clinto-bean

Posted

@lucasrgt Thank you for the feedback!

0
Regina 90

@regina-cht

Posted

Hi!!! I think overall your solution is great, I'm not 100% sure I can give you the best solution to the hover opacity problem, but the way I solved it was by creating a variable color in my :root with the cyan in rgba and using that to apply the opacity value.

I hope that helps!!! :)

1

Please log in to post a comment

Log in with GitHub
Discord logo

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