NFT Preview Card Component

👾 Hello Lukas, congratulations for you solution!

Your solution seems pretty good, you've done almost everything, I'll list you some few details to adjust, but note that the hard work is already done.

1.The container size is a little bit too big in comparison to the design files, you've used max-width: 500px and this card size is max-width: 350px;

2.This is a tiny tiny tiny(but important detail), look the section with the ethereum price / days left, the icon and the text are not aligned vertically, you can see that if you look the alignment of the watch icon. To fix that you've to add to the <li> some flex properties in order to align them, see the code below:

li { display: flex; align-items: center; justify-content: center; }

3.Super responsive elements, if you want to give a final touch to your card component, you can set a media query allowing the price section to change the flex-direction saving space and putting each <li> in different rows. See the code below:

@media (max-width: 280px) {article ul { display: flex; flex-direction: column; }}

👾 I hope it helps you and congrats for you really good done solution!

Hi Lucas, your solution looks really good. There is some gap below the image, which you can see when hover over it, this is beacuse the <img /> is an inline element. You can get rid of that by using display: block on the <img />. Other than that, great effort!