Frontend Mentor - NFT preview card component

Bem-vindo(a)! 👋

Obrigado por conferir este desafio front-end.

Para você visualizar a página basta clicar aqui!

• README in English here!

O desafio

Escolhi utilizar o HTML e CSS, pois queria treinar meus fundamentos e me desafiar com a responsividade.

Aprendi muito com esse projeto, principalmente:

• Uso de medidas responsivas rem e %:

  Para facilitar a medida, eu defini o HTML com font-size: 62.5%, assim a cada 1rem será considerado 10px. Isso facilitou a responsividade em telas 4k. Aumentando a medida do HTML, os elementos rem acompanharam.
  

• Alinhamento dos elementos:

  Aproveitei principalmente o uso de flex, align-items e justify-content.

• Efeitos:

  Esse foi um dos maiores desafios, por conta do hover da imagem. Busquei definir o fundo no ícone de olho. Outras soluções que tentei foram: colorir a imagem, aplicar uma div com background e diminuir a opacidade. Optei pelo fundo no ícone, pois eu ajustaria um elemento só. Os outros efeitos de hover foram bem simples. Adicionei uma leve transição para suavizar a passagem.

• Responsividade:

  Como o projeto já vinha sendo construído usando soluções responsivas, foi necessário fazer pequenos ajustes. Fiz a responsividade com base nos breakpoints do navegador.