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 component

@htiasha

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


Could not add the author section and the <hr> didn't work :(

Community feedback

Toluwaa 1,040

@Toluwaa-o

Posted

Hello, instead of using a <hr>, you can wrap the 'eth' div and 'days' div in one div, and use a border-bottom on that. It has the same effect. Something like this:

<div class="stats"> <div class="eth"> <img src="images/icon-ethereum.svg" alt=""> <p>0.041 ETH</p> </div> <div class="days"> <img src="images/icon-clock.svg" alt=""> <p>3 days left</p> </div> </div>

/* css */ .stats { border-bottom: 1px solid gray; }

And concerning adding the author, i would suggest creating a div tag for the bottom and put the author img and the other details in it. Something like this:

<div class="author-details"> <img src="" alt="Author"> <p>Creation of <span>Jules Wyvern</span></p> </div>

I hope this is helpful. Let me know if you have any other questions.

Marked as helpful

0

@aykutminikli

Posted

I checked your code and saw that your hr is in your div with flex class. Put hr after that div ends and you can continue after that.

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