HTML and Css only

Oi Tathiany tudo bem? Parabéns pelo seu desafio!

Dei uma olhada na sua solução aqui e a primeira coisa que notei é que imagem do NFT fica distorcendo quando o container começa a diminuir e a imagem tenta acompanhá-lo. O jeito de resolver o problema com a imagem é você retirar a propriedade height note que poucas vezes você vai ter que declarar a altura de algum elemento, geralmente a altura é herdada pelo elemento pai e a imagem pega 100% da largura, quando você declara display: block; por exemplo. Nesse caso se você declarar a altura com height a imagem vai tentar manter a altura fixa mas vai perder a proporção quando começar a escalar, então você declarando o max-width: 100% do container a altura já vem em automático.

Olha o código abaixo corrijido:

.cube__image {
    /* display: block; */
    position: relative;
    display: inline-block;
    justify-content: center;
    align-items: center;
    /* min-height: 250px; */
    width: 100%;
    border-radius: 10px;
}

Espero ter conseguido explicar bem esse conceito da altura automática.

Keep it up

@tathykanashiro Olá, parabéns por concluir o desafio, tenho algumas dicas pra você, que podem te ajudar:

HTML:

• Use tags mais semânticas para marcar seu conteúdo como <main><header><nav><section><article><footer> leia mais sobre cada um aqui neste site MDN e coloque seu conteúdo principal do HTML dentro da tag <main>, isso evita problemas de ACCESSIBILITY ISSUES aqui no frontend Mentor.

<main>
    <section class="container">
        <div class="card">
            <img class="cube__image" src="./images/image-equilibrium.jpg" alt="Cube image">
            <div class="text">
              <h1>Equilibrium #3429</h1>

              <p>Our Equilibrium collection promotes balance and calm.</p>
            
              <ul class="span">
                  <li class="eth"><img src="./images/icon-ethereum.svg" alt="">0.041 ETH</li>
                  <li class="days"><img src="./images/icon-clock.svg" alt="">3 days left</li>
              </ul>
              <hr>
              <div class="avatar">
                  <img src="./images/image-avatar.png" alt="Avatar">
                  <p>Creation of <span>Jules Wyvern</span></p>
              </div>
            </div>
        </div>
    </section >
</main>

  <footer class="attribution">
        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noopener">Frontend Mentor</a>. 
        Coded by <a href="#">Tathiany Kanashiro</a>.
  </footer>

• Jamais deixe a tag <img> sem o atributo alt, mesmo que o valor dele seja vazio alt="".

  <ul class="span">
        <li class="eth"><img src="./images/icon-ethereum.svg" alt="">0.041 ETH</li>
        <li class="days"><img src="./images/icon-clock.svg" alt="">3 days left</li>
   </ul>

• No footer tem um link com o atributo target="_blank", quando você cria um link para uma página externa, você pode ter problemas de desempenho e segurança, então adicionar o atributo rel="noopener" evita esse problema. leia esse artigo se você tiver mais interesse: Artigo

  <footer class="attribution">
        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noopener">Frontend Mentor</a>. 
        Coded by <a href="#">Tathiany Kanashiro</a>.
  </footer>

CSS:

• Tem essas duas formas que eu sei, que talvez te ajude no efeito :hover:

1º Forma: Com uma div vazia no HTML e usando grid-area

  HTML:
  <div class="cube__image-view">
        <img class="cube__image" src="./images/image-equilibrium.jpg" alt="Cube image">
        <div class="hover"></div> // Criei uma div vazia no HTML
   </div>

   CSS:
.cube__image-view {
  display: grid;
  border-radius: 10px;
  overflow: hidden;
}

.cube__image,
.hover {
  grid-area: 1 / -1;  // elementos na mesma linha, mesma coluna.
}

.hover {
  background: url(../images/icon-view.svg) no-repeat center center, rgba(0, 255, 247, 0.5); // utilizei **center center** para centralizar o ícone
  opacity: 0; // para deixar o elemento transparente na tela
  cursor: pointer;
  z-index: 2;
}

.hover:hover {
  opacity: 1; // mostrando o elemento na tela
}

2° Forma: Com pseudo-element e sem uma div vazia no HTML.

.cube__image-view {
  position: relative;
}

.cube__image-view:hover::after {
  content: "";
  display: block;
  width: 290px;
  height: 290px;
  background: url(../images/icon-view.svg) no-repeat center center,
    rgba(0, 255, 247, 0.5);
  position: absolute;
  top: 0;
  cursor: pointer;
  border-radius: 10px;
}

Testei as duas formas no seu projeto e deu certo.

Espero ter ajudado, continue praticando e evoluindo 🚀.

Hi @tathykanashiro. Let's start with centering the avatar. It's easy, first remove the margin to the .text p

.text p {
    font-size: 16px;
    font-weight: 300;
    opacity: .7;
    color: var(--softBlue);
    line-height: 1.3em;
    margin-bottom: 18px;  <---- remove this
}

And now add this css properties to the avatar div

.avatar {
    display: flex;
    flex-direction: row;
    align-items: center;
}

Hey @tathykanashiro

• Remove width: 100%;, height: 100%; and add min-height: 100vh; in the body element.
• add gap: 14px; in the .avatar class.
• Remove /* margin-bottom: 18px; from the .text p element.
• Remove margin-right: 15px; from the .avatar img element.

you can see any solution for the hover effect.