NFT card preview component using flexbox

Community feedback

• 

  Dev Rathore•2,600

  @GitHub-dev12345Posted over 2 years ago

  Congratulation to complete the challenge 😊🚀borde My Small Suggestion : bro give the border-radius in your card design CSS Code: like:-

  1. border-radius: 12px;

  Keep it up bro nice Work ❤️👍

  Marked as helpful

  0

  ---

  

  Luis Sitoe•60

  @luissitoePosted over 2 years ago

  @GitHub-dev12345 Thank you.😀

  0
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @luissitoe,

  I have some suggestions regarding your solution:

  • 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 ).

  • the avatar 's alt shouldn't be avatar , you can set to Jules Wyvern.

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

  • the icon-view doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden or role presentation with empty alt. Also ,you don't need an extra div for the overlay , you may use pseudo-elements.

  • You can use an unordered list<ul> to wrap class="card__wrp" and in each <li>, there would be <img > and<p> (to wrap the text ). Then you can use flexbox properties to align them centrally.

  • Alt text for the profile image shouldn't be profile. Read more how to write an alt text

  • I recommend to use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.

  • Never use px for font size.

  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

  0

  ---

  

  Luis Sitoe•60

  @luissitoePosted over 2 years ago

  @PhoenixDev22 Thank you, it helps me alot.😊

  1
• 

  Samarth Mali•760

  @SamarthMaliPosted over 2 years ago

  Nicely Done 🤗

  Marked as helpful

  0

  ---

  

  Luis Sitoe•60

  @luissitoePosted over 2 years ago

  @SamarthMali Thank you 😊

  0
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted over 2 years ago

  hay! Luis Sitoe Good work Keep it up

  Marked as helpful

  0

  ---

  

  Luis Sitoe•60

  @luissitoePosted over 2 years ago

  @Crazimonk Thank you👍

  1