NFT Preview Card Component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @chiamaka-ugwu,

  I have some suggestions regarding your solution:

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

  • 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 image . It's meaningless , you can set Jules Wyvern to it. And for the equilibrium image should be descriptive.

  • Read more how to write an alt text

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

  • 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 an unordered list<ul> to wrap class="eth-time-bar" and in each <li>, there would be <img > and<p> .

  • <p>Creation of <a href="#" class="">Jules Wyvern</a></p>

  • You can use<figure >or <ficaption> for `class="credits".

  • min-height: 100vh; to the body using vh (viewport height) units to allow the body to set a minimum height value based upon the full height of the viewport. This also allows the body to to grow taller if the content outgrows the visible page.

  • Using percentage for the width , it's not a good way . Using percentages % for width can cause a lot of problem , consider using max-width to the card. That will let it shrink

  • You should 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

  ---

  

  Chiamaka Mary-Anne Ugwu•120

  @chiamaka-ugwuPosted over 2 years ago

  @PhoenixDev22 Thank you so much!

  1
• 

  Rio Cantre•9,690

  @RioCantrePosted over 2 years ago

  Hello there! Nice job in completing this project. Regarding your solution, I would like to recommend the following for you…

  • Adjust the width in the main rule set into width: 320px;.
  • Adjust the margin into margin: 1.3rem; in section rule set
  • Add background-position: center; in .image-container, set the height to height: 280px;.
  • Set the color for the body text into color: hsla(215, 51%, 70%, 1);
  • Remove main rule set with width:90%; in the media query

  Above all, the project is done well. Keep up the good work! Cheers!

  Marked as helpful

  0

  ---

  

  Chiamaka Mary-Anne Ugwu•120

  @chiamaka-ugwuPosted over 2 years ago

  @RioCantre Thank you so much!

  0