Skip to content
Submitted about 2 years ago

HTML CSS BOOTSTRAP

Eliseu Caputo•110
@eliseucaputo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello again!

One more time here I am.

In this card I didn't put the image when move the cursor over the central image (:hover), if someone know how to put that I'm here to learn. furthermore, I'm improving my skills on css, and some things didn't turn out the way I wanted (filter and opacity), but I know I'm going the right way.

Some tips and suggestions are welcome. Thank You!

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Oi de novo Eliseu , tudo bem? Parabéns pelo desafio!

    Acabei de ver sua solução e tenho algumas dicas pra melhorar o código e o design:

    1.Adicione uma transição pra fazer os efeitos de hover ficarem mais suaves entre o estado ativo e inativo. Um bom valor pra esse hover é transition: all ease-in 0.5s.

    2.Você pode criar uma media query pra fazer o conteúdo da section do preço pra cada informação ficar em uma linha diferente quando o card começar a diminuir muito:

    @media (max-width: 350px) {
.eth {
    width: 100%;
    display: flex;
    margin-top: 20px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
}

    3.Pra melhorar a performance em diferentes dispositivos e tipos de tela você pode usar rem e em ao invés de px.

    👋 Espero ter ajudado e continue no foco!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord