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
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Nft-card challenge

@hopzinga22

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


This project was quite difficult but I managed to complete it.

Any criqs will be appreciated.

Community feedback

Manuel Gil 340

@ManuGil22

Posted

Hey there @hopzinga22

Have some feedback for you.

  • Dont use <h4> tags for the price and the time left. Heading levels should increase by one. U should use <h2> or maybe smth else like a <p> or <span>. Also try to fix this on the creator section.
  • When hover on the nft-name and the creators-name change the cursor to pointer and the color of the text. Can do it like this for the nft-name:
h1:hover {
    cursor: pointer;
    color: (#cyan color);
}

And for the creators-name u can add a span around it:

  • html
<h5><span>Creation of </span><span class="creator-name">Jules Wyvern</span></h5>
  • css
.creator-name {
    cursor: pointer;
    color: (#cyan color);
}
  • You can also add this lines to class time-amount in the css file to make the time left move to the right:
.time-amount {
    display: flex;   // this line was already in ur code
    justify-content: space-between;
    width: 90%;
}

There are just details, you have done it fantastic!

Keep pushing and happy coding!

Marked as helpful

0

@hopzinga22

Posted

@ManuGil22 Thank you for your honest critiqs I will improve on those.

0
Manuel Gil 340

@ManuGil22

Posted

@hopzinga22 No worries! There are just details. If you dont understand anything of what I said just let me know!

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