Skip to content
Submitted over 2 years ago

NFT Card

Martin Kascak•30
@KAMA-Kasckak-Martin
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Ahmed Bayoumi•6,740
    @Bayoumi-devPosted over 2 years ago

    Hey Martin, Congratulations on completing this challenge... You have accessibility issues that need to fix.

    • Document should have one main landmark, Contain the component with <main>.
    <main>
   <div class="card">
      //...
   </div>
</main>
    • Page should contain a level-one heading, wrap <a class="elink" href="Equilibrium #3429">Equilibrium #3429</a> with <h1>
    <h1><a class="elink" href="Equilibrium #3429">Equilibrium #3429</a></h1>

    You should always have one h1 per page of the document... in this challenge, you will use h1 just to avoid the accessibility issue that appears in the challenge report... but don't use h1 on small components <h1> should represent the main heading for the whole page, and for the best practice use only one <h1> per page.

    • I suggest you center the component on the page with Flexbox, by giving the parent element <body> the following properties:
    body {
   max-width: 1080px;
   margin: auto;
   background-color: hsl(217, 54%, 11%);

   display: flex;      /* <--- Add */
   justify-content: center;
   align-items: center;
   min-height: 100vh;
}

.card {
  //...
  /* margin-top: 25vh;    <--- Remove */
}
    • The active state for the image on the NFT preview card component is not working as recommended on this challenge. To do the active state for the image on the NFT preview card I suggest you wrap the image of the NFT with the img-wrapper element and create another element to make it overlay on the image, it contains the view icon.
    <div class="img-wrapper">
      <img class="image-equilibrium" src="images/image-equilibrium.jpg" alt="Image Equilibrium">
      <div class="overlay"><img src="images/icon-view.svg" alt=""></div>
</div>

    Then add the following styles:

    .img-wrapper {
  width: ...; /*as you want*/
  height: ...; /*as you want*/
  position: relative; /*To flow the child element on it*/
  cursor: pointer;
  overflow: hidden;
}
.img-wrapper .image-equilibrium{
  width: 100%;
  height: 100%;
}
.overlay {
  background-color: hsla(178, 100%, 50%, 0.5);
  display: flex;       /* Center the view icon with flexbox*/            
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.img-wrapper:hover .overlay {
  opacity: 1;
}

    There is another way to do the active state for the image on the NFT preview card by creating pseudo-elements (::after, ::before) to use one as an overlay and other for view-icon.

    Resources

    Hope this is helpful to you... Keep coding👍

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord