Used HTML, vanilla CSS. Used flex box in a lot of places.

Hey Ayan! I think I might have some suggestions for your project :

1. Your code should contain at least one main landmark

2. The border-radius: 12px; on the image is too small for the round edges to be properly displayed, try upping that value

3. Your code lacks the hover effects on the name of the NFT, the name of the creator, and on the image itself, browse /design/active-states.jpg

Besides that, the rest is excellent! Hope it helps!

Hi Ayan, how are you?

I really liked the result of your project, but I have some tips that I think you will like:

1- Document should have one main landmark, you could have put all the content inside the main tag click here

2- All page content should be contained by landmarks click here

I noticed that you centered the content using position: absolute;, to improve you could have centered it with flex-box, for example:

I removed the code that is commented out:

.card { /* position: fixed; */ /* top: 50%; */ /* left: 50%; */ /* transform: translate(-50%, -50%); */ }

I added these:

body {
    background-color: var(--mainBG);
    min height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

The rest is great!

Hope it helps...👍