NFT Preview Card Component

Community feedback

• 

  Rio Cantre•9,690

  @RioCantrePosted over 2 years ago

  Hello there! Great work with this one. Regarding the solution you submitted, I think you should know the following notes…

  • Instead of div, alternatively wrap the whole content with semantic tags, for HTML structures, refer it with this one Semantics. Like this line <div class="container"> with main tag and <div class="attribution"> with footer tag. The attribution part can be place within the container
  • Include description with the alt in image tags. Like this line <img src="images/icon-view.svg" alt=""> but it's optional
  • You could wrap this part with section tag...

  <div>
        <h2>Equilibrium #3429</h2>
        <p>Our Equilibrium collection promotes balance and calm.</p>
  
        <ul>
          <li><img src="images/icon-ethereum.svg" alt="">0.041 ETH</li>
          <li><img src="images/icon-clock.svg" alt="">3 days left</li>
        </ul>
      </div>
  
  Into: 
  <section>
        <h2>Equilibrium #3429</h2>
        <p>Our Equilibrium collection promotes balance and calm.</p>
  
        <ul>
          <li><img src="images/icon-ethereum.svg" alt="">0.041 ETH</li>
          <li><img src="images/icon-clock.svg" alt="">3 days left</li>
        </ul>
  </section>
  

  • Remove color: hsl(0, 0%, 100%, 60%); and replace it with color: hsla(215, 51%, 70%, 1); in the body rule set

  Besides that...

  • HTML structure is organized and clean
  • The CSS file is well structure and proper usage in sizing elements
  • Great job with the hover state of the design, specially the hero image
  • The project is responsive and utilized the details based on the original design

  Above all, The project is awesome! Keep it up!

  Marked as helpful

  0