NFT card component using HTML, CSS and Flexbox

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @gdcristea,

  Congratulation on completing another frontend mentor challenge.

  I have some suggestions regarding your solution:

  • Anything with a hover style in design means it's interactive. you need to add an interactive element<a> around the image , Equilibrium #3429 and Jules Wyvern .

  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in( icon-view, icon-ethereum, icon-clock ).

  • There are so many ways to add the hover effect on the image , The one I would use pseudo-elements to change the teal bg color to a hsla. Then opacity can be changed from 0 to 1 on the pseudo element on hover as there is no reason to have the extra clutter in the html.

  • The avatar's alt should not be a picture of the creator of this cardit's meaningless , you can use Jules Wyvern. Read more how to write an alt text

  • the link should be wrapping the main image and either have Sr-only text, an aria-label or alt text that says where that link takes you.

  • You can use <ul> to wrap class="card_account" and in each <li> there would be <img> and <p>.

  <ul claa="card_account">
         <li>
            <img class="icon" src="images/icon-ethereum.svg" alt="" aria-hidden= "true" />
            <p class="accent ">0.041 ETH</p>       
       </li>
       <li>
            <img class="icon" src="images/icon-clock.svg" alt=""  aria-hidden="true"/>
            <p class="time" >3 days left</p>
       </li>
  </ul>
  
  

  You might have a look at my solution , to see how I did the hover effect on the image , it might my helps.

  Overall , your solution is good. Hopefully this feedback helps.

  Marked as helpful

  1

  ---

  

  Daniel Cristea•200

  @gdcristeaPosted over 2 years ago

  Hi @PhoenixDev22,

  Thanks for the feedback given. I will go through it and implement the changes needed.

  Have a nice day,

  1
• 

  Dev Rathore•2,600

  @GitHub-dev12345Posted over 2 years ago

  Nice Coding 🚀🚀👍 Congratulation to complete the challenge ❤️👍 My small suggestion : 1.In Card design CSS Code Used this:

  transform : scale(0.8); this property decrease the size of card. 😉

  large size for increase the number of scale & small size for decrease the number of scale

  I hope you find this helpful

  0