NFT card using HTML, SASS and flexbox.

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.

👾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!

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.