En el siguiente vínculo vas a encontrar el diseño de una web hecho en Adobe XD, en versión desktop y mobile: https://xd.adobe.com/view/f3229a4d-559d-4a23-500f-6c99f584ac0e-8513/ Podés alternar entre la vista interactiva o la vista de especificaciones con los botones de la derecha, para poder ver datos de medidas, tipografías, colores, etc.

El objetivo del ejercicio es maquetar el diseño usando html y css. Cuanto más fiel al diseño sea el resultado mejor. Podés armarlo como te sea más cómodo, si preferís usar sass, less, o incluso algún framework. Siempre aclarando si hace falta hacer alguna instalación o correr algún comando para poder ver el resultado.

• Fidelidad al diseño desktop y mobile
• Que el resultado sea responsive
• Código prolijo y semántico
• Convenciones en nombres de clases (ej BEM)

Cualquier detalle que le quieras agregar es bienvenido, pero opcional, aquí algunas sugerencias:

• Armar un menú desplegable para mobile
• Hacer una funcionalidad de acordeon para los filtros para ocultar/mostrar cada atributo
• Hacer que al seleccionar un atributo de los filtros se muestren solo algunos de los productos
• Agregar un selector o botones arriba a la derecha para cambiar la cantidad de columnas de la grilla de productos entre 2, 3 y 4 en desktop, ó 1 y 2 en mobile.
• Cargar los productos tomando info desde un archivo JSON externo

1. Hacer un fork del repositorio en tu cuenta.
2. Armar el código de la pantalla según el diseño.
3. Hacer push de tus cambios en el fork.
4. Crear un pull request en el repositorio original ([email protected]:blaurenzano/test-maquetado.git).
5. Avisarnos que ya está listo el ejercicio por el mismo medio en que estábamos en contacto y enviar un link al pull request.

1. Descargarte este código inicial como .zip con el botón verde de arriba
2. Armar el código de la pantalla según el diseño.
3. Enviarnos un .zip con el código final por el mismo medio en que estábamos en contacto.