NFT Preview Card Component

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  HEADINGS ⚠️:

  • This solution lacks usage of <h1> so it can cause severe accessibility errors due to lack of level-one headings <h1>

  ---

  • Every site must want only one h1 element identifying and describing the main content of the page.

  ---

  • An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.

  ---

  • So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a sr-only class to hide it from visual users (it will be useful for visually impaired users)

  ---

  • Example: <h1 class="sr-only">NFT preview card component</h1>

  ---

  • If you have any questions or need further clarification, you can always check out my submission for another challenge where i used this technique and feel free to reach out to me.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0

  ---

  

  P

  CJ Cameron•350

  @CJCameron13Posted over 1 year ago

  @0xAbdulKhalid This is very helpful! I sometimes use <h1> headings (and <h2>,<h3>, etc.) but I wasn't quite sure of their primary purpose other than giving a sort template manner of organizing your font sizes. So thank you for clearing that up for me! I will use them from now on.

  0
• 

  imad•3,330

  @imadvvPosted over 1 year ago

  Greeting CJ Cameron!! Congratulations for completing your challenge, 👏👏👏.

  I have made some improvements to your code based on your feedback. Here are the updated HTML and CSS sections:

  html line 18

  <a href="#"id="cube-image" aria-label="cube-image">
  <img  alt="cube-image" src="images/image-equilibrium.jpg">
  </a>
  

  css line 35

  #cube-image {
  display: flex;
  border-radius: 15px;
  margin-bottom: 20px;
  background-color: var(--cyan);
  position: relative;
  justify-content: center;
  align-items: center
  }
  
  #cube-image::after {
  content: url(./images/icon-view.svg);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 200ms ease-in-out, scale 300ms ease-in-out;
  scale: 0;
  }
  
  #cube-image img {
  max-width: 100%;
  display: block;
  opacity: 1;
  border-radius: 10px;
  transition: opacity 200ms ease-in-out;
  }
  
  #cube-image:hover::after {
  opacity: 1;
  scale: 1;
  }
  #cube-image img:hover {
  opacity: .5;
  }
  
  

  I hope these changes help resolve the issue with the cyan overlay display. It's worth mentioning that there are multiple approaches to achieve a hover effect on an image, and your solution looks great! Happy coding!

  Marked as helpful

  0

  ---

  

  P

  CJ Cameron•350

  @CJCameron13Posted over 1 year ago

  @imadbg01 Thank you! I wondered if there was a way to "transform" the image itself instead of trying to superimpose an element on top of it. This is very helpful! I greatly appreciate it.

  1

  

  imad•3,330

  @imadvvPosted over 1 year ago

  @CJCameron13 You're welcome! I'm glad to hear that my response was helpful to you.

  0