Hola a todos Bienvenidos a este curso en el que aprenderán a crear tres proyectos con html css y javascript paso a paso primero crearán una barra de navegación responsiva con menús desplegables luego una landing page responsiva con una ventana modal personalizada y finalmente un slider con texto e imágenes que cambia de posición al hacer clic en la flechas Jordan Alexander Cruz García los guiará paso a paso durante el curso Jordan es de desarrollador web y le encanta compartir su conocimiento de html css y javascript en sus cursos suena genial No si están listos Comencemos Hola Qué tal Cómo estás el día de hoy vamos a crear tres proyectos con css que además se complementan con javascript y déjame mostrarte los tres proyectos que haremos a continuación [Música] [Música] qué tal te han parecido se ven estupendos y si quieres descargar los proyectos te los voy a dejar en la descripción de este video También quiero decirte que si quieres aprender css al final de este video te voy a compartir un curso de más de 9 horas de css que te lleva desde cero a avanzado sin nada más que decir Comencemos las prácticas de este curso Así que vamos [Música] allá vamos a comenzar a realizar el menú desplegable y para eso voy a pasar primero a Box icons porque quiero tomar dos iconos que me servirán para la creación del menú desplegable voy a buscar primero un icono de menú que será este voy a copiar el código sug y voy a regresar a visual Studio code aquí en assets voy a crear un archivo que se llame menu.svg voy a pegarlo y voy a ponerle El Fil o el color en blanco posteriormente voy a regresar a Box icons y voy a buscar el icono de un Arrow o de una flecha voy a quitar esto y voy a tomar por ejemplo este voy a copiar el código sug voy a regresar a visual Studio code y lo voy a crear aquí que se llame arrow.svg igual de un color blanco exactamente aquí en El Fil posteriormente voy a ir a Google fonts y Buscar la Fuente popins voy a tomar un peso de 300 400 y 700 voy a copiar el import voy a pegarlo aquí en estilos y en el body voy a pegar la Fuente o el font family que es este ahora Solamente voy a enlazar los estilos con el archivo index.html.erb el html para eso voy a crear un ul con la clase menú links este ul tendrá un li con la clase menú item y dentro tendrá un elemento a con la clase menú link además de la leyenda home voy a copiar esto para crear otro elemento pero este elemento tendrá dentro otro ul para hacer el menú desplegable y le pondré la clase menú item o menú nesting dentro irá otro Li con la clase menú inside y este elemento también tendrá un elemento a con la clase menú link pero con un modificador que sea menú link inside con la leyenda about 1 voy a copiar esto dos veces y le pondré about 2 y about 3 además aquí la leyenda de about voy a copiar esto otra vez Pero ahora le voy a poner la leyenda de projects y cambiaré la leyenda de about por projects de esta manera pero me falta agregar una imagen exactamente aquí en los elementos que tendrán dentro un menú o un submenú primero voy a agregar aquí la clase menú item show para especificar que los elementos que tengan un submenú tendrán esta clase así como este elemento y también en el elemento a tendrán una imagen dentro que referencie a assets y el icono Arrow además con una clase que sea menú Arrow voy a copiar esta imagen voy a presionar al Z y exactamente aquí igual la voy a pegar por último voy a copiar este elemento y lo voy a poner al final con la leyenda contact ahora si yo paso a Chrome ya tengo la estructura de un submenú por último voy a crear un archivo javascript crearé una carpeta js y crearé un archivo app.js que lo voy a referenciar exactamente al final del html justamente de esta manera ahora sí estamos listos para darle vida a este proyecto con css y javascript ahora lo que voy a hacer es que el elemento con la clase menú que es el nap voy a darle un background color que sea 1a 20 2c además de un color que sea blanco y un height de 70 píxeles y al elemento menú container que es el contenedor de el logo y además de los enlaces voy a darle un display Flex un wid del 90 por y un margin auto para que Centre ese 90 por además de un Max withd de 10000 píxeles y un height del 100% para que herede del 100% de su padre y como usamos flexbox voy a poner un justified content space bwin y una Line items Center esto pondrá horizontalmente a los elementos en las esquinas y centrará verticalmente si paso a Chrome tengo esto y si paso al html esto debe estar dentro del menú container todo el ul debe estar dentro es exactamente de esta manera además que debo darle a todos los elementos un margin de cero un padding de Cero y un Box sizing Border Box si paso a Chrome bien Ahora sí funciona ahora pasaré a modificar al elemento menú links que si te das cuenta es el elemento ul Bueno a ese elemento con la clase menú links voy a dar un he del 100% una transición para cuando lo animemos que sea de transform y dure pun 5 segundos y que tenga un display Flex para que los elementos se pongan uno al lado del otro y a los Li directos que son los elementos con la clase menú item voy a darle un list Style que sea Non un position relative para que sus hijos se posicionen absolutamente a ellos y un height del 100% si yo paso a Chrome se vería de esta manera voy a pasar a clippy css voy a optar por esta herramienta voy a generar un polígono voy a poner cada punto en cada esquina y voy a copiar esto pasaré a visual Studio code y quiero decirle o Quiero crear una custom property que se llame clip que si no sabes sobre custom properties tengo un videoo aquí en el canal donde hablo sobre las custom properties y cómo utilizarlas voy a pegar aquí el valor de clickpad voy a quitar esto y ahora voy a regresar a clipy y voy a poner el punto azul en esta esquina y el punto amarillo en esta esquina voy a copiar todo esto voy a regresar a visual Studio code voy a duplicar la custom property y voy a pegar aquí este valor lo que hace la primera custom property es Mostrar al elemento lo que hace la segunda es esconderlo si paso a clipy aquí estará escondido lo que haremos con la segunda custom property es mostrarlo de esta manera y esto hará que sea se anime voy a cerrar esto y actualmente tenemos Esto bueno si yo paso a visual Studio code y le digo que el elemento menú nesting que es el ul que está dentro de los Li es decir es el submenú y le daré la propiedad clickpad con la custom property clip y voy a dejar la custom property que hace que desaparezca el elemento si yo paso a Chrome lo observas desaparecen los submenú Bueno pues si ahora cuando yo pase el mouse sobre menú item yo quiero que su custom property ahora cambie Y pase de ser la que muestra o la que esconde a la que muestra exactamente de esta forma si yo paso a Chrome y paso el mouse sobre este elemento lo ves se mu genial no Bueno voy a pasar a crear otra custom property que se llame transform y que tenga un rotate de 90 gr o - 90 gr Y que cuando pase el mouse sobre ese elemento cambie a 0 grados y si yo paso al elemento con la clase menú Arrow que si recuerdas las imágenes de la flecha tienen esta clase y si yo le doy un transform que tenga la custom property de transform y paso a Chrome lo observas puedes ver cómo Gira la flecha bueno Y si yo le doy una transición para transform de punto 3 segundos y si ahora yo paso a Chrome vas a poder observar la transición genial no Ahora quiero que el elemento con la clase menu link que ese elemento a se vea modificado y yo quiero que este elemento tenga un color blanco un text decoration Non un padding de 30 píxeles hacia los lados y un display Flex con un height del 100% y que se entre verticalmente a los elementos si paso a Chrome perfecto se vería de esta manera se ve fantástico no y puedes ver el efecto La magia de css que Obviamente si quieres aprender css Este es tu canal Bueno si te das cuenta los elementos que están dentro del Li También tienen la clase menú link por lo que compartirán los estilos ahora lo que voy a hacer es de cuando yo pase el mouse sobre menú link que son los enlaces yo quiero que el color cambie a un 7c 92 bd si paso a Chrome se está viendo muy bien pero quizá un color un poco más oscuro voy a regresar a Chrome y veamos qué tal bien Me agrada más ese color ahora voy a decirle a este elemento a menú Arrow que sea un display block y que tenga un poco más de espacio con el texto de tres píxeles para que no se pegue tanto y también al elemento menú nesting voy a darle un l Style que sea Non una transición para cpad que dure segundos y que se posicione absolutamente a su padre que es el Li este elemento tiene un position absolute y este elemento se posicionará absolutamente a él voy a ponerle que esté a la derecha y hacia abajo con un wid que tenga su máximo contenido y que además voy a decirle que se traslade un 100% en y para que se posicione en la parte inferior del elemento y un background color que sea negro y como tengo la transición y ya le di las custom properties de clickpad Bueno ya funcionará si yo paso el mouse sobre este elemento lo observas ya funciona el menú desplegable Ahora solo hay que darle estilos a los enlaces que tiene dentro y para eso primero voy a decirle que los elementos menú link inside se vean modificados Yo quiero darle un padding a cada elemento que esté dentro del submenú es decir a cada enlace de 30 píxeles arriba 100 píxeles a la derecha 30 hacia abajo y 20 hacia la izquierda y también quiero decirle que cuando pase el mouse sobre ese elemento quiero darle un background color 79 84 99 si paso a Chrome y paso el mouse bien pero me falta poner el hover Ahora sí perfecto se ve genial no ahora voy a pasar al html y después de terminar el ul voy a poner un div con la clase menú hamburger que tenga una imagen que referencie a assets y que sea menú y que tenga la clase menú img voy a pasar estilos y quiero decirle que el elemento con la clase menú hamburger tengo un height del 100% un display Flex un align item Center para centrarlo verticalmente y un padding de 15 píxeles hacia los lados y que cada que pase el mouse sobre ese elemento se ponga el cursor y a la imagen que está dentro quiero darle un display block con un wid de 60 píxeles o de 36 píxeles si paso a Chrome lo observas aquí está y cada que paso el mouse se pone el cursor Perfecto Bueno ahora voy a decirle que ese elemento no se vea con un display Non porque solamente lo voy a ocupar cuando pase haos a dispositivos móviles y lo que voy a hacer es inspeccionar elemento y voy a poner la consola en la parte lateral derecha voy a hacer un poco más de zoom y voy a activar el toggle device toolbar que nos permite visualizar los elementos como si estuviéramos en dispositivos móviles exactamente de esta manera y el breakpoint será en 800 y bien lo que yo quiero hacer es crear un media query cuando estemos en 800 píxeles es decir cuando el viewport mida un tamaño mínimo de 800 píxeles hacia abajo Yo quiero cambiar el diseño de la página lo primero que quiero hacer es que el menú hamburguesa tengo un display Flex y si yo paso a Chrome lo observas ya se puede ver el menú hamburguesa ahora también quiero que menú links que es el menú principal tengo un position fixed para que salga del flujo un Max wid de 400 píxeles pero un wid del 100% que solamente se aplicará cuando el ancho sea menor a 400 píxeles un top de 70 píxeles un right en cero para que se ponga a la derecha y un bottom en cero para que abarque el 100 de height desde los 70 píxeles un baron color que sea negro y un overflow en y que sea automático si en algún punto el contenido del menú es más grande que el alto se va a crear un scroll Y si yo paso a Chrome se ve de esta manera Bueno ahora quiero decirle que tenga un display grid y que tenga un grid auto Rose del Max content y si quieres aprender css Como nadie tienes mi curso que te voy a dejar en el comentario fijado con un superdescuento Y si yo paso a Chrome ya quedaría de esta forma ahora lo que voy a hacer es que el elemento menú link le voy a dar un padding de 25 píxeles arriba y cero hacia los lados con un padding left de 30 píxeles un display Flex y un height auto que si recuerdas tenía el height del 100% si yo paso a Chrome bien se vería de esta manera Aunque me parece que ya tenía el display Flex Así que solamente se lo voy a quitar y voy a pasar a Chrome perfecto ahora el elemento menú Arrow que es la flecha que está dentro de menú link como su padre que es menu link tiene un display Flex yo puedo darle un margin left auto y lo mandará hacia la derecha pero con un margin right de dos píxeles o de 20 píxeles para que no se pegue al borde exactamente de esta manera lo observas se está viendo más o menos ahora al elemento menú nesting voy a darle un display grid que si recuerdas menú nest es el submenú que está dentro del ul y voy a darle un position un set para que lo regrese a su valor original y es porque ya no quiero que esté posicionado absolutamente a su padre voy a darle un wid del 100% un transform con un Translate en y de cero que si recuerdas lo tenía al 50% Y por último al elemento menú link inside voy a darle un wiit del 90 por y un margin left auto para que lo mande hacia la derecha y un Border left de un Pixel Sólido y del color que usamos Cuando hacemos hover que es este si yo paso a Chrome se vería de esta manera que tengo que pasar el Mouse o dar click al elemento porque como estoy adaptando a dispositivos móviles un click es igual a hover si lo observas se vería de esta manera y bueno al elemento con la clase menú item le voy a decir que la variable o la custom property clip tenga un valor de cer0 para que ya no tenga que dar click para que se muestren los elementos si te das cuenta tengo un problema porque no me deja Mostrar Mostrar el último elemento pero realmente se soluciona cuando hagamos el acordeón o el efecto acordeón con javascript porque aunque se oculte estos elementos son temporales porque tenemos un efecto acordeón que se cierra y se abre y no creo que sea necesario que se muestre ese elemento mientras estos elementos están abiertos Si queremos ver el otro elemento tendríamos que cerrarlos y lo primero que voy a hacer es aquí en menú item darle un overflow que sea hidden y pasar a menú nesting y darle un height en cero además de una transición para la propiedad height de punto 3 segundos y si yo paso a Chrome lo observas al poner el overflow hidden en menú item que es el ul y además Al submenú que está dentro de su darle un he de cero ahora se oculta Y como te dije no hay problema porque se muestra contact Ahora sí pasemos a javascript y para eso voy a pasar aquí a app.js y voy a limitar el alcance de las variables creando una función que se ejecuta a sí misma de esta manera estamos generando un scope y voy a crear una constante que se llame list l elements y que obtenga a todos los elementos que tengan la clase menú item pero menú item show que si recuerdas son todos los elementos que tienen un submenú después voy a crear otra variable que se llame list y que obtenga al elemento con la clase menú links que si pasamos al html es este elemento es todo S Y por último voy a crear una variable que obtenga al elemento con la clase menú hamburger Y si te das cuenta aquí ponemos query selector all porque va a obtener a todos los elementos pero aquí solamente query selector porque solo obtendremos a un solo elemento después voy a crear una función que se llama add click que es una función flecha y que a todos los elementos que trajimos aquí los pasemos por un for each que it teremos a cada elemento y le voy a dar un conso lock para observar si está funcionando ahora si paso a Chrome y paso a la consola Me parece que no está funcionando porque no he llamado a la función voy a llamarla aquí funcionó se puso dos veces estoy dentro y efectivamente solamente hay dos menús desplegables ahora lo que voy a hacer es que a cada elemento voy a darle un evento que cuando yo de clic a ese elemento yo quiero que se ejecute una función y lo primero que quiero hacer en esta función Es que yo ya obtuve a todos los elementos con esta clase es decir obtuve a este elemento si yo pongo un console lock de el elemento y yo paso a Chrome no se muestra porque debo dar clic a un elemento Ahora sí lo observas me está arrojando el elemento que yo acabo de seleccionar pero solamente pasa para este elemento y para este elemento si te das cuenta es todo el Li pero yo quiero obtener a su hijo que se llama menú nesting y para eso voy a decirle que Quiero obtener a su hijo que está en la posición uno y si yo paso a Chrome tenemos dos hijos el primero y el segundo pero en programación contamos desde el cero Así que el elemento uno realmente es el Segundo si yo paso a Chrome y selecciono a este elemento ahora sí me da al elemento con la clase menú nesting y ahora lo que haré es asignarlo en una variable que se llame por ejemplo submenú y que contenga a este elemento después lo que voy a hacer es que el elemento actual que estamos seleccionando que si recuerdas es menú item exactamente este elemento voy a agregarle o quitarle una clase y esto lo haré con classlist toggle y le voy a agregar la clase menú item active voy a pasar al css y aquí la voy a agregar a menú item active Y si recuerdas el elemento menú Arrow tiene la variable transform Bueno yo quiero modificarla porque una vez que yo de clic a ese elemento yo quiero que se muestre un estado activo y le pondré un rotate en cero y crearé una variable background subir un poco y tomar este background y lo pegaré Aquí y ahora quiero decirle que todos los elementos que tengan la clase menú item show tendrán un background color con la custom property background esto hará que se muestre activo si yo paso a Chrome y selecciono este elemento lo observas rotamos la flecha y además se pone un background si yo selecciono a este otro elemento lo mismo es el estado activo y esto funciona gracias a toggle ahora lo que voy a hacer es definir otra variable que se llame hide y que esté en cero para después poner un If pero antes voy a mandar a consola la propiedad menú clin height lo que hace esta propiedad es devolvernos la altura de un elemento si yo paso a Chrome y doy clic en este elemento me dice que la altura es de 70 Bueno yo quiero obtener la altura del elemento con la clase submenú que si recuerdas es este elemento Ahora sí voy a pasar a Chrome y voy a obtenerla lo observas actualmente es de cero entonces voy a preguntarle si el submenú tiene una altura que es igual a cer Entonces yo quiero que el alto sea igual a la altura mínima del submenú a qué me refiero con la altura mínima bueno la altura mínima para que exista el elemento y esto lo voy a obtener con scroll height posteriormente voy a decirle que el submenú agregue a su Estilo un height que es sea igual a unas template literals que son comillas pero a la inversa voy a poner signo de dólar y la variable height además de píxeles y esto lo que hace es preguntar si la altura del elemento es igual a o Entonces quiero que la variable altura tenga la altura mínima para que el elemento exista y después voy a agregarle la altura con esta línea de código pero si no entra entonces la altura es cero y significa que quiero cerrarlo si yo paso a Chrome e intento abrirlo lo observas gracias a la animación esto es posible y aquí funciona ya el scroll auto lo observas Y si te das cuenta me está imprimiendo los valores voy a quitar el console lock y ya tendríamos básicamente todo hecho pero mente no Qué pasaría si yo abro un elemento y hago más grande esto lo observas se rompe Bueno vamos a arreglarlo para eso voy a agregar un evento a window que cada que la ventana sufra un cambio en el viewport es decir cuando hagamos esto Quiero llamar a una función y yo quiero preguntarle que si el ancho del el viewport es mayor a 800 Entonces yo quiero hacer algo pero si no es mayor a 800 Yo quiero ejecutar la función ad click Pero esto va dentro de la función que usamos para limitar el scope y exactamente así quedaría por lo que si yo paso a Chrome y hago esto un poco más grande lo observas se sigue ejecutando Pero lo que quiero hacer es también poner un fallback que no se ejecute cuando la ventana se haga más grande o pequeña porque puede ser pequeña y no se estará cumpliendo esta condición Entonces quiero copiar este If y voy a ponerle la función ad click simplemente para prevenir errores pero qué pasa si la ventana es mayor a 8 Bueno voy a crear otra función y voy a borrar esto mientras y voy a comentar esto date cuenta que si yo actualizo no se muestra el menú Por qué bueno porque no hice esto es decir hacer más grande o pequeño el viewport ahora sí funciona pero este error es el que podemos tener entonces para eso es este If ahora Ahora sí voy a crear una constante que se llame delete Style height que se igual a una función de flecha y que itere en todos los elementos que tengan la clase menú item show voy a poner un for each y lo que quiero hacer es poner un If que si elemento con el hijo que está en la posición uno es exactamente este elemento tiene atributo Style entonces lo que quiero hacer es eliminar ese atributo voy a copiar esto y si esto es cierto si ese elemento tiene el atributo Style Entonces quiero remover el atributo Style y además si esto pasa también quiero que ese elemento ya no tenga la clase que le dimos aquí que es menú item active que si recuerdas también teníamos errores con ella si yo guardo no va a pasar nada porque aún no la mando a llamar pero si yo doy clic en este elemento no pasa nada Y por qué no pasa nada bueno porque debía ser un resize Entonces no hemos solucionado el problema y es porque aquí me equivoqué en la condicional Quiero preguntarle si el viewport hablando de ancho es menor o igual 800 Entonces quiero que se ejecute la función y ahora sí lo observas bueno si yo doy clic a este elemento y paso a inspeccionar el html voy a poder ver que al elemento que seleccioné que es menú item y que dentro tiene este ul vas a poder observar que tiene el atributo Style Entonces yo quiero que si tiene el atributo Style quiero que se lo quites esto hará que se esconda otra vez lo observas Esto es lo que queremos hacer y para eso ya creé la función ahora Solamente voy a llamarla y si yo paso a Chrome y abro los dos menús y hago esto más grande se muestra actualmente este menú porque un click es igual a la sudoc clase hover cuando estamos inspeccionando en dispositivos móviles pero realmente está todo muy bien lo observas no hay ningún error Aunque yo deje esto activo y hago esto un poco más grande lo observas no hay ningún error todo está perfectamente bien Ahora solamente es cuestión de mostrar y de quitar el menú para eso al elemento menú links voy a modificarlo y voy a ponerle un transform con un Translate en x del 100% y yo quiero decirle exactamente aquí que el elemento menú tenga un ad even listener que cuando yo le dé clic a ese elemento yo quiero que se modifique el elemento list que está seleccionando a menú links que es este elemento y menú es el menú hamburguesa Bueno yo quiero que el elemento list se le agregue o se le quite una clase dependiendo Si la tiene o no la tiene esto lo haremos con toggle y le daré la clase menu links show voy a guardar y aquí voy a crear un poco más abajo a punto menú links show y quiero decirle que cuando un elemento tenga esta clase tengo un transform un set para que vuelva a la propiedad original y un wid del 100% si yo paso a Chrome y muestro el menú y lo cierro lo observas funciona perfectamente todo está funcionando a la perfección genial no bastante genial y se me acaba de romper Pero creo que es un problema de Chrome y no el error no era de Chrome sino mío como casi cualquier error de un programador y el error estaba en que aquí le puse un Translate del 100% lo cual no debía ser si paso a Chrome lo observas era el problema voy a volver a inspeccionar y ahora sí Todo está perfecto no hay ningún problema solo amente que si yo dejo abierto y después vuelvo a un tamaño menor de 800 sigue abierto si yo quiero quitar eso Bueno es muy fácil voy a pasar al app.js y aquí cada que hacemos el resize Voy a preguntarle si la lista contiene una clase qué clase bueno la clase menu links Show Y si la contiene Entonces yo quiero que esa clase se vea removida y cómo se llama la clase se llama Exactamente igual Ahora sí si paso a Chrome y si dejo esto abierto y lo hago más grande y después más pequeño se sigue mostrando voy a imprimir en consola esto y me dice que es falso que no la contiene quizá escribí mal la clase pero me parece que sí la tiene si yo corto esto y paso a la consola y hago esto más grande o más pequeño bien me parece que no la tiene pero ahora sí la vuelvo a tener aunque ya no se muestra ni se quita el menú y me parece que es porque había quitado la clase menú links show perdón pero fue detrás de cámara viendo Cuál era el error Ahora sí tiene que funcionar y ahora sí ya funciona si hago esto más grande y después más pequeño lo observas se cierra solo y también ya muestra que está la clase aquí menú links show si yo paso a visual Studio code qué me faltaba bueno como te dije quité unas cosas detrás de cámaras pero realmente todo estaba bien solamente que se me olvidó volver a poner menú links show y el transform Pero ahora sí Todo está muy bien aunque creo que no habíamos puesto ese transform porque sí nos hacía falta en menú links sin modificar directamente aquí en el media query un transform con un Translate NX del 100% y esto era para que una vez que se agregara la clase menú links show el transform volviera a la propiedad original de esta manera si yo paso a Chrome Ahora sí estaría perfecto lo único que haré ahora es pasar aquí a la app y Borrar esto Ahora sí tendríamos todo hecho para crear un menú adaptable a dispositivos móviles y que además sea desplegable exactamente de esta manera se ve plstico no vamos a empezar a crear el slider y para eso he creado una carpeta que se llama slider que tiene una carpeta dentro que se llama assets aquí tengo cinco archivos tres imágenes que tomé de un splash.com y dos elementos sug lo que debes de hacer para obtenerlos es ir a unsplash.com y Buscar por ejemplo imágenes de rostros y aquí vas a obtener los que más te gusten después voy a pasar a Box icons voy a buscar por ejemplo una imagen O un icono svg sobre flechas voy a tomar por ejemplo este voy a copiar su código sug y voy a pasar a visual Studio code y aquí en la carpeta assets vas a poner por ejemplo arrow.svg y vas a pegar aquí el código y ahora por ejemplo si yo aquí pongo una imagen referencie a assets y al archivo Arrow lo observas Aquí está este icono bueno Voy a proceder a borrar el archivo Y por último voy a pasar a Google fonts y voy a tomar la Fuente rollaway con un peso de 300 y de 400 e igual de 700 voy a copiar este import y voy a pegarlo exactamente Aquí voy a seleccionar a Body y voy a ponerle este font family ahora si yo paso a Chrome no pasa nada y es porque no hemos escrito nada también tengo en la carpeta un archivo estilos.css que ya estábamos trabajando con él y un archivo slider.js que referencia exactamente antes de terminar el body ahora si yo creo una sección con la clase slider y pongo un h1 que diga hola soy un slider Y si yo paso a Chrome perfecto ya se aplicó la Fuente ahora lo que voy a hacer es crear un dip con la clase slider container y la clase container Dentro de este slider container voy a poner un icono que referencie a assets y que sea left Arrow voy a dar una clase que sea slider Arrow y un ID que sea before voy a copiar esto y voy a referenciar a write Arrow y voy a cambiar el id para que sea after después de la primera imagen voy a poner una sección con la clase slider Body y un atributo Data ID que sea uno Dentro de este elemento voy a poner un h2 con la clase subtitle y la leyenda Hola Mi nombre es Jordan Alexander después voy a poner un párrafo con la clase slider review Aquí voy a poner un testimonio y lo que puedo poner por ejemplo es un Loren de 15 voy a presionar al Z y después de esto voy a poner una etiqueta fig con la clase slider picture y dentro irá una imagen que referencie a assets y que sea picture 1 y la clase slider img pero estos elementos los voy a poner en un dip que se llame slider text tendríamos esto si yo paso a Chrome se vería de esta manera Bueno voy a copiar esto dos veces al segundo elemento le voy a poner un Data ID dos y al tercer elemento un Data ID 3 y aquí por ejemplo voy a cambiar el nombre a que sea Alejandra por ejemplo Pérez y aquí otro nombre que sea por ejemplo Pablo González y en el tercer elemento voy a poner un Loren por ejemplo de 18 y voy a referenciar a la segunda imagen y al segundo elemento voy a poner un lorem de 19 y referenciar a la segunda imagen y aquí era a la tercera pero al primer elemento le voy a poner la clase slider Body show que básicamente es el modificador si yo paso a Chrome Bueno vas a ver esto ahora empezaremos con la magia de css y para eso voy a empezar modificando al container al elemento con la clase container Voy a darle un wid del 90 por un min height del simp for height un Max wid de 1200 píxeles y un margin auto hacia los lados para centrar al contenedor y que todo lo que salga de este contenedor se esconda si pasa a Chrome bueno se vería de esta manera ya centró todo el contenido ahora al elemento con la clase slider que es la sección principal voy a poner un background color f2 f2 f2 y un padding de 40 píxeles arriba y abajo y cero hacia los lados y al elemento slider container que comparte la clase container Voy a decirle que tengo un display grid para empezar a hacer magia con él y un grid template columns donde tengamos tres columnas la primera de 50 píxeles la segunda de una y la tercera de 50 píxeles con eso lo que haremos es poner una flecha aquí el contenido en medio y otra flecha aquí y para eso a los elementos con la clase slider Body voy a decirles que todos los elementos con esta clase empiecen en la columna o en la línea dos de columna y terminen en la línea tres y en fila que empiecen en la línea uno y terminen en la dos si pasa lo observas ahora se amontonan y todos los elementos con la clase slider Body están en la misma celda ahora voy a decirle que todos los elementos tengan una opacidad de cero pero el elemento que tiene la clase slider Body con el modificador show tengo un opacity de un Y si yo paso a Chrome lo observas solamente se va a ver este elemento pero no puedo seleccionarlo porque hay Element encima de este para seleccionarlo lo que voy a hacer es que le diré que todos los elementos que tengan la clase slider Body voy a darles un Pointer events Non para que no lo reconozca el Mouse pero a este elemento voy a darle un Pointer events un set para mandarlo al principio Ahora sí puedo seleccionarlo lo observas voy a regresar a slider container y voy a decirle que todos los elementos se centren verticalmente y que hay un espaciado de un m y a todos los elementos que tengan la clase slider Body voy a darles un display grid un baran color f2 f2 f2 y que tengan dos columnas la primera de una fracción y la segunda del máximo contenido y que todo se Centre verticalmente además que aplique una transición a la opacidad de 1.5 segundos si paso a Chrome Bueno lo observas se acaba de centrar ahora lo que voy a hacer es primero modificar a la imagen que tiene la clase slider img que es esta imagen Bueno voy a decirle que tengo un wid de 230 píxeles y un height de 230 píxeles un bord radius del 50% y un object fit cover para que la imagen no se distorsione además de un display block y un margin auto para centrarla horizontalmente Pero esto Solo pasará cuando estemos adaptando a dispositivos móviles si yo paso a Chrome perfecto va quedando lo observas ahora lo que haré es que al contenedor slider text que es el contenedor del h2 y del párrafo es exactamente este elemento voy a dar un Max o un ancho máximo de 600 píxeles para que no mida más que este y al h2 con la clase subtitle Voy a darle un font size de 2.5 Rem y un margin bottom de 20 píxeles y al elemento slider review que es el párrafo voy a darle un font weight de 300 un font size de 20 píxeles y un Line height de 1.7 Y si paso a Chrome no apli los estilos al párrafo vamos a ver por qué quizás no puse esta clase y en efecto la escribí mal voy a cambiarlo y ahora sí debe funcionar exactamente bien y ahora lo que voy a hacer es que el elemento slider Arrow que son las imágenes que tienen las flechas voy a darles un cursor Pointer para que cada que yo pase el mouse aparezca la manita exactamente de esta manera y también un wid del 90 por. si yo paso a Chrome y abro los inspectores de css grid aquí en layout y muestro a slider container yo quiero que este elemento se pase a la orilla y para eso voy a seleccionar a este elemento con nth of type y voy a decirle que quiero seleccionar al segundo elemento de este tipo con la clase slider Arrow y voy a darle un justify self end si yo paso a Chrome lo observas Ahora sí están pegados a la orilla y para motivarte vamos a ver de una vez la magia con javascript voy a pasar al archivo slider.js recuerda debes referenciarlo exactamente aquí y para empezar voy a fuscar mi código y esto para qué bueno Porque si yo quiero crear más archivos o estoy ocupando un archivo externo de javascript puede que ocupe clases similares y de esta manera solamente estarán en este ámbito de la función voy a crear una constante que se llame slider o sliders en plural y voy a decirle que Quiero obtener todos los elementos que correspondan o que tengan la clase sliders Body lo que estoy haciendo aquí es obtener todos los elementos con la clase slider body si yo lo imprimo en la consola paso a Chrome y abro la consola voy a hacerla mucho más grande me dice que tengo una lista de nodos que son tres elementos exactamente los tres que yo he creado pero yo no quiero que sea una lista de nodos y para eso voy a encerrarlo entre corchetes y voy a poner tres puntos para convertirlo en una Ray Y si paso a la consola lo observas Aquí está son tres elementos que están en un arr ahora también quiero obtener a los iconos de las flechas y para eso voy a crear una variable que se llame Arrow next y que obtenga al elemento con el ID next y Para eso vas a poner un document query selector no query selector all sino solamente query selector Y también voy a obtener al elemento Arrow before y para eso Quiero obtener al elemento con el ID before y voy a declarar una variable que se llame value estará vacía ahora voy a decirle que cuando yo de click al elemento Arrow next yo quiero que llame una función que será la función change position y le daré el valor de uno voy a copiar esto y quiero que lo mismo aplique para el elemento Arrow before que cada que yo le dé click a cualquiera de estos dos elementos llame la función change position Pero esta vez con el valor de -1 porque cuando yo de click al elemento Arrow next que es este elemento quiero que se sume y cuando Dey clic a este elemento quiero que se reste de tal manera que si yo creo la función change position y tomo el parámetro de change y lo imprimo por consola cada que yo de clic a este elemento aparecerá un uno pero no lo toma por qu Bueno al parecer no existe next voy a pasar al html y tiene el ID before debe ser next y este elemento no perdón este si debe ser before y este debe ser after Entonces es after o voy a ponerle next mejor y aquí también next Ahora sí si doy clic aquí se pone uno y si doy aquí se pone -1 perfecto Ahora cuando yo entre a esta función voy a crear una constante que se llame current Element para obtener el elemento actual en el que estamos y para eso si te das cuenta el primer elemento tiene la clase slider Body show Bueno yo quiero obtener al elemento que tenga esa clase y es exactamente esta la voy a copiar y Quiero obtener este elemento porque me indicará que es el elemento actual pero yo quiero obtener algo y es su Data ID que si te das cuenta lo vamos numerando aquí tiene uno aquí dos aquí dos Y aquí tres Bueno voy a obtener el dato set que es ID pero yo quiero convertir todo esto a un entero exactamente de esta manera ahora si yo pongo console loog a current Element y presiono cualquier flecha Bueno sí lo imprime Lo que pasa que estamos imprimiendo el dataset que en este momento es uno ahora lo que tengo que hacer es que la variable value voy a decirle que sea igual a current Element y que la variable value se le sume el parámetro change esto lo que hará es irlo sumando o irlo restando por ejemplo el valor del dataset actual es 1 si yo oprimo esta flecha le va a restar uno por lo que ahora se debe imprimir un cero y para eso voy a poner un console loog de value Y si doy clic aquí se debe imprimir un cer0 Y si doy aquí se debe imprimir un dos está funcionando Ahora quiero poner una condicional Porque si es cero quiero regresar al último valor de los sliders es decir si estamos en este primer slider que es este y yo presiono retroceder no quiero que me mande al anterior porque ya no hay anterior sino que me mande al último y si estoy en el último quiero que el siguiente sea el primero y esto lo haré con un If Bueno voy a poner un If y le voy a decir que si el valor es igual a 0 se ejecute pero que también si el valor es igual al número de sliders que hay + 1 por qué + 1 porque contamos desde el cero y value es el valor de los Data ID Por ende siempre habrá un número de más porque contamos desde cero solamente debes de poner aquí el +1 y ya Bueno una vez que pase esto yo quiero que ahora value cambie de valor que si value es igual a 0 entonces significa que quiero que su valor cambie y ahora tenga el valor de los elementos existentes pero que si es diferente a cer0 significa que estamos en el último valor Entonces quiero que vaya al primer elemento quizá esto no lo comprendas pero voy a poner un console lock y que me diga el valor de sliders pun length si yo paso a Chrome y presiono cualquier flecha me dice que sliders length es igual a 3 porque tenemos tres elementos que tienen la clase slider Body exactamente esta clase así que me equivoqué no puse el + 1 porque se cuenta desde cer0 puse el +1 porque en el caso de que estemos en el último elemento y sumamos o presionamos este elemento se va a sumar un número pero no es este elemento es este es decir cuando se suma un número por ejemplo si estamos en la posición tres se sumará uno pero si ese límite ya no hay un cuatro pero se suma Entonces si el valor es igual al total de elementos + 1 significa que estamos rebasando y si esto pasa bueno lo que haremos es reasignar un valor para value que si value es igual a 0 significa que estaba en la posición uno pero restamos un número porque queremos retroceder Entonces si esto pasa el valor en vez de ser cer0 será el valor de los elementos que tenemos que en este caso son tres Por ende vamos a pasar al elemento con el Data ID que sea 3 pero si es lo contrario y estábamos en el TR y sumamos uno bueno significa que no hay cuatro entonces va a regresar al primero y hacer esto de esta manera hará Dinámico el slider es decir puedes agregar tantos slider Body como tú quieras y no se romperá el código ahora voy a obtener al elemento que queremos cambiar que es value Pero ahora sí contamos desde el cero entonces voy a poner un men1 y voy a tomar sus clases y voy a agregar la clase con toggle y que se la clase slider Body show lo que hace toggle básicamente es si el elemento tiene la clase slider Body show se la quita pero si no la tiene se la agrega Y si yo paso a Chrome y le doy clic en siguiente y si doy clic atrás lo observas si te das cuenta ya no se muestra el primer elemento Y eso es muy simple es porque debo de quitarle esta clase antes de agregarle la clase al siguiente o al anterior elemento y para eso voy a obtener al elemento que es el elemento actual pero como contamos desde cer0 voy a poner un -1 Y si paso a Chrome y doy clic en ir hacia atrás Me llevará al elemento o al slider que es el último y que se llama Pablo González bueno si voy hacia atrás me lleva a Pablo González si voy hacia enfrente me lleva a Jordan Alexander si sigo hacia delante me lleva hacia Alejandra Pérez y después hacia Pablo González te voy a explicar el código una vez más primero obtenemos todos los sliders después obtenemos el botón de siguiente después el botón de ir hacia atrás y creamos una variable que se llame value ahora voy a agregar un evento a la imagen de siguiente y hacia atrás que cada que yo de clic a uno de esos dos elementos voy a llamar a la variable change position pero si doy clic en la flecha de siguiente voy a agregar un uno pero si doy la flecha de ir hacia atrás Voy a agregar un -1 después en esta función voy a obtener el elemento actual que el elemento actual es el que tiene la clase slider Body show y voy a obtener su Data Z ID que cada elemento tiene uno este es uno Este es dos y este es tres si tú quisieras agregar otro elemento vas a copiar exactamente esto y le vas a poner por ejemplo Data ID número 4 y puedes poner aquí el título Hola Mi nombre es Pablo González 4 y puedes poner la primera imagen si yo paso a Chrome y doy click en ir hacia atrás lo observas cambia me lleva al cuarto y cómo hacemos que esto ha Dinámico Bueno lo hacemos porque una vez que tenemos al elemento actual voy a decirle que la variable value sea igual a ese elemento y que al elemento actual o al valor del dataset actual le sumes lo que le pasamos por Arrow next o Arrow before Porque si damos clic en siguiente se sumará un elemento pero si damos clic en ir hacia atrás se restará por ejemplo tenemos el valor de uno pero si si sumamos uno ahora será igual a 2 pero por ejemplo si restamos uno será igual a 0 Y si es igual a 0 o es igual al límite de sliders yo quiero que se ejecute esto y por qué pongo sliders length + 1 porque sliders length te devuelve el número de elementos que en este caso ya es cuatro pero al sumarle uno ahora es 5 por lo que si value es igual a 5 debo de sumarle a sliders length un + 1 para que entre la condicional y después reasignar el valor para value posteriormente vas a quitar la clase slider Body show del elemento actual y vas a agregarla al elemento siguiente y eso hará que pase esto perfecto no pero la magia radica en el css Por qué Porque todo los elementos van a tener una opacidad de Cero y un Pointer events Non y ya Le agregué la transición por eso es que ya se animaba y los elementos que tengan la clase slider Body show van a tener un opacidad de uno por lo que se van a mostrar y todos los eventos del mouse se van a reconocer con todo eso hacemos esto genial no Bueno ahora voy a adaptar a dispositivos móviles voy a bajar un poco y yo quiero decirle que el elemento cuando esté en un ancho máximo de 400 25 píxeles slider container se vea modificado pero mejor que este sea el segundo media query voy a ponerlo para 760 en primera quiero que la imagen cambie y para eso voy a pasar a Chrome voy a inspeccionar elemento y vamos a mostrarlo en un tamaño de 768 lo observas se empieza a apretar Bueno a los 768 píxeles yo quiero que slider img que es la imagen tenga un wid de 210 píxeles y un height igual pero que su padre que es slider Body que si recuerdas es un display grid quiero decirle que ahora solamente tenga una fila tenga una columna y que tenga dos filas la primera de su máximo contenido y la segunda que ocupe el espacio Sobrante si yo paso a Chrome perfecto pero quiero que el contenedor de la imagen que es el grid item y que tiene la clase slider picture vaya de la línea uno en filas a la dos y pasará exactamente esto Ahora cuando lleguemos a un tamaño de 425 píxeles Yo quiero empezar a modificar otra vez a este elemento voy a copiar esto y a los 42 píxeles yo quiero que slider container cambie En sus columnas que la primera sea de 25 píxeles la segunda de una fracción y la tercera de 25 píxeles que si recuerdas son las flechas que se deben hacer mucho más pequeñas bien pero las flechas tienen una clase que se llama slider Arrow y voy a dar ahora el wid del 100% y a la imagen voy a darle un ancho y un alto de 180 píxeles por último al subtítulo o a la clase subtitle Voy a darle un font size de dos Rem y un margin bottom de 15 píxeles y al elemento slider review voy a dar un font size de un Rem y un Line height de 1.6 si paso a Chrome lo observas es adaptable ahora solamente falta que le dé un Gap en slider Body un Gap de un m ahora sí tenemos un slider totalmente adaptable y funcional con html css y javascript sin utilizar ninguna librería o framework vamos a comenzar a crear esta landing page solamente con css grid sin utilizar otra técnica como position O flexbox solamente css grid y para eso he creado una carpeta que se llama landing page css grid que tiene tres elementos el primer elemento es un archivo html con la estructura básica de un documento html Además de que enlaza los estilos que es otro archivo pero en este caso es un archivo css que si te das cuenta ya he importado una fuente para importar una fuente vas a ir a Google fonts Y en este caso voy a tomar la Fuente urbanist con el peso de 300 400 500 y 700 vas a ir a la parte de import vas a copiar este import y lo vas a pegar en la parte superior de tu hoja de estilos además de copiar esta regla y pegarla en el selector Body para que todos los elementos hereden esta fuente después voy a resetear los estilos con un margin de cero un padding de Cero y un Box sizing Border Box y antes de continuar voy a pasar a una página que se llama undraw.co undraw.co es un banco de ilustraciones gratuitas que podemos utilizar en nuestros proyectos voy a buscar una ilustración por ejemplo esta que es de Gaming Pero antes voy a personalizar la Ilustración voy a ir a la parte superior derecha y pondré un color blanco si lo observas las ilustraciones se personalizan en base a ese color voy a tomar la Ilustración y voy a descargarla como svg porque en visual Studio code tengo una carpeta que se llama images ahí voy a poner la Ilustración svg que es exactamente esta después voy a pasar a Box icons y voy a buscar a un menú voy a tomar este menú voy a copiar su código svg voy a pasar a visual Studio code y voy a crear un nuevo archivo en images que se llame menu.svg voy a pegar este menú voy a presionar al Z y aquí voy a cambiar El Fil por un color blanco Ahora sí voy a cerrar la barra lateral y voy a abrir Live server en este proyecto para poder ver los cambios en tiempo real ahora si estamos listos para empezar a crear esta landing page con css grid ahora Voy a proceder a crear el html todo esto irá en una etiqueta header que será la sección de Hero dentro de esta sección voy a crear un menú con la etiqueta nap y la clase nap pero este menú te endrá un container para contener Su contenido valga la redundancia voy a poner un h2 con la clase nap logo y pondré en este caso mi nombre Jordan Alex que simulará mi logo después un ul con la clase nap list y dentro voy a poner un li con la clase nap item que tendrá un elemento a con la clase nap link y la leyenda inicio voy a copiar esto dos veces y pondré aquí la leyenda acerca de y también la leyenda contacto después una etiqueta figure con la clase nap menú que contendrá una imagen que referencie a la carpeta images y se llame menu.svg Yo te recomiendo poner el alt pero yo no lo voy a poner por cuestiones de tiempo voy a poner una clase que sea nap icon y si yo paso a Chrome ya tendría esto Ahora voy a pasar a terminar la parte principal de Hero voy a poner una sección que tenga la clase Hero container o Hero Main y también le daré la clase container para que contenga el contenido valga la redundancia ahora voy a crear un dip con la clase Hero text un h1 con la clase Hero title y la leyenda Hello my name is Jordan después un párrafo con la clase Hero title o Hero subtitle y la leyenda Let Me help you grow your Business with css grid es como una broma no déjame crecer tu negocio con css grid después un elemento a que será una llamada a la acción y tendrá la clase Hero c y la leyenda entra ahora o mejor join Us y se vería de esta manera por último voy a agregar abajo del dip una etiqueta figure con la clase Hero picture y una imagen que referencie a images y sea illustration svg con la clase Hero img después voy a pasar esta página para generar wes te la voy a dejar en la descripción de este video Voy a generar por ejemplo esta we que se ve de esta manera o un poco más alta voy a copiar su código que me da aquí su código y voy a pegarlo exactamente abajo de la sección voy a presionar al Z y le voy a poner un color blanco y una clase que sea giro waves Y si yo paso a Chrome ahora sí estamos listos para para crear esta landing page con css grid Bueno ahora lo que voy a hacer es pasar a una página que se llama web gradients y voy a buscar un gradiente en mi caso es el gradiente 123 que es este voy a copiar el css y voy a decirle a la sección Hero que tenga ese gradiente si paso a Chrome perfecto ya está el gradiente y también el efecto wave pero quiero decirle que todos los elementos dentro de Hero tengan un color blanco y que también todos los elementos con la clase container tengan un wid de 90 por un ancho máximo de 1200 píxeles y voy a centrar ese contenedor Y además que todo lo que salga del contenedor se esconda y se vería de esta manera la wape no se esconde ni se contiene porque está fuera de los contenedores que el primer contenedor es este y el segundo es este después a Hero voy a darle un display grid y un grid template columns o un grid template rows para crear filas la primera del máximo contenido y la segunda va a tomar el espacio Sobrante y en base a esas filas voy a crear áreas la primera área que representa a la primera fila se llamará nap y la segunda área se llamará content este puede ser el nombre que tú quieras si paso a Chrome Aparentemente No pasa nada pero si inspeccion y yo paso a lout y muestro la grid la primera grid se llama nap y la segunda content al definirle Max content la primera fila solamente ocupa su máximo contenido vamos a pasar a trabajar con nap Bueno a nap voy a darle igual un display grid que si yo paso a Chrome y muestro a la grid de nap que es esta Aparentemente no hay ningún cambio yo quiero que se pongan a las esquinas las columnas que se vayan a crear y para eso yo quiero decirle que el Flow de grid sea columnas exactamente de esta manera voy a quitar el inspector de grid y aquí está el menú antes de continuar te quiero decir que si no sabes css grid puedes ir a mi curso aquí en YouTube donde en menos de media hora vas a aprender css grid ahora que ya tengo a este elemento voy a ponerle por ejemplo un color negro y voy a dejar de mostrar sus tamaños aquí aquí está la grid Bueno yo quiero agregar un Gap de un m entre las columnas o las filas para prevenir que se junten y además de agregar el Gap de un m voy a decirle que se centren verticalmente y que tengan un height de 90 píxeles si paso a Chrome se vería de esta manera voy a seguir mostrando el inspector de grid Pero ahora al elemento nap menú voy a darle un display Non y ahora desaparece de la grid de nap Bueno también a los enlaces napl link voy a darles un color blanco un text decoration on y a nap list que es el contenedor de los enlaces voy a darle un list Style que sea Non un display grid para activar la grid en los enlaces y yo quiero que se pongan uno al lado del otro Bueno voy a poner grid autoflow en column y un Gap de un m esto hará que se pongan un elemento al lado del otro y además de que tengan un m que ese m Será su espaciador en vez de usar márgenes ahora al logo que se llama nap logo voy a darle un font size de 1.8 Rem y un font weight de 300 esto hará que se vea de esta manera y ya hemos terminado la parte del header perdón no hemos terminado la parte del header hemos terminado la parte del nap quiero decirle a nap icon que es la imagen del icono del menú voy a darle un wid de 30 píxeles y ahora voy a pasar al elemento Hero Main que es la sección principal donde está la imagen y los textos y si recuerdas previamente en Hero habíamos creado dos áreas Bueno al elemento nap voy a darle el área de nap si yo paso a Chrome no pasa nada y si yo al elemento Hero Main le doy el área de content que si recuerdas es esta área tampoco pasa nada pero si al elemento que se llama Hero waves Yo igual le diera esa área de content ahora tendría dos elementos en la misma área y esto me servirá para siempre tener fijo a Hero waves exactamente en la parte inferior de la landing page para eso voy a decirle que tenga un align self para mandarlo hacia el final lo observas quedaría de esta manera sin usar position absolute ni position relative solamente con css grid podemos posicionar a uno o más elementos en la misma área o en las mismas celdas Ahora yo quiero que Hero Main que es exactamente esta parte tenga un display grid y que tenga un Gap de 2m si yo paso a Chrome y muestro la grid Aquí está el Gap y Ya se activó la grid bueno puedo hacer dos cosas crear columnas dinámicamente agregando grid template columns con un repeat autofit con la función min Max donde la columna mínima sea de 300 y si no pase a una fracción y Esto va a crear columnas dinámicamente por lo que si yo hago más pequeña la página lo observas se crean columnas dinámicamente lo puedes observar mejor si yo a Hero y mg le doy un wid del 100% Y si yo paso a Chrome y hago esto más pequeño lo observas lo que voy a hacer es que a Hero que es el contenedor de todo voy a darle un alto mínimo del 100 vi por height y también a Hero container voy a darle un padding bottom de 180 píxeles para que no se pegue a la wave si paso a Chrome y hago esto más pequeño lo observas es Dinámico pero en este caso no quiero eso así que simplemente voy a usar grid template columns creando dos columnas de una fracción para poder personalizarlo más y voy a centrar a todos los elementos verticalmente y se vería de esta manera y ahora quiero que Hero title tenga un font size de 2.6 Rem y un Leather spacing de dos píxeles para que haya espaciado entre las letras y también quiero que giro subtitle tengo un margin top de un Rem un margin bottom de 1.5 Rem y un font size de 1.5 Rem igual junto un font weight de 300 si pasa Chrome se vería de esta manera ahora lo que voy a hacer es crear el enlace para crear el enlace Yo quiero seleccionar a Hero cta le voy a dar un text decoration Non un color blanco un padding de 15 píxeles arriba y abajo y 60 hacia los lados con un borde de un píxel sólido además de un borde radius de se píxeles y un display inline block para que todo esto lo aplique exactamente de esta manera y le voy a dar un font weight de 500 Y por último voy a decirle que cuando pase el mouse sobre giro zta tengo un baron color que sea blanco y un color que sea 1e 3c 72 y una transición para el background color de punto 3 segundos y ahora si yo paso el mouse sobre este elemento lo observas perfecto No ya hemos terminado la landing page para un modelo de escritorio ahora voy a adaptarla a dispositivos móviles para eso voy a inspeccionar voy a activar el inspector de dispositivos móviles presionando aquí este icono y voy a pasar a un tamaño de 800 es el único breakpoint que yo voy a usar para que veas cómo se puede adaptar css de grid a dispositivos móviles que realmente es sumamente sencillo lo primero que voy a hacer es crear el breakpoint y decirle que a los 800 píxeles el elemento giro container tenga un grid template columns o un grid template rows porque ahora lo que quiero es que en vez de tener dos columnas primero tengamos solamente una columna y después Quiero crear dos filas del máximo contenido y si yo paso a Chrome no se ve ningún cambio y es porque no es Hero container es Hero Main Ahora sí tendría que haber algún cambio lo observas a partir de 800 cambia y yo quiero que la imagen se vea primero entonces voy a decirle a gir giro picture que tenga o que empiece desde la línea de filas número uno hasta la número dos y estoa que la imagen se vea primero pero si te das cuenta la imagen ocupa un gran tamaño entonces voy a decirle a giro img que tenga un ancho máximo de 500 píxeles que tenga un display block y que se entre a la imagen horizontalmente también quiero que todo lo que esté dentro de Hero Main se Centre al elemento punto nap list que es el contenedor de los enlaces tenga un display Non y que nap menú tengo un display block si paso a Chrome lo observas se centró la imagen y los textos y además ya está la ola y aparece el icono del menú si quieres adaptar este menú a dispositivos móviles te voy a dejar un video donde te enseño a crear un menú adaptable a dispositivos móviles con javascript como puedes observar diseñar con css grid es sumamente fácil y la verdad que se ve bastante genial y para empezar la creación del modal voy a comentarte que tendremos este template que te recomiendo descargar de mi github te voy a dejar el repositorio en la descripción de este video o si lo prefieres te voy a dejar el tutorial donde creo este template esto lo hago para agilizar y enfocarme solamente en el modal voy a pasar a visual Studio code y aquí tengo la carpeta y los archivos del template tenemos un header y el css de todo este header Bueno voy a pasar al final de este header aquí en Hero Y si te das cuenta tengo dos ilustraciones la cual es esta y una que usamos cuando pasamos a dispositivos móviles la observas es esta lo que voy hacer es pasar a visual Studio code pero antes voy a ir a manypixels y voy a buscar una ilustración que empiece con e y será esta ilustración voy a descargarla como svg y voy a moverla a visual Studio code y la voy a dejar aquí en la carpeta de images voy a ponerle el nombre de modal ahora en el archivo Index html vamos a empezar a crear el modal esto es independiente de todo el código Así que vas a poder crearlo sin tener este template vas a crear una etiqueta que sea una etiqueta section con la clase modal aquí dentro irá el modal Dentro de este modal Quiero poner un contenedor de este modal para limitar el contenido valga la redundancia voy a poner una imagen que referencie exactamente a la ilustra de modal voy a ponerle una clase que sea modal img después un h2 con la clase modal title y la leyenda Bienvenido al sitio y aquí puse mal modal ahora sí después un párrafo con la clase modal paragraph y un lorem de 25 Y por último un enlace o un elemento a con la clase modal Close y la leyenda cerrar modal este es el código que debes de poner en el html para crear el modal si yo paso a Chrome Aquí tengo este código es independiente al demás código solamente tengo esto aquí para que se vea un poco más genial ahora lo que voy a hacer es pasar a visual Studio code y crear un archivo o una carpeta que se llame js y crear un archivo main.js voy a referenciar antes de que termine Body con un Script a Main en la carpeta js ahora vamos a darle magia a estos elementos con css para eso yo quiero que modal tenga un position fixed para que se fije a la página un top en cero y un left en cero un right igual en cero y un bottom en cero esto hará que ocupe el 100% de la página lo observas Aquí está pero no se verá tamb bien hasta que yo ponga un baron color por ejemplo 11 1 si paso a Chrome la observas voy a poner una transparencia que sea bd después voy a pasar a modal container que como te comenté será el contenedor del contenido valga la redundancia y voy a ponerle un Wi del 90 y un baron color que sea blanco lo observas Ahora aquí está el modal y el modal container Bueno yo quiero ponerle a modal un display Flex y a su hijo modal container un margin auto para que Centre horizontal y verticalmente a ese contenido esto lo hacemos porque su padre tiene un display Flex pero también le diré que su ancho será del 9% siempre y cuando sea menor a 600 píxeles esto hará el contenido mucho más pequeño y también un alto máximo del 90 para limitar al contenido un borde radius de 6 píxeles y un padding de 3M arriba y abajo y 2.5 hacia los lados si paso a Chrome perfecto ahora voy a darle un display grid simplemente para darles un Gap a cada elemento o un espaciador de un m esto hará que se separen y después le pondré un Place items Center para centrar a los elementos perfecto no y quiero que las columnas automáticamente midan el 100% está quedando muy bien y de igual manera quiero que modal title tenga un font size de 2.5 Rem y que modal paragraph tengo un margin bottom de 10 píxeles para que haya un mayor espaciado entre el botón y el título y de igual manera la imagen con la clase modal y mg tengo un wid de 90 por pero con un ancho máximo de 300 píxeles y si yo guardo se vería mucho más pequeña ahora a modal Close que es el botón que al modal que de igual manera podría ser solamente una x realmente solo importa que el elemento tenga la clase modal Close Bueno ese elemento va a tener un text decoration Non un color blanco un bound color que sea f2 6250 un padding de 1 m y 3 m hacia los lados un m arriba y abajo y tres hacia los lados un borde de un píxel sólido y que tenga el color blanco un borde radius de se píxeles y un display inline block además de un font weight de 300 para que sea el texto mucho más delgado y una transición para background color de punto 3 segundos y que esto pase cuando yo pase del mouse sobre modal Close y quiero darle un color que ahora sea este el que tenía el background y un background color que sea blanco si paso a Chrome y paso el mouse sobre este elemento lo observas perfecto No ahora yo quiero crear una clase que se llame modal show y será una clase modificadora estoy usando bem que bem es solamente una manera de nombrar a las clases en css y yo quiero que el elemento modal tenga un modificador que sea modal show porque quiero que modal tenga una opacidad de Cero y si yo guardo y paso a Chrome ya no se muestra el modal pero tampoco puedo seleccionar a ningún elemento de la página entonces voy a poner un Pointer events Non ahora sí ya puedo seleccionar a cualquier elemento de la página y el modal no se ve porque por defecto tiene una opacidad de Cero y desactivamos cualquier evento del mouse entonces solamente se va a mostrar el modal cuando tenga la clase modal show voy a ponerle una opacidad en uno y un Pointer events un set si yo guardo No pasa nada pero si yo agrego esta clase a modal Ahora sí se va a mostrar lo observas el truco en esto es crear un botón que al presionarlo agregue esa clase y al poner modal Close cierre esa clase realmente es muy sencillo primero veamos que el elemento queremos que abra el modal y yo quiero que sea este botón entonces voy a pasar al html y Ese botón tiene la clase giro cta es este elemento entonces voy a pasar a mi archivo main.js que Recuerda que ya lo referenciamos en el html Bueno voy a crear una constante que se llame Open modal y voy a decirle que sea igual a la selección de ese elemento que tiene la clase Hero cta aquí textualmente ponemos document query selector y referenciamos a la clase esto lo que hará es traerme o guardar en esta variable o constante al elemento con la clase giro cta Entonces yo quiero decirle que cuando open modal tenga un evento que sea de tipo click se ejecute esta función básicamente lo que hace esto es cada que yo de clic a Open modal que es este elemento quiero que algo pase por ejemplo una alerta que diga ouch me diste click si yo guardo y paso a Chrome y doy click a este elemento perfecto está funcionando lo que yo quiero hacer después es que el modal aparezca y para eso voy a guardar al modal en una variable o en otra constante que se llame modal y voy a decirle que sea igual a document query selector y voy a obtener al elemento con la clase modal Entonces cuando alguien de clic a Open modal yo quiero que modal entre a sus clases y agregue a la clase modal show Y por último voy a agregar un parámetro para evitar el comportamiento por defecto esto hará que no se agregue esta almohadilla Cada que yo toque este enlace Ahora sí si doy clic a este elemento lo observas se muestra porque agregué la clase modal show que hace que se muestre el modal Y por último quiero seleccionar a este elemento con la clase modal show con una constante que se llame Close modal y que sea igual al document query selector modal Close Pero entre comillas y es lo mismo voy a copiar esto y pegarlo abajo pero en vez de que diga Open modal voy a ponerle Close modal y que en vez de agregar la clase modal Show la quite Ahora sí yo la agrego y yo la quito lo observas y no importa que este elemento diga cerrar modal puede por ejemplo ser una x no hay ningún problema lo observas por ejemplo puede ser un párrafo que diga Dame clic y solamente le das la clase modal close lo observas no hay ningún problema pero voy a dejarlo como un elemento a y ese sería todo el javascript ahora voy a pasar a modal show Y si te das cuenta todo esto va de golpe Bueno voy a poner una transición que afecte a la opacidad y que dure pun 6 segundos ahora si Yo abro el modal y si lo cierro se va de golpe pero si lo abro pasa con una transición entonces lo que voy a hacer es ponerle esta transición también aquí a modal Y si yo abro y cierro el modal lo observas funciona perfectamente pero no quiero que sea así Quiero agregar más dinamismo Ahora quiero que el modal container venga de arriba hacia abajo y para eso Yo quiero agregar una custom property en modal que se llame transform y que tenga un Translate en y de -1 View por height Y si yo paso a modal container Y le doy un transform que llame a la custom property transform esto lo que hará es que aunque yo active el modal el modal container se irá hacia arriba lo observas si yo inspeccion y si paso a los elementos exactamente a modal container Y si yo paso a los estilos Y si yo le quito el transform a modal lo observas se muestra y se quita pero si de igual manera yo le agrego una transición por ejemplo a transform de punto 3 segundos y si yo le quito o le agrego el transform lo observas ya se agrega la transición entonces hay que hacer eso voy a crear otra custom property que se llame transition y que modifique a transform y que dure pun 8 segundos lo que hace transition por ejemplo aquí es vamos a modificar la opacidad sufrirá una transición de punto 6 segundos y aquí igual transform sufrirá una transición de punto 8 segundos y la voy a llamar aquí en modal container a la custom property llamada transition Ahora si paso a Chrome se sigue sin Mostrar Y por qué bueno porque sigue teniendo el transform en -1 View per height entonces Entonces yo quiero que cuando modal show esté activa ahora esté en cero lo observas perfecto voy a cerrar el modal y voy a abrirlo otra vez si te das cuenta todo pasa de golpe esto puede ser muy bien pero a mí no me gusta así así que voy a personalizarlo un poco más aprovechando el poder de las custom properties bueno Yo quiero decirle que la transición cuando modal show se llame tenga un delete de pun 8 segundos que si vemos la opacidad tarda punto 6 segundos Entonces quiero que tarde punto do segundos más en ejecutarse transform Así que si yo abro esto primero Se pone la opacidad y después el transform voy a cerrar y ahora es al mismo tiempo entonces yo quiero modificar directamente a la transición de modal y quiero decirle que cuando no tenga a modal show se agregue igual un retraso de Punto 9 segundos para hacer que se vaya primero el modal si Yo abro el modal perfecto y si lo cierro de igual manera perfecto lo observas primero Se pone la opacidad y después baja el modal y posteriormente se va el modal y después la opacidad repasemos lo que hicimos básicamente la magia está en transition que nos permite agregar una transición de manera no instantánea sino agregando los segundos que queremos que tarde la transición quizá tú pienses que debes de poner aquí all bueno no se recomienda usar all porque estamos diciendo que todas las propiedades animaes van a sufrir una transición y esto puede ocupar mucho más recursos del navegador y no queremos eso básicamente lo que hacemos Es decirle que cuando modal no tenga la clase o el modificador modal show tengo una transición con una opacidad que dure pun 6 segundos pero que tenga un del de9 segundos esto básicamente se ejecuta cuando yo cierro el modal Y de igual manera modificaremos al transform de modal container cuando no tengas la clase modal show significa que está cerrado Entonces lo mandamos hacia arriba pero cuando ponemos la clase modal show lo regresamos a su valor original exactamente de esta manera es un juego usando transform y transition si quieres aprender más de transiciones te voy a dejar videos aquí en YouTube para que lo aprendas Y por último quizá te preguntes si es adaptable el modal Y si yo inspeccion y abro la herramienta para adaptar a dispositivos móviles veo que sí es adaptable gracias al Wi del 90 y al Max qut y al Max height pero lo que puedo hacer es por ejemplo en el media query que tenemos aquí que se ejecuta cuando el tamaño de la pantalla es menor a 800 yo puedo ponerle que modal container que si recuerdas modal container tiene un padding de 3M arriba y abajo y 2.5 hacia los lados bueno Puedo ponerle arriba y abajo y 1.5 hacia los lados además que modal title tenga un font size de 2s Rem cuando antes lo tenía de 2.5 si yo paso a Chrome la observas se adapta mucho mejor el modal Y eso sería todo ya que el modal se adapta perfectamente qué tal tean parecido estos proyectos te gustaron espero que sí y nos vemos en el siguiente capítulo hasta luego