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 preview card component solution

@iamdylanmj

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


I completed challenge, it took me so long to finish this, I tried three times. There were two main difficulties I had to face, I use <p> tags within some <div> element, with other <div> element, so when I use to flexbox to align them center vertically it was hard to deal with paragraph tag, even I use margin-top, marig-bottom rules it did not work, so I had to create the whole project again, the second one is that I used Sass for the first time , it is very easy to use, but the background images did not appeared, it worked well within live server, but as soon as I open it within standalone browser environment, all the background images not loaded. it took me many hours to figure why this is happening, actually it was with path I used for background images, the "url' does not correctly identify the images paths. after I make them correct all the images loads. and also when I try to change the color of eye-icon svg, I realized that it cannot be done, I tried to make the icon white, but I couldn't do it, please guys help me with that, how can we use svg images properly in our websites. Thank you so much

Community feedback

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