NFT preview card component

Hi, Kalhara Sandaruwan! 👋

About flexbox and grid, in general, you want to use flexbox to handle a one-dimensional layout (column or row). Use grid for two-dimensional layout (column and row).

For example, I would make the card-footer as a flex container instead of a grid container. It's because the layout is a one-dimensional layout (row).

One suggestion I have is to use either hr element or set border-top on the card-footer element to create the line. (It is just a preference)

I hope you find this useful!

👾Hello Kalhara Sandaruwan, congratulations for your new solution!

Here's one tip to improve the card responsiveness improving the pricing section. You can create a media query to save space in the pricing section to make each information in a different row. Here’s the code for this media query.

@media (max-width: 350px) {
.info-bottom {
    display: flex;
    row-gap: 10px;
    flex-direction: column;
}
}

You’ve used <div> to wrap the card container, in this case you need to use <main> since this is the main block of this page.

✌️ I hope this helps you and happy coding!