Instrucciones de Implementación

Bienvenidos a su primer reto, para cumplirlo deberán seguir lo siguiente:

1. Ver el video de explicación de reto.

2. Tienen los siguientes recursos: Entregamos el HTML con las imágenes y títulos a usar(assets), css básico y js con la estructura que deben seguir*
   
   * Acá les damos una estructura y una guía de cómo deben hacerlo sientanse libres de cambiar el código en donde necesiten para llegar al resultado final.

3. Deberán completar el css y el js para que el reto funcione.

Resultado: El reto debe ser igual al que visualizan en el video, sean detallistas y miren las transiciones que tienen tanto las imágenes como los títulos


¡HINTS!

CSS

 - Fundamental el uso de flex, position y transition -

Deberán crear las siguientes clases:

.panel

.panel h3

.panel.active

.panel.active h3

deberán usar un media querie para visualizar solo 3 elementos cuando realizamos el responsive en pantallas menores a 480px (averiguar el uso de nth-of-type y display para esta opción)

JS

 - Validar paso a paso hacer uso de console.log() y la herramienta de desarrollador - 

Revisar cual es la mejor opción para seleccionar (ver archivo fuente script.js)

Crear un recorrido con forech usando una función flecha (esto hace que se cree el efecto de expansión)

Crear una función que retire el modo activo (Esta función les servirá para crear el efecto completo)