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 card mobile first with Flexbox and relative units

@BarriosPabloOk

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


Hi!!!

I am implementing relative units to all the challenges that I have already done. Let me know your opinion on this one.

Community feedback

Benjamin 130

@Benjoow

Posted

Hi pablo !

I doesn't know inset property, that's pretty cool ! I have a question for you. Why do you use a container for your card ?

Little trick i learned while ago : You can use rgb and hsl for transparency exactly like rgba or hsla.

Have a good day :-)

0

@BarriosPabloOk

Posted

@Benjoow Hello there. Thanks for your comment. How do you handle color alpha with rgb and hsl? Sounds good. I had to use a color translator to handle the alpha.

I used a container to be able to give it a different color than the body has.

I did this challenge again using a main tag. It was advice given to me by the community. See the "relative_units" branch in the repo.

0
Benjamin 130

@Benjoow

Posted

@BarriosPabloOk

It's pretty simple. You just to use rgb like rgba like this : rgb(100, 100, 100, 0.5). It's work without zero on alpha but i prefer to use that, it's more simple to read for me :-).

I work with container but only for my website section. I haven't yet discovered a use case to embetting container inside my card component.

Marked as helpful

0

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