/nft-card

Minha solução responsiva para o desafio do site Front End Mentor

Primary LanguageCSS

Frontend Mentor - NFT preview card component

Design preview for the NFT preview card component coding challenge

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.