Los estilos en el archivo src/pages/Register.vue están como CSS y en el archivo vue

• [ ] Convierte el CSS a SASS y optimiza lo que se pueda
• [ ] Mueve los estilos a un archivo aparte en src/css/register.sass

El q-card tiene un background rectangular con border-radius: 4px que genera un rectángulo casi imperceptible

Es más notorio si al rectángulo principal le pones un color amarillo y al q-card uno rojo

Si se mira con atención, se puede ver el rectángulo

• [ ] Quita el background al q-card

Los estilos en línea son más pesados que los estilos en CSS

• [x] Elimina el atributo "style" en donde lo encuentres y crea una clase para asignar ese estilo.

Explicación:

Una página se divide en 3: html, css y javascript. La mejor práctica es tener 1 archivo para cada cosa, y es por el flujo de descarga de la aplicación:

1. Primero se descarga el html con todo lo que contenga, y va ejecutando linea a linea las importaciones
2. Si la importación es asíncrona, el HTML se sigue ejecutando mientras otros archivos se descargan al mismo tiempo
3. Si el CSS está en el html (véase, estilos en linea), hará más lento la ejecución de dichas descargas, pues la computadora analiza esos estilos en línea por si "hay algo que descargar", y luego continúa.

Por lo tanto, si un HTML incluye estilos en línea, el HTML pesará 40Kb por ejemplo, que se envían en pequeños paquetes de xKb, o sea 40/x paquetes Si el HTML pesa 20Kb y el CSS 20Kb, el HTML al 5% de su descarga puede invocar que se descargue el CSS al mismo tiempo. Es como si solo descargara 25/x paquetes

La pantalla de lección se compone de los siguientes elementos

• [x] Fondo
• [x] Header de la lección
• [x] Body de la lección
• [x] Entrenator chueco
• [x] Botón de terminación

Fondo

El fondo de esta pantalla tendrá los siguientes estilos

background: linear-gradient(180.06deg, #FFF7E6 17.25%, #F0FFFC 64.55%);
box-shadow: 0px 4px 31px rgba(227, 227, 227, 0.25);

Header de la lección

Será un rectángulo con este background:

background: #003F54;

Y el texto interior, que es el título de la lección, tendrá estos estilos

font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 30px;
text-align: center;

Body de la lección

Se colocará un background que se pueda repetir en Y y está ubicado en \src\assets\background\squares-large.png

La imagen de background es larga y debe ajustarse con un tamaño background-size: contain. Se espera que la imagen se corte.

Entrenator chueco

Coloca la imagen de Entrenator del lado derecho, solo un poco más abajo que el rectángulo con el título de la lección. A entrenator lo encuentras en \src\assets\img\entrenator.png

Puedes utilizar los estilos:

position: absolute;
right: 0;
transform: rotate(-90deg);

Botón de terminación de la lección

El botón tiene estos estilos

background: #008FD1;
box-shadow: 4px 4px 12px #CCCCCC;
border-radius: 11px;

Y el texto interior estos:

font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 15px;
line-height: 22px;
text-align: center;

El botón no debe tocar las orillas de la pantalla y debe estar siempre lo más abajo posible. Considera que la página podrá crecer y generar un scroll, de forma que el botón quede siempre hasta abajo

Figura final esperada

Ojo, en la captura es larga solo como ilustración de que se espera un scroll

La pantalla principal deberá tener los siguientes elementos

• [x] #2
• [x] #3
• [x] #4
• [x] #5
• [x] #6
• [x] #7
• [x] #8
• [x] #9

Fondo

background: linear-gradient(180deg, #D2FDFD 42.74%, #ECFFEF 93.06%);
box-shadow: 0px 4px 31px rgba(227, 227, 227, 0.25);

Rectángulo contenedor

Utiliza un flexbox con items-center

https://quasar.dev/layout/grid/introduction-to-flexbox#alignment

background: #FFFFFF;
border-radius: 23.76px;
margin: 5px 0px;
height: 542.48px; // deseable que sea 60% de la altura de la pantalla 

Figuras voladoras

Encontrarás las 3 figuras en \src\assets\img

Puedes utilizar posición absoluta con porcentajes para su correcto posicionamiento

Nubes

Así como el rectángulo contenedor, con flexbox items-center consigue colocar las nubes arriba y abajo

Las nubes se encuentran por detrás del rectángulo. Puedes usar z-index: 1 en las nubes y z-index: 2 en los rectángulos si las nubes quedan por encima del rectángulo

Si la posición de las nubes es absoluta, puedes hacer algo como esto:

top: -50px

Para solapar elementos

Botones para redes sociales

Utiliza un elemento nativo de Quasar para los botones

https://quasar.dev/vue-components/button#custom-colors

Los íconos para redes sociales los encontrarás en \src\assets\logos y los estilos de los botones serán estos:

background: rgba(255, 255, 255, 0.85);
box-shadow: 0px 4px 12px rgba(194, 194, 194, 0.25);
border-radius: 23.76px;

El texto dentro de los botones tendrán estos estilos:

font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 12.96px;
line-height: 19px;
text-align: center;
color: #657674;

Nota: el botón está alejado de la orilla del rectángulo por unos 50px de cada lado

El texto "Crear una cuenta" tendrá estos estilos

font-family: 'Poppins'; // Si no existe crea un issue
font-style: normal;
font-weight: 500;
font-size: 21.6px;
line-height: 32px;
text-align: center;
color: #1A5951;

Formulario

Utiliza un elemento nativo input de Quasar, en su forma Standard

https://quasar.dev/vue-components/input#example--design-overview

La linea de abajo en cada input, así como el color del label es:

#1A5951;

El texto dentro de cada input tiene estos estilos:

font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 11.52px;
line-height: 17px;
text-align: center;
color: #1A5951;

Nota: El width de los input es exactamente el mismo que los botones de redes sociales.

Y el texto "- OR -" tiene los mismos estilos que el texto "Crear una cuenta", con estas diferencias:

font-weight: 600;
font-size: 14px;
line-height: 21px;

Botón para enviar

El botón de enviar debe ser también un elemento nativo de Quasar, con estos estilos:

background: #003F54;
box-shadow: 0px 4px 31px rgba(227, 227, 227, 0.25);
border-radius: 53px;

El texto interno del botón tiene estos estilos

font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 12.96px;
line-height: 19px;
text-align: center;
color: #FFFFFF;

Ojo, debe tener el mismo width que los inputs y los botones de redes suciales

Texto para iniciar sesión

Debajo del botón para crear cuenta existirá un pequeño texto con estos estilos que dirá "¿Ya tienes una cuenta?"

font-family: 'Poppins';
font-style: normal;
font-weight: 300;
font-size: 9.36px;
line-height: 14px;
text-align: center;
color: #1A5951;

Seguido de ese texto vendrá otro, con fuente más gruesa que dirá "Inicia sesión"

font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-size: 9.36px;
line-height: 14px;
text-align: center;
color: #1A5951;

Resultado final

Se utilizan fórmulas para las posiciones en círculo y se ajusta usando estilos con fórmulas.

Yo revisé en todos los dispositivos móviles disponibles en Firefox y se ve todo en orden

Se tiene el número de steps en cada nivel, y se sabe el progreso actual del estudiante viendo los steps resueltos

Problema: haz que la barra de progreso sea dinámica y reactiva

Hay que evitar que se guarden registros como "[email protected] " Para esto hay que aplicar una limpieza con trim al correo luego de que se escriba

Aplicar en /login y /register

Lenguaje: Karel Título: Karelbug Contenido: En el repo, en /src/pages/Lessons/Karel/Seccion 3/Leccion 3.1.docx Las imágenes de la lección mételas dentro de la misma carpeta de la lección (Leccion 1) Elimina el docx al finalizar

Lenguaje: Karel Título: Introducción a Karel Contenido: En el repo, en /src/pages/Lessons/Karel/Seccion 2/Leccion 2.8.docx Las imágenes de la lección mételas dentro de la misma carpeta de la lección Elimina el docx al finalizar

Lenguaje: Karel Título: Introducción a Karel Contenido: En el repo, en /src/pages/Lessons/Karel/Seccion 2/Leccion 2.7.docx Las imágenes de la lección mételas dentro de la misma carpeta de la lección Elimina el docx al finalizar