Design comparison
Solution retrospective
Please review my solution for FAQ-Accordion and answer my queries:
- 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).
- 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
- @santi19999Posted almost 3 years ago
@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 helpful1
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