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

Plain HTML and CSS solution using flex box

Olmo 30

@olmoceriotti

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


I had some difficult with the opacity of the eye icon in the active state and I didn't know how to make the shadows behind the card look good

Community feedback

Nam HaÏ 820

@Nam-Hai

Posted

On the ETH and time left line : Don't use margin, really don't. Use a flexbox container and give it

flex-direction: row;
justify-content: space-between;

Train yourself to use flexbox, it is a very powerfull tool. It is everywhere. Maybe take a lot to this website which is a nice way to train yourself : https://flexboxfroggy.com/#en

0
Saran 460

@Saran-73

Posted

Hi olmo-To understand about not affecting the opacity of the icon while reducing the background opacity ,take a look at my project or the video by (coder coder) in youtube title"how to make background image transparent in Css" will help.

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