NFT card using HTML, SASS and flexbox.

Community feedback

• 

  Kawsar Ahmed Fahad•2,660

  @faha1999Posted about 2 years ago

  Hello, Gustavo de Assis G. Reis Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

  • You might want to use semantic tags like the <main> to wrap your code, instead of div. like

  <main class="container">
  </main>
  

  • To fix the level-one heading Accessibility issue follow

  This would help improve accessibility.

  • add the below styles to the body. It will center everything

  body {
      justify-content: center;
      align-items: center;
      display: flex;
      min-height: 100vh;
      flex-direction: column;
     // margin: 60px auto;
  }
  

  • add the active-state of img

  <a class="nft-card-image" href="#">
          <img class="ethereum" src="./images/image-equilibrium.jpg" alt="NFT Equilibrium" />
  </a>
  

  • hover effect

    .ethereum {
      position: relative;
      display: block;
      height: 320px;
      overflow: hidden;
      border-radius: $br-10;
  
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        height: 100%;
        opacity: 0;
        transform: scale(0);
        background-color: transparentize($cyan, 0.5);
        transition: transform 0.4s ease-in-out, opacity 0.3s;
      }
  
      &:hover::before {
        opacity: 1;
        transform: scale(1);
      }
  
      &::after {
        content: url(../images/icon-view.svg);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.2s ease-in 0.1s;
        display: flex;
        justify-content: center;
        align-items: center;
      }
  
      &:hover::after {
        opacity: 1;
      }
    }
  
  

  • Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem

  • this is my solution of this challenge live,repo

  I hope it will work. Happy coding.

  Marked as helpful

  0

  ---

  

  Gustavo de Assis G. Reis•90

  @gustavoagoncalvesPosted about 2 years ago

  Thanks for the feedback @faha1999 and I'll later redo the code for that with your tips. It was a cool way to complete that by the way.

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @gustavoagoncalves, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  Here's how you can add the hover effect:

  Container needed to position the overlay. Adjust the width as needed

  .container {
    position: relative;
    width: 100%;
    max-width: 340px;
  }
  

  Make the image to responsive

  .image {
    width: 100%;
    height: auto;
  }
  

  The overlay effect (full height and width) - lays on top of the container and over the image

  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-color: red;
  }
  

  When you mouse over the container, fade in the overlay icon

  .container:hover .overlay {
    opacity: 1;
  }
  

  The icon inside the overlay is positioned in the middle vertically and horizontally .icon { color: white; font-size: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; }

  When you move the mouse over the icon, change color

  .icon-eye:hover {
    color:  hsl(178, 100%, 50%, 0.5);;
  }
  

  👨‍💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/nft-preview-card-vanilla-css-custom-design-and-hover-effects-b8D1k9PDmX

  ✌️ I hope this helps you and happy coding!

  0
• 

  Azhar•600

  @azhar1038Posted about 2 years ago

  Hi @gustavoagoncalves,

  May I know why you didn't uploaded compiled css because for the live site you need css?

  It makes it difficult to give feedback because not everybody will clone the repo to check.

  0

  ---

  

  Gustavo de Assis G. Reis•90

  @gustavoagoncalvesPosted about 2 years ago

  Thanks for the feedback @azhar1038. As I said, I was just testing my sass skills and for that I needed to upload this challenge without the compiled css to know if the sass code would work normally in someone else's environment. It was a risk, I know, like you said, not everybody would clone the repo, but with our friend @faha1999 I could see that will work on anyone's machines.

  0