NFT preview card component solution By Hector Perez

Community feedback

• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

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

  • Wrap the whole content of main with specific tag like main and attribution with footer tag. For HTML structures, refer it with this one Semantics
  • Include the hover state of .card .card__body h2 with the same properties on .card .card__body .card__avatar h3 span:hover rule set
  • Include description with the alt in image tags. Like this line <img src="images/image-equilibrium.jpg" alt="">
  • Change the color value of the hero image hover state into background-color: var(--cyan); and opacity: 0.8; in .card .card__images div .view-img:hover rule set

  Above all, The design looks good. Keep it up! Hope this is helpful!

  Marked as helpful

  1

  ---

  

  HectorPerez•40

  @hectorRperezPosted almost 3 years ago

  @RioCantre Thanks crack, already applying the changes

  1

  

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  @hectorRperez I would appreciate it if you mark it as helpful as well! Cheers!

  1
• 

  Dev Rathore•2,600

  @GitHub-dev12345Posted almost 3 years ago

  You want to reduce the accessibility changed this code:

  <div class="container-wrapper"> to <main class="card"> (main tag)
  <div class="attribution"> to <footer> ( footer tag)
  

  Marked as helpful

  1

  ---

  

  HectorPerez•40

  @hectorRperezPosted almost 3 years ago

  @GitHub-dev12345 Thankss crack!!

  0

  

  Dev Rathore•2,600

  @GitHub-dev12345Posted almost 3 years ago

  @hectorRperez I would appreciate it if you mark it as helpful for you

  Marked as helpful

  1
• 

  Dev Rathore•2,600

  @GitHub-dev12345Posted almost 3 years ago

  used this CSS Property in your card to increase and decrease the size of card:

  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

  Marked as helpful

  1
• 

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  Rethink the html. Way way more important than any of the suggestions above (even though they're all great!) is you are missing interactive elements on this.

  Think about when you use the Web - what does a hover indicate? Interactivity. That means it's essential to use an interactive element for every place where there is a hover style (and adding focus-visible styles too).

  On this I'd use anchor tags.

  2

  ---

  

  HectorPerez•40

  @hectorRperezPosted almost 3 years ago

  @grace-snow I have not been able to understand, will you have a clearer example to be able to understand you? I really want to understand you since I am a newbie and I would like to understand better

  0

  

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  @hectorRperez what isn't clear about the need to use anchor tags everywhere there is a hover style?

  It is essential to use semantically meaningful elements in html. If there's a hover, that content does something or navigates you somewhere. So you have to make it into a link, not a non interactive element that does nothing but has a hover style for mouse users

  Marked as helpful

  1

  

  HectorPerez•40

  @hectorRperezPosted almost 3 years ago

  @grace-snow Forgive me, I did not understand the context of what you wanted to tell me. Thanks for taking the time to make it more clear.

  0
• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted almost 3 years ago

  Your solution looks so great keep coding keep growing👍

  1