Not Found
Not Found
Not Found
Not Found
Not Found
Request failed with status code 502
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT Preview Card w/ HTML & CSS

Mahin 50

@boredmahin

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any suggestion would be helpful

Community feedback

@catherineisonline

Posted

Cool solution!

To improve semantics, make sure to wrap the entire code in the main tag not including header or footer tags. It will help to remove report issues and improve accessibility as well.

IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

Marked as helpful

0

@Ebibeni

Posted

Hi Mahin, Your work looks great and I would like to add a few. You need to make the cursor turn into a pointer on hover. you can do that by adding the code to the hover stage.

Example.

.card__title:hover { color: var(--first-color); cursor: pointer; } .card__images:hover .card__img-overlay { opacity: 1; cursor: pointer; } .card__creator-data span:hover { color: var(--first-color); cursor: pointer; }

IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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