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

@rouftarek

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Rio Cantre 9,690

@RioCantre

Posted

Hello there! Awesome work with this project. Looking at your solution, I would like to suggest the following for you…

  • Import the attribution style in CSS file and remove the style tag
  • Try removing the div wrapping the figure tag to remove the excess height in the hover state of the hero image
<div>
        <figure>        
               <img class="hero-img" src="./images/image-equilibrium.jpg" alt="">
        </figure>
  </div>
  • Include description with the alt in image tags. Like this line <img src="./images/icon-ethereum.svg" alt="">
  • Try increasing the font size of h1 into 2rem
  • Try not to wrap the attribution with section, instead footer tag is suitable
    <footer class="attribution">
       .....
    </footer>
  • Add padding: 1rem; in the attribution rule set

Above all, the design is well implemented. Keep up the good work!

Marked as helpful

1

@rouftarek

Posted

@RioCantre Thank you so much. This is very helpful and I really appreciate 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