diff --git a/.history/README_20230523131134.md b/.history/README_20230523131134.md new file mode 100644 index 00000000..f9975c76 --- /dev/null +++ b/.history/README_20230523131134.md @@ -0,0 +1,615 @@ +# Data Lovers + +## Índice + +* [1. Preámbulo](#1-preámbulo) +* [2. Resumen del proyecto](#2-resumen-del-proyecto) +* [3. Objetivos de aprendizaje](#3-objetivos-de-aprendizaje) +* [4. Consideraciones generales](#4-consideraciones-generales) +* [5. Criterios de aceptación mínimos del proyecto](#5-criterios-de-aceptación-mínimos-del-proyecto) +* [6. Hacker edition](#6-hacker-edition) +* [7. Consideraciones técnicas](#7-consideraciones-técnicas) +* [8. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias) +* [9. Checklist](#9-checklist) + +*** + +## 1. Preámbulo + +Según [Forbes](https://www.forbes.com/sites/bernardmarr/2018/05/21/how-much-data-do-we-create-every-day-the-mind-blowing-stats-everyone-should-read), +el 90% de la data que existe hoy ha sido creada durante los últimos dos años. +Cada día generamos 2.5 millones de terabytes de datos, una cifra sin +precedentes. + +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_. + +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 las +usuarias, al lado derecho. + +![pokemon-data-to-ui](https://user-images.githubusercontent.com/12631491/218505816-c6d11758-9de4-428f-affb-2a56ea4d68c4.png) + +## 2. Resumen del proyecto + +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. + +Como entregable final tendrás una página web que permita **visualizar la data, +filtrarla, ordenarla y hacer algún cálculo agregado**. Con cálculo agregado +nos referimos a distintos cálculos que puedes hacer con la data para mostrar +información aún más relevante para los usuarios (promedio, el valor máximo +o mínimo, etc). + +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. + +Una vez que definas tu área de interés, buscar entender 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. + +Estos son datos que te proponemos: + +* [Pokémon](src/data/pokemon/pokemon.json): + En este set encontrarás una lista con los 251 Pokémon de la región de Kanto + y Johto, junto con sus respectivas estadísticas usadas en el juego + [Pokémon GO](http://pokemongolive.com). + - [Investigación con jugadores de Pokémon Go](src/data/pokemon/README.md) + +* [League of Legends - Challenger leaderboard](src/data/lol/lol.json): + Este set de datos muestra la lista de campeones en una liga del + juego League of Legends (LoL). + - [Investigación con jugadores de LoL](src/data/lol/README.md) + +* [Rick and Morty](src/data/rickandmorty/rickandmorty.json). + Este set nos proporciona la lista de los personajes de la serie Rick and + Morty. [API Rick and Morty](https://rickandmortyapi.com). + - [Investigación con seguidores de Rick and Morty](src/data/rickandmorty/README.md) + +* [Juegos Olímpicos de Río de Janeiro](src/data/athletes/athletes.json). + Este set nos proporciona la lista de los atletas que ganaron medallas en las + olímpiadas de Río de Janeiro. + - [Investigación con interesados en juegos olímpicos de Río de Janeiro](src/data/athletes/README.md) + +* [Studio Ghibli](src/data/ghibli/ghibli.json). + En este set encontrarás una lista de las animaciones y sus personajes del + [Studio Ghibli](https://ghiblicollection.com/). + - [Investigación con seguidores de las animaciones del Studio Ghibli](src/data/ghibli/README.md) + +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. + +## 3. Objetivos de aprendizaje + +Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo. + +### HTML + +- [ ] **Uso de HTML semántico** + +
Links

+ + * [HTML semántico](https://curriculum.laboratoria.la/es/topics/html/02-html5/02-semantic-html) + * [Semantics - MDN Web Docs Glossary](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML) +

+ +### CSS + +- [ ] **Uso de selectores de CSS** + +
Links

+ + * [Intro a CSS](https://curriculum.laboratoria.la/es/topics/css/01-css/01-intro-css) + * [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors) +

+ +- [ ] **Modelo de caja (box model): borde, margen, padding** + +
Links

+ + * [Box Model & Display](https://curriculum.laboratoria.la/es/topics/css/01-css/02-boxmodel-and-display) + * [The box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) + * [Introduction to the CSS box model - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) + * [CSS display - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display) + * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/) +

+ +- [ ] **Uso de flexbox en CSS** + +
Links

+ + * [A Complete Guide to Flexbox - CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) + * [Flexbox Froggy](https://flexboxfroggy.com/#es) + * [Flexbox - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) +

+ +### Web APIs + +- [ ] **Uso de selectores del DOM** + +
Links

+ + * [Manipulación del DOM](https://curriculum.laboratoria.la/es/topics/browser/02-dom/03-1-dom-methods-selection) + * [Introducción al DOM - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) + * [Localizando elementos DOM usando selectores - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) +

+ +- [ ] **Manejo de eventos del DOM (listeners, propagación, delegación)** + +
Links

+ + * [Introducción a eventos - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Events) + * [EventTarget.addEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener) + * [EventTarget.removeEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/removeEventListener) + * [El objeto Event](https://developer.mozilla.org/es/docs/Web/API/Event) +

+ +- [ ] **Manipulación dinámica del DOM** + +
Links

+ + * [Introducción al DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) + * [Node.appendChild() - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/appendChild) + * [Document.createElement() - MDN](https://developer.mozilla.org/es/docs/Web/API/Document/createElement) + * [Document.createTextNode()](https://developer.mozilla.org/es/docs/Web/API/Document/createTextNode) + * [Element.innerHTML - MDN](https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML) + * [Node.textContent - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/textContent) +

+ +### JavaScript + +- [ ] **Diferenciar entre tipos de datos primitivos y no primitivos** + +- [ ] **Arrays (arreglos)** + +
Links

+ + * [Arreglos](https://curriculum.laboratoria.la/es/topics/javascript/04-arrays) + * [Array - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/) + * [Array.prototype.sort() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) + * [Array.prototype.forEach() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) + * [Array.prototype.map() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map) + * [Array.prototype.filter() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) + * [Array.prototype.reduce() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) +

+ +- [ ] **Objetos (key, value)** + +
Links

+ + * [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/05-objects/01-objects) +

+ +- [ ] **Variables (declaración, asignación, ámbito)** + +
Links

+ + * [Valores, tipos de datos y operadores](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/01-values-variables-and-types) + * [Variables](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/02-variables) +

+ +- [ ] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)** + +
Links

+ + * [Estructuras condicionales y repetitivas](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/01-conditionals-and-loops) + * [Tomando decisiones en tu código — condicionales - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals) +

+ +- [ ] **Uso de bucles/ciclos (while, for, for..of)** + +
Links

+ + * [Bucles (Loops)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/02-loops) + * [Bucles e iteración - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration) +

+ +- [ ] **Funciones (params, args, return)** + +
Links

+ + * [Funciones (control de flujo)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/03-functions) + * [Funciones clásicas](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/01-classic) + * [Arrow Functions](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/02-arrow) + * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions) +

+ +- [ ] **Pruebas unitarias (unit tests)** + +
Links

+ + * [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started) +

+ +- [ ] **Módulos de ECMAScript (ES Modules)** + +
Links

+ + * [import - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import) + * [export - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export) +

+ +- [ ] **Uso de linter (ESLINT)** + +- [ ] **Uso de identificadores descriptivos (Nomenclatura y Semántica)** + +- [ ] **Diferenciar entre expresiones (expressions) y sentencias (statements)** + +### Control de Versiones (Git y GitHub) + +- [ ] **Git: Instalación y configuración** + +- [ ] **Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)** + +- [ ] **Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)** + +- [ ] **GitHub: Creación de cuenta y repos, configuración de llaves SSH** + +- [ ] **GitHub: Despliegue con GitHub Pages** + +
Links

+ + * [Sitio oficial de GitHub Pages](https://pages.github.com/) +

+ +- [ ] **GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)** + +### Centrado en el usuario + +- [ ] **Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro** + +### Diseño de producto + +- [ ] **Crear prototipos de alta fidelidad que incluyan interacciones** + +- [ ] **Seguir los principios básicos de diseño visual** + +### Investigación + +- [ ] **Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad** + +
Links

+ + * [Intro a testeos usabilidad](https://coda.io/@bootcamp-laboratoria/contenido-ux/test-de-usabilidad-15) + * [Pruebas con Usuarios 1 — ¿Qué, cuándo y para qué testeamos?](https://eugeniacasabona.medium.com/pruebas-con-usuarios-1-qu%C3%A9-cu%C3%A1ndo-y-para-qu%C3%A9-testeamos-7c3a89b4b5e7) +

+ +## 4. Consideraciones generales + +* Este proyecto se debe resolver en duplas. +* El rango de tiempo estimado para completar el proyecto es de 3 a 4 Sprints. +* El proyecto será entregado subiendo tu código a GitHub (commit/push) y la + interfaz será desplegada usando [GitHub Pages](https://pages.github.com/). + +## 5. Criterios de aceptación mínimos del proyecto + +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 tus usuarios, escribe las [Historias +de Usuario](https://es.wikipedia.org/wiki/Historias_de_usuario) que representen +todo lo que el usuario necesita hacer/ver. Las **Historias de Usuario** deben +ser el resultado de tu proceso de investigación o _research_ de tus usuarios. + +Asegúrate de incluir la definición de terminado (_definition of done_) y los +Criterios de Aceptación para cada una. + +En la medida de lo posible, termina una historia de usuario antes de pasar +a la siguiente (Cumple con Definición de Terminado + Criterios de Aceptación). + +### Diseño de la Interfaz de Usuario + +#### Prototipo de baja fidelidad + +Durante tu trabajo deberás haber hecho e iterado bocetos (_sketches_) de tu +solución usando papel y lápiz. Te recomendamos tomar fotos de todas las +iteraciones que hagas, que 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. + +El diseño debe representar el _ideal_ de tu solución. Digamos que es lo que +desearías implementar si tuvieras tiempo ilimitado para trabajar. Además, tu +diseño debe seguir los fundamentos de _visual design_. + +#### Testeos de usabilidad + +Durante el reto deberás hacer _tests_ de usabilidad con distintos usuarios, y +en base a los resultados, 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. +**No** es necesario que construyas la interfaz exactamente como la diseñaste. +Tu tiempo de hacking es escaso, así 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 interactuar para obtener la infomación que necesita. +3. Ser _responsive_, es decir, debe visualizarse sin problemas desde distintos + tamaños de pantallas: móviles, tablets y desktops. +4. Que la interfaz siga los fundamentos de _visual design_. + +### Pruebas unitarias + +El _boilerplate_ de este proyecto no incluye Pruebas Unitarias (_tests_), así es +que tendrás que escribirlas tú para las funciones encargadas de _procesar_, +_filtrar_ y _ordenar_ la data, así como _calcular_ estadísticas. + +Tus _pruebas unitarias_ deben dar una cobertura del 70% de _statements_ +(_sentencias_), _functions_ (_funciones_), _lines_ (_líneas_), y _branches_ +(_ramas_) del archivo `src/data.js` que contenga tus funciones y está detallado +en la sección de [Consideraciones técnicas](#srcdatajs). + +## 6. Hacker edition + +Las secciones llamadas _Hacker Edition_ son **opcionales**. Si **terminaste** +con todo lo anterior y te queda tiempo, intenta completarlas. Así podrás +profundizar y/o ejercitar más sobre los objetivos de aprendizaje del proyecto. + +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 + 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/). +* 100% Coverage + +## 7. 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 +[_Parte opcional_](#6-hacker-edition) más arriba. + +El _boilerplate_ contiene una estructura de archivos como punto de partida así +como toda la configuración de dependencias: + +```text +. +├── EXTRA.md +├── README.md +├── package.json +├── src +| ├── data (según con qué data trabajes) +| | ├── lol +| | | ├── lol.js +| | | ├── lol.json +| | | └── README.md +| | ├── pokemon +| | | ├── pokemon.js +| | | ├── pokemon.json +| | | └── README.md +| | └── rickandmorty +| | | ├── rickandmorty.js +| | | ├── rickandmorty.json +| | | └── README.md +| | └── athletes +| | | ├── athletes.js +| | | ├── athletes.json +| | | └── README.md +| | └── ghibli +| | | ├── ghibli.js +| | | ├── ghibli.json +| | | └── README.md +| ├── data.js +| ├── index.html +| ├── main.js +| └── style.css +└── test + └── data.spec.js + +directory: 7 file: 20 +``` + +### `src/index.html` + +Como en el proyecto anterior, existe un archivo `index.html`. Como ya sabes, +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. + +### `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. + +En este archivo encontrarás una serie de _imports_ _comentados_. Para _cargar_ +las diferentes fuentes de datos tendrás que _descomentar_ la línea +correspondiente. + +Por ejemplo, si "descomentamos" la siguiente línea: + +```js +// import data from './data/lol/lol.js'; +``` + +La línea quedaría así: + +```js +import data from './data/lol/lol.js'; +``` + +Y ahora tendríamos la variable `data` disponible en el script `src/main.js`. + +### `src/data.js` + +El corazón de este proyecto es la manipulación de datos a través de arreglos +y objetos. + +Te recomendamos que este archivo contenga toda la funcionalidad que corresponda +a obtener, procesar y manipular datos (tus funciones). Por ejemplo: + +* `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. + +Estos nombres de funciones y de parámetros son solamente referenciales, lo que +decidas depende de tu propia implementación. + +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, ...). + +### `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 ` + + + \ No newline at end of file diff --git a/.history/src/index copy_20230530185522.html b/.history/src/index copy_20230530185522.html new file mode 100644 index 00000000..10b5806e --- /dev/null +++ b/.history/src/index copy_20230530185522.html @@ -0,0 +1,45 @@ + + + + + + Data Lovers + + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+
+
+ +
+ + +
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230530185521.html b/.history/src/index2_20230530185521.html new file mode 100644 index 00000000..10b5806e --- /dev/null +++ b/.history/src/index2_20230530185521.html @@ -0,0 +1,45 @@ + + + + + + Data Lovers + + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+
+
+ +
+ + +
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230530185732.html b/.history/src/index2_20230530185732.html new file mode 100644 index 00000000..95b41604 --- /dev/null +++ b/.history/src/index2_20230530185732.html @@ -0,0 +1,45 @@ + + + + + + Data Lovers + + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+
+
+ +
+ + +
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230530190710.html b/.history/src/index2_20230530190710.html new file mode 100644 index 00000000..65f0a197 --- /dev/null +++ b/.history/src/index2_20230530190710.html @@ -0,0 +1,53 @@ + + + + + + + Peliculas y Colab + + + + +
+

Películas Animadas

+
+ +

+
+ + + + + + The Best +
+
+ + +
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230530191006.html b/.history/src/index2_20230530191006.html new file mode 100644 index 00000000..e2694664 --- /dev/null +++ b/.history/src/index2_20230530191006.html @@ -0,0 +1,57 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Películas Animadas

+
+ +

+
+ + + + + + The Best +
+
+ +
+ +
+ +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230530191214.html b/.history/src/index2_20230530191214.html new file mode 100644 index 00000000..d9934709 --- /dev/null +++ b/.history/src/index2_20230530191214.html @@ -0,0 +1,57 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Películas Animadas

+
+ +

+
+ + + + + + The Best +
+
+ +
+ +
+ +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230530192124.html b/.history/src/index2_20230530192124.html new file mode 100644 index 00000000..e307d840 --- /dev/null +++ b/.history/src/index2_20230530192124.html @@ -0,0 +1,57 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + + The Best +
+
+ +
+ +
+ +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230530193237.html b/.history/src/index2_20230530193237.html new file mode 100644 index 00000000..97fb34b5 --- /dev/null +++ b/.history/src/index2_20230530193237.html @@ -0,0 +1,55 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+ +
+ +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230530193542.html b/.history/src/index2_20230530193542.html new file mode 100644 index 00000000..7568ac1b --- /dev/null +++ b/.history/src/index2_20230530193542.html @@ -0,0 +1,54 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + +
+
+
+ +
+ +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230530193956.html b/.history/src/index2_20230530193956.html new file mode 100644 index 00000000..97fb34b5 --- /dev/null +++ b/.history/src/index2_20230530193956.html @@ -0,0 +1,55 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+ +
+ +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230606125206.html b/.history/src/index2_20230606125206.html new file mode 100644 index 00000000..b09d0118 --- /dev/null +++ b/.history/src/index2_20230606125206.html @@ -0,0 +1,58 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+
+ + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230606153929.html b/.history/src/index2_20230606153929.html new file mode 100644 index 00000000..315a2084 --- /dev/null +++ b/.history/src/index2_20230606153929.html @@ -0,0 +1,58 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+
+ + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230608133722.html b/.history/src/index2_20230608133722.html new file mode 100644 index 00000000..ad9bbcff --- /dev/null +++ b/.history/src/index2_20230608133722.html @@ -0,0 +1,58 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+
+ + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230608133835.html b/.history/src/index2_20230608133835.html new file mode 100644 index 00000000..d250e4e8 --- /dev/null +++ b/.history/src/index2_20230608133835.html @@ -0,0 +1,58 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+
+ + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230608133933.html b/.history/src/index2_20230608133933.html new file mode 100644 index 00000000..4ef6d515 --- /dev/null +++ b/.history/src/index2_20230608133933.html @@ -0,0 +1,58 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+
+ + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230608133953.html b/.history/src/index2_20230608133953.html new file mode 100644 index 00000000..a9e155f1 --- /dev/null +++ b/.history/src/index2_20230608133953.html @@ -0,0 +1,58 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+
+ + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230608134022.html b/.history/src/index2_20230608134022.html new file mode 100644 index 00000000..93d270cf --- /dev/null +++ b/.history/src/index2_20230608134022.html @@ -0,0 +1,58 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+
+ + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230608134235.html b/.history/src/index2_20230608134235.html new file mode 100644 index 00000000..315a2084 --- /dev/null +++ b/.history/src/index2_20230608134235.html @@ -0,0 +1,58 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+
+ + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230609121749.html b/.history/src/index2_20230609121749.html new file mode 100644 index 00000000..3e4dc8f4 --- /dev/null +++ b/.history/src/index2_20230609121749.html @@ -0,0 +1,58 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+
+ + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230613101908.html b/.history/src/index2_20230613101908.html new file mode 100644 index 00000000..98147f2e --- /dev/null +++ b/.history/src/index2_20230613101908.html @@ -0,0 +1,58 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+
+ + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230613103009.html b/.history/src/index2_20230613103009.html new file mode 100644 index 00000000..7c9df8ea --- /dev/null +++ b/.history/src/index2_20230613103009.html @@ -0,0 +1,58 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+
+ + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230619121428.html b/.history/src/index2_20230619121428.html new file mode 100644 index 00000000..6994c218 --- /dev/null +++ b/.history/src/index2_20230619121428.html @@ -0,0 +1,55 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+
+ +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230619121432.html b/.history/src/index2_20230619121432.html new file mode 100644 index 00000000..3917a36d --- /dev/null +++ b/.history/src/index2_20230619121432.html @@ -0,0 +1,55 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+
+ +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230619121523.html b/.history/src/index2_20230619121523.html new file mode 100644 index 00000000..ab7f35e3 --- /dev/null +++ b/.history/src/index2_20230619121523.html @@ -0,0 +1,55 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+
+ +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230619125722.html b/.history/src/index2_20230619125722.html new file mode 100644 index 00000000..e4e311c0 --- /dev/null +++ b/.history/src/index2_20230619125722.html @@ -0,0 +1,55 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+
+ +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230619125742.html b/.history/src/index2_20230619125742.html new file mode 100644 index 00000000..9a447054 --- /dev/null +++ b/.history/src/index2_20230619125742.html @@ -0,0 +1,55 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+
+ +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230619125744.html b/.history/src/index2_20230619125744.html new file mode 100644 index 00000000..67df5a4d --- /dev/null +++ b/.history/src/index2_20230619125744.html @@ -0,0 +1,53 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+
+ +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + \ No newline at end of file diff --git a/.history/src/index2_20230619125941.html b/.history/src/index2_20230619125941.html new file mode 100644 index 00000000..e2e4f7cb --- /dev/null +++ b/.history/src/index2_20230619125941.html @@ -0,0 +1,53 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+
+ +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + \ No newline at end of file diff --git a/.history/src/index2_20230619125951.html b/.history/src/index2_20230619125951.html new file mode 100644 index 00000000..d988eb4b --- /dev/null +++ b/.history/src/index2_20230619125951.html @@ -0,0 +1,53 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+ + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + \ No newline at end of file diff --git a/.history/src/index2_20230619131347.html b/.history/src/index2_20230619131347.html new file mode 100644 index 00000000..acc6fa31 --- /dev/null +++ b/.history/src/index2_20230619131347.html @@ -0,0 +1,55 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+ + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + +
+ \ No newline at end of file diff --git a/.history/src/index2_20230619131526.html b/.history/src/index2_20230619131526.html new file mode 100644 index 00000000..0e0a947b --- /dev/null +++ b/.history/src/index2_20230619131526.html @@ -0,0 +1,55 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+ + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ +
+ + \ No newline at end of file diff --git a/.history/src/index2_20230619131641.html b/.history/src/index2_20230619131641.html new file mode 100644 index 00000000..62db4493 --- /dev/null +++ b/.history/src/index2_20230619131641.html @@ -0,0 +1,55 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+ + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230619131846.html b/.history/src/index2_20230619131846.html new file mode 100644 index 00000000..66cb690f --- /dev/null +++ b/.history/src/index2_20230619131846.html @@ -0,0 +1,55 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+ + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230619131848.html b/.history/src/index2_20230619131848.html new file mode 100644 index 00000000..66cb690f --- /dev/null +++ b/.history/src/index2_20230619131848.html @@ -0,0 +1,55 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+ + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index2_20230619131954.html b/.history/src/index2_20230619131954.html new file mode 100644 index 00000000..240424ed --- /dev/null +++ b/.history/src/index2_20230619131954.html @@ -0,0 +1,55 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+ + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+
+ + + \ No newline at end of file diff --git a/.history/src/index_20230530110239.html b/.history/src/index_20230530110239.html new file mode 100644 index 00000000..e22dd4c7 --- /dev/null +++ b/.history/src/index_20230530110239.html @@ -0,0 +1,23 @@ + + + + + Data Lovers + + + +

Bienvendixs a la páina de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+
+

Studio Ghibli es un estudio japonés de animación, considerado por la crítica especializada y muchos cinéfilos como uno de los mejores estudios de animación del mundo en la actualidad. El estudio es conocido por sus largometrajes animados y también ha producido varios cortometrajes, comerciales de televisión y una película para televisión. Fue fundado el 15 de junio de 1985. +

+ + + + + +
+ + + diff --git a/.history/src/index_20230530121644.html b/.history/src/index_20230530121644.html new file mode 100644 index 00000000..c994bc0c --- /dev/null +++ b/.history/src/index_20230530121644.html @@ -0,0 +1,23 @@ + + + + + Data Lovers + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+
+

Studio Ghibli es un estudio japonés de animación, considerado por la crítica especializada y muchos cinéfilos como uno de los mejores estudios de animación del mundo en la actualidad. El estudio es conocido por sus largometrajes animados y también ha producido varios cortometrajes, comerciales de televisión y una película para televisión. Fue fundado el 15 de junio de 1985. +

+ + + + + +
+ + + diff --git a/.history/src/index_20230530132006.html b/.history/src/index_20230530132006.html new file mode 100644 index 00000000..71a9008e --- /dev/null +++ b/.history/src/index_20230530132006.html @@ -0,0 +1,24 @@ + + + + + Data Lovers + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de

+

Estudios Ghibli

+
+

Studio Ghibli es un estudio japonés de animación, considerado por la crítica especializada y muchos cinéfilos como uno de los mejores estudios de animación del mundo en la actualidad. El estudio es conocido por sus largometrajes animados y también ha producido varios cortometrajes, comerciales de televisión y una película para televisión. Fue fundado el 15 de junio de 1985. +

+ + + + + +
+ + + diff --git a/.history/src/index_20230530132339.html b/.history/src/index_20230530132339.html new file mode 100644 index 00000000..99427988 --- /dev/null +++ b/.history/src/index_20230530132339.html @@ -0,0 +1,23 @@ + + + + + Data Lovers + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+
+

Studio Ghibli es un estudio japonés de animación, considerado por la crítica especializada y muchos cinéfilos como uno de los mejores estudios de animación del mundo en la actualidad. El estudio es conocido por sus largometrajes animados y también ha producido varios cortometrajes, comerciales de televisión y una película para televisión. Fue fundado el 15 de junio de 1985. +

+ + + + + +
+ + + diff --git a/.history/src/index_20230530132646.html b/.history/src/index_20230530132646.html new file mode 100644 index 00000000..08a03c37 --- /dev/null +++ b/.history/src/index_20230530132646.html @@ -0,0 +1,22 @@ + + + + + Data Lovers + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación, considerado por la crítica especializada y muchos cinéfilos como uno de los mejores estudios de animación del mundo en la actualidad. El estudio es conocido por sus largometrajes animados y también ha producido varios cortometrajes, comerciales de televisión y una película para televisión. Fue fundado el 15 de junio de 1985. +

+ + + + + +
+ + + diff --git a/.history/src/index_20230530141524.html b/.history/src/index_20230530141524.html new file mode 100644 index 00000000..eb9e4519 --- /dev/null +++ b/.history/src/index_20230530141524.html @@ -0,0 +1,27 @@ + + + + + Data Lovers + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación, + considerado por la crítica especializada y muchos cinéfilos + como uno de los mejores estudios de animación del mundo en la actualidad. + El estudio es conocido por sus largometrajes animados y también ha + producido varios cortometrajes, comerciales de televisión y + una película para televisión. Fue fundado el 15 de junio de 1985. +

+ + + + + +
+ + + diff --git a/.history/src/index_20230530141812.html b/.history/src/index_20230530141812.html new file mode 100644 index 00000000..c9945227 --- /dev/null +++ b/.history/src/index_20230530141812.html @@ -0,0 +1,27 @@ + + + + + Data Lovers + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,

+

considerado por la crítica especializada y muchos cinéfilos

+

como uno de los mejores estudios de animación del mundo en la actualidad.

+

El estudio es conocido por sus largometrajes animados y también ha

+

producido varios cortometrajes, comerciales de televisión y

+

una película para televisión. Fue fundado el 15 de junio de 1985.

+ + + + + + +
+ + + diff --git a/.history/src/index_20230530142033.html b/.history/src/index_20230530142033.html new file mode 100644 index 00000000..18fc691a --- /dev/null +++ b/.history/src/index_20230530142033.html @@ -0,0 +1,29 @@ + + + + + Data Lovers + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,

+

considerado por la crítica especializada y muchos

+

cinéfilos como uno de los mejores estudios de animación

+

del mundo en la actualidad.

+

El estudio es conocido por sus largometrajes animados

+

y también ha producido varios cortometrajes, comerciales

+

de televisión y una película para televisión.

+

Fue fundado el 15 de junio de 1985.

+ + + + + + +
+ + + diff --git a/.history/src/index_20230530142139.html b/.history/src/index_20230530142139.html new file mode 100644 index 00000000..ffd85780 --- /dev/null +++ b/.history/src/index_20230530142139.html @@ -0,0 +1,29 @@ + + + + + Data Lovers + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,

+

considerado por la crítica especializada y muchos

+

cinéfilos como uno de los mejores estudios de

+

animación del mundo en la actualidad.

+

El estudio es conocido por sus largometrajes animados

+

y también ha producido varios cortometrajes, comerciales

+

de televisión y una película para televisión.

+

Fue fundado el 15 de junio de 1985.

+ + + + + + +
+ + + diff --git a/.history/src/index_20230530142458.html b/.history/src/index_20230530142458.html new file mode 100644 index 00000000..3990660e --- /dev/null +++ b/.history/src/index_20230530142458.html @@ -0,0 +1,29 @@ + + + + + Data Lovers + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+ + + + + + +
+ + + diff --git a/.history/src/index_20230530143658.html b/.history/src/index_20230530143658.html new file mode 100644 index 00000000..9c60ae03 --- /dev/null +++ b/.history/src/index_20230530143658.html @@ -0,0 +1,30 @@ + + + + + Data Lovers + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+ + + + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + diff --git a/.history/src/index_20230530143910.html b/.history/src/index_20230530143910.html new file mode 100644 index 00000000..737dfefa --- /dev/null +++ b/.history/src/index_20230530143910.html @@ -0,0 +1,30 @@ + + + + + Data Lovers + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+
+ + + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + diff --git a/.history/src/index_20230530163810.html b/.history/src/index_20230530163810.html new file mode 100644 index 00000000..71f17a15 --- /dev/null +++ b/.history/src/index_20230530163810.html @@ -0,0 +1,47 @@ + + + + + + Data Lovers + + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+
+ + + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index_20230530163832.html b/.history/src/index_20230530163832.html new file mode 100644 index 00000000..bc0f01ee --- /dev/null +++ b/.history/src/index_20230530163832.html @@ -0,0 +1,45 @@ + + + + + + Data Lovers + + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+
+ + + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index_20230530175211.html b/.history/src/index_20230530175211.html new file mode 100644 index 00000000..d4e7ec1c --- /dev/null +++ b/.history/src/index_20230530175211.html @@ -0,0 +1,45 @@ + + + + + + Data Lovers + + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+
+ + + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index_20230530180318.html b/.history/src/index_20230530180318.html new file mode 100644 index 00000000..843bc2b8 --- /dev/null +++ b/.history/src/index_20230530180318.html @@ -0,0 +1,47 @@ + + + + + + Data Lovers + + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+
+ + + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index_20230530181757.html b/.history/src/index_20230530181757.html new file mode 100644 index 00000000..4f28b715 --- /dev/null +++ b/.history/src/index_20230530181757.html @@ -0,0 +1,45 @@ + + + + + + Data Lovers + + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+
+ + + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index_20230530183014.html b/.history/src/index_20230530183014.html new file mode 100644 index 00000000..483f822f --- /dev/null +++ b/.history/src/index_20230530183014.html @@ -0,0 +1,48 @@ + + + + + + Data Lovers + + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+
+ + + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index_20230530183134.html b/.history/src/index_20230530183134.html new file mode 100644 index 00000000..10b5806e --- /dev/null +++ b/.history/src/index_20230530183134.html @@ -0,0 +1,45 @@ + + + + + + Data Lovers + + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+
+ + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index_20230530185739.html b/.history/src/index_20230530185739.html new file mode 100644 index 00000000..95b41604 --- /dev/null +++ b/.history/src/index_20230530185739.html @@ -0,0 +1,45 @@ + + + + + + Data Lovers + + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+
+ + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index_20230530190545.html b/.history/src/index_20230530190545.html new file mode 100644 index 00000000..3f98f18e --- /dev/null +++ b/.history/src/index_20230530190545.html @@ -0,0 +1,52 @@ + + + + + + Peliculas y colabradores + + + + +
+

Películas Animadas

+
+ +

+
+ + + + + + The Best +
+
+ +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + \ No newline at end of file diff --git a/.history/src/index_20230530190712.html b/.history/src/index_20230530190712.html new file mode 100644 index 00000000..d0d1a742 --- /dev/null +++ b/.history/src/index_20230530190712.html @@ -0,0 +1,46 @@ + + + + + + Data Lovers + + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+
+ + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + + diff --git a/.history/src/index_20230531112859.html b/.history/src/index_20230531112859.html new file mode 100644 index 00000000..61035a19 --- /dev/null +++ b/.history/src/index_20230531112859.html @@ -0,0 +1,48 @@ + + + + + + Data Lovers + + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+
+ + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + + diff --git a/.history/src/index_20230531112937.html b/.history/src/index_20230531112937.html new file mode 100644 index 00000000..be5fd84b --- /dev/null +++ b/.history/src/index_20230531112937.html @@ -0,0 +1,48 @@ + + + + + + Data Lovers + + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+
+ + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + + diff --git a/.history/src/index_20230531113000.html b/.history/src/index_20230531113000.html new file mode 100644 index 00000000..348d2927 --- /dev/null +++ b/.history/src/index_20230531113000.html @@ -0,0 +1,48 @@ + + + + + + Data Lovers + + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+
+ + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + + diff --git a/.history/src/index_20230531113819.html b/.history/src/index_20230531113819.html new file mode 100644 index 00000000..61035a19 --- /dev/null +++ b/.history/src/index_20230531113819.html @@ -0,0 +1,48 @@ + + + + + + Data Lovers + + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+
+ + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + + diff --git a/.history/src/index_20230531113937.html b/.history/src/index_20230531113937.html new file mode 100644 index 00000000..db1a02ed --- /dev/null +++ b/.history/src/index_20230531113937.html @@ -0,0 +1,48 @@ + + + + + + Data Lovers + + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+
+ + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + + diff --git a/.history/src/index_20230601084152.html b/.history/src/index_20230601084152.html new file mode 100644 index 00000000..db1a02ed --- /dev/null +++ b/.history/src/index_20230601084152.html @@ -0,0 +1,48 @@ + + + + + + Data Lovers + + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+
+ + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + + diff --git a/.history/src/index_20230620101039.html b/.history/src/index_20230620101039.html new file mode 100644 index 00000000..25502345 --- /dev/null +++ b/.history/src/index_20230620101039.html @@ -0,0 +1,39 @@ + + + + + + Data Lovers + + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+
+ + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + + diff --git a/.history/src/initial.ghibli/data_20230523131134.js b/.history/src/initial.ghibli/data_20230523131134.js new file mode 100644 index 00000000..6291453d --- /dev/null +++ b/.history/src/initial.ghibli/data_20230523131134.js @@ -0,0 +1,9 @@ +// estas funciones son de ejemplo + +export const example = () => { + return 'example'; +}; + +export const anotherExample = () => { + return 'OMG'; +}; diff --git a/.history/src/initial.ghibli/data_20230530105131.js b/.history/src/initial.ghibli/data_20230530105131.js new file mode 100644 index 00000000..6291453d --- /dev/null +++ b/.history/src/initial.ghibli/data_20230530105131.js @@ -0,0 +1,9 @@ +// estas funciones son de ejemplo + +export const example = () => { + return 'example'; +}; + +export const anotherExample = () => { + return 'OMG'; +}; diff --git a/.history/src/initial.ghibli/data_20230530105702.js b/.history/src/initial.ghibli/data_20230530105702.js new file mode 100644 index 00000000..6291453d --- /dev/null +++ b/.history/src/initial.ghibli/data_20230530105702.js @@ -0,0 +1,9 @@ +// estas funciones son de ejemplo + +export const example = () => { + return 'example'; +}; + +export const anotherExample = () => { + return 'OMG'; +}; diff --git a/.history/src/initial.ghibli/index_20230523131134.html b/.history/src/initial.ghibli/index_20230523131134.html new file mode 100644 index 00000000..5aef81f0 --- /dev/null +++ b/.history/src/initial.ghibli/index_20230523131134.html @@ -0,0 +1,12 @@ + + + + + Data Lovers + + + +
+ + + diff --git a/.history/src/initial.ghibli/index_20230530110138.html b/.history/src/initial.ghibli/index_20230530110138.html new file mode 100644 index 00000000..e22dd4c7 --- /dev/null +++ b/.history/src/initial.ghibli/index_20230530110138.html @@ -0,0 +1,23 @@ + + + + + Data Lovers + + + +

Bienvendixs a la páina de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+
+

Studio Ghibli es un estudio japonés de animación, considerado por la crítica especializada y muchos cinéfilos como uno de los mejores estudios de animación del mundo en la actualidad. El estudio es conocido por sus largometrajes animados y también ha producido varios cortometrajes, comerciales de televisión y una película para televisión. Fue fundado el 15 de junio de 1985. +

+ + + + + +
+ + + diff --git a/.history/src/initial.ghibli/index_20230530110240.html b/.history/src/initial.ghibli/index_20230530110240.html new file mode 100644 index 00000000..e22dd4c7 --- /dev/null +++ b/.history/src/initial.ghibli/index_20230530110240.html @@ -0,0 +1,23 @@ + + + + + Data Lovers + + + +

Bienvendixs a la páina de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+
+

Studio Ghibli es un estudio japonés de animación, considerado por la crítica especializada y muchos cinéfilos como uno de los mejores estudios de animación del mundo en la actualidad. El estudio es conocido por sus largometrajes animados y también ha producido varios cortometrajes, comerciales de televisión y una película para televisión. Fue fundado el 15 de junio de 1985. +

+ + + + + +
+ + + diff --git a/.history/src/initial.ghibli/main_20230523131134.js b/.history/src/initial.ghibli/main_20230523131134.js new file mode 100644 index 00000000..71c59f2d --- /dev/null +++ b/.history/src/initial.ghibli/main_20230523131134.js @@ -0,0 +1,6 @@ +import { example } from './data.js'; +// import data from './data/lol/lol.js'; +import data from './data/pokemon/pokemon.js'; +// import data from './data/rickandmorty/rickandmorty.js'; + +console.log(example, data); diff --git a/.history/src/initial.ghibli/main_20230530113537.js b/.history/src/initial.ghibli/main_20230530113537.js new file mode 100644 index 00000000..fea9db3f --- /dev/null +++ b/.history/src/initial.ghibli/main_20230530113537.js @@ -0,0 +1,6 @@ +import { example } from './data.js'; +// import data from './data/lol/lol.js'; +import data from './data/ghibli/ghibli.js'; +// import data from './data/rickandmorty/rickandmorty.js'; + +console.log(example, data); diff --git a/.history/src/initial.ghibli/main_20230530113645.js b/.history/src/initial.ghibli/main_20230530113645.js new file mode 100644 index 00000000..25ae825e --- /dev/null +++ b/.history/src/initial.ghibli/main_20230530113645.js @@ -0,0 +1,6 @@ +import { example } from './data.js'; +// import data from './data/lol/lol.js'; +import data from './data'; +// import data from './data/rickandmorty/rickandmorty.js'; + +console.log(example, data); diff --git a/.history/src/initial.ghibli/main_20230530113650.js b/.history/src/initial.ghibli/main_20230530113650.js new file mode 100644 index 00000000..5260dde7 --- /dev/null +++ b/.history/src/initial.ghibli/main_20230530113650.js @@ -0,0 +1,6 @@ +import { example } from './data.js'; +// import data from './data/lol/lol.js'; +import data from './data/'; +// import data from './data/rickandmorty/rickandmorty.js'; + +console.log(example, data); diff --git a/.history/src/initial.ghibli/main_20230530113728.js b/.history/src/initial.ghibli/main_20230530113728.js new file mode 100644 index 00000000..68997842 --- /dev/null +++ b/.history/src/initial.ghibli/main_20230530113728.js @@ -0,0 +1,6 @@ +import { example } from './data.js'; +// import data from './data/lol/lol.js'; +import data from '../data/'; +// import data from './data/rickandmorty/rickandmorty.js'; + +console.log(example, data); diff --git a/.history/src/initial.ghibli/main_20230530113746.js b/.history/src/initial.ghibli/main_20230530113746.js new file mode 100644 index 00000000..5260dde7 --- /dev/null +++ b/.history/src/initial.ghibli/main_20230530113746.js @@ -0,0 +1,6 @@ +import { example } from './data.js'; +// import data from './data/lol/lol.js'; +import data from './data/'; +// import data from './data/rickandmorty/rickandmorty.js'; + +console.log(example, data); diff --git a/.history/src/initial.ghibli/main_20230530113750.js b/.history/src/initial.ghibli/main_20230530113750.js new file mode 100644 index 00000000..68997842 --- /dev/null +++ b/.history/src/initial.ghibli/main_20230530113750.js @@ -0,0 +1,6 @@ +import { example } from './data.js'; +// import data from './data/lol/lol.js'; +import data from '../data/'; +// import data from './data/rickandmorty/rickandmorty.js'; + +console.log(example, data); diff --git a/.history/src/initial.ghibli/main_20230530113812.js b/.history/src/initial.ghibli/main_20230530113812.js new file mode 100644 index 00000000..44c9d5db --- /dev/null +++ b/.history/src/initial.ghibli/main_20230530113812.js @@ -0,0 +1,6 @@ +import { example } from './data.js'; +// import data from './data/lol/lol.js'; +import data from '../'; +// import data from './data/rickandmorty/rickandmorty.js'; + +console.log(example, data); diff --git a/.history/src/initial.ghibli/main_20230530113900.js b/.history/src/initial.ghibli/main_20230530113900.js new file mode 100644 index 00000000..b812f787 --- /dev/null +++ b/.history/src/initial.ghibli/main_20230530113900.js @@ -0,0 +1,6 @@ +import { example } from './data.js'; +// import data from './data/lol/lol.js'; +import data from '../data/ghibli/ghibli.js'; +// import data from './data/rickandmorty/rickandmorty.js'; + +console.log(example, data); diff --git a/.history/src/main_20230530113859.js b/.history/src/main_20230530113859.js new file mode 100644 index 00000000..b812f787 --- /dev/null +++ b/.history/src/main_20230530113859.js @@ -0,0 +1,6 @@ +import { example } from './data.js'; +// import data from './data/lol/lol.js'; +import data from '../data/ghibli/ghibli.js'; +// import data from './data/rickandmorty/rickandmorty.js'; + +console.log(example, data); diff --git a/.history/src/main_20230530114541.js b/.history/src/main_20230530114541.js new file mode 100644 index 00000000..fea9db3f --- /dev/null +++ b/.history/src/main_20230530114541.js @@ -0,0 +1,6 @@ +import { example } from './data.js'; +// import data from './data/lol/lol.js'; +import data from './data/ghibli/ghibli.js'; +// import data from './data/rickandmorty/rickandmorty.js'; + +console.log(example, data); diff --git a/.history/src/main_20230530194414.js b/.history/src/main_20230530194414.js new file mode 100644 index 00000000..a0cd667f --- /dev/null +++ b/.history/src/main_20230530194414.js @@ -0,0 +1,7 @@ +import { example } from './data.js'; +// import data from './data/lol/lol.js'; +import data from './data/ghibli/ghibli.js'; +// import data from './data/rickandmorty/rickandmorty.js'; + +console.log(example, data); + diff --git a/.history/src/main_20230601091105.js b/.history/src/main_20230601091105.js new file mode 100644 index 00000000..74af9c21 --- /dev/null +++ b/.history/src/main_20230601091105.js @@ -0,0 +1,8 @@ +import { example } from './data.js'; +// import data from './data/lol/lol.js'; +import data from './data/ghibli/ghibli.js'; +// import data from './data/rickandmorty/rickandmorty.js'; + +console.log(example, data); + +//Crear un sobreescritura al html, se hace con for of \ No newline at end of file diff --git a/.history/src/main_20230601091136.js b/.history/src/main_20230601091136.js new file mode 100644 index 00000000..7b59d741 --- /dev/null +++ b/.history/src/main_20230601091136.js @@ -0,0 +1,8 @@ +import { example } from './data.js'; +// import data from './data/lol/lol.js'; +import data from './data/ghibli/ghibli.js'; +// import data from './data/rickandmorty/rickandmorty.js'; + +console.log(example, data); + +//Crear un sobreescritura al html, se hace con for of}; diff --git a/.history/src/main_20230601091150.js b/.history/src/main_20230601091150.js new file mode 100644 index 00000000..7ba7d622 --- /dev/null +++ b/.history/src/main_20230601091150.js @@ -0,0 +1,8 @@ +import { example } from './data.js'; +// import data from './data/lol/lol.js'; +import data from './data/ghibli/ghibli.js'; +// import data from './data/rickandmorty/rickandmorty.js'; + +console.log(example, data); + +//Crear un sobreescritura al html, se hace con for of; diff --git a/.history/src/main_20230606122442.js b/.history/src/main_20230606122442.js new file mode 100644 index 00000000..bd2d9db0 --- /dev/null +++ b/.history/src/main_20230606122442.js @@ -0,0 +1,9 @@ +import { example } from './data.js'; +// import data from './data/lol/lol.js'; +import data from './data/ghibli/ghibli.js'; + + +console.log(example, data); + +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamoca del DOM \ No newline at end of file diff --git a/.history/src/main_20230606122450.js b/.history/src/main_20230606122450.js new file mode 100644 index 00000000..84fac6fc --- /dev/null +++ b/.history/src/main_20230606122450.js @@ -0,0 +1,8 @@ +import { example } from './data.js'; +import data from './data/ghibli/ghibli.js'; + + +console.log(example, data); + +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamoca del DOM \ No newline at end of file diff --git a/.history/src/main_20230606122521.js b/.history/src/main_20230606122521.js new file mode 100644 index 00000000..bfe732fc --- /dev/null +++ b/.history/src/main_20230606122521.js @@ -0,0 +1,13 @@ +import { example } from './data.js'; +import data from './data/ghibli/ghibli.js'; +console.log(example, data); + + + + + + + + +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamoca del DOM \ No newline at end of file diff --git a/.history/src/main_20230606124303.js b/.history/src/main_20230606124303.js new file mode 100644 index 00000000..8e8ae869 --- /dev/null +++ b/.history/src/main_20230606124303.js @@ -0,0 +1,14 @@ +import { example } from './data.js'; +import data from './data/ghibli/ghibli.js'; +console.log(example, data); + + + + + + + + + +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM \ No newline at end of file diff --git a/.history/src/main_20230606124328.js b/.history/src/main_20230606124328.js new file mode 100644 index 00000000..2fb408b5 --- /dev/null +++ b/.history/src/main_20230606124328.js @@ -0,0 +1,14 @@ +//import { example } from './data.js'; +import data from './data/ghibli/ghibli.js'; +console.log(example, data); + + + + + + + + + +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM \ No newline at end of file diff --git a/.history/src/main_20230606124623.js b/.history/src/main_20230606124623.js new file mode 100644 index 00000000..269285f9 --- /dev/null +++ b/.history/src/main_20230606124623.js @@ -0,0 +1,23 @@ +//import { example } from './data.js'; +import data from './data/ghibli/ghibli.js'; +console.log(example, data); + +export function allData() { //función que toma la informacion de la data + return data.films +} +//constante para hacer referencia a la funcion de tomar la data (alldata) +const result = allData (); + + + + + + + + + + + + +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM \ No newline at end of file diff --git a/.history/src/main_20230606124826.js b/.history/src/main_20230606124826.js new file mode 100644 index 00000000..5cd5832d --- /dev/null +++ b/.history/src/main_20230606124826.js @@ -0,0 +1,19 @@ +//import { example } from './data.js'; +import data from './data/ghibli/ghibli.js'; +console.log(example, data); + + + + + + + + + + + + + + +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM \ No newline at end of file diff --git a/.history/src/main_20230606124914.js b/.history/src/main_20230606124914.js new file mode 100644 index 00000000..8ef37ee4 --- /dev/null +++ b/.history/src/main_20230606124914.js @@ -0,0 +1,15 @@ +//import { example } from './data.js'; +import data from './data/ghibli/ghibli.js'; + + + + + + + + + + + +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM \ No newline at end of file diff --git a/.history/src/main_20230606124927.js b/.history/src/main_20230606124927.js new file mode 100644 index 00000000..6732e112 --- /dev/null +++ b/.history/src/main_20230606124927.js @@ -0,0 +1,15 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import data from './data/ghibli/ghibli.js'; + + + + + + + + + + + diff --git a/.history/src/main_20230606124958.js b/.history/src/main_20230606124958.js new file mode 100644 index 00000000..99731e58 --- /dev/null +++ b/.history/src/main_20230606124958.js @@ -0,0 +1,15 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { alldata } from './data.js'; + + + + + + + + + + + diff --git a/.history/src/main_20230606125017.js b/.history/src/main_20230606125017.js new file mode 100644 index 00000000..78b7d384 --- /dev/null +++ b/.history/src/main_20230606125017.js @@ -0,0 +1,15 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; + + + + + + + + + + + diff --git a/.history/src/main_20230606125024.js b/.history/src/main_20230606125024.js new file mode 100644 index 00000000..d1e294e1 --- /dev/null +++ b/.history/src/main_20230606125024.js @@ -0,0 +1,16 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; + + + + + + + + + + + + diff --git a/.history/src/main_20230606125340.js b/.history/src/main_20230606125340.js new file mode 100644 index 00000000..9e4b60ee --- /dev/null +++ b/.history/src/main_20230606125340.js @@ -0,0 +1,16 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations") + + + + + + + + + + + diff --git a/.history/src/main_20230606125439.js b/.history/src/main_20230606125439.js new file mode 100644 index 00000000..fdc8cca1 --- /dev/null +++ b/.history/src/main_20230606125439.js @@ -0,0 +1,16 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations"); +const contenedorDePeliculas = allData (); + + + + + + + + + + diff --git a/.history/src/main_20230606125521.js b/.history/src/main_20230606125521.js new file mode 100644 index 00000000..bf514d89 --- /dev/null +++ b/.history/src/main_20230606125521.js @@ -0,0 +1,17 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData ();//vinculando toda la data a al primer contenedor + + + + + + + + + + + diff --git a/.history/src/main_20230606125701.js b/.history/src/main_20230606125701.js new file mode 100644 index 00000000..647f7d25 --- /dev/null +++ b/.history/src/main_20230606125701.js @@ -0,0 +1,20 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData ();//vinculando toda la data a al primer contenedor + +function pintarPosters(){ + +} + + + + + + + + + + diff --git a/.history/src/main_20230606125958.js b/.history/src/main_20230606125958.js new file mode 100644 index 00000000..ade5e151 --- /dev/null +++ b/.history/src/main_20230606125958.js @@ -0,0 +1,23 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData ();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas){ + for (let index = 0; index < array.length; index++) { + const element = array[index]; + + } +} + + + + + + + + + + diff --git a/.history/src/main_20230606130127.js b/.history/src/main_20230606130127.js new file mode 100644 index 00000000..0680cf37 --- /dev/null +++ b/.history/src/main_20230606130127.js @@ -0,0 +1,23 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData ();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas){ + for (let index = 0; index < listaDePeliculas.length; index++) { + const element = listaDePeliculas[index]; + + } +} + + + + + + + + + + diff --git a/.history/src/main_20230606130444.js b/.history/src/main_20230606130444.js new file mode 100644 index 00000000..47849711 --- /dev/null +++ b/.history/src/main_20230606130444.js @@ -0,0 +1,23 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData ();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas){ + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + } +} + + + + + + + + + + diff --git a/.history/src/main_20230606130752.js b/.history/src/main_20230606130752.js new file mode 100644 index 00000000..099b0e07 --- /dev/null +++ b/.history/src/main_20230606130752.js @@ -0,0 +1,27 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData ();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas){ //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement ("img");//caja para las imagenes + + + } +} + + + + + + + + + + diff --git a/.history/src/main_20230606130932.js b/.history/src/main_20230606130932.js new file mode 100644 index 00000000..a876cdbc --- /dev/null +++ b/.history/src/main_20230606130932.js @@ -0,0 +1,29 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData ();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas){ //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement ("img");//caja para las imagenes + posters.src = pelis.poster //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + + + + } +} + + + + + + + + + + diff --git a/.history/src/main_20230606130939.js b/.history/src/main_20230606130939.js new file mode 100644 index 00000000..e518a3c1 --- /dev/null +++ b/.history/src/main_20230606130939.js @@ -0,0 +1,29 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData ();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas){ //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement ("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + + + + } +} + + + + + + + + + + diff --git a/.history/src/main_20230606131121.js b/.history/src/main_20230606131121.js new file mode 100644 index 00000000..5a70f89e --- /dev/null +++ b/.history/src/main_20230606131121.js @@ -0,0 +1,29 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData ();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas){ //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement ("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + poster.classList //vinculando con las clases, ejemplo class list + + + } +} + + + + + + + + + + diff --git a/.history/src/main_20230606131138.js b/.history/src/main_20230606131138.js new file mode 100644 index 00000000..97414ff7 --- /dev/null +++ b/.history/src/main_20230606131138.js @@ -0,0 +1,29 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData ();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas){ //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement ("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + poster.classList.add //vinculando con las clases, ejemplo class list + + + } +} + + + + + + + + + + diff --git a/.history/src/main_20230606131211.js b/.history/src/main_20230606131211.js new file mode 100644 index 00000000..34eaa2ab --- /dev/null +++ b/.history/src/main_20230606131211.js @@ -0,0 +1,29 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData ();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas){ //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement ("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + poster.classList.add ("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + + } +} + + + + + + + + + + diff --git a/.history/src/main_20230606131252.js b/.history/src/main_20230606131252.js new file mode 100644 index 00000000..7bcbcfd1 --- /dev/null +++ b/.history/src/main_20230606131252.js @@ -0,0 +1,29 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData ();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas){ //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement ("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + poster.classList.add ("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + document.getElementById + + } +} + + + + + + + + + + diff --git a/.history/src/main_20230606131314.js b/.history/src/main_20230606131314.js new file mode 100644 index 00000000..a626d9e6 --- /dev/null +++ b/.history/src/main_20230606131314.js @@ -0,0 +1,29 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData ();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas){ //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement ("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + poster.classList.add ("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + document.getElementById("animations") + + } +} + + + + + + + + + + diff --git a/.history/src/main_20230606131326.js b/.history/src/main_20230606131326.js new file mode 100644 index 00000000..940eb5fa --- /dev/null +++ b/.history/src/main_20230606131326.js @@ -0,0 +1,29 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData ();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas){ //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement ("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + poster.classList.add ("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + document.getElementById("animations").appendChild + + } +} + + + + + + + + + + diff --git a/.history/src/main_20230606131418.js b/.history/src/main_20230606131418.js new file mode 100644 index 00000000..8a54eceb --- /dev/null +++ b/.history/src/main_20230606131418.js @@ -0,0 +1,29 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData ();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas){ //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement ("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + poster.classList.add ("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + document.getElementById("animations").appendChild(poster);//appendChild hace la magia "interaccion con el DOM" + + } +} + + + + + + + + + + diff --git a/.history/src/main_20230606131507.js b/.history/src/main_20230606131507.js new file mode 100644 index 00000000..c4146f8e --- /dev/null +++ b/.history/src/main_20230606131507.js @@ -0,0 +1,30 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData ();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas){ //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement ("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + poster.classList.add ("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + document.getElementById("animations").appendChild(poster);//appendChild hace la magia "interaccion con el DOM" + } + return + +} + + + + + + + + + + diff --git a/.history/src/main_20230606131640.js b/.history/src/main_20230606131640.js new file mode 100644 index 00000000..015ca2a7 --- /dev/null +++ b/.history/src/main_20230606131640.js @@ -0,0 +1,32 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + poster.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + document.getElementById("animations").appendChild(poster);//appendChild hace la magia "interaccion con el DOM" + } + return + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230606131655.js b/.history/src/main_20230606131655.js new file mode 100644 index 00000000..14e9a683 --- /dev/null +++ b/.history/src/main_20230606131655.js @@ -0,0 +1,32 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + poster.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + document.getElementById("animations").appendChild(poster);//appendChild hace la magia "interaccion con el DOM" + } + return + +} + +pintarPosters(contenedorDePeliculas); + + + + + + + + + + diff --git a/.history/src/main_20230606132009.js b/.history/src/main_20230606132009.js new file mode 100644 index 00000000..faa513d3 --- /dev/null +++ b/.history/src/main_20230606132009.js @@ -0,0 +1,32 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + image.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + document.getElementById("animations").appendChild(image);//appendChild hace la magia "interaccion con el DOM" + } + return + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230606132056.js b/.history/src/main_20230606132056.js new file mode 100644 index 00000000..67ce4d85 --- /dev/null +++ b/.history/src/main_20230606132056.js @@ -0,0 +1,32 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + document.getElementById("animations").appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + } + return + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230607161422.js b/.history/src/main_20230607161422.js new file mode 100644 index 00000000..3a7885a4 --- /dev/null +++ b/.history/src/main_20230607161422.js @@ -0,0 +1,32 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + document.getElementById("animations").appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + } + return + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230607162810.js b/.history/src/main_20230607162810.js new file mode 100644 index 00000000..63192f21 --- /dev/null +++ b/.history/src/main_20230607162810.js @@ -0,0 +1,35 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + document.getElementById("animations").appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + } + return + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230607162824.js b/.history/src/main_20230607162824.js new file mode 100644 index 00000000..63192f21 --- /dev/null +++ b/.history/src/main_20230607162824.js @@ -0,0 +1,35 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + document.getElementById("animations").appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + } + return + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230607163047.js b/.history/src/main_20230607163047.js new file mode 100644 index 00000000..f509f353 --- /dev/null +++ b/.history/src/main_20230607163047.js @@ -0,0 +1,36 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + document.getElementById("animations").appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + document.getElementById("animations").appendChild(titulo); + } + return + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230608082210.js b/.history/src/main_20230608082210.js new file mode 100644 index 00000000..b336653f --- /dev/null +++ b/.history/src/main_20230608082210.js @@ -0,0 +1,42 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + document.getElementById("animations").appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + document.getElementById("animations").appendChild(titulo); + } + return + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230608082359.js b/.history/src/main_20230608082359.js new file mode 100644 index 00000000..b336653f --- /dev/null +++ b/.history/src/main_20230608082359.js @@ -0,0 +1,42 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + document.getElementById("animations").appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + document.getElementById("animations").appendChild(titulo); + } + return + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230608082509.js b/.history/src/main_20230608082509.js new file mode 100644 index 00000000..d938d1a5 --- /dev/null +++ b/.history/src/main_20230608082509.js @@ -0,0 +1,42 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + /*const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo")*/ + + document.getElementById("animations").appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + document.getElementById("animations").appendChild(titulo); + } + return + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230608103945.js b/.history/src/main_20230608103945.js new file mode 100644 index 00000000..d9144f95 --- /dev/null +++ b/.history/src/main_20230608103945.js @@ -0,0 +1,42 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + document.getElementById("animations").appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + document.getElementById("animations").appendChild(titulo); + } + return + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230608104034.js b/.history/src/main_20230608104034.js new file mode 100644 index 00000000..03ef74ce --- /dev/null +++ b/.history/src/main_20230608104034.js @@ -0,0 +1,43 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + document.getElementById("animations").appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + document.getElementById("animations").appendChild(titulo); + document.getElementById("animations").appendChild(año); + } + return + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230608112317.js b/.history/src/main_20230608112317.js new file mode 100644 index 00000000..9c5db4de --- /dev/null +++ b/.history/src/main_20230608112317.js @@ -0,0 +1,45 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const caja = document.createElement("div") + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + document.getElementById("animations").appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + document.getElementById("animations").appendChild(titulo); + document.getElementById("animations").appendChild(año); + } + return + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230608112355.js b/.history/src/main_20230608112355.js new file mode 100644 index 00000000..d58fd8ab --- /dev/null +++ b/.history/src/main_20230608112355.js @@ -0,0 +1,45 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + document.getElementById("caja").appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + document.getElementById("caja").appendChild(titulo); + document.getElementById("caja").appendChild(año); + } + return + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230608112459.js b/.history/src/main_20230608112459.js new file mode 100644 index 00000000..203df7db --- /dev/null +++ b/.history/src/main_20230608112459.js @@ -0,0 +1,50 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + document.getElementById("caja").appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + document.getElementById("caja").appendChild(titulo); + document.getElementById("caja").appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + + } + return + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230608112554.js b/.history/src/main_20230608112554.js new file mode 100644 index 00000000..501af5a6 --- /dev/null +++ b/.history/src/main_20230608112554.js @@ -0,0 +1,46 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + document.getElementById("caja").appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + document.getElementById("caja").appendChild(titulo); + document.getElementById("caja").appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230608112719.js b/.history/src/main_20230608112719.js new file mode 100644 index 00000000..5a20b6d4 --- /dev/null +++ b/.history/src/main_20230608112719.js @@ -0,0 +1,46 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + document.getElementById("caja").appendChild(titulo); + document.getElementById("caja").appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230608112759.js b/.history/src/main_20230608112759.js new file mode 100644 index 00000000..3b699184 --- /dev/null +++ b/.history/src/main_20230608112759.js @@ -0,0 +1,46 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230608134055.js b/.history/src/main_20230608134055.js new file mode 100644 index 00000000..8b4e9edc --- /dev/null +++ b/.history/src/main_20230608134055.js @@ -0,0 +1,46 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animaciones");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animaciones").appendChild(caja); + } + return + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230608134124.js b/.history/src/main_20230608134124.js new file mode 100644 index 00000000..8b4e9edc --- /dev/null +++ b/.history/src/main_20230608134124.js @@ -0,0 +1,46 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animaciones");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animaciones").appendChild(caja); + } + return + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230608134248.js b/.history/src/main_20230608134248.js new file mode 100644 index 00000000..3b699184 --- /dev/null +++ b/.history/src/main_20230608134248.js @@ -0,0 +1,46 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230608153728.js b/.history/src/main_20230608153728.js new file mode 100644 index 00000000..c4f7e93c --- /dev/null +++ b/.history/src/main_20230608153728.js @@ -0,0 +1,100 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + + function creandoTarjeta (tarjetaModal){ + dataModal.innerHTML = ""; + + for (const gModal of tarjetaModal){ + const ghibliModal = document.createElement ("div"); + ghibliModal.setAttribute ("class","modal_container"); + ghibliModal. + + } + } + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230608153751.js b/.history/src/main_20230608153751.js new file mode 100644 index 00000000..ef021b7f --- /dev/null +++ b/.history/src/main_20230608153751.js @@ -0,0 +1,100 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return +/* + function creandoTarjeta (tarjetaModal){ + dataModal.innerHTML = ""; + + for (const gModal of tarjetaModal){ + const ghibliModal = document.createElement ("div"); + ghibliModal.setAttribute ("class","modal_container"); + ghibliModal. + + } + } +*/ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230608153926.js b/.history/src/main_20230608153926.js new file mode 100644 index 00000000..452d9f89 --- /dev/null +++ b/.history/src/main_20230608153926.js @@ -0,0 +1,115 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; +import { allData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + + + + + + + + + + + + + + + + /* + function creandoTarjeta (tarjetaModal){ + dataModal.innerHTML = ""; + + for (const gModal of tarjetaModal){ + const ghibliModal = document.createElement ("div"); + ghibliModal.setAttribute ("class","modal_container"); + ghibliModal. + + } + } +*/ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230608154810.js b/.history/src/main_20230608154810.js new file mode 100644 index 00000000..2a84b823 --- /dev/null +++ b/.history/src/main_20230608154810.js @@ -0,0 +1,116 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const contenedorDePeliculas = allData();//vinculando toda la data a al primer contenedor + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + + + + + + + + + + + + + + + + /* + function creandoTarjeta (tarjetaModal){ + dataModal.innerHTML = ""; + + for (const gModal of tarjetaModal){ + const ghibliModal = document.createElement ("div"); + ghibliModal.setAttribute ("class","modal_container"); + ghibliModal. + + } + } +*/ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +} + +pintarPosters(contenedorDePeliculas) + + + + + + + + + + diff --git a/.history/src/main_20230608155040.js b/.history/src/main_20230608155040.js new file mode 100644 index 00000000..f740a77c --- /dev/null +++ b/.history/src/main_20230608155040.js @@ -0,0 +1,47 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor +console.log(orderData) +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + + + + + + + + + + diff --git a/.history/src/main_20230608155208.js b/.history/src/main_20230608155208.js new file mode 100644 index 00000000..2155a82b --- /dev/null +++ b/.history/src/main_20230608155208.js @@ -0,0 +1,48 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor +console.log(orderData(arrayObjetos)); + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + console.log(pelis) + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + + + + + + + + + + diff --git a/.history/src/main_20230608155249.js b/.history/src/main_20230608155249.js new file mode 100644 index 00000000..520efb29 --- /dev/null +++ b/.history/src/main_20230608155249.js @@ -0,0 +1,48 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor +console.log(orderData(arrayObjetos)); + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + + + + + + + + + + diff --git a/.history/src/main_20230609131905.js b/.history/src/main_20230609131905.js new file mode 100644 index 00000000..5481972a --- /dev/null +++ b/.history/src/main_20230609131905.js @@ -0,0 +1,48 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor +console.log(orderData(arrayObjetos)); + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + + + + + + + + + + diff --git a/.history/src/main_20230609131924.js b/.history/src/main_20230609131924.js new file mode 100644 index 00000000..3b468f0e --- /dev/null +++ b/.history/src/main_20230609131924.js @@ -0,0 +1,48 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor +console.log(orderData2(arrayObjetos)); + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + + + + + + + + + + diff --git a/.history/src/main_20230609132015.js b/.history/src/main_20230609132015.js new file mode 100644 index 00000000..b109e166 --- /dev/null +++ b/.history/src/main_20230609132015.js @@ -0,0 +1,48 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + + + + + + + + + + diff --git a/.history/src/main_20230609132900.js b/.history/src/main_20230609132900.js new file mode 100644 index 00000000..1d6ec770 --- /dev/null +++ b/.history/src/main_20230609132900.js @@ -0,0 +1,56 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + + + +document.getElementById("filters__initial").addEventListener("click", function (){ + console.log(A-Z) + + +}); + + + + + + + + + + diff --git a/.history/src/main_20230609133012.js b/.history/src/main_20230609133012.js new file mode 100644 index 00000000..c08dbfb6 --- /dev/null +++ b/.history/src/main_20230609133012.js @@ -0,0 +1,56 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + + + +document.getElementById("filters__initial").addEventListener("click", function (){ + console.log("A-Z") + + +}); + + + + + + + + + + diff --git a/.history/src/main_20230609133209.js b/.history/src/main_20230609133209.js new file mode 100644 index 00000000..a085059b --- /dev/null +++ b/.history/src/main_20230609133209.js @@ -0,0 +1,56 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + + + +document.getElementById("filters__initial").addEventListener("click", function (){ + console.log("this") + + +}); + + + + + + + + + + diff --git a/.history/src/main_20230609133221.js b/.history/src/main_20230609133221.js new file mode 100644 index 00000000..c65492b6 --- /dev/null +++ b/.history/src/main_20230609133221.js @@ -0,0 +1,56 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + + + +document.getElementById("filters__initial").addEventListener("click", function (){ + console.log(this) + + +}); + + + + + + + + + + diff --git a/.history/src/main_20230609133350.js b/.history/src/main_20230609133350.js new file mode 100644 index 00000000..8e1ae19c --- /dev/null +++ b/.history/src/main_20230609133350.js @@ -0,0 +1,56 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + + + +document.getElementById("filters__initial").addEventListener("click", function (){ + console.log(this.value) //magico this es el select, entonces me trae el elemento + + +}); + + + + + + + + + + diff --git a/.history/src/main_20230609133941.js b/.history/src/main_20230609133941.js new file mode 100644 index 00000000..e378be44 --- /dev/null +++ b/.history/src/main_20230609133941.js @@ -0,0 +1,61 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById ("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + + + +document.getElementById("filters__initial").addEventListener("click", function (){ + console.log(this.value) //magico this es el select, entonces me trae el elemento + + if (this.value === 0) { + orderData + } else (this.value === 1) { + orderData2 + } + +}); + + + + + + + + + + diff --git a/.history/src/main_20230609134101.js b/.history/src/main_20230609134101.js new file mode 100644 index 00000000..b1f16c01 --- /dev/null +++ b/.history/src/main_20230609134101.js @@ -0,0 +1,61 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + + + +document.getElementById("filters__initial").addEventListener("click", function () { + console.log(this.value) //magico this es el select, entonces me trae el elemento + + if (this.value === 0) { + orderData() + } else if (this.value === 1) { + orderData2() + } + +}); + + + + + + + + + + diff --git a/.history/src/main_20230609134258.js b/.history/src/main_20230609134258.js new file mode 100644 index 00000000..07371982 --- /dev/null +++ b/.history/src/main_20230609134258.js @@ -0,0 +1,61 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + + + +document.getElementById("filters__initial").addEventListener("click", function () { + console.log(this.value) //magico this es el select, entonces me trae el elemento + + if (this.value === 0) { + orderData(arrayObjetos ) + } else if (this.value === 1) { + orderData2(arrayObjetos ) + } + +}); + + + + + + + + + + diff --git a/.history/src/main_20230609134447.js b/.history/src/main_20230609134447.js new file mode 100644 index 00000000..83e29083 --- /dev/null +++ b/.history/src/main_20230609134447.js @@ -0,0 +1,64 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + + + +document.getElementById("filters__initial").addEventListener("click", function () { + console.log(this.value) //magico this es el select, entonces me trae el elemento + + if (this.value === 0) { + orderData(arrayObjetos ) + + } else if (this.value === 1) { + orderData2(arrayObjetos ) + } + + + +}); + + + + + + + + + + diff --git a/.history/src/main_20230609135704.js b/.history/src/main_20230609135704.js new file mode 100644 index 00000000..8788a4f2 --- /dev/null +++ b/.history/src/main_20230609135704.js @@ -0,0 +1,67 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + + + +document.getElementById("filters__initial").addEventListener("click", function () { + console.log(this.value) //magico this es el select, entonces me trae el elemento + + + + if (this.value === 0) { + const dataOrdenada = orderData(arrayObjetos) + console.log(dataOrdenada) + + } else if (this.value === 1) { + orderData2(arrayObjetos) + } + + + +}); + + + + + + + + + + diff --git a/.history/src/main_20230609152828.js b/.history/src/main_20230609152828.js new file mode 100644 index 00000000..86f9cb5f --- /dev/null +++ b/.history/src/main_20230609152828.js @@ -0,0 +1,74 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +document.getElementById().addEventListener("click", function () { + console.log(this.value) //magico this es el select, entonces me trae el elemento + + + + if (this.value === 0) { + const dataOrdenada = orderData(arrayObjetos) + console.log(dataOrdenada) + + } else if (this.value === 1) { + const dataOrdenada2 = orderData2(arrayObjetos) + console.log(dataOrdenada2) + + } + + + + +}); +/*const az = document.getElementById ("filters__initial"); +az.addEventListener*/ + + + + + + + + + + + + + diff --git a/.history/src/main_20230609152943.js b/.history/src/main_20230609152943.js new file mode 100644 index 00000000..86f9cb5f --- /dev/null +++ b/.history/src/main_20230609152943.js @@ -0,0 +1,74 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +document.getElementById().addEventListener("click", function () { + console.log(this.value) //magico this es el select, entonces me trae el elemento + + + + if (this.value === 0) { + const dataOrdenada = orderData(arrayObjetos) + console.log(dataOrdenada) + + } else if (this.value === 1) { + const dataOrdenada2 = orderData2(arrayObjetos) + console.log(dataOrdenada2) + + } + + + + +}); +/*const az = document.getElementById ("filters__initial"); +az.addEventListener*/ + + + + + + + + + + + + + diff --git a/.history/src/main_20230609153453.js b/.history/src/main_20230609153453.js new file mode 100644 index 00000000..bbe83536 --- /dev/null +++ b/.history/src/main_20230609153453.js @@ -0,0 +1,74 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +document.getElementById("filters__initial").addEventListener("click", function () { + console.log(this.value) //magico this es el select, entonces me trae el elemento + + + + if (this.value === 0) { + const dataOrdenada = orderData(arrayObjetos) + console.log(dataOrdenada) + + } else if (this.value === 1) { + const dataOrdenada2 = orderData2(arrayObjetos) + console.log(dataOrdenada2) + + } + + + + +}); +/*const az = document.getElementById (); +az.addEventListener*/ + + + + + + + + + + + + + diff --git a/.history/src/main_20230609153750.js b/.history/src/main_20230609153750.js new file mode 100644 index 00000000..9555dba3 --- /dev/null +++ b/.history/src/main_20230609153750.js @@ -0,0 +1,72 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +document.getElementById("filters__initial").addEventListener("click", function () { + console.log(this.value) //magico this es el select, entonces me trae el elemento + + + + if (this.value === 0) { + const dataOrdenada = orderData(arrayObjetos) + console.log(dataOrdenada) + + } else if (this.value === 1) { + const dataOrdenada2 = orderData2(arrayObjetos) + console.log(dataOrdenada2) + + } + + + + +}); + + + + + + + + + + + + + diff --git a/.history/src/main_20230609154140.js b/.history/src/main_20230609154140.js new file mode 100644 index 00000000..9555dba3 --- /dev/null +++ b/.history/src/main_20230609154140.js @@ -0,0 +1,72 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +document.getElementById("filters__initial").addEventListener("click", function () { + console.log(this.value) //magico this es el select, entonces me trae el elemento + + + + if (this.value === 0) { + const dataOrdenada = orderData(arrayObjetos) + console.log(dataOrdenada) + + } else if (this.value === 1) { + const dataOrdenada2 = orderData2(arrayObjetos) + console.log(dataOrdenada2) + + } + + + + +}); + + + + + + + + + + + + + diff --git a/.history/src/main_20230609154436.js b/.history/src/main_20230609154436.js new file mode 100644 index 00000000..9555dba3 --- /dev/null +++ b/.history/src/main_20230609154436.js @@ -0,0 +1,72 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +document.getElementById("filters__initial").addEventListener("click", function () { + console.log(this.value) //magico this es el select, entonces me trae el elemento + + + + if (this.value === 0) { + const dataOrdenada = orderData(arrayObjetos) + console.log(dataOrdenada) + + } else if (this.value === 1) { + const dataOrdenada2 = orderData2(arrayObjetos) + console.log(dataOrdenada2) + + } + + + + +}); + + + + + + + + + + + + + diff --git a/.history/src/main_20230612105113.js b/.history/src/main_20230612105113.js new file mode 100644 index 00000000..ffde9175 --- /dev/null +++ b/.history/src/main_20230612105113.js @@ -0,0 +1,96 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const masRecientes = sortDataYear(allTheMovies, 0) + showMovies(masRecientes) + break; + case '1': + const masAntiguas = sortDataYear(allTheMovies, 1) + showMovies(masAntiguas) + break; + + } +})t = + + + + + + + + + +/*document.getElementById("filters__initial").addEventListener("click", function () { + console.log(this.value) //magico this es el select, entonces me trae el elemento + + + + if (this.value === 0) { + const dataOrdenada = orderData(arrayObjetos) + console.log(dataOrdenada) + + } else if (this.value === 1) { + const dataOrdenada2 = orderData2(arrayObjetos) + console.log(dataOrdenada2) + + } + + + + +});*/ + + + + + + + + + + + + + diff --git a/.history/src/main_20230612105335.js b/.history/src/main_20230612105335.js new file mode 100644 index 00000000..6049e3b2 --- /dev/null +++ b/.history/src/main_20230612105335.js @@ -0,0 +1,96 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(allTheMovies, 0) + showMovies(masRecientes) + break; + case '1': + const masAntiguas = orderData(allTheMovies, 1) + showMovies(masAntiguas) + break; + + } +})t = + + + + + + + + + +/*document.getElementById("filters__initial").addEventListener("click", function () { + console.log(this.value) //magico this es el select, entonces me trae el elemento + + + + if (this.value === 0) { + const dataOrdenada = orderData(arrayObjetos) + console.log(dataOrdenada) + + } else if (this.value === 1) { + const dataOrdenada2 = orderData2(arrayObjetos) + console.log(dataOrdenada2) + + } + + + + +});*/ + + + + + + + + + + + + + diff --git a/.history/src/main_20230612110801.js b/.history/src/main_20230612110801.js new file mode 100644 index 00000000..73ff5976 --- /dev/null +++ b/.history/src/main_20230612110801.js @@ -0,0 +1,96 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(allTheMovies, 0) + showMovies(az) + break; + case '1': + const za = orderData(allTheMovies, 1) + showMovies(za) + break; + + } +}) + + + + + + + + + +/*document.getElementById("filters__initial").addEventListener("click", function () { + console.log(this.value) //magico this es el select, entonces me trae el elemento + + + + if (this.value === 0) { + const dataOrdenada = orderData(arrayObjetos) + console.log(dataOrdenada) + + } else if (this.value === 1) { + const dataOrdenada2 = orderData2(arrayObjetos) + console.log(dataOrdenada2) + + } + + + + +});*/ + + + + + + + + + + + + + diff --git a/.history/src/main_20230612111042.js b/.history/src/main_20230612111042.js new file mode 100644 index 00000000..d7921043 --- /dev/null +++ b/.history/src/main_20230612111042.js @@ -0,0 +1,96 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos, 0) + pintarPosters(az) + break; + case '1': + const za = orderData(arrayObjetos, 1) + pintarPosters(za) + break; + + } +}) + + + + + + + + + +/*document.getElementById("filters__initial").addEventListener("click", function () { + console.log(this.value) //magico this es el select, entonces me trae el elemento + + + + if (this.value === 0) { + const dataOrdenada = orderData(arrayObjetos) + console.log(dataOrdenada) + + } else if (this.value === 1) { + const dataOrdenada2 = orderData2(arrayObjetos) + console.log(dataOrdenada2) + + } + + + + +});*/ + + + + + + + + + + + + + diff --git a/.history/src/main_20230612111221.js b/.history/src/main_20230612111221.js new file mode 100644 index 00000000..f8257f58 --- /dev/null +++ b/.history/src/main_20230612111221.js @@ -0,0 +1,87 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +/*const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos, 0) + pintarPosters(az) + break; + case '1': + const za = orderData(arrayObjetos, 1) + pintarPosters(za) + break; + + } +})*/ +document.getElementById("filters__initial").addEventListener("click", function () { + console.log(this.value) //magico this es el select, entonces me trae el elemento + + + + if (this.value === 0) { + const dataOrdenada = orderData(arrayObjetos) + console.log(dataOrdenada) + + } else if (this.value === 1) { + const dataOrdenada2 = orderData2(arrayObjetos) + console.log(dataOrdenada2) + + } + + + + +}); + + + + + + + + + + + + + diff --git a/.history/src/main_20230612111619.js b/.history/src/main_20230612111619.js new file mode 100644 index 00000000..6571dfbe --- /dev/null +++ b/.history/src/main_20230612111619.js @@ -0,0 +1,87 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos, 0) + pintarPosters(az) + break; + case '1': + const za = orderData(arrayObjetos, 1) + pintarPosters(za) + break; + + } +}) +/*document.getElementById("filters__initial").addEventListener("click", function () { + console.log(this.value) //magico this es el select, entonces me trae el elemento + + + + if (this.value === 0) { + const dataOrdenada = orderData(arrayObjetos) + console.log(dataOrdenada) + + } else if (this.value === 1) { + const dataOrdenada2 = orderData2(arrayObjetos) + console.log(dataOrdenada2) + + } + + + + +});*/ + + + + + + + + + + + + + diff --git a/.history/src/main_20230612111635.js b/.history/src/main_20230612111635.js new file mode 100644 index 00000000..ccc3c2f0 --- /dev/null +++ b/.history/src/main_20230612111635.js @@ -0,0 +1,87 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData(arrayObjetos) + pintarPosters(za) + break; + + } +}) +/*document.getElementById("filters__initial").addEventListener("click", function () { + console.log(this.value) //magico this es el select, entonces me trae el elemento + + + + if (this.value === 0) { + const dataOrdenada = orderData(arrayObjetos) + console.log(dataOrdenada) + + } else if (this.value === 1) { + const dataOrdenada2 = orderData2(arrayObjetos) + console.log(dataOrdenada2) + + } + + + + +});*/ + + + + + + + + + + + + + diff --git a/.history/src/main_20230612112300.js b/.history/src/main_20230612112300.js new file mode 100644 index 00000000..271a7dc3 --- /dev/null +++ b/.history/src/main_20230612112300.js @@ -0,0 +1,90 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + (this.value === 0) { + const dataOrdenada = orderData(arrayObjetos) + + /*const az = orderData(arrayObjetos) + pintarPosters(az)*/ + break; + case '1': + (this.value === 1) { + const dataOrdenada2 = orderData2(arrayObjetos) + /*const za = orderData(arrayObjetos) + pintarPosters(za)*/ + break; + + } +}) +/*document.getElementById("filters__initial").addEventListener("click", function () { + console.log(this.value) //magico this es el select, entonces me trae el elemento + + + + if + console.log(dataOrdenada) + + } else if + console.log(dataOrdenada2) + + } + + + + +});*/ + + + + + + + + + + + + + diff --git a/.history/src/main_20230612112408.js b/.history/src/main_20230612112408.js new file mode 100644 index 00000000..ccc3c2f0 --- /dev/null +++ b/.history/src/main_20230612112408.js @@ -0,0 +1,87 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData(arrayObjetos) + pintarPosters(za) + break; + + } +}) +/*document.getElementById("filters__initial").addEventListener("click", function () { + console.log(this.value) //magico this es el select, entonces me trae el elemento + + + + if (this.value === 0) { + const dataOrdenada = orderData(arrayObjetos) + console.log(dataOrdenada) + + } else if (this.value === 1) { + const dataOrdenada2 = orderData2(arrayObjetos) + console.log(dataOrdenada2) + + } + + + + +});*/ + + + + + + + + + + + + + diff --git a/.history/src/main_20230612112532.js b/.history/src/main_20230612112532.js new file mode 100644 index 00000000..1b1572ba --- /dev/null +++ b/.history/src/main_20230612112532.js @@ -0,0 +1,115 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData(arrayObjetos) + pintarPosters(za) + break; + + } +}) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData2(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + + + + + + + + + + +/*document.getElementById("filters__initial").addEventListener("click", function () { + console.log(this.value) //magico this es el select, entonces me trae el elemento + + + + if (this.value === 0) { + const dataOrdenada = orderData(arrayObjetos) + console.log(dataOrdenada) + + } else if (this.value === 1) { + const dataOrdenada2 = orderData2(arrayObjetos) + console.log(dataOrdenada2) + + } + + + + +});*/ + + + + + + + + + + + + + diff --git a/.history/src/main_20230612112650.js b/.history/src/main_20230612112650.js new file mode 100644 index 00000000..1b1572ba --- /dev/null +++ b/.history/src/main_20230612112650.js @@ -0,0 +1,115 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData(arrayObjetos) + pintarPosters(za) + break; + + } +}) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData2(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + + + + + + + + + + +/*document.getElementById("filters__initial").addEventListener("click", function () { + console.log(this.value) //magico this es el select, entonces me trae el elemento + + + + if (this.value === 0) { + const dataOrdenada = orderData(arrayObjetos) + console.log(dataOrdenada) + + } else if (this.value === 1) { + const dataOrdenada2 = orderData2(arrayObjetos) + console.log(dataOrdenada2) + + } + + + + +});*/ + + + + + + + + + + + + + diff --git a/.history/src/main_20230612112803.js b/.history/src/main_20230612112803.js new file mode 100644 index 00000000..ae889051 --- /dev/null +++ b/.history/src/main_20230612112803.js @@ -0,0 +1,98 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + + + + + + + + + + +/*document.getElementById("filters__initial").addEventListener("click", function () { + console.log(this.value) //magico this es el select, entonces me trae el elemento + + + + if (this.value === 0) { + const dataOrdenada = orderData(arrayObjetos) + console.log(dataOrdenada) + + } else if (this.value === 1) { + const dataOrdenada2 = orderData2(arrayObjetos) + console.log(dataOrdenada2) + + } + + + + +});*/ + + + + + + + + + + + + + diff --git a/.history/src/main_20230612113233.js b/.history/src/main_20230612113233.js new file mode 100644 index 00000000..6827f64f --- /dev/null +++ b/.history/src/main_20230612113233.js @@ -0,0 +1,68 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + + + + + + + + + + + + diff --git a/.history/src/main_20230613101807.js b/.history/src/main_20230613101807.js new file mode 100644 index 00000000..309496c2 --- /dev/null +++ b/.history/src/main_20230613101807.js @@ -0,0 +1,70 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2 } from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + + + + + + + + + + + + + + diff --git a/.history/src/main_20230613102408.js b/.history/src/main_20230613102408.js new file mode 100644 index 00000000..67fc3f8e --- /dev/null +++ b/.history/src/main_20230613102408.js @@ -0,0 +1,70 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + + + + + + + + + + + + + + diff --git a/.history/src/main_20230613102830.js b/.history/src/main_20230613102830.js new file mode 100644 index 00000000..fe170791 --- /dev/null +++ b/.history/src/main_20230613102830.js @@ -0,0 +1,86 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + + + + + + + + + + + diff --git a/.history/src/main_20230613113140.js b/.history/src/main_20230613113140.js new file mode 100644 index 00000000..f54f2529 --- /dev/null +++ b/.history/src/main_20230613113140.js @@ -0,0 +1,88 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + +const botonDeLimpiar = document.getElementById ("clean") + + + + + + + + + + + + diff --git a/.history/src/main_20230613113305.js b/.history/src/main_20230613113305.js new file mode 100644 index 00000000..577ae7d6 --- /dev/null +++ b/.history/src/main_20230613113305.js @@ -0,0 +1,94 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + + + + +}) + + + + + + + + + + + + diff --git a/.history/src/main_20230613114143.js b/.history/src/main_20230613114143.js new file mode 100644 index 00000000..cb305277 --- /dev/null +++ b/.history/src/main_20230613114143.js @@ -0,0 +1,94 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + contenedorDePortadas.innerHTML = ""; + if (filtroaz != "all" || filtroFecha != "all"){ + pintarPosters((arrayObjetos)); + } +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230613115000.js b/.history/src/main_20230613115000.js new file mode 100644 index 00000000..a28d026e --- /dev/null +++ b/.history/src/main_20230613115000.js @@ -0,0 +1,94 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = ""; + if (filtroaz != "all" || filtroFecha != "all"){ + pintarPosters((arrayObjetos)); + } +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230613115508.js b/.history/src/main_20230613115508.js new file mode 100644 index 00000000..55e1dd8e --- /dev/null +++ b/.history/src/main_20230613115508.js @@ -0,0 +1,96 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + +/* +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = ""; + if (filtroaz != "all" || filtroFecha != "all"){ + pintarPosters((arrayObjetos)); + } +});*/ + + + + + + + + + + + + diff --git a/.history/src/main_20230613115528.js b/.history/src/main_20230613115528.js new file mode 100644 index 00000000..a28d026e --- /dev/null +++ b/.history/src/main_20230613115528.js @@ -0,0 +1,94 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = ""; + if (filtroaz != "all" || filtroFecha != "all"){ + pintarPosters((arrayObjetos)); + } +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230613140238.js b/.history/src/main_20230613140238.js new file mode 100644 index 00000000..c4fa1396 --- /dev/null +++ b/.history/src/main_20230613140238.js @@ -0,0 +1,96 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = ""; + if (filtroaz != "all" || filtroFecha != "all"){ + pintarPosters((arrayObjetos)); + } +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230613141516.js b/.history/src/main_20230613141516.js new file mode 100644 index 00000000..523d27b7 --- /dev/null +++ b/.history/src/main_20230613141516.js @@ -0,0 +1,102 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + + + + + + + /* if (filtroaz != "all" || filtroFecha != "all"){ + pintarPosters((arrayObjetos)); + }*/ +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230613141700.js b/.history/src/main_20230613141700.js new file mode 100644 index 00000000..1684df7b --- /dev/null +++ b/.history/src/main_20230613141700.js @@ -0,0 +1,102 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "" + + + + + + /* if (filtroaz != "all" || filtroFecha != "all"){ + pintarPosters((arrayObjetos)); + }*/ +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230613141756.js b/.history/src/main_20230613141756.js new file mode 100644 index 00000000..2a79fb4a --- /dev/null +++ b/.history/src/main_20230613141756.js @@ -0,0 +1,102 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "1" + + + + + + /* if (filtroaz != "all" || filtroFecha != "all"){ + pintarPosters((arrayObjetos)); + }*/ +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230613141809.js b/.history/src/main_20230613141809.js new file mode 100644 index 00000000..7899ec22 --- /dev/null +++ b/.history/src/main_20230613141809.js @@ -0,0 +1,102 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + + + + + + /* if (filtroaz != "all" || filtroFecha != "all"){ + pintarPosters((arrayObjetos)); + }*/ +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230613141828.js b/.history/src/main_20230613141828.js new file mode 100644 index 00000000..fb4acb06 --- /dev/null +++ b/.history/src/main_20230613141828.js @@ -0,0 +1,103 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + + + + + + /* if (filtroaz != "all" || filtroFecha != "all"){ + pintarPosters((arrayObjetos)); + }*/ +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230613141829.js b/.history/src/main_20230613141829.js new file mode 100644 index 00000000..fb4acb06 --- /dev/null +++ b/.history/src/main_20230613141829.js @@ -0,0 +1,103 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + + + + + + /* if (filtroaz != "all" || filtroFecha != "all"){ + pintarPosters((arrayObjetos)); + }*/ +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230613142032.js b/.history/src/main_20230613142032.js new file mode 100644 index 00000000..935af3ba --- /dev/null +++ b/.history/src/main_20230613142032.js @@ -0,0 +1,103 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos)); + + + + + /* if (filtroaz != "all" || filtroFecha != "all"){ + + }*/ +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230613142156.js b/.history/src/main_20230613142156.js new file mode 100644 index 00000000..56a9d4ac --- /dev/null +++ b/.history/src/main_20230613142156.js @@ -0,0 +1,96 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230613143901.js b/.history/src/main_20230613143901.js new file mode 100644 index 00000000..61c91054 --- /dev/null +++ b/.history/src/main_20230613143901.js @@ -0,0 +1,108 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230613143936.js b/.history/src/main_20230613143936.js new file mode 100644 index 00000000..f59f1571 --- /dev/null +++ b/.history/src/main_20230613143936.js @@ -0,0 +1,110 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230613144001.js b/.history/src/main_20230613144001.js new file mode 100644 index 00000000..766ea670 --- /dev/null +++ b/.history/src/main_20230613144001.js @@ -0,0 +1,110 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230613144159.js b/.history/src/main_20230613144159.js new file mode 100644 index 00000000..b8512caa --- /dev/null +++ b/.history/src/main_20230613144159.js @@ -0,0 +1,114 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230613144233.js b/.history/src/main_20230613144233.js new file mode 100644 index 00000000..968deacf --- /dev/null +++ b/.history/src/main_20230613144233.js @@ -0,0 +1,116 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230613144631.js b/.history/src/main_20230613144631.js new file mode 100644 index 00000000..e0812a55 --- /dev/null +++ b/.history/src/main_20230613144631.js @@ -0,0 +1,120 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloPoductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230613144701.js b/.history/src/main_20230613144701.js new file mode 100644 index 00000000..6448425f --- /dev/null +++ b/.history/src/main_20230613144701.js @@ -0,0 +1,121 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloPoductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230613144708.js b/.history/src/main_20230613144708.js new file mode 100644 index 00000000..6448425f --- /dev/null +++ b/.history/src/main_20230613144708.js @@ -0,0 +1,121 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloPoductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230613145737.js b/.history/src/main_20230613145737.js new file mode 100644 index 00000000..1f2c86ed --- /dev/null +++ b/.history/src/main_20230613145737.js @@ -0,0 +1,121 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230613150350.js b/.history/src/main_20230613150350.js new file mode 100644 index 00000000..d855228b --- /dev/null +++ b/.history/src/main_20230613150350.js @@ -0,0 +1,121 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director & Director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230613150407.js b/.history/src/main_20230613150407.js new file mode 100644 index 00000000..1f2c86ed --- /dev/null +++ b/.history/src/main_20230613150407.js @@ -0,0 +1,121 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + + +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230614112922.js b/.history/src/main_20230614112922.js new file mode 100644 index 00000000..e20a6ca1 --- /dev/null +++ b/.history/src/main_20230614112922.js @@ -0,0 +1,126 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + + + + + + + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230614125521.js b/.history/src/main_20230614125521.js new file mode 100644 index 00000000..beafa27a --- /dev/null +++ b/.history/src/main_20230614125521.js @@ -0,0 +1,132 @@ +//Crear un sobreescritura al html, se hace con for of; +//Manipulación dinamica del DOM +//import { example } from './data.js'; + +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + +}) + + + + + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230614130010.js b/.history/src/main_20230614130010.js new file mode 100644 index 00000000..6164a1a4 --- /dev/null +++ b/.history/src/main_20230614130010.js @@ -0,0 +1,131 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value == "all"){ + pintarPosters() + } + +}) + + + + + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230614130050.js b/.history/src/main_20230614130050.js new file mode 100644 index 00000000..0266d5d5 --- /dev/null +++ b/.history/src/main_20230614130050.js @@ -0,0 +1,131 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ + pintarPosters(arrayObjetos) + } + +}) + + + + + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230614131919.js b/.history/src/main_20230614131919.js new file mode 100644 index 00000000..ae32acbf --- /dev/null +++ b/.history/src/main_20230614131919.js @@ -0,0 +1,133 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroD()) + } + +}); + + + + + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230614145203.js b/.history/src/main_20230614145203.js new file mode 100644 index 00000000..f1db73f4 --- /dev/null +++ b/.history/src/main_20230614145203.js @@ -0,0 +1,133 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroD(arrayObjetos, filtroD.value)) + } + +}); + + + + + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230614145346.js b/.history/src/main_20230614145346.js new file mode 100644 index 00000000..abb4f38a --- /dev/null +++ b/.history/src/main_20230614145346.js @@ -0,0 +1,133 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + + + + + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230614151212.js b/.history/src/main_20230614151212.js new file mode 100644 index 00000000..abb4f38a --- /dev/null +++ b/.history/src/main_20230614151212.js @@ -0,0 +1,133 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + + + + + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230614151543.js b/.history/src/main_20230614151543.js new file mode 100644 index 00000000..aa019f00 --- /dev/null +++ b/.history/src/main_20230614151543.js @@ -0,0 +1,145 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + +//filtro por productor + +const filtroP = document.getElementById("filters__producer"); +filtroP.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroP.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroProduc(arrayObjetos, filtroP.value)) + } + +}); + + + + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230614151607.js b/.history/src/main_20230614151607.js new file mode 100644 index 00000000..b09d8eed --- /dev/null +++ b/.history/src/main_20230614151607.js @@ -0,0 +1,145 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir, filtroProduc} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + +//filtro por productor + +const filtroP = document.getElementById("filters__producer"); +filtroP.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroP.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroProduc(arrayObjetos, filtroP.value)) + } + +}); + + + + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230614152112.js b/.history/src/main_20230614152112.js new file mode 100644 index 00000000..a9dd05d8 --- /dev/null +++ b/.history/src/main_20230614152112.js @@ -0,0 +1,147 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir, filtroProduc} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + +//filtro por productor + +const filtroP = document.getElementById("filters__producer"); +filtroP.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroP.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroProduc(arrayObjetos, filtroP.value)) + } + +}); + + + + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + filtroD.value ="" + filtroP.value ="" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230614152215.js b/.history/src/main_20230614152215.js new file mode 100644 index 00000000..2f64b971 --- /dev/null +++ b/.history/src/main_20230614152215.js @@ -0,0 +1,147 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir, filtroProduc} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + +//filtro por productor + +const filtroP = document.getElementById("filters__producer"); +filtroP.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroP.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroProduc(arrayObjetos, filtroP.value)) + } + +}); + + + + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + filtroD.value ="pintarPosters(arrayObjetos)" + filtroP.value ="pintarPosters(arrayObjetos)" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230614152310.js b/.history/src/main_20230614152310.js new file mode 100644 index 00000000..57aa7814 --- /dev/null +++ b/.history/src/main_20230614152310.js @@ -0,0 +1,147 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir, filtroProduc} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + +//filtro por productor + +const filtroP = document.getElementById("filters__producer"); +filtroP.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroP.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroProduc(arrayObjetos, filtroP.value)) + } + +}); + + + + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + filtroD.value ="filtroD" + filtroP.value ="filtroP" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230614152349.js b/.history/src/main_20230614152349.js new file mode 100644 index 00000000..cbac3815 --- /dev/null +++ b/.history/src/main_20230614152349.js @@ -0,0 +1,147 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir, filtroProduc} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + +//filtro por productor + +const filtroP = document.getElementById("filters__producer"); +filtroP.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroP.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroProduc(arrayObjetos, filtroP.value)) + } + +}); + + + + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + filtroD.value ="animations" + filtroP.value ="animations" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230614152514.js b/.history/src/main_20230614152514.js new file mode 100644 index 00000000..acb909fc --- /dev/null +++ b/.history/src/main_20230614152514.js @@ -0,0 +1,147 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir, filtroProduc} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + +//filtro por productor + +const filtroP = document.getElementById("filters__producer"); +filtroP.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroP.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroProduc(arrayObjetos, filtroP.value)) + } + +}); + + + + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + filtroD.value ="filtroD.value" + filtroP.value ="filtroP.value" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230614152607.js b/.history/src/main_20230614152607.js new file mode 100644 index 00000000..b3d77e8d --- /dev/null +++ b/.history/src/main_20230614152607.js @@ -0,0 +1,147 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir, filtroProduc} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + +//filtro por productor + +const filtroP = document.getElementById("filters__producer"); +filtroP.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroP.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroProduc(arrayObjetos, filtroP.value)) + } + +}); + + + + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + filtroD.value ="filters__director" + filtroP.value ="filters__producer" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230614152630.js b/.history/src/main_20230614152630.js new file mode 100644 index 00000000..a0e742f2 --- /dev/null +++ b/.history/src/main_20230614152630.js @@ -0,0 +1,147 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir, filtroProduc} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + +//filtro por productor + +const filtroP = document.getElementById("filters__producer"); +filtroP.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroP.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroProduc(arrayObjetos, filtroP.value)) + } + +}); + + + + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + filtroD.value ="if" + filtroP.value ="if" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230614152742.js b/.history/src/main_20230614152742.js new file mode 100644 index 00000000..d804614b --- /dev/null +++ b/.history/src/main_20230614152742.js @@ -0,0 +1,147 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir, filtroProduc} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + +//filtro por productor + +const filtroP = document.getElementById("filters__producer"); +filtroP.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroP.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroProduc(arrayObjetos, filtroP.value)) + } + +}); + + + + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + filtroD.value ="else" + filtroP.value ="else" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230614152817.js b/.history/src/main_20230614152817.js new file mode 100644 index 00000000..e4f886df --- /dev/null +++ b/.history/src/main_20230614152817.js @@ -0,0 +1,147 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir, filtroProduc} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + +//filtro por productor + +const filtroP = document.getElementById("filters__producer"); +filtroP.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroP.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroProduc(arrayObjetos, filtroP.value)) + } + +}); + + + + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + filtroD.value ="all" + filtroP.value ="all" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230614153903.js b/.history/src/main_20230614153903.js new file mode 100644 index 00000000..cd9dae6d --- /dev/null +++ b/.history/src/main_20230614153903.js @@ -0,0 +1,144 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir, filtroProduc} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + +//filtro por productor + +const filtroP = document.getElementById("filters__producer"); +filtroP.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroP.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroProduc(arrayObjetos, filtroP.value)) + } + +}); + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + filtroD.value ="all" + filtroP.value ="all" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230619100542.js b/.history/src/main_20230619100542.js new file mode 100644 index 00000000..9fc9feff --- /dev/null +++ b/.history/src/main_20230619100542.js @@ -0,0 +1,144 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir, filtroProduc} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const año = document.createElement("p") + año.innerText = pelis.release_date; + año.classList.add("soloAño") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(año); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(za) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const añoAcendente = orderFecha(arrayObjetos) + pintarPosters(añoAcendente) + break; + case '1': + const añoDesendente = orderFecha2(arrayObjetos) + pintarPosters(añoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + +//filtro por productor + +const filtroP = document.getElementById("filters__producer"); +filtroP.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroP.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroProduc(arrayObjetos, filtroP.value)) + } + +}); + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + filtroD.value ="all" + filtroP.value ="all" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230619100945.js b/.history/src/main_20230619100945.js new file mode 100644 index 00000000..0dbfa8f0 --- /dev/null +++ b/.history/src/main_20230619100945.js @@ -0,0 +1,144 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir, filtroProduc} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const ano = document.createElement("p") + ano.innerText = pelis.release_date; + ano.classList.add("soloAno") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(ano); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(za) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const anoAcendente = orderFecha(arrayObjetos) + pintarPosters(anoAcendente) + break; + case '1': + const anoDesendente = orderFecha2(arrayObjetos) + pintarPosters(anoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + +//filtro por productor + +const filtroP = document.getElementById("filters__producer"); +filtroP.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroP.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroProduc(arrayObjetos, filtroP.value)) + } + +}); + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + filtroD.value ="all" + filtroP.value ="all" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230619110734.js b/.history/src/main_20230619110734.js new file mode 100644 index 00000000..0dbfa8f0 --- /dev/null +++ b/.history/src/main_20230619110734.js @@ -0,0 +1,144 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir, filtroProduc} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const ano = document.createElement("p") + ano.innerText = pelis.release_date; + ano.classList.add("soloAno") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(ano); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(za) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const anoAcendente = orderFecha(arrayObjetos) + pintarPosters(anoAcendente) + break; + case '1': + const anoDesendente = orderFecha2(arrayObjetos) + pintarPosters(anoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + +//filtro por productor + +const filtroP = document.getElementById("filters__producer"); +filtroP.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroP.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroProduc(arrayObjetos, filtroP.value)) + } + +}); + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + filtroD.value ="all" + filtroP.value ="all" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230619111455.js b/.history/src/main_20230619111455.js new file mode 100644 index 00000000..a5f0839c --- /dev/null +++ b/.history/src/main_20230619111455.js @@ -0,0 +1,144 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir, filtroProduc} from './data.js'; +const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const ano = document.createElement("p") + ano.innerText = pelis.release_date; + ano.classList.add("soloAno") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(ano); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const anoAcendente = orderFecha(arrayObjetos) + pintarPosters(anoAcendente) + break; + case '1': + const anoDesendente = orderFecha2(arrayObjetos) + pintarPosters(anoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + +//filtro por productor + +const filtroP = document.getElementById("filters__producer"); +filtroP.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroP.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroProduc(arrayObjetos, filtroP.value)) + } + +}); + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + filtroD.value ="all" + filtroP.value ="all" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230619114918.js b/.history/src/main_20230619114918.js new file mode 100644 index 00000000..476a80c9 --- /dev/null +++ b/.history/src/main_20230619114918.js @@ -0,0 +1,144 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir, filtroProduc} from './data.js'; +//const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const ano = document.createElement("p") + ano.innerText = pelis.release_date; + ano.classList.add("soloAno") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(ano); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0': + const az = orderData(arrayObjetos) + pintarPosters(az) + break; + case '1': + const za = orderData2(arrayObjetos) + pintarPosters(za) + break; + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const anoAcendente = orderFecha(arrayObjetos) + pintarPosters(anoAcendente) + break; + case '1': + const anoDesendente = orderFecha2(arrayObjetos) + pintarPosters(anoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + +//filtro por productor + +const filtroP = document.getElementById("filters__producer"); +filtroP.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroP.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroProduc(arrayObjetos, filtroP.value)) + } + +}); + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + filtroD.value ="all" + filtroP.value ="all" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230619115535.js b/.history/src/main_20230619115535.js new file mode 100644 index 00000000..00297b3f --- /dev/null +++ b/.history/src/main_20230619115535.js @@ -0,0 +1,144 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir, filtroProduc} from './data.js'; +//const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const ano = document.createElement("p") + ano.innerText = pelis.release_date; + ano.classList.add("soloAno") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(ano); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0':{ + const az = orderData(arrayObjetos) + pintarPosters(az) + break;} + case '1': { + const za = orderData2(arrayObjetos) + pintarPosters(za) + break;} + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0': + const anoAcendente = orderFecha(arrayObjetos) + pintarPosters(anoAcendente) + break; + case '1': + const anoDesendente = orderFecha2(arrayObjetos) + pintarPosters(anoDesendente) + break; + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + +//filtro por productor + +const filtroP = document.getElementById("filters__producer"); +filtroP.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroP.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroProduc(arrayObjetos, filtroP.value)) + } + +}); + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + filtroD.value ="all" + filtroP.value ="all" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230619115554.js b/.history/src/main_20230619115554.js new file mode 100644 index 00000000..5f4f1cb9 --- /dev/null +++ b/.history/src/main_20230619115554.js @@ -0,0 +1,144 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir, filtroProduc} from './data.js'; +//const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const ano = document.createElement("p") + ano.innerText = pelis.release_date; + ano.classList.add("soloAno") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(ano); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0':{ + const az = orderData(arrayObjetos) + pintarPosters(az) + break;} + case '1': { + const za = orderData2(arrayObjetos) + pintarPosters(za) + break;} + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0':{ + const anoAcendente = orderFecha(arrayObjetos) + pintarPosters(anoAcendente) + break;} + case '1':{ + const anoDesendente = orderFecha2(arrayObjetos) + pintarPosters(anoDesendente) + break;} + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + +//filtro por productor + +const filtroP = document.getElementById("filters__producer"); +filtroP.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroP.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroProduc(arrayObjetos, filtroP.value)) + } + +}); + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + filtroD.value ="all" + filtroP.value ="all" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/main_20230619115604.js b/.history/src/main_20230619115604.js new file mode 100644 index 00000000..5f4f1cb9 --- /dev/null +++ b/.history/src/main_20230619115604.js @@ -0,0 +1,144 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir, filtroProduc} from './data.js'; +//const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const ano = document.createElement("p") + ano.innerText = pelis.release_date; + ano.classList.add("soloAno") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(ano); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0':{ + const az = orderData(arrayObjetos) + pintarPosters(az) + break;} + case '1': { + const za = orderData2(arrayObjetos) + pintarPosters(za) + break;} + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0':{ + const anoAcendente = orderFecha(arrayObjetos) + pintarPosters(anoAcendente) + break;} + case '1':{ + const anoDesendente = orderFecha2(arrayObjetos) + pintarPosters(anoDesendente) + break;} + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + +//filtro por productor + +const filtroP = document.getElementById("filters__producer"); +filtroP.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroP.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroProduc(arrayObjetos, filtroP.value)) + } + +}); + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + filtroD.value ="all" + filtroP.value ="all" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + + diff --git a/.history/src/style2_20230530181732.css b/.history/src/style2_20230530181732.css new file mode 100644 index 00000000..152006cb --- /dev/null +++ b/.history/src/style2_20230530181732.css @@ -0,0 +1,104 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230530192041.css b/.history/src/style2_20230530192041.css new file mode 100644 index 00000000..e071a8b5 --- /dev/null +++ b/.history/src/style2_20230530192041.css @@ -0,0 +1,104 @@ +body { + background-image: url(fondo2.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230530193314.css b/.history/src/style2_20230530193314.css new file mode 100644 index 00000000..d9570478 --- /dev/null +++ b/.history/src/style2_20230530193314.css @@ -0,0 +1,62 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230530193341.css b/.history/src/style2_20230530193341.css new file mode 100644 index 00000000..856db2ad --- /dev/null +++ b/.history/src/style2_20230530193341.css @@ -0,0 +1,25 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606112229.css b/.history/src/style2_20230606112229.css new file mode 100644 index 00000000..9a526e4e --- /dev/null +++ b/.history/src/style2_20230606112229.css @@ -0,0 +1,31 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + display: flexbox; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606112325.css b/.history/src/style2_20230606112325.css new file mode 100644 index 00000000..e4945593 --- /dev/null +++ b/.history/src/style2_20230606112325.css @@ -0,0 +1,33 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + display: flex; + align-items: center; + justify-content: space-around; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606112506.css b/.history/src/style2_20230606112506.css new file mode 100644 index 00000000..ea39ae4c --- /dev/null +++ b/.history/src/style2_20230606112506.css @@ -0,0 +1,32 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + display: flex; + flex-direction: column; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606112719.css b/.history/src/style2_20230606112719.css new file mode 100644 index 00000000..8212ea47 --- /dev/null +++ b/.history/src/style2_20230606112719.css @@ -0,0 +1,36 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + + border: 1px solid rgb(0, 170, 255); + background-color: black; + padding: 20px; + display: flex; + flex-direction: column; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606112904.css b/.history/src/style2_20230606112904.css new file mode 100644 index 00000000..8595ad68 --- /dev/null +++ b/.history/src/style2_20230606112904.css @@ -0,0 +1,39 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-weight: bold; + width: 120 px; + height: 120px; + border: 1px solid rgb(0, 170, 255); + background-color: black; + padding: 20px; + display: flex; + flex-direction: column; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606112939.css b/.history/src/style2_20230606112939.css new file mode 100644 index 00000000..e903fe11 --- /dev/null +++ b/.history/src/style2_20230606112939.css @@ -0,0 +1,39 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-weight: bold; + width: 120 px; + height: 120px; + border: 1px solid black(0, 170, 255); + background-color: rgb(40, 123, 207); + padding: 20px; + display: flex; + flex-direction: column; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606113020.css b/.history/src/style2_20230606113020.css new file mode 100644 index 00000000..8395d877 --- /dev/null +++ b/.history/src/style2_20230606113020.css @@ -0,0 +1,39 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-weight: bold; + width: 120 px; + height: 120px; + border: 1px solid black(0, 170, 255); + background-color: rgb(40, 123, 207); + padding: 20px; + display: flex; + flex-direction: row; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606113041.css b/.history/src/style2_20230606113041.css new file mode 100644 index 00000000..e903fe11 --- /dev/null +++ b/.history/src/style2_20230606113041.css @@ -0,0 +1,39 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-weight: bold; + width: 120 px; + height: 120px; + border: 1px solid black(0, 170, 255); + background-color: rgb(40, 123, 207); + padding: 20px; + display: flex; + flex-direction: column; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606113051.css b/.history/src/style2_20230606113051.css new file mode 100644 index 00000000..e903fe11 --- /dev/null +++ b/.history/src/style2_20230606113051.css @@ -0,0 +1,39 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-weight: bold; + width: 120 px; + height: 120px; + border: 1px solid black(0, 170, 255); + background-color: rgb(40, 123, 207); + padding: 20px; + display: flex; + flex-direction: column; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606113106.css b/.history/src/style2_20230606113106.css new file mode 100644 index 00000000..8d088d77 --- /dev/null +++ b/.history/src/style2_20230606113106.css @@ -0,0 +1,39 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-weight: bold; + width: 120 px; + height: 120px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 20px; + display: flex; + flex-direction: column; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606113203.css b/.history/src/style2_20230606113203.css new file mode 100644 index 00000000..8f1e3923 --- /dev/null +++ b/.history/src/style2_20230606113203.css @@ -0,0 +1,39 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-weight: bold; + width: 50 px; + height: 120px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 20px; + display: flex; + flex-direction: column; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606113227.css b/.history/src/style2_20230606113227.css new file mode 100644 index 00000000..09129c8d --- /dev/null +++ b/.history/src/style2_20230606113227.css @@ -0,0 +1,39 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-weight: bold; + width: 50px; + height: 50px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 20px; + display: flex; + flex-direction: column; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606113247.css b/.history/src/style2_20230606113247.css new file mode 100644 index 00000000..7d0f4b1a --- /dev/null +++ b/.history/src/style2_20230606113247.css @@ -0,0 +1,39 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-weight: bold; + width: 80px; + height: 80px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 20px; + display: flex; + flex-direction: column; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606113302.css b/.history/src/style2_20230606113302.css new file mode 100644 index 00000000..4b35eb96 --- /dev/null +++ b/.history/src/style2_20230606113302.css @@ -0,0 +1,39 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-weight: bold; + width: 100px; + height: 100px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 20px; + display: flex; + flex-direction: column; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606113328.css b/.history/src/style2_20230606113328.css new file mode 100644 index 00000000..950cf39c --- /dev/null +++ b/.history/src/style2_20230606113328.css @@ -0,0 +1,39 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-weight: bold; + width: 120px; + height: 120px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 20px; + display: flex; + flex-direction: column; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606113344.css b/.history/src/style2_20230606113344.css new file mode 100644 index 00000000..52a1a7ad --- /dev/null +++ b/.history/src/style2_20230606113344.css @@ -0,0 +1,39 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-weight: bold; + width: 120px; + height: 120px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: column; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606113407.css b/.history/src/style2_20230606113407.css new file mode 100644 index 00000000..f32144b7 --- /dev/null +++ b/.history/src/style2_20230606113407.css @@ -0,0 +1,39 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-weight: bold; + width: 150px; + height: 150px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: column; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606113426.css b/.history/src/style2_20230606113426.css new file mode 100644 index 00000000..41de5fa6 --- /dev/null +++ b/.history/src/style2_20230606113426.css @@ -0,0 +1,38 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + width: 150px; + height: 150px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: column; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606113450.css b/.history/src/style2_20230606113450.css new file mode 100644 index 00000000..cee61617 --- /dev/null +++ b/.history/src/style2_20230606113450.css @@ -0,0 +1,38 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + width: 130px; + height: 130px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: column; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606113504.css b/.history/src/style2_20230606113504.css new file mode 100644 index 00000000..dcb258a1 --- /dev/null +++ b/.history/src/style2_20230606113504.css @@ -0,0 +1,39 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-weight: bold; + width: 130px; + height: 130px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: column; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606113750.css b/.history/src/style2_20230606113750.css new file mode 100644 index 00000000..7ce0633d --- /dev/null +++ b/.history/src/style2_20230606113750.css @@ -0,0 +1,55 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 130px; + height: 130px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: column; +} + +.filters__director { + width: 130px; + height: 130px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 200%; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606113825.css b/.history/src/style2_20230606113825.css new file mode 100644 index 00000000..1b023bba --- /dev/null +++ b/.history/src/style2_20230606113825.css @@ -0,0 +1,55 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 130px; + height: 130px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: column; +} + +.filters__director { + width: 130px; + height: 130px; + border: 1px solid black(0, 170, 255); + background-color: rgb(39, 8, 243); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 200%; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606113905.css b/.history/src/style2_20230606113905.css new file mode 100644 index 00000000..ebbea422 --- /dev/null +++ b/.history/src/style2_20230606113905.css @@ -0,0 +1,55 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 130px; + height: 130px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: column; +} + +.filters__director { + width: 130px; + height: 130px; + border: 1px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 200%; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606113920.css b/.history/src/style2_20230606113920.css new file mode 100644 index 00000000..10f89ca1 --- /dev/null +++ b/.history/src/style2_20230606113920.css @@ -0,0 +1,55 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 130px; + height: 130px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: column; +} + +.filters__director { + width: 130px; + height: 130px; + border: 1px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 200%; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606113938.css b/.history/src/style2_20230606113938.css new file mode 100644 index 00000000..569dc4cb --- /dev/null +++ b/.history/src/style2_20230606113938.css @@ -0,0 +1,54 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 130px; + height: 130px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: column; +} + +.filters__director { + width: 130px; + height: 130px; + border: 1px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 200%; +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606114026.css b/.history/src/style2_20230606114026.css new file mode 100644 index 00000000..604c71a4 --- /dev/null +++ b/.history/src/style2_20230606114026.css @@ -0,0 +1,71 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 130px; + height: 130px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: column; +} + +.filters__director { + width: 130px; + height: 130px; + border: 1px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + letter-spacing: 2px; + line-height: 200%; +} + +.filters__producer { + width: 130px; + height: 130px; + border: 1px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + letter-spacing: 2px; + line-height: 200%; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606114032.css b/.history/src/style2_20230606114032.css new file mode 100644 index 00000000..604c71a4 --- /dev/null +++ b/.history/src/style2_20230606114032.css @@ -0,0 +1,71 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 130px; + height: 130px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: column; +} + +.filters__director { + width: 130px; + height: 130px; + border: 1px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + letter-spacing: 2px; + line-height: 200%; +} + +.filters__producer { + width: 130px; + height: 130px; + border: 1px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + letter-spacing: 2px; + line-height: 200%; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606114054.css b/.history/src/style2_20230606114054.css new file mode 100644 index 00000000..8c6efe09 --- /dev/null +++ b/.history/src/style2_20230606114054.css @@ -0,0 +1,71 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 200px; + height: 200px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: column; +} + +.filters__director { + width: 130px; + height: 130px; + border: 1px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + letter-spacing: 2px; + line-height: 200%; +} + +.filters__producer { + width: 130px; + height: 130px; + border: 1px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + letter-spacing: 2px; + line-height: 200%; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606114136.css b/.history/src/style2_20230606114136.css new file mode 100644 index 00000000..cc804c77 --- /dev/null +++ b/.history/src/style2_20230606114136.css @@ -0,0 +1,71 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 200px; + height: 200px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: column; +} + +.filters__director { + width: 150px; + height: 150px; + border: 1px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + letter-spacing: 2px; + line-height: 200%; +} + +.filters__producer { + width: 150px; + height: 150px; + border: 1px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + letter-spacing: 2px; + line-height: 200%; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606114243.css b/.history/src/style2_20230606114243.css new file mode 100644 index 00000000..57a452bb --- /dev/null +++ b/.history/src/style2_20230606114243.css @@ -0,0 +1,71 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 200px; + height: 200px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: column; +} + +.filters__director { + width: 150px; + height: 150px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + letter-spacing: 2px; + line-height: 200%; +} + +.filters__producer { + width: 150px; + height: 150px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + letter-spacing: 2px; + line-height: 200%; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606114346.css b/.history/src/style2_20230606114346.css new file mode 100644 index 00000000..3e395755 --- /dev/null +++ b/.history/src/style2_20230606114346.css @@ -0,0 +1,71 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 200px; + height: 200px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: column; +} + +.filters__director { + width: 150px; + height: 150px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; +} + +.filters__producer { + width: 150px; + height: 150px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606114426.css b/.history/src/style2_20230606114426.css new file mode 100644 index 00000000..527ef19d --- /dev/null +++ b/.history/src/style2_20230606114426.css @@ -0,0 +1,73 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 200px; + height: 200px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: column; +} + +.filters__director { + width: 150px; + height: 150px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 150px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606114514.css b/.history/src/style2_20230606114514.css new file mode 100644 index 00000000..d3b85fa3 --- /dev/null +++ b/.history/src/style2_20230606114514.css @@ -0,0 +1,73 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 200px; + height: 200px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: column; +} + +.filters__director { + width: 150px; + height: 150px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 150px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606114541.css b/.history/src/style2_20230606114541.css new file mode 100644 index 00000000..2e89136e --- /dev/null +++ b/.history/src/style2_20230606114541.css @@ -0,0 +1,73 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 200px; + height: 200px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 150px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 150px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606114620.css b/.history/src/style2_20230606114620.css new file mode 100644 index 00000000..915177c3 --- /dev/null +++ b/.history/src/style2_20230606114620.css @@ -0,0 +1,73 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 300px; + height: 300px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 150px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 150px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606114631.css b/.history/src/style2_20230606114631.css new file mode 100644 index 00000000..63419308 --- /dev/null +++ b/.history/src/style2_20230606114631.css @@ -0,0 +1,73 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 500px; + height: 300px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 150px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 150px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606114651.css b/.history/src/style2_20230606114651.css new file mode 100644 index 00000000..5d35c3f1 --- /dev/null +++ b/.history/src/style2_20230606114651.css @@ -0,0 +1,73 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 300px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 150px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 150px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606114703.css b/.history/src/style2_20230606114703.css new file mode 100644 index 00000000..5518fe3c --- /dev/null +++ b/.history/src/style2_20230606114703.css @@ -0,0 +1,73 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 200px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 150px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 150px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606114723.css b/.history/src/style2_20230606114723.css new file mode 100644 index 00000000..d5ef5251 --- /dev/null +++ b/.history/src/style2_20230606114723.css @@ -0,0 +1,73 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 200px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 150px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606114734.css b/.history/src/style2_20230606114734.css new file mode 100644 index 00000000..7ef6119b --- /dev/null +++ b/.history/src/style2_20230606114734.css @@ -0,0 +1,73 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 200px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606114745.css b/.history/src/style2_20230606114745.css new file mode 100644 index 00000000..f201cbed --- /dev/null +++ b/.history/src/style2_20230606114745.css @@ -0,0 +1,73 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 100px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606114755.css b/.history/src/style2_20230606114755.css new file mode 100644 index 00000000..f4a99e8f --- /dev/null +++ b/.history/src/style2_20230606114755.css @@ -0,0 +1,73 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606114836.css b/.history/src/style2_20230606114836.css new file mode 100644 index 00000000..5ae3557c --- /dev/null +++ b/.history/src/style2_20230606114836.css @@ -0,0 +1,92 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606114915.css b/.history/src/style2_20230606114915.css new file mode 100644 index 00000000..da191a36 --- /dev/null +++ b/.history/src/style2_20230606114915.css @@ -0,0 +1,113 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606115217.css b/.history/src/style2_20230606115217.css new file mode 100644 index 00000000..a31fcffb --- /dev/null +++ b/.history/src/style2_20230606115217.css @@ -0,0 +1,122 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.clean { +border-radius: 12px; +font-size: 20px; +font-family: 'Times New Roman', Times, serif; +background-color: gray; +color: black; +border-color: beige; + +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606115338.css b/.history/src/style2_20230606115338.css new file mode 100644 index 00000000..1419193d --- /dev/null +++ b/.history/src/style2_20230606115338.css @@ -0,0 +1,122 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.clean { +border-radius: 12px; +font-size: 20px; +font-family: 'Times New Roman', Times, serif; +background-color: gray; +color: black; +border-color: beige; +box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606115409.css b/.history/src/style2_20230606115409.css new file mode 100644 index 00000000..5fd63f96 --- /dev/null +++ b/.history/src/style2_20230606115409.css @@ -0,0 +1,122 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.button { +border-radius: 12px; +font-size: 20px; +font-family: 'Times New Roman', Times, serif; +background-color: gray; +color: black; +border-color: beige; +box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606115440.css b/.history/src/style2_20230606115440.css new file mode 100644 index 00000000..029f95fb --- /dev/null +++ b/.history/src/style2_20230606115440.css @@ -0,0 +1,122 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.button { +border-radius: 12px; +font-size: 20px; +font-family: Verdana, Geneva, Tahoma, sans-serif +background-color: gray; +color: black; +border-color: beige; +box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606115511.css b/.history/src/style2_20230606115511.css new file mode 100644 index 00000000..d3cfe23a --- /dev/null +++ b/.history/src/style2_20230606115511.css @@ -0,0 +1,122 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.button { +border-radius: 12px; +font-size: 20px; +font-family: Verdana, Geneva, Tahoma, sans-serif +background-color: gray; +color: black; +border-color: beige; +box-shadow:marker; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606115529.css b/.history/src/style2_20230606115529.css new file mode 100644 index 00000000..d6cf2873 --- /dev/null +++ b/.history/src/style2_20230606115529.css @@ -0,0 +1,122 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.button { +border-radius: 20px; +font-size: 20px; +font-family: Verdana, Geneva, Tahoma, sans-serif +background-color: gray; +color: black; +border-color: beige; +box-shadow:marker; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606115657.css b/.history/src/style2_20230606115657.css new file mode 100644 index 00000000..b5e0b4c7 --- /dev/null +++ b/.history/src/style2_20230606115657.css @@ -0,0 +1,122 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.clean { +border-radius: 20px; +font-size: 20px; +font-family: Verdana, Geneva, Tahoma, sans-serif +background-color: gray; +color: black; +border-color: beige; +box-shadow +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606115704.css b/.history/src/style2_20230606115704.css new file mode 100644 index 00000000..b5e0b4c7 --- /dev/null +++ b/.history/src/style2_20230606115704.css @@ -0,0 +1,122 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.clean { +border-radius: 20px; +font-size: 20px; +font-family: Verdana, Geneva, Tahoma, sans-serif +background-color: gray; +color: black; +border-color: beige; +box-shadow +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606115817.css b/.history/src/style2_20230606115817.css new file mode 100644 index 00000000..0c51fb2b --- /dev/null +++ b/.history/src/style2_20230606115817.css @@ -0,0 +1,143 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + + +.clean { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + + +/*.clean { +border-radius: 20px; +font-size: 20px; +font-family: Verdana, Geneva, Tahoma, sans-serif +background-color: gray; +color: black; +border-color: beige; +box-shadow +}*/ + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606115849.css b/.history/src/style2_20230606115849.css new file mode 100644 index 00000000..a03623a5 --- /dev/null +++ b/.history/src/style2_20230606115849.css @@ -0,0 +1,143 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + + +button { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + + +/*.clean { +border-radius: 20px; +font-size: 20px; +font-family: Verdana, Geneva, Tahoma, sans-serif +background-color: gray; +color: black; +border-color: beige; +box-shadow +}*/ + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606115923.css b/.history/src/style2_20230606115923.css new file mode 100644 index 00000000..d27864c4 --- /dev/null +++ b/.history/src/style2_20230606115923.css @@ -0,0 +1,128 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + + +button { + border-radius: 20px; + font-size: 20px; + font-family: Verdana, Geneva, Tahoma, sans-serif + background-color: gray; + color: black; + border-color: beige; + box-shadow +} + + +/*.clean { + +}*/ + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606115944.css b/.history/src/style2_20230606115944.css new file mode 100644 index 00000000..3e0d9ea9 --- /dev/null +++ b/.history/src/style2_20230606115944.css @@ -0,0 +1,128 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + + +button { + border-radius: 20px; + font-size: 15px; + font-family: Verdana, Geneva, Tahoma, sans-serif + background-color: gray; + color: black; + border-color: beige; + box-shadow +} + + +/*.clean { + +}*/ + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606120039.css b/.history/src/style2_20230606120039.css new file mode 100644 index 00000000..41ea6c49 --- /dev/null +++ b/.history/src/style2_20230606120039.css @@ -0,0 +1,133 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(86, 143, 200); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + + +button { + border-radius: 20px; + font-size: 15px; + font-family: Verdana, Geneva, Tahoma, sans-serif + background-color: gray; + color: black; + border-color: beige; + box-shadow +} + + +/*.clean { + +}*/ + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606120157.css b/.history/src/style2_20230606120157.css new file mode 100644 index 00000000..5c71637f --- /dev/null +++ b/.history/src/style2_20230606120157.css @@ -0,0 +1,134 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(86, 143, 200); + opacity: 2; + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + + +button { + border-radius: 20px; + font-size: 15px; + font-family: Verdana, Geneva, Tahoma, sans-serif + background-color: gray; + color: black; + border-color: beige; + box-shadow +} + + +/*.clean { + +}*/ + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606120223.css b/.history/src/style2_20230606120223.css new file mode 100644 index 00000000..72365cfa --- /dev/null +++ b/.history/src/style2_20230606120223.css @@ -0,0 +1,134 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(86, 143, 200); + opacity: -5; + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + + +button { + border-radius: 20px; + font-size: 15px; + font-family: Verdana, Geneva, Tahoma, sans-serif + background-color: gray; + color: black; + border-color: beige; + box-shadow +} + + +/*.clean { + +}*/ + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606120237.css b/.history/src/style2_20230606120237.css new file mode 100644 index 00000000..7deeffdb --- /dev/null +++ b/.history/src/style2_20230606120237.css @@ -0,0 +1,134 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(86, 143, 200); + opacity: -2; + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + + +button { + border-radius: 20px; + font-size: 15px; + font-family: Verdana, Geneva, Tahoma, sans-serif + background-color: gray; + color: black; + border-color: beige; + box-shadow +} + + +/*.clean { + +}*/ + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606120248.css b/.history/src/style2_20230606120248.css new file mode 100644 index 00000000..91139275 --- /dev/null +++ b/.history/src/style2_20230606120248.css @@ -0,0 +1,134 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(86, 143, 200); + opacity: 0; + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + + +button { + border-radius: 20px; + font-size: 15px; + font-family: Verdana, Geneva, Tahoma, sans-serif + background-color: gray; + color: black; + border-color: beige; + box-shadow +} + + +/*.clean { + +}*/ + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606120320.css b/.history/src/style2_20230606120320.css new file mode 100644 index 00000000..6c6a95e5 --- /dev/null +++ b/.history/src/style2_20230606120320.css @@ -0,0 +1,134 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(86, 143, 200); + backface-visibility: hidden; + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + + +button { + border-radius: 20px; + font-size: 15px; + font-family: Verdana, Geneva, Tahoma, sans-serif + background-color: gray; + color: black; + border-color: beige; + box-shadow +} + + +/*.clean { + +}*/ + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606120400.css b/.history/src/style2_20230606120400.css new file mode 100644 index 00000000..6ed45a37 --- /dev/null +++ b/.history/src/style2_20230606120400.css @@ -0,0 +1,133 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(86, 143, 200) opaciti: 1; + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + + +button { + border-radius: 20px; + font-size: 15px; + font-family: Verdana, Geneva, Tahoma, sans-serif + background-color: gray; + color: black; + border-color: beige; + box-shadow +} + + +/*.clean { + +}*/ + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606120416.css b/.history/src/style2_20230606120416.css new file mode 100644 index 00000000..9f67dfc6 --- /dev/null +++ b/.history/src/style2_20230606120416.css @@ -0,0 +1,133 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(86, 143, 200) opaciti: 5; + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + + +button { + border-radius: 20px; + font-size: 15px; + font-family: Verdana, Geneva, Tahoma, sans-serif + background-color: gray; + color: black; + border-color: beige; + box-shadow +} + + +/*.clean { + +}*/ + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606120519.css b/.history/src/style2_20230606120519.css new file mode 100644 index 00000000..84afd7f8 --- /dev/null +++ b/.history/src/style2_20230606120519.css @@ -0,0 +1,133 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + + +button { + border-radius: 20px; + font-size: 15px; + font-family: Verdana, Geneva, Tahoma, sans-serif + background-color: gray; + color: black; + border-color: beige; + box-shadow +} + + +/*.clean { + +}*/ + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606120652.css b/.history/src/style2_20230606120652.css new file mode 100644 index 00000000..c3783a57 --- /dev/null +++ b/.history/src/style2_20230606120652.css @@ -0,0 +1,138 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif + background-color: gray; + color: black; + border-color: beige; + 10px 5px 5px black; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + + +/*.clean { + +}*/ + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606120716.css b/.history/src/style2_20230606120716.css new file mode 100644 index 00000000..8b7849bb --- /dev/null +++ b/.history/src/style2_20230606120716.css @@ -0,0 +1,138 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + letter-spacing: 2px; + line-height: 120px; + margin: 10px; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif + background-color: gray; + color: black; + border-color: beige; + 10px 5px 5px black; + letter-spacing: 0px; + line-height: 120px; + margin: 10px; +} + + +/*.clean { + +}*/ + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606120927.css b/.history/src/style2_20230606120927.css new file mode 100644 index 00000000..0d649a9a --- /dev/null +++ b/.history/src/style2_20230606120927.css @@ -0,0 +1,128 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +/*.clean { + +}*/ + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606121014.css b/.history/src/style2_20230606121014.css new file mode 100644 index 00000000..3687fc34 --- /dev/null +++ b/.history/src/style2_20230606121014.css @@ -0,0 +1,127 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606122838.css b/.history/src/style2_20230606122838.css new file mode 100644 index 00000000..7165091f --- /dev/null +++ b/.history/src/style2_20230606122838.css @@ -0,0 +1,127 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606132442.css b/.history/src/style2_20230606132442.css new file mode 100644 index 00000000..13df6f76 --- /dev/null +++ b/.history/src/style2_20230606132442.css @@ -0,0 +1,135 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + display: flex; + width: 150px; + height: 50px; + } + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606132545.css b/.history/src/style2_20230606132545.css new file mode 100644 index 00000000..e9e2c49c --- /dev/null +++ b/.history/src/style2_20230606132545.css @@ -0,0 +1,136 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + display: flex; + width: 150px; + height: 50px; + flex-direction: row; +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606141842.css b/.history/src/style2_20230606141842.css new file mode 100644 index 00000000..3c1a2fe1 --- /dev/null +++ b/.history/src/style2_20230606141842.css @@ -0,0 +1,138 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + margin: 100px; + padding: 15px; + display: flex; + width: 150px; + height: auto; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606143119.css b/.history/src/style2_20230606143119.css new file mode 100644 index 00000000..8c9cb773 --- /dev/null +++ b/.history/src/style2_20230606143119.css @@ -0,0 +1,135 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606143120.css b/.history/src/style2_20230606143120.css new file mode 100644 index 00000000..8c9cb773 --- /dev/null +++ b/.history/src/style2_20230606143120.css @@ -0,0 +1,135 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606143336.css b/.history/src/style2_20230606143336.css new file mode 100644 index 00000000..4f19277d --- /dev/null +++ b/.history/src/style2_20230606143336.css @@ -0,0 +1,141 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 50px; + height: 50px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606143543.css b/.history/src/style2_20230606143543.css new file mode 100644 index 00000000..2ac0ed46 --- /dev/null +++ b/.history/src/style2_20230606143543.css @@ -0,0 +1,141 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 150px; + height: 50px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606143557.css b/.history/src/style2_20230606143557.css new file mode 100644 index 00000000..d0aaee85 --- /dev/null +++ b/.history/src/style2_20230606143557.css @@ -0,0 +1,141 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 250px; + height: 250px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606143622.css b/.history/src/style2_20230606143622.css new file mode 100644 index 00000000..62ff2c72 --- /dev/null +++ b/.history/src/style2_20230606143622.css @@ -0,0 +1,141 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606144838.css b/.history/src/style2_20230606144838.css new file mode 100644 index 00000000..62ff2c72 --- /dev/null +++ b/.history/src/style2_20230606144838.css @@ -0,0 +1,141 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606144913.css b/.history/src/style2_20230606144913.css new file mode 100644 index 00000000..2e1fb61e --- /dev/null +++ b/.history/src/style2_20230606144913.css @@ -0,0 +1,142 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + background-color: tomato; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606145002.css b/.history/src/style2_20230606145002.css new file mode 100644 index 00000000..473a8023 --- /dev/null +++ b/.history/src/style2_20230606145002.css @@ -0,0 +1,143 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + background-color: tomato; + max-resolution: 100px; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606145026.css b/.history/src/style2_20230606145026.css new file mode 100644 index 00000000..e06feba7 --- /dev/null +++ b/.history/src/style2_20230606145026.css @@ -0,0 +1,143 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + background-color: tomato; + margin: auto; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606145048.css b/.history/src/style2_20230606145048.css new file mode 100644 index 00000000..010a8cbb --- /dev/null +++ b/.history/src/style2_20230606145048.css @@ -0,0 +1,144 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + background-color: tomato; + margin: auto; + border: 100px; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606145104.css b/.history/src/style2_20230606145104.css new file mode 100644 index 00000000..6fa370df --- /dev/null +++ b/.history/src/style2_20230606145104.css @@ -0,0 +1,144 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + background-color: tomato; + margin: 200px; + border: 100px; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606145131.css b/.history/src/style2_20230606145131.css new file mode 100644 index 00000000..010a8cbb --- /dev/null +++ b/.history/src/style2_20230606145131.css @@ -0,0 +1,144 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + background-color: tomato; + margin: auto; + border: 100px; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606145506.css b/.history/src/style2_20230606145506.css new file mode 100644 index 00000000..825132c5 --- /dev/null +++ b/.history/src/style2_20230606145506.css @@ -0,0 +1,145 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + background-color: tomato; + padding: 15px; + margin: 30px; + border: 100px; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606150417.css b/.history/src/style2_20230606150417.css new file mode 100644 index 00000000..c3890e91 --- /dev/null +++ b/.history/src/style2_20230606150417.css @@ -0,0 +1,144 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + background-color: tomato; + padding: 15px; + margin: 30px; + border: 100px; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606151014.css b/.history/src/style2_20230606151014.css new file mode 100644 index 00000000..ef7c7fc3 --- /dev/null +++ b/.history/src/style2_20230606151014.css @@ -0,0 +1,145 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + background-color: tomato; + font-size: 20px; + padding: 15px; + margin: 30px; + border: 100px; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606151039.css b/.history/src/style2_20230606151039.css new file mode 100644 index 00000000..fdc2b5e2 --- /dev/null +++ b/.history/src/style2_20230606151039.css @@ -0,0 +1,145 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + background-color: tomato; + font-size: 20px; + padding: 15px; + margin: 30px; + border: 20px; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606151152.css b/.history/src/style2_20230606151152.css new file mode 100644 index 00000000..f280a961 --- /dev/null +++ b/.history/src/style2_20230606151152.css @@ -0,0 +1,145 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + background-color: tomato; + box-sizing: 0px; + padding: 15px; + margin: 30px; + border: 20px; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606151223.css b/.history/src/style2_20230606151223.css new file mode 100644 index 00000000..c7acf4be --- /dev/null +++ b/.history/src/style2_20230606151223.css @@ -0,0 +1,141 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + background-color: tomato; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606151242.css b/.history/src/style2_20230606151242.css new file mode 100644 index 00000000..9932055c --- /dev/null +++ b/.history/src/style2_20230606151242.css @@ -0,0 +1,143 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + + + background-color: tomato; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 100px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606151256.css b/.history/src/style2_20230606151256.css new file mode 100644 index 00000000..2d2b1f6f --- /dev/null +++ b/.history/src/style2_20230606151256.css @@ -0,0 +1,143 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + + + background-color: tomato; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 80px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606151308.css b/.history/src/style2_20230606151308.css new file mode 100644 index 00000000..cb824f9a --- /dev/null +++ b/.history/src/style2_20230606151308.css @@ -0,0 +1,143 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + + + background-color: tomato; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606151400.css b/.history/src/style2_20230606151400.css new file mode 100644 index 00000000..e3a8546a --- /dev/null +++ b/.history/src/style2_20230606151400.css @@ -0,0 +1,146 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + padding: 15px; + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: tomato; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606151437.css b/.history/src/style2_20230606151437.css new file mode 100644 index 00000000..529a1b8c --- /dev/null +++ b/.history/src/style2_20230606151437.css @@ -0,0 +1,146 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + padding: 15px; + width: 900px; + height: 90px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; + background-color: tomato; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606151505.css b/.history/src/style2_20230606151505.css new file mode 100644 index 00000000..a7f86acb --- /dev/null +++ b/.history/src/style2_20230606151505.css @@ -0,0 +1,146 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + padding: 15px; + width: 900px; + height: 90px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; + background-color: tomato; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606151535.css b/.history/src/style2_20230606151535.css new file mode 100644 index 00000000..909c7b5d --- /dev/null +++ b/.history/src/style2_20230606151535.css @@ -0,0 +1,146 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + padding: 50px; + width: 900px; + height: 90px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; + background-color: tomato; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606151547.css b/.history/src/style2_20230606151547.css new file mode 100644 index 00000000..2ad15002 --- /dev/null +++ b/.history/src/style2_20230606151547.css @@ -0,0 +1,146 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + padding: 10px; + width: 900px; + height: 90px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; + background-color: tomato; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606151615.css b/.history/src/style2_20230606151615.css new file mode 100644 index 00000000..03e56621 --- /dev/null +++ b/.history/src/style2_20230606151615.css @@ -0,0 +1,147 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + padding: 10px; + width: 900px; + height: 90px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; + background-color: tomato; + background-position: 100%; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606151717.css b/.history/src/style2_20230606151717.css new file mode 100644 index 00000000..8277e6f3 --- /dev/null +++ b/.history/src/style2_20230606151717.css @@ -0,0 +1,147 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + padding: 10px; + width: 900px; + height: 90px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; + background-color: tomato; + position: relative; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606151744.css b/.history/src/style2_20230606151744.css new file mode 100644 index 00000000..730c6c50 --- /dev/null +++ b/.history/src/style2_20230606151744.css @@ -0,0 +1,147 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + padding: 10px; + width: 900px; + height: 90px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; + background-color: tomato; + position:initial; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606152153.css b/.history/src/style2_20230606152153.css new file mode 100644 index 00000000..bfd7a5d3 --- /dev/null +++ b/.history/src/style2_20230606152153.css @@ -0,0 +1,145 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + padding: 10px; + width: 900px; + height: 90px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; + background-color: tomato; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606152222.css b/.history/src/style2_20230606152222.css new file mode 100644 index 00000000..572b3f83 --- /dev/null +++ b/.history/src/style2_20230606152222.css @@ -0,0 +1,149 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + padding: 10px; + width: 900px; + height: 90px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; + background-color: tomato; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606152408.css b/.history/src/style2_20230606152408.css new file mode 100644 index 00000000..a5894a8d --- /dev/null +++ b/.history/src/style2_20230606152408.css @@ -0,0 +1,151 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + padding: 10px; + width: 900px; + height: 90px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; + background-color: tomato; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606152436.css b/.history/src/style2_20230606152436.css new file mode 100644 index 00000000..c39e82bd --- /dev/null +++ b/.history/src/style2_20230606152436.css @@ -0,0 +1,152 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + + /* padding: 10px; + width: 900px; + height: 90px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; + background-color: tomato; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px;*/ +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606152757.css b/.history/src/style2_20230606152757.css new file mode 100644 index 00000000..2f0b9133 --- /dev/null +++ b/.history/src/style2_20230606152757.css @@ -0,0 +1,154 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + /* padding: 10px; + width: 900px; + height: 90px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; + + + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px;*/ +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606152839.css b/.history/src/style2_20230606152839.css new file mode 100644 index 00000000..6a8ec349 --- /dev/null +++ b/.history/src/style2_20230606152839.css @@ -0,0 +1,154 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px;*/ + /* padding: 10px; + width: 900px; + height: 90px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; + + +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606152906.css b/.history/src/style2_20230606152906.css new file mode 100644 index 00000000..af7d11ed --- /dev/null +++ b/.history/src/style2_20230606152906.css @@ -0,0 +1,155 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + /* padding: 10px; + width: 900px; + height: 90px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; + */ + +} + +.filters{ + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606152950.css b/.history/src/style2_20230606152950.css new file mode 100644 index 00000000..d5769df4 --- /dev/null +++ b/.history/src/style2_20230606152950.css @@ -0,0 +1,157 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + /* padding: 10px; + width: 900px; + height: 90px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; + */ + +} + +.filters{ + justify-content: center; + align-items: center; + width: 900px; + height: 90px; + border: 1px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgba(86, 143, 200, 0.949); + padding: 15px; + display: flex; + flex-direction: row; +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial +{ + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters{ + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606153142.css b/.history/src/style2_20230606153142.css new file mode 100644 index 00000000..f0540b67 --- /dev/null +++ b/.history/src/style2_20230606153142.css @@ -0,0 +1,158 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + /* padding: 10px; + width: 900px; + height: 90px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; + */ + +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + /*padding: 15px; + width: 900px; + height: 90px;*/ + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606153224.css b/.history/src/style2_20230606153224.css new file mode 100644 index 00000000..9cd40c48 --- /dev/null +++ b/.history/src/style2_20230606153224.css @@ -0,0 +1,158 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + /* padding: 10px; + width: 900px; + height: 90px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; + */ + +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + /*width: 900px; + height: 90px;*/ + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606153249.css b/.history/src/style2_20230606153249.css new file mode 100644 index 00000000..33ece5e3 --- /dev/null +++ b/.history/src/style2_20230606153249.css @@ -0,0 +1,158 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + /* padding: 10px; + width: 900px; + height: 90px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; + */ + +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + width: 900px; + /*height: 90px;*/ + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606153306.css b/.history/src/style2_20230606153306.css new file mode 100644 index 00000000..bf6956d5 --- /dev/null +++ b/.history/src/style2_20230606153306.css @@ -0,0 +1,156 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + /* padding: 10px; + width: 900px; + height: 90px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; + */ + +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606153339.css b/.history/src/style2_20230606153339.css new file mode 100644 index 00000000..0cd2b54f --- /dev/null +++ b/.history/src/style2_20230606153339.css @@ -0,0 +1,151 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; + } + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606153346.css b/.history/src/style2_20230606153346.css new file mode 100644 index 00000000..7cf1d051 --- /dev/null +++ b/.history/src/style2_20230606153346.css @@ -0,0 +1,151 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 10px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606154028.css b/.history/src/style2_20230606154028.css new file mode 100644 index 00000000..263e70a8 --- /dev/null +++ b/.history/src/style2_20230606154028.css @@ -0,0 +1,151 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606154048.css b/.history/src/style2_20230606154048.css new file mode 100644 index 00000000..97422b69 --- /dev/null +++ b/.history/src/style2_20230606154048.css @@ -0,0 +1,151 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 200px; + height: 250px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606154107.css b/.history/src/style2_20230606154107.css new file mode 100644 index 00000000..7af75fa3 --- /dev/null +++ b/.history/src/style2_20230606154107.css @@ -0,0 +1,151 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 200px; + height: 100px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606154124.css b/.history/src/style2_20230606154124.css new file mode 100644 index 00000000..cffc9b98 --- /dev/null +++ b/.history/src/style2_20230606154124.css @@ -0,0 +1,151 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 200px; + height: 80px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606154135.css b/.history/src/style2_20230606154135.css new file mode 100644 index 00000000..bce450a2 --- /dev/null +++ b/.history/src/style2_20230606154135.css @@ -0,0 +1,151 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 200px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606154152.css b/.history/src/style2_20230606154152.css new file mode 100644 index 00000000..9a490bf7 --- /dev/null +++ b/.history/src/style2_20230606154152.css @@ -0,0 +1,151 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606154208.css b/.history/src/style2_20230606154208.css new file mode 100644 index 00000000..97fd6176 --- /dev/null +++ b/.history/src/style2_20230606154208.css @@ -0,0 +1,151 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + display: flex; + flex-direction: row; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606154432.css b/.history/src/style2_20230606154432.css new file mode 100644 index 00000000..d48dd6d4 --- /dev/null +++ b/.history/src/style2_20230606154432.css @@ -0,0 +1,153 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + display: flex; + flex-direction: row; + + /*width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px;*/ + + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606154449.css b/.history/src/style2_20230606154449.css new file mode 100644 index 00000000..0b3660e3 --- /dev/null +++ b/.history/src/style2_20230606154449.css @@ -0,0 +1,153 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + display: flex; + flex-direction: column; + + /*width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px;*/ + + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606155635.css b/.history/src/style2_20230606155635.css new file mode 100644 index 00000000..84936595 --- /dev/null +++ b/.history/src/style2_20230606155635.css @@ -0,0 +1,155 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + display: flex; + flex-direction: row; + flex-wrap: wrap; + + + /*width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px;*/ + + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606155735.css b/.history/src/style2_20230606155735.css new file mode 100644 index 00000000..a3483a84 --- /dev/null +++ b/.history/src/style2_20230606155735.css @@ -0,0 +1,155 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content:center + + /*width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px;*/ + + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606155740.css b/.history/src/style2_20230606155740.css new file mode 100644 index 00000000..7c0b8df2 --- /dev/null +++ b/.history/src/style2_20230606155740.css @@ -0,0 +1,156 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content:center; + + + /*width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px;*/ + + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606160001.css b/.history/src/style2_20230606160001.css new file mode 100644 index 00000000..658644a8 --- /dev/null +++ b/.history/src/style2_20230606160001.css @@ -0,0 +1,154 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content:center; + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606160347.css b/.history/src/style2_20230606160347.css new file mode 100644 index 00000000..97fecf89 --- /dev/null +++ b/.history/src/style2_20230606160347.css @@ -0,0 +1,155 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content:center; + order: 5; + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606160433.css b/.history/src/style2_20230606160433.css new file mode 100644 index 00000000..47e30fb3 --- /dev/null +++ b/.history/src/style2_20230606160433.css @@ -0,0 +1,155 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content:center; + order: 5; + /* width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px;*/ + + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606160456.css b/.history/src/style2_20230606160456.css new file mode 100644 index 00000000..fa878972 --- /dev/null +++ b/.history/src/style2_20230606160456.css @@ -0,0 +1,156 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content:center; + order: 5; + + width: 300px; + height: 300px; + border: 1px;h + margin: auto; + padding: 15px; + + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606160947.css b/.history/src/style2_20230606160947.css new file mode 100644 index 00000000..8ae610b0 --- /dev/null +++ b/.history/src/style2_20230606160947.css @@ -0,0 +1,154 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + + +.soloPosters { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606162447.css b/.history/src/style2_20230606162447.css new file mode 100644 index 00000000..bab6a693 --- /dev/null +++ b/.history/src/style2_20230606162447.css @@ -0,0 +1,157 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230606163432.css b/.history/src/style2_20230606163432.css new file mode 100644 index 00000000..3c1e1dc1 --- /dev/null +++ b/.history/src/style2_20230606163432.css @@ -0,0 +1,157 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + +} + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230606165046.css b/.history/src/style2_20230606165046.css new file mode 100644 index 00000000..57664dc4 --- /dev/null +++ b/.history/src/style2_20230606165046.css @@ -0,0 +1,157 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 400px; + height: 400px; + border: 1px; + margin: auto; + padding: 15px; + +} + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230606165125.css b/.history/src/style2_20230606165125.css new file mode 100644 index 00000000..e205e4dc --- /dev/null +++ b/.history/src/style2_20230606165125.css @@ -0,0 +1,157 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 200px; + height: 200px; + border: 1px; + margin: auto; + padding: 15px; + +} + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230606165200.css b/.history/src/style2_20230606165200.css new file mode 100644 index 00000000..3c1e1dc1 --- /dev/null +++ b/.history/src/style2_20230606165200.css @@ -0,0 +1,157 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + +} + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230606165349.css b/.history/src/style2_20230606165349.css new file mode 100644 index 00000000..bf83d84f --- /dev/null +++ b/.history/src/style2_20230606165349.css @@ -0,0 +1,158 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + box-shadow: 10px 5px 5px black; + +} + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230606165410.css b/.history/src/style2_20230606165410.css new file mode 100644 index 00000000..54b28e4b --- /dev/null +++ b/.history/src/style2_20230606165410.css @@ -0,0 +1,158 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + box-shadow: 10px 15px 15px black; + +} + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230606165613.css b/.history/src/style2_20230606165613.css new file mode 100644 index 00000000..474e918a --- /dev/null +++ b/.history/src/style2_20230606165613.css @@ -0,0 +1,158 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + box-shadow: 10px 15px 15px red; + +} + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230606165655.css b/.history/src/style2_20230606165655.css new file mode 100644 index 00000000..5090cf22 --- /dev/null +++ b/.history/src/style2_20230606165655.css @@ -0,0 +1,158 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 15px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230606165737.css b/.history/src/style2_20230606165737.css new file mode 100644 index 00000000..751d46a6 --- /dev/null +++ b/.history/src/style2_20230606165737.css @@ -0,0 +1,158 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 1px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230606165753.css b/.history/src/style2_20230606165753.css new file mode 100644 index 00000000..848d877c --- /dev/null +++ b/.history/src/style2_20230606165753.css @@ -0,0 +1,158 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: gray; + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230606165936.css b/.history/src/style2_20230606165936.css new file mode 100644 index 00000000..2471fd11 --- /dev/null +++ b/.history/src/style2_20230606165936.css @@ -0,0 +1,158 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(95, 221, 116); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230606165959.css b/.history/src/style2_20230606165959.css new file mode 100644 index 00000000..abf8a3dc --- /dev/null +++ b/.history/src/style2_20230606165959.css @@ -0,0 +1,158 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: gray; + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230606170040.css b/.history/src/style2_20230606170040.css new file mode 100644 index 00000000..1350eae4 --- /dev/null +++ b/.history/src/style2_20230606170040.css @@ -0,0 +1,158 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608104237.css b/.history/src/style2_20230608104237.css new file mode 100644 index 00000000..1ef727f7 --- /dev/null +++ b/.history/src/style2_20230608104237.css @@ -0,0 +1,184 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + +.soloTitulo { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloAño { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608104324.css b/.history/src/style2_20230608104324.css new file mode 100644 index 00000000..f1441cf1 --- /dev/null +++ b/.history/src/style2_20230608104324.css @@ -0,0 +1,181 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + +.soloTitulo { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + + +.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608104424.css b/.history/src/style2_20230608104424.css new file mode 100644 index 00000000..cb1b86e0 --- /dev/null +++ b/.history/src/style2_20230608104424.css @@ -0,0 +1,181 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + +} + +.soloTitulo { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); +display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + + +/*.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +}*/ + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608104455.css b/.history/src/style2_20230608104455.css new file mode 100644 index 00000000..2d6dae60 --- /dev/null +++ b/.history/src/style2_20230608104455.css @@ -0,0 +1,181 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + +.soloTitulo { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + + +/*.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +}*/ + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608105249.css b/.history/src/style2_20230608105249.css new file mode 100644 index 00000000..22de6dc6 --- /dev/null +++ b/.history/src/style2_20230608105249.css @@ -0,0 +1,183 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + +.soloTitulo { + font-size: 27px; + font-weight: 300; + margin-top: 4px; + margin-bottom: 14px; + letter-spacing: -1px; + background-color: #f9cd8f; + + +} + + +/*.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +}*/ + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608105400.css b/.history/src/style2_20230608105400.css new file mode 100644 index 00000000..5bbe0d8e --- /dev/null +++ b/.history/src/style2_20230608105400.css @@ -0,0 +1,186 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + +.soloTitulo { + font-size: 27px; + font-weight: 300; + margin-top: 4px; + margin-bottom: 14px; + letter-spacing: -1px; + width: 700px; + height: 420px; + border-radius: 3px; + background-color: #fff; + + +} + + +/*.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +}*/ + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608105545.css b/.history/src/style2_20230608105545.css new file mode 100644 index 00000000..e72b07e5 --- /dev/null +++ b/.history/src/style2_20230608105545.css @@ -0,0 +1,193 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + +.soloTitulo { + font-size: 27px; + font-weight: 300; + margin-top: 4px; + margin-bottom: 14px; + letter-spacing: -1px; + font-size: 12px; + font-weight: 300; + line-height: 23px; + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 87%; + margin: 0; + padding: 59px 40px 40px; + -webkit-box-shadow: inset -1px -10px 11px -11px rgba(209, 207, 210, 1); + -moz-box-shadow: inset -1px -10px 11px -11px rgba(209, 207, 210, 1); + box-shadow: inset -1px -10px 11px -11px rgba(209, 207, 210, 1); +} + + +/*.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +}*/ + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608105619.css b/.history/src/style2_20230608105619.css new file mode 100644 index 00000000..81a5c358 --- /dev/null +++ b/.history/src/style2_20230608105619.css @@ -0,0 +1,195 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + +.soloTitulo { + /* font-size: 27px; + font-weight: 300; + margin-top: 4px; + margin-bottom: 14px; + letter-spacing: -1px;*/ + + + font-size: 12px; + font-weight: 300; + line-height: 23px; + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 87%; + margin: 0; + padding: 59px 40px 40px; + -webkit-box-shadow: inset -1px -10px 11px -11px rgba(209, 207, 210, 1); + -moz-box-shadow: inset -1px -10px 11px -11px rgba(209, 207, 210, 1); + box-shadow: inset -1px -10px 11px -11px rgba(209, 207, 210, 1); +} + + +/*.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +}*/ + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608105704.css b/.history/src/style2_20230608105704.css new file mode 100644 index 00000000..38072f37 --- /dev/null +++ b/.history/src/style2_20230608105704.css @@ -0,0 +1,190 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + +.soloTitulo { + /* font-size: 27px; + font-weight: 300; + margin-top: 4px; + margin-bottom: 14px; + letter-spacing: -1px;*/ + position: absolute; + top: 0; + left: 0; + width: 45%; + height: 100%; + padding: 40px; + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + + } + + +/*.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +}*/ + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608105746.css b/.history/src/style2_20230608105746.css new file mode 100644 index 00000000..121deb96 --- /dev/null +++ b/.history/src/style2_20230608105746.css @@ -0,0 +1,184 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + +.soloTitulo { + font-size: 27px; + font-weight: 300; + margin-top: 4px; + margin-bottom: 14px; + letter-spacing: -1px;*/ + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + + } + + +/*.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +}*/ + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608105825.css b/.history/src/style2_20230608105825.css new file mode 100644 index 00000000..eb5885b8 --- /dev/null +++ b/.history/src/style2_20230608105825.css @@ -0,0 +1,184 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + +.soloTitulo { + font-size: 27px; + font-weight: 300; + margin-top: 4px; + margin-bottom: 14px; + letter-spacing: -1px; + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + + +/*.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +}*/ + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608105944.css b/.history/src/style2_20230608105944.css new file mode 100644 index 00000000..b959d8c4 --- /dev/null +++ b/.history/src/style2_20230608105944.css @@ -0,0 +1,184 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + +.soloTitulo { + font-size: 27px; + font-weight: 300; + margin-top: 4px; + margin-bottom: 14px; + letter-spacing: 2px; + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + + +/*.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +}*/ + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608110048.css b/.history/src/style2_20230608110048.css new file mode 100644 index 00000000..c3451d8e --- /dev/null +++ b/.history/src/style2_20230608110048.css @@ -0,0 +1,184 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + +.soloTitulo { + font-size: 27px; + font-weight: 200; + margin-top: 4px; + margin-bottom: 14px; + letter-spacing: 2px; + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + + +/*.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +}*/ + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608110107.css b/.history/src/style2_20230608110107.css new file mode 100644 index 00000000..a6eacd4e --- /dev/null +++ b/.history/src/style2_20230608110107.css @@ -0,0 +1,184 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + +.soloTitulo { + font-size: 27px; + font-weight: 350; + margin-top: 4px; + margin-bottom: 14px; + letter-spacing: 2px; + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + + +/*.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +}*/ + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608110109.css b/.history/src/style2_20230608110109.css new file mode 100644 index 00000000..15b63176 --- /dev/null +++ b/.history/src/style2_20230608110109.css @@ -0,0 +1,184 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + +.soloTitulo { + font-size: 27px; + font-weight: 350px; + margin-top: 4px; + margin-bottom: 14px; + letter-spacing: 2px; + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + + +/*.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +}*/ + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608110237.css b/.history/src/style2_20230608110237.css new file mode 100644 index 00000000..6677819a --- /dev/null +++ b/.history/src/style2_20230608110237.css @@ -0,0 +1,184 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + +.soloTitulo { + font-size: 27px; + font-weight: 100px; + margin-top: 4px; + margin-bottom: 14px; + letter-spacing: 2px; + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + + +/*.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +}*/ + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608110309.css b/.history/src/style2_20230608110309.css new file mode 100644 index 00000000..ab69d948 --- /dev/null +++ b/.history/src/style2_20230608110309.css @@ -0,0 +1,185 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + +.soloTitulo { + padding: 15px; + font-size: 27px; + font-weight: 100px; + margin-top: 4px; + margin-bottom: 14px; + letter-spacing: 2px; + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + + +/*.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +}*/ + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608110356.css b/.history/src/style2_20230608110356.css new file mode 100644 index 00000000..2f94ccdc --- /dev/null +++ b/.history/src/style2_20230608110356.css @@ -0,0 +1,185 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + +.soloTitulo { + padding: 15px; + font-size: 27px; + font-weight: 100px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + + +/*.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +}*/ + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608110435.css b/.history/src/style2_20230608110435.css new file mode 100644 index 00000000..def5bbce --- /dev/null +++ b/.history/src/style2_20230608110435.css @@ -0,0 +1,187 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + +.soloTitulo { + display: flex; + flex-direction: column; + padding: 15px; + font-size: 27px; + font-weight: 100px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + + +/*.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +}*/ + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608110521.css b/.history/src/style2_20230608110521.css new file mode 100644 index 00000000..c7167df3 --- /dev/null +++ b/.history/src/style2_20230608110521.css @@ -0,0 +1,189 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + +.soloTitulo { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + padding: 15px; + font-size: 27px; + font-weight: 100px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + + +/*.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +}*/ + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608111655.css b/.history/src/style2_20230608111655.css new file mode 100644 index 00000000..69cff305 --- /dev/null +++ b/.history/src/style2_20230608111655.css @@ -0,0 +1,188 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + +/* +.soloTitulo { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + padding: 15px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + +.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +}*/ + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608111747.css b/.history/src/style2_20230608111747.css new file mode 100644 index 00000000..04bbf4a0 --- /dev/null +++ b/.history/src/style2_20230608111747.css @@ -0,0 +1,188 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + +/* +.soloTitulo { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + padding: 15px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + +.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +}*/ + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608112904.css b/.history/src/style2_20230608112904.css new file mode 100644 index 00000000..69cff305 --- /dev/null +++ b/.history/src/style2_20230608112904.css @@ -0,0 +1,188 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + +/* +.soloTitulo { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + padding: 15px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + +.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +}*/ + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608113820.css b/.history/src/style2_20230608113820.css new file mode 100644 index 00000000..fc19f55a --- /dev/null +++ b/.history/src/style2_20230608113820.css @@ -0,0 +1,185 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + justify-content: center; + padding: 15px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + +.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608113841.css b/.history/src/style2_20230608113841.css new file mode 100644 index 00000000..4462ccdb --- /dev/null +++ b/.history/src/style2_20230608113841.css @@ -0,0 +1,185 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + justify-content: center; + padding: 10px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + +.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608113900.css b/.history/src/style2_20230608113900.css new file mode 100644 index 00000000..96163136 --- /dev/null +++ b/.history/src/style2_20230608113900.css @@ -0,0 +1,186 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + margin: 15px; + justify-content: center; + padding: 10px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + +.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608113938.css b/.history/src/style2_20230608113938.css new file mode 100644 index 00000000..5748b758 --- /dev/null +++ b/.history/src/style2_20230608113938.css @@ -0,0 +1,187 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 300px; + height: 300px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + margin: 15px; + justify-content: center; + padding: 10px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + +.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608114002.css b/.history/src/style2_20230608114002.css new file mode 100644 index 00000000..8f75d344 --- /dev/null +++ b/.history/src/style2_20230608114002.css @@ -0,0 +1,187 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 3500px; + height: 350px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + margin: 15px; + justify-content: center; + padding: 10px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + +.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608114012.css b/.history/src/style2_20230608114012.css new file mode 100644 index 00000000..e14863ea --- /dev/null +++ b/.history/src/style2_20230608114012.css @@ -0,0 +1,187 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + + width: 350px; + height: 350px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + margin: 15px; + justify-content: center; + padding: 10px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + +.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608114156.css b/.history/src/style2_20230608114156.css new file mode 100644 index 00000000..f7600545 --- /dev/null +++ b/.history/src/style2_20230608114156.css @@ -0,0 +1,188 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + margin: 15px; + justify-content: center; + padding: 10px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + +.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608114243.css b/.history/src/style2_20230608114243.css new file mode 100644 index 00000000..61b9830d --- /dev/null +++ b/.history/src/style2_20230608114243.css @@ -0,0 +1,189 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + justify-content: center; + padding: 10px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + +.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608114411.css b/.history/src/style2_20230608114411.css new file mode 100644 index 00000000..985d1215 --- /dev/null +++ b/.history/src/style2_20230608114411.css @@ -0,0 +1,189 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-justify: center; + padding: 10px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + +.soloAño { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608114557.css b/.history/src/style2_20230608114557.css new file mode 100644 index 00000000..42354b94 --- /dev/null +++ b/.history/src/style2_20230608114557.css @@ -0,0 +1,196 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-justify: center; + padding: 10px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-justify: center; + padding: 10px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608114619.css b/.history/src/style2_20230608114619.css new file mode 100644 index 00000000..ae614c43 --- /dev/null +++ b/.history/src/style2_20230608114619.css @@ -0,0 +1,196 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-justify: center; + padding: 10px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + +.soloAño { + + font-weight: bold; + margin: 2px; + text-justify: center; + padding: 10px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608114629.css b/.history/src/style2_20230608114629.css new file mode 100644 index 00000000..ae614c43 --- /dev/null +++ b/.history/src/style2_20230608114629.css @@ -0,0 +1,196 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-justify: center; + padding: 10px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + +.soloAño { + + font-weight: bold; + margin: 2px; + text-justify: center; + padding: 10px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608114639.css b/.history/src/style2_20230608114639.css new file mode 100644 index 00000000..2294a9b1 --- /dev/null +++ b/.history/src/style2_20230608114639.css @@ -0,0 +1,196 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-justify: center; + padding: 10px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-justify: center; + padding: 5px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608114704.css b/.history/src/style2_20230608114704.css new file mode 100644 index 00000000..469395b9 --- /dev/null +++ b/.history/src/style2_20230608114704.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-justify: center; + padding: 10px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-justify: center; + padding: 5px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608114729.css b/.history/src/style2_20230608114729.css new file mode 100644 index 00000000..469395b9 --- /dev/null +++ b/.history/src/style2_20230608114729.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-justify: center; + padding: 10px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-justify: center; + padding: 5px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608120339.css b/.history/src/style2_20230608120339.css new file mode 100644 index 00000000..011c04b0 --- /dev/null +++ b/.history/src/style2_20230608120339.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 4px; + margin-bottom: 4px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608120408.css b/.history/src/style2_20230608120408.css new file mode 100644 index 00000000..4c24f11d --- /dev/null +++ b/.history/src/style2_20230608120408.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 4px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 4px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608120541.css b/.history/src/style2_20230608120541.css new file mode 100644 index 00000000..fb2f794e --- /dev/null +++ b/.history/src/style2_20230608120541.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608120702.css b/.history/src/style2_20230608120702.css new file mode 100644 index 00000000..ac00cb76 --- /dev/null +++ b/.history/src/style2_20230608120702.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949); + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: #484855; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608120735.css b/.history/src/style2_20230608120735.css new file mode 100644 index 00000000..18e5f919 --- /dev/null +++ b/.history/src/style2_20230608120735.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949); + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949);/* #484855;*/ + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608120803.css b/.history/src/style2_20230608120803.css new file mode 100644 index 00000000..da3cb84f --- /dev/null +++ b/.history/src/style2_20230608120803.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #fff; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949); + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949);/* ;*/ + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608120816.css b/.history/src/style2_20230608120816.css new file mode 100644 index 00000000..dfd58272 --- /dev/null +++ b/.history/src/style2_20230608120816.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949); + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949);/* ;*/ + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608120849.css b/.history/src/style2_20230608120849.css new file mode 100644 index 00000000..415daa21 --- /dev/null +++ b/.history/src/style2_20230608120849.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949); + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949);/* ;*/ + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608120904.css b/.history/src/style2_20230608120904.css new file mode 100644 index 00000000..b8cae223 --- /dev/null +++ b/.history/src/style2_20230608120904.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgb(100, 86, 86); + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949);/* ;*/ + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608120909.css b/.history/src/style2_20230608120909.css new file mode 100644 index 00000000..415daa21 --- /dev/null +++ b/.history/src/style2_20230608120909.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949); + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949);/* ;*/ + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608121025.css b/.history/src/style2_20230608121025.css new file mode 100644 index 00000000..c587c287 --- /dev/null +++ b/.history/src/style2_20230608121025.css @@ -0,0 +1,198 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + justify-content: center; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949); + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949);/* ;*/ + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608121054.css b/.history/src/style2_20230608121054.css new file mode 100644 index 00000000..dcc51a92 --- /dev/null +++ b/.history/src/style2_20230608121054.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949); + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949);/* ;*/ + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +/*footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +}*/ \ No newline at end of file diff --git a/.history/src/style2_20230608121136.css b/.history/src/style2_20230608121136.css new file mode 100644 index 00000000..441c7a72 --- /dev/null +++ b/.history/src/style2_20230608121136.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949); + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949);/* ;*/ + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + /*position: absolute; + bottom: 0%;*/ +} \ No newline at end of file diff --git a/.history/src/style2_20230608121155.css b/.history/src/style2_20230608121155.css new file mode 100644 index 00000000..b3cd7e1e --- /dev/null +++ b/.history/src/style2_20230608121155.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949); + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949);/* ;*/ + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230608121215.css b/.history/src/style2_20230608121215.css new file mode 100644 index 00000000..388e1cdd --- /dev/null +++ b/.history/src/style2_20230608121215.css @@ -0,0 +1,196 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949); + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949);/* ;*/ + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230608121237.css b/.history/src/style2_20230608121237.css new file mode 100644 index 00000000..16f23bd5 --- /dev/null +++ b/.history/src/style2_20230608121237.css @@ -0,0 +1,196 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949); + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949);/* ;*/ + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: black; + color: beige; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style2_20230608121256.css b/.history/src/style2_20230608121256.css new file mode 100644 index 00000000..7513406b --- /dev/null +++ b/.history/src/style2_20230608121256.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949); + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949);/* ;*/ + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: black; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230608123431.css b/.history/src/style2_20230608123431.css new file mode 100644 index 00000000..17876a1f --- /dev/null +++ b/.history/src/style2_20230608123431.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949); + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949);/* ;*/ + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230608123509.css b/.history/src/style2_20230608123509.css new file mode 100644 index 00000000..87fed383 --- /dev/null +++ b/.history/src/style2_20230608123509.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949); + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #86, 143, 200, 0.949bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230608123557.css b/.history/src/style2_20230608123557.css new file mode 100644 index 00000000..5d4a6876 --- /dev/null +++ b/.history/src/style2_20230608123557.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: rgba(86, 143, 200, 0.949); + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230608123632.css b/.history/src/style2_20230608123632.css new file mode 100644 index 00000000..1be2e1ea --- /dev/null +++ b/.history/src/style2_20230608123632.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613103058.css b/.history/src/style2_20230613103058.css new file mode 100644 index 00000000..92d103a1 --- /dev/null +++ b/.history/src/style2_20230613103058.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613103112.css b/.history/src/style2_20230613103112.css new file mode 100644 index 00000000..049ae962 --- /dev/null +++ b/.history/src/style2_20230613103112.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 350px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613103936.css b/.history/src/style2_20230613103936.css new file mode 100644 index 00000000..57344ccc --- /dev/null +++ b/.history/src/style2_20230613103936.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 450px; + height: 450px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613104001.css b/.history/src/style2_20230613104001.css new file mode 100644 index 00000000..918251cb --- /dev/null +++ b/.history/src/style2_20230613104001.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 550px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613104713.css b/.history/src/style2_20230613104713.css new file mode 100644 index 00000000..e9249622 --- /dev/null +++ b/.history/src/style2_20230613104713.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 30px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 550px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613104732.css b/.history/src/style2_20230613104732.css new file mode 100644 index 00000000..01535814 --- /dev/null +++ b/.history/src/style2_20230613104732.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: 10px; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 550px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613104758.css b/.history/src/style2_20230613104758.css new file mode 100644 index 00000000..6c9d2de6 --- /dev/null +++ b/.history/src/style2_20230613104758.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: 20px; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 550px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613104815.css b/.history/src/style2_20230613104815.css new file mode 100644 index 00000000..44072787 --- /dev/null +++ b/.history/src/style2_20230613104815.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: 10px; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 550px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613104836.css b/.history/src/style2_20230613104836.css new file mode 100644 index 00000000..ead352f5 --- /dev/null +++ b/.history/src/style2_20230613104836.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 550px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613105823.css b/.history/src/style2_20230613105823.css new file mode 100644 index 00000000..110178ee --- /dev/null +++ b/.history/src/style2_20230613105823.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 150px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 550px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613105852.css b/.history/src/style2_20230613105852.css new file mode 100644 index 00000000..f18d9743 --- /dev/null +++ b/.history/src/style2_20230613105852.css @@ -0,0 +1,197 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 550px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613145029.css b/.history/src/style2_20230613145029.css new file mode 100644 index 00000000..9d347b29 --- /dev/null +++ b/.history/src/style2_20230613145029.css @@ -0,0 +1,206 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 550px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + +.soloDescripción { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; + + +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613145045.css b/.history/src/style2_20230613145045.css new file mode 100644 index 00000000..2c8c2366 --- /dev/null +++ b/.history/src/style2_20230613145045.css @@ -0,0 +1,206 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 550px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + +.soloDescripción { + + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + order: 5; + + +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613145109.css b/.history/src/style2_20230613145109.css new file mode 100644 index 00000000..9c671b9b --- /dev/null +++ b/.history/src/style2_20230613145109.css @@ -0,0 +1,214 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 550px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + +.soloDescripción { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + + +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613145134.css b/.history/src/style2_20230613145134.css new file mode 100644 index 00000000..10c28e76 --- /dev/null +++ b/.history/src/style2_20230613145134.css @@ -0,0 +1,214 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 550px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + + +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613145206.css b/.history/src/style2_20230613145206.css new file mode 100644 index 00000000..6a491f14 --- /dev/null +++ b/.history/src/style2_20230613145206.css @@ -0,0 +1,214 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 550px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + + +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613145306.css b/.history/src/style2_20230613145306.css new file mode 100644 index 00000000..66ac7008 --- /dev/null +++ b/.history/src/style2_20230613145306.css @@ -0,0 +1,227 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 550px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613145314.css b/.history/src/style2_20230613145314.css new file mode 100644 index 00000000..bdf2ee59 --- /dev/null +++ b/.history/src/style2_20230613145314.css @@ -0,0 +1,227 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 550px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613145704.css b/.history/src/style2_20230613145704.css new file mode 100644 index 00000000..4fda60eb --- /dev/null +++ b/.history/src/style2_20230613145704.css @@ -0,0 +1,245 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 550px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613145733.css b/.history/src/style2_20230613145733.css new file mode 100644 index 00000000..4fda60eb --- /dev/null +++ b/.history/src/style2_20230613145733.css @@ -0,0 +1,245 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 550px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613145758.css b/.history/src/style2_20230613145758.css new file mode 100644 index 00000000..eb093ec1 --- /dev/null +++ b/.history/src/style2_20230613145758.css @@ -0,0 +1,245 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613150039.css b/.history/src/style2_20230613150039.css new file mode 100644 index 00000000..f2839739 --- /dev/null +++ b/.history/src/style2_20230613150039.css @@ -0,0 +1,253 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +#caja2 { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613150138.css b/.history/src/style2_20230613150138.css new file mode 100644 index 00000000..0ec6761a --- /dev/null +++ b/.history/src/style2_20230613150138.css @@ -0,0 +1,246 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613150215.css b/.history/src/style2_20230613150215.css new file mode 100644 index 00000000..b330edec --- /dev/null +++ b/.history/src/style2_20230613150215.css @@ -0,0 +1,246 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613151356.css b/.history/src/style2_20230613151356.css new file mode 100644 index 00000000..b0a0501d --- /dev/null +++ b/.history/src/style2_20230613151356.css @@ -0,0 +1,248 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613151435.css b/.history/src/style2_20230613151435.css new file mode 100644 index 00000000..201f8166 --- /dev/null +++ b/.history/src/style2_20230613151435.css @@ -0,0 +1,248 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613151507.css b/.history/src/style2_20230613151507.css new file mode 100644 index 00000000..b0a0501d --- /dev/null +++ b/.history/src/style2_20230613151507.css @@ -0,0 +1,248 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613151517.css b/.history/src/style2_20230613151517.css new file mode 100644 index 00000000..24fbb1c0 --- /dev/null +++ b/.history/src/style2_20230613151517.css @@ -0,0 +1,248 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + order: 5; +} + + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613151604.css b/.history/src/style2_20230613151604.css new file mode 100644 index 00000000..a3d0721b --- /dev/null +++ b/.history/src/style2_20230613151604.css @@ -0,0 +1,249 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + justify-content: center; + order: 5; +} + + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613151702.css b/.history/src/style2_20230613151702.css new file mode 100644 index 00000000..2b85ef12 --- /dev/null +++ b/.history/src/style2_20230613151702.css @@ -0,0 +1,250 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 5px; + /* justify-content: center; + order: 5;*/ +} + + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613151710.css b/.history/src/style2_20230613151710.css new file mode 100644 index 00000000..2b85ef12 --- /dev/null +++ b/.history/src/style2_20230613151710.css @@ -0,0 +1,250 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 5px; + /* justify-content: center; + order: 5;*/ +} + + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613151754.css b/.history/src/style2_20230613151754.css new file mode 100644 index 00000000..6cedb30f --- /dev/null +++ b/.history/src/style2_20230613151754.css @@ -0,0 +1,250 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + /* justify-content: center; + order: 5;*/ +} + + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613151801.css b/.history/src/style2_20230613151801.css new file mode 100644 index 00000000..61a9a2b2 --- /dev/null +++ b/.history/src/style2_20230613151801.css @@ -0,0 +1,250 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + /* justify-content: center; + order: 5;*/ +} + + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613151850.css b/.history/src/style2_20230613151850.css new file mode 100644 index 00000000..38b5b281 --- /dev/null +++ b/.history/src/style2_20230613151850.css @@ -0,0 +1,250 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613151922.css b/.history/src/style2_20230613151922.css new file mode 100644 index 00000000..38b5b281 --- /dev/null +++ b/.history/src/style2_20230613151922.css @@ -0,0 +1,250 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613152123.css b/.history/src/style2_20230613152123.css new file mode 100644 index 00000000..c1f78bd4 --- /dev/null +++ b/.history/src/style2_20230613152123.css @@ -0,0 +1,250 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 450px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613152256.css b/.history/src/style2_20230613152256.css new file mode 100644 index 00000000..fa320d22 --- /dev/null +++ b/.history/src/style2_20230613152256.css @@ -0,0 +1,248 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 450px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 30px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613152415.css b/.history/src/style2_20230613152415.css new file mode 100644 index 00000000..c1f78bd4 --- /dev/null +++ b/.history/src/style2_20230613152415.css @@ -0,0 +1,250 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 450px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 30px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613152449.css b/.history/src/style2_20230613152449.css new file mode 100644 index 00000000..b1a75fdd --- /dev/null +++ b/.history/src/style2_20230613152449.css @@ -0,0 +1,245 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 450px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align:center; + font-weight: bolder; + width: 450px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 1px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613152535.css b/.history/src/style2_20230613152535.css new file mode 100644 index 00000000..c5f3a8f6 --- /dev/null +++ b/.history/src/style2_20230613152535.css @@ -0,0 +1,245 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align:center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align:center; + font-weight: bolder; + width: 450px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); +} + +.soloDirectores { + font-weight: bold; + margin: 15px; + text-align:center; + padding: 1px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align:center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613152801.css b/.history/src/style2_20230613152801.css new file mode 100644 index 00000000..b3e4360e --- /dev/null +++ b/.history/src/style2_20230613152801.css @@ -0,0 +1,248 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align: center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align: center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align: center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613152852.css b/.history/src/style2_20230613152852.css new file mode 100644 index 00000000..a2a43151 --- /dev/null +++ b/.history/src/style2_20230613152852.css @@ -0,0 +1,248 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align: center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align: center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 200px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align: center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613152911.css b/.history/src/style2_20230613152911.css new file mode 100644 index 00000000..34116757 --- /dev/null +++ b/.history/src/style2_20230613152911.css @@ -0,0 +1,248 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align: center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align: center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 200px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + font-weight: bold; + margin: 15px; + text-align: center; + padding: 5px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613153001.css b/.history/src/style2_20230613153001.css new file mode 100644 index 00000000..c6252bdb --- /dev/null +++ b/.history/src/style2_20230613153001.css @@ -0,0 +1,257 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align: center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align: center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 200px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 200px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613153033.css b/.history/src/style2_20230613153033.css new file mode 100644 index 00000000..c6252bdb --- /dev/null +++ b/.history/src/style2_20230613153033.css @@ -0,0 +1,257 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align: center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align: center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 200px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 200px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613153104.css b/.history/src/style2_20230613153104.css new file mode 100644 index 00000000..cbd52caf --- /dev/null +++ b/.history/src/style2_20230613153104.css @@ -0,0 +1,257 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align: center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align: center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 200px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 200px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613153122.css b/.history/src/style2_20230613153122.css new file mode 100644 index 00000000..7742aa91 --- /dev/null +++ b/.history/src/style2_20230613153122.css @@ -0,0 +1,257 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align: center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align: center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 200px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613153124.css b/.history/src/style2_20230613153124.css new file mode 100644 index 00000000..7742aa91 --- /dev/null +++ b/.history/src/style2_20230613153124.css @@ -0,0 +1,257 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align: center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align: center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 200px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613153138.css b/.history/src/style2_20230613153138.css new file mode 100644 index 00000000..9a0911fd --- /dev/null +++ b/.history/src/style2_20230613153138.css @@ -0,0 +1,257 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align: center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align: center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613153157.css b/.history/src/style2_20230613153157.css new file mode 100644 index 00000000..e137d483 --- /dev/null +++ b/.history/src/style2_20230613153157.css @@ -0,0 +1,256 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align: center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align: center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613153206.css b/.history/src/style2_20230613153206.css new file mode 100644 index 00000000..99a0f8a3 --- /dev/null +++ b/.history/src/style2_20230613153206.css @@ -0,0 +1,254 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align: center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align: center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + } + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613153227.css b/.history/src/style2_20230613153227.css new file mode 100644 index 00000000..ce3a8b0b --- /dev/null +++ b/.history/src/style2_20230613153227.css @@ -0,0 +1,256 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align: center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align: center; + padding: 5px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613153301.css b/.history/src/style2_20230613153301.css new file mode 100644 index 00000000..22c662ef --- /dev/null +++ b/.history/src/style2_20230613153301.css @@ -0,0 +1,256 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align: center; + padding: 10px; + font-size: 27px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align: center; + padding: 5px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613153308.css b/.history/src/style2_20230613153308.css new file mode 100644 index 00000000..6c30df77 --- /dev/null +++ b/.history/src/style2_20230613153308.css @@ -0,0 +1,256 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 15px; + text-align: center; + padding: 10px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 15px; + text-align: center; + padding: 5px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613153346.css b/.history/src/style2_20230613153346.css new file mode 100644 index 00000000..74e3b671 --- /dev/null +++ b/.history/src/style2_20230613153346.css @@ -0,0 +1,256 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613153518.css b/.history/src/style2_20230613153518.css new file mode 100644 index 00000000..65297eee --- /dev/null +++ b/.history/src/style2_20230613153518.css @@ -0,0 +1,259 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 20px; + height: 50px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613153533.css b/.history/src/style2_20230613153533.css new file mode 100644 index 00000000..0e851a7f --- /dev/null +++ b/.history/src/style2_20230613153533.css @@ -0,0 +1,259 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 100px; + height: 50px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613153549.css b/.history/src/style2_20230613153549.css new file mode 100644 index 00000000..29b2897c --- /dev/null +++ b/.history/src/style2_20230613153549.css @@ -0,0 +1,259 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 350px; + height: 50px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613153603.css b/.history/src/style2_20230613153603.css new file mode 100644 index 00000000..ce0e0ce2 --- /dev/null +++ b/.history/src/style2_20230613153603.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 350px; + height: 50px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 350px; + height: 50px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613153637.css b/.history/src/style2_20230613153637.css new file mode 100644 index 00000000..a9b0634d --- /dev/null +++ b/.history/src/style2_20230613153637.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 350px; + height: 10px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 350px; + height: 10px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613153727.css b/.history/src/style2_20230613153727.css new file mode 100644 index 00000000..bcd96cac --- /dev/null +++ b/.history/src/style2_20230613153727.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 350px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 350px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613153748.css b/.history/src/style2_20230613153748.css new file mode 100644 index 00000000..435c44d3 --- /dev/null +++ b/.history/src/style2_20230613153748.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613153807.css b/.history/src/style2_20230613153807.css new file mode 100644 index 00000000..fcc68985 --- /dev/null +++ b/.history/src/style2_20230613153807.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613153828.css b/.history/src/style2_20230613153828.css new file mode 100644 index 00000000..f4743e6c --- /dev/null +++ b/.history/src/style2_20230613153828.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 350px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613153853.css b/.history/src/style2_20230613153853.css new file mode 100644 index 00000000..3f2f358c --- /dev/null +++ b/.history/src/style2_20230613153853.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 400px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613154012.css b/.history/src/style2_20230613154012.css new file mode 100644 index 00000000..eb747113 --- /dev/null +++ b/.history/src/style2_20230613154012.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 400px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 450px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613154344.css b/.history/src/style2_20230613154344.css new file mode 100644 index 00000000..5bc0d19d --- /dev/null +++ b/.history/src/style2_20230613154344.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 400px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 550px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613154355.css b/.history/src/style2_20230613154355.css new file mode 100644 index 00000000..2deafb1b --- /dev/null +++ b/.history/src/style2_20230613154355.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 400px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 550px; + height: 250px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 20px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613154425.css b/.history/src/style2_20230613154425.css new file mode 100644 index 00000000..aaaf4cfc --- /dev/null +++ b/.history/src/style2_20230613154425.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 400px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 450px; + height: 350px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 20px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613154452.css b/.history/src/style2_20230613154452.css new file mode 100644 index 00000000..b04ff67a --- /dev/null +++ b/.history/src/style2_20230613154452.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 400px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 450px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 20px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613154505.css b/.history/src/style2_20230613154505.css new file mode 100644 index 00000000..6b921b10 --- /dev/null +++ b/.history/src/style2_20230613154505.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 400px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 450px; + height: 330px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 20px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613154519.css b/.history/src/style2_20230613154519.css new file mode 100644 index 00000000..725ef62b --- /dev/null +++ b/.history/src/style2_20230613154519.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 400px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 450px; + height: 315px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 20px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613155206.css b/.history/src/style2_20230613155206.css new file mode 100644 index 00000000..74b646f2 --- /dev/null +++ b/.history/src/style2_20230613155206.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 300px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 450px; + height: 315px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 20px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613155236.css b/.history/src/style2_20230613155236.css new file mode 100644 index 00000000..89afd588 --- /dev/null +++ b/.history/src/style2_20230613155236.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 300px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 450px; + height: 315px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 20px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 450px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 50px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613155315.css b/.history/src/style2_20230613155315.css new file mode 100644 index 00000000..b99fe32f --- /dev/null +++ b/.history/src/style2_20230613155315.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 300px; + height: 550px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 250px; + height: 115px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 20px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 50px;; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 50px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613155404.css b/.history/src/style2_20230613155404.css new file mode 100644 index 00000000..10fcee95 --- /dev/null +++ b/.history/src/style2_20230613155404.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 300px; + height: 350px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 250px; + height: 115px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 20px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 50px;; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 50px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613155435.css b/.history/src/style2_20230613155435.css new file mode 100644 index 00000000..15be39ad --- /dev/null +++ b/.history/src/style2_20230613155435.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 300px; + height: 350px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 250px; + height: 115px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 50px;; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 50px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613155537.css b/.history/src/style2_20230613155537.css new file mode 100644 index 00000000..74088df7 --- /dev/null +++ b/.history/src/style2_20230613155537.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 400px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 250px; + height: 115px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 50px;; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 50px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613155614.css b/.history/src/style2_20230613155614.css new file mode 100644 index 00000000..8bbda2b2 --- /dev/null +++ b/.history/src/style2_20230613155614.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width: 400px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 50px;; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 50px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613155825.css b/.history/src/style2_20230613155825.css new file mode 100644 index 00000000..90a0c08b --- /dev/null +++ b/.history/src/style2_20230613155825.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 50px;; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 50px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613155854.css b/.history/src/style2_20230613155854.css new file mode 100644 index 00000000..6f9101a9 --- /dev/null +++ b/.history/src/style2_20230613155854.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 200px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 50px;; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 50px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613155916.css b/.history/src/style2_20230613155916.css new file mode 100644 index 00000000..90a0c08b --- /dev/null +++ b/.history/src/style2_20230613155916.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 50px;; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 50px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613160410.css b/.history/src/style2_20230613160410.css new file mode 100644 index 00000000..85d846be --- /dev/null +++ b/.history/src/style2_20230613160410.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613160447.css b/.history/src/style2_20230613160447.css new file mode 100644 index 00000000..2704ac2b --- /dev/null +++ b/.history/src/style2_20230613160447.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 150px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 150px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613160505.css b/.history/src/style2_20230613160505.css new file mode 100644 index 00000000..10638c29 --- /dev/null +++ b/.history/src/style2_20230613160505.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 200px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 150px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 150px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613160522.css b/.history/src/style2_20230613160522.css new file mode 100644 index 00000000..51c74ce9 --- /dev/null +++ b/.history/src/style2_20230613160522.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 200px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613160540.css b/.history/src/style2_20230613160540.css new file mode 100644 index 00000000..2756d57a --- /dev/null +++ b/.history/src/style2_20230613160540.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 150px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 100px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613160609.css b/.history/src/style2_20230613160609.css new file mode 100644 index 00000000..37317d6e --- /dev/null +++ b/.history/src/style2_20230613160609.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 200px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 70px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 700px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613160620.css b/.history/src/style2_20230613160620.css new file mode 100644 index 00000000..c97576f7 --- /dev/null +++ b/.history/src/style2_20230613160620.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 200px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 70px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 70px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613160640.css b/.history/src/style2_20230613160640.css new file mode 100644 index 00000000..49fdac62 --- /dev/null +++ b/.history/src/style2_20230613160640.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 200px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613160659.css b/.history/src/style2_20230613160659.css new file mode 100644 index 00000000..2c43d542 --- /dev/null +++ b/.history/src/style2_20230613160659.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613160811.css b/.history/src/style2_20230613160811.css new file mode 100644 index 00000000..027abbbd --- /dev/null +++ b/.history/src/style2_20230613160811.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 110px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613160852.css b/.history/src/style2_20230613160852.css new file mode 100644 index 00000000..06e16f88 --- /dev/null +++ b/.history/src/style2_20230613160852.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 300px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 300px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613160943.css b/.history/src/style2_20230613160943.css new file mode 100644 index 00000000..19310b5e --- /dev/null +++ b/.history/src/style2_20230613160943.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 320px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 320px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613161246.css b/.history/src/style2_20230613161246.css new file mode 100644 index 00000000..701f2e00 --- /dev/null +++ b/.history/src/style2_20230613161246.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 320px; + height: 20px; + /*font-weight: bold;*/ + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 320px; + height: 20px; + /* font-weight: bold;*/ + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613161324.css b/.history/src/style2_20230613161324.css new file mode 100644 index 00000000..19310b5e --- /dev/null +++ b/.history/src/style2_20230613161324.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 320px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 320px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613161704.css b/.history/src/style2_20230613161704.css new file mode 100644 index 00000000..2c43d542 --- /dev/null +++ b/.history/src/style2_20230613161704.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 400px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230613161731.css b/.history/src/style2_20230613161731.css new file mode 100644 index 00000000..49022175 --- /dev/null +++ b/.history/src/style2_20230613161731.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230614084038.css b/.history/src/style2_20230614084038.css new file mode 100644 index 00000000..8f11bfa8 --- /dev/null +++ b/.history/src/style2_20230614084038.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230614084107.css b/.history/src/style2_20230614084107.css new file mode 100644 index 00000000..53881cd8 --- /dev/null +++ b/.history/src/style2_20230614084107.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 19px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230614084135.css b/.history/src/style2_20230614084135.css new file mode 100644 index 00000000..a972b139 --- /dev/null +++ b/.history/src/style2_20230614084135.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230614084222.css b/.history/src/style2_20230614084222.css new file mode 100644 index 00000000..49022175 --- /dev/null +++ b/.history/src/style2_20230614084222.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 75px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230614084518.css b/.history/src/style2_20230614084518.css new file mode 100644 index 00000000..ef905829 --- /dev/null +++ b/.history/src/style2_20230614084518.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 55px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 55px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230614084542.css b/.history/src/style2_20230614084542.css new file mode 100644 index 00000000..c678d7be --- /dev/null +++ b/.history/src/style2_20230614084542.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 25px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 25px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230614084605.css b/.history/src/style2_20230614084605.css new file mode 100644 index 00000000..9cc15e14 --- /dev/null +++ b/.history/src/style2_20230614084605.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 320px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 25px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 25px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230614084632.css b/.history/src/style2_20230614084632.css new file mode 100644 index 00000000..f3fed60d --- /dev/null +++ b/.history/src/style2_20230614084632.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 400px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 420px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230614084726.css b/.history/src/style2_20230614084726.css new file mode 100644 index 00000000..50557330 --- /dev/null +++ b/.history/src/style2_20230614084726.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 450px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 420px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230614084746.css b/.history/src/style2_20230614084746.css new file mode 100644 index 00000000..9b5c0fef --- /dev/null +++ b/.history/src/style2_20230614084746.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:450px; + height: 500px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 420px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230614084803.css b/.history/src/style2_20230614084803.css new file mode 100644 index 00000000..5f3ab995 --- /dev/null +++ b/.history/src/style2_20230614084803.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 500px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 420px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 15px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230614084933.css b/.history/src/style2_20230614084933.css new file mode 100644 index 00000000..781cd24e --- /dev/null +++ b/.history/src/style2_20230614084933.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 500px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 420px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230614084953.css b/.history/src/style2_20230614084953.css new file mode 100644 index 00000000..4035bdad --- /dev/null +++ b/.history/src/style2_20230614084953.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 500px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 420px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 18px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230614085006.css b/.history/src/style2_20230614085006.css new file mode 100644 index 00000000..781cd24e --- /dev/null +++ b/.history/src/style2_20230614085006.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 500px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 420px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230619100927.css b/.history/src/style2_20230619100927.css new file mode 100644 index 00000000..781cd24e --- /dev/null +++ b/.history/src/style2_20230619100927.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 500px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAño { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 420px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230619100940.css b/.history/src/style2_20230619100940.css new file mode 100644 index 00000000..d85cae80 --- /dev/null +++ b/.history/src/style2_20230619100940.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:350px; + height: 500px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 420px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620101530.css b/.history/src/style2_20230620101530.css new file mode 100644 index 00000000..3bc74717 --- /dev/null +++ b/.history/src/style2_20230620101530.css @@ -0,0 +1,261 @@ +body { + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:150px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 420px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620104709.css b/.history/src/style2_20230620104709.css new file mode 100644 index 00000000..057c63a1 --- /dev/null +++ b/.history/src/style2_20230620104709.css @@ -0,0 +1,262 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:150px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 420px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620104714.css b/.history/src/style2_20230620104714.css new file mode 100644 index 00000000..0a84e433 --- /dev/null +++ b/.history/src/style2_20230620104714.css @@ -0,0 +1,263 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + display: flex; + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:150px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 420px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620104715.css b/.history/src/style2_20230620104715.css new file mode 100644 index 00000000..0a84e433 --- /dev/null +++ b/.history/src/style2_20230620104715.css @@ -0,0 +1,263 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + display: flex; + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:150px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 420px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620104722.css b/.history/src/style2_20230620104722.css new file mode 100644 index 00000000..057c63a1 --- /dev/null +++ b/.history/src/style2_20230620104722.css @@ -0,0 +1,262 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + /* order: 5;*/ +} + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:150px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 420px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620104803.css b/.history/src/style2_20230620104803.css new file mode 100644 index 00000000..31024164 --- /dev/null +++ b/.history/src/style2_20230620104803.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:150px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 420px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620104825.css b/.history/src/style2_20230620104825.css new file mode 100644 index 00000000..d305b42d --- /dev/null +++ b/.history/src/style2_20230620104825.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:250px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 380px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 420px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620104838.css b/.history/src/style2_20230620104838.css new file mode 100644 index 00000000..2a1d8819 --- /dev/null +++ b/.history/src/style2_20230620104838.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:250px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 300px; + height: 420px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620104919.css b/.history/src/style2_20230620104919.css new file mode 100644 index 00000000..debac8d2 --- /dev/null +++ b/.history/src/style2_20230620104919.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:250px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 400px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620104950.css b/.history/src/style2_20230620104950.css new file mode 100644 index 00000000..654c7f81 --- /dev/null +++ b/.history/src/style2_20230620104950.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:250px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 400px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620105013.css b/.history/src/style2_20230620105013.css new file mode 100644 index 00000000..8ef77011 --- /dev/null +++ b/.history/src/style2_20230620105013.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:250px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 500px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620105032.css b/.history/src/style2_20230620105032.css new file mode 100644 index 00000000..01b0a6e7 --- /dev/null +++ b/.history/src/style2_20230620105032.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:250px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 500px + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620105034.css b/.history/src/style2_20230620105034.css new file mode 100644 index 00000000..8ef77011 --- /dev/null +++ b/.history/src/style2_20230620105034.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:250px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 500px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 300px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620105103.css b/.history/src/style2_20230620105103.css new file mode 100644 index 00000000..d5a37bdf --- /dev/null +++ b/.history/src/style2_20230620105103.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:250px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 500px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 500px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 00px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620105107.css b/.history/src/style2_20230620105107.css new file mode 100644 index 00000000..fa279dc3 --- /dev/null +++ b/.history/src/style2_20230620105107.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + /* flex-direction: row; + flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:250px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 500px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 500px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 500px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620105158.css b/.history/src/style2_20230620105158.css new file mode 100644 index 00000000..8a20dcc2 --- /dev/null +++ b/.history/src/style2_20230620105158.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + /* display: grid; + grid-template-columns: auto auto auto auto;*/ + flex-direction: row; + flex-wrap: wrap; + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:250px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 500px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 500px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 500px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620105236.css b/.history/src/style2_20230620105236.css new file mode 100644 index 00000000..ebf038ac --- /dev/null +++ b/.history/src/style2_20230620105236.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + /* display: grid; + grid-template-columns: auto auto auto auto;*/ + flex-direction: column ; + flex-wrap: wrap; + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:250px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 500px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 500px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 500px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620105237.css b/.history/src/style2_20230620105237.css new file mode 100644 index 00000000..ebf038ac --- /dev/null +++ b/.history/src/style2_20230620105237.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + /* display: grid; + grid-template-columns: auto auto auto auto;*/ + flex-direction: column ; + flex-wrap: wrap; + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:250px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 500px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 500px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 500px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620105240.css b/.history/src/style2_20230620105240.css new file mode 100644 index 00000000..ebf038ac --- /dev/null +++ b/.history/src/style2_20230620105240.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + /* display: grid; + grid-template-columns: auto auto auto auto;*/ + flex-direction: column ; + flex-wrap: wrap; + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:250px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 500px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 500px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 500px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620105249.css b/.history/src/style2_20230620105249.css new file mode 100644 index 00000000..3642c078 --- /dev/null +++ b/.history/src/style2_20230620105249.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + /* display: grid; + grid-template-columns: auto auto auto auto;*/ + flex-direction: column; + flex-wrap: wrap; + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:250px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 500px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 500px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 500px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620105312.css b/.history/src/style2_20230620105312.css new file mode 100644 index 00000000..dc1f7c4f --- /dev/null +++ b/.history/src/style2_20230620105312.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + /* display: grid; + grid-template-columns: auto auto auto auto;*/ + flex-direction: column; + /*flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:250px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 500px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 500px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 500px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620105330.css b/.history/src/style2_20230620105330.css new file mode 100644 index 00000000..c9af6388 --- /dev/null +++ b/.history/src/style2_20230620105330.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto;*/ + flex-direction: column; + /*flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:250px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 500px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 500px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 500px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620105337.css b/.history/src/style2_20230620105337.css new file mode 100644 index 00000000..64be1c7c --- /dev/null +++ b/.history/src/style2_20230620105337.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + flex-direction: column; + /*flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:250px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 500px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 500px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 500px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 17px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620105920.css b/.history/src/style2_20230620105920.css new file mode 100644 index 00000000..6b6fbc71 --- /dev/null +++ b/.history/src/style2_20230620105920.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + flex-direction: column; + /*flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:250px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 250px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620105937.css b/.history/src/style2_20230620105937.css new file mode 100644 index 00000000..c05ca778 --- /dev/null +++ b/.history/src/style2_20230620105937.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-image: url(fondo2.jpg); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + flex-direction: column; + /*flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 250px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620110918.css b/.history/src/style2_20230620110918.css new file mode 100644 index 00000000..6d6e4e62 --- /dev/null +++ b/.history/src/style2_20230620110918.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-color: aquamarine; +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + flex-direction: column; + /*flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 250px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620111041.css b/.history/src/style2_20230620111041.css new file mode 100644 index 00000000..ef98f2cb --- /dev/null +++ b/.history/src/style2_20230620111041.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-color: black; +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + flex-direction: column; + /*flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 250px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620112052.css b/.history/src/style2_20230620112052.css new file mode 100644 index 00000000..b4051b8f --- /dev/null +++ b/.history/src/style2_20230620112052.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-color:rgb(152, 180, 172); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + flex-direction: column; + /*flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 250px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620121750.css b/.history/src/style2_20230620121750.css new file mode 100644 index 00000000..acccdfec --- /dev/null +++ b/.history/src/style2_20230620121750.css @@ -0,0 +1,266 @@ +body { + /*@media (max-width 600 px)*/ + display: flex; + background-color:rgb(152, 180, 172); +} + +h2 { + /*@media (max-width 600 px)*/ + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); +@media (max-width:600px) + +} + +.filters__director { + @media (max-width:250px) + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + @media (max-width:250px) + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + flex-direction: column; + /*flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 250px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620121853.css b/.history/src/style2_20230620121853.css new file mode 100644 index 00000000..7fec8785 --- /dev/null +++ b/.history/src/style2_20230620121853.css @@ -0,0 +1,268 @@ +body { + + display: flex; + background-color:rgb(152, 180, 172); + /*@media (max-width:250px)*/ +} + +h2 { + + di@media (max-width:250px)splay: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; + /*@media (max-width:250px)*/ +} + +.filters { + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + @media (max-width:600px) + +} + +.filters__director { + @media (max-width:250px) + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + @media (max-width:250px) + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + flex-direction: column; + /*flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 250px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620121934.css b/.history/src/style2_20230620121934.css new file mode 100644 index 00000000..e9673ba7 --- /dev/null +++ b/.history/src/style2_20230620121934.css @@ -0,0 +1,272 @@ +body { + + display: flex; + background-color:rgb(152, 180, 172); + /*@media (max-width:250px)*/ +} + +h2 { + + di@media (max-width:250px)splay: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; + /*@media (max-width:250px)*/ +} + +.filters { + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + @media (max-width:600px) + +} + +.filters__director { + @media (max-width:250px) + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; + @media (max-width:250px) +} + +.filters__producer { + @media (max-width:250px) + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; + @media (max-width:250px) +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; + @media (max-width:250px) +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; + @media (max-width:250px) +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + flex-direction: column; + /*flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 250px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620124332.css b/.history/src/style2_20230620124332.css new file mode 100644 index 00000000..b4051b8f --- /dev/null +++ b/.history/src/style2_20230620124332.css @@ -0,0 +1,261 @@ +body { + display: flex; + background-color:rgb(152, 180, 172); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + flex-direction: column; + /*flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 250px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620124815.css b/.history/src/style2_20230620124815.css new file mode 100644 index 00000000..d3655987 --- /dev/null +++ b/.history/src/style2_20230620124815.css @@ -0,0 +1,263 @@ +body { + display: flex; + background-color:rgb(152, 180, 172); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + flex-direction: column; + /*flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +@media screen and (max-width:400px) { + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 250px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + +} +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620124933.css b/.history/src/style2_20230620124933.css new file mode 100644 index 00000000..c6fc7c57 --- /dev/null +++ b/.history/src/style2_20230620124933.css @@ -0,0 +1,263 @@ +body { + display: flex; + background-color:rgb(152, 180, 172); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + flex-direction: column; + /*flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +/*@media screen and (max-width:400px) {*/ + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 250px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + +/*}*/ +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620124947.css b/.history/src/style2_20230620124947.css new file mode 100644 index 00000000..c6fc7c57 --- /dev/null +++ b/.history/src/style2_20230620124947.css @@ -0,0 +1,263 @@ +body { + display: flex; + background-color:rgb(152, 180, 172); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + flex-direction: column; + /*flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + + +.soloPosters { + text-align: center; + font-weight: bolder; + width:300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +/*@media screen and (max-width:400px) {*/ + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 250px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + +/*}*/ +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620125232.css b/.history/src/style2_20230620125232.css new file mode 100644 index 00000000..f30cc35c --- /dev/null +++ b/.history/src/style2_20230620125232.css @@ -0,0 +1,266 @@ +body { + /*@media (max-width:600px) {*/ + display: flex; + background-color:rgb(152, 180, 172); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +/*@media (max-width:600px) {*/ + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + flex-direction: column; + /*flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + +/*@media screen and (max-width:400px) {*/ +.soloPosters { + text-align: center; + font-weight: bolder; + width:300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 280px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 20px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +/*@media screen and (max-width:400px) {*/ + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 250px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + +/*}*/ +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style2_20230620125628.css b/.history/src/style2_20230620125628.css new file mode 100644 index 00000000..1bc46673 --- /dev/null +++ b/.history/src/style2_20230620125628.css @@ -0,0 +1,266 @@ +body { + /*@media (max-width:600px) {*/ + display: flex; + background-color:rgb(152, 180, 172); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +/*@media (max-width:600px) {*/ + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + flex-direction: column; + /*flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + +/*@media screen and (max-width:400px) {*/ +.soloPosters { + text-align: center; + font-weight: bolder; + width:300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 300px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 18px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 300px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 18px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +/*@media screen and (max-width:400px) {*/ + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 250px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + +/*}*/ +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style_20230523131134.css b/.history/src/style_20230523131134.css new file mode 100644 index 00000000..e69de29b diff --git a/.history/src/style_20230530122035.css b/.history/src/style_20230530122035.css new file mode 100644 index 00000000..7db04dfe --- /dev/null +++ b/.history/src/style_20230530122035.css @@ -0,0 +1,5 @@ +body{ +background-image:C:\Users\apaom\OneDrive\Documentos\Data Lovers\DEV008-data-lovers\src\fondo.jpg; + + +} \ No newline at end of file diff --git a/.history/src/style_20230530122146.css b/.history/src/style_20230530122146.css new file mode 100644 index 00000000..531dab9d --- /dev/null +++ b/.history/src/style_20230530122146.css @@ -0,0 +1,5 @@ +body{ +background-image:url(fondo.jpg); + + +} \ No newline at end of file diff --git a/.history/src/style_20230530122359.css b/.history/src/style_20230530122359.css new file mode 100644 index 00000000..3f58a9be --- /dev/null +++ b/.history/src/style_20230530122359.css @@ -0,0 +1,6 @@ +body{ +background-image:url(fondo.jpg); +background-repeat: no-repeat; +background-position: 50% 20%; + +} \ No newline at end of file diff --git a/.history/src/style_20230530122422.css b/.history/src/style_20230530122422.css new file mode 100644 index 00000000..b75a4fa7 --- /dev/null +++ b/.history/src/style_20230530122422.css @@ -0,0 +1,6 @@ +body{ +background-image:url(fondo.jpg); +background-repeat: no-repeat; +background-position: 80% 20%; + +} \ No newline at end of file diff --git a/.history/src/style_20230530122444.css b/.history/src/style_20230530122444.css new file mode 100644 index 00000000..eea1fe63 --- /dev/null +++ b/.history/src/style_20230530122444.css @@ -0,0 +1,6 @@ +body{ +background-image:url(fondo.jpg); +background-repeat: no-repeat; +background-position: 80% 5%; + +} \ No newline at end of file diff --git a/.history/src/style_20230530122504.css b/.history/src/style_20230530122504.css new file mode 100644 index 00000000..ad9bdf68 --- /dev/null +++ b/.history/src/style_20230530122504.css @@ -0,0 +1,6 @@ +body{ +background-image:url(fondo.jpg); +background-repeat: no-repeat; +background-position: 100% 5%; + +} \ No newline at end of file diff --git a/.history/src/style_20230530122521.css b/.history/src/style_20230530122521.css new file mode 100644 index 00000000..a6eb7b93 --- /dev/null +++ b/.history/src/style_20230530122521.css @@ -0,0 +1,6 @@ +body{ +background-image:url(fondo.jpg); +background-repeat: no-repeat; +background-position: 100% 0%; + +} \ No newline at end of file diff --git a/.history/src/style_20230530122539.css b/.history/src/style_20230530122539.css new file mode 100644 index 00000000..16f931fc --- /dev/null +++ b/.history/src/style_20230530122539.css @@ -0,0 +1,6 @@ +body{ +background-image:url(fondo.jpg); +background-repeat: no-repeat; + + +} \ No newline at end of file diff --git a/.history/src/style_20230530122608.css b/.history/src/style_20230530122608.css new file mode 100644 index 00000000..000c57f8 --- /dev/null +++ b/.history/src/style_20230530122608.css @@ -0,0 +1,5 @@ +body{ +background-image:url(fondo.jpg); +background-repeat: no-repeat; +background-position: 120% 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230530122639.css b/.history/src/style_20230530122639.css new file mode 100644 index 00000000..fca15b38 --- /dev/null +++ b/.history/src/style_20230530122639.css @@ -0,0 +1,5 @@ +body{ +background-image:url(fondo.jpg); +background-repeat: no-repeat; +background-position: 120% 0% 120%; +} \ No newline at end of file diff --git a/.history/src/style_20230530122654.css b/.history/src/style_20230530122654.css new file mode 100644 index 00000000..22ea5f44 --- /dev/null +++ b/.history/src/style_20230530122654.css @@ -0,0 +1,5 @@ +body{ +background-image:url(fondo.jpg); +background-repeat: no-repeat; +background-position: 120% 120% 120%; +} \ No newline at end of file diff --git a/.history/src/style_20230530122801.css b/.history/src/style_20230530122801.css new file mode 100644 index 00000000..0ac04e2d --- /dev/null +++ b/.history/src/style_20230530122801.css @@ -0,0 +1,5 @@ +body{ +background-image:url(fondo.jpg); +background-repeat: no-repeat; +background-position: 100% 120% 120%; +} \ No newline at end of file diff --git a/.history/src/style_20230530122824.css b/.history/src/style_20230530122824.css new file mode 100644 index 00000000..85a45016 --- /dev/null +++ b/.history/src/style_20230530122824.css @@ -0,0 +1,4 @@ +body{ +background-image:url(fondo.jpg); +background-repeat: no-repeat; +} \ No newline at end of file diff --git a/.history/src/style_20230530122936.css b/.history/src/style_20230530122936.css new file mode 100644 index 00000000..fa32c9ae --- /dev/null +++ b/.history/src/style_20230530122936.css @@ -0,0 +1,3 @@ +body{ +background-image:url(fondo.jpg); +} \ No newline at end of file diff --git a/.history/src/style_20230530123218.css b/.history/src/style_20230530123218.css new file mode 100644 index 00000000..0c83cf5d --- /dev/null +++ b/.history/src/style_20230530123218.css @@ -0,0 +1,6 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + +} \ No newline at end of file diff --git a/.history/src/style_20230530123356.css b/.history/src/style_20230530123356.css new file mode 100644 index 00000000..3a2c8b80 --- /dev/null +++ b/.history/src/style_20230530123356.css @@ -0,0 +1,40 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .5em; + display: inline-block; + border: 4px double rgba(255,255,255,.25); + border-width: 4px 0; + padding: 1.5em 0em; + position: absolute; + top: 18%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530123527.css b/.history/src/style_20230530123527.css new file mode 100644 index 00000000..f8a00261 --- /dev/null +++ b/.history/src/style_20230530123527.css @@ -0,0 +1,40 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .2em; + display: inline-block; + border: 4px double rgba(255,255,255,.25); + border-width: 2px 0; + padding: 5em 0em; + position: absolute; + top: 10%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530123606.css b/.history/src/style_20230530123606.css new file mode 100644 index 00000000..b50c4a32 --- /dev/null +++ b/.history/src/style_20230530123606.css @@ -0,0 +1,40 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .2em; + display: inline-block; + border: 4px double rgba(255,255,255,.25); + border-width: 2px 0; + padding: 5em 0em; + position: absolute; + top: 10%; + left: 20%; + width: 10em; + margin: 0 0 0 -20em; + + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530123629.css b/.history/src/style_20230530123629.css new file mode 100644 index 00000000..449d8dad --- /dev/null +++ b/.history/src/style_20230530123629.css @@ -0,0 +1,40 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .2em; + display: inline-block; + border: 4px double rgba(255,255,255,.25); + border-width: 2px 0; + padding: 5em 0em; + position: absolute; + top: 10%; + left: 40%; + width: 20em; + margin: 0 0 0 -20em; + + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530123646.css b/.history/src/style_20230530123646.css new file mode 100644 index 00000000..c21a94f2 --- /dev/null +++ b/.history/src/style_20230530123646.css @@ -0,0 +1,40 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .2em; + display: inline-block; + border: 4px double rgba(255,255,255,.25); + border-width: 2px 0; + padding: 5em 0em; + position: absolute; + top: 10%; + left: 40%; + width: 50em; + margin: 0 0 0 -20em; + + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530123705.css b/.history/src/style_20230530123705.css new file mode 100644 index 00000000..d32e6b85 --- /dev/null +++ b/.history/src/style_20230530123705.css @@ -0,0 +1,40 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .2em; + display: inline-block; + border: 4px double rgba(255,255,255,.25); + border-width: 2px 0; + padding: 5em 0em; + position: absolute; + top: 10%; + left: 50%; + width: 50em; + margin: 0 0 0 -20em; + + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530123747.css b/.history/src/style_20230530123747.css new file mode 100644 index 00000000..6976fc12 --- /dev/null +++ b/.history/src/style_20230530123747.css @@ -0,0 +1,40 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .2em; + display: inline-block; + border: 4px double rgba(255,255,255,.25); + border-width: 2px 0; + padding: 5em 0em; + position: absolute; + top: 10%; + left: 50%; + width: 50em; + margin: 0 0 0 -10em; + + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530123800.css b/.history/src/style_20230530123800.css new file mode 100644 index 00000000..d32e6b85 --- /dev/null +++ b/.history/src/style_20230530123800.css @@ -0,0 +1,40 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .2em; + display: inline-block; + border: 4px double rgba(255,255,255,.25); + border-width: 2px 0; + padding: 5em 0em; + position: absolute; + top: 10%; + left: 50%; + width: 50em; + margin: 0 0 0 -20em; + + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530123824.css b/.history/src/style_20230530123824.css new file mode 100644 index 00000000..ff8f9386 --- /dev/null +++ b/.history/src/style_20230530123824.css @@ -0,0 +1,40 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .2em; + display: inline-block; + border: 3px double rgba(255,255,255,.25); + border-width: 2px 0; + padding: 5em 0em; + position: absolute; + top: 10%; + left: 50%; + width: 50em; + margin: 0 0 0 -20em; + + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530123838.css b/.history/src/style_20230530123838.css new file mode 100644 index 00000000..ba36c694 --- /dev/null +++ b/.history/src/style_20230530123838.css @@ -0,0 +1,40 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .2em; + display: inline-block; + border: 2px double rgba(255,255,255,.25); + border-width: 2px 0; + padding: 5em 0em; + position: absolute; + top: 10%; + left: 50%; + width: 50em; + margin: 0 0 0 -20em; + + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530123856.css b/.history/src/style_20230530123856.css new file mode 100644 index 00000000..caf94494 --- /dev/null +++ b/.history/src/style_20230530123856.css @@ -0,0 +1,40 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 2px double rgba(255,255,255,.25); + border-width: 2px 0; + padding: 5em 0em; + position: absolute; + top: 10%; + left: 50%; + width: 50em; + margin: 0 0 0 -20em; + + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530123919.css b/.history/src/style_20230530123919.css new file mode 100644 index 00000000..5a27d04d --- /dev/null +++ b/.history/src/style_20230530123919.css @@ -0,0 +1,39 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 2px double rgba(255,255,255,.25); + border-width: 2px 0; + padding: 5em 0em; + position: absolute; + top: 10%; + left: 50%; + width: 50em; + + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530123931.css b/.history/src/style_20230530123931.css new file mode 100644 index 00000000..5a27d04d --- /dev/null +++ b/.history/src/style_20230530123931.css @@ -0,0 +1,39 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 2px double rgba(255,255,255,.25); + border-width: 2px 0; + padding: 5em 0em; + position: absolute; + top: 10%; + left: 50%; + width: 50em; + + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530123933.css b/.history/src/style_20230530123933.css new file mode 100644 index 00000000..5a27d04d --- /dev/null +++ b/.history/src/style_20230530123933.css @@ -0,0 +1,39 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 2px double rgba(255,255,255,.25); + border-width: 2px 0; + padding: 5em 0em; + position: absolute; + top: 10%; + left: 50%; + width: 50em; + + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530123948.css b/.history/src/style_20230530123948.css new file mode 100644 index 00000000..6822cec6 --- /dev/null +++ b/.history/src/style_20230530123948.css @@ -0,0 +1,39 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 2px double rgba(255,255,255,.25); + border-width: 2px 0; + padding: 5em 0em; + position: top; + top: 10%; + left: 50%; + width: 50em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530124052.css b/.history/src/style_20230530124052.css new file mode 100644 index 00000000..19107550 --- /dev/null +++ b/.history/src/style_20230530124052.css @@ -0,0 +1,39 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 2px double rgba(255,255,255,.25); + border-width: 2px 0; + padding: 5em 0em; + position: top, center; + top: 10%; + left: 50%; + width: 50em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530124209.css b/.history/src/style_20230530124209.css new file mode 100644 index 00000000..e0750690 --- /dev/null +++ b/.history/src/style_20230530124209.css @@ -0,0 +1,36 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 2px double rgba(255,255,255,.25); + border-width: 2px 0; + padding: 5em 0em; + position: top, center; + top: 100%; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530124246.css b/.history/src/style_20230530124246.css new file mode 100644 index 00000000..7d600888 --- /dev/null +++ b/.history/src/style_20230530124246.css @@ -0,0 +1,36 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255,255,255,.25); + border-width: 1px 0; + padding: 5em 0em; + position: top, center; + top: 100%; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530124531.css b/.history/src/style_20230530124531.css new file mode 100644 index 00000000..d6611dfc --- /dev/null +++ b/.history/src/style_20230530124531.css @@ -0,0 +1,36 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255,255,255,.25); + border-width: 1px 0; + padding: 8em 0em; + position: top, center; + top: 100%; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530125836.css b/.history/src/style_20230530125836.css new file mode 100644 index 00000000..da572c04 --- /dev/null +++ b/.history/src/style_20230530125836.css @@ -0,0 +1,36 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255,255,255,.25); + border-width: 1px 0; + padding: 3em 0em; + position: top, center; + top: 100%; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530125853.css b/.history/src/style_20230530125853.css new file mode 100644 index 00000000..ad9fce6a --- /dev/null +++ b/.history/src/style_20230530125853.css @@ -0,0 +1,36 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255,255,255,.25); + border-width: 1px 0; + padding: 1em 0em; + position: top, center; + top: 100%; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530130005.css b/.history/src/style_20230530130005.css new file mode 100644 index 00000000..142accf1 --- /dev/null +++ b/.history/src/style_20230530130005.css @@ -0,0 +1,36 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255,255,255,.25); + border-width: 1px 0; + padding: 0em 0em; + position: top, center; + top: 100%; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530130055.css b/.history/src/style_20230530130055.css new file mode 100644 index 00000000..385f617a --- /dev/null +++ b/.history/src/style_20230530130055.css @@ -0,0 +1,36 @@ +body{ +background-image:url(fondo.jpg); +} +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255,255,255,.25); + border-width: 1px 0; + padding: 0em 0em; + position: center; + top: 100%; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0,0,0); + -webkit-backface-visibility: hidden; + + } + + /* Animate Background Image */ + + @-webkit-keyframes aitf { + 0% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } \ No newline at end of file diff --git a/.history/src/style_20230530130139.css b/.history/src/style_20230530130139.css new file mode 100644 index 00000000..3a348454 --- /dev/null +++ b/.history/src/style_20230530130139.css @@ -0,0 +1,45 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: 0em 0em; + position: absolute; + top: 18%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} \ No newline at end of file diff --git a/.history/src/style_20230530130159.css b/.history/src/style_20230530130159.css new file mode 100644 index 00000000..72b0f062 --- /dev/null +++ b/.history/src/style_20230530130159.css @@ -0,0 +1,45 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: 0em 0em; + position: absolute; + top: 50%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} \ No newline at end of file diff --git a/.history/src/style_20230530130212.css b/.history/src/style_20230530130212.css new file mode 100644 index 00000000..c6d1a437 --- /dev/null +++ b/.history/src/style_20230530130212.css @@ -0,0 +1,45 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: 0em 0em; + position: absolute; + top: 10%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} \ No newline at end of file diff --git a/.history/src/style_20230530130448.css b/.history/src/style_20230530130448.css new file mode 100644 index 00000000..d0619d8b --- /dev/null +++ b/.history/src/style_20230530130448.css @@ -0,0 +1,52 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: 0em 0em; + position: absolute; + top: 10%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: monospace; + + + +} \ No newline at end of file diff --git a/.history/src/style_20230530130824.css b/.history/src/style_20230530130824.css new file mode 100644 index 00000000..bd0243c8 --- /dev/null +++ b/.history/src/style_20230530130824.css @@ -0,0 +1,57 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: 0em 0em; + position: absolute; + top: 10%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: monospace; + font-size: 23px; + font-weight: bolder; + font-variant: small-caps; + text-decoration-color: beige; + + + + +} \ No newline at end of file diff --git a/.history/src/style_20230530130903.css b/.history/src/style_20230530130903.css new file mode 100644 index 00000000..65f99f89 --- /dev/null +++ b/.history/src/style_20230530130903.css @@ -0,0 +1,57 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: 0em 0em; + position: absolute; + top: 10%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 23px; + font-weight: bolder; + font-variant: small-caps; + text-decoration-color: beige; + + + + +} \ No newline at end of file diff --git a/.history/src/style_20230530130940.css b/.history/src/style_20230530130940.css new file mode 100644 index 00000000..16d0be15 --- /dev/null +++ b/.history/src/style_20230530130940.css @@ -0,0 +1,57 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: 0em 0em; + position: absolute; + top: 10%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 23px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + + + + +} \ No newline at end of file diff --git a/.history/src/style_20230530130946.css b/.history/src/style_20230530130946.css new file mode 100644 index 00000000..16d0be15 --- /dev/null +++ b/.history/src/style_20230530130946.css @@ -0,0 +1,57 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: 0em 0em; + position: absolute; + top: 10%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 23px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + + + + +} \ No newline at end of file diff --git a/.history/src/style_20230530131146.css b/.history/src/style_20230530131146.css new file mode 100644 index 00000000..660dc042 --- /dev/null +++ b/.history/src/style_20230530131146.css @@ -0,0 +1,66 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: 0em 0em; + position: absolute; + top: 10%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 23px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + +} +h3 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 23px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + +} \ No newline at end of file diff --git a/.history/src/style_20230530131154.css b/.history/src/style_20230530131154.css new file mode 100644 index 00000000..4248ac86 --- /dev/null +++ b/.history/src/style_20230530131154.css @@ -0,0 +1,66 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: 0em 0em; + position: absolute; + top: 10%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 23px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + +} +h3 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + +} \ No newline at end of file diff --git a/.history/src/style_20230530131245.css b/.history/src/style_20230530131245.css new file mode 100644 index 00000000..98ca43c1 --- /dev/null +++ b/.history/src/style_20230530131245.css @@ -0,0 +1,66 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: 0em 0em; + position: absolute; + top: 10%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 40px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + +} +h3 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + +} \ No newline at end of file diff --git a/.history/src/style_20230530131506.css b/.history/src/style_20230530131506.css new file mode 100644 index 00000000..ad3a1056 --- /dev/null +++ b/.history/src/style_20230530131506.css @@ -0,0 +1,66 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: 0em 0em; + position: absolute; + top: 10%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 40px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + +} +h3 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + +} \ No newline at end of file diff --git a/.history/src/style_20230530131541.css b/.history/src/style_20230530131541.css new file mode 100644 index 00000000..415a3c0b --- /dev/null +++ b/.history/src/style_20230530131541.css @@ -0,0 +1,66 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 10%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 40px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + +} +h3 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + +} \ No newline at end of file diff --git a/.history/src/style_20230530132146.css b/.history/src/style_20230530132146.css new file mode 100644 index 00000000..dd96c28f --- /dev/null +++ b/.history/src/style_20230530132146.css @@ -0,0 +1,66 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 100%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 40px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + +} +h3 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + +} \ No newline at end of file diff --git a/.history/src/style_20230530132208.css b/.history/src/style_20230530132208.css new file mode 100644 index 00000000..1ce065ff --- /dev/null +++ b/.history/src/style_20230530132208.css @@ -0,0 +1,66 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 80%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 40px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + +} +h3 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + +} \ No newline at end of file diff --git a/.history/src/style_20230530132227.css b/.history/src/style_20230530132227.css new file mode 100644 index 00000000..ab98e83a --- /dev/null +++ b/.history/src/style_20230530132227.css @@ -0,0 +1,66 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 30%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 40px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + +} +h3 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + +} \ No newline at end of file diff --git a/.history/src/style_20230530132244.css b/.history/src/style_20230530132244.css new file mode 100644 index 00000000..415a3c0b --- /dev/null +++ b/.history/src/style_20230530132244.css @@ -0,0 +1,66 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 10%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 40px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + +} +h3 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + +} \ No newline at end of file diff --git a/.history/src/style_20230530132259.css b/.history/src/style_20230530132259.css new file mode 100644 index 00000000..7765f5a9 --- /dev/null +++ b/.history/src/style_20230530132259.css @@ -0,0 +1,66 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 05%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 40px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + +} +h3 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + +} \ No newline at end of file diff --git a/.history/src/style_20230530132312.css b/.history/src/style_20230530132312.css new file mode 100644 index 00000000..01007d22 --- /dev/null +++ b/.history/src/style_20230530132312.css @@ -0,0 +1,66 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 40px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + +} +h3 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + +} \ No newline at end of file diff --git a/.history/src/style_20230530132413.css b/.history/src/style_20230530132413.css new file mode 100644 index 00000000..2ab3aeb1 --- /dev/null +++ b/.history/src/style_20230530132413.css @@ -0,0 +1,66 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + +} +h3 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + font-variant: small-caps; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + +} \ No newline at end of file diff --git a/.history/src/style_20230530132535.css b/.history/src/style_20230530132535.css new file mode 100644 index 00000000..674cef9c --- /dev/null +++ b/.history/src/style_20230530132535.css @@ -0,0 +1,65 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + +} +h3 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + +} \ No newline at end of file diff --git a/.history/src/style_20230530132544.css b/.history/src/style_20230530132544.css new file mode 100644 index 00000000..9bd293ed --- /dev/null +++ b/.history/src/style_20230530132544.css @@ -0,0 +1,65 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + +} +h3 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 20px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + +} \ No newline at end of file diff --git a/.history/src/style_20230530132604.css b/.history/src/style_20230530132604.css new file mode 100644 index 00000000..2e5fbb7a --- /dev/null +++ b/.history/src/style_20230530132604.css @@ -0,0 +1,65 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + +} +h3 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 18px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + +} \ No newline at end of file diff --git a/.history/src/style_20230530132617.css b/.history/src/style_20230530132617.css new file mode 100644 index 00000000..f0e07de6 --- /dev/null +++ b/.history/src/style_20230530132617.css @@ -0,0 +1,65 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + +} +h3 { + font-family: Arial, sans-serif; + font-size: 18px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + +} \ No newline at end of file diff --git a/.history/src/style_20230530132745.css b/.history/src/style_20230530132745.css new file mode 100644 index 00000000..de7eb5b3 --- /dev/null +++ b/.history/src/style_20230530132745.css @@ -0,0 +1,65 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; +} +h3 { + font-family: Arial, sans-serif; + font-size: 18px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + +} \ No newline at end of file diff --git a/.history/src/style_20230530133125.css b/.history/src/style_20230530133125.css new file mode 100644 index 00000000..4189f0b1 --- /dev/null +++ b/.history/src/style_20230530133125.css @@ -0,0 +1,66 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 4px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 18px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + +} \ No newline at end of file diff --git a/.history/src/style_20230530133138.css b/.history/src/style_20230530133138.css new file mode 100644 index 00000000..def684d3 --- /dev/null +++ b/.history/src/style_20230530133138.css @@ -0,0 +1,66 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 3px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 18px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + +} \ No newline at end of file diff --git a/.history/src/style_20230530133152.css b/.history/src/style_20230530133152.css new file mode 100644 index 00000000..9431ba9f --- /dev/null +++ b/.history/src/style_20230530133152.css @@ -0,0 +1,66 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 18px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + +} \ No newline at end of file diff --git a/.history/src/style_20230530133254.css b/.history/src/style_20230530133254.css new file mode 100644 index 00000000..1febb532 --- /dev/null +++ b/.history/src/style_20230530133254.css @@ -0,0 +1,66 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 18px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: 1px; +} \ No newline at end of file diff --git a/.history/src/style_20230530133313.css b/.history/src/style_20230530133313.css new file mode 100644 index 00000000..1b7c06c7 --- /dev/null +++ b/.history/src/style_20230530133313.css @@ -0,0 +1,66 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 18px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: 0px; +} \ No newline at end of file diff --git a/.history/src/style_20230530133329.css b/.history/src/style_20230530133329.css new file mode 100644 index 00000000..6af16068 --- /dev/null +++ b/.history/src/style_20230530133329.css @@ -0,0 +1,66 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 18px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; +} \ No newline at end of file diff --git a/.history/src/style_20230530133852.css b/.history/src/style_20230530133852.css new file mode 100644 index 00000000..83eed550 --- /dev/null +++ b/.history/src/style_20230530133852.css @@ -0,0 +1,67 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 18px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + overflow-clip-margin: 20px; +} \ No newline at end of file diff --git a/.history/src/style_20230530134210.css b/.history/src/style_20230530134210.css new file mode 100644 index 00000000..6a0cd1ae --- /dev/null +++ b/.history/src/style_20230530134210.css @@ -0,0 +1,67 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 18px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + overflow: scroll; +} \ No newline at end of file diff --git a/.history/src/style_20230530134302.css b/.history/src/style_20230530134302.css new file mode 100644 index 00000000..520593ff --- /dev/null +++ b/.history/src/style_20230530134302.css @@ -0,0 +1,67 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 18px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + overflow-anchor: 20px; +} \ No newline at end of file diff --git a/.history/src/style_20230530134316.css b/.history/src/style_20230530134316.css new file mode 100644 index 00000000..42820e2d --- /dev/null +++ b/.history/src/style_20230530134316.css @@ -0,0 +1,67 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 18px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + overflow-anchor: 10px; +} \ No newline at end of file diff --git a/.history/src/style_20230530135827.css b/.history/src/style_20230530135827.css new file mode 100644 index 00000000..06410914 --- /dev/null +++ b/.history/src/style_20230530135827.css @@ -0,0 +1,67 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + +} \ No newline at end of file diff --git a/.history/src/style_20230530141118.css b/.history/src/style_20230530141118.css new file mode 100644 index 00000000..06410914 --- /dev/null +++ b/.history/src/style_20230530141118.css @@ -0,0 +1,67 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + +} \ No newline at end of file diff --git a/.history/src/style_20230530142552.css b/.history/src/style_20230530142552.css new file mode 100644 index 00000000..2f4194f3 --- /dev/null +++ b/.history/src/style_20230530142552.css @@ -0,0 +1,67 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: 1px; + +} \ No newline at end of file diff --git a/.history/src/style_20230530142602.css b/.history/src/style_20230530142602.css new file mode 100644 index 00000000..5abda7d3 --- /dev/null +++ b/.history/src/style_20230530142602.css @@ -0,0 +1,67 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: 0px; + +} \ No newline at end of file diff --git a/.history/src/style_20230530142617.css b/.history/src/style_20230530142617.css new file mode 100644 index 00000000..06410914 --- /dev/null +++ b/.history/src/style_20230530142617.css @@ -0,0 +1,67 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + +} \ No newline at end of file diff --git a/.history/src/style_20230530143155.css b/.history/src/style_20230530143155.css new file mode 100644 index 00000000..06410914 --- /dev/null +++ b/.history/src/style_20230530143155.css @@ -0,0 +1,67 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + +} \ No newline at end of file diff --git a/.history/src/style_20230530143519.css b/.history/src/style_20230530143519.css new file mode 100644 index 00000000..1ecede22 --- /dev/null +++ b/.history/src/style_20230530143519.css @@ -0,0 +1,68 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 80%; + +} \ No newline at end of file diff --git a/.history/src/style_20230530143531.css b/.history/src/style_20230530143531.css new file mode 100644 index 00000000..1fea69b5 --- /dev/null +++ b/.history/src/style_20230530143531.css @@ -0,0 +1,68 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; + +} \ No newline at end of file diff --git a/.history/src/style_20230530143542.css b/.history/src/style_20230530143542.css new file mode 100644 index 00000000..1fea69b5 --- /dev/null +++ b/.history/src/style_20230530143542.css @@ -0,0 +1,68 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; + +} \ No newline at end of file diff --git a/.history/src/style_20230530143721.css b/.history/src/style_20230530143721.css new file mode 100644 index 00000000..067931d0 --- /dev/null +++ b/.history/src/style_20230530143721.css @@ -0,0 +1,71 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; + } + +footer { + +} \ No newline at end of file diff --git a/.history/src/style_20230530143829.css b/.history/src/style_20230530143829.css new file mode 100644 index 00000000..4fd41eea --- /dev/null +++ b/.history/src/style_20230530143829.css @@ -0,0 +1,76 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; + } + +footer { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + +} \ No newline at end of file diff --git a/.history/src/style_20230530143940.css b/.history/src/style_20230530143940.css new file mode 100644 index 00000000..c62f2b7f --- /dev/null +++ b/.history/src/style_20230530143940.css @@ -0,0 +1,76 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; + } + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + +} \ No newline at end of file diff --git a/.history/src/style_20230530144025.css b/.history/src/style_20230530144025.css new file mode 100644 index 00000000..e2a1c89e --- /dev/null +++ b/.history/src/style_20230530144025.css @@ -0,0 +1,77 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; + } + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: fixed; + +} \ No newline at end of file diff --git a/.history/src/style_20230530144355.css b/.history/src/style_20230530144355.css new file mode 100644 index 00000000..dbe2f5cd --- /dev/null +++ b/.history/src/style_20230530144355.css @@ -0,0 +1,78 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; + } + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: fixed; + bottom: 0%; + +} \ No newline at end of file diff --git a/.history/src/style_20230530144438.css b/.history/src/style_20230530144438.css new file mode 100644 index 00000000..2c149a3a --- /dev/null +++ b/.history/src/style_20230530144438.css @@ -0,0 +1,78 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; + } + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; + +} \ No newline at end of file diff --git a/.history/src/style_20230530164140.css b/.history/src/style_20230530164140.css new file mode 100644 index 00000000..4f9ede68 --- /dev/null +++ b/.history/src/style_20230530164140.css @@ -0,0 +1,82 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; + } + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} + +a { +color: beige; +font-family: monospace; +} \ No newline at end of file diff --git a/.history/src/style_20230530164306.css b/.history/src/style_20230530164306.css new file mode 100644 index 00000000..648a40dd --- /dev/null +++ b/.history/src/style_20230530164306.css @@ -0,0 +1,84 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; + } + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} + +a { +color: beige; +font-family: monospace; +text-decoration: none; +font-size: 20px; +} \ No newline at end of file diff --git a/.history/src/style_20230530175217.css b/.history/src/style_20230530175217.css new file mode 100644 index 00000000..7b745f7b --- /dev/null +++ b/.history/src/style_20230530175217.css @@ -0,0 +1,87 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; + } + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} + +a { +color: beige; +font-family: monospace; +text-decoration: none; +font-size: 20px; +} +.container { + +} \ No newline at end of file diff --git a/.history/src/style_20230530175249.css b/.history/src/style_20230530175249.css new file mode 100644 index 00000000..214e4f49 --- /dev/null +++ b/.history/src/style_20230530175249.css @@ -0,0 +1,88 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; + } + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} + +a { +color: beige; +font-family: monospace; +text-decoration: none; +font-size: 20px; +} +.container { +width: 90%; +margin: auto; +} \ No newline at end of file diff --git a/.history/src/style_20230530175458.css b/.history/src/style_20230530175458.css new file mode 100644 index 00000000..6c7d30ba --- /dev/null +++ b/.history/src/style_20230530175458.css @@ -0,0 +1,89 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; + } + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} + +a { +color: beige; +font-family: monospace; +text-decoration: none; +font-size: 20px; +} +.container { +width: 90%; +margin: auto; +display: flex; +} \ No newline at end of file diff --git a/.history/src/style_20230530175521.css b/.history/src/style_20230530175521.css new file mode 100644 index 00000000..32a4b817 --- /dev/null +++ b/.history/src/style_20230530175521.css @@ -0,0 +1,86 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; + } + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} + +a { +color: beige; +font-family: monospace; +text-decoration: none; +font-size: 20px; +margin: auto; +display: flex; +} diff --git a/.history/src/style_20230530175559.css b/.history/src/style_20230530175559.css new file mode 100644 index 00000000..82851e86 --- /dev/null +++ b/.history/src/style_20230530175559.css @@ -0,0 +1,86 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; + } + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} + +a { +color: beige; +font-family: monospace; +text-decoration: double; +font-size: 20px; +margin: auto; +display: flex; +} diff --git a/.history/src/style_20230530175924.css b/.history/src/style_20230530175924.css new file mode 100644 index 00000000..4bb93958 --- /dev/null +++ b/.history/src/style_20230530175924.css @@ -0,0 +1,85 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; + } + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} + +a { +color: beige; +font-family: monospace; +text-decoration: double; +font-size: 20px; +text-decoration: underline; +} diff --git a/.history/src/style_20230530180020.css b/.history/src/style_20230530180020.css new file mode 100644 index 00000000..4b6979c3 --- /dev/null +++ b/.history/src/style_20230530180020.css @@ -0,0 +1,88 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; + } + + +a { +color: beige; +font-family: monospace; +text-decoration: double; +font-size: 20px; +text-decoration: underline; +display: flex; +justify-content: space-between; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230530180048.css b/.history/src/style_20230530180048.css new file mode 100644 index 00000000..091acb59 --- /dev/null +++ b/.history/src/style_20230530180048.css @@ -0,0 +1,89 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; + } + + +a { +color: beige; +font-family: monospace; +text-decoration: double; +font-size: 20px; +text-decoration: underline; +display: flex; +justify-content: space-between; +align-items: center; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230530180502.css b/.history/src/style_20230530180502.css new file mode 100644 index 00000000..90623237 --- /dev/null +++ b/.history/src/style_20230530180502.css @@ -0,0 +1,94 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + + display: flex; + justify-content: space-between; + align-items: center; +} + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230530181552.css b/.history/src/style_20230530181552.css new file mode 100644 index 00000000..656cf450 --- /dev/null +++ b/.history/src/style_20230530181552.css @@ -0,0 +1,103 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + width: 90%; + margin: auto; +} + +/* Navegación*/ + +.nav-main { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230530181654.css b/.history/src/style_20230530181654.css new file mode 100644 index 00000000..6a1e1bf3 --- /dev/null +++ b/.history/src/style_20230530181654.css @@ -0,0 +1,103 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230530181733.css b/.history/src/style_20230530181733.css new file mode 100644 index 00000000..152006cb --- /dev/null +++ b/.history/src/style_20230530181733.css @@ -0,0 +1,104 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230606111642.css b/.history/src/style_20230606111642.css new file mode 100644 index 00000000..e942b755 --- /dev/null +++ b/.history/src/style_20230606111642.css @@ -0,0 +1,105 @@ +body { + display: flex; + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230606111752.css b/.history/src/style_20230606111752.css new file mode 100644 index 00000000..c63db272 --- /dev/null +++ b/.history/src/style_20230606111752.css @@ -0,0 +1,109 @@ +body { + display: flex; + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + display: flex; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + display: flex; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + display: flex; + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + display: flex; + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230606111804.css b/.history/src/style_20230606111804.css new file mode 100644 index 00000000..b0fd9879 --- /dev/null +++ b/.history/src/style_20230606111804.css @@ -0,0 +1,110 @@ +body { + display: flex; + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + display: flex; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + display: flex; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + display: flex; + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + display: flex; + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + display: flex; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230606111902.css b/.history/src/style_20230606111902.css new file mode 100644 index 00000000..4f220e4b --- /dev/null +++ b/.history/src/style_20230606111902.css @@ -0,0 +1,110 @@ +body { + display: flex; + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + display: flex; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + display: flex; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + display: flex; + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + display: flex; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230606112008.css b/.history/src/style_20230606112008.css new file mode 100644 index 00000000..726c7627 --- /dev/null +++ b/.history/src/style_20230606112008.css @@ -0,0 +1,105 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101140.css b/.history/src/style_20230620101140.css new file mode 100644 index 00000000..e6a489b5 --- /dev/null +++ b/.history/src/style_20230620101140.css @@ -0,0 +1,106 @@ +body { + background-image: url(fondo.jpg); +} + +h1 { + display: flex; + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101201.css b/.history/src/style_20230620101201.css new file mode 100644 index 00000000..958f39d8 --- /dev/null +++ b/.history/src/style_20230620101201.css @@ -0,0 +1,107 @@ +body { + display: flex; + background-image: url(fondo.jpg); +} + +h1 { + display: flex; + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101245.css b/.history/src/style_20230620101245.css new file mode 100644 index 00000000..f114d752 --- /dev/null +++ b/.history/src/style_20230620101245.css @@ -0,0 +1,109 @@ +body { + display: flex; + background-image: url(fondo.jpg); +} + +h1 { + display: flex; + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + display: flex; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + display: flex; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { display: flex; + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101252.css b/.history/src/style_20230620101252.css new file mode 100644 index 00000000..8a6fb505 --- /dev/null +++ b/.history/src/style_20230620101252.css @@ -0,0 +1,109 @@ +body { + display: flex; + background-image: url(fondo.jpg); +} + +h1 { + display: flex; + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + display: flex; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + display: flex; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { display: flex; + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + display: flex; + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101336.css b/.history/src/style_20230620101336.css new file mode 100644 index 00000000..76536160 --- /dev/null +++ b/.history/src/style_20230620101336.css @@ -0,0 +1,109 @@ +body { + display: flex; + background-image: url(fondo.jpg); +} + +h1 { + display: flex; + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101348.css b/.history/src/style_20230620101348.css new file mode 100644 index 00000000..cb217688 --- /dev/null +++ b/.history/src/style_20230620101348.css @@ -0,0 +1,109 @@ +body { + + background-image: url(fondo.jpg); +} + +h1 { + display: flex; + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101353.css b/.history/src/style_20230620101353.css new file mode 100644 index 00000000..7d0d13af --- /dev/null +++ b/.history/src/style_20230620101353.css @@ -0,0 +1,109 @@ +body { + + background-image: url(fondo.jpg); +} + +h1 { + + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101631.css b/.history/src/style_20230620101631.css new file mode 100644 index 00000000..6b1288e2 --- /dev/null +++ b/.history/src/style_20230620101631.css @@ -0,0 +1,109 @@ +body { + @media only screen and (max-width: 600px) + background-image: url(fondo.jpg); +} + +h1 { + + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101635.css b/.history/src/style_20230620101635.css new file mode 100644 index 00000000..106f5bc4 --- /dev/null +++ b/.history/src/style_20230620101635.css @@ -0,0 +1,109 @@ +body { + @media only screen and (max-width: 600px) + background-image: url(fondo.jpg); +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101639.css b/.history/src/style_20230620101639.css new file mode 100644 index 00000000..106f5bc4 --- /dev/null +++ b/.history/src/style_20230620101639.css @@ -0,0 +1,109 @@ +body { + @media only screen and (max-width: 600px) + background-image: url(fondo.jpg); +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101643.css b/.history/src/style_20230620101643.css new file mode 100644 index 00000000..777ddc06 --- /dev/null +++ b/.history/src/style_20230620101643.css @@ -0,0 +1,109 @@ +body { + @media only screen and (max-width: 600px) + background-image: url(fondo.jpg); +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101645.css b/.history/src/style_20230620101645.css new file mode 100644 index 00000000..777ddc06 --- /dev/null +++ b/.history/src/style_20230620101645.css @@ -0,0 +1,109 @@ +body { + @media only screen and (max-width: 600px) + background-image: url(fondo.jpg); +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101648.css b/.history/src/style_20230620101648.css new file mode 100644 index 00000000..404aed6f --- /dev/null +++ b/.history/src/style_20230620101648.css @@ -0,0 +1,109 @@ +body { + @media only screen and (max-width: 600px) + background-image: url(fondo.jpg); +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101653.css b/.history/src/style_20230620101653.css new file mode 100644 index 00000000..3f8f662b --- /dev/null +++ b/.history/src/style_20230620101653.css @@ -0,0 +1,110 @@ +body { + @media only screen and (max-width: 600px) + background-image: url(fondo.jpg); +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101657.css b/.history/src/style_20230620101657.css new file mode 100644 index 00000000..dd320a51 --- /dev/null +++ b/.history/src/style_20230620101657.css @@ -0,0 +1,110 @@ +body { + @media only screen and (max-width: 600px) + background-image: url(fondo.jpg); +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101711.css b/.history/src/style_20230620101711.css new file mode 100644 index 00000000..8be4a531 --- /dev/null +++ b/.history/src/style_20230620101711.css @@ -0,0 +1,111 @@ +body { + @media only screen and (max-width: 600px) + background-image: url(fondo.jpg); +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { +@media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul {} +@media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101718.css b/.history/src/style_20230620101718.css new file mode 100644 index 00000000..707d11a7 --- /dev/null +++ b/.history/src/style_20230620101718.css @@ -0,0 +1,111 @@ +body { + @media only screen and (max-width: 600px) + background-image: url(fondo.jpg); +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul {} + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101722.css b/.history/src/style_20230620101722.css new file mode 100644 index 00000000..991982d7 --- /dev/null +++ b/.history/src/style_20230620101722.css @@ -0,0 +1,111 @@ +body { + @media only screen and (max-width: 600px) + background-image: url(fondo.jpg); +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101728.css b/.history/src/style_20230620101728.css new file mode 100644 index 00000000..01eac96c --- /dev/null +++ b/.history/src/style_20230620101728.css @@ -0,0 +1,112 @@ +body { + @media only screen and (max-width: 600px) + background-image: url(fondo.jpg); +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101803.css b/.history/src/style_20230620101803.css new file mode 100644 index 00000000..f4d8c951 --- /dev/null +++ b/.history/src/style_20230620101803.css @@ -0,0 +1,112 @@ +body { + @media only screen and (max-width: 1000px) + background-image: url(fondo.jpg); +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101822.css b/.history/src/style_20230620101822.css new file mode 100644 index 00000000..c9ffd534 --- /dev/null +++ b/.history/src/style_20230620101822.css @@ -0,0 +1,112 @@ +body { + @media only screen and (max-width: auto) + background-image: url(fondo.jpg); +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101833.css b/.history/src/style_20230620101833.css new file mode 100644 index 00000000..9307cced --- /dev/null +++ b/.history/src/style_20230620101833.css @@ -0,0 +1,112 @@ +body { + + background-image: url(fondo.jpg); +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101913.css b/.history/src/style_20230620101913.css new file mode 100644 index 00000000..91dd3e98 --- /dev/null +++ b/.history/src/style_20230620101913.css @@ -0,0 +1,112 @@ +body { + display: flex; + background-image: url(fondo.jpg); +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620101928.css b/.history/src/style_20230620101928.css new file mode 100644 index 00000000..841c83fd --- /dev/null +++ b/.history/src/style_20230620101928.css @@ -0,0 +1,112 @@ +body { + display: auto; + background-image: url(fondo.jpg); +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620102435.css b/.history/src/style_20230620102435.css new file mode 100644 index 00000000..dc2e7500 --- /dev/null +++ b/.history/src/style_20230620102435.css @@ -0,0 +1,113 @@ +body { + display: auto; + background-image: url(fondo.jpg); + background-repeat: no-repeat; +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620102510.css b/.history/src/style_20230620102510.css new file mode 100644 index 00000000..4bc3fa3f --- /dev/null +++ b/.history/src/style_20230620102510.css @@ -0,0 +1,113 @@ +body { + @media only screen and (max-width: 600px) + background-image: url(fondo.jpg); + background-repeat: no-repeat; +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620102523.css b/.history/src/style_20230620102523.css new file mode 100644 index 00000000..af9b5b91 --- /dev/null +++ b/.history/src/style_20230620102523.css @@ -0,0 +1,113 @@ +body { + @media only screen and (max-width: 100%) + background-image: url(fondo.jpg); + background-repeat: no-repeat; +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620102606.css b/.history/src/style_20230620102606.css new file mode 100644 index 00000000..f47f8379 --- /dev/null +++ b/.history/src/style_20230620102606.css @@ -0,0 +1,114 @@ +body { + width: auto + heigth: auto + background-image: url(fondo.jpg); + background-repeat: no-repeat; +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620102624.css b/.history/src/style_20230620102624.css new file mode 100644 index 00000000..4abdf066 --- /dev/null +++ b/.history/src/style_20230620102624.css @@ -0,0 +1,114 @@ +body { + width: auto; + heigth: auto; + background-image: url(fondo.jpg); + background-repeat: no-repeat; +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620102721.css b/.history/src/style_20230620102721.css new file mode 100644 index 00000000..f6d62f0b --- /dev/null +++ b/.history/src/style_20230620102721.css @@ -0,0 +1,112 @@ +body { + background-image: url(fondo.jpg); + background-repeat: no-repeat; +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620102940.css b/.history/src/style_20230620102940.css new file mode 100644 index 00000000..77b6fd2a --- /dev/null +++ b/.history/src/style_20230620102940.css @@ -0,0 +1,113 @@ +body { + background-image: url(fondo.jpg); + background-repeat: no-repeat; +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + css(css-lcurlyexpected) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620103139.css b/.history/src/style_20230620103139.css new file mode 100644 index 00000000..2b224367 --- /dev/null +++ b/.history/src/style_20230620103139.css @@ -0,0 +1,113 @@ +body { + width: 100%; + background-image: url(fondo.jpg); + background-repeat: no-repeat; +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620103201.css b/.history/src/style_20230620103201.css new file mode 100644 index 00000000..92ab567a --- /dev/null +++ b/.history/src/style_20230620103201.css @@ -0,0 +1,113 @@ +body { + width: 200%; + background-image: url(fondo.jpg); + background-repeat: no-repeat; +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620103236.css b/.history/src/style_20230620103236.css new file mode 100644 index 00000000..e3268130 --- /dev/null +++ b/.history/src/style_20230620103236.css @@ -0,0 +1,113 @@ +body { + width: 200%; + background-image: url(fondo.jpg); + background-repeat: unset; +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620103319.css b/.history/src/style_20230620103319.css new file mode 100644 index 00000000..1b4a4962 --- /dev/null +++ b/.history/src/style_20230620103319.css @@ -0,0 +1,113 @@ +body { + width: 200%; + background-image: url(fondo.jpg); + background-repeat: inherit; +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620103353.css b/.history/src/style_20230620103353.css new file mode 100644 index 00000000..bb72d34e --- /dev/null +++ b/.history/src/style_20230620103353.css @@ -0,0 +1,113 @@ +body { + width: 200%; + background-image: url(fondo.jpg); + background-repeat: repeat-x; +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620103410.css b/.history/src/style_20230620103410.css new file mode 100644 index 00000000..a2baba8c --- /dev/null +++ b/.history/src/style_20230620103410.css @@ -0,0 +1,113 @@ +body { + width: 200%; + background-image: url(fondo.jpg); + background-repeat: repeat-y; +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620103448.css b/.history/src/style_20230620103448.css new file mode 100644 index 00000000..f5ff32e8 --- /dev/null +++ b/.history/src/style_20230620103448.css @@ -0,0 +1,113 @@ +body { + @media only screen and (max-width: 50px) + background-image: url(fondo.jpg); + background-repeat: repeat-y; +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620103531.css b/.history/src/style_20230620103531.css new file mode 100644 index 00000000..2a096d7d --- /dev/null +++ b/.history/src/style_20230620103531.css @@ -0,0 +1,113 @@ +body { + @media only screen and (max-width: 100%) + background-image: url(fondo.jpg); + background-repeat: repeat-y; +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620103547.css b/.history/src/style_20230620103547.css new file mode 100644 index 00000000..73b6360a --- /dev/null +++ b/.history/src/style_20230620103547.css @@ -0,0 +1,113 @@ +body { + @media only screen + background-image: url(fondo.jpg); + background-repeat: repeat-y; +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620103618.css b/.history/src/style_20230620103618.css new file mode 100644 index 00000000..0a397bb0 --- /dev/null +++ b/.history/src/style_20230620103618.css @@ -0,0 +1,113 @@ +body { + max-width: 600px + background-image: url(fondo.jpg); + +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620103651.css b/.history/src/style_20230620103651.css new file mode 100644 index 00000000..4c6fe14c --- /dev/null +++ b/.history/src/style_20230620103651.css @@ -0,0 +1,113 @@ +body { + background-image: url(fondo.jpg); + background: fixed; + +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620103702.css b/.history/src/style_20230620103702.css new file mode 100644 index 00000000..d5dd79b9 --- /dev/null +++ b/.history/src/style_20230620103702.css @@ -0,0 +1,113 @@ +body { + background-image: url(fondo.jpg); + + +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620104155.css b/.history/src/style_20230620104155.css new file mode 100644 index 00000000..d4b8c08a --- /dev/null +++ b/.history/src/style_20230620104155.css @@ -0,0 +1,112 @@ +body { + background-image: url(fondo.jpg); +background-repeat: round; +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620104217.css b/.history/src/style_20230620104217.css new file mode 100644 index 00000000..88ff1dc1 --- /dev/null +++ b/.history/src/style_20230620104217.css @@ -0,0 +1,112 @@ +body { + background-image: url(fondo.jpg); +background-repeat: initial; +} + +h1 { + @media only screen and (max-width: 600px) + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620104301.css b/.history/src/style_20230620104301.css new file mode 100644 index 00000000..4cf54432 --- /dev/null +++ b/.history/src/style_20230620104301.css @@ -0,0 +1,111 @@ +body { + background-image: url(fondo.jpg); +background-repeat: initial; +} + +h1 { + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620104310.css b/.history/src/style_20230620104310.css new file mode 100644 index 00000000..86f2c865 --- /dev/null +++ b/.history/src/style_20230620104310.css @@ -0,0 +1,112 @@ +body { + background-image: url(fondo.jpg); +background-repeat: initial; +} + +h1 { + display: flex; + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + @media only screen and (max-width: 600px) + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620104330.css b/.history/src/style_20230620104330.css new file mode 100644 index 00000000..2de27178 --- /dev/null +++ b/.history/src/style_20230620104330.css @@ -0,0 +1,112 @@ +body { + background-image: url(fondo.jpg); +background-repeat: initial; +} + +h1 { + display: flex; + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + display: flex; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + @media only screen and (max-width: 600px) + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620104336.css b/.history/src/style_20230620104336.css new file mode 100644 index 00000000..0a9c965c --- /dev/null +++ b/.history/src/style_20230620104336.css @@ -0,0 +1,112 @@ +body { + background-image: url(fondo.jpg); +background-repeat: initial; +} + +h1 { + display: flex; + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + display: flex; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + display: flex; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + @media only screen and (max-width: 600px) + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620104342.css b/.history/src/style_20230620104342.css new file mode 100644 index 00000000..e8e4d7d6 --- /dev/null +++ b/.history/src/style_20230620104342.css @@ -0,0 +1,112 @@ +body { + background-image: url(fondo.jpg); +background-repeat: initial; +} + +h1 { + display: flex; + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + display: flex; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + display: flex; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + display: flex; + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + @media only screen and (max-width: 600px) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620104348.css b/.history/src/style_20230620104348.css new file mode 100644 index 00000000..db6a206d --- /dev/null +++ b/.history/src/style_20230620104348.css @@ -0,0 +1,112 @@ +body { + background-image: url(fondo.jpg); +background-repeat: initial; +} + +h1 { + display: flex; + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + display: flex; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + display: flex; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + display: flex; + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + display: flex;) + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + @media only screen and (max-width: 600px) + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620104354.css b/.history/src/style_20230620104354.css new file mode 100644 index 00000000..d81e644a --- /dev/null +++ b/.history/src/style_20230620104354.css @@ -0,0 +1,112 @@ +body { + background-image: url(fondo.jpg); +background-repeat: initial; +} + +h1 { + display: flex; + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + display: flex; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + display: flex; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + display: flex; + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + display: flex; + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + display: flex; + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + @media only screen and (max-width: 600px) + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620104358.css b/.history/src/style_20230620104358.css new file mode 100644 index 00000000..fef89627 --- /dev/null +++ b/.history/src/style_20230620104358.css @@ -0,0 +1,112 @@ +body { + background-image: url(fondo.jpg); +background-repeat: initial; +} + +h1 { + display: flex; + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + display: flex; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + display: flex; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + display: flex; + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + display: flex; + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + display: flex; + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + display: flex; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620104500.css b/.history/src/style_20230620104500.css new file mode 100644 index 00000000..e32bf219 --- /dev/null +++ b/.history/src/style_20230620104500.css @@ -0,0 +1,112 @@ +body { + background-image: url(fondo.jpg); + background-repeat: round; +} + +h1 { + display: flex; + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + display: flex; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + display: flex; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + display: flex; + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + display: flex; + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + display: flex; + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + display: flex; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620104515.css b/.history/src/style_20230620104515.css new file mode 100644 index 00000000..ab320ca7 --- /dev/null +++ b/.history/src/style_20230620104515.css @@ -0,0 +1,112 @@ +body { + background-image: url(fondo.jpg); + background-repeat: space; +} + +h1 { + display: flex; + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + display: flex; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + display: flex; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + display: flex; + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + display: flex; + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + display: flex; + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + display: flex; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/src/style_20230620104542.css b/.history/src/style_20230620104542.css new file mode 100644 index 00000000..a69415b1 --- /dev/null +++ b/.history/src/style_20230620104542.css @@ -0,0 +1,113 @@ +body { + background-image: url(fondo.jpg); + background-repeat: space; + background-color: black; +} + +h1 { + display: flex; + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + display: flex; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + display: flex; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + display: flex; + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + display: flex; + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + display: flex; + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + display: flex; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/.history/test/data.spec_20230523131134.js b/.history/test/data.spec_20230523131134.js new file mode 100644 index 00000000..09b1f23f --- /dev/null +++ b/.history/test/data.spec_20230523131134.js @@ -0,0 +1,23 @@ +import { example, anotherExample } from '../src/data.js'; + + +describe('example', () => { + it('is a function', () => { + expect(typeof example).toBe('function'); + }); + + it('returns `example`', () => { + expect(example()).toBe('example'); + }); +}); + + +describe('anotherExample', () => { + it('is a function', () => { + expect(typeof anotherExample).toBe('function'); + }); + + it('returns `anotherExample`', () => { + expect(anotherExample()).toBe('OMG'); + }); +}); diff --git a/.history/test/data.spec_20230616090242.js b/.history/test/data.spec_20230616090242.js new file mode 100644 index 00000000..238e46e7 --- /dev/null +++ b/.history/test/data.spec_20230616090242.js @@ -0,0 +1,25 @@ +//import { allData, + + example, anotherExample } from '../src/data.js'; + + +describe('example', () => { + it('is a function', () => { + expect(typeof example).toBe('function'); + }); + + it('returns `example`', () => { + expect(example()).toBe('example'); + }); +}); + + +describe('anotherExample', () => { + it('is a function', () => { + expect(typeof anotherExample).toBe('function'); + }); + + it('returns `anotherExample`', () => { + expect(anotherExample()).toBe('OMG'); + }); +}); diff --git a/.history/test/data.spec_20230616090411.js b/.history/test/data.spec_20230616090411.js new file mode 100644 index 00000000..6680579e --- /dev/null +++ b/.history/test/data.spec_20230616090411.js @@ -0,0 +1,25 @@ +import { allData, + + example, anotherExample } from '../src/data.js'; + + +describe('example', () => { + it('is a function', () => { + expect(typeof example).toBe('function'); + }); + + it('returns `example`', () => { + expect(example()).toBe('example'); + }); +}); + + +describe('anotherExample', () => { + it('is a function', () => { + expect(typeof anotherExample).toBe('function'); + }); + + it('returns `anotherExample`', () => { + expect(anotherExample()).toBe('OMG'); + }); +}); diff --git a/.history/test/data.spec_20230619084754.js b/.history/test/data.spec_20230619084754.js new file mode 100644 index 00000000..350cabae --- /dev/null +++ b/.history/test/data.spec_20230619084754.js @@ -0,0 +1,23 @@ +import {example, anotherExample } from '../src/data.js'; + + +describe('example', () => { + it('is a function', () => { + expect(typeof example).toBe('function'); + }); + + it('returns `example`', () => { + expect(example()).toBe('example'); + }); +}); + + +describe('anotherExample', () => { + it('is a function', () => { + expect(typeof anotherExample).toBe('function'); + }); + + it('returns `anotherExample`', () => { + expect(anotherExample()).toBe('OMG'); + }); +}); diff --git a/.history/test/data.spec_20230619084940.js b/.history/test/data.spec_20230619084940.js new file mode 100644 index 00000000..f4dd19ba --- /dev/null +++ b/.history/test/data.spec_20230619084940.js @@ -0,0 +1,23 @@ +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir, filtroProduc } from '../src/data.js'; + + +describe('allData', () => { + it('is a function', () => { + expect(typeof example).toBe('function'); + }); + + it('returns `example`', () => { + expect(example()).toBe('example'); + }); +}); + + +describe('anotherExample', () => { + it('is a function', () => { + expect(typeof anotherExample).toBe('function'); + }); + + it('returns `anotherExample`', () => { + expect(anotherExample()).toBe('OMG'); + }); +}); diff --git a/.history/test/data.spec_20230619085156.js b/.history/test/data.spec_20230619085156.js new file mode 100644 index 00000000..c5dd4e58 --- /dev/null +++ b/.history/test/data.spec_20230619085156.js @@ -0,0 +1,23 @@ +import {orderData, orderData2, orderFecha, orderFecha2, filtroDir, filtroProduc } from '../src/data.js'; + + +describe('orderData', () => { + it('is a function', () => { + expect(typeof example).toBe('function'); + }); + + it('returns `example`', () => { + expect(example()).toBe('example'); + }); +}); + + +describe('anotherExample', () => { + it('is a function', () => { + expect(typeof anotherExample).toBe('function'); + }); + + it('returns `anotherExample`', () => { + expect(anotherExample()).toBe('OMG'); + }); +}); diff --git a/.history/test/data.spec_20230619085633.js b/.history/test/data.spec_20230619085633.js new file mode 100644 index 00000000..e3d86235 --- /dev/null +++ b/.history/test/data.spec_20230619085633.js @@ -0,0 +1,23 @@ +import {filtroDir, filtroProduc } from '../src/data.js'; + + +describe('filtroDir', () => { + it('is a function', () => { + expect(typeof example).toBe('function'); + }); + + it('returns `example`', () => { + expect(example()).toBe('example'); + }); +}); + + +describe('anotherExample', () => { + it('is a function', () => { + expect(typeof anotherExample).toBe('function'); + }); + + it('returns `anotherExample`', () => { + expect(anotherExample()).toBe('OMG'); + }); +}); diff --git a/.history/test/data.spec_20230619091149.js b/.history/test/data.spec_20230619091149.js new file mode 100644 index 00000000..eda8712c --- /dev/null +++ b/.history/test/data.spec_20230619091149.js @@ -0,0 +1,37 @@ +import {filtroDir, filtroProduc } from '../src/data.js'; + + +describe('filtroDir', () => { + const directoresTest = [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ] + + + + + + + it('is a function', () => { + expect(typeof example).toBe('function'); + }); + + it('returns `example`', () => { + expect(example()).toBe('example'); + }); +}); + + +describe('anotherExample', () => { + it('is a function', () => { + expect(typeof anotherExample).toBe('function'); + }); + + it('returns `anotherExample`', () => { + expect(anotherExample()).toBe('OMG'); + }); +}); diff --git a/.history/test/data.spec_20230619091959.js b/.history/test/data.spec_20230619091959.js new file mode 100644 index 00000000..7d7c3d38 --- /dev/null +++ b/.history/test/data.spec_20230619091959.js @@ -0,0 +1,31 @@ +import {filtroDir, filtroProduc } from '../src/data.js'; + + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toBe(); + }); + + it('returns `example`', () => { + expect(example()).toBe('example'); + }); +}); + + +describe('anotherExample', () => { + it('is a function', () => { + expect(typeof anotherExample).toBe('function'); + }); + + it('returns `anotherExample`', () => { + expect(anotherExample()).toBe('OMG'); + }); +}); diff --git a/.history/test/data.spec_20230619092348.js b/.history/test/data.spec_20230619092348.js new file mode 100644 index 00000000..d2d1134e --- /dev/null +++ b/.history/test/data.spec_20230619092348.js @@ -0,0 +1,39 @@ +import {filtroDir, filtroProduc } from '../src/data.js'; + + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + + + it('returns `example`', () => { + expect(example()).toBe('example'); + }); +}); + + +describe('anotherExample', () => { + it('is a function', () => { + expect(typeof anotherExample).toBe('function'); + }); + + it('returns `anotherExample`', () => { + expect(anotherExample()).toBe('OMG'); + }); +}); diff --git a/.history/test/data.spec_20230619092543.js b/.history/test/data.spec_20230619092543.js new file mode 100644 index 00000000..53501bd3 --- /dev/null +++ b/.history/test/data.spec_20230619092543.js @@ -0,0 +1,34 @@ +import {filtroDir, filtroProduc } from '../src/data.js'; + + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + , + , + ]); + }); diff --git a/.history/test/data.spec_20230619092701.js b/.history/test/data.spec_20230619092701.js new file mode 100644 index 00000000..9f5a89ee --- /dev/null +++ b/.history/test/data.spec_20230619092701.js @@ -0,0 +1,32 @@ +import {filtroDir, filtroProduc } from '../src/data.js'; + + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); \ No newline at end of file diff --git a/.history/test/data.spec_20230619092754.js b/.history/test/data.spec_20230619092754.js new file mode 100644 index 00000000..42553603 --- /dev/null +++ b/.history/test/data.spec_20230619092754.js @@ -0,0 +1,33 @@ +import {filtroDir, filtroProduc } from '../src/data.js'; + + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619092825.js b/.history/test/data.spec_20230619092825.js new file mode 100644 index 00000000..46662b14 --- /dev/null +++ b/.history/test/data.spec_20230619092825.js @@ -0,0 +1,33 @@ +import {filtroDir} from '../src/data.js'; + + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619092839.js b/.history/test/data.spec_20230619092839.js new file mode 100644 index 00000000..7eb8fce2 --- /dev/null +++ b/.history/test/data.spec_20230619092839.js @@ -0,0 +1,33 @@ +import {filtroDir} from '../src/data.js'; + + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); diff --git a/.history/test/data.spec_20230619094115.js b/.history/test/data.spec_20230619094115.js new file mode 100644 index 00000000..7c0480c5 --- /dev/null +++ b/.history/test/data.spec_20230619094115.js @@ -0,0 +1,63 @@ +import {filtroDir,filtroProduc} from '../src/data.js'; + + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619094312.js b/.history/test/data.spec_20230619094312.js new file mode 100644 index 00000000..c3980bd5 --- /dev/null +++ b/.history/test/data.spec_20230619094312.js @@ -0,0 +1,65 @@ +import {filtroDir,filtroProduc} from '../src/data.js'; + + + + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619094440.js b/.history/test/data.spec_20230619094440.js new file mode 100644 index 00000000..bafcfe43 --- /dev/null +++ b/.history/test/data.spec_20230619094440.js @@ -0,0 +1,95 @@ +import {orderData, filtroDir,filtroProduc} from '../src/data.js'; + + +describe('import {orderData, filtroDir,filtroProduc} from '../src/data.js'; +', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619095144.js b/.history/test/data.spec_20230619095144.js new file mode 100644 index 00000000..d2789f33 --- /dev/null +++ b/.history/test/data.spec_20230619095144.js @@ -0,0 +1,108 @@ +import {orderData, filtroDir,filtroProduc} from '../src/data.js'; + + +describe('orderData', () => { + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", orderDataTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", orderDataTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619100132.js b/.history/test/data.spec_20230619100132.js new file mode 100644 index 00000000..02dfcd8f --- /dev/null +++ b/.history/test/data.spec_20230619100132.js @@ -0,0 +1,138 @@ +import {orderData, filtroDir,filtroProduc} from '../src/data.js'; + + +describe('orderData', () => { + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + it('return title', () => { //le decimos que va a ser + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(orderData("director", orderDataTest)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + + ]); + }); +}); + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619100212.js b/.history/test/data.spec_20230619100212.js new file mode 100644 index 00000000..39cac389 --- /dev/null +++ b/.history/test/data.spec_20230619100212.js @@ -0,0 +1,137 @@ +import {orderData, filtroDir,filtroProduc} from '../src/data.js'; + + +describe('orderData', () => { + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + it('return title', () => { //le decimos que va a ser + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + it('return title', () => { //le decimos que va a ser + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); +}); + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619100243.js b/.history/test/data.spec_20230619100243.js new file mode 100644 index 00000000..7e1930ea --- /dev/null +++ b/.history/test/data.spec_20230619100243.js @@ -0,0 +1,137 @@ +import {orderData, filtroDir,filtroProduc} from '../src/data.js'; + + +describe('orderData', () => { + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + it('return title', () => { //le decimos que va a ser + expect(orderData("title a-z", orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + it('return title', () => { //le decimos que va a ser + expect(orderData("title z-a", orderDataTest)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); +}); + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619100248.js b/.history/test/data.spec_20230619100248.js new file mode 100644 index 00000000..7e1930ea --- /dev/null +++ b/.history/test/data.spec_20230619100248.js @@ -0,0 +1,137 @@ +import {orderData, filtroDir,filtroProduc} from '../src/data.js'; + + +describe('orderData', () => { + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + it('return title', () => { //le decimos que va a ser + expect(orderData("title a-z", orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + it('return title', () => { //le decimos que va a ser + expect(orderData("title z-a", orderDataTest)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); +}); + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619111400.js b/.history/test/data.spec_20230619111400.js new file mode 100644 index 00000000..6c21596e --- /dev/null +++ b/.history/test/data.spec_20230619111400.js @@ -0,0 +1,137 @@ +import {orderData, filtroDir,filtroProduc} from '../src/data.js'; + + +describe('orderData', () => { + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + it('return title', () => { //le decimos que va a ser + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + it('return title', () => { //le decimos que va a ser + expect(orderData("title z-a", orderDataTest)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); +}); + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619111406.js b/.history/test/data.spec_20230619111406.js new file mode 100644 index 00000000..39cac389 --- /dev/null +++ b/.history/test/data.spec_20230619111406.js @@ -0,0 +1,137 @@ +import {orderData, filtroDir,filtroProduc} from '../src/data.js'; + + +describe('orderData', () => { + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + it('return title', () => { //le decimos que va a ser + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + it('return title', () => { //le decimos que va a ser + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); +}); + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619112116.js b/.history/test/data.spec_20230619112116.js new file mode 100644 index 00000000..c0646ba4 --- /dev/null +++ b/.history/test/data.spec_20230619112116.js @@ -0,0 +1,137 @@ +import {orderData, filtroDir,filtroProduc} from '../src/data.js'; + + +describe('orderData', () => { + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + it('return title', () => { //le decimos que va a ser + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + it('return title', () => { //le decimos que va a ser + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); +}); + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619112457.js b/.history/test/data.spec_20230619112457.js new file mode 100644 index 00000000..87be9dad --- /dev/null +++ b/.history/test/data.spec_20230619112457.js @@ -0,0 +1,138 @@ +import {orderData, filtroDir,filtroProduc} from '../src/data.js'; + + +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + it('return title', () => { //le decimos que va a ser + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); +}); + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619112558.js b/.history/test/data.spec_20230619112558.js new file mode 100644 index 00000000..fe719a05 --- /dev/null +++ b/.history/test/data.spec_20230619112558.js @@ -0,0 +1,138 @@ +import {orderData, filtroDir,filtroProduc} from '../src/data.js'; + + +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + it('return title', () => { //le decimos que va a ser + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); +}); + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619112701.js b/.history/test/data.spec_20230619112701.js new file mode 100644 index 00000000..b8148655 --- /dev/null +++ b/.history/test/data.spec_20230619112701.js @@ -0,0 +1,137 @@ +import {orderData, filtroDir,filtroProduc} from '../src/data.js'; + + +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + it('return title', () => { //le decimos que va a ser + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); +}); + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619113308.js b/.history/test/data.spec_20230619113308.js new file mode 100644 index 00000000..0d46cd7b --- /dev/null +++ b/.history/test/data.spec_20230619113308.js @@ -0,0 +1,167 @@ +import {orderData, filtroDir,filtroProduc} from '../src/data.js'; + + +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + + + + + + + + + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619113438.js b/.history/test/data.spec_20230619113438.js new file mode 100644 index 00000000..db429e87 --- /dev/null +++ b/.history/test/data.spec_20230619113438.js @@ -0,0 +1,170 @@ +import {orderData, filtroDir,filtroProduc} from '../src/data.js'; + + +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + + + + + + + + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619113524.js b/.history/test/data.spec_20230619113524.js new file mode 100644 index 00000000..1743de3c --- /dev/null +++ b/.history/test/data.spec_20230619113524.js @@ -0,0 +1,172 @@ +import {orderData, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + + + + + + + + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619113633.js b/.history/test/data.spec_20230619113633.js new file mode 100644 index 00000000..8ba15fac --- /dev/null +++ b/.history/test/data.spec_20230619113633.js @@ -0,0 +1,172 @@ +import {orderData, orderData2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + + + + + + + + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619113659.js b/.history/test/data.spec_20230619113659.js new file mode 100644 index 00000000..01535d7d --- /dev/null +++ b/.history/test/data.spec_20230619113659.js @@ -0,0 +1,172 @@ +import {orderData, orderData2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2("title", orderDataTest)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + + + + + + + + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619113721.js b/.history/test/data.spec_20230619113721.js new file mode 100644 index 00000000..eeb2a261 --- /dev/null +++ b/.history/test/data.spec_20230619113721.js @@ -0,0 +1,172 @@ +import {orderData, orderData2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData("title", orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2("title", orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + + + + + + + + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619114444.js b/.history/test/data.spec_20230619114444.js new file mode 100644 index 00000000..39f4611b --- /dev/null +++ b/.history/test/data.spec_20230619114444.js @@ -0,0 +1,172 @@ +import {orderData, orderData2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2("title", orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + + + + + + + + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619114740.js b/.history/test/data.spec_20230619114740.js new file mode 100644 index 00000000..77c7d62b --- /dev/null +++ b/.history/test/data.spec_20230619114740.js @@ -0,0 +1,172 @@ +import {orderData, orderData2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + + + + + + + + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619115252.js b/.history/test/data.spec_20230619115252.js new file mode 100644 index 00000000..ebb78c5f --- /dev/null +++ b/.history/test/data.spec_20230619115252.js @@ -0,0 +1,170 @@ +import {orderData, orderData2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); +}); + + + + + it('return director', () => { //le decimos que va a ser + expect(filtroDir("director", directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619115423.js b/.history/test/data.spec_20230619115423.js new file mode 100644 index 00000000..76b9a1fb --- /dev/null +++ b/.history/test/data.spec_20230619115423.js @@ -0,0 +1,165 @@ +import {orderData, orderData2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619115436.js b/.history/test/data.spec_20230619115436.js new file mode 100644 index 00000000..cb991bd7 --- /dev/null +++ b/.history/test/data.spec_20230619115436.js @@ -0,0 +1,167 @@ +import {orderData, orderData2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest)).toEqual( [ + {director: "Yoshifumi Kondō"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + ]); + }); +}); + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619120729.js b/.history/test/data.spec_20230619120729.js new file mode 100644 index 00000000..69650f38 --- /dev/null +++ b/.history/test/data.spec_20230619120729.js @@ -0,0 +1,158 @@ +import {orderData, orderData2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); +}); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc("producer", producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619120842.js b/.history/test/data.spec_20230619120842.js new file mode 100644 index 00000000..cdb3a18b --- /dev/null +++ b/.history/test/data.spec_20230619120842.js @@ -0,0 +1,158 @@ +import {orderData, orderData2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); +}); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619121050.js b/.history/test/data.spec_20230619121050.js new file mode 100644 index 00000000..4a36818f --- /dev/null +++ b/.history/test/data.spec_20230619121050.js @@ -0,0 +1,170 @@ +import {orderData, orderData2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); +}); + + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest)).toEqual( [ + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + + ]); +}); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619121319.js b/.history/test/data.spec_20230619121319.js new file mode 100644 index 00000000..5ff4de08 --- /dev/null +++ b/.history/test/data.spec_20230619121319.js @@ -0,0 +1,170 @@ +import {orderData, orderData2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest)).toEqual( [ + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]); + }); + + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest)).toEqual( [ + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619122130.js b/.history/test/data.spec_20230619122130.js new file mode 100644 index 00000000..21ad8556 --- /dev/null +++ b/.history/test/data.spec_20230619122130.js @@ -0,0 +1,170 @@ +import {orderData, orderData2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + /*{director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"},*/ + ]); + }); + + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest)).toEqual( [ + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619122215.js b/.history/test/data.spec_20230619122215.js new file mode 100644 index 00000000..b0b1cf25 --- /dev/null +++ b/.history/test/data.spec_20230619122215.js @@ -0,0 +1,165 @@ +import {orderData, orderData2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); + + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest)).toEqual( [ + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619122240.js b/.history/test/data.spec_20230619122240.js new file mode 100644 index 00000000..ea800266 --- /dev/null +++ b/.history/test/data.spec_20230619122240.js @@ -0,0 +1,153 @@ +import {orderData, orderData2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); + }), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619122247.js b/.history/test/data.spec_20230619122247.js new file mode 100644 index 00000000..d42d6fad --- /dev/null +++ b/.history/test/data.spec_20230619122247.js @@ -0,0 +1,153 @@ +import {orderData, orderData2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest)).toEqual( [ + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619122436.js b/.history/test/data.spec_20230619122436.js new file mode 100644 index 00000000..49969e17 --- /dev/null +++ b/.history/test/data.spec_20230619122436.js @@ -0,0 +1,149 @@ +import {orderData, orderData2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual( [ + {producer: "Isao Takahata"}, + ]); + }); + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest)).toEstrictEqual( [ + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + + ]) ; + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619122445.js b/.history/test/data.spec_20230619122445.js new file mode 100644 index 00000000..9886b426 --- /dev/null +++ b/.history/test/data.spec_20230619122445.js @@ -0,0 +1,139 @@ +import {orderData, orderData2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual( [ + {producer: "Isao Takahata"}, + ]); + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619123529.js b/.history/test/data.spec_20230619123529.js new file mode 100644 index 00000000..9d51bda5 --- /dev/null +++ b/.history/test/data.spec_20230619123529.js @@ -0,0 +1,154 @@ +import {orderData, orderData2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + +//fecha +describe('orderFecha', () => { + const fechaTest = [ //array de test + {release_date: "1986"}, + {release_date: "Gorō Miyazaki"}, + {release_date: "Isao Takahata"}, + + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); +}), + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual( [ + {producer: "Isao Takahata"}, + ]); + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619123530.js b/.history/test/data.spec_20230619123530.js new file mode 100644 index 00000000..9d51bda5 --- /dev/null +++ b/.history/test/data.spec_20230619123530.js @@ -0,0 +1,154 @@ +import {orderData, orderData2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + +//fecha +describe('orderFecha', () => { + const fechaTest = [ //array de test + {release_date: "1986"}, + {release_date: "Gorō Miyazaki"}, + {release_date: "Isao Takahata"}, + + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); +}), + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual( [ + {producer: "Isao Takahata"}, + ]); + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619123857.js b/.history/test/data.spec_20230619123857.js new file mode 100644 index 00000000..b60b925b --- /dev/null +++ b/.history/test/data.spec_20230619123857.js @@ -0,0 +1,165 @@ +import {orderData, orderData2, orderFecha, orderFecha2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + +//fecha +describe('orderFecha', () => { + const fechaTest = [ //array de test + {release_date: "1986"}, + {release_date: "1988"}, + {release_date: "1989"}, ]; + it('return director', () => { //le decimos que va a ser + expect(orderFecha(fechaTest, "1986")).toEqual( [ + {director: "1986"}, + ]); + }); +}), + +//fecha +describe('orderFecha2', () => { + const fechaTest = [ //array de test + {release_date: "1986"}, + {release_date: "1988"}, + {release_date: "1989"}, ]; + it('return director', () => { //le decimos que va a ser + expect(orderFecha2(fechaTest, "1986")).toEqual( [ + {director: "1986"}, + ]); + }); +}), + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual( [ + {producer: "Isao Takahata"}, + ]); + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619124008.js b/.history/test/data.spec_20230619124008.js new file mode 100644 index 00000000..560647dc --- /dev/null +++ b/.history/test/data.spec_20230619124008.js @@ -0,0 +1,165 @@ +import {orderData, orderData2, orderFecha, orderFecha2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + +//fecha +describe('orderFecha', () => { + const fechaTest = [ //array de test + {release_date: "1986"}, + {release_date: "1988"}, + {release_date: "1989"}, ]; + it('return director', () => { //le decimos que va a ser + expect(orderFecha(fechaTest, "1986")).toEqual( [ + {director: "1986"}, + ]); + }); +}), + +//fecha +describe('orderFecha2', () => { + const fechaTest = [ //array de test + {release_date: "1991"}, + {release_date: "1992"}, + {release_date: "1994"}, ]; + it('return director', () => { //le decimos que va a ser + expect(orderFecha2(fechaTest, "1986")).toEqual( [ + {director: "1986"}, + ]); + }); +}), + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual( [ + {producer: "Isao Takahata"}, + ]); + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619124021.js b/.history/test/data.spec_20230619124021.js new file mode 100644 index 00000000..203f2f9b --- /dev/null +++ b/.history/test/data.spec_20230619124021.js @@ -0,0 +1,165 @@ +import {orderData, orderData2, orderFecha, orderFecha2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + +//fecha +describe('orderFecha', () => { + const fechaTest = [ //array de test + {release_date: "1986"}, + {release_date: "1988"}, + {release_date: "1989"}, ]; + it('return director', () => { //le decimos que va a ser + expect(orderFecha(fechaTest, "1986")).toEqual( [ + {director: "1986"}, + ]); + }); +}), + +//fecha +describe('orderFecha2', () => { + const fechaTest = [ //array de test + {release_date: "1991"}, + {release_date: "1992"}, + {release_date: "1994"}, ]; + it('return director', () => { //le decimos que va a ser + expect(orderFecha2(fechaTest, "1994")).toEqual( [ + {director: "1994"}, + ]); + }); +}), + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual( [ + {producer: "Isao Takahata"}, + ]); + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619124142.js b/.history/test/data.spec_20230619124142.js new file mode 100644 index 00000000..355a0428 --- /dev/null +++ b/.history/test/data.spec_20230619124142.js @@ -0,0 +1,165 @@ +import {orderData, orderData2, orderFecha, orderFecha2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + +//fecha +describe('orderFecha', () => { + const fechaTest = [ //array de test + {release_date: "1986"}, + {release_date: "1988"}, + {release_date: "1989"}, ]; + it('return director', () => { //le decimos que va a ser + expect(orderFecha(fechaTest, "1986")).toEqual( [ + {release_date: "1986"}, + ]); + }); +}), + +//fecha +describe('orderFecha2', () => { + const fechaTest = [ //array de test + {release_date: "1991"}, + {release_date: "1992"}, + {release_date: "1994"}, ]; + it('return director', () => { //le decimos que va a ser + expect(orderFecha2(fechaTest, "1994")).toEqual( [ + {release_date: "1994"}, + ]); + }); +}), + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual( [ + {producer: "Isao Takahata"}, + ]); + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619124204.js b/.history/test/data.spec_20230619124204.js new file mode 100644 index 00000000..970ebbf4 --- /dev/null +++ b/.history/test/data.spec_20230619124204.js @@ -0,0 +1,165 @@ +import {orderData, orderData2, orderFecha, orderFecha2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + +//fecha +describe('orderFecha', () => { + const fechaTest = [ //array de test + {release_date: "1986"}, + {release_date: "1988"}, + {release_date: "1989"}, ]; + it('return release_date: ', () => { //le decimos que va a ser + expect(orderFecha(fechaTest, "1986")).toEqual( [ + {release_date: "1986"}, + ]); + }); +}), + +//fecha +describe('orderFecha2', () => { + const fechaTest = [ //array de test + {release_date: "1991"}, + {release_date: "1992"}, + {release_date: "1994"}, ]; + it('return release_date', () => { //le decimos que va a ser + expect(orderFecha2(fechaTest, "1994")).toEqual( [ + {release_date: "1994"}, + ]); + }); +}), + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual( [ + {producer: "Isao Takahata"}, + ]); + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619124208.js b/.history/test/data.spec_20230619124208.js new file mode 100644 index 00000000..6745205b --- /dev/null +++ b/.history/test/data.spec_20230619124208.js @@ -0,0 +1,165 @@ +import {orderData, orderData2, orderFecha, orderFecha2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + +//fecha +describe('orderFecha', () => { + const fechaTest = [ //array de test + {release_date: "1986"}, + {release_date: "1988"}, + {release_date: "1989"}, ]; + it('return release_date', () => { //le decimos que va a ser + expect(orderFecha(fechaTest, "1986")).toEqual( [ + {release_date: "1986"}, + ]); + }); +}), + +//fecha +describe('orderFecha2', () => { + const fechaTest = [ //array de test + {release_date: "1991"}, + {release_date: "1992"}, + {release_date: "1994"}, ]; + it('return release_date', () => { //le decimos que va a ser + expect(orderFecha2(fechaTest, "1994")).toEqual( [ + {release_date: "1994"}, + ]); + }); +}), + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual( [ + {producer: "Isao Takahata"}, + ]); + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619124323.js b/.history/test/data.spec_20230619124323.js new file mode 100644 index 00000000..d720bce6 --- /dev/null +++ b/.history/test/data.spec_20230619124323.js @@ -0,0 +1,165 @@ +import {orderData, orderData2, orderFecha, orderFecha2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + +//fecha +describe('orderFecha', () => { + const fechaTest = [ //array de test + {release_date: "1986"}, + {release_date: "1988"}, + {release_date: "1989"}, ]; + it('return release_date', () => { //le decimos que va a ser + expect(orderFecha(fechaTest, "1986")).toEqual( [ + {release_date: "1986"}, + ]); + }); +}), + +//fecha +describe('orderFecha2', () => { + const fechaTest = [ //array de test + {release_date: "1991"}, + {release_date: "1992"}, + {release_date: "1994"}, ]; + it('return release_date', () => { //le decimos que va a ser + expect(orderFecha2(fechaTest,"1994")).toEqual( [ + {release_date: "1994"}, + ]); + }); +}), + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual( [ + {producer: "Isao Takahata"}, + ]); + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619124330.js b/.history/test/data.spec_20230619124330.js new file mode 100644 index 00000000..19311a4f --- /dev/null +++ b/.history/test/data.spec_20230619124330.js @@ -0,0 +1,165 @@ +import {orderData, orderData2, orderFecha, orderFecha2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + +//fecha +describe('orderFecha', () => { + const fechaTest = [ //array de test + {release_date: "1986"}, + {release_date: "1988"}, + {release_date: "1989"}, ]; + it('return release_date', () => { //le decimos que va a ser + expect(orderFecha(fechaTest, "1986")).toEqual( [ + {release_date: "1986"}, + ]); + }); +}), + +//fecha +describe('orderFecha2', () => { + const fechaTest = [ //array de test + {release_date: "1991"}, + {release_date: "1992"}, + {release_date: "1994"}, ]; + it('return release_date', () => { //le decimos que va a ser + expect(orderFecha2(fechaTest,"1994")).toEqual( [ + {release_date: "1994"}, + ]); + }); +}), + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual( [ + {producer: "Isao Takahata"}, + ]); + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619124412.js b/.history/test/data.spec_20230619124412.js new file mode 100644 index 00000000..d7a5cc39 --- /dev/null +++ b/.history/test/data.spec_20230619124412.js @@ -0,0 +1,167 @@ +import {orderData, orderData2, orderFecha, orderFecha2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + +//fecha +describe('orderFecha', () => { + const fechaTest = [ //array de test + {release_date: "1986"}, + {release_date: "1988"}, + {release_date: "1989"}, + ]; + it('return release_date', () => { //le decimos que va a ser + expect(orderFecha(fechaTest,"1986")).toEqual( [ + {release_date: "1986"}, + ]); + }); +}), + +//fecha +describe('orderFecha2', () => { + const fechaTest = [ //array de test + {release_date: "1991"}, + {release_date: "1992"}, + {release_date: "1994"}, + ]; + it('return release_date', () => { //le decimos que va a ser + expect(orderFecha2(fechaTest,"1994")).toEqual( [ + {release_date: "1994"}, + ]); + }); +}), + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual( [ + {producer: "Isao Takahata"}, + ]); + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619124622.js b/.history/test/data.spec_20230619124622.js new file mode 100644 index 00000000..552e8edd --- /dev/null +++ b/.history/test/data.spec_20230619124622.js @@ -0,0 +1,167 @@ +import {orderData, orderData2, orderFecha, orderFecha2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + +//fecha +describe('orderFecha', () => { + const fechaTest = [ //array de test + {"release_date": "1986"}, + {"release_date": "1988"}, + {"release_date":"1989"}, + ]; + it('return release_date', () => { //le decimos que va a ser + expect(orderFecha(fechaTest,"1986")).toEqual( [ + {"release_date": "1986"}, + ]); + }); +}), + +//fecha +describe('orderFecha2', () => { + const fechaTest = [ //array de test + {release_date: "1991"}, + {release_date: "1992"}, + {release_date: "1994"}, + ]; + it('return release_date', () => { //le decimos que va a ser + expect(orderFecha2(fechaTest,"1994")).toEqual( [ + {release_date: "1994"}, + ]); + }); +}), + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual( [ + {producer: "Isao Takahata"}, + ]); + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619124717.js b/.history/test/data.spec_20230619124717.js new file mode 100644 index 00000000..5c2949d9 --- /dev/null +++ b/.history/test/data.spec_20230619124717.js @@ -0,0 +1,167 @@ +import {orderData, orderData2, orderFecha, orderFecha2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + +//fecha +describe('orderFecha', () => { + const fechaTest = [ //array de test + {release_date: "1986"}, + {release_date: "1988"}, + {release_date:"1989"}, + ]; + it('return release_date', () => { //le decimos que va a ser + expect(orderFecha(fechaTest,"1986")).toEqual( [ + {"release_date": "1986"}, + ]); + }); +}), + +//fecha +describe('orderFecha2', () => { + const fechaTest2 = [ //array de test + {release_date: "1991"}, + {release_date: "1992"}, + {release_date: "1994"}, + ]; + it('return release_date', () => { //le decimos que va a ser + expect(orderFecha2(fechaTest2,"1994")).toEqual( [ + {release_date: "1994"}, + ]); + }); +}), + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual( [ + {producer: "Isao Takahata"}, + ]); + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619124728.js b/.history/test/data.spec_20230619124728.js new file mode 100644 index 00000000..1203f05b --- /dev/null +++ b/.history/test/data.spec_20230619124728.js @@ -0,0 +1,167 @@ +import {orderData, orderData2, orderFecha, orderFecha2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + +//fecha +describe('orderFecha', () => { + const fechaTest = [ //array de test + {release_date: "1986"}, + {release_date: "1988"}, + {release_date:"1989"}, + ]; + it('return release_date', () => { //le decimos que va a ser + expect(orderFecha(fechaTest,"1986")).toEqual( [ + {release_date: "1986"}, + ]); + }); +}), + +//fecha +describe('orderFecha2', () => { + const fechaTest2 = [ //array de test + {release_date: "1991"}, + {release_date: "1992"}, + {release_date: "1994"}, + ]; + it('return release_date', () => { //le decimos que va a ser + expect(orderFecha2(fechaTest2,"1994")).toEqual( [ + {release_date: "1994"}, + ]); + }); +}), + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual( [ + {producer: "Isao Takahata"}, + ]); + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619124840.js b/.history/test/data.spec_20230619124840.js new file mode 100644 index 00000000..cc9248fa --- /dev/null +++ b/.history/test/data.spec_20230619124840.js @@ -0,0 +1,167 @@ +import {orderData, orderData2, orderFecha, orderFecha2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + +//fecha +describe('orderFecha', () => { + const fechaTest = [ //array de test + {release_date: "1986"}, + {release_date: "1988"}, + {release_date:"1989"}, + ]; + it('return release_date', () => { //le decimos que va a ser + expect(orderFecha(fechaTest,"1986")).toEqual( [ + {release_date: "1986"}, + ]); + }); +}), + +//fecha2 +describe('orderFecha2', () => { + const fechaTest2 = [ //array de test + {release_date: "1991"}, + {release_date: "1992"}, + {release_date: "1994"}, + ]; + it('return release_date', () => { //le decimos que va a ser + expect(orderFecha2(fechaTest2,"1991")).toEqual( [ + {release_date: "1991"}, + ]); + }); +}), + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual( [ + {producer: "Isao Takahata"}, + ]); + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619125402.js b/.history/test/data.spec_20230619125402.js new file mode 100644 index 00000000..25b4e268 --- /dev/null +++ b/.history/test/data.spec_20230619125402.js @@ -0,0 +1,167 @@ +import {orderData, orderData2, orderFecha, orderFecha2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + +//fecha +describe('orderFecha', () => { + const fechaTest = [ //array de test + {release_date: "1986"}, + {release_date: "1988"}, + {release_date: "1989"}, + ]; + it('return release_date', () => { //le decimos que va a ser + expect(orderFecha(fechaTest,"1986")).toEqual( [ + {release_date: "1986"}, + ]); + }); +}), + +//fecha2 +describe('orderFecha2', () => { + const fechaTest2 = [ //array de test + {release_date: "1991"}, + {release_date: "1992"}, + {release_date: "1994"}, + ]; + it('return release_date', () => { //le decimos que va a ser + expect(orderFecha2(fechaTest2,"1991")).toEqual( [ + {release_date: "1991"}, + ]); + }); +}), + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual( [ + {producer: "Isao Takahata"}, + ]); + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619125545.js b/.history/test/data.spec_20230619125545.js new file mode 100644 index 00000000..f4c818bb --- /dev/null +++ b/.history/test/data.spec_20230619125545.js @@ -0,0 +1,167 @@ +import {orderData, orderData2, orderFecha, orderFecha2, filtroDir,filtroProduc} from '../src/data.js'; + +//orden de la a-z +describe('orderData', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest = [ //array de test + {title: "Castle in the Sky"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "Grave of the Fireflies"}, + {title: "Only Yesterday"}, + {title: "Porco Rosso"}, + {title: "Pom Poko"}, + {title: "Whisper of the Heart"}, + {title: "Princess Mononoke"}, + {title: "My Neighbors the Yamadas"}, + {title: "Spirited Away"}, + {title: "The Cat Returns"}, + {title: "Howl's Moving Castle"}, + {title: "Tales from Earthsea"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "The Secret World of Arrietty"}, + {title: "From Up on Poppy Hill"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "When Marnie Was There"}, + ]; + expect(orderData(orderDataTest)).toEqual( [ + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + + ]); + }); + +}); + +//orden de la z-a +describe('orderData2', () => { + it('return title', () => { //le decimos que va a ser + const orderDataTest2 = [ //array de test + {title: "Castle in the Sky"}, + {title: "From Up on Poppy Hill"}, + {title: "Grave of the Fireflies"}, + {title: "Howl's Moving Castle"}, + {title: "Kiki's Delivery Service"}, + {title: "My Neighbor Totoro"}, + {title: "My Neighbors the Yamadas"}, + {title: "Only Yesterday"}, + {title: "Pom Poko"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Porco Rosso"}, + {title: "Princess Mononoke"}, + {title: "Spirited Away"}, + {title: "Tales from Earthsea"}, + {title: "The Cat Returns"}, + {title: "The Secret World of Arrietty"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Wind Rises"}, + {title: "When Marnie Was There"}, + {title: "Whisper of the Heart"}, + ]; + expect(orderData2(orderDataTest2)).toEqual( [ + {title: "Whisper of the Heart"}, + {title: "When Marnie Was There"}, + {title: "The Wind Rises"}, + {title: "The Tale of the Princess Kaguya"}, + {title: "The Secret World of Arrietty"}, + {title: "The Cat Returns"}, + {title: "Tales from Earthsea"}, + {title: "Spirited Away"}, + {title: "Princess Mononoke"}, + {title: "Porco Rosso"}, + {title: "Ponyo on the Cliff by the Sea"}, + {title: "Pom Poko"}, + {title: "Only Yesterday"}, + {title: "My Neighbors the Yamadas"}, + {title: "My Neighbor Totoro"}, + {title: "Kiki's Delivery Service"}, + {title: "Howl's Moving Castle"}, + {title: "Grave of the Fireflies"}, + {title: "From Up on Poppy Hill"}, + {title: "Castle in the Sky"}, + ]); + }); + +}); + +//fecha +describe('orderFecha', () => { + const fechaTest = [ //array de test + {release_date: "1986"}, + {release_date: "1988"}, + {release_date: "1989"}, + ]; + it('return release_date', () => { //le decimos que va a ser + expect(orderFecha(fechaTest)).toEqual( [ + {release_date: "1986"}, + ]); + }); +}), + +//fecha2 +describe('orderFecha2', () => { + const fechaTest2 = [ //array de test + {release_date: "1991"}, + {release_date: "1992"}, + {release_date: "1994"}, + ]; + it('return release_date', () => { //le decimos que va a ser + expect(orderFecha2(fechaTest2)).toEqual( [ + {release_date: "1991"}, + ]); + }); +}), + + +//directores +describe('filtroDir', () => { + const directoresTest = [ //array de test + {director: "Hayao Miyazaki"}, + {director: "Gorō Miyazaki"}, + {director: "Isao Takahata"}, + {director: "Hiroyuki Morita"}, + {director: "Hiromasa Yonebayashi"}, + {director: "Yoshifumi Kondō"}, + ]; + it('return director', () => { //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual( [ + {director: "Hayao Miyazaki"}, + ]); + }); +}), + + + +describe('filtroProduc', () => { + const producerTest = [ //array de test + {producer: "Isao Takahata"}, + {producer: "Toshio Suzuki"}, + {producer: "Toru Hara"}, + {producer: "Hayao Miyazaki"}, + {producer: "Yoshiaki Nishimura"}, + ]; + it('return producer', () => { //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual( [ + {producer: "Isao Takahata"}, + ]); + }); +}); \ No newline at end of file diff --git a/.history/test/data.spec_20230619134850.js b/.history/test/data.spec_20230619134850.js new file mode 100644 index 00000000..ed799694 --- /dev/null +++ b/.history/test/data.spec_20230619134850.js @@ -0,0 +1,211 @@ +import { + orderData, + orderData2, + orderFecha, + orderFecha2, + filtroDir, + filtroProduc, +} from "../src/data.js"; + +//orden de la a-z +describe("orderData", () => { + it("return title", () => { + //le decimos que va a ser + const orderDataTest = [ + //array de test + { title: "Castle in the Sky" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "Grave of the Fireflies" }, + { title: "Only Yesterday" }, + { title: "Porco Rosso" }, + { title: "Pom Poko" }, + { title: "Whisper of the Heart" }, + { title: "Princess Mononoke" }, + { title: "My Neighbors the Yamadas" }, + { title: "Spirited Away" }, + { title: "The Cat Returns" }, + { title: "Howl's Moving Castle" }, + { title: "Tales from Earthsea" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "The Secret World of Arrietty" }, + { title: "From Up on Poppy Hill" }, + { title: "The Wind Rises" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "When Marnie Was There" }, + ]; + expect(orderData(orderDataTest)).toEqual([ + { title: "Castle in the Sky" }, + { title: "From Up on Poppy Hill" }, + { title: "Grave of the Fireflies" }, + { title: "Howl's Moving Castle" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "My Neighbors the Yamadas" }, + { title: "Only Yesterday" }, + { title: "Pom Poko" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Porco Rosso" }, + { title: "Princess Mononoke" }, + { title: "Spirited Away" }, + { title: "Tales from Earthsea" }, + { title: "The Cat Returns" }, + { title: "The Secret World of Arrietty" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Wind Rises" }, + { title: "When Marnie Was There" }, + { title: "Whisper of the Heart" }, + ]); + }); +}); + +//orden de la z-a +describe("orderData2", () => { + it("return title", () => { + //le decimos que va a ser + const orderDataTest2 = [ + //array de test + { title: "Castle in the Sky" }, + { title: "From Up on Poppy Hill" }, + { title: "Grave of the Fireflies" }, + { title: "Howl's Moving Castle" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "My Neighbors the Yamadas" }, + { title: "Only Yesterday" }, + { title: "Pom Poko" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Porco Rosso" }, + { title: "Princess Mononoke" }, + { title: "Spirited Away" }, + { title: "Tales from Earthsea" }, + { title: "The Cat Returns" }, + { title: "The Secret World of Arrietty" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Wind Rises" }, + { title: "When Marnie Was There" }, + { title: "Whisper of the Heart" }, + ]; + expect(orderData2(orderDataTest2)).toEqual([ + { title: "Whisper of the Heart" }, + { title: "When Marnie Was There" }, + { title: "The Wind Rises" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Secret World of Arrietty" }, + { title: "The Cat Returns" }, + { title: "Tales from Earthsea" }, + { title: "Spirited Away" }, + { title: "Princess Mononoke" }, + { title: "Porco Rosso" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Pom Poko" }, + { title: "Only Yesterday" }, + { title: "My Neighbors the Yamadas" }, + { title: "My Neighbor Totoro" }, + { title: "Kiki's Delivery Service" }, + { title: "Howl's Moving Castle" }, + { title: "Grave of the Fireflies" }, + { title: "From Up on Poppy Hill" }, + { title: "Castle in the Sky" }, + ]); + }); +}); + +//fecha +describe("orderFecha", () => { + const fechaTest = [ + //array de test + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]; + it("return release_date", () => { + //le decimos que va a ser + expect(orderFecha(fechaTest)).toEqual([ + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]); + }); +}), + //fecha2 + describe("orderFecha2", () => { + const fechaTest2 = [ + //array de test + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + ]; + it("return release_date", () => { + //le decimos que va a ser + expect(orderFecha2(fechaTest2)).toEqual([{ release_date: "1991" }]); + }); + }), + //directores + describe("filtroDir", () => { + const directoresTest = [ + //array de test + { director: "Hayao Miyazaki" }, + { director: "Gorō Miyazaki" }, + { director: "Isao Takahata" }, + { director: "Hiroyuki Morita" }, + { director: "Hiromasa Yonebayashi" }, + { director: "Yoshifumi Kondō" }, + ]; + it("return director", () => { + //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual([ + { director: "Hayao Miyazaki" }, + ]); + }); + }), + describe("filtroProduc", () => { + const producerTest = [ + //array de test + { producer: "Isao Takahata" }, + { producer: "Toshio Suzuki" }, + { producer: "Toru Hara" }, + { producer: "Hayao Miyazaki" }, + { producer: "Yoshiaki Nishimura" }, + ]; + it("return producer", () => { + //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual([ + { producer: "Isao Takahata" }, + ]); + }); + }); diff --git a/.history/test/data.spec_20230619141914.js b/.history/test/data.spec_20230619141914.js new file mode 100644 index 00000000..075fc62d --- /dev/null +++ b/.history/test/data.spec_20230619141914.js @@ -0,0 +1,227 @@ +import { + orderData, + orderData2, + orderFecha, + orderFecha2, + filtroDir, + filtroProduc, +} from "../src/data.js"; + +//orden de la a-z +describe("orderData", () => { + it("return title", () => { + //le decimos que va a ser + const orderDataTest = [ + //array de test + { title: "Castle in the Sky" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "Grave of the Fireflies" }, + { title: "Only Yesterday" }, + { title: "Porco Rosso" }, + { title: "Pom Poko" }, + { title: "Whisper of the Heart" }, + { title: "Princess Mononoke" }, + { title: "My Neighbors the Yamadas" }, + { title: "Spirited Away" }, + { title: "The Cat Returns" }, + { title: "Howl's Moving Castle" }, + { title: "Tales from Earthsea" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "The Secret World of Arrietty" }, + { title: "From Up on Poppy Hill" }, + { title: "The Wind Rises" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "When Marnie Was There" }, + ]; + expect(orderData(orderDataTest)).toEqual([ + { title: "Castle in the Sky" }, + { title: "From Up on Poppy Hill" }, + { title: "Grave of the Fireflies" }, + { title: "Howl's Moving Castle" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "My Neighbors the Yamadas" }, + { title: "Only Yesterday" }, + { title: "Pom Poko" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Porco Rosso" }, + { title: "Princess Mononoke" }, + { title: "Spirited Away" }, + { title: "Tales from Earthsea" }, + { title: "The Cat Returns" }, + { title: "The Secret World of Arrietty" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Wind Rises" }, + { title: "When Marnie Was There" }, + { title: "Whisper of the Heart" }, + ]); + }); +}); + +//orden de la z-a +describe("orderData2", () => { + it("return title", () => { + //le decimos que va a ser + const orderDataTest2 = [ + //array de test + { title: "Castle in the Sky" }, + { title: "From Up on Poppy Hill" }, + { title: "Grave of the Fireflies" }, + { title: "Howl's Moving Castle" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "My Neighbors the Yamadas" }, + { title: "Only Yesterday" }, + { title: "Pom Poko" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Porco Rosso" }, + { title: "Princess Mononoke" }, + { title: "Spirited Away" }, + { title: "Tales from Earthsea" }, + { title: "The Cat Returns" }, + { title: "The Secret World of Arrietty" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Wind Rises" }, + { title: "When Marnie Was There" }, + { title: "Whisper of the Heart" }, + ]; + expect(orderData2(orderDataTest2)).toEqual([ + { title: "Whisper of the Heart" }, + { title: "When Marnie Was There" }, + { title: "The Wind Rises" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Secret World of Arrietty" }, + { title: "The Cat Returns" }, + { title: "Tales from Earthsea" }, + { title: "Spirited Away" }, + { title: "Princess Mononoke" }, + { title: "Porco Rosso" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Pom Poko" }, + { title: "Only Yesterday" }, + { title: "My Neighbors the Yamadas" }, + { title: "My Neighbor Totoro" }, + { title: "Kiki's Delivery Service" }, + { title: "Howl's Moving Castle" }, + { title: "Grave of the Fireflies" }, + { title: "From Up on Poppy Hill" }, + { title: "Castle in the Sky" }, + ]); + }); +}); + +//fecha +describe("orderFecha", () => { + const fechaTest = [ + //array de test + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]; + it("return release_date", () => { + //le decimos que va a ser + expect(orderFecha(fechaTest)).toEqual([ + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]); + }); +}), + //fecha2 +describe("orderFecha2", () => { + const fechaTest2 = [//array de test + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]; + it("return release_date", () => { + //le decimos que va a ser + expect(orderFecha2(fechaTest2)).toEqual([{ release_date: "1991" }]); + }); + }), + //directores + describe("filtroDir", () => { + const directoresTest = [ + //array de test + { director: "Hayao Miyazaki" }, + { director: "Gorō Miyazaki" }, + { director: "Isao Takahata" }, + { director: "Hiroyuki Morita" }, + { director: "Hiromasa Yonebayashi" }, + { director: "Yoshifumi Kondō" }, + ]; + it("return director", () => { + //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual([ + { director: "Hayao Miyazaki" }, + ]); + }); + }), + describe("filtroProduc", () => { + const producerTest = [ + //array de test + { producer: "Isao Takahata" }, + { producer: "Toshio Suzuki" }, + { producer: "Toru Hara" }, + { producer: "Hayao Miyazaki" }, + { producer: "Yoshiaki Nishimura" }, + ]; + it("return producer", () => { + //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual([ + { producer: "Isao Takahata" }, + ]); + }); + }); diff --git a/.history/test/data.spec_20230619142022.js b/.history/test/data.spec_20230619142022.js new file mode 100644 index 00000000..0e39bda7 --- /dev/null +++ b/.history/test/data.spec_20230619142022.js @@ -0,0 +1,228 @@ +import { + orderData, + orderData2, + orderFecha, + orderFecha2, + filtroDir, + filtroProduc, +} from "../src/data.js"; + +//orden de la a-z +describe("orderData", () => { + it("return title", () => { + //le decimos que va a ser + const orderDataTest = [ + //array de test + { title: "Castle in the Sky" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "Grave of the Fireflies" }, + { title: "Only Yesterday" }, + { title: "Porco Rosso" }, + { title: "Pom Poko" }, + { title: "Whisper of the Heart" }, + { title: "Princess Mononoke" }, + { title: "My Neighbors the Yamadas" }, + { title: "Spirited Away" }, + { title: "The Cat Returns" }, + { title: "Howl's Moving Castle" }, + { title: "Tales from Earthsea" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "The Secret World of Arrietty" }, + { title: "From Up on Poppy Hill" }, + { title: "The Wind Rises" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "When Marnie Was There" }, + ]; + expect(orderData(orderDataTest)).toEqual([ + { title: "Castle in the Sky" }, + { title: "From Up on Poppy Hill" }, + { title: "Grave of the Fireflies" }, + { title: "Howl's Moving Castle" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "My Neighbors the Yamadas" }, + { title: "Only Yesterday" }, + { title: "Pom Poko" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Porco Rosso" }, + { title: "Princess Mononoke" }, + { title: "Spirited Away" }, + { title: "Tales from Earthsea" }, + { title: "The Cat Returns" }, + { title: "The Secret World of Arrietty" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Wind Rises" }, + { title: "When Marnie Was There" }, + { title: "Whisper of the Heart" }, + ]); + }); +}); + +//orden de la z-a +describe("orderData2", () => { + it("return title", () => { + //le decimos que va a ser + const orderDataTest2 = [ + //array de test + { title: "Castle in the Sky" }, + { title: "From Up on Poppy Hill" }, + { title: "Grave of the Fireflies" }, + { title: "Howl's Moving Castle" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "My Neighbors the Yamadas" }, + { title: "Only Yesterday" }, + { title: "Pom Poko" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Porco Rosso" }, + { title: "Princess Mononoke" }, + { title: "Spirited Away" }, + { title: "Tales from Earthsea" }, + { title: "The Cat Returns" }, + { title: "The Secret World of Arrietty" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Wind Rises" }, + { title: "When Marnie Was There" }, + { title: "Whisper of the Heart" }, + ]; + expect(orderData2(orderDataTest2)).toEqual([ + { title: "Whisper of the Heart" }, + { title: "When Marnie Was There" }, + { title: "The Wind Rises" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Secret World of Arrietty" }, + { title: "The Cat Returns" }, + { title: "Tales from Earthsea" }, + { title: "Spirited Away" }, + { title: "Princess Mononoke" }, + { title: "Porco Rosso" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Pom Poko" }, + { title: "Only Yesterday" }, + { title: "My Neighbors the Yamadas" }, + { title: "My Neighbor Totoro" }, + { title: "Kiki's Delivery Service" }, + { title: "Howl's Moving Castle" }, + { title: "Grave of the Fireflies" }, + { title: "From Up on Poppy Hill" }, + { title: "Castle in the Sky" }, + ]); + }); +}); + +//fecha +describe("orderFecha", () => { + const fechaTest = [ + //array de test + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]; + it("return release_date", () => { + //le decimos que va a ser + expect(orderFecha(fechaTest)).toEqual([ + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]); + }); +}), +//fecha2 +describe("orderFecha2", () => { + const fechaTest2 = [ + //array de test + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]; + it("return release_date", () => { + //le decimos que va a ser + expect(orderFecha2(fechaTest2)).toEqual([{ release_date: "1991" }]); + }); + }), + //directores + describe("filtroDir", () => { + const directoresTest = [ + //array de test + { director: "Hayao Miyazaki" }, + { director: "Gorō Miyazaki" }, + { director: "Isao Takahata" }, + { director: "Hiroyuki Morita" }, + { director: "Hiromasa Yonebayashi" }, + { director: "Yoshifumi Kondō" }, + ]; + it("return director", () => { + //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual([ + { director: "Hayao Miyazaki" }, + ]); + }); + }), + describe("filtroProduc", () => { + const producerTest = [ + //array de test + { producer: "Isao Takahata" }, + { producer: "Toshio Suzuki" }, + { producer: "Toru Hara" }, + { producer: "Hayao Miyazaki" }, + { producer: "Yoshiaki Nishimura" }, + ]; + it("return producer", () => { + //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual([ + { producer: "Isao Takahata" }, + ]); + }); + }); diff --git a/.history/test/data.spec_20230619142129.js b/.history/test/data.spec_20230619142129.js new file mode 100644 index 00000000..01e8ce61 --- /dev/null +++ b/.history/test/data.spec_20230619142129.js @@ -0,0 +1,228 @@ +import { + orderData, + orderData2, + orderFecha, + orderFecha2, + filtroDir, + filtroProduc, +} from "../src/data.js"; + +//orden de la a-z +describe("orderData", () => { + it("return title", () => { + //le decimos que va a ser + const orderDataTest = [ + //array de test + { title: "Castle in the Sky" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "Grave of the Fireflies" }, + { title: "Only Yesterday" }, + { title: "Porco Rosso" }, + { title: "Pom Poko" }, + { title: "Whisper of the Heart" }, + { title: "Princess Mononoke" }, + { title: "My Neighbors the Yamadas" }, + { title: "Spirited Away" }, + { title: "The Cat Returns" }, + { title: "Howl's Moving Castle" }, + { title: "Tales from Earthsea" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "The Secret World of Arrietty" }, + { title: "From Up on Poppy Hill" }, + { title: "The Wind Rises" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "When Marnie Was There" }, + ]; + expect(orderData(orderDataTest)).toEqual([ + { title: "Castle in the Sky" }, + { title: "From Up on Poppy Hill" }, + { title: "Grave of the Fireflies" }, + { title: "Howl's Moving Castle" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "My Neighbors the Yamadas" }, + { title: "Only Yesterday" }, + { title: "Pom Poko" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Porco Rosso" }, + { title: "Princess Mononoke" }, + { title: "Spirited Away" }, + { title: "Tales from Earthsea" }, + { title: "The Cat Returns" }, + { title: "The Secret World of Arrietty" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Wind Rises" }, + { title: "When Marnie Was There" }, + { title: "Whisper of the Heart" }, + ]); + }); +}); + +//orden de la z-a +describe("orderData2", () => { + it("return title", () => { + //le decimos que va a ser + const orderDataTest2 = [ + //array de test + { title: "Castle in the Sky" }, + { title: "From Up on Poppy Hill" }, + { title: "Grave of the Fireflies" }, + { title: "Howl's Moving Castle" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "My Neighbors the Yamadas" }, + { title: "Only Yesterday" }, + { title: "Pom Poko" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Porco Rosso" }, + { title: "Princess Mononoke" }, + { title: "Spirited Away" }, + { title: "Tales from Earthsea" }, + { title: "The Cat Returns" }, + { title: "The Secret World of Arrietty" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Wind Rises" }, + { title: "When Marnie Was There" }, + { title: "Whisper of the Heart" }, + ]; + expect(orderData2(orderDataTest2)).toEqual([ + { title: "Whisper of the Heart" }, + { title: "When Marnie Was There" }, + { title: "The Wind Rises" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Secret World of Arrietty" }, + { title: "The Cat Returns" }, + { title: "Tales from Earthsea" }, + { title: "Spirited Away" }, + { title: "Princess Mononoke" }, + { title: "Porco Rosso" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Pom Poko" }, + { title: "Only Yesterday" }, + { title: "My Neighbors the Yamadas" }, + { title: "My Neighbor Totoro" }, + { title: "Kiki's Delivery Service" }, + { title: "Howl's Moving Castle" }, + { title: "Grave of the Fireflies" }, + { title: "From Up on Poppy Hill" }, + { title: "Castle in the Sky" }, + ]); + }); +}); + +//fecha +describe("orderFecha", () => { + const fechaTest = [ + //array de test + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]; + it("return release_date", () => { + //le decimos que va a ser + expect(orderFecha(fechaTest)).toEqual([ + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]); + }); +}), +//fecha2 +describe("orderFecha2", () => { + const fechaTest2 = [ + //array de test + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]; + it("return release_date", () => { + //le decimos que va a ser + expect(orderFecha2(fechaTest2)).toEqual([{ release_date: "1991" }]); + }); +}), +//directores +describe("filtroDir", () => { + const directoresTest = [ + //array de test + { director: "Hayao Miyazaki" }, + { director: "Gorō Miyazaki" }, + { director: "Isao Takahata" }, + { director: "Hiroyuki Morita" }, + { director: "Hiromasa Yonebayashi" }, + { director: "Yoshifumi Kondō" }, + ]; + it("return director", () => { + //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual([ + { director: "Hayao Miyazaki" }, + ]); + }); +}), +describe("filtroProduc", () => { + const producerTest = [ + //array de test + { producer: "Isao Takahata" }, + { producer: "Toshio Suzuki" }, + { producer: "Toru Hara" }, + { producer: "Hayao Miyazaki" }, + { producer: "Yoshiaki Nishimura" }, + ]; + it("return producer", () => { + //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual([ + { producer: "Isao Takahata" }, + ]); + }); +}); diff --git a/.history/test/data.spec_20230619142204.js b/.history/test/data.spec_20230619142204.js new file mode 100644 index 00000000..1501f2f8 --- /dev/null +++ b/.history/test/data.spec_20230619142204.js @@ -0,0 +1,231 @@ +import { + orderData, + orderData2, + orderFecha, + orderFecha2, + filtroDir, + filtroProduc, +} from "../src/data.js"; + +//orden de la a-z +describe("orderData", () => { + it("return title", () => { + //le decimos que va a ser + const orderDataTest = [ + //array de test + { title: "Castle in the Sky" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "Grave of the Fireflies" }, + { title: "Only Yesterday" }, + { title: "Porco Rosso" }, + { title: "Pom Poko" }, + { title: "Whisper of the Heart" }, + { title: "Princess Mononoke" }, + { title: "My Neighbors the Yamadas" }, + { title: "Spirited Away" }, + { title: "The Cat Returns" }, + { title: "Howl's Moving Castle" }, + { title: "Tales from Earthsea" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "The Secret World of Arrietty" }, + { title: "From Up on Poppy Hill" }, + { title: "The Wind Rises" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "When Marnie Was There" }, + ]; + expect(orderData(orderDataTest)).toEqual([ + { title: "Castle in the Sky" }, + { title: "From Up on Poppy Hill" }, + { title: "Grave of the Fireflies" }, + { title: "Howl's Moving Castle" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "My Neighbors the Yamadas" }, + { title: "Only Yesterday" }, + { title: "Pom Poko" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Porco Rosso" }, + { title: "Princess Mononoke" }, + { title: "Spirited Away" }, + { title: "Tales from Earthsea" }, + { title: "The Cat Returns" }, + { title: "The Secret World of Arrietty" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Wind Rises" }, + { title: "When Marnie Was There" }, + { title: "Whisper of the Heart" }, + ]); + }); +}); + +//orden de la z-a +describe("orderData2", () => { + it("return title", () => { + //le decimos que va a ser + const orderDataTest2 = [ + //array de test + { title: "Castle in the Sky" }, + { title: "From Up on Poppy Hill" }, + { title: "Grave of the Fireflies" }, + { title: "Howl's Moving Castle" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "My Neighbors the Yamadas" }, + { title: "Only Yesterday" }, + { title: "Pom Poko" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Porco Rosso" }, + { title: "Princess Mononoke" }, + { title: "Spirited Away" }, + { title: "Tales from Earthsea" }, + { title: "The Cat Returns" }, + { title: "The Secret World of Arrietty" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Wind Rises" }, + { title: "When Marnie Was There" }, + { title: "Whisper of the Heart" }, + ]; + expect(orderData2(orderDataTest2)).toEqual([ + { title: "Whisper of the Heart" }, + { title: "When Marnie Was There" }, + { title: "The Wind Rises" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Secret World of Arrietty" }, + { title: "The Cat Returns" }, + { title: "Tales from Earthsea" }, + { title: "Spirited Away" }, + { title: "Princess Mononoke" }, + { title: "Porco Rosso" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Pom Poko" }, + { title: "Only Yesterday" }, + { title: "My Neighbors the Yamadas" }, + { title: "My Neighbor Totoro" }, + { title: "Kiki's Delivery Service" }, + { title: "Howl's Moving Castle" }, + { title: "Grave of the Fireflies" }, + { title: "From Up on Poppy Hill" }, + { title: "Castle in the Sky" }, + ]); + }); +}); + +//fecha +describe("orderFecha", () => { + const fechaTest = [ + //array de test + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]; + it("return release_date", () => { + //le decimos que va a ser + expect(orderFecha(fechaTest)).toEqual([ + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]); + }); +}), + +//fecha2 +describe("orderFecha2", () => { + const fechaTest2 = [ + //array de test + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]; + it("return release_date", () => { + //le decimos que va a ser + expect(orderFecha2(fechaTest2)).toEqual([{ release_date: "1991" }]); + }); +}), + + +//directores +describe("filtroDir", () => { + const directoresTest = [ + //array de test + { director: "Hayao Miyazaki" }, + { director: "Gorō Miyazaki" }, + { director: "Isao Takahata" }, + { director: "Hiroyuki Morita" }, + { director: "Hiromasa Yonebayashi" }, + { director: "Yoshifumi Kondō" }, + ]; + it("return director", () => { + //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual([ + { director: "Hayao Miyazaki" }, + ]); + }); +}), +describe("filtroProduc", () => { + const producerTest = [ + //array de test + { producer: "Isao Takahata" }, + { producer: "Toshio Suzuki" }, + { producer: "Toru Hara" }, + { producer: "Hayao Miyazaki" }, + { producer: "Yoshiaki Nishimura" }, + ]; + it("return producer", () => { + //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual([ + { producer: "Isao Takahata" }, + ]); + }); +}); diff --git a/.history/test/data.spec_20230619142727.js b/.history/test/data.spec_20230619142727.js new file mode 100644 index 00000000..d9faa420 --- /dev/null +++ b/.history/test/data.spec_20230619142727.js @@ -0,0 +1,256 @@ +import { + orderData, + orderData2, + orderFecha, + orderFecha2, + filtroDir, + filtroProduc, +} from "../src/data.js"; + +//orden de la a-z +describe("orderData", () => { + it("return title", () => { + //le decimos que va a ser + const orderDataTest = [ + //array de test + { title: "Castle in the Sky" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "Grave of the Fireflies" }, + { title: "Only Yesterday" }, + { title: "Porco Rosso" }, + { title: "Pom Poko" }, + { title: "Whisper of the Heart" }, + { title: "Princess Mononoke" }, + { title: "My Neighbors the Yamadas" }, + { title: "Spirited Away" }, + { title: "The Cat Returns" }, + { title: "Howl's Moving Castle" }, + { title: "Tales from Earthsea" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "The Secret World of Arrietty" }, + { title: "From Up on Poppy Hill" }, + { title: "The Wind Rises" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "When Marnie Was There" }, + ]; + expect(orderData(orderDataTest)).toEqual([ + { title: "Castle in the Sky" }, + { title: "From Up on Poppy Hill" }, + { title: "Grave of the Fireflies" }, + { title: "Howl's Moving Castle" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "My Neighbors the Yamadas" }, + { title: "Only Yesterday" }, + { title: "Pom Poko" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Porco Rosso" }, + { title: "Princess Mononoke" }, + { title: "Spirited Away" }, + { title: "Tales from Earthsea" }, + { title: "The Cat Returns" }, + { title: "The Secret World of Arrietty" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Wind Rises" }, + { title: "When Marnie Was There" }, + { title: "Whisper of the Heart" }, + ]); + }); +}); + +//orden de la z-a +describe("orderData2", () => { + it("return title", () => { + //le decimos que va a ser + const orderDataTest2 = [ + //array de test + { title: "Castle in the Sky" }, + { title: "From Up on Poppy Hill" }, + { title: "Grave of the Fireflies" }, + { title: "Howl's Moving Castle" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "My Neighbors the Yamadas" }, + { title: "Only Yesterday" }, + { title: "Pom Poko" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Porco Rosso" }, + { title: "Princess Mononoke" }, + { title: "Spirited Away" }, + { title: "Tales from Earthsea" }, + { title: "The Cat Returns" }, + { title: "The Secret World of Arrietty" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Wind Rises" }, + { title: "When Marnie Was There" }, + { title: "Whisper of the Heart" }, + ]; + expect(orderData2(orderDataTest2)).toEqual([ + { title: "Whisper of the Heart" }, + { title: "When Marnie Was There" }, + { title: "The Wind Rises" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Secret World of Arrietty" }, + { title: "The Cat Returns" }, + { title: "Tales from Earthsea" }, + { title: "Spirited Away" }, + { title: "Princess Mononoke" }, + { title: "Porco Rosso" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Pom Poko" }, + { title: "Only Yesterday" }, + { title: "My Neighbors the Yamadas" }, + { title: "My Neighbor Totoro" }, + { title: "Kiki's Delivery Service" }, + { title: "Howl's Moving Castle" }, + { title: "Grave of the Fireflies" }, + { title: "From Up on Poppy Hill" }, + { title: "Castle in the Sky" }, + ]); + }); +}); + +//fecha +describe("orderFecha", () => { + const fechaTest = [ + //array de test + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]; + it("return release_date", () => { + //le decimos que va a ser + expect(orderFecha(fechaTest)).toEqual([ + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]); + }); +}), + +//fecha2 +describe("orderFecha2", () => { + const fechaTest2 = [ + //array de test + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]; + it("return release_date", () => { + //le decimos que va a ser + expect(orderFecha2(fechaTest2)).toEqual([ + { release_date: "2014" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2011" }, + { release_date: "2010" }, + { release_date: "2008" }, + { release_date: "2006" }, + { release_date: "2004" }, + { release_date: "2002" }, + { release_date: "2001" }, + { release_date: "1999" }, + { release_date: "1997" }, + { release_date: "1995" }, + { release_date: "1994" }, + { release_date: "1992" }, + { release_date: "1991" }, + { release_date: "1989" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1986" }, + + + + ]); + }); +}), +//const isAscendent = true; +//expect(sortDataYear(peliculas, isAscendent)).toEqual([ + +//directores +describe("filtroDir", () => { + const directoresTest = [ + //array de test + { director: "Hayao Miyazaki" }, + { director: "Gorō Miyazaki" }, + { director: "Isao Takahata" }, + { director: "Hiroyuki Morita" }, + { director: "Hiromasa Yonebayashi" }, + { director: "Yoshifumi Kondō" }, + ]; + it("return director", () => { + //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual([ + { director: "Hayao Miyazaki" }, + ]); + }); +}), +describe("filtroProduc", () => { + const producerTest = [ + //array de test + { producer: "Isao Takahata" }, + { producer: "Toshio Suzuki" }, + { producer: "Toru Hara" }, + { producer: "Hayao Miyazaki" }, + { producer: "Yoshiaki Nishimura" }, + ]; + it("return producer", () => { + //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual([ + { producer: "Isao Takahata" }, + ]); + }); +}); diff --git a/.history/test/data.spec_20230619142734.js b/.history/test/data.spec_20230619142734.js new file mode 100644 index 00000000..a5bac491 --- /dev/null +++ b/.history/test/data.spec_20230619142734.js @@ -0,0 +1,253 @@ +import { + orderData, + orderData2, + orderFecha, + orderFecha2, + filtroDir, + filtroProduc, +} from "../src/data.js"; + +//orden de la a-z +describe("orderData", () => { + it("return title", () => { + //le decimos que va a ser + const orderDataTest = [ + //array de test + { title: "Castle in the Sky" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "Grave of the Fireflies" }, + { title: "Only Yesterday" }, + { title: "Porco Rosso" }, + { title: "Pom Poko" }, + { title: "Whisper of the Heart" }, + { title: "Princess Mononoke" }, + { title: "My Neighbors the Yamadas" }, + { title: "Spirited Away" }, + { title: "The Cat Returns" }, + { title: "Howl's Moving Castle" }, + { title: "Tales from Earthsea" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "The Secret World of Arrietty" }, + { title: "From Up on Poppy Hill" }, + { title: "The Wind Rises" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "When Marnie Was There" }, + ]; + expect(orderData(orderDataTest)).toEqual([ + { title: "Castle in the Sky" }, + { title: "From Up on Poppy Hill" }, + { title: "Grave of the Fireflies" }, + { title: "Howl's Moving Castle" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "My Neighbors the Yamadas" }, + { title: "Only Yesterday" }, + { title: "Pom Poko" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Porco Rosso" }, + { title: "Princess Mononoke" }, + { title: "Spirited Away" }, + { title: "Tales from Earthsea" }, + { title: "The Cat Returns" }, + { title: "The Secret World of Arrietty" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Wind Rises" }, + { title: "When Marnie Was There" }, + { title: "Whisper of the Heart" }, + ]); + }); +}); + +//orden de la z-a +describe("orderData2", () => { + it("return title", () => { + //le decimos que va a ser + const orderDataTest2 = [ + //array de test + { title: "Castle in the Sky" }, + { title: "From Up on Poppy Hill" }, + { title: "Grave of the Fireflies" }, + { title: "Howl's Moving Castle" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "My Neighbors the Yamadas" }, + { title: "Only Yesterday" }, + { title: "Pom Poko" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Porco Rosso" }, + { title: "Princess Mononoke" }, + { title: "Spirited Away" }, + { title: "Tales from Earthsea" }, + { title: "The Cat Returns" }, + { title: "The Secret World of Arrietty" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Wind Rises" }, + { title: "When Marnie Was There" }, + { title: "Whisper of the Heart" }, + ]; + expect(orderData2(orderDataTest2)).toEqual([ + { title: "Whisper of the Heart" }, + { title: "When Marnie Was There" }, + { title: "The Wind Rises" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Secret World of Arrietty" }, + { title: "The Cat Returns" }, + { title: "Tales from Earthsea" }, + { title: "Spirited Away" }, + { title: "Princess Mononoke" }, + { title: "Porco Rosso" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Pom Poko" }, + { title: "Only Yesterday" }, + { title: "My Neighbors the Yamadas" }, + { title: "My Neighbor Totoro" }, + { title: "Kiki's Delivery Service" }, + { title: "Howl's Moving Castle" }, + { title: "Grave of the Fireflies" }, + { title: "From Up on Poppy Hill" }, + { title: "Castle in the Sky" }, + ]); + }); +}); + +//fecha +describe("orderFecha", () => { + const fechaTest = [ + //array de test + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]; + it("return release_date", () => { + //le decimos que va a ser + expect(orderFecha(fechaTest)).toEqual([ + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]); + }); +}), + +//fecha2 +describe("orderFecha2", () => { + const fechaTest2 = [ + //array de test + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]; + it("return release_date", () => { + //le decimos que va a ser + expect(orderFecha2(fechaTest2)).toEqual([ + { release_date: "2014" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2011" }, + { release_date: "2010" }, + { release_date: "2008" }, + { release_date: "2006" }, + { release_date: "2004" }, + { release_date: "2002" }, + { release_date: "2001" }, + { release_date: "1999" }, + { release_date: "1997" }, + { release_date: "1995" }, + { release_date: "1994" }, + { release_date: "1992" }, + { release_date: "1991" }, + { release_date: "1989" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1986" }, + ]); + }); +}), +//const isAscendent = true; +//expect(sortDataYear(peliculas, isAscendent)).toEqual([ + +//directores +describe("filtroDir", () => { + const directoresTest = [ + //array de test + { director: "Hayao Miyazaki" }, + { director: "Gorō Miyazaki" }, + { director: "Isao Takahata" }, + { director: "Hiroyuki Morita" }, + { director: "Hiromasa Yonebayashi" }, + { director: "Yoshifumi Kondō" }, + ]; + it("return director", () => { + //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual([ + { director: "Hayao Miyazaki" }, + ]); + }); +}), +describe("filtroProduc", () => { + const producerTest = [ + //array de test + { producer: "Isao Takahata" }, + { producer: "Toshio Suzuki" }, + { producer: "Toru Hara" }, + { producer: "Hayao Miyazaki" }, + { producer: "Yoshiaki Nishimura" }, + ]; + it("return producer", () => { + //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual([ + { producer: "Isao Takahata" }, + ]); + }); +}); diff --git a/README.md b/README.md index f9975c76..20f95966 100644 --- a/README.md +++ b/README.md @@ -1,615 +1,99 @@ -# Data Lovers - -## Índice - -* [1. Preámbulo](#1-preámbulo) -* [2. Resumen del proyecto](#2-resumen-del-proyecto) -* [3. Objetivos de aprendizaje](#3-objetivos-de-aprendizaje) -* [4. Consideraciones generales](#4-consideraciones-generales) -* [5. Criterios de aceptación mínimos del proyecto](#5-criterios-de-aceptación-mínimos-del-proyecto) -* [6. Hacker edition](#6-hacker-edition) -* [7. Consideraciones técnicas](#7-consideraciones-técnicas) -* [8. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias) -* [9. Checklist](#9-checklist) - -*** - -## 1. Preámbulo - -Según [Forbes](https://www.forbes.com/sites/bernardmarr/2018/05/21/how-much-data-do-we-create-every-day-the-mind-blowing-stats-everyone-should-read), -el 90% de la data que existe hoy ha sido creada durante los últimos dos años. -Cada día generamos 2.5 millones de terabytes de datos, una cifra sin -precedentes. - -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_. - -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 las -usuarias, al lado derecho. - -![pokemon-data-to-ui](https://user-images.githubusercontent.com/12631491/218505816-c6d11758-9de4-428f-affb-2a56ea4d68c4.png) - -## 2. Resumen del proyecto - -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. - -Como entregable final tendrás una página web que permita **visualizar la data, -filtrarla, ordenarla y hacer algún cálculo agregado**. Con cálculo agregado -nos referimos a distintos cálculos que puedes hacer con la data para mostrar -información aún más relevante para los usuarios (promedio, el valor máximo -o mínimo, etc). - -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. - -Una vez que definas tu área de interés, buscar entender 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. - -Estos son datos que te proponemos: - -* [Pokémon](src/data/pokemon/pokemon.json): - En este set encontrarás una lista con los 251 Pokémon de la región de Kanto - y Johto, junto con sus respectivas estadísticas usadas en el juego - [Pokémon GO](http://pokemongolive.com). - - [Investigación con jugadores de Pokémon Go](src/data/pokemon/README.md) - -* [League of Legends - Challenger leaderboard](src/data/lol/lol.json): - Este set de datos muestra la lista de campeones en una liga del - juego League of Legends (LoL). - - [Investigación con jugadores de LoL](src/data/lol/README.md) - -* [Rick and Morty](src/data/rickandmorty/rickandmorty.json). - Este set nos proporciona la lista de los personajes de la serie Rick and - Morty. [API Rick and Morty](https://rickandmortyapi.com). - - [Investigación con seguidores de Rick and Morty](src/data/rickandmorty/README.md) - -* [Juegos Olímpicos de Río de Janeiro](src/data/athletes/athletes.json). - Este set nos proporciona la lista de los atletas que ganaron medallas en las - olímpiadas de Río de Janeiro. - - [Investigación con interesados en juegos olímpicos de Río de Janeiro](src/data/athletes/README.md) - -* [Studio Ghibli](src/data/ghibli/ghibli.json). - En este set encontrarás una lista de las animaciones y sus personajes del - [Studio Ghibli](https://ghiblicollection.com/). - - [Investigación con seguidores de las animaciones del Studio Ghibli](src/data/ghibli/README.md) - -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. - -## 3. Objetivos de aprendizaje - -Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo. - -### HTML - -- [ ] **Uso de HTML semántico** - -
Links

- - * [HTML semántico](https://curriculum.laboratoria.la/es/topics/html/02-html5/02-semantic-html) - * [Semantics - MDN Web Docs Glossary](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML) -

- -### CSS - -- [ ] **Uso de selectores de CSS** - -
Links

- - * [Intro a CSS](https://curriculum.laboratoria.la/es/topics/css/01-css/01-intro-css) - * [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors) -

- -- [ ] **Modelo de caja (box model): borde, margen, padding** - -
Links

- - * [Box Model & Display](https://curriculum.laboratoria.la/es/topics/css/01-css/02-boxmodel-and-display) - * [The box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) - * [Introduction to the CSS box model - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) - * [CSS display - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display) - * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/) -

- -- [ ] **Uso de flexbox en CSS** - -
Links

- - * [A Complete Guide to Flexbox - CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - * [Flexbox Froggy](https://flexboxfroggy.com/#es) - * [Flexbox - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) -

- -### Web APIs - -- [ ] **Uso de selectores del DOM** - -
Links

- - * [Manipulación del DOM](https://curriculum.laboratoria.la/es/topics/browser/02-dom/03-1-dom-methods-selection) - * [Introducción al DOM - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) - * [Localizando elementos DOM usando selectores - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) -

- -- [ ] **Manejo de eventos del DOM (listeners, propagación, delegación)** - -
Links

- - * [Introducción a eventos - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Events) - * [EventTarget.addEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener) - * [EventTarget.removeEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/removeEventListener) - * [El objeto Event](https://developer.mozilla.org/es/docs/Web/API/Event) -

- -- [ ] **Manipulación dinámica del DOM** - -
Links

- - * [Introducción al DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) - * [Node.appendChild() - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/appendChild) - * [Document.createElement() - MDN](https://developer.mozilla.org/es/docs/Web/API/Document/createElement) - * [Document.createTextNode()](https://developer.mozilla.org/es/docs/Web/API/Document/createTextNode) - * [Element.innerHTML - MDN](https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML) - * [Node.textContent - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/textContent) -

- -### JavaScript - -- [ ] **Diferenciar entre tipos de datos primitivos y no primitivos** - -- [ ] **Arrays (arreglos)** - -
Links

- - * [Arreglos](https://curriculum.laboratoria.la/es/topics/javascript/04-arrays) - * [Array - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/) - * [Array.prototype.sort() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) - * [Array.prototype.forEach() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) - * [Array.prototype.map() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map) - * [Array.prototype.filter() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) - * [Array.prototype.reduce() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) -

- -- [ ] **Objetos (key, value)** - -
Links

- - * [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/05-objects/01-objects) -

- -- [ ] **Variables (declaración, asignación, ámbito)** - -
Links

- - * [Valores, tipos de datos y operadores](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/01-values-variables-and-types) - * [Variables](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/02-variables) -

- -- [ ] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)** - -
Links

- - * [Estructuras condicionales y repetitivas](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/01-conditionals-and-loops) - * [Tomando decisiones en tu código — condicionales - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals) -

- -- [ ] **Uso de bucles/ciclos (while, for, for..of)** - -
Links

- - * [Bucles (Loops)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/02-loops) - * [Bucles e iteración - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration) -

- -- [ ] **Funciones (params, args, return)** - -
Links

- - * [Funciones (control de flujo)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/03-functions) - * [Funciones clásicas](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/01-classic) - * [Arrow Functions](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/02-arrow) - * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions) -

- -- [ ] **Pruebas unitarias (unit tests)** - -
Links

- - * [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started) -

- -- [ ] **Módulos de ECMAScript (ES Modules)** - -
Links

- - * [import - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import) - * [export - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export) -

- -- [ ] **Uso de linter (ESLINT)** - -- [ ] **Uso de identificadores descriptivos (Nomenclatura y Semántica)** - -- [ ] **Diferenciar entre expresiones (expressions) y sentencias (statements)** - -### Control de Versiones (Git y GitHub) - -- [ ] **Git: Instalación y configuración** - -- [ ] **Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)** - -- [ ] **Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)** - -- [ ] **GitHub: Creación de cuenta y repos, configuración de llaves SSH** - -- [ ] **GitHub: Despliegue con GitHub Pages** - -
Links

- - * [Sitio oficial de GitHub Pages](https://pages.github.com/) -

- -- [ ] **GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)** - -### Centrado en el usuario - -- [ ] **Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro** - -### Diseño de producto - -- [ ] **Crear prototipos de alta fidelidad que incluyan interacciones** - -- [ ] **Seguir los principios básicos de diseño visual** - -### Investigación - -- [ ] **Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad** - -
Links

- - * [Intro a testeos usabilidad](https://coda.io/@bootcamp-laboratoria/contenido-ux/test-de-usabilidad-15) - * [Pruebas con Usuarios 1 — ¿Qué, cuándo y para qué testeamos?](https://eugeniacasabona.medium.com/pruebas-con-usuarios-1-qu%C3%A9-cu%C3%A1ndo-y-para-qu%C3%A9-testeamos-7c3a89b4b5e7) -

- -## 4. Consideraciones generales - -* Este proyecto se debe resolver en duplas. -* El rango de tiempo estimado para completar el proyecto es de 3 a 4 Sprints. -* El proyecto será entregado subiendo tu código a GitHub (commit/push) y la - interfaz será desplegada usando [GitHub Pages](https://pages.github.com/). - -## 5. Criterios de aceptación mínimos del proyecto - -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 tus usuarios, escribe las [Historias -de Usuario](https://es.wikipedia.org/wiki/Historias_de_usuario) que representen -todo lo que el usuario necesita hacer/ver. Las **Historias de Usuario** deben -ser el resultado de tu proceso de investigación o _research_ de tus usuarios. - -Asegúrate de incluir la definición de terminado (_definition of done_) y los -Criterios de Aceptación para cada una. - -En la medida de lo posible, termina una historia de usuario antes de pasar -a la siguiente (Cumple con Definición de Terminado + Criterios de Aceptación). - -### Diseño de la Interfaz de Usuario - -#### Prototipo de baja fidelidad - -Durante tu trabajo deberás haber hecho e iterado bocetos (_sketches_) de tu -solución usando papel y lápiz. Te recomendamos tomar fotos de todas las -iteraciones que hagas, que 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. - -El diseño debe representar el _ideal_ de tu solución. Digamos que es lo que -desearías implementar si tuvieras tiempo ilimitado para trabajar. Además, tu -diseño debe seguir los fundamentos de _visual design_. - -#### Testeos de usabilidad - -Durante el reto deberás hacer _tests_ de usabilidad con distintos usuarios, y -en base a los resultados, 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. -**No** es necesario que construyas la interfaz exactamente como la diseñaste. -Tu tiempo de hacking es escaso, así 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 interactuar para obtener la infomación que necesita. -3. Ser _responsive_, es decir, debe visualizarse sin problemas desde distintos - tamaños de pantallas: móviles, tablets y desktops. -4. Que la interfaz siga los fundamentos de _visual design_. - -### Pruebas unitarias - -El _boilerplate_ de este proyecto no incluye Pruebas Unitarias (_tests_), así es -que tendrás que escribirlas tú para las funciones encargadas de _procesar_, -_filtrar_ y _ordenar_ la data, así como _calcular_ estadísticas. - -Tus _pruebas unitarias_ deben dar una cobertura del 70% de _statements_ -(_sentencias_), _functions_ (_funciones_), _lines_ (_líneas_), y _branches_ -(_ramas_) del archivo `src/data.js` que contenga tus funciones y está detallado -en la sección de [Consideraciones técnicas](#srcdatajs). - -## 6. Hacker edition - -Las secciones llamadas _Hacker Edition_ son **opcionales**. Si **terminaste** -con todo lo anterior y te queda tiempo, intenta completarlas. Así podrás -profundizar y/o ejercitar más sobre los objetivos de aprendizaje del proyecto. - -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 - 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/). -* 100% Coverage - -## 7. 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 -[_Parte opcional_](#6-hacker-edition) más arriba. - -El _boilerplate_ contiene una estructura de archivos como punto de partida así -como toda la configuración de dependencias: - -```text -. -├── EXTRA.md -├── README.md -├── package.json -├── src -| ├── data (según con qué data trabajes) -| | ├── lol -| | | ├── lol.js -| | | ├── lol.json -| | | └── README.md -| | ├── pokemon -| | | ├── pokemon.js -| | | ├── pokemon.json -| | | └── README.md -| | └── rickandmorty -| | | ├── rickandmorty.js -| | | ├── rickandmorty.json -| | | └── README.md -| | └── athletes -| | | ├── athletes.js -| | | ├── athletes.json -| | | └── README.md -| | └── ghibli -| | | ├── ghibli.js -| | | ├── ghibli.json -| | | └── README.md -| ├── data.js -| ├── index.html -| ├── main.js -| └── style.css -└── test - └── data.spec.js - -directory: 7 file: 20 -``` - -### `src/index.html` - -Como en el proyecto anterior, existe un archivo `index.html`. Como ya sabes, -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. - -### `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. - -En este archivo encontrarás una serie de _imports_ _comentados_. Para _cargar_ -las diferentes fuentes de datos tendrás que _descomentar_ la línea -correspondiente. - -Por ejemplo, si "descomentamos" la siguiente línea: - -```js -// import data from './data/lol/lol.js'; -``` - -La línea quedaría así: - -```js -import data from './data/lol/lol.js'; -``` - -Y ahora tendríamos la variable `data` disponible en el script `src/main.js`. - -### `src/data.js` - -El corazón de este proyecto es la manipulación de datos a través de arreglos -y objetos. - -Te recomendamos que este archivo contenga toda la funcionalidad que corresponda -a obtener, procesar y manipular datos (tus funciones). Por ejemplo: - -* `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. - -Estos nombres de funciones y de parámetros son solamente referenciales, lo que -decidas depende de tu propia implementación. - -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, ...). - -### `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 ` - + + + + Data Lovers + + + + +

Bienvendios a la página de fans de Estudios Ghibli

+
+

Historia de Estudios Ghibli

+

Studio Ghibli es un estudio japonés de animación,
+ considerado por la crítica especializada y muchos
+ cinéfilos como uno de los mejores estudios de
+ animación del mundo en la actualidad.
+ El estudio es conocido por sus largometrajes animados
+ y también ha producido varios cortometrajes, comerciales
+ de televisión y una película para televisión.
+ Fue fundado el 15 de junio de 1985.

+
+ + + + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+ + + + diff --git a/src/index2.html b/src/index2.html new file mode 100644 index 00000000..240424ed --- /dev/null +++ b/src/index2.html @@ -0,0 +1,55 @@ + + + + + + + Peliculas y colaboradores + + + + +
+

Peliculas y colaboradores

+
+ +

+
+ + + + + +
+
+
+
+ + +
Creado por Alejandra Paola Méndez Alcantara, Laboratoria 2023
+
+
+ + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 71c59f2d..5f4f1cb9 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,144 @@ -import { example } from './data.js'; -// import data from './data/lol/lol.js'; -import data from './data/pokemon/pokemon.js'; -// import data from './data/rickandmorty/rickandmorty.js'; +import { allData, orderData, orderData2, orderFecha, orderFecha2, filtroDir, filtroProduc} from './data.js'; +//const contenedorDePortadas = document.getElementById("animations");//para vincular el primer contenedor con el DOM +const arrayObjetos = allData();//vinculando toda la data a al primer contenedor + + +function pintarPosters(listaDePeliculas) { //estoy pintando los posters para eso es la función + for (let index = 0; index < listaDePeliculas.length; index++) { + const pelis = listaDePeliculas[index]; + + + const caja = document.createElement("div"); + + const posters = document.createElement("img");//caja para las imagenes + posters.src = pelis.poster; //src es como js identifica las imagenes // poster es por que asi estan las imagenes en la data de ghibli + posters.classList.add("soloPosters"); //vinculando con las clases, ejemplo class list //add para añadir + + const titulo = document.createElement("p") + titulo.innerText = pelis.title; + titulo.classList.add("soloTitulo") + + const ano = document.createElement("p") + ano.innerText = pelis.release_date; + ano.classList.add("soloAno") + + caja.appendChild(posters);//appendChild hace la magia "interaccion con el DOM" + caja.appendChild(titulo); + caja.appendChild(ano); + document.getElementById("animations").appendChild(caja); + + + + const caja2 = document.createElement("div"); + + const descripcion = document.createElement("p") + descripcion.innerText = pelis.description; + descripcion.classList.add("soloDescripcion") + + const directores = document.createElement("p") + directores.innerText = pelis.director; + directores.classList.add("soloDirectores") + + const productores = document.createElement("p") + productores.innerText = pelis.producer; + productores.classList.add("soloProductores") + + + caja2.appendChild(descripcion);//appendChild hace la magia "interaccion con el DOM" + caja2.appendChild(directores); + caja2.appendChild(productores); + + document.getElementById("animations").appendChild(caja2); + + + } + return + +} + +pintarPosters(arrayObjetos) + +//Ordenar de la A-Z +const filtroaz = document.getElementById('filters__initial'); +filtroaz.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroaz.value) { + case '0':{ + const az = orderData(arrayObjetos) + pintarPosters(az) + break;} + case '1': { + const za = orderData2(arrayObjetos) + pintarPosters(za) + break;} + + } +}) + + +//Ordenar por año +const filtroFecha = document.getElementById('filters__year'); +filtroFecha.addEventListener('change', () => { + document.getElementById("animations").innerHTML = ''; + switch (filtroFecha.value) { + case '0':{ + const anoAcendente = orderFecha(arrayObjetos) + pintarPosters(anoAcendente) + break;} + case '1':{ + const anoDesendente = orderFecha2(arrayObjetos) + pintarPosters(anoDesendente) + break;} + + } +}) + +//filtro por director + +const filtroD = document.getElementById("filters__director"); +filtroD.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroD.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroDir(arrayObjetos, filtroD.value)) + } + +}); + +//filtro por productor + +const filtroP = document.getElementById("filters__producer"); +filtroP.addEventListener("change", () => { + document.getElementById("animations").innerHTML = ''; + if (filtroP.value === "all"){ //valor de la opcion igual a todos + pintarPosters(arrayObjetos) + }else { + pintarPosters(filtroProduc(arrayObjetos, filtroP.value)) + } + +}); + + +// Boton de limpiar filtros +const botonDeLimpiar = document.getElementById ("clean"); +botonDeLimpiar.addEventListener("click", () =>{ + document.getElementById("animations").innerHTML = "";// se le esta diciendo que el html quede vacio + filtroFecha.value = "0" + filtroaz.value = "0" + filtroD.value ="all" + filtroP.value ="all" + pintarPosters((arrayObjetos));// aqui vuelvo a mostrar todas las peliculas de la pantalla +}); + + + + + + + + + + + -console.log(example, data); diff --git a/src/style.css b/src/style.css index e69de29b..a69415b1 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,113 @@ +body { + background-image: url(fondo.jpg); + background-repeat: space; + background-color: black; +} + +h1 { + display: flex; + text-transform: uppercase; + letter-spacing: .1em; + display: inline-block; + border: 1px double rgba(255, 255, 255, .25); + border-width: 1px 0; + padding: -5em 0em; + position: absolute; + top: 02%; + left: 50%; + width: 40em; + margin: 0 0 0 -20em; + /* Clip Background Image */ + + background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y; + -webkit-background-clip: text; + background-clip: text; + + /* Animate Background Image */ + + -webkit-text-fill-color: transparent; + -webkit-animation: aitf 80s linear infinite; + + /* Activate hardware acceleration for smoother animations */ + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + +} + +/* Animate Background Image */ + +@-webkit-keyframes aitf { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} + +h2 { + display: flex; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 30px; + font-weight: bolder; + font-variant: small-caps; + color: beige; + text-align: left; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; +} + +h3 { + display: flex; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(34, 151, 189); + text-align: left; + font-weight: bold; + letter-spacing: -1px; + line-height: 200%; +} + + +a { + display: flex; + color: beige; + font-family: monospace; + text-decoration: double; + font-size: 20px; + text-decoration: underline; +} + +.container { + display: flex; + width: 90%; + margin: auto; +} + +/* Navegación*/ + +ul { + display: flex; + font-size: 17px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: black; +} + + + +footer { + display: flex; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 13px; + border-color: black; + background-color: black; + color: beige; + position: absolute; + bottom: 0%; +} \ No newline at end of file diff --git a/src/style2.css b/src/style2.css new file mode 100644 index 00000000..1bc46673 --- /dev/null +++ b/src/style2.css @@ -0,0 +1,266 @@ +body { + /*@media (max-width:600px) {*/ + display: flex; + background-color:rgb(152, 180, 172); +} + +h2 { + display: flex; + justify-content: center; + align-items: center; + background-color: tomato; + + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 60px; + font-variant: small-caps; + color: rgb(0, 0, 0); + text-align: center; + font-weight: bold; + text-decoration: underline; + letter-spacing: 2px; + border: 1px solid black(0, 100, 200); + border-radius: 10px; +} + +/*@media (max-width:600px) {*/ + +.filters { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 15px; + border: 1px solid black(0, 170, 255); + background-color: rgba(86, 143, 200, 0.949); + + +} + +.filters__director { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__producer { + width: 250px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + box-shadow: 10px 5px 5px black; + border-color: beige; +} + +.filters__initial { + width: 100px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 17px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + margin: auto; + border-color: beige; + box-shadow: 10px 5px 5px black; +} + +.filters__year { + width: 120px; + height: 50px; + border: 2px solid black(0, 170, 255); + border-radius: 20px; + background-color: rgb(92, 86, 241); + padding: 15px; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 15px; + font-weight: bolder; + color: rgb(0, 0, 0); + text-align: left; + font-weight: bold; + border-color: beige; + margin: auto; + box-shadow: 10px 5px 5px black; +} + + +button { + width: 150px; + height: 50px; + border-radius: 20px; + font-size: 17px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: rgb(92, 86, 241); + color: black; + border-color: beige; + box-shadow: 10px 5px 5px black; + margin: auto; +} + +.animations { + display: grid; + grid-template-columns: auto auto auto auto; + flex-direction: column; + /*flex-wrap: wrap;*/ + grid-column-gap: 20px; + align-content: center; + } + +/*@media screen and (max-width:400px) {*/ +.soloPosters { + text-align: center; + font-weight: bolder; + width:300px; + height: 300px; + border: 2px; + margin: auto; + padding: 20px; + box-shadow: 10px 15px 15px rgb(218, 129, 129); + +} + + +.soloTitulo { + + width: 300px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 18px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloAno { + + width: 300px; + height: 20px; + font-weight: bold; + margin: 5px; + text-align: center; + padding: 3px; + font-size: 18px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + + +/*@media screen and (max-width:400px) {*/ + + +.soloDescripcion { + + text-align: justify; + font-weight: bolder; + width: 250px; + height: 220px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 20px; + margin-bottom: 0px; + letter-spacing: 1px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + +} + +.soloDirectores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; +} + +.soloProductores { + + text-align: center; + font-weight: bolder; + width: 250px; + height: 20px; + border: 2px; + margin: auto; + padding: 20px; + font-size: 11px; + margin-top: 0px; + margin-bottom: 0px; + letter-spacing: 2px; + color: #484855; + border-radius: 3px 0 0 3px; + background-color: #3393c7bd; + box-shadow: 10px 15px 15px rgb(100, 86, 86); + +} + +/*}*/ +footer { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 10px; + border-color: black; + background-color: #111111bd; + color: beige; + bottom: 0%; + margin: 20px; +} \ No newline at end of file diff --git a/test/data.spec.js b/test/data.spec.js index 09b1f23f..a5bac491 100644 --- a/test/data.spec.js +++ b/test/data.spec.js @@ -1,23 +1,253 @@ -import { example, anotherExample } from '../src/data.js'; +import { + orderData, + orderData2, + orderFecha, + orderFecha2, + filtroDir, + filtroProduc, +} from "../src/data.js"; - -describe('example', () => { - it('is a function', () => { - expect(typeof example).toBe('function'); +//orden de la a-z +describe("orderData", () => { + it("return title", () => { + //le decimos que va a ser + const orderDataTest = [ + //array de test + { title: "Castle in the Sky" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "Grave of the Fireflies" }, + { title: "Only Yesterday" }, + { title: "Porco Rosso" }, + { title: "Pom Poko" }, + { title: "Whisper of the Heart" }, + { title: "Princess Mononoke" }, + { title: "My Neighbors the Yamadas" }, + { title: "Spirited Away" }, + { title: "The Cat Returns" }, + { title: "Howl's Moving Castle" }, + { title: "Tales from Earthsea" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "The Secret World of Arrietty" }, + { title: "From Up on Poppy Hill" }, + { title: "The Wind Rises" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "When Marnie Was There" }, + ]; + expect(orderData(orderDataTest)).toEqual([ + { title: "Castle in the Sky" }, + { title: "From Up on Poppy Hill" }, + { title: "Grave of the Fireflies" }, + { title: "Howl's Moving Castle" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "My Neighbors the Yamadas" }, + { title: "Only Yesterday" }, + { title: "Pom Poko" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Porco Rosso" }, + { title: "Princess Mononoke" }, + { title: "Spirited Away" }, + { title: "Tales from Earthsea" }, + { title: "The Cat Returns" }, + { title: "The Secret World of Arrietty" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Wind Rises" }, + { title: "When Marnie Was There" }, + { title: "Whisper of the Heart" }, + ]); }); +}); - it('returns `example`', () => { - expect(example()).toBe('example'); +//orden de la z-a +describe("orderData2", () => { + it("return title", () => { + //le decimos que va a ser + const orderDataTest2 = [ + //array de test + { title: "Castle in the Sky" }, + { title: "From Up on Poppy Hill" }, + { title: "Grave of the Fireflies" }, + { title: "Howl's Moving Castle" }, + { title: "Kiki's Delivery Service" }, + { title: "My Neighbor Totoro" }, + { title: "My Neighbors the Yamadas" }, + { title: "Only Yesterday" }, + { title: "Pom Poko" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Porco Rosso" }, + { title: "Princess Mononoke" }, + { title: "Spirited Away" }, + { title: "Tales from Earthsea" }, + { title: "The Cat Returns" }, + { title: "The Secret World of Arrietty" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Wind Rises" }, + { title: "When Marnie Was There" }, + { title: "Whisper of the Heart" }, + ]; + expect(orderData2(orderDataTest2)).toEqual([ + { title: "Whisper of the Heart" }, + { title: "When Marnie Was There" }, + { title: "The Wind Rises" }, + { title: "The Tale of the Princess Kaguya" }, + { title: "The Secret World of Arrietty" }, + { title: "The Cat Returns" }, + { title: "Tales from Earthsea" }, + { title: "Spirited Away" }, + { title: "Princess Mononoke" }, + { title: "Porco Rosso" }, + { title: "Ponyo on the Cliff by the Sea" }, + { title: "Pom Poko" }, + { title: "Only Yesterday" }, + { title: "My Neighbors the Yamadas" }, + { title: "My Neighbor Totoro" }, + { title: "Kiki's Delivery Service" }, + { title: "Howl's Moving Castle" }, + { title: "Grave of the Fireflies" }, + { title: "From Up on Poppy Hill" }, + { title: "Castle in the Sky" }, + ]); }); }); +//fecha +describe("orderFecha", () => { + const fechaTest = [ + //array de test + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]; + it("return release_date", () => { + //le decimos que va a ser + expect(orderFecha(fechaTest)).toEqual([ + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]); + }); +}), -describe('anotherExample', () => { - it('is a function', () => { - expect(typeof anotherExample).toBe('function'); +//fecha2 +describe("orderFecha2", () => { + const fechaTest2 = [ + //array de test + { release_date: "1986" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1989" }, + { release_date: "1991" }, + { release_date: "1992" }, + { release_date: "1994" }, + { release_date: "1995" }, + { release_date: "1997" }, + { release_date: "1999" }, + { release_date: "2001" }, + { release_date: "2002" }, + { release_date: "2004" }, + { release_date: "2006" }, + { release_date: "2008" }, + { release_date: "2010" }, + { release_date: "2011" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2014" }, + ]; + it("return release_date", () => { + //le decimos que va a ser + expect(orderFecha2(fechaTest2)).toEqual([ + { release_date: "2014" }, + { release_date: "2013" }, + { release_date: "2013" }, + { release_date: "2011" }, + { release_date: "2010" }, + { release_date: "2008" }, + { release_date: "2006" }, + { release_date: "2004" }, + { release_date: "2002" }, + { release_date: "2001" }, + { release_date: "1999" }, + { release_date: "1997" }, + { release_date: "1995" }, + { release_date: "1994" }, + { release_date: "1992" }, + { release_date: "1991" }, + { release_date: "1989" }, + { release_date: "1988" }, + { release_date: "1988" }, + { release_date: "1986" }, + ]); }); +}), +//const isAscendent = true; +//expect(sortDataYear(peliculas, isAscendent)).toEqual([ - it('returns `anotherExample`', () => { - expect(anotherExample()).toBe('OMG'); +//directores +describe("filtroDir", () => { + const directoresTest = [ + //array de test + { director: "Hayao Miyazaki" }, + { director: "Gorō Miyazaki" }, + { director: "Isao Takahata" }, + { director: "Hiroyuki Morita" }, + { director: "Hiromasa Yonebayashi" }, + { director: "Yoshifumi Kondō" }, + ]; + it("return director", () => { + //le decimos que va a ser + expect(filtroDir(directoresTest, "Hayao Miyazaki")).toEqual([ + { director: "Hayao Miyazaki" }, + ]); + }); +}), +describe("filtroProduc", () => { + const producerTest = [ + //array de test + { producer: "Isao Takahata" }, + { producer: "Toshio Suzuki" }, + { producer: "Toru Hara" }, + { producer: "Hayao Miyazaki" }, + { producer: "Yoshiaki Nishimura" }, + ]; + it("return producer", () => { + //le decimos que va a ser + expect(filtroProduc(producerTest, "Isao Takahata")).toEqual([ + { producer: "Isao Takahata" }, + ]); }); });