@santi19999
@Nishant-afk
Submitted
Please review my solution for FAQ-Accordion and answer my queries:
@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
@hmassareli
Submitted
@santi19999
Posted
Hola amigo, está muy bueno el resultado que obtuviste. Mas allá que tienes algunos errores en el código, está bastante logrado.
Los errores puntualmente son:
1- Tienes ID repetidos, debes cambiarlos ya que deben ser únicos los ID. 2- Para el error de las imagenes debes agregarle el ALT, con algo referio a la imagen. 3- El enlace "change" y el "cancel order" te faltó colocarle el hover.
Espero que me haya hecho entender. Saludos
Marked as helpful
@deborapaiva
Submitted
@santi19999
Posted
Hola Débora.!
Está muy bien lograda la solución, lo que te faltó fue los hover al enlace de "change" , al boton "Proceed to Payment" y al enlace "Cancel Order".
Más allá muy bueno.. A seguir así!
@OlafZiorko
Submitted
Hey! How do you like this one?Please leave a comment below and pls check the source code!
@santi19999
Posted
@OlafZiorko Hola! Muy limpio tu diseño y se adapta a los requisitos estipulados por el desafío.
Una cosa muy mínima que me di cuenta, que cuando traduces la página a español en el punto de interrupción de 1300px, el h1 crece de tal manera que empuja todo el contenido hacia abajo, lo que hace que se corte el párrafo que está debajo.
Lo inspeccioné y encontre una posible solución, en (.card__wrapper) aumenté el tamaño de la fila que contiene el h1 y el párrafo, luego disminuí la fila siguiente en el (grid-templates-rows), para que coincidan los tamaños de la tarjeta. O puedes combinarlo con el tamaño de la fuente del h1 también.
Espero que me hayas entendido. Saludos..
Marked as helpful
@santi19999
Submitted
¿Que otra opción aparte de ::before hay? , para hacer el hover de la imagen..Saludos
@santi19999
Posted
También podría ser otra opción, tienes razón. Gracias por tu aporte, saludos!
