diff --git a/blog/workshop-congratulations.md b/blog/workshop-congratulations.md
new file mode 100644
index 0000000..9f0a5b5
--- /dev/null
+++ b/blog/workshop-congratulations.md
@@ -0,0 +1,36 @@
+---
+title: Tutorial - ¿Y ahora qué?
+author: Angular Bolivia
+publish date: 2020-11-28
+description: Felicidades, acabas de dar un gran paso para convertirte en Angular Developer. ¡Estamos orgullosos!
+published: true
+slug: workshop-congratulations
+---
+
+# ¿Y ahora qué?
+
+> Felicidades, acabas de dar un gran paso para convertirte en Angular Developer. ¡Estamos orgullosos!
+
+
+
+
+ ¡Estamos orgullosos!
+
+
+
+## ¿Qué puedes hacer ahora?
+
+Toma un descanso y relájate. Acabas de hacer algo realmente grande.
+
+Después de eso, asegúrate de seguir nuestra página **Angular Bolivia** en Facebook y Twitter para estar al día. También puedes unirte a nuestro grupo de Meetup para estar al tanto de todos los eventos que realizamos con la comunidad.
+
+## ¿Quieres seguir estudiando?
+
+¡Claro que sí! Una guía bastante completa es la documentación oficial de Angular. También puedes intentar con alguno de los recursos listados a continuación. ¡Todos son muy recomendados!
+
+- Angular CLI — mini curso - Jorge Cano
+- Curso de Angular - CodigoMentor
+- Angular - Codecraft
+- Videos de Angular - Nicobytes
+
+[< Artículo anterior: ¡Comparte tu app!](/blog/workshop-share)
diff --git a/blog/workshop-css.md b/blog/workshop-css.md
index cff66fe..efb6390 100644
--- a/blog/workshop-css.md
+++ b/blog/workshop-css.md
@@ -17,7 +17,7 @@ El lenguaje CSS (las siglas en inglés de hojas de estilos en cascada, o Cascadi
## Paso #1
-En la archivos que conforman la aplicación existe un archivo llamado `styles.css` en este archivo es donde vamos a trabajar todos nuestros estilos.
+En los archivos que conforman la aplicación existe un archivo llamado `styles.css` en este archivo es donde vamos a trabajar todos nuestros estilos.
@@ -344,10 +60,18 @@ Ahora vamos a verlo en pantalla completa haciendo click en el botón **Open in N
-El resultado:
+El resultado de la Opción #1:
+El resultado de la Opción #2:
+
+
+
+
+
+[> Próximo artículo: Eliminando gastos](/blog/workshop-delete-expenses)
+
[< Artículo anterior: Agregando presupuesto y saldo](/blog/workshop-budget)
diff --git a/blog/workshop-delete-expenses.md b/blog/workshop-delete-expenses.md
new file mode 100644
index 0000000..602cf65
--- /dev/null
+++ b/blog/workshop-delete-expenses.md
@@ -0,0 +1,80 @@
+---
+title: Tutorial - Eliminando gastos
+author: Angular Bolivia
+publish date: 2020-11-28
+description: ¿Llegaste muy rápido hasta aquí? Si aún queda tiempo para que termine el taller, podemos ver cómo eliminar gastos de nuestra lista.
+published: true
+slug: workshop-delete-expenses
+---
+
+# Eliminando gastos
+
+> ¿Llegaste muy rápido hasta aquí? Si aún queda tiempo para que termine el taller, podemos ver cómo eliminar gastos de nuestra lista.
+
+***
+
+## Paso #1
+
+En `app.component.ts` vamos a crear una nueva función llamada `eliminarGasto` que recibirá el índice del gasto a eliminar y la cantidad del gasto:
+
+```typescript
+ eliminarGasto(indiceGasto: number, cantidadGasto: number): void {
+ this.gastos.splice(indiceGasto, 1);
+ this.saldo += cantidadGasto;
+ }
+```
+
+Como puedes ver, estamos usando la función `splice` de nuestro **Array** de gastos. La misma elimina la cantidad de elementos que le indiquemos a partir del índice que le pasamos. En este caso, el índice lo pasaremos desde la plantilla y la cantidad de elementos que eliminaremos será solo 1 siempre. En la otra línea estamos agregando a nuestro saldo la cantidad del gasto que estamos eliminando.
+
+> Los **índices** en los **Arrays** representan la posición de cada uno de los elementos. Toma en cuenta que los **índices** se empiezan contando desde **0**.
+
+## Paso #2
+
+Ahora debemos obtener el índice de cada uno de nuestros gastos en la plantilla. Para ello podemos pedirle a la directiva que nos la pase de la siguiente madera: `index as indice`.
+
+```html
+
+```
+
+Lo siguiente es agregar un botón para cada gasto, al que al hacerle click llame a la función que acabamos de crear:
+
+```html
+
+```
+
+La sección de nuestra plantilla con la lista de gastos tendrá el siguiente código:
+
+```html
+
+
+
Saldo disponible
+
{{saldo}} Bs
+
+
+
+
+
+
{{gasto.nombre}}
+
+ {{gasto.cantidad}} Bs
+
+
+
+
+
+
+```
+
+Y nuestra app se verá así:
+
+
+
+
+
+[> Próximo artículo: ¡Comparte tu app!](/blog/workshop-share)
+
+[< Artículo anterior: ¡Que quede bonito!](/blog/workshop-css)
diff --git a/blog/workshop-share.md b/blog/workshop-share.md
new file mode 100644
index 0000000..c8c6415
--- /dev/null
+++ b/blog/workshop-share.md
@@ -0,0 +1,24 @@
+---
+title: Tutorial - Comparte tu app
+author: Angular Bolivia
+publish date: 2020-11-28
+description: Si te ha gustado lo que has hecho hasta ahora, compártelo con tus amigos y familiares.
+published: true
+slug: workshop-share
+---
+
+# ¡Comparte tu app!
+
+> Si te ha gustado lo que has hecho hasta ahora, compártelo con tus amigos y familiares.
+
+***
+
+Haz click en el botón **Share** y envía la **Application Url** para que todos vean tu increíble trabajo.
+
+
+
+
+
+[> Próximo artículo: ¿Y ahora qué?](/blog/workshop-congratulations)
+
+[< Artículo anterior: Eliminando gastos](/blog/workshop-delete-expenses)
diff --git a/blog/workshop-welcome.md b/blog/workshop-welcome.md
index 011197d..2aec73a 100644
--- a/blog/workshop-welcome.md
+++ b/blog/workshop-welcome.md
@@ -2,14 +2,14 @@
title: Tutorial - Bienvenida
author: Angular Bolivia
publish date: 2020-11-11
-description: Primero que nada, nos alegra mucho tenerte aquí, nuestra misión es ayudarte a que te sientas cómoda todo el tiempo. Si en algún momento necesitas ayuda no dudes en buscarnos, estamos aquí para ti.
+description: Primero que nada, nos alegra mucho tenerte aquí, nuestra misión es ayudarte a que te sientas cómod@ todo el tiempo. Si en algún momento necesitas ayuda no dudes en buscarnos, estamos aquí para ti.
published: true
slug: workshop-welcome
---
# ¡Bienvenida a ng|she!
-> Primero que nada, nos alegra mucho tenerte aquí, nuestra misión es ayudarte a que te sientas cómoda todo el tiempo. Si en algún momento necesitas ayuda no dudes en buscarnos, estamos aquí para ti.
+> Primero que nada, nos alegra mucho tenerte aquí, nuestra misión es ayudarte a que te sientas cómod@ todo el tiempo. Si en algún momento necesitas ayuda no dudes en buscarnos, estamos aquí para ti.
***
@@ -25,7 +25,7 @@ Como pasa con todas las cosas nuevas va a ser una aventura, diviértete, una vez
Bueno, ¡tenemos buenas noticias!, programar no es tan difícil como parece y queremos demostrarte lo divertido que puede llegar a ser!
-Este tutorial no te convertirá en una programadora de la noche a la mañana, pero será un gran comienzo. Si quieres ser una profesional necesitarás meses o incluso años de aprendizaje y práctica. Sin embargo, queremos enseñarte que programar o crear sitios web no es tan complicado como parece, intentaremos explicarte las cosas lo mejor que podamos para perderle el miedo a la tecnología.
+Este tutorial no te convertirá en un(a) programador(a) de la noche a la mañana, pero será un gran comienzo. Si quieres ser un(a) profesional necesitarás meses o incluso años de aprendizaje y práctica. Sin embargo, queremos enseñarte que programar o crear sitios web no es tan complicado como parece, intentaremos explicarte las cosas lo mejor que podamos para perderle el miedo a la tecnología.
¡Esperamos conseguir que te guste la tecnología!
@@ -35,17 +35,25 @@ Este tutorial no te convertirá en una programadora de la noche a la mañana, pe
Cuando termines el tutorial, tendrás una aplicación web sencilla y funcional, una app para manejar tus gastos.
-Tendrá (más o menos) esta pinta:
+Tendrá (más o menos) esta apariencia:
+O la siguiente:
+
+
+
+
+
+Tú podrás decidir qué estilos prefieres al final :D
+
***
## 3. Recuerda
- Tienes a tu disposición a todos los mentores, siéntete en la libertad de llamarlos constantemente para que te ayuden con cualquier duda que tengas.
-- Seguro eres de las más listas del grupo, si ese es el caso y terminas el desafío muy pronto, no te apresures a empezar el siguiente, podrás ser la guía para ayudar a tus compañeras a terminarlo.
+- Seguro eres de l@s más list@s del grupo, si ese es el caso y terminas el desafío muy pronto, no te apresures a empezar el siguiente, podrás ser el/la guía para ayudar a tus compañer@s a terminarlo.
[> Próximo artículo: ¿Qué es Angular?](/blog/workshop-angular)
diff --git a/src/assets/data/mentors.ts b/src/assets/data/mentors.ts
index 29dd23c..432322d 100644
--- a/src/assets/data/mentors.ts
+++ b/src/assets/data/mentors.ts
@@ -228,6 +228,18 @@ const mentors: Person[] = [
},
],
},
+ {
+ name: 'Mauricio Arce Torrez',
+ shortName: 'Mauricio Arce',
+ imageSrc: 'assets/img/mentors/mauri.jpg',
+ bio: `Mauricio es un apasionado del desarrollo web y de participar en comunidades. Graduado de la Universidad Mayor de San Simón de la carrera de Ingeniería de Sistemas y con un diplomado en Gestión de Proyectos de Tecnologías de Información, actualmente trabaja como desarrollador de software en Jalasoft. Es parte del equipo organizador del Startup Weekend Cochabamba por más de 3 años y Tech Lead del mismo en la última versión y en la que se viene organizando este año, estando a la cabeza del desarrollo de las aplicaciones web usadas para la organización de este evento. Miembro del Core Team de la comunidad Angular Bolivia, speaker en la comunidad y parte del Web Team del equipo organizador del NG Bolivia (la conferencia de Angular más grande en Bolivia). Miembro activo de la comunidad GP4Tech, donde aparte de ser parte del equipo de desarrollo, ayuda a chicas y chicos de colegio con temas relacionados a desarrollo a través de charlas y talleres.`,
+ socialLinks: [
+ {
+ icon: 'fab fa-twitter',
+ link: 'https://twitter.com/combimauri',
+ },
+ ],
+ },
];
export default mentors;
diff --git a/src/assets/img/app-4.png b/src/assets/img/app-4.png
new file mode 100644
index 0000000..54b8e52
Binary files /dev/null and b/src/assets/img/app-4.png differ
diff --git a/src/assets/img/mentors/mauri.jpg b/src/assets/img/mentors/mauri.jpg
new file mode 100644
index 0000000..b5e224d
Binary files /dev/null and b/src/assets/img/mentors/mauri.jpg differ
diff --git a/src/assets/img/share.png b/src/assets/img/share.png
new file mode 100644
index 0000000..41407b5
Binary files /dev/null and b/src/assets/img/share.png differ
diff --git a/src/assets/img/template-7.png b/src/assets/img/template-7.png
new file mode 100644
index 0000000..7283f07
Binary files /dev/null and b/src/assets/img/template-7.png differ
diff --git a/src/assets/scully-routes.json b/src/assets/scully-routes.json
index 835e92f..9b3e829 100644
--- a/src/assets/scully-routes.json
+++ b/src/assets/scully-routes.json
@@ -1 +1 @@
-[{"route":"/"},{"route":"/blog"},{"route":"/blog/code-of-conduct","title":"Código de conducta","author":"Angular Bolivia","publish date":"2020-11-07T00:00:00.000Z","description":"Código de conducta para el evento online ng|she.","published":true,"slug":"code-of-conduct","sourceFile":"code-of-conduct.md"},{"route":"/blog/workshop-add-expenses","title":"Tutorial - Agregando gastos","author":"Angular Bolivia","publish date":"2020-11-15T00:00:00.000Z","description":"Como habrás notado, Interpolation es bastante fácil. Ahora vamos a crear una función que nos permita guardar nuestros gastos.","published":true,"slug":"workshop-add-expenses","sourceFile":"workshop-add-expenses.md"},{"route":"/blog/workshop-angular","title":"Tutorial - Angular","author":"Angular Bolivia","publish date":"2020-11-11T00:00:00.000Z","description":"Angular es un framework que nos ayuda a desarrollar sitios web de manera fácil y rápida.","published":true,"slug":"workshop-angular","sourceFile":"workshop-angular.md"},{"route":"/blog/workshop-budget","title":"Tutorial - Presupuesto y saldo","author":"Angular Bolivia","publish date":"2020-11-16T00:00:00.000Z","description":"Para controlar nuestros gastos es importante saber cuál es nuestro presupuesto y cuál sería nuestro saldo.","published":true,"slug":"workshop-budget","sourceFile":"workshop-budget.md"},{"route":"/blog/workshop-components","title":"Tutorial - Componentes","author":"Angular Bolivia","publish date":"2020-11-11T00:00:00.000Z","description":"Los componentes son los bloques básicos de construcción de las páginas web en Angular. Contienen una parte visual en html (la vista) y una funcional en Typescript.","published":true,"slug":"workshop-components","sourceFile":"workshop-components.md"},{"route":"/blog/workshop-css","title":"Tutorial - CSS","author":"Angular Bolivia","publish date":"2020-11-16T00:00:00.000Z","description":"Nuestra aplicación para manejo de gastos todavía es un poco fea, ¿no te parece? ¡Es hora de ponerla bonita! Para eso, vamos a usar CSS.","published":true,"slug":"workshop-css","sourceFile":"workshop-css.md"},{"route":"/blog/workshop-expenses-list","title":"Tutorial - Lista de gastos","author":"Angular Bolivia","publish date":"2020-11-16T00:00:00.000Z","description":"En la variable gastos se encuentran todos los gastos guardados que el usuario está creando, ahora llego el punto de mostrarlos en pantalla.","published":true,"slug":"workshop-expenses-list","sourceFile":"workshop-expenses-list.md"},{"route":"/blog/workshop-html","title":"Tutorial - HTML","author":"Angular Bolivia","publish date":"2020-11-11T00:00:00.000Z","description":"Te estarás preguntando, ¿qué es una plantilla o vista?","published":true,"slug":"workshop-html","sourceFile":"workshop-html.md"},{"route":"/blog/workshop-ngmodel","title":"Tutorial - ngModel","author":"Angular Bolivia","publish date":"2020-11-15T00:00:00.000Z","description":"En este punto vamos a aprender el uso de ngModel para ingresar nuestros gastos.","published":true,"slug":"workshop-ngmodel","sourceFile":"workshop-ngmodel.md"},{"route":"/blog/workshop-stackblitz","title":"Tutorial - Stackblitz","author":"Angular Bolivia","publish date":"2020-11-11T00:00:00.000Z","description":"Stackblitz es una página web que te permite crear aplicaciones de Angular en el navegador, eso quiere decir que no tienes que instalar nada más.","published":true,"slug":"workshop-stackblitz","sourceFile":"workshop-stackblitz.md"},{"route":"/blog/workshop-template","title":"Tutorial - Tu primera plantilla","author":"Angular Bolivia","publish date":"2020-11-15T00:00:00.000Z","description":"Ahora vamos a añadir la estructura HTML inicial de nuestra aplicación.","published":true,"slug":"workshop-template","sourceFile":"workshop-template.md"},{"route":"/blog/workshop-welcome","title":"Tutorial - Bienvenida","author":"Angular Bolivia","publish date":"2020-11-11T00:00:00.000Z","description":"Primero que nada, nos alegra mucho tenerte aquí, nuestra misión es ayudarte a que te sientas cómoda todo el tiempo. Si en algún momento necesitas ayuda no dudes en buscarnos, estamos aquí para ti.","published":true,"slug":"workshop-welcome","sourceFile":"workshop-welcome.md"},{"route":"/team"}]
\ No newline at end of file
+[{"route":"/"},{"route":"/blog"},{"route":"/blog/code-of-conduct","title":"Código de conducta","author":"Angular Bolivia","publish date":"2020-11-07T00:00:00.000Z","description":"Código de conducta para el evento online ng|she.","published":true,"slug":"code-of-conduct","sourceFile":"code-of-conduct.md"},{"route":"/blog/workshop-add-expenses","title":"Tutorial - Agregando gastos","author":"Angular Bolivia","publish date":"2020-11-15T00:00:00.000Z","description":"Como habrás notado, Interpolation es bastante fácil. Ahora vamos a crear una función que nos permita guardar nuestros gastos.","published":true,"slug":"workshop-add-expenses","sourceFile":"workshop-add-expenses.md"},{"route":"/blog/workshop-angular","title":"Tutorial - Angular","author":"Angular Bolivia","publish date":"2020-11-11T00:00:00.000Z","description":"Angular es un framework que nos ayuda a desarrollar sitios web de manera fácil y rápida.","published":true,"slug":"workshop-angular","sourceFile":"workshop-angular.md"},{"route":"/blog/workshop-budget","title":"Tutorial - Presupuesto y saldo","author":"Angular Bolivia","publish date":"2020-11-16T00:00:00.000Z","description":"Para controlar nuestros gastos es importante saber cuál es nuestro presupuesto y cuál sería nuestro saldo.","published":true,"slug":"workshop-budget","sourceFile":"workshop-budget.md"},{"route":"/blog/workshop-components","title":"Tutorial - Componentes","author":"Angular Bolivia","publish date":"2020-11-11T00:00:00.000Z","description":"Los componentes son los bloques básicos de construcción de las páginas web en Angular. Contienen una parte visual en html (la vista) y una funcional en Typescript.","published":true,"slug":"workshop-components","sourceFile":"workshop-components.md"},{"route":"/blog/workshop-congratulations","title":"Tutorial - ¿Y ahora qué?","author":"Angular Bolivia","publish date":"2020-11-28T00:00:00.000Z","description":"Felicidades, acabas de dar un gran paso para convertirte en Angular Developer. ¡Estamos orgullosos!","published":true,"slug":"workshop-congratulations","sourceFile":"workshop-congratulations.md"},{"route":"/blog/workshop-css","title":"Tutorial - CSS","author":"Angular Bolivia","publish date":"2020-11-16T00:00:00.000Z","description":"Nuestra aplicación para manejo de gastos todavía es un poco fea, ¿no te parece? ¡Es hora de ponerla bonita! Para eso, vamos a usar CSS.","published":true,"slug":"workshop-css","sourceFile":"workshop-css.md"},{"route":"/blog/workshop-delete-expenses","title":"Tutorial - Eliminando gastos","author":"Angular Bolivia","publish date":"2020-11-28T00:00:00.000Z","description":"¿Llegaste muy rápido hasta aquí? Si aún queda tiempo para que termine el taller, podemos ver cómo eliminar gastos de nuestra lista.","published":true,"slug":"workshop-delete-expenses","sourceFile":"workshop-delete-expenses.md"},{"route":"/blog/workshop-expenses-list","title":"Tutorial - Lista de gastos","author":"Angular Bolivia","publish date":"2020-11-16T00:00:00.000Z","description":"En la variable gastos se encuentran todos los gastos guardados que el usuario está creando, ahora llego el punto de mostrarlos en pantalla.","published":true,"slug":"workshop-expenses-list","sourceFile":"workshop-expenses-list.md"},{"route":"/blog/workshop-html","title":"Tutorial - HTML","author":"Angular Bolivia","publish date":"2020-11-11T00:00:00.000Z","description":"Te estarás preguntando, ¿qué es una plantilla o vista?","published":true,"slug":"workshop-html","sourceFile":"workshop-html.md"},{"route":"/blog/workshop-ngmodel","title":"Tutorial - ngModel","author":"Angular Bolivia","publish date":"2020-11-15T00:00:00.000Z","description":"En este punto vamos a aprender el uso de ngModel para ingresar nuestros gastos.","published":true,"slug":"workshop-ngmodel","sourceFile":"workshop-ngmodel.md"},{"route":"/blog/workshop-share","title":"Tutorial - Comparte tu app","author":"Angular Bolivia","publish date":"2020-11-28T00:00:00.000Z","description":"Si te ha gustado lo que has hecho hasta ahora, compártelo con tus amigos y familiares.","published":true,"slug":"workshop-share","sourceFile":"workshop-share.md"},{"route":"/blog/workshop-stackblitz","title":"Tutorial - Stackblitz","author":"Angular Bolivia","publish date":"2020-11-11T00:00:00.000Z","description":"Stackblitz es una página web que te permite crear aplicaciones de Angular en el navegador, eso quiere decir que no tienes que instalar nada más.","published":true,"slug":"workshop-stackblitz","sourceFile":"workshop-stackblitz.md"},{"route":"/blog/workshop-template","title":"Tutorial - Tu primera plantilla","author":"Angular Bolivia","publish date":"2020-11-15T00:00:00.000Z","description":"Ahora vamos a añadir la estructura HTML inicial de nuestra aplicación.","published":true,"slug":"workshop-template","sourceFile":"workshop-template.md"},{"route":"/blog/workshop-welcome","title":"Tutorial - Bienvenida","author":"Angular Bolivia","publish date":"2020-11-11T00:00:00.000Z","description":"Primero que nada, nos alegra mucho tenerte aquí, nuestra misión es ayudarte a que te sientas cómod@ todo el tiempo. Si en algún momento necesitas ayuda no dudes en buscarnos, estamos aquí para ti.","published":true,"slug":"workshop-welcome","sourceFile":"workshop-welcome.md"},{"route":"/team"}]
\ No newline at end of file
+ 
@@ -39,298 +39,14 @@ El resultado es:
## Paso #2
-Vamos a usar una hoja de estilos que ya esta preparada para que funciona muy bien dentro de la aplicación.
+Vamos a usar una hoja de estilos que ya está preparada para que funcione muy bien dentro de la aplicación.
-Copia los siguientes estilos:
+Tenemos 2 opciones, abre cualquier de las 2, copia todo el contenido y reemplaza lo que tengas en `styles.css` con lo que acabas de copiar:
-```css
-@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@400;700&display=swap");
-
-body {
- display: flex;
- justify-content: center;
- align-items: center;
- margin: 0;
-
- font-size: 16px;
- font-family: "Roboto", sans-serif;
- color: white;
-
- height: 100vh;
- min-width: 100%;
-
- background-color: #1c162e;
- background-image: url("./assets/bg.svg");
- background-repeat: no-repeat;
- background-position: bottom center;
- background-size: contain;
-}
-
-input {
- width: 100%;
- height: 40px;
-
- border-radius: 5px;
- border: 1px solid #aaaaaa;
- outline: none;
-
- font-size: 1em;
-
- margin: 10px 0;
- padding: 5px 10px;
- box-sizing: border-box;
-}
-
-input::placeholder {
- color: #aaaaaa;
- font-family: "montserrat", sans-serif;
- font-size: 16px;
-}
-
-@media screen and (max-width: 825px) {
- body {
- height: 1115px;
- width: 100%;
-
- align-items: flex-start;
- justify-content: center;
-
- padding: 0 10%;
- box-sizing: border-box;
- }
-}
-
-.contenedor-principal {
- height: 75vh;
-
- display: grid;
- justify-content: center;
- grid-template-columns: 400px 400px;
- grid-template-rows: 1fr 2fr;
- gap: 1.5em;
-}
-
-.presupuesto {
- display: flex;
- flex-direction: column;
-}
-
-.presupuesto label {
- font-size: 1.5em;
- font-weight: bold;
-
- margin-bottom: 12px;
-}
-
-.form {
- padding: 1em;
-
- background-color: white;
- border-radius: 15px;
-
- color: black;
- font-family: "Montserrat", sans-serif;
-}
-
-.form button {
- width: 120px;
- height: 35px;
-
- color: white;
- font-weight: 700;
- font-size: 1em;
-
- border: none;
- border-radius: 5px;
- outline: none;
-
- background: linear-gradient(90deg, #ec008c 0%, #fc6767 100%);
- box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.5);
- transition: 200ms;
- cursor: pointer;
-}
-
-.form button:active {
- box-shadow: none;
-}
-
-.gasto {
- display: flex;
- flex-direction: column;
-
- grid-row: 2/3;
-
- animation: gasto-animation 450ms;
- will-change: transform;
-}
-
-.gasto h3 {
- font-size: 1.5em;
-}
-
-.gasto label {
- font-weight: 700;
-}
-
-.contenedor-lista {
- grid-row: 1/3;
- grid-column: 2/3;
-
- display: flex;
- flex-direction: column;
-}
-
-.restante {
- width: 100%;
- height: 150px;
- margin-bottom: 1em;
-
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
-
- background: linear-gradient(90deg, #b172f7 0%, #236afa 100%);
- border-radius: 16px;
-
- animation: restante-animation 450ms 450ms forwards;
- transform: translateY(-1000px);
- will-change: transform;
-}
-
-.restante p {
- margin: 0 0 10px;
-
- font-size: 1.5em;
- font-weight: bold;
-}
-
-.restante p:nth-child(2) {
- margin: 0;
-
- font-size: 2em;
-}
-
-.caja-lista {
- flex: 1;
-
- width: 100%;
-
- overflow-y: auto;
-}
-
-.caja-lista ul {
- list-style: none;
-
- margin: 0;
- padding: 0;
-}
-
-.caja-lista ul li {
- display: flex;
- justify-content: space-between;
- min-height: 100px;
- max-width: 100%;
-
- background: linear-gradient(314.33deg, #ed4257 -3.69%, #ce1862 109.82%);
- border-radius: 15px;
- animation: item-in 450ms;
- will-change: opacity;
-
- padding: 0.6em 1em;
- box-sizing: border-box;
-
- margin-bottom: 1em;
-}
-
-.caja-lista ul li:nth-child(2n) {
- background: linear-gradient(314.33deg, #18d0bf -3.69%, #1b9fb4 107.58%);
-}
-
-.caja-lista ul li:nth-child(3n) {
- background: linear-gradient(
- 314.33deg,
- hsl(244, 100%, 68%) -3.69%,
- #7043c2 109.82%
- );
-}
-
-.caja-lista ul li p {
- flex: 1;
- overflow-x: auto;
-
- display: flex;
- align-items: center;
-}
+- Opción de estilos #1
+- Opción de estilos #2
-.caja-lista ul li div {
- display: flex;
- align-items: center;
-}
-
-.caja-lista ul li div span {
- font-size: 1.5em;
- font-weight: 700;
-}
-
-.caja-lista ul li div button {
- cursor: pointer;
-
- background: none;
- border: none;
- outline: none;
-}
-
-.caja-lista ul li div button img {
- width: 35px;
-}
-
-@keyframes gasto-animation {
- from {
- transform: translateX(-1000px);
- }
- to {
- transform: translateX(0%);
- }
-}
-
-@keyframes restante-animation {
- from {
- transform: translateY(-1000px);
- }
- to {
- transform: translateY(0%);
- }
-}
-
-@keyframes item-in {
- from {
- opacity: 0;
- }
-
- to {
- opacity: 1;
- }
-}
-
-@media screen and (max-width: 825px) {
- .contenedor-principal {
- margin-top: 2em;
-
- grid-template-columns: 100%;
- grid-template-rows: auto auto 600px;
- }
-
- .presupuesto,
- .contenedor-lista,
- .caja-lista {
- grid-row: auto;
- grid-column: auto;
- }
-}
-```
-
-El resultado será:
+El resultado será el siguiente si escoges la Opción #1:
@@ -344,10 +60,18 @@ Ahora vamos a verlo en pantalla completa haciendo click en el botón **Open in N
+
+
+