NFT Card Component Solution

Hello @robinjmm,

I have some notes for you:

• use <a> element instead of span for .nft-card__creator-name. It's more Semantic and on click this name this may lead to another page.

• you can just use <img> instead of .nft-card__eth::before and .nft-card__timer::before. the current way is totally right.

• instead using both ::after and ::before pseudo elements you can use one of them as the styles below and everything will work fine:

.nft-card__bg-layer::after {
        content: url(./images/icon-view.svg);
        position: absolute;
        background-color: rgb(0 255 247 / 45%);
        width: 100%;
        height: 100%;
        opacity: 0;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
       border-radius: 1rem;
        overflow: hidden;
        transition: .3s ease;
	}

.nft-card__bg-layer:hover::after {
        opacity: 1;
	}

• use transition property for smoother hover effect for both .nft-card__heading and .nft-card__creator-name

• you can see My solution for this challenge it may be helpful for you..!

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀

Looks great! Love your code, I learned a few things from it.