NFT Preview Card Component using CSS Flexbox

Hi Nguyen, I took some time to look at your solution and you did a great job!

Also I have some tips for improving your code:

• add main tag and wrap the card for Accessibility
• You can add the effect :hover creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution
• after try to add a little transition on the element with hover effect
• use Flexbox to the div container for center image and span like this:

<div class="flex">
   <img src="images/icon-ethereum.svg" alt="ethereum icon image">
   <p class="eth-quantity"> 0.041 ETH</p>
</div>

• guide for relative units of measurement -> read here

Overall you did well :)

Hope this help and happy coding!

1-> You can use flex or grid for horizontally aligning anything. You can see freecodecamp tutorial = https://www.youtube.com/watch?v=tXIhdp5R7sc for flex box and kevin powell grid =https://www.youtube.com/watch?v=rg7Fvvl3taU. This should cover everything. You should subscribe kevin powell channel, he is consider as king of css by most of developer online. Here is channel=kevin powell, His channel is about everything of css.

2-> Kevin powell has also cover about rem and em. Here is the video=https://www.youtube.com/watch?v=_-aDOAMmDHI and another=https://www.youtube.com/watch?v=N5wpD9Ov_To

3-> No, I have been completing many projects and I also rely on div ( in my opinion). But you should not use unnecessary div

I hope they answered your questions

Congratulation Nice Work Keep it up 😉👍

Used this code want your card in center position :

in body tag Used this CSS Code: body{ display : flex; justify-content: center; align-item: center; }

in Card Design CSS Code used this property: align-self: center;

used this CSS Property in your card to increase and decrease the size of card:

1.In Card design CSS Code Used this:

transform : scale(0.8); this property decrease the size of card. 😉

large size for increase the number of scale & small size for decrease the number of scale

Hey @jesuisbienbien, Now This is what I call a fine job.