nft-preview-card-component

Community feedback

• 

  Vinicius Henrique•590

  @viniciusshenri96Posted almost 2 years ago

  Hello how are you? Congratulations on finishing the challenge, it looks like you were unable to center the element when hovering over it, I managed to solve it like this:

  the parent element .nft-image-container you put position: relative, and set the value of top to 0 in the element .nft-image-container .icon-view.

  .nft-image-container {
    cursor: pointer;
    position: relative; // setting the parent element with position: relative
  }
  
  .nft-image-container .icon-view {
    margin-top: 20px;
    border-radius: 1em;
    max-width: 260px;
    max-height: 420px;
    top: 0; // before with a value of 15%
  }
  

  Remembering that you had already defined the .icon-view element as position: absolute, in this part of your code:

  .icon-view {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 7rem;
    opacity: 0;
    background-color: hsla(178, 100%, 50%, 0.49);
    transition: opacity 0.4s ease-in-out;
  }
  

  I advise you to come back later on that same code to refactor it, after you have learned more and practiced a lot doing other projects. I'll be waiting to see your next challenge.

  Marked as helpful

  2

  ---

  

  Sumaj Coronel•90

  @sumajestad44Posted almost 2 years ago

  @viniciusshenri96 Thank you very much for taking a moment to correct me it was very helpful

  2
• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • DO NOT FORGET ⚠️ to check your FEM report (It provides value information), to see what is incorrect and update your code with it. This should be done immediately after submitting your challenge.

  • The section element is being used incorrectly ⚠️ and not needed for this challenge.

  • Every site should ALWAYS have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will serves as the component’s container ⚠️.

  More Info: 📚

  MDN Main Element

  • Avoid skipping heading levels ⚠️. Always start with the h1 (which can only be used once) and you will go down the hierarchy level depending on the heading’s level of importance.

  • The only heading in this component is "Equilibrium #342" ⚠️. Everything should be wrapped in a paragraph element.

  • The “icons” in this component are purely decorative ⚠️. Their alt tag should be left blank to remove them from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • Wrap the inside of the "NFT image", "Equilibrium #3429" and "Jules Wyvern" in an anchor tags ⚠️. The anchor tag will allow users to click on content and have them directed to another part of your site.

  More Info:📚

  MDN The Anchor element

  • The profile image is not decorative ⚠️. The alt tag should not be blank. It should state the person’s full name.

  More Info:📚

  Headshot Alt Text

  • To properly center ✅ your content to your page, you will want to add the following to your body (this method uses CSS Grid):

  body {
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  

  More Info: 📚

  Centering in CSS

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 😈

  Marked as helpful

  0

  ---

  

  Sumaj Coronel•90

  @sumajestad44Posted almost 2 years ago

  @vcarames Thank you very much you just taught me a lot of things I didn't know

  1