Submitted 21 days ago

CSS

radfx-2•30

@radfx-2

A solution to the NFT preview card component challenge

Preview Code

Code

Please log in to post a comment

Community feedback

beowulf1958•1,890
@beowulf1958
Posted 21 days ago
Congratulations on completing this challenge. Are you aware that your webpage is missing a <title> in the <head> section? Titles are important for search engines to find your page.

Many on this website struggle with the overlay. I love that you used pseudo-elements to do the overlay. However, there is an easier way.
```
.nft-card .image:hover:before {
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    /* background-color: hsla(178, 100%, 50%, 0.519); */
    background: no-repeat hsla(178, 100%, 50%, 0.519) url(./images/icon-view.svg) center;
    cursor: pointer;
    z-index: 9999;
    border-radius: 10px;
}
```
Now you can delete all the styles .nft-card .image:hover:after {}

Did you know the background attributes can be combined in a short-cut background rule. This article explains everything.

Everything looks great on the page and it is fully responsive. Love the box shadow.

Hope this helps. Keep on coding!

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord