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

FAQ-Accordion-card(JS, HTML, CSS)

@Nishant-afk

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Please review my solution for FAQ-Accordion and answer my queries:

  1. I have added the arrow as background image on button, so i cannot figure out how to rotate it on click(transform rotates the text inside button too).
  2. A general question if you will see my style.css file, i have been very specific about selector like: ---> body .container .img_container{} is this a right approach/habit or writing ---> .img_container{} is enough

Community feedback

@santi19999

Posted

@Nishant-afk Hola amigo, luego de algunas pruebas pude detectar los siguientes errores:

1-El color de fondo del body en la versión de escritorio se corta y queda una parte en blanco. cambia el height:100vh;

2-El box(cubo), debes posicionarlo correctamente en la versión de desktop.

3-Sugerencia, puedes utilizar picture e indicar por ejemplo que para el viewport menor a 1000px, se utilice la ilustraciónde móvil (illustration-woman-online-mobile.svg) y cuando sea mayor a eso, utilice la ilustración de desktop (illustration-woman-online-desktop.svg). ( Te dejé el código en tu proyecto de GitHub)

3- Utiliza: img::after{ transform:rotate(180deg); }

4- Utiliza FlexBox para centrar todo el accordion. Deberás crear un contenedor padre para todo el accordion.

5- Para llevar un paso más allá el desafío, podrías agregarle una transición al accordion al abrirse cada pregunta.Con css y js no es muy complicado lograrlo.

Más allá de eso, me gustó el resultado que obtuviste. Se entiende la idea y te faltó muy poco para lograrlo al 100%. Espero que me hayas entendido, saludos!

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