diff --git a/README.md b/README.md index dc2de51..385e9cd 100644 --- a/README.md +++ b/README.md @@ -1,416 +1,47 @@ -# Data Lovers +# Rick & Morty Lovers -## Índice +![Rick & Morty Lovers](src/images/giphy(4).gif) -- [Preámbulo](#preámbulo) -- [Descripción](#resumen-del-proyecto) -- [Consideraciones generales](#consideraciones-generales) -- [Objetivos de aprendizaje](#objetivos-de-aprendizaje) -- [Parte obligatoria](#parte-obligatoria) -- [Parte opcional](#parte-opcional-hacker-edition) -- [Consideraciones técnicas](#consideraciones-técnicas) -- [Contenido de referencia](#contenido-de-referencia) -- [Checklist](#checklist) +## Presentación ---- +Integrantes del equipo: Mónica Torres Vite y Marcela Vásquez. -## Preámbulo +El reto: crear una web app que permita a lxs usuarixs visualizar, filtrar y operar data sobre la serie Rick & Morty. -Según un [estudio de IBM](https://www-01.ibm.com/common/ssi/cgi-bin/ssialias?htmlfid=WRL12345USEN), -el 90% de la data que existe hoy ha sido creada durante los últimos dos años. -Cada día generamos 2.5 trillones de bytes de datos, una cifra sin precedentes. +## Introducción -No obstante, los datos por sí mismos son de poca utilidad. Para que esas -grandes cantidades de datos se conviertan en **información** fácil de leer para -los usuarios, necesitamos entender y procesar estos datos. Una manera simple de -hacerlo es creando _interfaces_ y _visualizaciones_. +Rick & Morty es una serie animada emitida por primera vez en 2013 para el bloque de programación [Adult Swim](https://es.wikipedia.org/wiki/Adult_Swim) de Cartoon-Network. Posteriormente comenzó a emitirse en Netflix, expandiendo su alcance de audiencia, hasta convertirse en una de las series más populares de los últimos años. -En la siguiente imagen, podrás ver cómo con la data que que se ve en la parte -izquierda se puede construir una interfaz amigable y entendible por el usuario. +Fue a través de Netflix que Rick & Morty llegó a Latinoamérica en octubre de 2016 y desde entonces se ha hecho de una buena base de viewers que crean fansites y grupos en redes sociales para compartir información sobre la serie. -![json-interfaz](https://lh4.googleusercontent.com/Tn-RPXS26pVvOTdUzRT1KVaJ-_QbFs9SpcGLxSPE43fgbHaXtFgMUInuDt7kV41DkT1j8Tt29V0LxQW7SMtC6digOIhfTXSBKdwI08wUwhD3RAqlwy0hjfmhZ2BFe91mtmCSEqysfgk) +El universo de personajes, planetas y dimensiones de Rick & Morty es ENOOOOORME por eso decidimos crear una web app que permita explorar más a fondo este vasto multiverso. -\* Puedes ver el detalle de la data [aquí](https://gist.github.com/lalogf/dd4aa3017a9f8aa8f90dfbca382c4dc9#file-student-json) -y la interfaz construida [aquí](https://app.talento.laboratoria.la/profile/HFOoMpOreBU2psCcjjLg5O2EWEv2). +Realizamos una encuesta que fue respondida por 42 personas. En ella identificamos que lxs viewers son principalmente jóvenes de entre 18 y 25 años aunque la audiencia entre los 26 y 30 años es también considerable. La mayoría son estudiantes y en cuanto a género, están distribuidos entre hombres y mujeres en una proporción cercana al 50-50%. -## Resumen del proyecto +Perfil de usuarix y decisiones de diseño: -En este proyecto **construirás una _página web_ para visualizar un -_conjunto (set) de datos_** que se adecúe a lo que descubras que tu usuario -necesita. +Dada esta investigación llegamos a la conclusión de que los posibles usuarixs de nuestro sitio web serian mas que nada jóvenes en un rango de edad de 18 a 30 años. Que son seguidores de la serie dada su popularidad, temática e irreverencia, es por eso que deseamos reflejar en nuestro sitio web todas estas caracteristicas mediante una interfaz atrevida, interactiva y visualmente atractiva. -Esta vez te proponemos una serie de datos de diferentes _temáticas_ para que -explores y decidas con qué temática te interesa trabajar. Hemos elegido -específicamente estos sets de datos porque creemos que se adecúan bien a esta -etapa de tu aprendizaje. +De acuerdo con esta investigación identificamos que dentro de un app con data sobre la serie a lxs usuarixs les interesa: -Una vez que definas tu área de interés, entiende quién es tu usuario y qué -necesita saber o ver exactamente; luego podrás construir la interfaz que le -ayude a interactuar y entender mejor esos datos. +- Identificar con detalle las características de lxs personajes. +- Saber cuáles y cuántos son los planetas y dimensiones que hasta ahora han aparecido en la serie. +- Ubicar a los personajes por episodios en los que aparecen. -Estos son datos que te proponemos: +En base a esta información hemos creado un prototipo que ha sido testeado con potenciales usuarixs. [Prototipo](https://marvelapp.com/i799b14). +Actualmente estamos desarrollando las funciones que permitan filtrar y manipular la data disponible de acuerdo con los intereses de lxs viewers que respondieron la encuesta. -- [Pokémon](src/data/pokemon/pokemon.json): - En este set encontrarás una lista con los 151 Pokémon de la región de Kanto, - junto con sus respectivas estadísticas usadas en el juego [Pokémon GO](pokemongolive.com). -- [Steam noticias](src/data/steam/steam.json): - Lista noticias relacionadas a los videojuegos presentes en la - plataforma de [Steam](https://store.steampowered.com/). -- [League of Legends - Challenger leaderboard](src/data/lol/lol.json): - Este set de datos muestra la lista de jugadores en una liga del - juego League of Legends (LoL), puedes revisar la documentación de su API en - este [link](https://developer.riotgames.com/api-methods/). -- [Rick and Morty](src/data/rickandmorty/rickandmorty.json). - Este set nos proporciona la lista de los personajes de la serie Rick and - Morty. Puedes revisar la documentación de su API en este [link](https://rickandmortyapi.com). -Como entregable final tendrás una página web que permita **visualizar la data, -filtrarla, ordenarla y hacer algún cálculo agregado**. Como aclaración, -con cálculo agregado nos referimos a distintos cálculos que puedes hacer con -la data que tienes para mostrar información aún más relevante a los usuarios. -Una opción serían cálculos estadísticos como el promedio, el máximo o el mínimo, -por ejemplo, si tenemos una colección que representa a un grupo de personas, -y cada persona está representada como un _objeto_ con una _propiedad_ `altura`, -podríamos elegir calcular la altura promedio en el grupo entre otras cosas. -## Consideraciones generales +![Rick & Morty Lovers](src/images/giphy.gif) -- Este proyecto se debe resolver en duplas. -- El proyecto será entregado subiendo tu código a GitHub (commit/push) y la - interfaz será desplegada usando [GitHub Pages](https://pages.github.com/). -- Tiempo para completarlo: 3 semana divididas en 3 sprints (una entrega del producto funcional al término de cada sprint). -## Objetivos de aprendizaje -El objetivo principal de este proyecto es que aprendas a diseñar y construir una -interfaz web donde se pueda visualizar y manipular data, entendiendo lo que el -usuario necesita. -Dicho en palabras sencillas, aprenderás a: -- Aplicar y profundizar todo lo que aprendiste en el proyecto anterior. -- Pensar en las **necesidades de los usuarios** para crear historias de usuario. -- Escribir y trabajar con **historias de usuario**, sus definiciones de - terminado (_definition of done_) en la organización y planificación de tu - trabajo. -- Definir qué data y de qué forma mostrarla en el producto, basándote en - tu **entendimiento del usuario**. -- Crear productos que sigan los **principios básicos de diseño visual** y - las **heurísticas de usabilidad**. -- Iterar el diseño del producto, basándote en los resultados de los - **tests de usabilidad**. -- Manipular **_arreglos_ (_arrays_) y _objetos_ (_objects_)**. -- **Manipular el DOM** (agregar elementos dinámicamente basados en la data). -- **Manejar eventos del DOM** para permitir interacción con el usuario - (filtrado, ordenado, ...). -- Entender los beneficios y complejidades de **trabajar en equipo** en un - ambiente de incertidumbre. -## Alcances esperados -Los criterios para considerar que has completado este proyecto son: -### Definición del producto -Documenta brevemente tu trabajo en el archivo `README.md` de tu repositorio, -contándonos cómo fue tu proceso de diseño y cómo crees que el producto resuelve -el problema (o problemas) que tiene tu usuario. - -### Historias de usuario - -Una vez que entiendas las necesidades de tu usuario, escribe las [Historias -de Usuario](https://es.wikipedia.org/wiki/Historias_de_usuario) que representen -todo lo que el usuario necesita hacer/ver. Asegúrate de incluir una definición -de terminado (_definition of done_) para cada una. - -### Diseño de la Interfaz de Usuario - -#### Prototipo de baja fidelidad - -Durante tu trabajo deberás haber hecho e iterado sketches (boceto) de tu -solución usando papel y lápiz. Te recomendamos tomar fotos de todas las -iteraciones que realices y las subas a tu repositorio, y las menciones en tu -`README.md`. - -#### Prototipo de alta fidelidad - -Lo siguiente es diseñar tu Interfaz de Usuario (UI por sus siglas en inglés - -_User Interface_). Para eso debes aprender a utilizar alguna herramienta de -diseño visual. Nosotros te recomendamos [Figma](https://www.figma.com/) que es -una herramienta que funciona en el navegador y, además, puedes crear una cuenta -gratis. Sin embargo, eres libre de utilizar otros editores gráficos como -Illustrator, Photoshop, PowerPoint, Keynote, etc. - - -#### Testeos de usabilidad - -Durante el reto deberás realizar tests de usabilidad con distintos usuarios, y -en base a los resultados de esos tests, deberás iterar tus diseños. Cuéntanos -qué problemas de usabilidad detectaste a través de los tests y cómo los -mejoraste en tu propuesta final. - -### Implementación de la Interfaz de Usuario (HTML/CSS/JS) - -Luego de diseñar tu interfaz de usuario deberás trabajar en su implementación. -Como mencionamos, **no** es necesario que construyas la interfaz tal como la -diseñaste. Tendrás un tiempo limitado para hackear, así es que deberás -priorizar. - -Como mínimo, tu implementación debe: - -1. Mostrar la data en una interfaz: puede ser un card, una tabla, una lista, etc. -2. Permitir al usuario filtrar y ordenar la data. -3. Calcular estadísticas de la colección (o subcolección) como media aritmética, - máximo y/o mínimo de algún atributo numérico, o contar cuántas veces aparece - un determinado valor, por ejemplo. -4. Visualizarse sin problemas desde distintos tamaños de pantallas: móviles, - tablets y desktops. - -Es importante que tu interfaz, a pesar de ser una versión mínima de tu ideal, -siga los fundamentos de _visual design_. - -### Pruebas unitarias - -El _boilerplate_ de este proyecto no incluye pruebas unitarias, pero esperamos -que escribas tus propias pruebas unitarias para las funciones encargadas de -_procesar_, _filtrar_ y _ordenar_ la data, así como _calcular_ estadísticas. -Para ello te recomendamos implementar las siguientes funciones en el archivo -`src/data.js`: - -- `filterData(data, condition)`: esta función `filter` o filtrar recibiría la - data, y nos retornaría aquellos datos que sí cumplan con la condición. - -- `sortData(data, sortBy, sortOrder)`: esta función `sort` u ordenar - recibe tres parámetros. - El primer parámetro, `data`, nos entrega los datos. - El segundo parámetro, `sortBy`, nos dice con respecto a cuál de los campos de - la data se quiere ordenar. - El tercer parámetro, `sortOrder`, indica si se quiere ordenar de manera - ascendente o descendente. - -- `computeStats(data)`: la función `compute` o calcular, nos permitirá hacer - cálculos estadísticos básicos para ser mostrados de acuerdo a la data - proporcionada. - -Estas son propuestas de funciones que podrías implementar. - -El archivo `src/data.js` debe tener una cobertura del 70% de _statements_ -(_sentencias_), _functions_ (_funciones_), _lines_ (_líneas_), y _branches_ -(_ramas_). - -**Estas funciones deben ser [_puras_](https://medium.com/laboratoria-developers/introducci%C3%B3n-a-la-programaci%C3%B3n-funcional-en-javascript-parte-2-funciones-puras-b99e08c2895d) -e independientes del DOM**. Estas funciones serán después usadas desde el archivo -`src/main.js`, al cargar la página, y cada vez que el usuario interactúe (click, -filtrado, ordenado, ...). - -## Hacker edition - -Features/características extra sugeridas: - -- En lugar de consumir la data estática brindada en este repositorio, puedes - consumir la data de forma dinámica, cargando un archivo JSON por medio de - `fetch`. La carpeta `src/data` contiene una versión `.js` y una `.json` - de cada set datos. -- Agregarle a tu interfaz de usuario implementada visualizaciones gráficas. Para - ello te recomendamos explorar librerías de gráficas como [Chart.js](https://www.chartjs.org/) - o [Google Charts](https://developers.google.com/chart/). - - -## Consideraciones técnicas - -La lógica del proyecto debe estar implementada completamente en JavaScript -(ES6), HTML y CSS. En este proyecto NO está permitido usar librerías o -frameworks, solo [vanilla JavaScript](https://medium.com/laboratoria-how-to/vanillajs-vs-jquery-31e623bbd46e), -con la excepción de librerías para hacer gráficas (charts); ver -[_Hacker Edition_](#parte-opcional-hacker-edition) más arriba. - -No se debe utilizar la _pseudo-variable_ `this`. - -El _boilerplate_ contiene una estructura de archivos como punto de partida así -como toda la configuración de dependencias: - -```text -. -├── package.json -├── README.md -├── src -│   ├── data -│   │   ├── injuries -│   │   │   ├── injuries.js -│   │   │   └── injuries.json -│   │   ├── lol -│   │   │   ├── lol.js -│   │   │   └── lol.json -│   │   ├── pokemon -│   │   │   ├── pokemon.js -│   │   │   └── pokemon.json -│   │   ├── steam -│   │   │   ├── steam.js -│   │   │   └── steam.json -│   │   └── worldbank -│   │   ├── worldbank.js -│   │   └── worldbank.json -│   ├── data.js -│   ├── index.html -│   ├── main.js -│   └── style.css -└── test - └── data.spec.js - -8 directories, 17 files -``` - -### `src/index.html` - -Al igual que en el proyecto anterior, existe un archivo `index.html`. Como ya -sabrás, acá va la página que se mostrará al usuario. También nos sirve para -indicar qué scripts se usarán y unir todo lo que hemos hecho. - -En este archivo encontrarás una serie de _etiquetas_ (_tags_) ` -``` - -Y ahora tendríamos la variable global `WORLDBANK` disponible en nuestros otros -scripts (como `src/data.js` o `src/main.js`). - -### `src/main.js` - -Recomendamos usar `src/main.js` para todo tu código que tenga que ver con -mostrar los datos en la pantalla. Con esto nos referimos básicamente a la -interacción con el DOM. Operaciones como creación de nodos, registro de -manejadores de eventos (_event listeners_ o _event handlers_), .... - -Esta no es la única forma de dividir tu código, puedes usar más archivos y -carpetas, siempre y cuando la estructura sea clara para tus compañeras. - -### `src/data.js` - -El corazón de este proyecto es la manipulación de datos a través de arreglos y -objetos. La idea de este archivo es contener toda la funcionalidad -que corresponda a obtener, procesar y manipular datos. - -En este archivo esperamos que implementes las funciones detalladas en la sección -de [_Pruebas Unitarias_](#pruebas-unitarias). - -### `src/data` - -En esta carpeta están los datos de las diferentes fuentes. Encontrarás una -carpeta por cada fuente, y dentro de cada carpeta dos archivos: uno con la -extensión `.js` y otro `.json`. Ambos archivos contienen la misma data; la -diferencia es que el `.js` lo usaremos a través de una etiqueta ` +``` + +Y ahora tendríamos la variable global `WORLDBANK` disponible en nuestros otros +scripts (como `src/data.js` o `src/main.js`). + +### `src/main.js` + +Recomendamos usar `src/main.js` para todo tu código que tenga que ver con +mostrar los datos en la pantalla. Con esto nos referimos básicamente a la +interacción con el DOM. Operaciones como creación de nodos, registro de +manejadores de eventos (_event listeners_ o _event handlers_), .... + +Esta no es la única forma de dividir tu código, puedes usar más archivos y +carpetas, siempre y cuando la estructura sea clara para tus compañeras. + +### `src/data.js` + +El corazón de este proyecto es la manipulación de datos a través de arreglos y +objetos. La idea de este archivo es contener toda la funcionalidad +que corresponda a obtener, procesar y manipular datos. + +En este archivo esperamos que implementes las funciones detalladas en la sección +de [_Pruebas Unitarias_](#pruebas-unitarias). + +### `src/data` + +En esta carpeta están los datos de las diferentes fuentes. Encontrarás una +carpeta por cada fuente, y dentro de cada carpeta dos archivos: uno con la +extensión `.js` y otro `.json`. Ambos archivos contienen la misma data; la +diferencia es que el `.js` lo usaremos a través de una etiqueta ` + + diff --git a/src/main.js b/src/main.js index e69de29..6e020da 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,120 @@ +const buttonReinicio = document.getElementById("button-reinicio"); +const buttonPersonajes = document.getElementById("button-personajes"); +const buttonPlanetas = document.getElementById("button-planetas"); +const buttonExplorar = document.getElementById("button-explorar"); +const buttonAyuda = document.getElementById("button-ayuda"); +const buttonFilter = document.getElementById("input-filter-personajes"); +const screenBienvenida = document.getElementById("pantalla-bienvenida"); +const screenPersonajes = document.getElementById("pantalla-personajes"); +const screenPlanetas = document.getElementById("pantalla-planetas"); +const screenExplorar = document.getElementById("pantalla-explorar"); +const screenAyuda = document.getElementById("pantalla-ayuda"); +//const buttonInicio = document.getElementById("button-inicio"); + +const pantallaBienvenida = () => { + screenBienvenida.classList.remove("disappear"); + screenPersonajes.classList.add("disappear"); + screenPlanetas.classList.add("disappear"); + screenExplorar.classList.add("disappear"); + screenAyuda.classList.add("disappear"); + buttonReinicio.classList.remove("disappear"); + buttonFilter.classList.add("disappear"); +} + +const pantallaPersonajes = () => { + screenBienvenida.classList.add("disappear"); + screenPersonajes.classList.remove("disappear"); + screenPlanetas.classList.add("disappear"); + screenExplorar.classList.add("disappear"); + screenAyuda.classList.add("disappear"); + buttonReinicio.classList.remove("disappear"); + buttonFilter.classList.remove("disappear"); +} + +let printDataPersonajes = (data) => { + let str = ""; + data.forEach(element => { + str += `
+
+
+ +
+
+

${element.name}

+

Especie: ${element.species}

+

Género: ${element.gender}

+

Origen: ${element.origin.name}

+

Estatus: ${element.status}

+
+
+
` + }); + document.getElementById("card-display").innerHTML = str; + } + printDataPersonajes(data); + +let filterData1 = () => { + let filterResult = ""; + let filterValue = buttonFilter.value; + console.log(filterValue); + if (filterValue === "allAlive") { + let filterResult = window.allAlive; + printDataPersonajes(filterResult); + console.log(filterResult); + } else if (filterValue === "allDead") { + let filterResult = window.allDead; + printDataPersonajes(filterResult); + console.log(filterResult); + } else if (filterValue === "allMale") { + let filterResult = window.allMale; + printDataPersonajes(filterResult); + console.log(filterResult); + } else if (filterValue === "allFemale") { + let filterResult = window.allFemale; + printDataPersonajes(filterResult); + console.log(filterResult); + } else if (filterValue === "all") { + let filterResult = printDataPersonajes(); + printDataPersonajes(filterResult); + } + console.log(filterResult); + return filterResult; +} + +const pantallaPlanetas = () => { + screenBienvenida.classList.add("disappear"); + screenPersonajes.classList.add("disappear"); + screenPlanetas.classList.remove("disappear"); + screenExplorar.classList.add("disappear"); + screenAyuda.classList.add("disappear"); + buttonReinicio.classList.remove("disappear"); + buttonFilter.classList.add("disappear"); +} + +const pantallaExplorar = () => { + screenBienvenida.classList.add("disappear"); + screenPersonajes.classList.add("disappear"); + screenPlanetas.classList.add("disappear"); + screenExplorar.classList.remove("disappear"); + screenAyuda.classList.add("disappear"); + buttonReinicio.classList.remove("disappear"); + buttonFilter.classList.add("disappear"); +} + +const pantallaAyuda = () => { + screenBienvenida.classList.add("disappear"); + screenPersonajes.classList.add("disappear"); + screenPlanetas.classList.add("disappear"); + screenExplorar.classList.add("disappear"); + screenAyuda.classList.remove("disappear"); + buttonReinicio.classList.remove("disappear"); + buttonFilter.classList.add("disappear"); +} + +//buttonInicio.addEventListener("click", pantallaBienvenida); +buttonReinicio.addEventListener("click", pantallaBienvenida); +buttonPersonajes.addEventListener("click", pantallaPersonajes); +buttonPlanetas.addEventListener("click", pantallaPlanetas); +buttonExplorar.addEventListener("click", pantallaExplorar); +buttonAyuda.addEventListener("click", pantallaAyuda); +buttonFilter.addEventListener("change", filterData1); \ No newline at end of file diff --git a/src/style.css b/src/style.css index e69de29..22ec86d 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,207 @@ +*{ + box-sizing: border-box; + margin: 0; + padding: 0; + } + +.container{ + max-width: 100%; + margin: 0 auto; + display: flex; + background-color: #222222; + justify-content: center; +} + +.row{ + margin: auto; + width: 100%; + height: auto; + } + +.row:before, .row:after{ + content:""; + display:table; + } + +.row:after{ + clear:both; + } + +[class*= "col-" ] { + float: left; + min-height: 10px; + /* gutters */ + padding: 12px; + } + +/*fórmula=100/12 * num-col */ + +.col-1{width: 8.333333333333332%;} +.col-2{width: 16.666666666666664%;} +.col-3{width: 25%;} +.col-4{width: 33.33333333333333%;} +.col-5{width: 41.66666666666667%;} +.col-6{width: 50%;} +.col-7{width: 58.333333333333336%;} +.col-8{width: 66.66666666666666%;} +.col-9{width: 75%;} +.col-10{width: 83.33333333333334%;} +.col-11{width: 91.66666666666666%;} +.col-12{width: 100%;} + +@media all and (max-width: 450px){ + [class*= "col-"]{ + width: 100vh; + } + } + +.disappear { + display: none; +} + +header { + display: flex; + flex-direction: row; + width: 100%; + position: fixed; + top: 0; + justify-content: center; + background-image: url(images/background-stars.jpeg); + margin: 0; + padding: 0; +} + + +@media screen and(min-width 400px){ + .header { + width:100px; + margin: 0; + padding: 0; + } +} + +footer { + display: flex; + width: 100%; + height: auto; + position: fixed; + justify-content: center; + margin: 0 auto; + bottom: 0; + background-color: black; + color: whitesmoke; +} + +section { + margin: 0; + padding: 0; +} + +#pantalla-bienvenida { + justify-content: center; + position: initial; + margin-top: 17vh; + padding: 10vh; + width: 100%; + height: 100%; + background-image: url(images/background-stars.jpeg); +} + +#button-reinicio { + justify-content: center; + position: fixed; + bottom: 3vh; +} + +#button-reinicio :hover { + transform: scale(1.1); +} + + +.gif-button :hover { + transform: scale(1.2); +} + +.nombre-secciones { + color: green; + text-align: center; + font-size: 3rem; +} + +#pantalla-personajes { + flex-direction: column; + justify-content: center; +} + +#cards { + display: flex; + background-color: whitesmoke; + border-radius: 1rem; + color: black; + font-size: 1rem; + padding: 1rem 0; + align-content: center; + flex-direction: column; + align-items: center; + margin: 1.5rem 0; + height: 18rem; + width: 15rem; + text-align: center; +} + +#card-display { + justify-content: center; +} + +.card-display { + display: flex; + flex-direction: row; + justify-content: space-around; + height: 80vh; + width: 100%; + overflow: scroll; + background-color: green; + align-content: center; + position: fixed; + /*padding: 0; + margin: 0; + position: relative;*/ +} + +.imagen-personaje { + display: flex; + width: 70%; + margin: 0 auto; +} + +@media only screen and (min-width:400px) { + .imagen-personaje { + width: 20vh; + } + + #cards { + height: 20rem; + width: 20rem; + } + +} + +#filter-personajes { + background-color: green; + position: fixed; +} + +article { + flex-direction: row; + margin: 0; + padding: 17vh 0vh 0vh 0vh; + position: initial; + color: black; + background-color:green; + font-size: 3rem; +} + +.section-header { + padding: 1vh; + flex-wrap: wrap; +} \ No newline at end of file