Skip to content
OverviewSolutions
7
Comments
5
Sergio Herrera
@santi19999

All comments

  • Nishant Sawant•70
    @Nishant-afkSubmitted almost 3 years ago

    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

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

    1
    Sergio Herrera•140
    @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 helpful
    1
  • Sergio Herrera•140
    @santi19999Posted almost 3 years ago

    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
    1
  • Sergio Herrera•140
    @santi19999Posted almost 3 years ago

    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í!

    0
  • Sergio Herrera•140
    @santi19999Posted almost 3 years ago

    @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
    0
  • Sergio Herrera•140
    @santi19999Posted almost 3 years ago

    También podría ser otra opción, tienes razón. Gracias por tu aporte, saludos!

    0