Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive and Interactive FAQ Accordion

Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


pt-br:

Eu não consegui fazer uma animação fluída para o conteudo aparecer e desaparescer, alguem tem alguma sugestão?

en:

I couldn't create a fluid animation for the content to appear and disappear, does anyone have any suggestions?

Community feedback

Irwing 200

@Irwing-Dev

Posted

Você pode adicionar uma estilização no elemento "c-faq__response" chamada transition.

Vá para o seu main.css e adicione:

.c-faq__response {
    // Suas estilizações
    transition: all 0.7s;
}

Isso já serve para dar uma animação mais suave ao abrir/fechar os FAQs. você também pode alterar o valor do transition para ficar mais lento ou mais rápido, vai testando e decide qual acha melhor. 👍

PS.: O card não está muito agradável em uma primeira vista, recomendo colocar um box-shadow para dar um aspecto flutuante, tipo assim:

.c-faq__card {
    // Suas estilizações
    box-shadow: 0px 30px 34px rgba(0, 0, 0, 0.116);
}

Espero que isso tenha o ajudado, boa sorte e bons estudos.✨​👋​

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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