Crea más de 30 proyectos web con HTML, CSS y JavaScript

1. Introducción: Bienvenido al nuevo curso, donde podrás aprender sobre cómo crear plantillas y proyectos web modernos y hermosos. Si quieres desarrollar y personalizar tu portafolio, convertirte en un desarrollador experimentado y ser contratado, entonces este es el curso adecuado para ti. Construiremos juntos más de 30 proyectos web diferentes y creativos con tres tecnologías principales, HTML, CSS y JavaScript. Si tienes algunos conocimientos básicos de estas tecnologías. Y aún así tenemos algunos problemas para crear tus propios proyectos web. O si quieres subir de nivel a tu desarrollador y diseñadores cerca, entonces has venido al lugar correcto. Creamos este curso con el fin de brindar a los estudiantes la mejor experiencia en tres tecnologías centrales y permitirles crear los mejores proyectos modernos y creativos. Construiremos más de 30 proyectos web diferentes. Y estarán llenos de efectos modernos, bonitos y hermosos y decide. Comenzaremos con proyectos relativamente simples y también pasaremos por algunos avanzados. Podemos garantizarte que dominarás el desarrollo web front-end. Después de completar este curso. Mediante este curso, podrás obtener las inspiraciones que te ayudarán a mejorar tus proyectos y personalizar tu portafolio. Dominar solo estas tecnologías centrales de desarrollo troncal y web Puedes crear temas increíbles y modernos y simplemente ser contratado. Además, tendrás los conocimientos suficientes para seguir adelante y aprender otras tecnologías como marcos de subproblemas y bibliotecas, que hoy en día son realmente populares y muy demandadas El curso será interesante y útil. Por lo que te recomendaría que intentaras sacar el máximo provecho de este curso sin solo copiar y pegar el código Si estuviera en tus zapatos, definitivamente soñaría con un curso como este. Así que únete a nosotros 2. Te doy la bienvenida a la clase: Hola y bienvenidos al curso. Espero que este sea tu curso adecuado y disfrutes de los proyectos que estaremos construyendo a lo largo de este curso. Entonces, como ya sabrás, vamos a crear más de 30 diferentes, modernos y creativos donde estén los proyectos, esos proyectos se construirán en base a tres tecnologías centrales de desarrollo web front-end, HTML, CSS y JavaScript. Quisiera mencionar una cosa. Como dije, los proyectos se crearán en base a HTML, CSS y JavaScript. Por lo que debes tener una comprensión básica de esas tecnologías para poder seguir las conferencias y no confundirte. Los proyectos estarán llenos de diferentes técnicas y trucos modernos. Podrás aprender sobre cómo crear bonitos y hermosos efectos y animaciones, que luego podrás utilizar como inspiración para desarrollar y personalizar tu propio portafolio. Como mencioné, estaremos construyendo más de 30 proyectos. Son plantillas independientes, por lo que no es necesario que las revises en orden. Puedes construir cualquiera de los proyectos que quieras de la lista. Depende absolutamente de ti. Algunos de los proyectos son simples, pero también conocerás algunos proyectos avanzados también. Entonces incluimos todos los niveles que el desarrollador necesita. A lo largo del curso, construiremos proyectos como navegaciones, presentaciones de diapositivas, casillas de verificación personalizadas, tarjetas 3D y otros proyectos interesantes y creativos Entonces estoy seguro de que los disfrutarás. Creo que obtendrás una gran práctica y experiencia en el desarrollo web front-end en el que HTML, CSS y JavaScript son una necesidad Bien, así que sigamos adelante y comencemos. 3. Configuración: Hola y bienvenidos al curso. Nos alegra que estés aquí y esperamos que disfrutes del curso antes de que profundicemos y empecemos a crear nuestros proyectos. En primer lugar, tenemos que preparar nuestro ambiente de trabajo. Estoy seguro que la mayoría de ustedes ya están preparados para escribir el código. Si es así, entonces puedes sentirte libre de saltarte este video y saltar a los proyectos de inmediato. Pero si no, entonces ese no es el problema. Sigamos adelante y montemos algunas herramientas. A lo largo de este curso, necesitaremos dos herramientas principales, que son el navegador web moderno y un editor de texto. Como navegador web, voy a usar mayormente Google Chrome. Y también en algunos casos también necesitaremos la ayuda de Mozilla Firefox. Estoy seguro de que ya sabes cómo instalar estos navegadores web, y creo que todos ya los tienen. Pero de todos modos, veamos cómo descargarlos. Para obtener el Google Chrome, tenemos que ir a esta URL aquí y descargar el navegador web. El proceso de instalación es bastante sencillo, así que no voy a pasar por él. En cuanto al Mozilla Firefox, tienes que usar esta URL y descargar el navegador web desde aquí. Ambos enlaces se adjuntarán a esta conferencia. Bien, sigamos adelante y hablemos del editor de texto. Vamos a usar Visual Studio Code porque estos momentos es uno de los mejores editores de textos del mundo. Por supuesto, puedes sentirte libre y usar tu editor de texto favorito. Depende de ti, pero te recomiendo usar el código VS. Para poder descargar el código VS, tienes que visitar este sitio web y obtener el editor de texto ya sea para Windows o Mac o Linux. Este enlace también se adjuntará a esta conferencia. El proceso de instalación del Visual Studio Code también es muy sencillo, así que estoy seguro de que no va a tener ningún problema con él. Bien, así que una vez que instales ambas herramientas estarás bien para ir Así que vamos a saltar directamente a los proyectos 4. Proyecto 1 - Formularios 3D: Bien, entonces es momento de crear un nuevo proyecto. En este proyecto vamos a estar creando un inicio de sesión 3D y formularios de registro. Y el proyecto se va a crear en base a HTML, CSS y JavaScript. En este video, voy a repasar el proyecto y describirlo. Entonces, como puedes ver, tenemos aquí un formulario de inicio de sesión que se muestra por defecto con una imagen de fondo a pantalla completa En la esquina superior izquierda del formulario, tenemos el Batson, que está mostrando el texto. Regístrate. Si hago clic en él. Y entonces el formulario rotará en un entorno 3D. Y se mostrará el formulario de registro. Si hago clic en el botón Iniciar sesión, recuperaremos el formulario de inicio de sesión aquí Para que puedas cambiar de forma con esos botones en el espacio 3D. Bien, así que eso es todo sobre este proyecto. Espero que sea interesante y lo disfrutes. Entonces comencemos. Bien, así que estamos listos para comenzar a construir el proyecto. He creado una nueva carpeta en el escritorio llamada formularios 3D, en la que tengo otra carpeta llamada images. Incluye la imagen de fondo. Sigamos adelante y abramos esta carpeta en VS Code y luego creamos nuestros archivos de trabajo para HTML, CSS y JavaScript. Voy a llamar a los archivos index.html, luego style.css y script.js. Después abre el archivo index.html y crea un documento HTML básico. Para eso, voy a usar amidas. Tenemos que colocar un signo de exclamación y luego presionar Tab o responder Entonces aquí tenemos las etiquetas HTML básicas. Antes que nada, cambiemos el título. Voy a llamarlo formularios 3D. Y luego voy a vincular los archivos CSS y JavaScript. Vamos a abrir la etiqueta de enlace y especificar aquí en las aurículas primero atribuir la parte del archivo En cuanto al archivo JavaScript, voy a abrir la etiqueta script justo encima de la etiqueta de cuerpo de cierre. Y luego necesitamos especificar el nombre del archivo en el atributo source. Bien, por último, voy a ejecutar el proyecto al navegador usando uno de los paquetes de código VS que se llama Live Server Nos permite ejecutar la vida del proyecto y realizar las actualizaciones y cambios sin refrescar la página. Cada vez. Antes de empezar a escribir el código, voy a colocar el editor y el navegador uno al lado del otro Bien, sigamos adelante y comencemos a crear el marcado HTML Voy a abrir una etiqueta div, que va a ser el contenedor. A continuación necesitamos otra etiqueta div. Envolverá ambas formas. Entonces voy a asignar al envoltorio de formularios de clase. Este elemento constará de dos elementos diferentes. Me refiero a dos elementos formados diferentes. El primero va a ser el formulario de firma. Así que vamos a abrir la etiqueta de formulario con el formulario de inicio de sesión de clase. Entonces cada elemento de formulario incluirá un botón, encabezado y las entradas. Vamos a abrir la etiqueta de enlace va a ser el botón. Te permite asignar a la clase Regístrate, BTN. Yo usé aquí, inscríbase porque esta persona nos ayudará a navegar hasta el formulario de inscripción Bien, Siguiente necesitamos rumbo. Abramos la etiqueta de encabezado H2 con el inicio de sesión de contenido. Después de eso, voy a insertar tus elementos de entrada. Vamos a abrir la etiqueta div, que será la envoltura, está diseñada para comer envoltorio de entrada de clase. Entonces, en general, tendremos tres elementos de entrada diferentes para correo electrónico, contraseña y botón de envío. Vamos a abrir la etiqueta de entrada con un texto de tipo y con atributos de marcador de posición, tu correo electrónico Entonces voy a duplicar esta línea de código. Estos campos de entrada serán para la contraseña. Entonces cambiemos el atributo type, hazlo contraseña, y también cambiemos el valor del atributo placeholder Necesitamos de nuevo contraseña. El siguiente elemento de entrada será para el botón de enviar. Entonces se va a presentar el tipo. No necesitamos aquí los atributos de marcador de posición. En lugar de eso, necesitamos valor. Iniciar sesión. Nuevamente, Eso es todo sobre los primeros elementos de forma. Sigamos adelante y dupliquemos todo el formulario y luego hagamos algunos cambios. Necesitamos aquí el nombre de la clase, formulario de registro que el botón va a estar firmando También, cambiemos el contenido de la rúbrica. Tenemos que inscribirnos. En el caso del formulario de inscripción, tendremos cinco entradas diferentes El primero va a ser para el nombre. Entonces necesitamos aquí tu nombre. Y además tendremos una entrada para la confirmación de la contraseña. Cambiemos aquí el marcador de posición Instituto confirmar contraseña Luego, por último, cambiemos el valor del botón Enviar. Usa aquí, regístrate. Bien, sentémonos con respecto al marcado HTML. Ahora es el momento de personalizar el proyecto Abre el archivo CSS y antes que nada, crea algunos valores predeterminados y restablece estilos Voy a seleccionar cada disco usando un asterisco. En primer lugar, voy a deshacerme del margen predeterminado y el relleno. Sigamos adelante y pongamos ambas propiedades a cero. Entonces voy a hacer box-sizing border-box. Además, voy a deshacerme de los elementos subyacentes predeterminados de los enlaces. Vamos a poner texto, decoración ninguno. Y luego cambiar la familia de fuentes. Voy a usar su teléfono llamado Arial font group sensorial. A lo largo de este proyecto, vamos a utilizar RAM como unidad de medida. este momento, 1 g equivale a 16 píxeles porque el tamaño de fuente del elemento HTML es igual a 16 píxeles. Voy a convertir 1 g a diez píxeles. Y para eso, tenemos que disminuir el tamaño de fuente de los elementos HTML. Hagámoslo 62.5 por ciento. Bien, Entonces los elementos se hicieron más pequeños. A continuación voy a encargarme del contenedor. Vamos a seleccionarlo y definir su ancho y alto. Voy a establecer el ancho al 100%. En cuanto a la altura, voy a hacer que sea 100% de la ventana gráfica Por lo tanto, necesitamos aquí 100 pH. Voy a establecer la imagen como fondo de pantalla completa. Antes de eso, voy a usar la función de degradado lineal porque quiero que la imagen de fondo sea un poco más oscura. Vamos a usar aquí el valor RGBA 3177 y la opacidad 0.7. En cuanto al segundo valor RGBA va a ser el color negro con la opacidad 0.7 A continuación, voy a especificar la URL de la imagen. Tenemos la carpeta llamada images en la que almacenamos imagen llamada p2 punto PNG. La posición va a estar centrada. Y también necesitamos saber repetir. Por último, voy a establecer el tamaño del fondo para cubrir. Bien, así que aquí tenemos la imagen de fondo de pantalla completa y en realidad eso es todo con respecto al contenedor Ahora tenemos que empezar a personalizar los formularios. Creo que sería mejor si ocultamos una de las formas por un tiempo y diseñamos solo una forma Entonces sigamos adelante y ocultemos el segundo formulario de inscripción. Luego seleccione Envoltura de formularios. Voy a enviar al envoltorio en la página. Entonces pongamos su posición a absoluta. Entonces tenemos que definir propiedades superiores e izquierdas. Hagamos los dos 50%. Entonces para centrar los elementos perfectamente en la página, tenemos que usar transform translate. Tenemos que mover elementos en -50% en ambas direcciones. Estoy en los ejes x e y. Por lo que se considera un formulario se coloca en el centro de la página. A continuación, voy a personalizar el propio formulario. Así que vamos a seleccionar Forms wrapper, seguido del formulario de nombre de etiqueta. En primer lugar, como se define dentro de las alturas, voy a establecer el ancho en 50 run. La altura va a ser 35 RAM. Y también cambiar el color de fondo. Voy a utilizar aquí RGBA valor 4114108. Y luego la opacidad 0.9 a cinco. Bien, a continuación, voy a alinear los elementos dentro del formulario usando flexbox Necesitamos mostrar flex. Entonces tenemos que cambiar la dirección porque necesitamos colocar los elementos verticalmente. Entonces necesitamos flexionar dirección para ser columna. Entonces para crear algún espacio alrededor de los elementos que necesitamos, justifique el espacio de contenido alrededor. Y también para centrar los elementos horizontalmente, alinear los elementos al centro. Por último, vamos a crear un pequeño efecto de sombra. Voy a crear una sombra en los cuatro lados. Entonces voy a usar los siguientes valores. Necesitamos 0.1 RAM tres veces que el collar C, C, C. Y también voy a usar aquí el valor llamado recuadro Nos permite crear la sombra dentro de los elementos. A continuación, necesitamos -0.1 gramo dos veces. Después 0.1 corre con el mismo color CCC y con el mismo valor en conjunto. Bien, digamos respecto a los elementos de formulario por ahora, continuación, voy a iniciar los elementos individuales Empecemos con el botón de registro. Voy a seleccionarlo usando nombres de etiqueta formulario y a. vamos a definir esta posición como absoluta. Y luego establecer las propiedades superior e izquierda, ambas a ram. Se puede ver que el botón está posicionado correctamente. Sigamos adelante y estilízalo. En primer lugar, voy a cambiar el color de fondo. Hagámoslo blanco También voy a hacer que el texto negrita o usando el peso de la fuente con un valor 600. Entonces transformemos el texto en mayúsculas. Además, voy a cambiar el color. Usemos el valor RGBA 4114108. Así que crea algo de espacio entre las letras. Haz que apunte a correr. Justo después de eso, voy a crear algo de espacio dentro del botón usando padding. Vamos a establecer padding a 0.5 rem en la parte superior que un rem en el lado derecho, 0.5 rem en la parte inferior y tres rem en el lado izquierdo. Entonces finalmente, necesitamos cambiar la forma del botón usando border-radius Tomará cuatro valores diferentes. Para el radio en la esquina superior izquierda va a ser del 100%. Entonces tendremos 0.5 rem en la esquina superior derecha. La esquina inferior derecha va a ser 0.5 RAM como probablemente esquina inferior izquierda, va a ser 100%. Bien, eso es lo del botón. Sigamos adelante y personalicemos el encabezado. Seleccione la forma H2. En primer lugar, vamos a establecer el tamaño de fuente, hacer que se ejecute 2.3. Hacer el texto en mayúsculas. También crea algo de espacio entre las letras, haz que apunte a RAM, y luego cambia el color, hazlo blanco. Entonces el rubro está personalizado y ahora tenemos que encargarnos de los insumos. Sigamos adelante y seleccionemos el envoltorio de entrada. Necesitamos colocar las entradas verticalmente una encima de la otra. Así que para usar display flex y flex dirección columna. A continuación, voy a seleccionar la entrada en sí. Definamos el ancho y la altura. Voy a configurar con 225 RAM. En cuanto a la altura, va a ser de tres rampas. Y después de eso, voy a crear algo de espacio dentro y también fuera de las entradas. Vamos a usar padding con los valores 0.5 rem en la parte superior e inferior y un rem en los lados izquierdo y derecho. En cuanto al margen va a ser 0.5 rem en la parte superior e inferior y cero en los lados izquierdo y derecho. A continuación, cambiemos el color de fondo. Voy a hacerlo transparente. También. Vamos a crear borde con valores 0.1 redondo, sólido, el color blanco. Y también hacer que las entradas sean redondeadas usando border-radius con valor cinco ejecutaron las entradas todas o se ven bien, pero necesitamos agregarles un par de estilos más Cambiemos el color. Que sea blanco. También crea algo de espacio entre las letras, hazlo un punto a una RAM, y luego deshazte del valor predeterminado. Esquema. Ponlo a ninguno. Bien, así que eso es todo sobre los insumos. A continuación, voy a cambiar el color del marcador de posición. Tenemos que seleccionar primero rapero, seguido de la entrada y el marcador de posición de pseudo elementos Pongamos el color a blanco y cambiemos también el peso de la fuente. Que sea 300. Bien, por último, voy a personalizar el botón de enviar Seleccionemos entrada con un atributo type. Al principio, cambiemos el color de fondo, hazlo blanco. Entonces el color va a ser RGBA valor 4114108. Aumentemos el peso de la fuente. Hacer detectar más audaz. Establezca la forma de fuente a 900. También transforma texto en mayúsculas. M Finalmente cambió el tipo del puntero de fabricación más gruesoso. Bien, eso es. En cuanto al formulario de inicio de sesión, es personalizado Ahora tenemos que mostrar el formulario de inscripción y hacer que ambos formularios funcionen Entonces vamos al archivo index.html y mostrémoslo de nuevo el segundo formulario. cuanto a la primera forma, voy a esconder por un tiempo. Entonces, lo único que tenemos que hacer con respecto al formulario de registro es personalizar el botón Iniciar sesión Tenemos que moverlo a la esquina superior derecha del formulario. Y también tenemos que cambiar la forma del Bateson. La dirección debe ser hacia el lado derecho. Ahora mismo tenemos estilos comunes para ambos botones. Entonces voy a seleccionar ambos botones por separado y definir sus estilos individuales. En primer lugar, voy a seleccionar Inscribirse UTM Luego vamos a agarrar propiedad izquierda de los estilos comunes Además, voy a agarrar relleno y radio de borde. Entonces voy a duplicar este código. Cambiemos el nombre de la clase que necesitamos aquí, iniciar sesión, btn. También tenemos que cambiar, caducado a la derecha. Entonces necesitamos diferentes acolchados. Va a ser 0.5 ejecutó 3.5 rem, y una RAM. Y también necesitamos diferente radio fronterizo. Los valores van a ser los siguientes. 0.5 rima. Después al 100% dos veces. Y otra vez 0.5 rampa. Bien, por lo que ambos formularios están personalizados. Sigamos adelante y mostremos ambos. Entonces se puede ver que tenemos aquí ambas formas. La posición del botón no es correcta en este momento. Es porque se posiciona de acuerdo con el envoltorio de formularios y necesitamos posicionarlo de acuerdo con el elemento form. Para ello, tenemos que asignar al elemento form position absolute. Entonces ahora mismo los formularios ya no están centrados en la página. Sigamos adelante y arreglemos eso. En primer lugar, me voy a deshacer de transform translate de aquí. Y luego tenemos que ajustar las posiciones superior e izquierda. La posición superior va a ser del 50% menos la mitad de la altura de la forma. En cuanto a la posición izquierda va a ser 50% menos la mitad del ancho de la forma. Entonces necesitamos los siguientes cálculos. Vamos a usar la función calc. La posición superior va a ser del 50 por ciento -17.5 corridas, debido a que la altura es igual a 35 En cuanto a la última posición, va a ser 50% -25 RAM porque el ancho del formulario es de 50 ejecutados Bien, así como puedes ver, los elementos del formulario están centrados Ahora tenemos dos formas de posición en el espacio 3D. O sea, voy a rotar este registro para, como dije, necesitamos posicionar elementos en espacio 3D para poder crear un entorno 3D, tenemos que usar una de estas propiedades CSS llamadas prospectivas. Y voy a asignarlo al contenedor como el valor. Vamos a asignar 200 rampas. Los elementos de forma son nietos del contenedor. Y para aplicar un entorno 3D a las deformaciones, tenemos que usar otra propiedad llamada transform style with value preserve 3D, y tenemos que asignarlo a los elementos padre de las formas, que es un wrapper forms Bien, ahora es el momento de rotar el formulario de inscripción. Voy a seleccionarlo por separado. Y luego usa Transformar con la función rotate y. Y como valor te voy a pasar 270 grados. Bien, Entonces en este momento, el formulario de registro no es visible porque el formulario de registro está Y para ver mejor por qué no es visible, puedo cambiar el valor, establecerlo en 250 grados. Entonces ahora podemos ver que se gira la forma. Se puede pensar que podríamos usar aquí solo 90 grados. Pero en ese caso el contenido de la forma se giraría en sentido contrario. Entonces por eso usamos 270 grados. Bien, a continuación tenemos que mover el formulario de inscripción hacia el lado izquierdo y también recto profundamente en el espacio 3D Para mover los elementos hacia el lado izquierdo, voy a usar la función Traducir Z con valor 25 RAM. Y ahora tenemos que mover los elementos según el eje x con la rampa de valor -25 Bien, por último, volvamos aquí 270 grados. Lo único que había que hacer antes de programar los botones era rotar todo el formulario raperos probable. Entonces eso se le asigna. Transformar rotar y con el valor menos diez grados. Bien, eso es. Ahora tenemos que empezar a escribir algo de JavaScript. Tenemos que adjuntar un clic de oyentes de eventos para hacer ambos botones Pero antes que nada, voy a seleccionar ambos botones. Vamos a crear una nueva variable. Voy a llamarlo sign up btn, y después seleccionar el elemento usando el método QuerySelector Especificemos aquí el nombre de la clase, regístrate btn. Entonces voy a duplicar esta línea de código. Cambiemos el nombre de la variable. Va a estar firmando btn. En cuanto al nombre de la clase, necesitamos firmar entre ellos. Justo después de eso, adjuntemos oyentes de eventos a ambos. Comencemos con el método de registro btn add event listener con un Y la función de devolución de llamada, que se ejecutará una vez que hagamos clic en el botón Registrarse Duplicemos este código y cambiemos signo de butano en signo Bien, una vez le hicimos clic, pero como tenemos que rotar el envoltorio de fuentes, para poder hacer eso, voy a agregar una nueva clase deforms Después seleccionaremos Forms wrapper con esta clase recién creada en CSS. Y vamos a definir la rotación del elemento. En primer lugar, voy a evitar acciones por defecto de los botones de costura. Si no hacemos eso, entonces la página se desplazará hacia arriba si tenemos algún contenido adicional. Así que necesitamos pasar tus objetos de evento en ambos casos. Y entonces necesitamos e punto prevenir default. Bien, así como dijimos, tenemos que agregar una nueva clase para deformar envoltorio. En primer lugar, sigamos adelante y seleccionemos estos elementos, creamos nueva variable, llamemos envoltorio de formularios. A continuación, seleccione los elementos utilizando el método QuerySelector. Necesitamos aquí el envoltorio de formularios ClassName. Entonces agreguemos una nueva clase a estos elementos. Necesitamos envoltorio de formularios, seguido de la propiedad llamada class list, que incluye todas las clases que tiene el elemento. Entonces necesitamos un método llamado add. Y tenemos que especificar aquí el nombre de la clase. Digamos que el cambio. Bien, vamos al archivo CSS y seleccionemos envoltorio de espumas con cambio de clase Así que una vez que hacemos clic en el botón, tuvimos que rotar el envoltorio de formularios. Entonces te voy a pasar transformar rotar y con un valor de 100 grados. Entonces, si hacemos clic en el botón, entonces el formulario girará. Pero como se puede ver, ha cambiado su posición. Entonces necesitamos definir la posición de rezago. Vamos a usar de nuevo llamada función. En este caso necesitamos 50 por ciento más la mitad de la rampa de ancho 25. Ahora todo se ve bien. Tenemos que suavizar el efecto. Para ello, tenemos que usar transición con los valores transforman 0.5 s, que es la duración. Y luego a la izquierda otra vez con 0.5 s. ahora si hago clic, entonces el formulario girará suavemente. En este momento solo está funcionando el botón Registrarse. Entonces, sigamos adelante y cuidemos también el segundo botón. En el caso del segundo botón, solo necesitamos eliminar el cambio de clase del envoltorio de formularios. Entonces, sigamos adelante y agarremos esta línea de código. Pégalo aquí abajo, y cámbialo, agrega para eliminar. Entonces ahora todo estaba a la perfección y en realidad con este proyecto ya terminamos. Si crees que los formularios son más pequeños en tamaño extra grande, entonces simplemente puedes aumentar el tamaño de fuente de los elementos HTML. Vamos a cambiarlo y hacerlo, digamos 72.5 por ciento Entonces ahora creo que es mejor. Y en realidad ya terminamos. Hemos terminado de trabajar en este proyecto. Ojalá fuera interesante y útil. Entonces pasemos al siguiente proyecto. 5. Proyecto 2 - Casa: Bien, es hora de crear nuestros próximos proyectos. En este video, vamos a estar construyendo esta casa con HTML, CSS y JavaScript. Sigamos adelante y describamos los proyectos. Tenemos aquí una casa con un par de ventanas diferentes. Además, hay un techo azul y una puerta. Si hago clic en la puerta, entonces se abrirá. Y también si pongo el cursor sobre la ventana en la parte superior de la puerta, también se abrirá Entonces eso es todo respecto a este proyecto, Sigamos adelante y empecemos a construirlo. He creado una nueva carpeta en el escritorio llamada casa. Sigamos adelante y ábralo en VS Code y creamos nuestros archivos de trabajo para HTML, CSS y JavaScript. Voy a llamarlos index.html, style.css y scripts punto js. Después abre el archivo index.html y crea un documento HTML básico. Para eso, usemos una imagen. Necesitamos colocar el signo de exclamación de orina y luego presionar Tab o Enter Así que aquí vamos. En primer lugar, voy a cambiar el título. Vamos a insertar tu casa. Después vincula archivos CSS y JavaScript. Voy a abrir etiqueta de enlace. Y luego vamos a especificar aquí el nombre del archivo. En cuanto a los trabajos que archivan, voy a abrir la etiqueta script justo encima de la etiqueta del cuerpo de cierre. Y luego en atributo fuente, voy a especificar el nombre del archivo, script.js. Bien, así que todos los archivos están enlazados. Sigamos adelante y ejecutemos el proyecto al navegador. Voy a usar Live Server. Y luego coloquemos el editor y el navegador. Así. Estamos listos para comenzar a construir un proyecto. Al principio, voy a crear el marcado HTML. Sigamos adelante y abramos una etiqueta div con un contenedor de clase. Entonces voy a abrir otra etiqueta div que envolverá el contenido. Vamos a asignarle className house. Por lo que la casa constará de un par de partes diferentes. Tendremos techo, ventanas que la habitación y también la puerta. Sigamos adelante y creamos esas partes. Voy a empezar con el techo. Vamos a abrir la etiqueta div con el techo principal de la clase. Entonces voy a crear cuatro ventanas distintas. Vamos a abrir la etiqueta div. Contará con dos clases distintas. El primero va a ser ventana. Va a ser el nombre común de la clase. Y luego también necesitamos ventana superior izquierda. Duplicemos esta línea de código tres veces. Entonces la segunda ventana va a estar arriba a la derecha. Entonces tendremos ventana inferior izquierda. Y el último va a ser ventana inferior derecha. Bien, eso es lo de Windows. A continuación voy a crear la habitación que sea etiqueta VB abierta con el aula. Por lo que la habitación constará de tres partes distintas. Tendremos un techo de la habitación que la ventana y también la puerta. Abramos una etiqueta div con techo de salón de clases. A continuación, voy a crear una ventana. Vamos a abrir otra etiqueta div con una ventana superior de clase. Esta ventana tendrá dos partes distintas, la izquierda y la derecha. Así que vamos a abrir la etiqueta div con una ventana superior de clase a la izquierda. Entonces voy a duplicar esta línea de código y cambiar el nombre de clase que necesitamos aquí, ventana superior, ¿verdad? Bien, finalmente, vamos a crear una puerta. Voy a abrir la etiqueta div, que va a ser el envoltorio, llamémoslo marco de puerta. Entonces dentro de ese elemento div, voy a abrir otra etiqueta div con la puerta de clase. Y por último, necesitamos la manija de la puerta. Entonces está abierto, etiqueta div con la manija de la puerta de clase. Bien, eso es. En cuanto al marcado HTML, sigamos adelante y comencemos a escribir el CSS En primer lugar, voy a definir algunos estilos comunes y restablecer. Seleccionemos todos los elementos usando un asterisco. Voy a deshacerme de default, margin y padding. Así que pongamos ambas propiedades a cero. Y también voy a establecer box-sizing border-box. Entonces a lo largo de este proyecto, voy a usar RAM como unidades de medida. este momento un rem es igual a 16 píxeles porque el tamaño de fuente del elemento HTML es igual a 16 píxeles. Quiero convertir una RAM en diez pixeles Y para eso, tenemos que disminuir el tamaño de fuente del elemento HTML. Y tenemos que hacerlo 62.5%. Bien, sigamos adelante y cuidemos el contenedor. Voy a extenderlo a toda la página. Así que vamos a seleccionarlo y definir este ancho. Voy a hacerlo al 100%. En cuanto a la altura, va a ser el 100% de la ventana gráfica. Entonces necesitamos configurarlo a 100 vh y luego cambiar el color de fondo. Voy a usar aquí el valor RGB 103150. Y luego uno, los tres otra vez. ¿Correcto? Después de eso, seleccionemos la casa. Voy a hacer visible este elemento. Así que definamos su anchura y altura. Voy a establecer su ancho en 110 RAM. En cuanto a la altura va a ser de siete a RAM. Y también cambiar el color de fondo. Usemos U, E F, E, F, E F. Así que aquí tenemos la casa. Voy a colocarlo en el centro de la página. Y para eso, usemos una grilla CSS. Tenemos que establecer display a grid. Y luego para colocar el elemento en el centro, necesitamos usar artículos de lugar con el centro de valor. Bien, así como pueden ver, el elemento se coloca en el centro en este momento Eso es todo sobre la casa A continuación, voy a encargarme del techo principal. Entonces, sigamos adelante y seleccionemos estos elementos. En primer lugar, definamos su anchura y altura. Voy a establecer el ancho en 110%. Eso es bastante alto, va a ser minucioso a la RAM. Y luego cambiar el color de fondo. Vamos a usar de nuevo el valor RGB. Una vez que pases tu 867145. ¿Bien? Entonces el techo es factible, pero se puede ver que tenemos que cuidar su posición. Para eso, le voy a asignar una posición absoluta, que para posicionarla de acuerdo a la Casa, que es el elemento padre, voy a asignar a la casa, posición relativa. Y después de eso, definamos las propiedades superior e izquierda. Voy a poner entre los dos menos diez RAM. En cuanto a la posición izquierda va a ser menos cinco por ciento. Entonces se considera, el techo está posicionado, pero en este momento no se ve del todo bien. Tenemos que rotarlo en un entorno 3D. Entonces tenemos que crear un espacio 3D. Y para eso tenemos que usar una de estas propiedades CSS llamadas prospectivas. Vamos a configurarlo 200 RAM. Y eso es todo. Giremos el techo de acuerdo con el eje x Utilice Transformar con la función rotar x. Voy a rotar el elemento 20 grados. ¿Bien? Entonces ahora se considera que el techo se ve mucho mejor. Lo único que voy a hacer es hacer sus esquinas ligeramente redondeadas. Y también voy a agregarle un poco de efecto de sombra. Entonces usemos radio de borde. Tomará cuatro valores. La esquina superior izquierda va a ser una RAM que la esquina superior derecha también será una rem En cuanto a las esquinas inferior derecha e inferior izquierda. Voy a hacerlos 0.5 de rampa. Y también usa box shadow con los valores 0.5 gram que un rem. Rem. Y el color también. Bien, entonces el techo principal está listo y ahora tenemos que encargarnos de las ventanas Como saben, las cuatro ventanas tendrán algunos estilos comunes. Entonces voy a seleccionarlos usando la ventana común ClassName Al principio, definamos el ancho y la altura. Voy a establecer el ancho a 12 RAM. La altura va a ser de 15 RAM. En cuanto al color de fondo, voy a usar una AAA. A continuación, voy a agregar a las ventanas un borde. Vamos a asignar dos valores punto para RAM que el borde va a ser sólido. El color. Usemos 333. Después de eso, necesitamos encargarnos de las posiciones de las ventanas. Fijemos la posición a absoluta. Y después de eso, tenemos que definir posiciones para cada ventana por separado. Sigamos adelante y comencemos con la parte superior de esa ventana. Vamos a seleccionarlo. Voy a poner posición a 20 para carnero. En cuanto a la posición izquierda va a ser diez RAM Siguiente te voy a sacar de la ventana superior derecha. Así que vamos a duplicar este código. Cambia el nombre de clase que necesitamos aquí, ventana superior derecha, y también cambia la posición izquierda a derecha. A continuación viene una ventana inferior izquierda. Volvamos a duplicar en el código. El nombre de la clase va a ser ventana inferior izquierda que las dos posiciones serán 43 RAM. Necesitamos aquí posición izquierda con el mismo valor. Y por último, tenemos ventana inferior derecha. Duplicemos este código. Cambia el nombre de la clase que necesitamos aquí mismo. Y también cambiar la posición de rezago. Vamos a usar bien. Bien, Así que las cuatro ventanas están posicionadas y lo siguiente que tenemos que hacer es cuidar la forma de las ventanas superior izquierda y superior derecha. Si echamos un vistazo al proyecto terminado, verás que los lados superiores de esas dos ventanas lo rodean. Así que sigamos adelante y hagamos eso usando border-radius. Necesitamos el mismo radio de borde para ambas ventanas. El ángulo superior izquierdo va a ser del 50 por ciento. Entonces necesitamos el mismo valor para la esquina superior derecha que para las esquinas inferior izquierda e inferior derecha, serán cero. Entonces tenemos las ventanas redondeadas. A continuación, voy a crear esos marcos. Y lo haré usando los pseudo elementos después y antes En primer lugar, vamos a crear las líneas horizontales. Seleccionemos los pseudo elementos antes. Define el contenido, déjelo vacío. Después de eso, definamos ancho y alto. El ancho va a ser del 100%. En cuanto a la altura, voy a hacer punto para RAM. Y también cambia el color de fondo, hazlo un 333. Entonces ahora mismo las líneas no son visibles porque tenemos que definir esta posición. Así que pongamos la posición a absoluta. Y luego voy a definir propiedades superiores e izquierdas. La posición superior va a ser de cinco RAM. En cuanto a la posición izquierda, pongámosla a cero. Bien, entonces como pueden ver, tenemos aquí las líneas horizontales. Sigamos adelante y creamos las líneas verticales. Voy a hacer eso usando los pseudo elementos after. Copiemos este código y cambiemos antes a, después. El ancho va a ser punto cero para RAM. En cuanto a la altura, voy a hacerla cien por ciento, entonces la posición va a ser cero. Cambiemos la posición de la izquierda. Voy a lograr que sea el 50 por ciento. En realidad, necesitamos colocar las líneas verticales en el centro de la ventana. Entonces necesitamos usar aquí transformar, traducir x con valor -50% Bien, así como puedes ver, las cuatro ventanas están personalizadas y ahora tenemos que seguir adelante y cuidar la habitación Sigamos adelante y seleccionemos estos elementos y definamos su anchura y altura. Voy a poner ancho a cuatro para carnero. En cuanto a la altura, va a ser del ocho por ciento. Y luego cambia el color de fondo, hazlo blanco. El cuarto se va a colocar en el centro de la casa. Entonces, vamos a encargarnos de su posición. Fijemos la posición a absoluta. Entonces necesitamos que la posición izquierda sea del 50%. A continuación, pongamos la posición a cero. Y también para colocar el elemento en el centro al transformar, traduce X con el valor -50 por ciento Bien, así que eso es todo con respecto a la habitación por ahora. A continuación, voy a encargarme de un techo. Sigamos adelante y seleccionemos el techo de la habitación. En primer lugar, voy a definir su anchura y altura. El ancho va a ser del 110%. Entonces la altura será de 20 RAM. Y también voy a cambiar el color de fondo. Vamos a usar aquí el valor RGB 867145. Entonces como puedes ver, el techo es visible, pero tenemos que personalizarlo porque este momento no se ve bien. En primer lugar, cuidemos su posición. Voy a poner la posición a absoluta, y luego voy a definir las posiciones superior e izquierda. La propiedad superior va a ser menos diez rima En cuanto a la posición izquierda, debería ser menos cinco por ciento Después de eso, también tenemos que crear el entorno 3D para este techo. Es decir, un ambiente 3D que creamos para el techo principal de la casa. Para ellos, tenemos que usar la propiedad llamada perspectiva. Vamos a configurarlo en 100 RAM. Y luego voy a rotar el techo. Deberíamos girarlo según el eje x 40 grados. Bien. Entonces se gira el techo pero no es del todo visible. Para arreglarlo, voy a usar sombra de caja. Vamos a asignar valores 2D puntos a ram 0.5 rem, 1.5 rem, y como color voy a usar negro. Bien, Finalmente, hagamos que las esquinas de la cubierta sean redondeadas usando el radio de borde Voy a establecer el radio del borde en la esquina superior izquierda como 0.5 RAM que la esquina superior derecha también debería ser 0.5 prime. En cuanto a las esquinas inferior derecha e inferior izquierda. Vamos a ponerlos, ambos de rampa 2.3. Bien, así que finalmente, terminamos con el techo. A continuación, voy a encargarme de la ventana superior de la habitación. Sigamos adelante y seleccionémoslo. En primer lugar, definamos el ancho, altura y el color de fondo. Voy a establecer el ancho a 16 RAM que la altura va a ser 17. Ejecutar como parte el color de fondo. Vamos a configurarlo en RGB 112, luego 22.22. Entonces tenemos aquí la ventana, no se coloca correctamente en este momento. Entonces, vamos a encargarnos de su posición. Fijemos la posición a absoluta. Y luego definir las propiedades superiores y lapeadas. La posición superior va a ser 15 RAM. En cuanto al puesto de laboratorio, voy a fijarlo en 50 por ciento. Y luego para colocar la ventana perfectamente en el centro, usemos Transformar, Traducir X con el valor -50% Bien, a continuación, tenemos que hacer el lado superior alrededor de él. Y también le voy a agregar una frontera. Así que pongamos border-radius al 50%. Entonces otra vez, si 50 por ciento que cero, otra vez cero. Eso es lo que la frontera. Hagamos que sea 0.5 RAM sólida. Y como el color, vamos a usar 555. Bien, al lado de tener que personalizar a partes de esas ventanas Todos ya hemos creado dos elementos div para eso. Así que vamos a seleccionar ventana superior izquierda. Al principio. Vamos a establecer ancho y alto. El ancho va a ser 49.5%, entonces la altura será del 100% En cuanto al color de fondo, voy a usar el valor RGBA El color va a ser blanco. Es decir, necesitamos 5053 veces. Y luego vamos a disminuir la opacidad, hacerla 0.4. Después de eso, definamos la posición. Establezcamos la posición en absoluto y hagamos las propiedades superior e izquierda, ambas cero. Bien, así como pueden ver, tenemos que cambiar la forma de estos elementos Tenemos que hacerlo redondeado en la parte superior izquierda. Así que usemos border, radio superior izquierda y pongámoslo en 50 ran Por último, agreguemos un borde a estos elementos. Vamos a establecer borde 2.5 gramo sólido. Y como el color, vamos a usar 555. Bien, eso es lo del lado izquierdo. A continuación, voy a crear lo mismo en el lado derecho. Para eso, simplemente dupliquemos este código y cambiemos la izquierda en derechos en todas partes. Bien, entonces ambas partes se crean como las otras ventanas. Aquí también necesitamos las líneas horizontales. Voy a crearlos de nuevo usando los pseudo elementos antes Así que sigamos adelante y seleccionemos la ventana superior izquierda, seguida del pseudo elemento antes En primer lugar, definamos el contenido. Va a estar vacío. Entonces voy a definir la anchura y la altura. Vamos a establecer el ancho a 100% Entonces voy a establecer high 2.5 rem y también cambiar el color de fondo. Que sea 555. Eso para hacer visible el elemento de, voy a definir la posición. Fijemos la posición a absoluta. Y luego definir la propiedad superior. Va a ser del 35 por ciento. En cuanto a la posición de rezago, la voy a poner a cero. Bien, así que eso es todo sobre el lado izquierdo. Voy a crear la misma línea en el lado derecho también. Vamos a copiar este código. Pégalo aquí abajo, cambia el nombre de la clase que necesitamos escribir. Y luego cambiar la posición que necesitamos, ¿verdad? También. Entonces, eso es todo. Toda la ventana está personalizada y lo único que tenemos que hacer es crear un efecto hover Entonces, una vez que colocamos el cursor sobre los elementos de lo que debería abrir la ventana, necesitamos agregar un efecto hover de la ventana y tenemos que rotar ambos lados Sigamos adelante y comencemos por el lado izquierdo. Voy a seleccionar Ventana superior con hover. Y luego vamos a seleccionar ventana superior izquierda. Entonces necesitamos rotar el elemento de acuerdo con el eje y. Entonces necesitamos transformar rotar y. Y como valor voy a usar aquí -50 grados También para suavizar el efecto. Usemos la transición con transform 1 s. ¿Bien? Entonces consideremos que el elemento está rotando, pero eso no es lo que queremos aquí. Debe girar desde el lado izquierdo. este momento está rotando desde el centro porque el origen de la transformación está centrado por defecto, necesitamos cambiarlo y hacerla a la izquierda. Entonces voy a usar las propiedades llamadas transform origin. Y lo voy a poner a la izquierda. Ahora como puedes ver, está rotando correctamente, pero necesitamos agregar aquí una cosa más. Necesitamos rotarlo en un entorno 3D. Y para eso, volvamos a usar la perspectiva. Tenemos que asignarlo a la propia ventana. En este caso, voy a poner perspectiva a 150 rampa. Se puede ver ahora tenemos un mejor resultado. Sigamos adelante y hagamos lo mismo por el lado derecho. Voy a copiar este código. Después cambia de izquierda a derecha. Además, tenemos que deshacernos del signo menos de aquí. Entonces necesitamos cambiar el origen de la transformación. En este caso, necesitamos transformar el origen para tener razón. Y por último, usemos la transición con transform 1 s. así como puedes ver, todo funciona a la perfección y con la ventana estamos hechos. Lo único que tenemos que hacer en este proyecto es crear la puerta. En primer lugar, necesitamos crear el marco. Así que vamos a seleccionarlo y definir ancho y alto. El ancho va a ser de la marca 14. En cuanto a la altura, pongámosla en 18 RAM. Y también cambiar el color de fondo. Que sea para cuatro. A continuación, tenemos que cambiar su posición. Se debe colocar en el centro de la habitación. Así que pongamos la posición a absoluta. Entonces definió la propiedad Watson, va a ser cero. Entonces necesitamos posición de rezago. Debería ser del 50 por ciento. Y para centrarlos perfectamente, tenemos que usar transform translate x con valor -50% Después de eso, voy a agregar al marco un borde que se le asigna valores 0.6 redondo, sólido, y el color dos a dos. Y finalmente, vamos a deshacernos de la frontera en la parte inferior. Pongamos el borde inferior a ninguno. Bien, así que eso es todo con respecto al marco de la puerta. A continuación, voy a encargarme de la puerta misma. Así que vamos a seleccionar estos elementos. Definir ancho y alto. Voy a establecer ambos al 100% y también cambiar el color de fondo. Vamos a usar aquí el valor RGB 856824. Bien, entonces se considera que tenemos la puerta. Lo siguiente que tenemos que hacer es crear una manija de puerta. Entonces, sigamos adelante y seleccionemos estos elementos. Vamos a definir ancho y alto que voy a establecer con 23 RAM que la altura va a ser 0.7 rampa. Y también cambiar el color de fondo. En este caso, voy a usar 999. Entonces aquí tenemos la manija de la puerta y ahora tenemos que cambiar su posición. Fijemos la posición a absoluta. Entonces voy a moverlo hacia abajo. Así que vamos a establecer la propiedad superior a 45% de lo que la posición izquierda va a ser una ronda. Por lo que se considera que una manija de puerta está posicionada correctamente. Y lo único que tuvo que hacer es cambiar ligeramente su forma. Voy a hacerlo redondeado por el lado izquierdo. Entonces usemos border-radius con los valores 100%, 0.5 alrededor 0.5 marrón, y luego cien por ciento Y así sucesivamente, Eso es todo. Acerca de la puerta. Todo está listo para crear el efecto. Quise abrir esta puerta. Una vez que hacemos clic en la puerta. Para eso, voy a usar un poco de JavaScript. Pasemos al archivo script.js. Necesitamos agregar un evento click a la puerta. Pero antes que nada, seleccionemos estos elementos. Voy a crear nueva variable. Vamos a llamarlo puerta, y luego seleccionar los elementos div utilizando el método selector de consultas. Especificemos aquí el nombre de la clase punto. Después de eso, voy a agregar un oyente de eventos a estos elementos Así que usemos el método add event listener, que toma dos parámetros El primero es el tipo de evento que necesitamos aquí camarilla En cuanto al segundo argumento, va a ser una función callback, que se ejecutará una vez que hagamos clic en la puerta Entonces una vez que hagamos clic, voy a agregar una nueva clase a la puerta. Después usando esta nueva clase, definiremos nuevos estilos y CSS, cuales queremos que se apliquen a los elementos onclick Y luego en el siguiente click, necesitamos deshacernos de esta clase recién editada. Para eso, voy a usar uno de los métodos llamados toggle. Entonces necesitamos lista de clases de punto dor. Esta propiedad nos da todas las clases que tiene el elemento. Y entonces voy a usar el método llamado Toggle. Llamemos al cambio de nombre de clase. Eso es todo sobre el JavaScript. A continuación tenemos que escribir algunos CSS. Entonces necesitamos seleccionar una puerta con cambio de clase. Voy a rotar los elementos. Entonces necesitamos transformar, rotar según el eje y con el valor 30 grados Entonces, si hacemos clic en la puerta, entonces va a estar rotando. Pero tenemos que añadir un par de cosas a este efecto. La puerta debe girarse desde el lado derecho. También, necesitamos crear el entorno 3D y tenemos que hacer el modelo de efectos. Entonces necesitamos cambiar el origen de la transformación. Vamos a configurarlo para que escriba eso para crear espacio 3D, voy a usar perspectiva con valor cien Ren. Por último, usemos la transición con transform. Llegó 1 s. Entonces, si hacemos clic en la puerta, entonces se abrirá muy bien. Ahora tenemos que hacer lo mismo para la manija de la puerta. Voy a usar la misma técnica. Así que seleccionemos todo con el cambio de clase, seguido de la manija de la puerta. Necesitamos girar la manija de la puerta de acuerdo con el eje z. Entonces necesitamos transformar, rotar Z con un valor de 20 grados. Entonces como la puerta, tenemos que cambiar el origen de la transformación. Hagámoslo a la izquierda. Y también necesitamos hacer la transición con transformación de valor 0.5 s. así como puedes ver, todo funciona bien. Yo sólo quiero agregar aquí una cosa más. Agreguemos un poco de tiempo de retraso a la transición de la puerta porque antes que nada, quiero girar la manija de la puerta y luego abrir la puerta. Entonces agreguemos aquí 0.5 s. bien, entonces ahora todo va a la perfección. Y en realidad con este proyecto ya terminamos. Espero que lo hayan disfrutado. Entonces, sigamos adelante y comencemos a trabajar en la siguiente. 6. Proyecto 3 - Barra de búsqueda: Bien, así que sigamos adelante y empecemos a trabajar en nuestro próximo proyecto. En esta sección, vamos a estar creando una barra de búsqueda con algunos efectos de animación agradables. Sigamos adelante y describamos los proyectos. Como puedes ver, tenemos aquí un icono de búsqueda en la esquina superior derecha de la página. Si hago clic en él, entonces comenzará a moverse y animarse. Se moverá a la parte superior de la página. Entonces el campo de entrada aparecerá con la x de cierre, pero si hago clic en él, el campo de entrada se ocultará y el icono de búsqueda, volveremos a su lugar predeterminado. Entonces eso es todo sobre este proyecto. Va a ser un pequeño proyecto, pero espero que sea interesante. He creado una nueva carpeta en el escritorio llamada barra de búsqueda, que en este momento está vacía. Sigamos adelante y ábralo en código VS y creamos nuestros archivos de trabajo para HTML, CSS y JavaScript. Voy a llamarlos index.html style dot css y script.js. Bien, vamos a abrir el archivo index.html y crear un documento HTML básico Para eso, voy a usar un signo de exclamación. Entonces aquí tenemos unas etiquetas HTML básicas. En primer lugar, voy a cambiar el título. Vamos a insertar tu barra de búsqueda. Y luego voy a vincular archivos CSS y JavaScript. Vamos a abrir la etiqueta de enlace y especificar aquí la ruta del archivo. En cuanto al archivo JavaScript, voy a abrir la etiqueta script justo encima de la etiqueta de cuerpo de cierre. Y entonces necesitamos script.js y el atributo source. En realidad, además de eso, voy a traer un enlace más para Font, Iconos impresionantes. Sigamos adelante y busquemos Font Awesome, CDN, GIS. Entonces copiemos el primer enlace. Entonces necesitamos abrir la etiqueta de enlace y pegar el enlace en el atributo h reference. Entonces todo está listo. Por último, voy a ejecutar el proyecto al navegador usando un servidor en vivo. Este paquete de código VS nos permite ejecutar la vida del proyecto en el navegador. Y puedes hacer cambios y actualizaciones sin refrescar la página. Cada vez. Antes de empezar a escribir el código, voy a organizar nuestros entornos de trabajo. Coloquemos el editor y el navegador uno al lado del otro. Bien, así que finalmente, podemos empezar a escribir el código. En primer lugar, voy a crear el marcado HTML. Vamos a abrir div etiqueta Clase Buscar envoltorio de entrada. Incluirá campo de entrada de búsqueda. Así que vamos a abrir otra etiqueta div con la entrada de búsqueda de clase. Voy a pasar dos elementos distintos. El primero va a ser la entrada con el texto tipo y con el atributo placeholder con un valor, como por ejemplo para el segundo elemento, va a estar cerrando el botón X. Voy a usar aquí Fuente, Icono impresionante. Abramos I elementos. Y asignados a las clases tienen una S, f, k veces. ¿Correcto? Después de eso, necesitamos crear un icono de búsqueda. Entonces es una etiqueta div abierta con el icono de búsqueda de clases. Entonces vamos a insertar tu icono Font Awesome para las clases FAS, una búsqueda. Bien, eso es todo sobre el marcado HTML. Ahora, es el momento de personalizar esos elementos y empezar a escribir algo de CSS. En primer lugar, voy a crear algunos estilos predeterminados y restablecer. Voy a seleccionar todos los elementos usando un asterisco. En primer lugar, voy a deshacerme del margen predeterminado y el relleno. Vamos a establecer ambas propiedades a cero. Entonces voy a establecer box-sizing border-box. A lo largo de este proyecto. Voy a usar RAM como unidad de medida. este momento, 1 g es igual a 16 píxeles porque por defecto el tamaño de fuente del elemento HTML es igual a 16 píxeles. Quiero convertir 1 g en diez pixeles. Y para eso, tenemos que disminuir el tamaño de fuente de los elementos HTML y establecerlo en 62.5 por ciento Ahora, como puedes ver, todos los elementos se hicieron más pequeños. Bien, antes que nada, voy a personalizar el proyecto así Quiero decir, estilizaré y colocaré los elementos aquí en la parte superior de la página. Y luego llevaremos aquí de las animaciones. Así que sigamos adelante y seleccionemos elementos div envoltorio y definamos su ancho y alto. Voy a establecer con el 200 por ciento. Entonces la altura va a ser cinco rem. Y también cambiar el color de fondo. Voy a usar aquí RGBA valor a 55, 69 69.5 . A continuación, voy a colocar los elementos en el centro del envoltorio para eso. Usemos flexbox. Necesitamos display flex. Entonces para el centrado horizontal, voy a usar justify-content En cuanto al centrado vertical, necesitamos alinear los elementos al centro Bien, así que los elementos se colocan en el centro perfectamente Sigamos adelante y comencemos a personalizar la entrada de búsqueda. Al principio, voy a seleccionar estos envoltorios y definir el ancho. Vamos a hacer que 30 corrieran. Después de eso, voy a seleccionar el propio elemento de entrada. En primer lugar, definamos su ancho, hagamos que se ejecute 27. Y también voy a hacer transparente el color de fondo. A continuación, voy a deshacerme del borde predeterminado y dejarlo solo en la parte inferior. Entonces necesitamos una frontera ninguna. Y luego bordear abajo con los valores 0.1 RAM sólido. Y como el color voy a usar 999. Bien, después de eso, cuidemos el tamaño de la fuente. Voy a ponerla en 1.5 g. También crear algo de espacio entre las letras. Vamos a establecerlo en 0.15 redondo. También voy a deshacerme de los impagos. Esquema. Vamos a ponerla en ninguna. Después cambia el color. Usted ve aquí, 555. Y por último, voy a crear algo de espacio en el lado derecho. Vamos a establecer el margen derecho a una rampa. Bien, así que eso es todo con respecto a los campos de entrada. Sigamos adelante y arranquemos el botón X. Vamos a seleccionarlo. En primer lugar, voy a establecer el tamaño de la fuente en 1.5 gramos. Entonces voy a cambiar el color. Hagámoslo 999. Y hacer el puntero del cursor. Bien, Antes de seguir adelante y personalizar el icono de búsqueda, quiero alinear ambos elementos de verticalmente en el centro Y para eso, usemos flexbox. Necesitamos display flex y luego alinear los artículos al centro. Bien, sigamos adelante y personalicemos el icono de búsqueda. Seleccionemos sus desarrollos envoltorio. Al principio, voy a definir el tamaño de la fuente. Hagámoslo 1.5 RAM. Y luego voy a poner posición a absoluta. Vamos a colocar el icono de búsqueda frente a los campos de entrada. Voy a definir la posición de la punta como 1.7 rem. En cuanto a la posición correcta, voy a hacer un pequeño cálculo. Como saben, el ancho de la entrada de búsqueda es de 30 corridas. Para colocar el icono de búsqueda frente a las entradas de búsqueda, necesitamos agregar la mitad del ancho de la entrada de búsqueda al 50 por ciento. Entonces voy a usar una de las funciones llamadas calc. Y entonces necesitamos 50 por ciento más 15 carreras. Así que ahora como puedes ver, el icono se coloca frente a la entrada de búsqueda. Pero creo que necesitamos algo de espacio entre ellos. Entonces, en lugar de 15 RAM, usemos 16 renta. Bien, Finalmente, cambiemos el color del icono. Seleccionemos iones. Establezca su color a 999, y también cambie el cursor. Hacer un punto. Bien, así que todo está listo para crear las animaciones. Como vendiste. Por defecto, tenemos que ocultar el campo de entrada y el botón X. Y también tenemos que mover el icono de búsqueda a la esquina superior derecha de la página. Entonces sigamos adelante y hagamos eso. Voy a ocultar este envoltorio de entrada de búsqueda. Para ello, usemos opacidad con valor cero. Y también visibilidad oculta. Después se cambió la posición correcta de este icono de búsqueda. Vamos a poner bien, propiedad a tres Ran. Bien, ahora es el momento de crear animación. Echemos un vistazo al proyecto terminado. Así que una vez que haga clic en el icono, comenzará a moverse y también aumentará el tamaño. Tendremos un par de pasos diferentes durante la animación. Sigamos adelante y creamos fotogramas clave CSS. Voy a llamarlo search icon anime. Entonces de 0% a 40%, el elemento cambiará su posición superior y también el tamaño de fuente. Entonces al 0%, tendremos la Posición 1.7 ejecutada. En cuanto al 40 por ciento, tendremos dos posiciones con valor 40%. Y también el tamaño de fuente con una rampa de valor 25. Entonces de 40% a 60%, el elemento mantendrá su posición superior. Pero vamos a cambiar la posición correcta. Entonces al 60% vamos a tener, nuevamente top con 40 por ciento. Esa es probablemente la posición correcta. Tendremos el cálculo 50 por ciento más 16 rampa. Por último, del 60% al 100%, los elementos cambiarán su posición, pero mantendremos la posición correcta. Entonces al 100%, tendremos propiedad superior con valor 1.7 rem y la posición correcta con el valor anterior. Entonces los fotogramas clave CSS están listos. Ahora no hemos aplicado esta animación al elemento. Para eso, voy a usar la propiedad de animación. Tenemos que especificar aquí el nombre de los fotogramas clave, y luego la duración de la animación Va a ser 1 s. así como se puede ver que el icono se mueve y la animación funciona bien. Tenemos aquí un pequeño tema. Una vez que termina la animación el icono vuelve a su posición predeterminada. No necesitamos eso. Tenemos que mantener la posición que tenemos al 100 por ciento. Entonces para hacer eso, tenemos que usar uno de los valores llamados forward vino. Entonces ahora se puede ver que todo funciona bien. En realidad, necesitamos ejecutar esta animación una vez que hagamos clic en el icono. Entonces ahora es el momento de comenzar a escribir algo de JavaScript. Necesitamos adjuntar un oyente de eventos click al icono de búsqueda Entonces antes que nada, voy a seleccionar este icono. Vamos a crear una nueva variable y llamarla icono de búsqueda. Voy a seleccionar este elemento usando el método selector de consultas. Especificemos aquí nombre de clase, icono de búsqueda, seguido del nombre de la etiqueta. Después de eso, voy a agregar un oyente de eventos al ícono de búsqueda Tenemos que especificar aquí el evento click. Y también tenemos que pasarte una función de devolución de llamada, que se ejecutará una vez que hagamos clic en el icono Buscar Entonces, como saben, tenemos que aplicar la propiedad de animación a este icono de búsqueda. Para hacer eso, voy a agregar una nueva clase al icono de búsqueda, me refiero al elemento padre. Después seleccionaremos ese elemento usando la clase recién creada en CSS. Y aplicaremos propiedades de animación del elemento. Entonces necesitamos que busques icono, entonces tenemos que tener acceso a sus elementos padre. Así que voy a usar aquí la propiedad llamada elementos padre. A continuación necesitamos otra propiedad llamada lista de clases. Incluye todas las clases que tiene el elemento. Y entonces voy a usar método llamado add. Especificar. Aquí la clase, digamos cambio. Bien, eso es todo con respecto a JavaScript en este momento, volvamos al archivo CSS Entonces como dije, ahora necesitamos seleccionar Icono de búsqueda con un cambio de clase. Entonces tenemos que mover aquí esta línea de código. Entonces ahora si hago clic en el icono de búsqueda entonces se ejecutará la animación. Bien, a continuación tenemos que mostrar el envoltorio de entrada de búsqueda. En este momento está oculto. Entonces de la misma manera, voy a usar el cambio de clase. En primer lugar, vamos a seleccionar un rapero, crear una nueva variable y llamarlo contenedor de entrada de búsqueda. Voy a seleccionar este elemento utilizando de nuevo el método QuerySelector Especificemos aquí el nombre de la clase, el envoltorio de entrada de búsqueda. Entonces agreguemos el cambio de clase a estos elementos. Entonces necesitamos entrada de búsqueda, envoltorio, punto, lista de clases, punto, agregar con un cambio de clase. Después vuelve al archivo CSS y selecciona el envoltorio con el cambio de clase. Entonces, para mostrar el envoltorio de entrada de búsqueda, necesitamos opacidad uno y visibilidad visible. Entonces ahora si hago clic en el icono de búsqueda, entonces aparecerá la entrada de búsqueda. En este momento aparece sin ningún efecto. Entonces necesitamos usar la transición con los valores Todo lo que la duración va a ser 0.5 s Además de eso, voy a usar aquí poco tiempo de retardo 1 s. bien, Así que ahora como pueden ver, tenemos aquí un efecto mucho más agradable y genial Antes de seguir adelante y comenzar a programar el botón de cierre, quiero agregar una cosa más aquí. Una vez que se muestre la entrada de búsqueda, quiero que se enfoque automáticamente. Para eso, voy a usar uno de los métodos llamados focus. Pero en este caso necesitamos esperar 1 s para que aparezcan los elementos. Entonces, al principio, vamos a seleccionar los elementos de entrada, crear una nueva variable. Y compañeros buscan insumos. Voy a seleccionar elemento nuevo con el método QuerySelector Especificemos aquí las entradas de búsqueda de nombre de clase, seguidas de la entrada de nombre de etiqueta. Entonces voy a usar un método llamado set time out. Se necesitan dos parámetros. El primero es una función de devolución de llamada. Insertemos tu enfoque de punto de entrada de búsqueda. En cuanto al segundo argumento va a ser la cantidad de tiempo. En este caso. Como decíamos, necesitamos un segundo, así que voy a pasar aquí mil milisegundos. Entonces ahora si mostramos la entrada de búsqueda, entonces se enfocará automáticamente. Ahora tenemos que seguir adelante y hacer que el botón X funcione. Una vez que hacemos clic en él, tenemos que ocultar el envoltorio de entrada de búsqueda. Y también tenemos que volver a mover el icono de búsqueda a su posición predeterminada. En primer lugar, vamos a seleccionar el botón X. Voy a crear nueva variable. Llamémoslo cerrar icono. Y luego seleccionar los elementos usando el método QuerySelector. Quiero especificar aquí el nombre de la clase, las entradas de búsqueda, seguido del nombre de la etiqueta I. Después de eso, tenemos que adjuntar click event listener al icono Especificemos aquí el tipo de evento click. Y también necesitamos una función de devolución de llamada. Así que una vez que hacemos clic en el botón que tenemos que eliminar el cambio de clase del envoltorio de entrada búsqueda y el icono de búsqueda también. Entonces voy a agarrar esas dos líneas, pegarlas aquí, y luego cambiarme en in para quitarlas. Entonces ahora si hago clic en el botón X, entonces los elementos se ocultarán y también el icono de búsqueda, volveremos a su lugar inicial. En realidad, todo funciona bien, pero necesitamos agregar algunos efectos aquí. Primero, voy a ocultar elementos con alguna transición. Así que usemos la transición con el envoltorio de entrada de búsqueda. Vamos a asignar valores de verdad todos y 0.5 s. Ahora como puede ver, los elementos se esconden sin problemas. A continuación, voy a encargarme de este icono de búsqueda. Vamos a crear una animación separada en que definiremos el movimiento del icono hacia el lado derecho. Vamos a crear nuevos fotogramas clave CSS. Voy a llamarlos búsqueda, icono y M2. Tendremos dos pasos diferentes, 0% y 100%. Al 0%, necesitamos definir la posición correcta. Y tenemos que instituir el cálculo, 50 por ciento más 16 RAM. Eso es para el 100%. Tenemos que definir la posición correcta como tres rondas. Por último, apliquemos esta animación al icono de búsqueda. Utilice la propiedad de animación con el valor es icono de búsqueda y m2. Después 0.5 s. y también necesitamos adelante. Bien, así como puedes ver, todo funciona a la perfección. Y en realidad con este proyecto ya terminamos. Espero que hayan disfrutado de este video y aprendan algunas cosas nuevas. Sigamos adelante y nos encarguemos del próximo proyecto. 7. Proyecto 4 - Reloj: Bien, así que es hora de seguir adelante y comenzar a construir nuestro próximo proyecto En este video, vamos a crear un reloj con HTML, CSS y JavaScript. Va a ser un reloj estándar, que probablemente tengas en casa en la pared. Aquí tenemos números para horas y también tres flechas diferentes que indican las horas, minutos y segundos. Bien, sigamos adelante y comencemos a crear un proyecto. Tengo una nueva carpeta en el escritorio llamada reloj, que ahora mismo está vacía. Vamos a abrirlo en código VS y crear nuestros archivos de trabajo para HTML, CSS y JavaScript. Voy a llamarlos index.html, style.css y scripts punto js. A continuación, abra el archivo index.html y cree un documento HTML básico. Para eso, necesitamos colocar aquí un signo de exclamación y luego golpear Tab o Enter Entonces aquí tenemos las etiquetas HTML básicas. Lo primero que voy a hacer es cambiar el título. Vamos a insertar tu reloj. Y luego voy a vincular archivos CSS y JavaScript. Vamos a abrir la etiqueta de enlace en el elemento head y especificar aquí la parte del archivo CSS. En cuanto al JavaScript, voy a abrir la etiqueta script justo encima de la etiqueta de cuerpo de cierre. Y luego necesitamos especificar la ruta del archivo en los atributos de origen. Bien, entonces estamos listos para comenzar. Lo último que voy a hacer es ejecutar el proyecto al navegador. Para eso, voy a usar uno de los paquetes de código VS llamado servidor en vivo. Nos permite ejecutar el proyecto en vivo en el navegador y realizar cambios y actualizaciones sin actualizar la página cada vez. Bien, por último, coloquemos el navegador y el editor uno al lado del otro, así. Y empezar. Voy a crear el marcado HTML. Entonces lo vamos a darle estilo. Quiero decir, vamos a hacer que los elementos se vean como el reloj. Y luego haremos que funcione usando JavaScript. Así que sigamos adelante y comencemos a crear el marcado HTML. Abramos la etiqueta profunda, que va a ser el contenedor. Incluirá todo el contenido. Entonces voy a abrir otra etiqueta div dentro del contenedor que está asignado al reloj de clase. El reloj constará de dos partes distintas, pero tendremos los números y las flechas. Es una etiqueta div abierta con los números de clase. Tendremos cuatro números diferentes. Vamos a abrir la etiqueta div con la clase 12. Y como el contenido, vamos a instituir tu 12. Entonces voy a duplicar esta línea de código tres veces y luego cambiar los nombres de las clases y también el contenido. Necesitamos tres. Después 6.9. Eso es lo de los números. Vamos a abrir la etiqueta div, que va a ser la envoltura de las flechas. Tendremos tres flechas distintas. Vamos a abrir la etiqueta div con la hora de clase. Entonces voy a duplicarlo dos veces y cambiar los nombres de las clases. Necesitamos aquí, minutos y segundos. Bien, eso es todo con respecto al marcado HTML. Ahora mismo tenemos aquí solo los números. Así que sigamos adelante y comencemos a personalizar el reloj. En primer lugar, voy a traer el enlace para las fuentes de Google. Voy a usar una de las fuentes de Google lo largo de este proyecto. Así que sigamos adelante y visitemos el sitio web de Google Fonts. Después busca una de las fuentes llamadas concert one. Entonces en estos momentos tenemos aquí un texto como ejemplo, pero nos interesan los números. Así que simplemente podemos cambiar la oración en números y ver cómo se ve la fuente. Seleccionemos el estilo. Para vincular los pons, tenemos dos opciones diferentes Puedes agarrar este enlace y pegarlo en el elemento head, o puedes hacer clic en Importar, tomar esta URL y pegarla en el archivo CSS. Bien, así que una vez que se selecciona la fuente, a continuación, voy a restablecer algunos estilos predeterminados Seleccionemos todos los elementos usando un asterisco y deshagamos de default, margin y padding. Voy a establecer ambos a cero y también cambiar la familia de fuentes para cada elemento Vamos a usar aquí están Cuckoo concepto de fuente un curso Bien, así como pueden ver, ahora los números se ven de una manera diferente Entonces voy a este proyecto, voy a usar la RAM como unidad de medida. este momento, 1 g equivale a 16 píxeles porque el tamaño de fuente del elemento HTML es igual a 16 píxeles. Quiero convertir una RAM en diez píxeles. Por lo tanto, tenemos que disminuir el tamaño de fuente de los elementos HTML Y que sea 62.5 por ciento Entonces, como pueden ver, los números se hicieron más pequeños. A continuación, voy a encargarme del contenedor. Vamos a seleccionarlo. Y antes que nada, definamos su anchura y altura. Voy a establecer el ancho al 100 por ciento. En cuanto a la altura, voy a hacer que sea 100% de la ventana gráfica Entonces necesitamos 100 vh. A continuación, voy a colocar el contenido del contenedor en el centro. Y para eso, usemos flexbox. Tenemos que configurar la pantalla para flexionar. Y luego para el centrado horizontal y vertical, necesitamos justificar el centro de contenidos y también alinear los elementos al centro Bien, así que ahora el contenido se coloca en el centro y podemos personalizar el propio reloj Sigamos adelante y seleccionemos Reloj y definamos su ancho y alto. Voy a ponerlos a los dos en 45. Corre. También cambia el color de fondo. Voy a hacerlo gris usando el color ACA, CAC. A continuación, voy a hacer redondear el reloj. Para ello, tenemos que usar border-radius con valor 50%. Entonces vamos a crear un pequeño borde. Vamos a establecer su ancho en 0.5 RAM, luego hacerla sólida. En cuanto al color, vamos a usar 777. Y por último, vamos a crear un pequeño efecto de sombra. En los cuatro lados. Use box-shadow con los valores 0.5 gram dos veces que una RAM Y como el color, vamos a usar 555. Y entonces voy a colocar aquí -0.5 rem dos veces una habitación. Y del mismo color. Bien, vamos a verlo con respecto al reloj. A continuación, voy a encargarme de los números. Seleccionemos el elemento div envoltorio y definido dentro de height. En este caso, necesitamos heredar el mismo ancho y alto del elemento padre, que es un reloj Entonces necesitamos establecer ancho y alto, ambos para heredar ¿Bien? Después de eso, voy a seleccionar todos los elementos div dentro de los números. Entonces al principio vamos a posicionar los números. Vamos a establecer la posición en absoluto. Entonces para posicionar los números de acuerdo con el elemento padre, necesitamos establecer la posición de los números en un relativo. Y después de eso, aumentemos el tamaño de fuente de los números. Hazlo 2.5 rem. Bien, así que ahora voy a posicionar cada uno por separado. Sigamos adelante y comencemos con el 12. Se va a colocar en la parte superior del reloj. Así que vamos a seleccionarlo y establecer es a la posición 21 correr. Entonces tenemos que centrarlo horizontalmente. Para eso, voy a establecer la posición izquierda en el 50 por ciento. Y luego para un centrado perfecto, hay que usar Transform con la función translate x Y tenemos que traducir los elementos en -50%. ¿Bien? A continuación tenemos tres. Vamos a seleccionarlo. En caso de tres, necesitamos la posición correcta para ser una RAM. Y luego tenemos que censurar los elementos verticalmente. Por lo que tenemos que establecer la posición en el 50 por ciento. Y en este caso necesitamos transformar, traducir y -50%. Sigamos adelante y nos ocupemos del resto de los números. El siguiente son seis. En este caso, necesitamos poner alguna posición para ser una sola carrera. Entonces vamos a agarrar esas dos líneas de aquí. En cuanto al último número, que es nueve, necesitamos la posición izquierda para ser una RAM. Y entonces necesitamos esas dos líneas aquí también. Bien, así que los cuatro números están posicionados. A continuación, voy a cambiar el color. Hagámoslo blanco. Y también crear un poco de efecto de sombra. Usa sombra de texto con los valores apuntando a RAM tres veces. Y el color también. Eso es todo respecto a los números. Sigamos adelante y nos ocupemos de las flechas. En primer lugar, definamos este ancho y alto como números. Voy a heredar ancho y alto del reloj. Vamos a ponerlos a ambos para heredar. A continuación, voy a definir la posición. Hagámoslo absoluto. En este caso, el elemento saltará del flujo normal de la página. Y para posicionarlo de acuerdo con el elemento padre, necesitamos posicionarlo relativo para el reloj. A continuación, definamos las propiedades top y lag las voy a poner a cero las dos. ¿Deberíamos colocar las flechas en el centro del reloj? Y para lograrlo, voy a utilizar de nuevo flexbox Necesitamos display flex y luego justificar centro de contenido y alinear el centro de elementos. Bien, eso es todo sobre el envoltorio. A continuación, voy a crear este pequeño círculo. Se va a crear usando el pseudo elemento before. Así que vamos a seleccionar flechas seguidas del pseudo elemento antes Vamos a vaciar el contenido. Luego se definió el ancho y la altura y también el color de fondo. Voy a establecer ancho y alto a 2.5 RAM. En cuanto al color de fondo, va a ser blanco. Entonces aquí tenemos los elementos, ahora mismo tiene la forma del cuadrado. Entonces hagámoslo un círculo. Y también hagamos un poco de efecto de sombra. Pongamos también el radio del borde al 50 por ciento, la sombra. Usemos sombra de caja con los valores apuntando a RAM dos veces. Después 0.5 RAM. Y como el color, vamos a usar 777. Bien, digamos de un círculo. Sigamos adelante y nos ocupemos de las flechas. este momento no son visibles porque solo tenemos los elementos div vacíos. Sigamos adelante y seleccionemos todos los elementos div dentro de las flechas. En primer lugar, como se define ancho y alto, y también el color de fondo. Voy a establecer con 2.7 rem. Entonces la altura va a ser 12. Ejecutar como parte el color de fondo, voy a usar color f, f, f 0, f phi. Entonces ahora los elementos son visibles. A continuación, voy a encargarme de sus posiciones. Voy a colocarlos en el centro de este círculo. Así que pongamos la posición a absoluta. Y luego definir la posición inferior, haciendo 50%. Después de eso, voy a agregar un poco de efecto de sombra a las flechas. Usemos sombra de caja. El valor es punto a ejecutar dos veces, luego 0.5 RAM, y el color 777. Bien, por último, cambiemos la forma de los elementos para que se vean como las flechas. Voy a hacer eso usando border-radius. Entonces el radio fronterizo toma cuatro valores diferentes. Las esquinas superior izquierda, superior derecha serán del 100%. S4, las esquinas inferior derecha e inferior izquierda, voy a hacerlas ceros Entonces como puedes ver, ahora, los elementos se parecen a las flechas. En este momento vemos aquí solo una flecha, pero se muestran las tres flechas. Se colocan uno encima del otro. Lo siguiente que voy a hacer es colocar las flechas detrás de este círculo. Y para eso podemos usar la propiedad z-index con algún valor mayor que cero, digamos diez ¿Correcto? Después de eso, voy a personalizar las flechas por separado. Empecemos por los segundos, porque se coloca encima del resto de las flechas. Voy a cambiar el color de fondo. Vamos a establecerlo para C, F, E seis. Ahora mismo, no se cambia nada. Y sucede porque ya hemos cambiado el color de fondo de las flechas cuando las seleccionamos usando la etiqueta div. Y tiene una mayor precedencia. Para sobrescribir este estilo, necesitamos seleccionar el elemento usando los elementos del padre Me refiero a flechas. Entonces ahora se cambia el color de fondo. Además de eso, voy a rotar la flecha. Usemos Transformar con la función rotate. Y voy a rotar la flecha. Adiós, digamos 270 grados. este momento, la flecha se gira desde el centro porque por defecto el origen de la transformación se establece en el centro. En este caso, necesitamos hacer el origen de la transformación en el centro inferior. Ahora como puede ver, el problema está arreglado. A continuación, vamos a encargarnos de la hora probable. Segundo, necesitamos seleccionarlo usando el elemento padre porque vamos a disminuir su altura. Vamos a establecer su altura en diez RAM. Y también voy a rotar la flecha. Vamos a girarlo 90 grados. Bien, así que finalmente, el reloj está personalizado y todo está listo para hacer el trabajo Como dijimos, vamos a hacer eso usando JavaScript. Así que sigamos adelante y abramos el archivo script.js. Lo primero que voy a hacer es seleccionar las tres flechas. Así que sigamos adelante y creamos una nueva variable. Voy a llamarlo Nuestro. A continuación, seleccione la flecha utilizando el método selector de consultas. Especificemos aquí el nombre de la clase hora. Entonces voy a duplicar esta línea de código dos veces. Cambiemos el nombre de la variable que necesitamos minutos. Y también necesitamos aquí minuto de clase Y luego necesitamos aquí segundo y el nombre de la clase. A ver, instituir un segundo también. Bien, después de eso, voy a crear una función. Vamos a llamarlo fecha fijada. Dentro de esa función, lograremos trabajar las flechas correctamente. Y luego llamaremos a esta función después de cada segundo usando el método set interval. En primer lugar, voy a crear una variable que nos dará el estado actual. Voy a llamarlo. Ahora. Debe ser igual a nueva fecha. Veamos en la consola o esta variable nos da, voy a ejecutar console.log. Ahora. A continuación voy a llamar a esta función. Pero con el método de intervalo establecido. En realidad, este método nos permite ejecutar la función con algunas integrales. Se necesitan dos argumentos. El primero es el nombre de la función. En nuestro caso, es fecha fijada. En cuanto al segundo argumento es la cantidad del intervalo expresado en milisegundos. En nuestro caso, van a ser mil milisegundos. Inspeccionemos la página y cambiemos a la pestaña Consola. Entonces, como pueden ver, estamos consiguiendo aquí la fecha y hora actuales y también la zona horaria después de cada segundo. Bien, a continuación tenemos que definir los segundos, minutos y horas por separado. Así que vamos a crear una nueva variable. Voy a llamarlo obtener segundo. Para obtener los segundos de la hora actual, tenemos que usar uno de los métodos de fecha incorporados llamado get seconds. Entonces necesitamos ahora punto obtener segundos. Si comprobamos esta variable en la consola, entonces obtendremos segundos. De la misma manera, tenemos que definir minutos y horas. Así que vamos a duplicar esta línea de código dos veces y luego cambiar los nombres de las variables y también los nombres de los métodos. Necesitamos. Obtener minutos y obtener horas. Bien, entonces se crean las tres variables. Como puedes ver, nuestro reloj tiene la forma del círculo y el tamaño del círculo es igual a 360 grados. Necesitamos convertir segundos, minutos y horas en grados para definir las porciones del momento de cada flecha. Sigamos adelante y comencemos con estos segundos. Voy a crear una nueva variable. Vamos a llamarlo, digamos segundo grado. Entonces, para convertir segundos en grados, necesitamos usar la siguiente fórmula. Tenemos que dividir la cantidad actual de segundos, Bye 60, porque tenemos 60 s. y luego tenemos que multiplicarlo por 360. Bien, entonces ahora todos o ellos pueden hacer que mueva la segunda flecha Para eso tenemos que rotarlo en segundo grado. Así que necesitamos un segundo punto estilo dot transform igual a rotar función. Y como valor, tenemos que pasar aquí. Segundo grado seguido de los grados. Entonces como puedes ver, ahora, si la flecha se mueve después de cada segundo y nos muestra los segundos actuales. De la misma manera tenemos que convertir minutos y horas. Duplicemos esta línea de código dos veces. Entonces necesitamos minutos. Titulación. Entonces se pone minuto. A continuación necesitamos nuestro grado. Y consigue nuestro en este caso, tenemos que dividirlo por 12 porque general tenemos 12 h. bien, finalmente, necesitamos definir los valores de la función rotate para los minutos y las horas. Duplicemos esta línea de código dos veces. Necesitamos aquí estilo minucioso. Y también tenemos que aprobar tu minuto de grado. Eso es por la hora. Aquí tenemos dos caminos, nuestro grado. Bien, así se puede ver que tenemos aquí una hora actual y el reloj está funcionando perfectamente 8. Proyecto 5 - Navbar: Bien, así que es hora de seguir adelante y comenzar a construir nuestro próximo proyecto En este video, vamos a estar creando una barra de navegación. De un vistazo, el proyecto parece sencillo, pero será realmente interesante y ojalá aprendas algunas cosas nuevas. Bien, sigamos adelante y describamos el proyecto. Como puedes ver, tenemos aquí un par de elementos de navegación diferentes. Están representados por los iconos Font Awesome. Por defecto, el primer ítem tiene un color diferente con diferente fondo y también con diferente forma. Una vez que haga clic en otros elementos que van a cambiar esos colores y forma con bonitos efectos. Sigamos adelante y comencemos a construir el proyecto. He creado una nueva carpeta en el escritorio llamada navbar, que ahora mismo está vacía Sigamos adelante y lo abrimos en VS Code y luego creamos nuestros archivos de trabajo. El primero va a ser index.html. Entonces necesitamos style.css y script.js. A continuación, abra el archivo index.html y cree un documento HTML básico. Para eso voy a usar amidas. Coloquemos aquí un signo de exclamación y luego presionemos Tab o enter Aquí tenemos las etiquetas HTML básicas. Antes que nada, cambiemos el título. Voy a pasar tu navbar. Entonces voy a vincular archivos CSS y JavaScript. Vamos a abrir la etiqueta de enlace y especificar aquí el nombre del archivo de este usuario. En cuanto al JavaScript, voy a abrir la etiqueta script justo encima de la etiqueta de cuerpo de cierre. Y luego tenemos que especificar la ruta del archivo en el atributo source. Bien, además de eso, voy a traer un enlace más para los iconos Font Awesome Sigamos adelante y busquemos Font Awesome. Cdn JS Después copia el primer enlace desde aquí. Abra la etiqueta de enlace en el elemento head y pegue el enlace CDN en el atributo de referencia h Bien, ya casi estamos listos para empezar a escribir el código. Vamos a ejecutar el proyecto al navegador. Para eso voy a usar uno de los paquetes de código VS se llama Live Server. Nos permite ejecutar el proyecto en vivo al navegador y realizar cambios y actualizaciones sin actualizar la página cada vez. Por último, coloquemos el editor y navegador uno al lado del otro. Así. Y empezar. Voy a empezar a crear el marcado HTML. Vamos a abrir la etiqueta de navegación HTML5 con una clase. Ahora para dentro de ese elemento, tendremos siete elementos de navegación diferentes. Vamos a abrir la etiqueta de enlace con la clase ahora por enlace. Por lo que el elemento de cada enlace incluirá Fuente, Icono impresionante. Abramos elemento I con las clases FAS en una casa. Después duplica esta línea de código seis veces y cambia los nombres de clase de los iconos Font, Awesome. El segundo va a ser cámara. Entonces tendremos calendario fuera. El siguiente va a ser campus. Entonces tendremos libro. El siguiente icono va a ser cámara retro. Y finalmente vamos a tener auriculares. Bien, así que eso es todo con respecto al marcado HTML por ahora, vayamos al archivo CSS y personalicemos el principio de elementos Voy a crear algunos estilos predeterminados y restablecer. Sigamos adelante y seleccionemos cada elemento usando un asterisco En primer lugar, voy a deshacerme del margen predeterminado y el relleno. Vamos a establecer ambas propiedades también. Cero. Entonces necesitamos dimensionamiento de cajas, border-box. Además, voy a deshacerme de los estilos predeterminados de los elementos de enlace usando decoración de texto, ninguno. Entonces, a lo largo de este proyecto, vamos a usar RAM como unidad de medida. este momento, 1 g es igual a 16 píxeles porque el tamaño de fuente del elemento HTML es igual a 16 píxeles. Por defecto, voy a convertir 1 g en diez píxeles. Y para eso, necesitamos disminuir el tamaño de fuente del elemento HTML. Vamos a establecerlo en 62.5 por ciento. Bien, después de eso, voy a seleccionar unos elementos de cuerpo y definir su anchura y altura Voy a establecer el ancho al 100%. La altura va a ser el 100% de la ventana gráfica, me refiero a 100 vh Y también cambiar el color de fondo. Voy a utilizar el valor RGB 19124826. A continuación, voy a colocar la siesta o en el centro de la página. Podemos hacerlo de un par de maneras diferentes. En este caso, voy a usar una grilla CSS. Necesitamos rejilla de exhibición Y luego colocar los artículos en el centro. Entonces, como puedes ver, los ítems están centrados tanto horizontal como verticalmente. Entonces veamos acerca de los elementos del cuerpo. A continuación, voy a personalizar la napa. En primer lugar, se define su anchura y altura. Voy a establecer el ancho a 70, corrió. Para la altura, van a ser diez RAM. Además de eso, voy a asignarle un color de fondo temporal para ver cómo se ve la barra de navegación Así que al revés en color a gris claro CCC. este momento los elementos de navegación terminaron en la esquina superior izquierda de la barra de navegación Tenemos que enviarles. Y para eso, usemos flexbox. Necesitamos display flex. Entonces para el centrado horizontal, necesitamos justify-content Pongamos la dirección vertical. Necesitamos alinear los artículos al centro. Bien, eso es lo de la barra de navegación. Siguiente Voy a personalizar ahora por enlace. Al principio, definamos el ancho y la altura. El ancho va a ser tan RAM como por la altura, voy a ponerla al 100%. Además, cambiemos el color de fondo. Voy a usar de nuevo el valor RGB 222-23-3181 y deshacerme del color de fondo temporal del Napa Bien, a continuación tenemos que posicionar los elementos de navegación. Voy a colocarlos horizontalmente en el centro y abajo abajo en la parte inferior de la napa. Para eso, vamos a utilizar de nuevo flexbox. Necesitamos mostrar flex y luego alinear los elementos con un flex de valor y también justificar el centro de contenido. Además de eso, voy a crear algo de espacio en la parte inferior usando relleno. Vamos a colocar la parte inferior del acolchado en una rampa. ¿Verdad? Eso es todo sobre el link napa. Sigamos adelante y los clientes, la fuente, iconos impresionantes. Seleccionemos elementos. En primer lugar, voy a aumentar el tamaño de la fuente. Vamos a establecerlo a 2.5 marca y luego cambiar el color, hazlo 333. Bien, así que el número está casi personalizado y ahora tenemos que hacerlo funcionar Echemos un vistazo a los proyectos terminados. El semicírculo, que ves con el elemento de navegación de actina creado usando antes del pseudo elemento creado usando antes del pseudo Entonces ahora voy a crear este elemento. Seleccionemos ahora tirando con antes de pseudo elementos. En primer lugar, necesitamos definir el contenido. Va a estar vacío. Después defina ancho y alto. El ancho va a ser diez. Corre. En cuanto a la altura, voy a convertirlo en un Tran. Y también le voy a asignar algún color de fondo temporal. Digamos rojo. Bien, así que aquí tenemos antes pseudo elementos. A continuación, voy a cambiar su posición. Fijemos su posición a absoluta. En realidad, necesitamos posicionar este elemento de acuerdo con el vínculo navajo Así que vamos a asignar a cada posición relativa. A continuación, necesitamos definir las posiciones superior e izquierda. La posición superior va a ser del -100%. Esa es probablemente la posición izquierda. Voy a ponerla a cero. Y finalmente, cambiemos la forma del pseudo elemento before usando border-radius Tomará cuatro valores. El primero va a ser la esquina superior izquierda. Pongámoslo a cero. Entonces la esquina superior derecha va a ser cero. esquina inferior derecha será de cinco RAM, mientras que la esquina inferior izquierda, también va a ser de cinco primos Bien, así que ahora estamos listos para hacer que una app funcione. Para eso. Voy a usar algunos JavaScript que tenemos que adjuntar ahora edificios clic evento. En primer lugar, seleccionemos todos conocemos Berlín's. Voy a crear una nueva variable. Llamémoslo parpadea y seleccionamos todos los enlaces usando el selector de consultas. Todos los métodos. Necesitamos especificar aquí el nombre de la clase ahora por enlace. A continuación tenemos que mirar a través de los enlaces, en realidad el método query selector all devuelve un objeto similar a una matriz llamado node list Tenemos que revisar esta lista y adjuntar un oyente de eventos a cada enlace Para mirar a través de la lista, voy a usar uno de los métodos de ayuda de matriz llamado forEach Este método funciona bien con la lista de nodos. No tenemos que transformarlo en la matriz. De lo contrario, si usas otro método de ayuda de matriz o si quieres mirar a través de la HTMLCollection que al principio, donde tienes que transformarlo en una matriz Bien, vamos a usar forEach método. Tenemos que pasar una función de devolución que tomará un parámetro Va a ser el elemento actual en el bucle A continuación, necesitamos adjuntar un oyente de eventos a cada enlace Vamos a especificar aquí el tipo de evento clic y también pasarle una función de devolución que se ejecutará una vez que hagamos clic en el enlace Así que una vez que hacemos clic en el ítem, tenemos que movernos antes del pseudo elemento hacia abajo. Voy a agregar una nueva clase al enlace. Después seleccionaremos antes de ver la isla con esta clase y definir el movimiento del elemento con CSS. Entonces agreguemos una nueva clase al enlace. Necesitamos aquí la propiedad de lista de clases, que incluye todas las clases que tiene el animal. Entonces debería ser seguido por el método add. Y tenemos que especificar aquí el nombre de la clase. Digamos que el cambio. Bien, vamos al archivo CSS y seleccionemos antes pseudo elemento con el cambio de clase y definamos la posición superior Y es -30%. Bien, entonces ahora si hago clic en el elemento de navegación entonces antes pseudo elemento se moverá hacia abajo, en realidad tenemos aquí un pequeño problema Si hacemos clic y otro elemento de navegación que el anterior, así los brazos se moverán hacia abajo, pero el anterior mantendrá su posición. Entonces tenemos que arreglarlo. Necesitamos reemplazar el nombre de clase del elemento link con Napa link. Nuevamente OnClick. Para eso tenemos que mirar a través de los enlaces y definir el nombre de la clase como enlace napa. Entonces necesitamos, de nuevo para cada método con una función de devolución de llamada con un enlace de parámetro Entonces tenemos que definir className. Y debería ser igual al enlace NOPAT. Bien, así como pueden ver, ahora el problema está arreglado A continuación, voy a cambiar el color de los iconos y también el color de fondo. Por lo que necesitamos seleccionar un enlace de Albert con cambio de clase. Vamos a definir el color de fondo. Voy a utilizar aquí el valor RGB 185-19-7147. A continuación, voy a seleccionar iones de nuevo con cambio de clase. Vamos a definir el color. Va a ser blanco. Y también aumentar el tamaño de la fuente, que sea 3.5 rem. Entonces como puedes ver, los elementos de navegación cambian sus colores y tamaño. Una vez que hacemos clic en ellos, echemos un vistazo al proyecto terminado. Entonces, una vez que hacemos clic en el elemento de navegación que sus hermanos, cambiamos el radio del borde. Entonces ahora tenemos que encargarnos de eso. Como el cambio de clase. Voy a agregar una nueva clase a los elementos hermanos del ring Y luego definiremos estilos y CSS. Por lo que necesitamos vincularles la propiedad llamada elementos anteriores hermano. Entonces otra vez, tenemos que usar propiedad de arrendamiento de clase. Bueno, el método add, y voy a especificar aquí el nombre de la clase. Digamos prev, EL cambio. Me refiero al cambio de elemento previo. Duplicemos esta línea de código. En lugar de hermano anterior, necesitamos el siguiente elemento hermano Y también cambiar el nombre de la clase. Necesitamos el siguiente cambio de elemento. Bien, vamos al archivo CSS y seleccionemos eNobe o enlace con esas clases recién agregadas Entonces tenemos que establecer aquí frontera, arriba a la derecha, radio a 1.3 rem. Duplicemos este código. Cambiar el nombre de la clase, necesitamos el siguiente cambio de elemento. Y en este caso necesitamos verter el radio superior izquierdo con el mismo valor. ¿Bien? Entonces, para ver mejor si el radio de frontera funciona bien, vamos a deshacernos de este color de fondo rojo temporal y usar el color que es el mismo que el color de fondo del elemento body Bien, Entonces ahora el radio del borde es visible, pero como puedes ver, necesitamos ajustar la posición de los pseudo elementos anteriores a la ligera porque las esquinas del ítem no se ven del todo bien Para hacer eso al principio, voy a aumentar ligeramente el ancho de los pseudo elementos antes Vamos a establecerlo en diez puntos para RAM. Y luego tenemos que mover los elementos hacia el lado izquierdo. Entonces cambiemos la posición que estoy en la propiedad de la izquierda. Necesitamos punto menos para correr. Bien, entonces ahora como pueden ver, tenemos un resultado mucho mejor. En realidad, aquí hay un pequeño problema. Si hacemos clic en el primer elemento, entonces el border-radius del siguiente elemento en el trabajo Porque aquí tenemos un error. Si inspecciono la página y luego cambio a la pestaña de la consola, verá el error diciendo que no se puede leer la lista de clases de propiedad de null. Ocurre porque el primer ítem no tiene al hermano anterior Y el mismo problema que tenemos con el último ítem. No tiene el siguiente elemento hermano. Para arreglarlo, voy a crear nuevos elementos en HTML. Quiero decir, esos elementos que tenemos frente al primer ítem y al final del número. Entonces vamos a abrir la etiqueta div con una clase ahora por enlace Luego copie esta línea de código y peguela abajo. Entonces ahora tenemos que hacer un par de cosas porque los elementos de navegación no se ven bien al principio, aumentan el ancho de la Navbar Vamos a configurarlo en 90 RAM. Y luego necesitamos deshabilitar los eventos de puntero para aquellos recién creados los elementos Porque una vez que hacemos clic en ellos, entonces tenemos los mismos efectos que los elementos de navegación. Seleccionemos desarrollos usando pseudo-clases de primer hijo, último hijo, y luego asignarles eventos puntero Bien, entonces ahora todo funciona bien. Solo necesitamos agregar un par de efectos diferentes a la barra de navegación. En primer lugar, hagamos que los efectos más suaves dentro de un par de transiciones. Eso primero, agreguemos una transición a los iconos Font Awesome. Necesitamos los siguientes valores. Color 0.4 s, y luego tamaño de fuente con la misma duración. A continuación, agreguemos la transición a antes de pseudo elementos con el cambio de clase En este caso, necesitamos top 0.2 s. Además de eso, necesitamos hacer la transición para el pseudo elemento before por defecto En este caso, necesitamos top con una duración 0.4 s, y luego color de fondo con una duración 0.4 s. Y también necesitamos aquí un poco de tiempo de retardo, 0.4 s. Bien, a continuación necesitamos hacer la transición para el elemento anterior y siguiente hermanos. En este caso, necesitamos border-radius con una duración 0.45 s. Ahora, como puede ver, tenemos resultados mucho mejores A continuación, voy a usar transición para siesta o enlace. Necesitamos aquí border-radius, 0.2 s. además de eso, necesitamos aquí desbordamiento oculto porque si le hicimos clic antes pseudo elemento en la parte superior del elemento de navegación, entonces se moverá hacia abajo. No necesitamos eso. Entonces usemos desbordamiento oculto. Bien, entonces ahora el problema está arreglado. A continuación, voy a agregar un poco de efecto de sombra a la barra de navegación Vamos a usar box-shadow con valores 0.3 RAM tres veces, y el color AAA A continuación, necesitamos un radio fronterizo para los desarrollos. Es decir, el inicio y el final de la novela. En este momento son seleccionados juntos. Entonces voy a seleccionarlos por separado. Después agrégueles. El radio para el primero va a ser 0.5 rem 00.5 Roma. En cuanto al segundo va a ser 0.5 rem, 0.5 gram. Y luego otra vez cero. Se aplica el radio fronterizo. Pero ahora los rincones de la Napa son visibles por el efecto de sombra. Entonces necesitamos un radio fronterizo para los navajos también. Vamos a ponerla en rampa de 0.5. Bien, lo último que voy a hacer es hacer que el primer elemento de navegación esté activo por defecto Porque si vuelvo a cargar la página, entonces no tendremos ningún elemento activo. Para ello, tenemos que asignar a la primera clase de desarrollo, cambio de elemento previo. Y además de eso tenemos que asignar a la primera clase de elemento link, cambiar a la segunda clase de elemento link. Cambio de elemento siguiente. Ahora se considera si vuelvo a cargar la página que el primer elemento de navegación estará activo por defecto Bien, así que finalmente terminamos, hemos terminado de trabajar en ese proyecto. Sigamos adelante y comencemos a construir el siguiente. 9. Proyecto 6 - Cargadores de páginas web: Bien, es hora de seguir adelante y crear nuestro próximo proyecto. En esta sección, vamos a estar creando un par de cargadores css diferentes Dichos cargadores se utilizan antes de cargar la página web. Y hoy en día puede encontrarlos en cada sitio web moderno. Bien, sigamos adelante y profundicemos en nuestro proyecto. Entonces en general tenemos tres cargadores diferentes. Vamos a describirlos rápidamente. El primer cargador consta de nueve puntos. Se colocan en tres líneas diferentes, y cada punto tiene una animación. Hay escalas y las opacidades van aumento con algunos intervalos Quiero decir que la duración de la animación para cada punto es diferente. Segundo cargador, tenemos cinco líneas diferentes durante la animación. Sus tamaños están aumentando con diferentes tiempos de retardo. En cuanto al tercer cargador , consta de cinco círculos diferentes. Cada círculo tiene una animación agradable. Esas cosas más ligeras se crean usando los pseudo elementos Bien, así que eso es lo que vamos a crear en este video Usaremos HTML y CSS. Así que comencemos. He creado una nueva carpeta en el escritorio llamada css loaders. En este momento está vacío. Sigamos adelante y ábralo en código VS y creamos nuestros archivos de trabajo para HTML y CSS. El primero va a ser index.html. En cuanto al segundo va a ser style.css. A continuación, voy a abrir el archivo index.html y crear un documento HTML básico. Para eso, necesitamos colocar aquí un signo de exclamación y luego presionar Enter o tab Bien, así que aquí tenemos las etiquetas HTML básicas. Al principio, cambiemos el título. Necesitamos usar cargadores css. Entonces voy a vincular el archivo CSS. Para eso. Vamos a abrir la etiqueta de enlace y especificar aquí la ruta del archivo. Bien, entonces ahora tenemos que ejecutar el proyecto al navegador y luego comenzar a escribir el código Para abrir el proyecto en el navegador, voy a usar uno de los paquetes de código VS llamado servidor en vivo. Nos permite ejecutar el proyecto en vivo al navegador. Bien, finalmente, coloquemos el editor y el navegador uno al lado del otro Así, y empieza. Entonces voy a comenzar con el primer cargador, quiero decir, esos puntos marrones. Así que sigamos adelante y antes que nada, creamos el marcado HTML Voy a abrir la etiqueta div con un contenedor de clase. Incluirá la totalidad de los contenidos. Entonces voy a abrir otra etiqueta div con el cargador de clases uno. Entonces en general tendremos nueve puntos. Y los voy a crear usando elementos div con los puntos de clase. Bien, así que eso es todo sobre el marcado HTML. Ahora mismo, no hay nada visible en la página porque solo tenemos las etiquetas div vacías. Ahora podemos empezar a escribir el CSS. En primer lugar, voy a crear algunos estilos de reset. Seleccionemos todos los elementos usando un asterisco. Voy a deshacerme del margen predeterminado y el relleno de cada elemento. Entonces pongámoslos a cero a ambos. A lo largo de este tutorial, voy a usar la RAM como unidad de medida. ¿Correcto? Ahora una RAM equivale a 16 píxeles porque por defecto, el tamaño de fuente de los elementos HTML es igual a 16 píxeles. Quiero convertir una RAM en diez píxeles. Y para eso, tenemos que disminuir el tamaño de fuente de los elementos HTML. Vamos a establecerlo en 62.5 por ciento. Bien, a continuación voy a tomar aquí del contenedor. Vamos a seleccionarlo y definir su ancho y alto. Voy a establecer el ancho al 100%. En cuanto a la altura, va a ser el 100% de la ventana gráfica. Y también vamos a configurar display a flex. Ahora mismo, voy a colocar el primer cargador en el centro. Pero luego una vez que creamos el resto de los cargadores, cambiaré ligeramente el diseño del flex para centrar los elementos que necesitamos para justificar el centro de conferencias y alinear los elementos Centro. Bien, así que eso es todo sobre el contenedor. A continuación voy a seleccionar y personalizar el propio cargador. Así que vamos a seleccionarlo y establecer su ancho en 20 ran. Bien, siguiente, sigamos adelante y personalicemos a los adultos. Establecer ancho y alto, ambos de ellos 23 RAM. Entonces los voy a hacer redondeados usando border-radius con un valor del 50 por ciento También cambia el color de fondo. Que sea un cinco a un, a un. Siguiente. Voy a crear algo de espacio alrededor de los puntos usando margen. Vamos a configurarlo en 1.6 RAM en los cuatro lados. Y finalmente, cambia la opacidad, hazla 0.6. Entonces ahora los puntos son visibles, pero tenemos que alinearlos de la manera correcta. Para eso, usemos el flexbox. Voy a configurar display a flex Entonces para alinear los elementos son tres líneas. Tenemos que envolverlos. Entonces necesitamos flex wrap con el valor rap. Y luego voy a centrarlos usando justify-content center centrarlos usando justify-content Entonces como puedes ver, los puntos están alineados. Entonces ahora es el momento de crear la animación. Lo haremos usando fotogramas clave CSS. Echemos un vistazo al proyecto terminado. Como puedes ver durante la animación, los adultos son cada vez más grandes y también la opacidad en los cuestionarios Sigamos adelante y creamos los fotogramas clave CSS. Voy a llamarlo animate loader one. Entonces, durante la animación, necesitamos aumentar la escala de los elementos. Entonces al 0%, voy a establecer la escala de transformación en uno. Entonces al 50 por ciento, voy a incrementar la escala y también a aumentar la opacidad Entonces necesitamos transformar la escala con un valor de 1.5. Y la opacidad va a ser del 100%. Quiero decir, al final de la animación, necesitamos disminuir la escala. Y también necesitamos disminuir la opacidad. Bien, entonces se crean los fotogramas clave y ahora tenemos que aplicar estas reglas a los elementos Para eso, tenemos que usar una propiedad de animación. Como decíamos, necesitamos diferentes duraciones de animación para los adultos Entonces voy a seleccionarlos usando el enésimo selector hijo. Seleccionemos el primero. Luego usa la animación. Tenemos que pasar aquí un par de valores diferentes. El primero va a ser el nombre de la carga de animación de fotogramas clave. El que necesitamos para duración va a ser 1.5 s. y también necesitamos infinito porque la animación debería correr infinitamente Entonces como se consideró, el primer punto ya está animando. Duplicemos este código ocho veces porque en general tenemos nueve puntos. Y luego cambiar los números de los enésimo selectores hijos y también las Para el segundo necesitamos 1.3 s. Entonces el siguiente va a ser 1.7 s. A continuación tenemos el cuarto elemento. La duración va a ser de 1.1 s. entonces la siguiente va a ser 0.9, luego 0.7. El siguiente debería ser 0.5 s. Para el octavo ítem, voy a usar 1.3 s. Y para el último punto, la duración va a ser de 1.5 s. Bien, así que finalmente, tenemos aquí una bonita carga de animación Veamos sobre el primer cargador. Sigamos adelante y nos ocupemos del siguiente. Al igual que el cargador anterior. Al principio, voy a crear el marcado HTML. Entonces en general vamos a tener cinco líneas. Al principio, vamos a abrir la etiqueta div con el cargador de clases a que va a ser el envoltorio. Y después de eso, crea cinco líneas usando nuevamente etiquetas div. Entonces se crea el marcado. Sigamos adelante y comencemos a escribir el CSS. Seleccionemos carga de envoltura o dos y fijemos su ancho en rampa 25. A continuación voy a darle estilo a las líneas como primero. Definamos ancho y alto. El ancho va a ser 1.5 RAM. En cuanto a la altura, van a ser cinco rem. A continuación, cambiemos el color de fondo. Hazlo 41, 69e1. Y también hacer las líneas ligeramente redondeadas usando border-radius con valor uno RAM Entonces se puede ver que las líneas son visibles. En este momento los cargadores se colocan demasiado cerca unos de otros. Quiero crear algún espacio entre ellos. Entonces, sigamos adelante y cambiemos el valor de la propiedad justify content para el contenedor. Hagámoslo espaciado de manera uniforme. Entonces ahora es mejor. A continuación, voy a colocar las líneas una al lado de la otra. Para eso. Usemos display flex. También. Voy a crear espacio entre ellos usando justificar el espacio de contenido de manera uniforme. Y también quiero centrarlos verticalmente. Para eso, necesitamos alinear los artículos al centro. Bien, entonces las líneas están alineadas de la manera correcta. Y ahora tenemos que crear la animación. Entonces durante la animación, voy a aumentar la altura de las líneas. Y las animaciones para cada línea tendrán un tiempo de retardo diferente. En primer lugar, necesitamos crear un CSS keyframes. Voy a llamarlo carga animada o dos Así que cero por ciento, la altura va a ser de cinco RAM, que es la predeterminada Entonces al 50 por ciento, la altura va a ser de 18 RAM. Y luego al final de la animación, quiero decir, al 100 por ciento, la altura va a ser de nuevo cinco. Bien, entonces se crean los fotogramas clave. Ahora necesitamos aplicar esas reglas a las líneas. Seleccionemos alianza con los selectores secundarios enésimo. Selecciona el primero. Entonces voy a duplicarlo cuatro veces y cambiar los números 1-5. Entonces necesitamos ejecutar la animación para la línea media sin tiempo de demora. Es decir, para la tercera línea. Entonces necesitamos animación con un nombre de los fotogramas clave animar carga o dos que la duración va a ser 0.5 s. y nuevamente necesitamos infinito Entonces necesitamos un tiempo de retardo similar para la segunda y cuarta líneas. Entonces copiemos esta línea de código y asignémosla a la segunda y cuarta línea. Y también agregar tiempo de retardo, que va a ser 0.3 s. En cuanto a la primera y quinta líneas, necesitamos que el tiempo de retardo sea igual a 0.6 s. Bien, entonces se considera un cargador, funciona bien con una animación agradable De hecho, con un segundo cargador, ya terminamos. Sigamos adelante y creamos un tercero. Como de costumbre, voy a comenzar con el marcado HTML. Tenemos que abrir la etiqueta div con el cargador de clases tres. Y entonces voy a pasar aquí cinco etiquetas div con el círculo de clase. Bien, así que eso es todo sobre el marcado HTML. Sigamos adelante y comencemos a escribir CSS. Voy a seleccionar tu envoltorio. Las cargas son tres. Vamos a establecer su ancho en cuatro para correr. Después selecciona y personaliza los círculos. En primer lugar, como se define dentro de la altura, voy a establecer ambos para que caigan RAM de lo que necesitamos para hacer redondeado el elemento. Usemos border-radius, 50 por ciento. Y también, voy a cambiar el color de fondo. Va a ser el color de fondo temporal. Hagámoslo gris claro. Entonces aquí tenemos estos círculos. Vamos a alinearlos usando flexbox. Necesitamos display flex. Y luego tenemos que crear algún espacio entre los círculos usando justificar el espacio de contenido de manera uniforme. Bien, entonces los efectos de animación se crearán usando fotogramas clave CSS, y antes de pseudo elementos Entonces esos elementos de animación estarán antes de pseudo elementos, antes de que los creemos, voy a agregar a cada círculo su propio color Así que vamos a seleccionarlos usando enésimo selector hijo. El primer color de fondo va a ser 9o6d. Duplicemos este código cuatro veces y cambiemos los números y los colores. El segundo color de fondo va a ser F9, C7 para f. entonces tendremos f8961 El cuarto color de fondo va a ser f37 22c. Y el último va a ser F9 por 346. Bien, ahora tenemos que crear los pseudo elementos antes Así que vamos a seleccionar círculo, seguido de antes. En primer lugar, necesitamos definir el contenido. Va a estar vacío. Entonces definamos ancho y alto. Voy a ponerlos a ambos al 100%. Y también necesitamos definir la posición. Hagámoslo absoluto. Posición relativa para el elemento padre, porque el círculo debe alinearse de acuerdo con el elemento padre. Después de eso, hagamos el redondeo de los elementos usando border-radius con valor 50 por ciento Y también fijemos la opacidad, hazla Entonces ahora mismo los elementos no son visibles porque no tienen los colores de fondo. Si les asignamos algún color de fondo temporal, digamos gris claro, entonces los verás con claridad. Bien, entonces ahora voy a asignar a cada pseudo elemento el color de fondo adecuado En realidad, podemos tomar todo este código de aquí. Y luego tenemos que agregarles solo el selector antes. Entonces ahora todo está listo y podemos crear la animación. En primer lugar, definamos los fotogramas clave CSS. El nombre va a ser animate loader tres. Entonces tenemos que aumentar la escala de los pseudo elementos y luego tenemos que ocultarlos. Los pasos deben ser los siguientes. Al cero por ciento, necesitamos escala para ser uno. Después, suma el 50 por ciento. La escala va a ser 2.5. El siguiente paso va a ser el 75%. Y nuevamente, necesitamos que la escala sea 2.5. Y después de eso, necesitamos ocultar los elementos. Entonces, al ocho por ciento, voy a poner la opacidad a cero Y también al final de la animación, al 100%, la opacidad va a ser cero Bien, así que eso es todo sobre estos fotogramas clave CSS. Ahora tenemos que usar la propiedad de animación. Vamos a asignarlo a los pseudo elementos antes. Necesitamos aquí el nombre animate loader tres. La duración va a ser de 2 s. también, voy a usar aquí una de las funciones de sincronización de animación está fuera, y luego otra vez infinita. Entonces se considera que la animación funciona. Lo único que tenemos que hacer es agregar diferentes tiempos de retardo a los elementos. Entonces, para el segundo antes de los pseudo elementos, necesitamos que el retardo de animación sea 0.2 s. Vamos a copiar esta línea de código Para el siguiente elemento, necesitamos 0.4 s, luego 0.6 s. y para el último elemento necesitamos 0.8 s. Bien, así que eso es todo sobre el tercer cargador Y en realidad ya terminamos. Se crean los tres cargadores 10. Proyecto 7 - botón de ondulación: Bien, así que sigamos adelante y empecemos a trabajar en nuestro próximo proyecto En esta sección, vamos a crear un botón con bonitos y geniales efectos de hover Una vez que colocamos el cursor sobre el botón, entonces el círculo amarillo se expandirá a todo el fondo No importa de qué lado se ciernen. El botón de. Este elemento amarillo aparecerá por todos lados. Bien, así que estamos listos para comenzar a crear el botón. He creado una nueva carpeta en el escritorio llamada botón de repo, que en este momento está vacía Vamos a abrirlo en VS Code y crear nuestros archivos de trabajo para HTML, CSS y JavaScript. Después abre el archivo index.html y crea el documento HTML básico. Necesitamos colocar el signo de exclamación de orina y luego presionar Tab o Enter Entonces aquí tenemos las etiquetas HTML básicas. Al principio, cambiemos el título. Voy a colocar tu botón de reporte y luego vincular los archivos CSS y JavaScript. Voy a abrir etiqueta de enlace en los elementos de cabeza. Y luego tenemos que especificar la ruta del archivo. En cuanto al JavaScript, voy a abrir la etiqueta script justo encima de la etiqueta de cuerpo de cierre. Y tenemos que especificar aquí la ruta del archivo JavaScript. Bien, entonces estamos listos para comenzar a escribir el código. Antes de eso, voy a ejecutar el proyecto al navegador. Para eso, voy a usar uno de los paquetes de código VS llamado servidor en vivo. Nos permite ejecutar el proyecto en vivo al navegador y realizar los cambios y actualizaciones sin actualizar la página. Cada vez. Coloquemos el editor y el navegador uno al lado del otro, así, y comencemos Entonces voy a comenzar con el marcado HTML. Vamos a abrir la etiqueta div con un contenedor de clase. Este elemento contendrá todo el contenido. Me refiero al botón. El botón se creará utilizando los elementos de enlace. Vamos a abrirlo con la clase btn y luego pasar año elemento span con un contenido Explora. Bien, así que eso es todo sobre el marcado HTML. Empecemos a escribir el CSS. En primer lugar, voy a definir algunos estilos comunes y restablecer. Seleccionemos cada elemento usando un asterisco. En primer lugar, voy a deshacerme del margen predeterminado y el relleno de todos los elementos. Pongamos a ambos a cero. También, voy a hacer box-sizing, border-box. Entonces vamos a deshacernos de los valores predeterminados subrayados del elemento de enlace usando decoración de texto ninguno. Y también, voy a cambiar la familia de fuentes. Vamos a configurarlo en Courier New monospace. Bien, entonces estos estilos se aplican a los elementos a lo largo de este proyecto, voy a usar RAM como unidad de medida Por defecto, 1 g equivale a 16 píxeles porque el tamaño de fuente del elemento HTML es igual a 16 píxeles. Quiero convertir 1 g a diez píxeles. Y para eso, tenemos que disminuir el tamaño de fuente del elemento HTML. Vamos a establecerlo en 62.5%. Entonces, como puedes ver, el tamaño de fuente del elemento link se hizo más pequeño. Sigamos adelante y comencemos a trabajar en el contenedor. En primer lugar, voy a definir su anchura y altura. Vamos a establecer con el 200 por ciento. En cuanto a la altura, voy a hacer que sea el 100% de la ventana gráfica Entonces necesitamos cien vh y también cambiar el color de fondo. Hazlo gris oscuro usando 262626. Bien, siguiente, voy a colocar el botón en el centro Y para eso, voy a usar flexbox. Necesitamos display flex. Entonces para el centrado horizontal, voy a establecer justify content to center Eso es para el centrado vertical. Necesitamos alinear los artículos al centro. Por lo que se considera botón se coloca en el centro y ahora es el momento de personalizarlo. Seleccionemos BTN. Y antes que nada, definamos esta posición. Voy a hacerlo absoluto. Entonces voy a definir el ancho y alto para los Bateson Hagamos a ambos 18 RAM. Entonces voy a cambiar el color de fondo. Vamos a usar 90 E 0 E. Y también hacer que el botón sea redondeado usando border-radius, 50 por ciento Bien, entonces lo siguiente que voy a hacer con respecto al botón es crear un borde. Vamos a establecer su ancho para que apunte a RAM de lo que el estilo va a ser punteado En cuanto al color, voy a hacerlo blanco. Bien, eso es. Respecto al botón. A continuación, voy a tomar aquí de este elemento span. En primer lugar, voy a colocarlo en el centro para eso. Vamos a usar de nuevo Flexbox. Voy a agarrar esas tres líneas y pegarlas aquí. Por lo que este panel está centrado. Sigamos adelante y estilízalo. Seleccione btn span. Al principio, voy a establecer su posición en relativa. Después cambia el color, hazlo blanco. También voy a aumentar el tamaño de la fuente, que sea 1.8 redondo. Entonces voy a hacer que el teléfono sea más audaz. Vamos a establecer el peso de la fuente en 600. También transforma texto en mayúsculas. Y por último, crear algún espacio entre las letras. Vamos a establecer el espaciado a punto para correr. Bien. Entonces este elemento span está personalizado y tendré que crear un efecto hover Echemos un vistazo al proyecto terminado. Entonces, una vez que pasemos el cursor sobre el botón, entonces el círculo amarillo cubrirá el contenido Aparece desde el lado exacto donde ingresemos el mouse creará este efecto usando animaciones JavaScript y CSS. Pasemos al archivo script.js y comencemos a escribir el código. Lo primero que tenemos que hacer es conseguir las coordenadas del cursor dentro del botón. Es decir, necesitamos medir la posición superior e izquierda del cursor desde los bordes superior e izquierdo del botón. Antes de hacer eso, necesitamos seleccionar un botón en sí. Así que vamos a crear una nueva variable. Voy a llamarlo btn. Y luego seleccione el botón usando el método selector de consultas. Necesitamos especificar aquí el nombre de la clase BTN. Después de eso, tenemos que adjuntarle un oyente de eventos con un mouse enter events Además, tenemos que pasar aquí la función callback, que se ejecutará una vez que pasemos el cursor sobre el botón En realidad el ratón entra en metal, dispara sólo una vez cuando pasamos el cursor sobre el elemento Entonces como decíamos, tenemos que conseguir las posiciones superiores izquierdas del cursor dentro del botón Para obtener estas posiciones, necesitamos usar decline x y client. ¿Por qué propiedades? Nos dan las posiciones superior e izquierda del cursor medidas desde los bordes superior e izquierdo de la ventana gráfica Para obtener la posición del cursor dentro del botón, necesitamos encontrar la diferencia entre las propiedades declive x e y y la posición superior izquierda del cursor Entonces para que sea más comprensible, sigamos adelante y escribamos el código. Al principio, voy a pasar objeto de evento de orina. A continuación, te voy a mostrar cómo obtener la información sobre los elementos. Para ello, podemos usar uno de los métodos llamados get bounding client rect Corremos por la consola y veamos qué nos da este método. Voy a pasar aquí e punto, punto objetivo, conseguir cliente delimitador Derecha. Entonces voy a inspeccionar la página y cambiar a la pestaña de la consola. Entonces, si pongo el cursor sobre el botón, entonces obtendremos un objeto llamado dumb Si lo dejé caer, aquí encontrarás un par de propiedades diferentes. Tenemos las posiciones en las que estoy, abajo, izquierda a derecha y arriba. También tenemos aquí la anchura y altura del elemento. Además de eso, puedes ver aquí x e y propiedades. Y en realidad son las mismas que las propiedades izquierda y superior. Podemos usar esos valores para calcular la izquierda en posiciones del cursor. Dentro del botón. Para eso, voy a crear una nueva variable. Vamos a llamarlo a la izquierda. Entonces necesitamos aquí e punto cliente X, y tenemos que restarle. No apuntas al punto, obtienes los puntos rect del cliente delimitadores a Comprobemos en la consola lo que nos da la variable izquierda. Cuando coloquemos el cursor sobre el botón, obtendremos la posición izquierda del cursor Pero ahora dentro del botón. Quiero decir que se mide desde el borde izquierdo de la caja. ¿Bien? De la misma manera, necesitamos definir las dos posiciones. Simplemente podemos duplicar este código, luego cambiar el nombre de la variable que necesitamos top. Y también necesitamos aquí cliente y en lugar de x, y necesitamos de nuevo tu top. ¿Bien? Entonces ambas posiciones están definidas y ahora necesitamos crear nuevos elementos sobre esas posiciones. Lo haremos usando uno de los métodos llamados create elements. Voy a declarar una nueva variable. Vamos a llamarlo ripple Luego abajo, necesitamos crear un nuevo div elementos. Como dije, voy a usar el método create elements. Necesitamos especificar aquí el nombre de la etiqueta div. Después de eso, necesitamos definir las posiciones superiores izquierdas de la ondulación Y usaremos los valores que aquí definimos. Entonces necesitamos aquí ripple dot, style dot, left. Y debería ser igual al valor de la variable izquierda. De la misma manera voy a definir la posición superior. Duplicemos esta línea de código y cambio carecía en la parte superior Bien, entonces se crea el elemento, pero necesitamos agregarlo al botón Para ello, tenemos que usar uno de los métodos llamados prepend Necesitamos btn punto prepend. Y tenemos que pasar aquí la variable Ripple. Ok, entonces para probar que el elemento está creando al pasar el cursor, cambiemos a la pestaña Elementos, y luego pase el cursor sobre el Entonces como puedes ver, Dede Allen se crea dentro del botón Entonces tenemos aquí izquierda y primeras posiciones. Bien, A continuación tenemos que personalizar este elemento en el archivo CSS Vamos a crear una nueva clase y llamarla ondulación. Con el fin de hacer funcionar una izquierda y dos posiciones cuando se define la posición del remolino. Hagámoslo absoluto. Luego se definió ancho y alto. Voy a ponerlos a ambos al 100%. Y también cambiar el color de fondo. Que sea E7 E 08. Bien, veamos ahora mismo los estilos de la ondulación Para aplicarlos a los elementos, tenemos que agregar esta clase a la lista de clases de elementos. Así que necesitamos volver a poner lista de clases de punto seguido del método add Y tenemos que especificar aquí repo. ¿Bien? Entonces, si pongo el cursor sobre el botón, entonces aparecerá el nuevo elemento Si paso el cursor sobre el botón varias veces, entonces se crearán los múltiples elementos Pero lo arreglaremos pronto. En primer lugar, hagamos de esto un redondeado. Usemos el radio fronterizo 50 por ciento. Y también tenemos que moverlo hacia la izquierda hacia arriba en un -50 por ciento Usemos transform. Traducir con -50%. Dos veces. Bien, entonces ahora tenemos mejores resultados y es momento de crear una animación. Entonces, por defecto, el ancho y la altura de este elemento serán cero. Una vez que pasamos el cursor sobre el botón, entonces el tamaño de la república debería aumentar con la animación Así que vamos a crear fotogramas clave CSS. Voy a llamarlo anime de ondulación. En general, tendremos dos pasos diferentes. Al cero por ciento, necesitamos que dentro de la altura sea cero. Para el 100%, debemos aumentar la anchura y la altura al 100%. Bien, entonces los fotogramas clave ya saben cómo aplicar estos estilos a los elementos usando una propiedad de animación Hagamos una pausa aquí, ripple anime también. La duración va a ser de 0.5 s. Así que ahora si pongo el cursor sobre el botón, entonces los elementos aparecerán sin problemas Pero como veis tenemos aquí un par de temas. Una vez que aparece el elemento y se incrementa su tamaño , luego en alturas. Entonces necesitamos mantener los estilos que tenemos al 100%. Para eso necesitamos usar un valor llamado forward. Entonces ahora este problema es fijo elemento ya no altura. El siguiente tema es que el tamaño del elemento no es suficiente para cubrir el fondo, por lo que tenemos que aumentarlo. Hagámoslo 200 por ciento. Entonces ahora el tamaño es dos veces mayor, pero aun así no es suficiente porque si entro al mouse y lo detengo en el borde del botón, entonces la ondulación no cubrirá. Entonces aumentemos ligeramente dentro de la altura. Voy a hacerlos 210%. Bien, entonces ahora el problema está arreglado. Lo siguiente que te voy a quitar es ocultar las partes exteriores del repo Para eso tenemos que usar desbordamiento oculto. Bien, entonces ahora tenemos un resultado mucho mejor. Lo siguiente que quiero hacer es deshacerme del repo Una vez que el ratón deja el botón, tenemos que usar uno de los eventos llamados mouse leave. Vamos a adjuntar al botón de escucha de eventos. Con ratón evento en vivo. Además, necesitamos aquí una función de devolución de llamada. A continuación, tenemos que eliminar el repo. Para eso, voy a usar el método eliminado hijo. Tenemos que especificar aquí. Bien, así que finalmente, ya terminamos. El botón funciona perfectamente. Tiene bonitos efectos y animaciones. Creo que fue interesante y diferente, y espero que te haya gustado. Ahora, es el momento de seguir adelante y empezar a trabajar en el siguiente proyecto. 11. Proyecto 8 - Barra de progreso redondeada: En este video, vamos a crear una barra de progreso con la forma de un círculo con un valor porcentual. Entonces la barra de progreso funciona en un evento de desplazamiento. Por defecto, tenemos aquí cero por ciento. Y una vez que empecemos a desplazarnos hacia abajo por la página, entonces esta línea blanca alrededor del círculo se llenará con el color rojo suavemente. Y también el valor de la persona aumentará en consecuencia. Entonces si nos desplazamos hacia arriba, el valor porcentual disminuirá y recuperaremos el borde blanco. Este proyecto forma parte de nuestro próximo curso de Udemy, en el que construiremos un sitio web completo avanzado con HTML, CSS y JavaScript desde cero Se estrenará pronto, así que estén atentos. Bien, así que eso es todo, lo que vamos a crear en este video Sigamos adelante y comencemos. He creado una nueva carpeta en el escritorio llamada barra de progreso del círculo, que ahora mismo está vacía. Sigamos adelante y ábralo en código VS. Voy a crear nuestros archivos de trabajo. El primero va a ser index.html. Entonces tendremos style.css y script.js. Después abre el archivo index.html y crea un documento HTML básico. Necesitamos usar a Ahmed, coloquemos aquí un signo de exclamación y luego golpeemos Tab o Enter Bien. En primer lugar, voy a cambiar el título. Hagamos que circule la barra de progreso. Y luego vincular archivos CSS y JavaScript. Voy a abrir etiqueta de enlace en el elemento head. Especificemos aquí la ruta del archivo. En cuanto al archivo JavaScript, voy a abrir la etiqueta script justo encima de la etiqueta de cuerpo de cierre. Y luego en el atributo source tenemos que especificar la ruta del archivo. ¿Correcto? Después de eso, voy a ejecutar el proyecto al navegador usando un servidor en vivo. Luego coloque el editor y el navegador uno al lado del otro. Bien, así que al principio vamos a crear una barra de progreso usando HTML y CSS Es decir, vamos a darle estilo así. Y luego haremos que funcione usando JavaScript. Empecemos con el marcado HTML. Voy a abrir una etiqueta div, que va a ser contenedor. A continuación necesitamos otra etiqueta div que envolverá todo el contenido que está asignado a la barra de progreso de la clase. Dentro de la etiqueta div se necesitarán cuatro elementos diferentes. Ahora mismo solo creémoslos y luego explicaremos y mostraremos por qué necesitamos esos elementos. Entonces vamos a abrir una etiqueta div con un semicírculo de clase. Después duplicarlo tres veces. En realidad, no necesitamos tocar el segundo desarrollo. El tercero va a ser un medio círculo superior. Ese es probablemente el último desarrollo. Va a ser un círculo de barras de progreso. Como el contenido. Insertemos aquí cero por ciento por defecto. Bien, así que eso es todo sobre el marcado HTML. Sigamos adelante y comencemos a escribir algo de CSS. Voy a crear algunos estilos comunes. Seleccionemos cada elemento para eso. Necesitamos usar un asterisco. Entonces, antes que nada, voy a deshacerme del margen predeterminado y el relleno de cada elemento. Pongamos a ambos a cero. Así que voy a hacer box-sizing, border-box, y luego cambiar la familia de fuentes Vamos a usar aquí helvética aérea sans-serif. Entonces los estilos comunes se aplican a los elementos. A continuación, voy a cambiar el tamaño de fuente del HTML. Porque a lo largo de este proyecto voy a usar la RAM como unidad de medida. este momento, 1 g equivale a 16 píxeles porque el tamaño de fuente del elemento HTML es igual a 16 píxeles. Quiero convertir 1 g en diez pixeles. Y para eso, tenemos que disminuir el tamaño de fuente del HTML. Hagámoslo 62.5%. Entonces puedo ver que el texto se hizo más pequeño. Bien, Siguiente, vamos a encargarnos del contenedor. Vamos a seleccionarlo. En primer lugar, definir su anchura y altura. Voy a establecer su ancho al 100%. En cuanto a la altura, voy a hacer que sea el 200 por ciento de las ventanas porque necesitamos desplazarnos hacia abajo en la página También puedo cambiar el color de fondo, hacerlo gris usando 555. Todo bien. Después de eso, voy a encargarme de la propia barra de progreso. Me refiero al envoltorio, definir su anchura y altura. Voy a hacer que ambos 40 corrieran. También cambia el color de fondo. Hazlo blanco Y luego haz que la barra de progreso sea redondeada usando border-radius con el valor 50 por ciento Entonces la barra de progreso debe colocarse en el centro y tiene que ser arreglada porque una vez que nos desplazamos hacia abajo por la página, no debería moverse. Así que vamos a establecer su posición para fijar de lo que necesitamos las propiedades superior e izquierda, ambas para ser 50 por ciento. Entonces para censurar el elemento perfectamente, tuvimos que usar Transform con la función translate Aquí tenemos dos caminos, -50 por ciento dos veces. Bien, eso es lo del envoltorio. Sigamos adelante y cuidemos el círculo de barras de progreso. Vamos a seleccionarlo. Y antes que nada, definamos su anchura y altura. Voy a establecer a ambos 239.4 RAM. Después cambia el color de fondo, va a ser negro. También hacer los elementos a su alrededor usando border-radius, 50 por ciento Luego cambia el color, hazlo blanco y aumenta el tamaño de la fuente. Hazlo foro. Bien, entonces este elemento instalado, pero tenemos que encargarnos de su posición. Se debe colocar en el centro de la envoltura. Y también tenemos que enviar a la persona a cada valor dentro del círculo. En ambos casos, voy a usar flexbox y para evitar escribir el mismo código una y otra vez, voy a crear una nueva clase Vamos a llamarlo centro y asignarle un par de propiedades y valores diferentes de flexbox El primero va a ser display flex que necesitamos. Justificar el centro de contenido para el centrado horizontal y alinear los elementos en el centro para el centrado vertical Después de eso, tenemos que asignar esta clase para que sea barra de progreso y el círculo de barra de progreso. Bien, así que ahora es se puede ver que el problema está arreglado. Entonces se prepara la barra de progreso. Tiene el aspecto predeterminado. Y ahora tenemos que hacer su trabajo. Como recuerdas, creamos un par de desarrollos diferentes. Los dos primeros desarrollos que tienen un semicírculo de clase, lograrán llenar la barra de progreso con el color rojo. Entonces lo primero que voy a hacer es esconder por un tiempo el círculo negro para poder explicar y demostrar mejor las cosas que se asignan para mostrar ninguna. Entonces el círculo negro está oculto, y ahora tenemos que encargarnos de los tres elementos div, lo que nos ayudará a que la barra de progreso funcione. Seleccionemos los tres elementos simultáneamente. Quiero decir, necesitamos medio círculo y medio círculo arriba. En primer lugar, cuidemos sus posiciones. Necesitamos posición para ser absolutos. Además, pongamos las propiedades top e left, ambas a cero. Y después de eso como definido ancho y alto, voy a establecer el ancho en 40%. En cuanto a la altura, hagámosla al 100%. Entonces en estos momentos no son factibles. Y para arreglarlo, voy a asignar a cada uno de ellos un color de fondo temporal diferente. Seleccionemos el primer semicírculo usando selector secundario enésimo y establecemos su color de fondo en verde Entonces voy a duplicar este código, cambiar el número que necesitamos aquí a S4, el color de fondo, va a ser azul. Y por último, seleccionemos la parte superior de medio círculo y fijemos su color de fondo en, digamos naranja. Bien, así que los tres desarrollos se colocan uno encima del otro Al principio, voy a hacer que la barra de progreso funcione en el hover para que sea más fácil de entender Y luego cambiaremos el hover y usaremos el evento scroll usando JavaScript. Entonces necesitamos rotar el primer semicírculo 180 grados. cuanto al segundo semicírculo, tenemos que girarlo 360 grados porque tenemos que llenar todo el círculo. En cuanto a la parte superior de medio círculo, me refiero a estos elementos naranjas, tenemos que hacerlo oculto. Entonces sigamos adelante y seleccionemos barra de progreso con hover, seguido del primer semicírculo Vamos a usar de nuevo enésimo selector hijo que necesitamos transformar con la función rotate Y como decíamos, el valor va a ser de 180 grados. Duplicemos este código. Cambia el nésimo número hijo, hazlo también. En cuanto al valor de la función de rotación, va a ser de 360 grados. Además de eso, necesitamos usar la transición para hacer que la rotación sea más suave. Entonces usemos la transición con los valores transforman. La duración para el primer semicírculo va a ser de 1 s Y también necesitamos usar aquí lineal. Entonces vamos a agarrar este código, pegarlo hacia abajo para el segundo semicírculo. Lo único que necesitamos cambiar es la duración. Hagámoslo 2 s. así que ahora si pasamos el cursor que los elementos girarán, ahora mismo vemos aquí solo elemento azul porque el verde es soltero Si hago una pausa aquí el fondo azul, entonces verás los elementos verdes. Entonces los elementos están rotando, pero de manera equivocada. Quiero decir que el origen de la transformación está configurado para censurar por defecto Pero en nuestro caso, tenemos que hacerlo bien al centro. Entonces usemos el origen de la transformación y hagamos que sea el centro correcto. Entonces en este caso, el origen de la transformación va a ser el centro del elemento. Pero del lado derecho, una vez que pasamos el cursor sobre la barra de progreso, tenemos que ocultar estos elementos anaranjados Entonces, seleccionemos la barra de progreso con la libración, seguida de la parte superior del círculo, y fijemos su opacidad a cero Entonces ahora las alturas del elemento una vez que pasamos el cursor sobre la barra de progreso Pero en realidad se esconde demasiado pronto. Tenemos que ocultarlo. Quiere que el elemento verde termine de girar. Entonces necesitamos ocultarlo después de 1 s. Vamos a usar la transición. Con opacidad. La duración va a ser 0 s. En cuanto al retraso, va a ser 1 s. Bien, entonces ahora todo funciona bien Ahora tenemos que cambiar los colores y también necesitamos hacer esos elementos a su alrededor. Los dos primeros desarrollos deben tener un color rojo. Es decir, el color B6 con cuatro ceros. En cuanto al tercer elemento va a ser blanco porque la barra de progreso en sí tiene el fondo blanco vino. Entonces ahora necesitamos ocultar esas partes exteriores de los elementos. Para ello, vamos a usar desbordamiento oculto. Ahora está oculto. Tenemos un resultado mucho mejor. Por último, tenemos que hacer visible el círculo negro. Así que vamos a eliminar display none. Ahora mismo. Ellos parte del círculo es visible porque terminó detrás de los elementos div. Para solucionarlo, usemos la propiedad index. Tenemos que asignarle algún valor superior a cero, digamos diez. Bien, ahora, si pongo el cursor sobre la barra de progreso, entonces se llenará muy bien con el color rojo Bien, así que ahora te hemos mostrado cómo crear una barra de progreso usando CSS Y ahora te vamos a mostrar cómo hacer tu trabajo en scroll usando JavaScript. Echemos un vistazo al proyecto terminado. Entonces, si me desplazo hacia abajo se llenará la barra de progreso. Y también la persona que valoras cambiará en consecuencia, que disminuirá una vez que nos desplazemos hacia arriba de nuevo a la parte superior. Primero, comentemos esos estilos. Quiero decir, estas toallas en hover. Después ve al archivo JavaScript. En primer lugar, voy a seleccionar los elementos div. Quiero decir, para los elementos div, que se colocan dentro de la barra de progreso. Sigamos adelante y comencemos con los medios círculos. Crear nueva variable y llamarla semicírculos. En este caso, estamos seleccionando dos elementos, por lo que necesitamos usar el método query selector all. Especificemos aquí el nombre de la clase, semicírculo. El siguiente elemento va a ser medio círculo superior. Así que vamos a duplicar esta línea de código. Cambiar el nombre de la variable. Necesitamos la parte superior de medio círculo. También necesitamos consultar el selector. En lugar de selector de consultas, todo método para el nombre de la clase va a ser la mitad de lo que se llama top. Duplicemos esta línea de código. Una vez más, cambiar el nombre de la variable. Va a ser círculo de barras de progreso. Y también cambiar el nombre de la clase. Necesitamos un círculo de barras de progreso. Bien, así se seleccionan todos los desarrollos. Siguiente Voy a adjuntar un evento scroll al documento. Vamos a usar el método add event listener. Necesitamos especificar aquí el evento va a ser Scroll. Y también necesitamos aquí una función de devolución de llamada que se ejecutará una vez que nos desplazemos por la página Entonces, como saben, la única rotación completa es igual a 360 grados. Tenemos que convertir la porción desplazada de la altura en grados. Antes de hacer eso, tenemos que definir un par de variables diferentes. El primero va a ser la ventana gráfica, altura de la página Vamos a crear nueva variable y llamarla ventana gráfica de página, altura Va a ser ventana en tu altura La siguiente variable va a ser la altura completa de la página. Así que vamos a crear la altura de la página. Debe ser igual a los documentos punto elementos del documento. Y entonces necesitamos la altura de desplazamiento. Entonces nuevamente, definimos aquí toda la altura de la página. Y la última variable va a ser esta parte arrastrada de la página Así que vamos a crear una nueva variable. Voy a llamarlo porción garabateada. Y debería ser igual a Ventana punto página Y offset. Bien, entonces ahora todo está preparado para convertir la altura de esta porción de crecimiento en los grados. Vamos a crear una nueva variable. Voy a llamarlo el grado de porción de desplazamiento. Y ahora tenemos que usar la siguiente fórmula. Necesitamos dividir la porción desplazada a la diferencia de la altura de la página y la altura de la ventana gráfica de la página Y tenemos que multiplicar el resultado por 360. Así que necesitamos a usted porción desplazada dividida por la diferencia de la altura de la página y la altura de la ventana gráfica de la página Tenemos que multiplicarlo por 360 grados. Sigamos adelante y veamos en la consola qué nos da esta variable. Vamos a correr a través de la consola se llama grado de porción. Entonces, inspeccionemos la página y cambiemos a la pestaña de la consola. Una vez que nos desplazemos hacia abajo por la página y vayamos al final de la misma, obtendremos los valores adecuados 0-360 grados. Bien, entonces ahora usando esta variable, rotaremos los semicírculos Entonces necesitamos recorrer ellos y rotar cada semicírculo. Estoy en el primer y segundo desarrollos dentro de la barra de progreso. Entonces, para recorrerlos, tenemos que usar uno de los métodos de ayuda de matriz llamados for-each Se necesita un parámetro, que va a ser la función de devolución Se ejecutará para cada elemento. La función de devolución de llamada en sí toma un parámetro y es el elemento actual en la lista Vamos a llamarlo elementos E L. Ahora tenemos que transformar cada elemento. Necesitamos transformar el estilo. Después abre las garrapatas hacia atrás. Necesitamos aquí rotar la función. Y como valor, tenemos que pasar el grado de porción de desplazamiento. Entonces ahora si nos desplazamos hacia abajo, entonces esta barra de desplazamiento empezará a sentirse. Una vez que alcanzamos la mitad, entonces tenemos que detener el primer semicírculo. Y también necesitamos ocultar el tercer elemento div. Estoy en el medio llamado top. Entonces necesitamos usar la declaración if donde tenemos que definir si el grado de porción Scott es mayor o igual a 180. Entonces, vamos a insertar tu condición mencionada. Si esta condición es verdadera, entonces tenemos que darle al primer semicírculo el valor fijo igual a 180 grados. Para seleccionar el primer semicírculo, tenemos que usar el índice número cero. Y entonces necesitamos transformar el estilo. Debe ser igual a rotar 180 grados. Entonces necesitamos ocultar la parte superior del medio círculo. Usemos estilo, construyamos opacidad y hagamos que sea igual a cero Entonces ahora, una vez que nos desplazemos hacia abajo, se llenará toda la barra de progreso . ¿Qué tenemos aquí? Un pequeño problema una vez que nos desplazamos hacia arriba y se llama grado de porción se convierte en menos de 180 grados. Tenemos que mostrar la parte superior trasera de medio círculo. Así que tenemos que crear la declaración else. Entonces tomemos esta línea de código, péguela aquí, y cambiemos este valor, conviértalo en uno. Así que ahora es se puede ver que todo funciona a la perfección. Lo único que hay que hacer es hacer que el valor porcentual funcione. En este caso, tenemos que convertir grados en un valor porcentual. Vamos a crear una nueva variable. Voy a llamarlo porción de desplazamiento por ciento. Entonces en este caso tenemos que dividir el grado de porción desplazada por 360 grados, y luego tenemos que multiplicarlo por 100 ¿Bien? Ahora tenemos que mostrar este valor como el contenido de la barra de progreso un círculo. Entonces usemos barra de progreso un círculo con contenido de texto. Después abre los backticks. Inserte aquí, porción desplazada presente, seguida del signo porcentual Entonces ahora mismo el valor porcentual funciona, pero aquí tenemos los decimales Para deshacernos de ellos, tenemos que usar uno de los métodos llamados Math.floor. Entonces ahora como puedes ver, todo funciona a la perfección. Y en realidad con el proyecto, ya terminamos 12. Proyecto 9 - Presentación de iconos de redes sociales: En este video, vamos a estar construyendo una presentación de diapositivas de los íconos de las redes sociales Va a ser una pequeña, pero creo que va a ser interesante antes de empezar a crear el proyecto, voy a describirlo. Entonces tenemos aquí una imagen de fondo a pantalla completa y un par de iconos de redes sociales bastante agradables Se están moviendo con algunas integrales. Y el icono en el centro se está volviendo más ligero. Para el resto de los iconos, son más oscuros por defecto. Entonces como dijimos, vamos a construir este proyecto con HTML, CSS y JavaScript. Entonces espero que todos ustedes ya conozcan los fundamentos de esas tres tecnologías. He creado una nueva carpeta en el escritorio llamada slideshow, en la que tengo otra carpeta para las imágenes Sigamos adelante y abramos esta carpeta y código VS. Voy a crear nuestros archivos de trabajo. El primero va a ser index.html. Entonces tendremos style.css y script.js. Vamos a abrir el archivo index.html y crear un documento HTML básico. Para eso, voy a usar Emmet. Necesitamos colocar aquí un signo de exclamación y luego golpear Tab o Enter Bien, después de eso, cambiemos el título. Eso parece algunos íconos de las redes sociales. Entonces voy a vincular archivos CSS y JavaScript. Vamos a abrir la etiqueta de enlace en el elemento head y especificar la ruta del archivo CSS. En cuanto al JavaScript, voy a abrir la etiqueta script abajo, justo encima de la etiqueta del cuerpo de cierre. Especifique aquí la ruta del archivo JavaScript. Después de eso, vamos a ejecutar el proyecto al navegador. Para eso, voy a usar un servidor en vivo, que nos permite ejecutar el proyecto en vivo en el navegador usando un servidor local. Y finalmente, coloquemos editor de texto y el navegador uno al lado del otro Así, y empieza. Así que estamos listos para crear un marcado HTML. Vamos a abrir la etiqueta div, que va a ser el envoltorio del contenido. Vamos a asignar a la presentación de diapositivas de la clase. En general, tendremos cinco iconos de redes sociales diferentes. Serán representados por las imágenes, y también serán envueltos por los elementos de enlace. Entonces es etiqueta de enlace abierto con un enlace de presentación de diapositivas de clase que instituye aquí e imagen Voy a seleccionar imagen llamada slideshow IMG one. Duplicemos el elemento de enlace cuatro veces y luego cambiemos rápidamente los números de los nombres de las imágenes. Bien, así que eso es todo sobre el marcado HTML. Todo está preparado y ahora podemos escribir algunos CSS. En primer lugar, voy a personalizar y aerear los íconos. Y después de eso, haremos que la presentación de diapositivas funcione usando JavaScript. Al principio, vamos a crear algunos estilos comunes y reiniciemos. Seleccionemos todos los elementos usando un asterisco. En primer lugar, voy a deshacerme del margen predeterminado y el relleno de cada elemento. Entonces pongámoslos a cero a ambos. Además, necesitamos dimensionamiento de cajas, border-box. Y voy a deshacerme de los estilos predeterminados de los enlaces. Usemos texto-decoración, ninguno. Entonces a lo largo de este proyecto, voy a usar una rampa como unidad de medida. Por defecto, 1 g equivale a 16 píxeles, porque el tamaño de fuente del elemento HTML es igual a 16 píxeles. Voy a convertir uno corrió en diez píxeles. Y para eso voy a disminuir el tamaño de fuente de los elementos HTML. Hagámoslo 62.5%. Bien, así que eso es todo sobre los estilos comunes. Vamos a seleccionar un envoltorio div elementos. En primer lugar, voy a definir, podemos escondernos, hagamos con el 100%. En cuanto a la altura, voy a fijarla al 100% de la ventana gráfica A continuación, voy a establecer la imagen como fondo de pantalla completa Pero antes de eso, usemos la función llamada gradiente radial. función de degradado radial establece la transición de color desde el centro. Entonces voy a especificar aquí dos colores diferentes. El primero va a ser 483 veces y la opacidad, 0.9 a cinco Eso es para el segundo color. Voy a insertar aquí color negro con la opacidad 0.9 a cinco Después de eso, definamos la URL. Voy a seleccionar imagen llamada bg dot PNG. También necesitamos aquí centrados en la posición y no repetir. Por último, definamos el tamaño del fondo. Hagámoslo cubrir Así que como pueden ver, tenemos aquí una imagen de fondo a pantalla completa A continuación, voy a colocar el icono uno al lado del otro para eso. Usemos flexbox. Necesitamos display flex. Y después de eso, alineemos los iconos y centremos verticalmente. Use alinear elementos. Centro. Además, vamos a crear algo de espacio en los lados izquierdo y derecho usando relleno. Voy a ponerla a cero y después a correr. Bien, veamos sobre el envoltorio. Cuidemos los íconos. Voy a disminuir su tamaño. Vamos a seleccionarlo primero enlace de presentación de diapositivas y hacer su ancho 20% Después de eso, tenemos que definir el ancho de la propia imagen. Entonces, seleccionemos elementos IMG y fijemos el ancho al 100 por ciento Entonces en este caso, la imagen ocupará el 100% del ancho del elemento padre. ¿Correcto? Eso es todo sobre el CSS. Por ahora. Tenemos que hacer que la presentación de diapositivas funcione usando JavaScript. Entonces es abrir este archivo script.js. En primer lugar, voy a seleccionar tus elementos div wrapper. Me refiero a la presentación de diapositivas, vamos a crear una nueva variable y llamarla presentación de diapositivas A continuación, seleccione el elemento utilizando el método selector de consultas. Tenemos que especificar aquí el nombre de la clase. Presentación de diapositivas. Bien, déjame decirte cómo vamos a hacer que funcione esta presentación de diapositivas Eliminaremos el primer icono de la lista, y lo volveremos a agregar a la lista como el último. Eso lo haremos con algunos intervalos y también con algunas transiciones suaves. Eso es todo sobre el proceso de la presentación de diapositivas. Como decíamos, necesitamos algunos intervalos. Y para eso voy a usar uno de los métodos incorporados llamado Set Interval. Se necesitan dos argumentos. La primera es una función de devolución de llamada, que se ejecuta después de cada intervalo En cuanto al segundo argumento, va a ser la cantidad del intervalo en sí. Vamos a cambiar las imágenes después de 3 s. Así que voy a pasar aquí 3,000, 3,000 milisegundos, lo que equivale a 3 s. Bien, así como dijimos, tenemos que quitar el primer icono y luego agregarlo a la lista como el último Entonces, antes que nada, seleccionemos el primer icono. Voy a crear nueva variable. Vamos a llamarlo primer icono. Voy a seleccionar el primer icono usando una de las propiedades llamadas primer elemento hijo. Quiero decir, va a ser el hijo de esta presentación de diapositivas. Entonces ahora se selecciona el primer icono, y para poder eliminarlo de los elementos div wrapper, voy a usar uno de los métodos dome llamado remove child. Entonces necesitamos presentación de diapositivas. A continuación, retire niño. Y como argumento, tenemos que pasar tu primer ícono. Como se puede ver después de cada 3 s, el icono. Entonces quitando, como decíamos, tenemos que volver a agregarlos a la lista. Y para eso, voy a usar otro método domo llamado append child Por defecto, agrega un elemento como último hijo. Entonces necesitamos presentación de diapositivas seguida del método append child. Y como argumento, tenemos que pasar aquí otra vez por un segundo. Bien, entonces como pueden ver, la diapositiva muestra todas las obras. Pero hay que agregarle un par de efectos diferentes. Lo primero que voy a hacer es eliminar el primer icono sin problemas con un efecto fade. Para ello, voy a crear una nueva clase en CSS. Vamos a llamarlo se desvaneció. Por lo que esta clase incluirá dos estilos. Para desvanecer los elementos, necesitamos hacer que la opacidad y el ancho, ambos sean cero. Así que pongamos la opacidad y el ancho a cero. Y además de eso, tenemos que usar transición para el primer icono. Para seleccionar el primer icono, voy a usar f selector hijo. Tenemos que especificar aquí uno. Y luego vamos a insertar tu transición con una duración de 0.5 s de opacidad con la misma duración Eso es todo sobre el CSS. Volvamos al archivo JavaScript. Ahora, tenemos que agregar clase desvanecida al primer icono. Entonces necesitamos aquí primer icono, seguido de la propiedad llamada class list, que nos da todas las clases del elemento. Entonces necesitamos usar el método llamado add. Y tenemos que especificar aquí el nombre de la clase se desvaneció. Ahora el icono se está quitando pero sin ningún efecto de fundido porque el efecto de transición necesita algo de tiempo. En realidad la mitad del segundo Tenemos que esperar la mitad de este segundo antes de eliminar el elemento de la lista. Para hacer eso, voy a usar uno de los métodos llamados setTimeout Nos permite ejecutar la función una vez con algún tiempo de retardo. Entonces este método toma dos argumentos. El primero es una función de devolución de llamada. Interfiquemos esas dos líneas. En cuanto al segundo argumento, va a ser un tiempo de retraso. En este caso, necesitamos la mitad de los segundos 500 milisegundos. Entonces ahora el icono se está quitando con un bonito efecto de fundido. Ahora tenemos que volver a agregarlo a la lista con un efecto fade. Para ello, tenemos que eliminar la clase fade out de los elementos. Necesitamos primer icono, seguido de la propiedad class list. Y entonces tenemos que usar el método llamado remove. Especificemos aquí el nombre de la clase fade out. Ahora el icono se agrega a la lista, pero sin ningún efecto de fundido. Porque de nuevo, tenemos que esperar la mitad del segundo. Así que necesitamos usar de nuevo la función de tiempo de espera establecido que inserte esta línea de código dentro de la función y también especifique el tiempo de retardo, 500 milisegundos Entonces ahora, todavía no tenemos aquí el efecto fade porque necesitamos definir la transición para el último icono. Vamos al archivo CSS. En realidad, necesitamos la misma transición que usamos para el primer icono. Entonces voy a agregar aquí solo el selector para el quinto icono. Entonces ahora mismo, todo funciona bien y podemos seguir adelante y encargarnos del segundo efecto. Es decir, tenemos que hacer que los íconos sean más oscuros por defecto. Y luego tenemos que hacerlos más ligeros una vez que ocupen el tercer lugar, en lo mínimo, como es en el proyecto terminado. En primer lugar, hagamos que todos los íconos sean más oscuros. Para eso, voy a usar una de las propiedades CSS llamada filter con una función llamada brillo. Vamos a insertar tu 0.1. Por lo que este valor significa que el elemento mantiene sólo el diez por ciento de su brillo predeterminado. Después de eso, voy a crear una nueva clase y CSS, que incluirá el mayor brillo. Y añadiremos esta clase al elemento usando JavaScript. Vamos a llamar a esta clase de luz que utilizar de nuevo filtro, donde la función de brillo como el valor de interés para usted, 1.5. Bien, volvamos al archivo JavaScript. Ahora tenemos que seleccionar el tercer icono y tenemos que agregarle una luz de clase recién creada. Vamos a crear una variable y llamarla tercer icono. Para poder acceder al tercer icono, voy a usar una propiedad llamada niños. Y luego entre corchetes, tenemos que especificar el número de los elementos. En este caso necesitamos tres. Entonces ahora hemos seleccionado el elemento y necesitamos agregarle luz de clase. Entonces necesitamos aquí icono de pie, punto, lista de clases, punto add. Y tenemos que especificar aquí el nombre de clase light. Ahora como puedes ver, el icono se está volviendo más ligero, pero mantiene el brillo. Entonces no necesitamos eso. Tenemos que quitar de nuevo la luz de clase. Tenemos que eliminarlo del hermano anterior del tercer icono Porque una vez que se mueve, entonces ya no es el tercer icono de la lista, sino el segundo que necesitamos aquí a través del icono punto, elementos anteriores hermanos, seguido de la propiedad class list Entonces necesitamos un método llamado remove. Y otra vez, clase como Bien, así que ahora todo funciona bien. Solo necesitamos agregar una transición a este efecto. Vamos al archivo CSS. Seleccione el tercer icono. Usa de nuevo enésimo selector hijo que transición Instituto con filtro 0.5 s. bien, así que ahora tenemos resultados mucho mejores Puedo, se está volviendo más oscuro sin problemas. Pero como puedes ver, necesitamos la transición una vez que el ícono se vuelve más ligero también. Entonces agreguemos una transición al filtro de luz de clase como la duración. Especificemos aquí 1.5 s. bien, entonces ahora todo estaba bien. Y antes de terminar este tutorial, voy a hacer una cosa más. Si vuelvo a cargar la página que los cinco iconos serán más oscuros. No necesitamos eso. Necesitamos que tu tercer icono sea más ligero por defecto. Y para ello, voy a agregar luces de clase al tercer icono y al archivo HTML. Bien, eso es. Por último ya terminamos. Hemos terminado de trabajar en los proyectos. Nuevamente, fue una pequeña, pero espero que haya sido interesante. Y lo disfrutaste. Nos vemos la próxima vez. 13. Proyecto 10 - Formularios con validación: Bien, así que es momento de empezar a trabajar en nuestro próximo proyecto En este video, vamos a estar construyendo formularios de inicio de sesión y registro. Hoy en día, hicimos formularios de inicio de sesión y registro en casi todos los sitios web. Entonces este tipo de proyectos te va a ser interesante y útil porque cuando trabajes en tus proyectos, debes saber cómo lidiar con estas cosas. Antes de comenzar a escribir el código, sigamos adelante y describamos el proyecto. Entonces aquí tenemos dos botones diferentes, inicia sesión y regístrate en la esquina superior izquierda de la página. Entonces tenemos aquí el rubro. Por defecto muestra el inicio de sesión pero lo programará usando JavaScript. Luego abajo, teníamos un par de campos de entrada y un botón de enviar. Por defecto, se muestran campos de entrada para iniciar sesión. Pero si hago clic en el botón Registrarse, entonces obtendremos aquí los campos de entrada para el registro. Además de eso, el proyecto incluye una validación de formulario. Por ejemplo, si vivo los campos de entrada vacíos y hago clic en el botón enviar, entonces obtendremos los mensajes de error diciendo que se requieren correo electrónico y contraseña. Si siento, por ejemplo, una de las entradas, digamos la contraseña y haga clic en el botón de enviar. Entonces el campo de entrada obtendrá un borde verde, lo que significa que hemos ingresado los datos válidos y el InputField Bien, Así que el proyecto va a responder a diferentes tamaños de pantalla. Si inspecciono la página y cambio al modo responsive, encontrarás que el proyecto responde. Construimos este proyecto para un tamaño de pantalla extra grande. Estoy en el tamaño de pantalla con 1920 piezas de ancho y 1080 pixeles de alto. Entonces, si estás usando un tamaño de pantalla relativamente más pequeño que el proyecto, puede que no te veas del todo bien durante el tutorial, pero no te preocupes al final del día, lo haremos receptivo. Mientras tanto, puede cambiar al modo de respuesta, establecer el ancho y la altura para el tamaño de pantalla extra grande. Y sígueme. Como dijimos, el proyecto se va a construir en base a HTML, CSS y JavaScript. Entonces espero que ya conozcas algunos conceptos básicos de esas tres tecnologías. Creo que estamos listos para comenzar. He creado una nueva carpeta en el escritorio llamada inicio de sesión, formulario de registro, que ahora mismo está vacía Sigamos adelante y ábralo en código VS y creamos los archivos de trabajo para HTML, CSS y JavaScript. Necesitamos index.html, luego style.css y script.js. A continuación, abra el archivo index.html e inserte aquí el documento HTML básico. Para eso, voy a usar un animado. Coloquemos aquí un signo de exclamación y presionemos Tabulador o respuesta Bien. Sigamos adelante y cambiemos el título. Te voy a insertar iniciar sesión, inscribirte formulario. Y luego después de eso, vinculemos los archivos CSS y JavaScript. Voy a abrir la etiqueta de enlace, especificar la ruta del archivo CSS. Entonces para vincular el archivo JavaScript, voy a abrir la etiqueta script a la derecha, sobre el cuerpo y el atributo source. Vamos a especificar la ruta del archivo. Por último, voy a ejecutar el proyecto al navegador. Para eso, usemos uno de los paquetes de código VS que se llama Live Server. Nos permite ejecutar el proyecto mintió al navegador y hacer actualizaciones sin actualizar la página cada vez. Para que puedas instalar y utilizar este paquete. Bien, coloquemos el editor y los navegadores uno al lado del otro, Y empezar. Como de costumbre, voy a empezar a crear el marcado HTML. Entonces vamos a abrir la etiqueta div, que va a ser el contenedor. Entonces voy a insertar tu elemento de encabezado H1 con un encabezado de clase. El rubro constará de dos elementos de span diferentes. Vamos a abrirlo con el encabezado de la clase, abarcar uno, instituir el signo de texto, y luego crear un segundo elemento span con encabezados de clase para insertar aquí Eso es todo sobre el rubro. A continuación, voy a crear botones. Entonces vamos a abrir la etiqueta div, que va a ser la envoltura de los botones. Voy a asignarle botones de clase. Después inserte los auriculares y elementos con el signo de clase en BTN Vamos a insertar tu inicio de sesión. Entonces voy a duplicar esta línea de código y cambiar el nombre de la clase. Tenemos que registrarnos e inscribirnos. A continuación, voy a crear un formulario, pero antes de eso, vamos a insertar aquí una etiqueta div que va a ser el fondo del formulario. Me refiero al triángulo como la clase científica para g. Entonces voy a abrir la etiqueta de forma. Tendrá dos clases distintas. El primero se va a formar. cuanto al segundo, vamos a insertar tu inicio de sesión En general, tendremos un solo elemento de formulario con cuatro campos de entrada diferentes. Y lograremos mostrar, iniciar sesión e inscribir partes usando JavaScript como etiqueta div abierta, que será el envoltorio del campo de entrada y párrafo. Vamos a asignarle envoltorio de entrada de formulario de clase. Usaremos el párrafo para mostrar un mensaje de error. Vamos a insertar aquí elemento de entrada con texto tipo. Además de eso, voy a agregarle un par de atributos asignados a las entradas de formulario de clúster. Entonces necesitamos el id, que va a ser username. Ahora, por último, usemos un atributo de marcador de posición que devaluará tu nombre Bien, eso es todo sobre el elemento input. Vamos a crear el párrafo con el mensaje de clase. Por defecto, voy a insertar aquí mensaje de error. Pero eventualmente definiremos los mensajes de error de JavaScript. Entonces se crea el primer campo de entrada. Sigamos adelante y dupliquemos el elemento tres veces y luego hagamos algunos cambios. Para la segunda entrada, necesitamos correo electrónico de identificación. También cambia el atributo de marcador de posición, ingresa tu dirección de correo electrónico. A continuación, tendremos entrada para la contraseña. Entonces cambiemos el tipo, hagamos una contraseña, hagamos una contraseña, y también cambiemos los atributos de ID y marcador Necesitamos una contraseña para ambos. ¿Bien? La última entrada va a ser para la confirmación de la contraseña. Entonces voy a hacer de nuevo el tipo de entrada, contraseña. En cuanto a la identificación va a ser pasaporte a. Por último cambiar el atributo placeholder, voy a hacer que confirme contraseña ¿Bien? El último elemento que vamos a crear en el documento HTML va a ser un botón submit. Así que vamos a abrir elemento de entrada con tipo submit. También agregue aquí el valor enviar. Y por último, usa tu formulario de clase btn. Bien, así que eso es todo con respecto al marcado HTML. Ahora tenemos que empezar a escribir el CSS. En primer lugar, vamos a crear algunos estilos de reset y comunes. Seleccionemos cada elemento usando un asterisco y eliminemos el margen predeterminado y el relleno. Voy a ponerlos a cero a ambos . Además de eso, vamos a establecer box-sizing border-box, y también se deshace del contorno predeterminado de cada elemento Vamos a establecer esquema a ninguno. A continuación, voy a cambiar la familia de fuentes. A lo largo de este tutorial, vamos a utilizar una de las fuentes de Google. Así que vayamos al sitio web de Google Fonts y busquemos una fuente llamada en escalera de consola. Después selecciona todos los estilos diferentes aquí. Agarra el enlace y pegarlo en el elemento head. Vamos a cambiar la familia de fuentes. Eso es inseguro en la escalera de consola y el monoespacio. Eso es una tontería sobre los estilos comunes y reset. Voy a usar RAM como unidad de medida en este proyecto. este momento, un rem equivale a 16 píxeles porque el tamaño de fuente del elemento HTML es igual a 16 píxeles. Por defecto, quiero convertir una RAM en diez píxeles. Y para eso, tenemos que disminuir el tamaño de fuente de los elementos HTML. Hagámoslo 62.5%. Entonces, como puedes ver, los elementos se hicieron más pequeños. Sigamos adelante y cuidemos el contenedor. Vamos a seleccionarlo. Y al principio definieron el ancho y la altura, voy a establecer con el 200 por ciento. En cuanto a la altura, voy a fijarla al 100% de la ventana gráfica Entonces voy a centrar el contenido. Y para eso, usemos flexbox. Tenemos que cambiar la dirección. Hagámoslo columna. Y luego para colocar el contenido en el centro, necesitamos justify-content center y align items center ¿Bien? Por lo que los elementos se colocan en el centro y con el contenedor estamos hechos. Sigamos adelante y personalicemos el encabezado. En primer lugar, cuidemos su posición. Voy a moverlo hacia arriba. Así que vamos a asignar a una posición absoluta. Y luego definir la posición superior, hacerla cinco rampa se considera, se posiciona el rumbo, y ahora voy a darle estilo al principio. Vamos a cambiar el tamaño de fuente, que sea siete RAM. Entonces voy a hacer la fuente más ligera usando el peso de la fuente 300. También cambia el color, hazlo Tres y cinco, tres y cinco A continuación, voy a crear algo de espacio entre las letras usando espaciado entre letras una habitación. También crea algún efecto de sombra. Usando sombra de texto. Vamos a asignar valores de verdad 0.2, 0.2, 0.5 RAM, y el color AAA. Ahora mismo, eso es lo del rubro. Sigamos adelante y personalicemos los botones. Al principio, voy a definir sus posiciones. Así que vamos a seleccionar elementos div envoltorio, que tiene los botones de nombre de clase, y establecer su posición en absoluto. Y luego definir las propiedades superior e izquierda. Voy a ponerlos a ambos en cinco rampas. Por lo que las casillas se colocan en la esquina superior izquierda de la página Y a continuación, los voy a colocar verticalmente en una columna. Para eso, usemos flexbox. Necesitamos display flex y flex direction columna. Bien, sigamos adelante y seleccionemos botones. Estoy en el elemento botón en sí. En primer lugar, voy a definir la anchura y la altura. Hagamos con diez RAM. En cuanto a la altura, voy a configurarlo para RAM. Y también cambia el color de fondo, hazlo blanco. Después de eso, cambiemos el tamaño de fuente. Voy a llegar a Ram. También cambia el color. Vamos a usar de nuevo color F cero, tres-cinco, tres-cinco. Entonces me voy a deshacer del borde predeterminado. Vamos a ponerla en ninguna. Además, voy a hacer las esquinas de las cajas alrededor de ellos usando border-radius con un valor de cinco rem A continuación, vamos a crear algo de espacio entre las letras usando espaciado entre letras 0.1 RAM. Entonces voy a crear un pequeño efecto de sombra. Entonces usemos tanto shadow con los valores 0.3, 0.3 RAM que 0.8 rem, el color E. Entonces necesitamos algo de espacio en la parte superior e inferior de los botones. Entonces usemos margin con los valores uno, RAM y cero. Y por último, vamos a cambiar el tipo de curso va a hacer que apunte. ¿Bien? Entonces los botones están estilizados y ahora tenemos que cuidar la forma Sigamos adelante y seleccionémoslo. Voy a hacer elemento de forma flexible contenedor. Entonces necesitamos display flex. Y también voy a cambiar la dirección. Vamos a establecer la dirección flexible para llamar. A continuación, cuidemos el envoltorio de entrada de formulario. Pero antes de eso quiero ocultar esos párrafos por un tiempo Así que vamos a seguir adelante y seleccionarlos y asignarles mostrar ninguno. Después de eso, vamos a seleccionar el envoltorio de entrada de formulario. Voy a crear algo de espacio en la parte superior e inferior usando margen. Vamos a establecerlo en 1.5 rem y cero. Bien, sigamos adelante y seleccionemos el elemento de entrada en sí. Y definir para el ancho y altura de caída. Voy a establecer el ancho a 50 RAM como altura total. Hagámoslo cinco RAM. También cambia el color de fondo, hazlo blanco. Entonces voy a aumentar el tamaño de la fuente. Hagámoslo 1.7 rem. Luego crea algo de espacio en los lados derecho e izquierdo dentro de las entradas usando padding, Hagámoslo 0.2 ram. Y por último, vamos a crear algo de espacio entre las letras usando menos puntos de espaciado para rampa. Entonces esos eran los estilos comunes de las entradas. Las entradas y el botón de enviar. Ahora voy a seleccionar la entrada de formulario en sí. Vamos a crear alguna sombra usando sombra de caja con el punto de valores que ejecutamos. Corrimos 0.5 rem. A continuación tenemos que llamar o E. Y también voy a agregar aquí un valor más. Quiero crear sombra dentro de la entrada. Y para eso tenemos que usar valor llamado recuadro. A continuación, cambiemos el color. Ves tu color 888. Bien, después de eso, vamos a deshacernos del borde predeterminado para todos los elementos de entrada Entonces voy a poner la frontera a ninguna. Y también voy a hacer esquinas redondeadas usando border-radius sea el valor de cinco rem ¿Bien? Así que ahora mismo, los elementos de entrada tienen una sombra de caja dentro de los campos, y voy a crearla fuera del elemento también Para ello, asignemos la propiedad box shadow al envoltorio de entrada de formulario. Son los mismos valores de verdad, 0.5 RAM tres veces. Y el color es decir Y además de eso, necesitamos para el radio con el valor cinco rampa. Ahora, cada campo de entrada tiene una sombra de caja dentro y fuera, lo que los hace lucir bien Vamos a seguir adelante y encargarnos de este botón de enviar vemos aquí solo el texto enviar. Entonces sigamos adelante y seleccionemos este elemento. Y al principio, crea sombra usando sombra de caja. Te voy a pasar valores 0.5 rem, 0.5 RAM, una RAM, y el color D, D, D. Además, cambiemos el color del texto. Vamos a usar de nuevo el color rojo al 03535. A continuación voy a crear algo de espacio en la parte superior e inferior usando margen. Vamos a ponerlo en dos ram y cero. Así que vamos a crear algo de espacio entre las letras. Utilice puntos de espaciado lateral para correr. Y luego hacer que la fuente en negrita esté usando font-weight bold. El botón de enviar se ve bien. A continuación, quiero crear un pequeño efecto hover. Voy a aumentar ligeramente las sombras masivas una vez que coloquemos el cursor sobre el botón Así que seleccionemos Formar btn con hover. Y asignado caja de dientes sombra, donde los valores 0.5 RAM, 0.5 RAM a RAM, y el color d, d, d. ¿Bien? Entonces lo último que tenemos que hacer antes de agregar la funcionalidad a nuestro proyecto es crear un fondo. Como saben, tenemos un elemento div vacío en el documento HTML con el formulario de clase PG. Entonces sigamos adelante y seleccionemos este elemento. Y al principio, pongamos su posición a absoluta. Entonces voy a establecer ancho y alto, ambos a 65 RAM. También usa aquí caja sombra con 1.5 redondo tres veces y el color ddd Por último, quiero rotar este elemento 45 grados y creará un efecto de triángulo. Entonces usemos Transformar con la función rotate e insertando aquí 45 grados. Entonces como puedes verlo, ya terminamos con los antecedentes. En realidad. Ahora mismo tenemos un pequeño problema aquí. No puedo enfocarme en los insumos. Entonces para arreglar eso, vamos a asignar al elemento formulario la propiedad de índice Z con algún valor mayor, digamos 100. Bien, entonces ahora el problema está arreglado y en realidad con esta Tailandia, terminamos por ahora Necesitamos agregar alguna funcionalidad al proyecto. Antes de empezar a escribir algo de JavaScript, quiero hacer un par de cosas y CSS. Una vez enfocamos las entradas, entonces quiero aumentar la sombra de caja dentro del campo de entrada Entonces voy a seleccionar entrada de formulario con un enfoque pseudo-clase Y luego inserta tu sombra de caja con los siguientes valores. Cinco rampa, 0.5, rem una RAM que el color E. Y también necesitamos aquí el valor en conjunto. Después usa transición. Quiero asignar propiedad de transición a todos los elementos de entrada incluyendo el botón de enviar porque también tiene un efecto de sombra de caja en sin embargo, se define transición con los valores box shadow y 0.3 s. Bien, entonces ahora tenemos un efecto mucho mejor. Voy a cambiar el curso de tipo para el botón de enviar. Entonces hagámoslo puntero. Bien, ahora es el momento de agregar alguna funcionalidad al proyecto Echemos un vistazo a la versión terminada. Por cierto, no tenemos aquí el fondo del triángulo porque el proyecto terminado es todo nuestro responsive. Voy a programar esos dos botones. Como puedes ver por defecto, el botón de inicio de sesión tiene un color de fondo diferente Y una vez que hagamos clic en el botón Registrarse, entonces los colores de fondo cambiarán. Además de eso, la segunda parte del rubro está cambiando en consecuencia. Y también los campos de entrada adecuados para mostrar OnClick. Vamos a hacer esas tres cosas. Al principio, deshagamos del color de fondo blanco predeterminado de esos botones. Luego selecciona el botón de inicio de sesión y cambia el color de fondo Voy a usar tu color E7, E7, E7. Después selecciona el botón Inscribirse y haz que sea color de fondo blanco. Bien, ahora voy a cambiar los colores de fondo onclick Pasemos al archivo script.js. Así que tenemos que adjuntar a ambos botones oyentes de eventos con el evento click Después una vez que hagamos clic en el botón Registrarse, necesitamos agregar al contenedor una nueva clase la cual será utilizada en CSS Vamos a definir nuevos estilos con la ayuda de esta clase. Entonces, antes que nada, sigamos adelante y seleccionemos contenedor. Voy a crear un nuevo contenedor variable. Y luego seleccione contenedor usando el método selector de consultas. Tenemos que especificar aquí el contenedor de clase. Después de eso, voy a seleccionar el botón de registro y adjuntarlo y el oyente de eventos Así que sigamos adelante y utilicemos de nuevo query, seleccionemos un método y especifiquemos aquí el nombre de la clase, regístrate btn Luego adjuntarlo en el oyente de eventos con un evento de clic. Y también tenemos que pasar aquí la función callback, que se ejecutará una vez que hagamos clic en el botón Cuando hacemos clic en el botón Registrarse, entonces tenemos que agregar al contenedor una nueva clase. Entonces necesitamos aquí contenedor, seguido de la propiedad class list, que almacena todas las clases que tiene el elemento. Entonces para agregar la clase al contenedor, voy a usar un método llamado add. Dentro de los paréntesis. Tenemos que especificar el nombre de la clase. Vamos a llamarlo cambio. Bien, vamos al archivo CSS y seleccionemos el botón de registro, pero con el cambio de clase Y luego establece el color de fondo en E7, E7, E7. Entonces ahora si hago clic en el botón Registrarse, entonces su color de fondo cambiará. Pero en realidad no es suficiente. Como ves, el botón Iniciar sesión todavía tiene el color de fondo gris. Así que volvamos al archivo JavaScript. Ahora tenemos que adjuntar al botón Iniciar sesión y al oyente de eventos Y tenemos que quitar el cambio de clase del contenedor. Así que sigamos adelante y seleccionemos el botón Iniciar sesión usando el método QuerySelector y luego adjuntamos a él el oyente de eventos Hagamos una pausa aquí, haga clic en el evento y también la función de devolución Entonces como dijimos, tenemos que quitar clase cambiada en el contenedor. Sigamos adelante y agarremos esta línea de código. Y en lugar de método llamado add, usemos remove. Después ve al archivo CSS. A diferencia del botón Registrarse, seleccione el botón de inicio de sesión con la clase, cambie y establezca su color de fondo en blanco Ahora, como pueden ver, todo se ve bien. Los colores de fondo están cambiando. Lo único que tuvo que hacer es agregar un efecto de transición a los botones. Entonces usemos transición con color de fondo y con la duración 0.3 s. bien, entonces ahora tenemos un efecto mucho mejor A continuación, voy a encargarme del rumbo. Una vez que pudiéramos hacer botones, deberíamos cambiar la segunda parte del encabezado en consecuencia. Al principio, voy a cambiarlo sin ningún efecto. Y luego una vez que logramos cambiar el contenido, entonces agregaremos algunos efectos agradables. Vamos al archivo JavaScript. Y si primero, seleccionemos el segundo elemento span en el encabezado. Voy a crear nueva variable. Vamos a llamarlo Encabezados Segunda parte. Y luego seleccione elementos span usando el método QuerySelector. Hagamos una pausa aquí. Nombre de clase encabezado abarcan dos. Entonces para cambiar el contenido de los elementos, voy a usar una de las propiedades llamadas text content. Entonces necesitamos arenque engendrar dos, seguido de la propiedad textContent, y tenemos que asignarle arriba Vamos a copiar este código. Pégalo abajo y cámbialo hacia arriba a E. Así que si hago clic en los botones, entonces el contenido cambiará en consecuencia. Todo funciona bien. Y ahora como dije, voy a agregar algunos efectos agradables a este cambio. Volvamos a echar un vistazo al proyecto terminado. Entonces cuando hago clic en los botones, entonces el cuadro blanco se mueve de derecha a izquierda y crea un bonito efecto. Esta caja blanca va a ser el después de que sean los pseudo elementos En primer lugar, vamos a crear estos elementos. Necesitamos escondite dos, seguido de los pseudo elementos F2 Al principio, definamos un contenido. Voy a hacerlo vacío. Y luego establecer la posición en absoluto. Voy a definir la posición de este elemento de acuerdo a su padre, que es el elemento span en sí mismo. Así que voy a asignar al elemento span posición relativa. Después defina el ancho y alto de la caja. Voy a establecer ambos al 100% y también darle algunos fondos temporales diferentes al color blanco porque quiero hacer visible la caja. Vamos a usar aquí color gris claro. Entonces ahora la caja es visible. Y a continuación voy a definir su posición Por defecto, la voy a colocar del lado derecho. Vamos a establecer la posición correcta en -100%. Bien, así que cuando haga clic en el botón Inscribirse, este cuadro debería moverse hacia el lado izquierdo Y para lograrlo entonces voy a utilizar de nuevo el cambio de clase. Seguido de los encabezamientos abarcan dos con después de pseudo elementos Para mover los elementos, voy a fijar la posición correcta 200 por ciento. Ahora, si hago clic en los botones entonces la caja se moverá. Vamos a agregarle un poco de transición. Vamos a asignarle, ¿verdad? Y 0.6 s. Ahora la caja se mueve con una transición suave. Se puede ver cuando el cuadro se mueve hacia el lado izquierdo, luego termina encima del rumbo. Estoy en el primer elemento span. Así que tenemos que arreglar eso y podemos manipular con la propiedad z-index Seleccionemos el primer elemento span, que tiene la clase heading spine one, y establecemos la propiedad index en diez. Bien, entonces ahora el problema está arreglado y lo único que hay que hacer es agregar algún tiempo de retraso antes de que se cambie el continente. Porque ahora mismo al principio el contenido está cambiando y luego la caja se está moviendo. Y en realidad no se ve bien. Voy a crear delay usando una de las funciones incorporadas llamada setTimeout Vamos al archivo script.js e insertemos aquí. Establecer tiempo de espera. Esta función toma dos argumentos. La primera es la función callback, que se ejecuta después de algún tiempo Y la cantidad de estos tiempos va a ser el segundo argumento. Ejecutemos esta línea de código. En cuanto al tiempo de espera, es necesario especificarlo en milisegundos Entonces vamos a insertar un año, 200. Vamos a copiar este código y pegarlo aquí abajo. Voy a cambiar a E. Así que ahora si hago clic en los botones, entonces el efecto funcionará bien. Lo único que tuvo que hacerlo para deshacerse de este color temporal y entrevistar color blanco. Bien, entonces ahora tenemos un efecto agradable y genial. Bien, entonces con el rubro ya terminamos y ahora tenemos que encargarnos de los campos de entrada Por defecto, necesitamos mostrar las entradas de correo electrónico y contraseña n. Una vez que podríamos estar botón de registro, entonces tenemos que mostrar de nuevo el nombre y el apellido más. Así que sigamos adelante y ocultemos el primer y el último campo de entrada. Voy a seleccionarlos usando el selector f child. En realidad va a seleccionar el envoltorio de entrada de formulario. Necesitamos aquí F niño uno. Después duplique este selector y cambiando el número. Inserte aquí para. Entonces para ocultar esos elementos, voy a usar visibilidad oculta y opacidad cero Entonces, como puedes ver, las entradas están ocultas, pero ahora el botón de enviar está demasiado lejos de esas entradas. Entonces, vamos a encargarnos de eso. Voy a poner posición a relativa. Y luego con el fin de mover el elemento arriba de la posición superior con un valor menos seis. Ahora, cuando hacemos clic en el botón Registrarse, pero tenemos que hacer un par de cosas. Tenemos que mostrarlo de nuevo. La primera y la última entrada. Voy a duplicar este código. Entonces agreguemos a ambos selectores el cambio de clase. Entonces necesitamos cambiar los valores. En lugar de visibilidad oculta, necesitamos visibilidad visible y opacidad uno Además de eso, necesitamos mover este botón de envío de nuevo a su posición predeterminada. Entonces, seleccionemos el botón Enviar con cambio de clase y configuración posicionados en una rampa. Entonces, si hacemos clic en el botón Inscribirse, entonces todo va a funcionar bien. Ahora para que este cambio sea más agradable, tenemos que usar la transición Al principio. Vamos a agregar una transición a los raperos de entrada Necesitamos tus valores todos y 0.3 s. Entonces necesitamos hacer la transición con el cambio de clase. Y también necesitamos que uses algún tiempo de retraso. Entonces, cuando hagamos clic en el botón Registrarse, entonces esta transición funcionará. Y una vez que hagamos clic en el botón Iniciar sesión, entonces esta transición funcionará Bien, así que con los campos de entrada, terminamos. Agreguemos una transición al botón de enviar. Por defecto, voy a establecer la transición a la cima. Entonces la duración 0.3 s, y también el tiempo de retardo 0.3 s. Y también necesitamos la transición aquí con el valor es superior y 0.3 s. así que si hago clic en el botón Registrarse, entonces sometemos el botón se moverá sin problemas. Pero una vez que haga clic en el botón Iniciar sesión, entonces no tendremos ningún efecto de transición. La razón es que usamos transición con elementos de entrada. Y en realidad este selector tiene la mayor precedencia Así que voy a deshacerme de la transición de aquí y agregar box-shadow abajo abajo en ambos casos Entonces ahora si pruebo, entonces todo va a funcionar perfectamente. Bien. Entonces lo siguiente que tenemos que hacer es validar todos esos campos de entrada. En primer lugar, voy a seleccionar los cuatro elementos de entrada y almacenarlos en las variables. Sigamos adelante y creamos la primera variable, que va a ser username. Como recuerda, los elementos de entrada tienen los ID. Entonces voy a seleccionar nombre de usuario usando el método get element by ID. Tenemos que pasar el nombre de usuario ID. Duplicemos esta línea de código tres veces y cambiemos los nombres de las variables y también los ID. El segundo va a ser el correo electrónico. Entonces tendremos contraseña y contraseña también. Bien, al principio vamos a comprobar si los campos de entrada están vacíos o no Voy a crear una función. Sigamos adelante y llamémoslo verificar campos obligatorios. Voy a usar aquí la función de flecha. Esta función tomará un parámetro que va a ser una matriz, e incluirá todas las amplitudes Entonces como parámetro, voy a insertar su matriz de entradas. Entonces, para verificar si los campos de entrada están vacíos o no, al principio necesitamos recorrer la matriz. Y para eso, voy a usar uno de los métodos de ayuda de matriz llamados para H. Se necesita un argumento que va a ser la función de devolución Esta función en sí toma un parámetro y voy a pasar tu entrada. Va a ser el elemento de entrada actual Durante el bucle. Bien, entonces ahora necesitamos verificar si el valor de la entrada está vacío o no Entonces necesitamos usar declaraciones if else. Y como condición, voy a pasar aquí, entrada punto valor triple igual a cadena vacía. En realidad, el valor de entrada no es suficiente aquí porque si ingresamos algo en los campos de entrada con un espacio en blanco, entonces este espacio en blanco será reconocido como la parte del valor que no necesitamos Entonces para evitar este tipo de cosas, quiero decir, para ignorar los espacios en blanco, podemos usar uno de los métodos llamados trim ¿Bien? Entonces, si esta condición es verdadera, entonces tenemos que mostrar un mensaje de error. Sólo pongamos aquí el comentario. Y si es falso, entonces necesitamos unas declaraciones else en las que tengamos que cambiar el color del borde de las entradas a verde. Entonces instituyamos un éxito por un tiempo. Entonces para hacer esas dos cosas, voy a crear dos funciones distintas. Empecemos con el mensaje de error. Voy a crear una nueva función. Vamos a llamarlo error. Tomará dos parámetros. El primero van a ser los elementos de entrada. En cuanto al segundo, va a ser un mensaje. Así que ahora necesitamos acceder al envoltorio de entrada de formulario, que es un elemento padre de la entrada. Añadiremos una nueva clase al envoltorio. Y con la ayuda de esta nueva clase, quien logrará mostrar un mensaje de error. Bien, sigamos adelante y creamos una variable. Voy a llamarlo envoltorio de entrada. Entonces, para obtener acceso al envoltorio de entrada, necesitamos entrada seguida de la propiedad llamada elemento padre. Ahora tenemos que añadir una nueva clase al envoltorio de entrada. Y para eso, voy a usar una de las propiedades llamadas className Vamos a insertar tu clase. Digamos error. En realidad, este elemento tiene su propia clase, que es un envoltorio de entrada de formulario. Si vivimos aquí solo un error, entonces sobrescribirá la clase existente Entonces para evitarlo, vamos a insertar aquí formulario capaz de rapero también. Bien, a continuación voy a seleccionar el párrafo. Podemos hacerlo usando documento, pero en este caso, bajo el primer párrafo encontrado se seleccionará. Entonces, en lugar de documentos, voy a usar un envoltorio de entrada seguido del método selector de consultas. Dentro del paréntesis, tenemos que especificar la clase del mensaje de párrafo Bien, ahora necesitamos cambiar el contenido del mensaje de error Para ello, vamos a usar la propiedad textContent y debería ser igual al mensaje La función para el mensaje de error está lista. Podemos llamarlo abajo dentro de la declaración if. Se deben tomar dos argumentos. El primero va a ser el insumo también. El segundo va a ser el mensaje. Así que vamos a abrir las garrapatas de nuevo porque voy a usar los literales de plantilla Entonces te voy a pasar El ID de la entrada. Como saben, las cuatro entradas tienen los ID. Entonces debe ser seguido por el texto que se requiere. ¿Bien? Para poder ejecutar este código, tenemos que llamar a esta función. Y debería suceder una vez que enviemos el formulario. Por lo tanto, necesitamos adjuntar al formulario elementos de escucha de eventos con un evento submit Al principio, seleccionemos el elemento form. Vamos a crear una nueva variable y seleccionar los elementos del formulario utilizando el método selector de consultas. Después adjunto a él y oyente de eventos. Voy a pasar su evento de envío. Y también la función callback, que se ejecutará una vez que enviemos el formulario Al principio, vamos a ejecutar algo a la consola, digamos presentado. Entonces, si hago clic en el botón enviar, entonces nos enviaremos en la consola. Pero como puedes ver, está parpadeando. Y sucede porque por defecto, botón Enviar vuelve a cargar la página Para evitar este comportamiento, tenemos que usar un método llamado prevent default, y tenemos que adjuntarlo al objeto event. Así que vamos a pasar incluso objetos, y luego usar el método prevent default, que se adjuntaría al objeto event. Ahora, si hago clic en el botón enviar, entonces se solucionará el problema. Así que ahora podemos llamar a la función check required fields. Debería tomar un argumento que va a ser una matriz de campos de entrada. Entonces pasemos las cuatro entradas. Nombre de usuario, correo electrónico, contraseña y contraseña también. Bien, entonces en este momento no veremos los mensajes de error porque tenemos que escribir algunos CSS. Ahora mismo, los párrafos están ocultos, así que voy a hacerlos visibles. Vamos a deshacernos de mostrar ninguno. Entonces vemos aquí mensajes de error codificados. Y si hago clic en el botón enviar, entonces obtendremos los mensajes de error, que acabamos de definir desde el JavaScript. Si ingreso algunos caracteres en una de las entradas, entonces obtendremos un mensaje de error del campo de entrada vacío. Sigamos adelante y personalicemos el párrafo. En primer lugar, voy a fijar su posición a absoluta. Entonces para posicionar el párrafo de acuerdo con el envoltorio de entrada, vamos a asignarle posición relativa. Y luego agregar algunos estilos más al párrafo. Voy a definir la posición izquierda y llegar a RAM. Después cambia el tamaño de fuente, hazlo un punto a la RAM. Además, voy a hacer la carpeta de fuentes usando font-weight 700 Luego crea algo de espacio entre las letras usando el espaciado entre letras. 0.1 RAM. También transforma texto en mayúsculas. Luego crea algo de espacio en la parte superior del elemento usando margen superior un rango. Y por último, cambia el color, hazlo F5, F5, E5 Bien, entonces el párrafo está personalizado. Por defecto, debe estar oculto y necesitamos mostrar mensajes de error en Enviar. Entonces vamos a ocultar los párrafos usando visibilidad oculta y opacidad a cero Entonces ahora por defecto, los mensajes de error están ocultos y para poder mostrarlos, tenemos que usar error de clase. Seguido del mensaje. Tenemos que pasar aquí, visibilidad visible, y también opacidad uno Por último, usemos la opacidad del Instituto de Transición y la duración 0.3 s. Entonces, si hago clic en el botón enviar, entonces obtendremos nuestros mensajes con buena transición En realidad, tenemos aquí un pequeño problema como lo veo para el último elemento de entrada, tenemos un mensaje de error diciendo que se requiere contraseña. Y en realidad no tiene sentido. Quiero cambiar este mensaje. Para eso, necesitamos usar otra sentencia if en la que tenemos que verificar si el ID de la entrada es igual a contraseña también. Entonces pongamos aquí esta condición. Entonces si esto es cierto, entonces tenemos que llamar a la función llamada error. Tenemos que pasar tus entradas y el mensaje de error. Se requiere la confirmación de la contraseña. A continuación, necesitamos usar la declaración L. Y tenemos que pasar aquí esta línea de código. Ahora bien, si probamos que todo va a funcionar bien. Ahora mismo con los mensajes de error ya terminamos. Sigamos adelante y cuidemos el éxito. Si ingresamos algunos datos en los campos de entrada, entonces tenemos que hacer que el borde de la entrada sea verde. Para eso, voy a usar la técnica similar. Vamos a crear una nueva función llamada éxito. Tomará un parámetro uno que va a ser la entrada. Así que de nuevo, tuvimos que acceder al envoltorio de entrada y agregarle una nueva clase. Vamos a crear un envoltorio de entrada variable, que debe ser igual al elemento padre del nodo de entrada. Entonces tenemos que añadir una nueva clase del envoltorio de entrada. Necesitamos el nombre de clase de punto envoltorio de entrada. Y nuevamente, tenemos que pasar aquí dos clases. El primero es la clase del envoltorio de entrada, me refiero al envoltorio de entrada de formulario. Y entonces tenemos que pasar tu éxito. Bien, vamos al archivo CSS y seleccionemos el elemento de entrada con un éxito de clase y le demos un borde verde. Hagamos una pausa aquí. 0.1 corrió sólido, el color para 14. Proyecto 11 - Calendario: Bien, así que sigamos adelante y nos ocupemos de nuestros próximos proyectos En esta sección, vamos a estar creando el calendario. Entonces tenemos aquí un fondo oscuro a pantalla completa y en el centro de la página, vemos el calendario Nos muestra el mes actual con la fecha actual. Abajo, tenemos los días de semana seguidos de todo el mes. Se puede ver que se destaca el día actual del mes. Además, tenemos aquí dos flechas. Si hacemos clic hacia abajo, entonces navegaremos a las matemáticas siguientes y anteriores Para que puedas consultar cualquiera de las fechas en el futuro o en el pasado. Bien, así que eso es lo que vamos a crear. He creado una nueva carpeta en el escritorio llamada calendar. Sigamos adelante y ábralo en código VS. Voy a crear los archivos de inicio para HTML, CSS y JavaScript. Llamémoslos index.html. Después style.css y script.js. Después abre el archivo index.html y crea el documento HTML básico. Voy a usar animate. Coloquemos aquí el signo de exclamación y pulsemos Enter o tab Aquí vamos. Sigamos adelante y cambiemos el título. Voy a insertar tu calendario. Entonces voy a vincular los archivos CSS y JavaScript al HTML. Vamos a abrir la etiqueta de enlace y especificar la ruta del archivo. En cuanto al JavaScript, voy a abrir la etiqueta script justo encima de la etiqueta de cuerpo de cierre. Y luego tenemos que indicar ruta del archivo en atributo fuente. Por último, voy a lanzar el proyecto al navegador. Para eso, voy a usar uno de los paquetes CSS llamado servidor en vivo. Nos permite ejecutar el proyecto a la vida del navegador y realizar los cambios y actualizaciones sin refrescar la página cada vez, recomiendo descargar e instalar este paquete. Bien, por último, voy a colocar el editor y el navegador uno al lado del otro, el editor y el navegador uno al lado del otro, así. Y empezar. Primero, voy a crear el marcado HTML. Usaremos algunos datos estáticos, pero finalmente, crearemos esos datos a partir de JavaScript dinámicamente. Vamos a abrir la etiqueta div, que va a ser el contenedor. Entonces necesitamos otro default, el calendario mismo. Por lo que el calendario constará de tres partes principales. Tenemos un mes en curso con ese fondo verde. Entonces tendremos los días de la semana y finalmente los días del mes. Así que vamos a abrir la etiqueta div. Voy a asignarle la boca de clase. Al principio voy a instituir la flecha izquierda. Debe estar representado por el icono Font Awesome. Entonces necesitamos traer el Font Awesome CDN. Así que sigamos adelante y busquemos Font Awesome CDN JS. Ve al primer enlace, luego selecciona CSS y toma el enlace desde aquí. Necesitamos abrir la etiqueta de enlace en el elemento head y pegar el enlace como el valor del atributo h reference. Bien, entonces vamos a abrir el elemento I con las siguientes clases. Necesitamos F a, S, F un ángulo a la izquierda. Además de eso, voy a asignarle otra clase para JavaScript. Vamos a llamarlo preparación. Quiero decir anterior. A continuación necesitamos el elemento div, que incluirá el nombre del mes y también la fecha en que se le asigna a la fecha de la clase. Entonces voy a pasar su elemento de encabezado H1 con el contenido puede que vaya seguido del párrafo donde tendremos día laborable, viernes, entonces debería ser seguido por el mes 29 de mayo, y luego necesitamos año 2020 Así que de nuevo, ahora mismo esas son las fechas codificadas, pero las haremos dinámicas más adelante A continuación, necesitamos insertar aquí otra flecha. Estoy en la flecha derecha para los próximos meses. Entonces voy a abrir I elemento con la clase es FAS, FAA ángulo, ¿verdad Y también tenemos que escuchar la clase a continuación. Bien, entonces ya está lista la primera parte del calendario. Pasemos a la siguiente parte. Tenemos que crear los días de la semana. Así que vamos a abrir la etiqueta div, que va a ser la envoltura. Vamos a asignar dos días de la semana y luego insertarte los siete días de la semana. Voy a insertar tu etiqueta div con un contenido. Dom domingo Luego duplicarlo seis veces y cambiar los días de la semana. Necesitamos lunes, martes. Entonces tendremos miércoles, jueves, viernes y finalmente sábado. Bien, entonces con la segunda parte, ya terminamos. Sigamos adelante y creamos la tercera parte en la que tendremos los días del modelo actual. Vamos a abrir la etiqueta div con los días de clase. Entonces antes que nada, voy a insertar aquí un par de días del mes anterior. Vamos a abrir la etiqueta div con una preparación de clase, fecha y posterior 26. Después duplica este elemento div cuatro veces y cambia las fechas. Necesitamos 27. A continuación tendremos 28, luego 29.30. Bien. El siguiente son los días del uno al 31. No voy a escribir cada fecha por separado. Entonces para que este proceso sea simple, voy a usar m it, necesitamos la etiqueta div, luego un asterisco, y 31 Y luego tenemos que insertar signo de dólar dentro de las llaves rizadas Entonces aquí vamos. Tenemos los números del uno al 31. Además de eso, voy a instituir un par de días a partir del próximo mes. Entonces, vamos a crear desarrollos con la próxima fecha de clase , instituir uno, luego duplicarlo cinco veces y cambiar los números del dos al seis. Bien, en realidad, con el marcado HTML, ya terminamos. Ahora tenemos que empezar a personalizar el calendario. En primer lugar, vamos a crear algunos estilos de reset y comunes. Voy a seleccionar cada elemento usando un asterisco. Entonces vamos a deshacernos del margen predeterminado y relleno de los elementos. Voy a ponerlos a cero a ambos . Además de eso, voy a establecer box-sizing border-box. A continuación, voy a definir la familia de fuentes. A lo largo de este proyecto, utilizaremos una de las fuentes de Google. Así que vayamos al sitio web de Google Fonts. Después busca arenas movedizas. Voy a seleccionar esos diferentes estilos. Después agarra el enlace y pegarlo en el elemento head. A continuación, definamos font-family para cada elemento. Voy a ponerla en arenas movedizas. San-serif. Bien, así que eso es todo sobre el reset y los estilos comunes. Como puedes ver, se aplican a todos los elementos de la página. A lo largo de este proyecto voy a utilizar una RAM como unidad de medida. este momento, un rem es igual a 16 píxeles porque el tamaño de fuente del elemento HTML es igual a 16 píxeles. Quiero convertir 1 g en diez pixeles. Y para eso, tenemos que disminuir el tamaño de fuente de los elementos HTML. Hagámoslo 62.5%. Entonces, como puedes ver, los elementos se hicieron un poco más pequeños. Bien, entonces ahora es el momento de trabajar en el contenedor. Quiero expandirlo a toda la página. Así que vamos a seleccionarlo y definir el ancho y alto. Voy a establecer con el 200 por ciento. En cuanto a la altura, hagámosla al 100% de la ventana gráfica. Entonces voy a cambiar el color de fondo. Usemos tu color 12121. Y también cambiar el color del texto, hacerlo claro usando el color E. A continuación, voy a colocar el calendario en el centro de la página. Y para eso, usemos flexbox. Necesitamos display flex. Entonces para el centrado horizontal, voy a usar justify-content En cuanto al centrado vertical, necesitamos alinear los elementos al centro Muy bien, eso es lo del contenedor. A continuación voy a personalizar el calendario. Estoy en los elementos de tubo que envuelve el contenido del calendario. En primer lugar, voy a definir ancho y alto. Vamos a configurar con 245 RAM. En cuanto a la altura. Hagamos 50 para rampa. También voy a cambiar el color de fondo. Vamos a llegar a cinco veces y luego siete, va a ser el color oscuro. Y luego pongamos box shadow a 0.5 rampa tres rem y el valor RGBA con un color negro y con opacidad 0.4 Bien, así que con el elemento calendar div, ya terminamos. Sigamos adelante y personalicemos las partes individuales de la misma. Voy a empezar por la boca Vamos a seleccionarlo y al principio, definir el ancho, hacerlo al 100%. Entonces voy a establecer la altura a 12 RAM y cambiar el color de fondo. Hazlo 16756. Bien, a continuación voy a usar flexbox para colocar los elementos horizontales en una fila y también para centrarlos verticalmente. Usemos display flex. Entonces con el fin de crear algún espacio entre los elementos, vamos a utilizar justificar el espacio de contenido entre. Y también necesitamos alinear los artículos al centro. Bien, después de eso, voy a crear algo de espacio en los lados derecho e izquierdo dentro de los elementos Para eso, vamos a usar padding y ponlo a cero en la parte superior e inferior y para correr por los lados izquierdo y derecho. Además, necesitamos alinear el texto en el centro. Y finalmente usar sombra fiscal con los valores 0.3, 0.5 RAM, y el valor RGBA con color negro y con la opacidad Bien, así que a continuación voy a darle estilo a los elementos individuales del elemento div boca Sigamos adelante y comencemos con las flechas. Seleccione el elemento I. Establezca su tamaño de fuente en 2.5 rem. Y también hacer puntero del cursor. A continuación tenemos la prenda de rubro H1, que nos muestra el mes en curso. Entonces sigamos adelante y seleccionemos este elemento. Voy a cambiar su tamaño de fuente. Hagámoslo tres RAM. Además, hagamos que la fuente sea un poco más clara, fijemos el modo de fuente en 400 que transformar el texto en mayúsculas A continuación, voy a crear el espacio entre las letras. Hagamos que apunte a rampa. Y finalmente crear algo de espacio en la parte inferior usando margen inferior con el valor una rampa. Sigamos adelante y por último, diseñemos el párrafo. Lo único que entonces voy a hacer es aumentar el tamaño de la fuente. Así que vamos a seleccionarlo y establecer el tamaño de fuente en 1.6 rampa. Bien, así que eso es todo sobre la primera parte del calendario Pasemos a los días de la semana. Voy a establecer con el 200 por ciento. Entonces aumenta la altura, hazlo cinco rem. Y también vamos a crear algo de espacio usando relleno. Voy a ponerla a cero en el extremo superior e inferior. Punto para corrió por los lados derecho e izquierdo. A continuación, voy a colocar los días de la semana horizontalmente en fila y también para centrarlos verticalmente. Entonces necesitamos display flex y align items center. Bien, entonces con el elemento div wrapper, ya terminamos. A continuación, personalicemos ellos mismos los días de la semana. Voy a seleccionar elementos div. Al principio, cambiemos el tamaño de la fuente. Voy a configurarlo en 1.5 RAM. Entonces vamos a burlarnos, un poco más ligeros usando el font-weight 400 Y crea algo de espacio entre las letras usando espaciado entre letras 0.1 rampa. ¿Verdad? Ahora voy a definir el ancho de cada elemento div. Como saben, el ancho del calendario es igual a 45 rem. Creamos un poco de relleno dentro de los días de la semana div id es igual a 2.4 RAM en ambos lados. Quiero decir, en los lados derecho e izquierdo, quiero hacer que el ancho de cada elemento div sea una séptima parte de todo el ancho Entonces voy a usar la función calc. Y necesitamos dividir 44 puntos para carnero por 744.2. Rem es la diferencia entre el ancho y el relleno. Ojalá tenga sentido para ti. Bien, entonces a continuación necesitamos centrar el contenido de cada elemento div. Y para eso, usemos flexbox. Voy a configurar display a flex. Entonces necesitamos justificar el centro de contenidos y alinear los elementos al centro. Por último, vamos a crear un pequeño efecto de sombra. Usa sombra de texto con los valores 0.3, 0.5 rem, valor RGBA con un color negro y con la opacidad Bien, así que eso es todo sobre los días de la semana. Sigamos adelante y nos ocupemos de los días del mes. En primer lugar, seleccionemos el elemento div wrapper, que tiene días de clase. Vamos a establecer con el 200 por ciento. Entonces voy a poner display a flex Porque quiero envolver los días. Entonces usemos flex wrap con el value rap. Y finalmente, vamos a crear algo de espacio usando el relleno. Hagamos que apunte a RAM en los cuatro lados. A continuación, voy a personalizar el día mismo. Así que vamos a seleccionar elementos div. En primer lugar, pongamos el tamaño de fuente en 1.4 rampa. Entonces usa margen, hazlo 0.3 RAM en los cuatro lados. Después de eso, definamos el ancho de los elementos HTML. Voy a usar la misma técnica que usamos los días de semana. Entonces quiero colocar siete días en cada línea. Vamos a usar de nuevo la función calc. Tenemos que dividir el ancho del calendario entre siete, pero tenemos que excluir el margen y el relleno. Si restamos dos, el ancho, el margen y el relleno, obtendremos 40 puntos por rampa El margen en cada lado es igual a 0.3 rampa. Entonces el monto del margen va a ser 0.3 multiplicado por 14, porque en general tendremos siete días. Es igual a 4.2 RAM. Y luego tenemos que sumar al punto de valor para la renta, el monto del relleno. Tenemos que dividir 40 puntos para RAM por siete. Entonces voy a establecer la altura a cinco rem. Entonces voy a centrar el contenido. Así que vamos a establecer la propiedad display para flexionar y usar justify-content center y alinear items center Además, voy a crear un pequeño efecto de sombra. Usemos sombra de texto con los valores 0.3 ejecutó 0.5 RAM y RGBA con un color negro y con la opacidad Bien, así que los días están personalizados y continuación voy a darle estilo a las fechas anteriores y siguientes Lo único que voy a hacer es disminuir la opacidad de ellos. Así que sigamos adelante y seleccionemos a ambos. Y establece la opacidad a 0.5. Bien, entonces lo siguiente que voy a hacer es destacar el día actual del mes. Al principio, vamos al archivo HTML y asignemos hoy a la clase de fecha actual. Después selecciónala y cambia el color de fondo. Voy a hacerlo 16756. Bien, entonces lo último que voy a hacer es crear un pequeño efecto hover Una vez que pasemos el cursor sobre los días, voy a cambiar el color de fondo También mostrar el borde y hacer el puntero del cursor. Quiero hacer eso por todos los días del mes excepto el actual. Así que vamos a seleccionar elementos div con hover. Entonces debería ser seguido por el selector de notas. Es la función. Y tenemos que pasar aquí div con la clase hoy. Bien, hagamos que el color de fondo sea 62626. Luego se define borde con los valores punto para correr sólido y la columna 777. Y finalmente hacer que el cursor apunte. Además, usemos la transición solo para el color de fondo. Necesitamos aquí, el color de fondo y la duración 0.2 s. bien, con el CSS, ya terminamos Y ahora es el momento de agregar algo de JavaScript a nuestro calendario y hacerlo funcionar. A lo largo de esta parte, estaremos trabajando con el objeto de fecha con bastante frecuencia. Utilizaremos un par de métodos diferentes para manipular la fecha. En primer lugar, quiero mostrar el mes actual dinámicamente usando JavaScript. En este momento, es Mayo lo especificamos desde el archivo HTML? Al principio voy a crear un objeto de fecha. Entonces para hacer eso, tenemos que usar la función constructor del objeto date. En general, el objeto date devuelve la fecha y hora actuales. También especifica la zona horaria de los navegadores y devuelve estos datos como una cadena de texto completo. Sigamos adelante y creamos los objetos de fecha. Voy a crear una nueva variable, date, que debería ser igual a la nueva función constructora de fecha. Después corre hacia la consola. Entonces, si inspecciono la página y reviso la consola, obtendremos la fecha y hora actuales seguidas de la zona horaria de los navegadores. Entonces como decíamos, lo primero que vamos a hacer es mostrar el mes actual usando JavaScript. Para obtener el mes actual, es necesario utilizar uno de los métodos de objetos de fecha llamados get month. Así que vamos a crear una nueva variable. Voy a llamarlo matemáticas. Debe ser igual al punto de fecha. Consígalo, mamá. Entonces ejecuta las matemáticas a la consola Como puedes ver, tenemos aquí un valor numérico para que en realidad este es el número índice de la boca actual. Ahora es mayo, que es el quinto mes del año. Pero por eso, las polillas tienen números de índice de base cero Obtener método matemático devuelve cuatro, que es el número de índice del quinto mes. Bien, entonces para mostrar el mes actual en la página, tenemos que usar el método get y tenemos que manipular con esos números de índice En primer lugar, voy a crear una nueva matriz en la que guardaré los 12 meses del año. Así que vamos a crear una nueva variable, que va a ser una matriz. Y luego pasar aquí los nombres matemáticos. El primero va a ser enero. Entonces lo voy a duplicar 11 veces. Y luego cambiar los nombres. Necesitamos febrero, marzo, abril, luego tenemos mayo, junio, julio, agosto. El siguiente va a ser septiembre, octubre, noviembre, diciembre. Entonces se crea la matriz, como saben, los elementos en las matrices tienen los números de índice basados en cero Aquí. Cada mes tiene los números de índice adecuados de cero a 11. Ahora voy a seleccionar las prendas de encabezado H1, que deberían mostrar el mes actual. Así que vamos a seleccionarlo usando el método QuerySelector. Necesitamos especificar aquí el nombre de la clase, fecha y luego la etiqueta H1. Entonces se selecciona el encabezado y ahora necesitamos cambiar su contenido. Para hacer eso, voy a usar una de las propiedades DOM llamada innerHTML Ahora tenemos que usar nuestras matemáticas de matriz y especificar el número de índice Si pongo aquí el número de índice manualmente, digamos cuatro. Y luego deshazte del contenido del elemento heading de HTML. Volveremos a ver mayo en la página. Si cambio el número de índice y escribo cinco, entonces obtendremos junio. Entonces, para mostrar la boca adecuada, tenemos que usar el método get. Necesitamos fecha punto, consigue más. Entonces como puedes ver, tenemos aquí, nuevamente mayo, pero ahora se muestra dinámicamente usando JavaScript. Bien, sigamos adelante y mostremos la fecha. Por lo que voy a seleccionar el párrafo que muestra la fecha, vamos a seleccionarlo usando el método QuerySelector Entonces, para poder cambiar el contenido del elemento, necesitamos la propiedad innerHTML Entonces ahora voy a usar uno de los métodos llamados a date string, que devuelve la fecha actual en un formato legible. Entonces necesitamos aquí fecha punto a fecha cadena. Si elimino el contenido de HTML, entonces obtendremos exactamente el mismo resultado en la página. Bien, así que con la primera parte del calendario ya terminamos Hemos mostrado con éxito la boca y la fecha dinámicamente con la ayuda de JavaScript. Ahora es el momento de pasar en exhibición los días. No vamos a tocar los días de la semana, se mostrarán desde HTML porque creo que es suficiente para mostrar los días que voy a usar for loop. En primer lugar, vamos a crear una variable. Días. Voy a usar let keyword. Y hagamos que sea una cadena vacía. Así que voy a recorrer los números del uno 31 y mostrarlos como el contenido del elemento days div. Vamos a usar for-loop. Tenemos que crear aquí la variable I, que va a ser el contador. Entonces necesitamos una condición. Debería ser menor o igual a uno. Entonces necesitamos I más más el operador de incremento. Como los contenidos. Voy a instituir días seguidos del operador plus equals. En realidad, este operador hace exactamente lo mismo que la siguiente expresión. Por ejemplo, x más es igual a diez medias x es igual a x más diez Así que ahora tenemos que crear un elemento div y pasar la variable I como el contenido de la misma. Vamos a abrir backticks e insertar u etiqueta div. Su contenido va a ser la variable I. Por último, tenemos que cambiar el contenido del elemento div wrapper. Voy a crear una nueva variable, llamémosla Mark days. A continuación, seleccione el elemento div días utilizando el método QuerySelector. Y luego abajo, cambie el contenido de esta variable usando la propiedad innerHTML Entonces necesitamos la boca tes dot html interno, que debe ser igual a días. Entonces como pueden ver, tenemos aquí los números del uno al 31. Si voy al archivo index.html y quito todo el contenido de aquí, entonces nada va a cambiar, volveré a obtener números del uno al 321. Así que a partir de ahora se muestra el contenido del elemento days div desde JavaScript. En realidad, tenemos que hacer aquí un par de cosas. Ya no vemos los días siguientes anteriores, y además los números no coinciden con los días de la semana. Además de eso, aquí definimos el número de días en un mes como 31. Pero como ustedes saben, algunos de la misa tienen la de hoy y algunos de ellos aunque a uno. Entonces, en lugar de usar aquí solo 321, necesitamos definir la fecha de finalización para cada mes. Vamos a crear una nueva variable. Voy a llamarlo el último día. A continuación, vamos a crear un objeto de fecha y definir el año y mes actuales. Así que tenemos que usar aquí obtener método de año completo. Necesitamos fechas punto obtener año completo, seguido del método date dot get. El primer método nos dará el año en curso. En cuanto al segundo método , nos dará montura actual. En cuanto al día, voy a fijarlo a, digamos uno. Ahora vamos a ejecutar esta variable al navegador y ver qué tenemos. Entonces como pueden ver, tenemos aquí el 1 de mayo de 2020s. Ahora cambiemos uno a cero y verifiquemos el resultado. En este caso, tenemos aquí el 30 de abril de 2020. Entonces cuando especificas el día como cero, entonces obtienes el último día del mes anterior. En nuestro caso, necesitamos obtener el último día del mes en curso. Por lo tanto, solo necesitamos agregar uno a la función get. Ahora, como pueden ver, tenemos aquí el último día del mes en curso. Entonces, en lugar de usar aquí el número codificado, simplemente podemos insertar el último día Pero ahora mismo no podemos hacer eso porque la variable del último día devuelve toda la fecha y hora. Para obtener el número del día, necesitamos usar el método Get date. Entonces ahora devuelve solo uno en lugar de otros datos. Y ahora podemos cambiar 31 al último día en bucle for. Entonces aquí no se cambia nada. Tenemos el mismo resultado. Para demostrar que funciona correctamente, voy a establecer el mes actual en , digamos junio, donde tenemos 30 días para cambiar el mes actual, tenemos que usar uno de los métodos llamados set mouth. Por lo que necesitamos fecha punto set boca con un valor de cinco. Ahora vemos aquí junio y el número de días es significa que todo funciona bien hasta el momento. Vamos a deshacernos de esta línea de código. Así que una vez que mostramos los días de la boca, ahora voy a encargarme de los días del mes anterior. Si echamos un vistazo al proyecto terminado, verás que mostramos un par de días del mes anterior. Entonces para lograrlo, antes que nada, tenemos que adivinar cuántos días debemos exhibir de la boca anterior. Voy a usar un pequeño truco. Sigamos adelante y cambiemos la fecha actual, que sea el primer día del mes. Entonces necesitamos fecha, punto establecido fecha. Tenemos que hacerlo uno. Después de eso, voy a usar uno de los métodos llamados get day. Devuelve el índice. Ahora ráfagas de los días de la semana, esos números de índice son de base cero Por ejemplo, el domingo tiene el número de índice de cero, el lunes tiene uno, y así sucesivamente. Así que vamos a correr a través de la consola. Fecha, punto obtener día. Como veis, tenemos aquí cinco. Por lo que el primer día de mayo debería ser el viernes, porque el viernes tiene el índice número cinco. Significa que el primer día de mayo debe colocarse debajo del viernes. Entonces ahora podemos obtener fácilmente ¿cuántos días debemos exhibir del mes anterior? Van a ser cinco. Bien, entonces tenemos que crear otro bucle for Vamos a insertar aquí la variable x, que va a ser el contador Ahora necesitamos definir el número de iteraciones. Como dijimos en este caso, tenemos que exhibir cinco días a partir del mes anterior. Entonces en general tendremos cinco iteraciones. Y en cada iteración crearemos un nuevo div, que será el contenido del elemento div de hoy Entonces el valor inicial del contador x va a ser el índice del primer día del mes. Vamos a crear una nueva variable donde almacenaremos el número de índice del primero del mes. Eso se llama índice variable del primer día. Debe ser igual a la fecha, punto obtener fecha. Después asigne esta variable al contador x. Entonces ahora tenemos que definir la condición x debe ser mayor que cero. Y en cada iteración, x debería disminuir en uno Entonces necesitamos x menos menos. Entonces déjame explicarte otra vez. En este caso, el número de índice del primer día de este mes es de cinco porque es viernes. El valor inicial de la variable x va a ser cinco. En cada iteración, disminuirá uno hasta que se convierta en cero Entonces, en general, tendremos cinco iteraciones. En cada iteración, crearemos un nuevo elemento div para las fechas del mes anterior Aquí necesitamos esto más iguales. Entonces tenemos que volver a abrir ticks e insertar una etiqueta div con una fecha anterior de clase, estoy en fecha de preparación. Luego inserta tu signo de dólar con llaves rizadas. Ahora tenemos que definir el contenido del desarrollo. En primer lugar, definamos el último día del mes anterior. Voy a usar la misma técnica que usamos en el caso anterior como crear una nueva variable. Voy a llamarlo preparación el último día, estoy en el anterior, el último día. Entonces voy a agarrar este valor de aquí. Entonces, para poder obtener el último día del mes anterior, solo necesitamos deshacernos del más uno porque nos da el último día del mes en curso. Entonces, si reviso a la consola el último día anterior, entonces obtendremos la tercera t, que es el último día de abril. Bien, así que para crear el contenido para cada elemento div, tenemos que restar x a la variable anterior del último día Entonces como ves, tenemos días de la boca anterior, pero eso no es del todo correcto porque tenemos aquí 29 como último día del mes. Deberían ser 30. Entonces necesitamos simplemente más uno dentro de aquí. Entonces el problema está arreglado. Bien, así que con los días anteriores ya terminamos, sigamos adelante y nos ocupemos de los días del mes siguiente En el caso de los próximos días, necesitamos definir el número índice del último día de la boca actual. Así que vamos a crear una nueva variable y llamarla índice del último día. Entonces agarra este código porque nos da el último día del mes en curso. En este caso, en lugar del método getState, tenemos que usar getState porque devolverá el número de índice Así que vamos a correr por la consola mientras ellos indexan. Tenemos cero. Y significa que el último día es el domingo. Y tenemos que exhibir seis días a partir del mes siguiente. Entonces, para definir el número de los días del próximo mes, tenemos que restar 27, que es el número de días en una semana, el índice del último día Y también necesitamos restar uno porque números del índice entre semana son de base cero Así que vamos a crear una nueva variable. Voy a llamarlo los próximos días. Y debería ser igual a siete menos el índice del último día menos uno. A continuación, necesitamos de nuevo un for-loop. En este caso, voy a usar j como contador, que debería ser igual a uno, porque cada mes comienza con una condición válida va a ser j es menor o igual a los días siguientes de lo que necesitamos j más más. Entonces en cada iteración tenemos que crear unos nuevos elementos div y pasarlos como el contenido del elemento div de hoy Necesitamos días más iguales. Después abre las garrapatas de nuevo y pasa aquí la etiqueta div con una clase. Próxima fecha Como el contenido de la etiqueta div, tenemos que insertar la variable J. Por último, cambiemos el contenido de los días de boca. Entonces aquí vamos. Tenemos aquí días a partir del mes siguiente, ¿no? Entonces lo siguiente que voy a hacer es destacar la fecha actual. Ahora mismo. Ya no está resaltado. Para ello, tenemos que usar una declaración if como condición. Tenemos que comparar el contador uno con el estado actual. Una vez que coincidan, entonces tenemos que sumar hoy a la clase de inviolabilidad. Necesitamos triplicar iguales a nueva fecha punto obtener fecha. Además de eso, tenemos que comparar la boca con el mes en curso. Entonces necesitamos aquí lógica y operador. Y tenemos que insertar datos punto get mount, triple es igual a nueva fecha, punto obtener marr Si esta condición es cierta, entonces voy a copiar esta línea de código y agregarla hoy a la clase de desarrollo. En cuanto a este elemento div, se debe colocar en la sentencia else. Entonces como veis, se destaca la fecha actual. Bien, así que lo siguiente que voy a hacer es hacer que las flechas funcionen Una vez que damos clic en la flecha izquierda, debemos navegar a la boca anterior. En cuanto a la flecha derecha, debemos pasar al siguiente mapa. Voy a adjuntar a ambas flechas, oyentes de eventos con eventos click Así que voy a seleccionar la flecha izquierda con el método QuerySelector que adjunto a él el oyente de eventos, donde tenemos que especificar el tipo de los Va a ser click. Y también necesitamos pasar tu función de devolución de llamada. Vamos a duplicarlo y cambiar el nombre de clase que necesitamos aquí. Siguiente. Para poder pasar al mes anterior, necesitamos fecha punto set boca. Entonces necesitamos restarle uno a la boca actual. Entonces necesitamos datos dot get Mouth menos uno. Eso es para el próximo mes. Necesitamos la misma expresión, pero con más uno. Entonces, si hacemos clic en las flechas, entonces no van a funcionar. La razón es que necesitamos renderizar el calendario con una boca adecuada OnClick Entonces tenemos que crear una función donde pasemos todo el código. Entonces tenemos que llamarlo una vez en el ámbito global. Y también tenemos que llamarlo cuando hacemos clic en las flechas. Entonces sigamos adelante y creamos una función. Voy a llamarlo calendario aleatorio. Agarremos todo el código excepto esta línea de código. Y pegarlo dentro de la función que voy a llamarlo en el ámbito global. Y también dentro de esas funciones de devolución de llamada. Bien, así que si hago clic en las flechas, entonces funcionarán bien Como veis, pasamos al mes anterior y al siguiente. Bien, entonces ya casi terminamos. En realidad, aquí veo que tenemos un pequeño problema. La fecha actual no es correcta porque como recuerdas, establecemos la fecha en una y necesitamos cambiar aquí fechas a nueva fecha. Entonces ahora el problema está arreglado. Y finalmente, ya terminamos 15. Proyecto 12 - Cuenta atrás: Bien, así que ahora es el momento de comenzar a crear nuestro próximo proyecto En este video, crearemos una aplicación de cuenta regresiva. Antes de comenzar a construir el proyecto, voy a pasar por ocho y describir. Entonces como pueden ver, tenemos aquí un fondo oscuro a pantalla completa En el centro de la página. Tenemos un par de elementos. Estoy en el rubro que dice que algo viene pronto. A continuación, le sigue la cuenta regresiva, que funciona automáticamente Se actualiza después de cada segundo. Tenemos aquí para diferentes secciones. Estas secciones cuatro días, horas, minutos y segundos. Entonces abajo tenemos un botón de reinicio. Si hago clic en él, entonces la cuenta regresiva vamos a restablecer y todos los valores se convertirán en cero. Bien, así que eso es todo. Lo que vamos a construir. El proyecto va a ser sencillo, pero ojalá te diviertas un poco. He creado una nueva carpeta en el escritorio llamada count down, que ahora mismo está vacía. Sigamos adelante y lo abrimos en código VS y configuremos nuestros archivos de trabajo. Entonces, en general, tendremos tres archivos diferentes para HTML, CSS y JavaScript. Sigamos adelante y creémoslos. Llamemos al archivo HTML index.html. Entonces tendremos style.css y scripts dot js. Después de eso, voy a ir al archivo index.html y crear el documento HTML básico. Para eso, voy a usar m. Y coloquemos aquí un signo de exclamación y presionemos Enter o tab Entonces aquí vamos. Voy a cambiar el título. Vamos a insertar tu cuenta regresiva. Después de eso. Vamos a vincular archivos CSS y JavaScript al HTML. Vamos a abrir la etiqueta de enlace. Especifique aquí la ruta del archivo CSS. En cuanto al JavaScript, voy a abrir la etiqueta script justo encima de la etiqueta de cuerpo de cierre, y luego especificar la parte del archivo JavaScript y los atributos de origen. Bien, así que los tres archivos están conectados y ahora voy a ejecutar el proyecto al navegador Para eso, usemos uno de los paquetes de código VS que se llama servidor en vivo, lo que le permite ejecutar el proyecto en vivo al navegador y realizar los cambios y actualizaciones sin actualizar la página. Cada vez, te recomiendo que uses estos paquetes. Bien, entonces el proyecto está en marcha. Por último, voy a colocar el editor y el navegador uno al lado del otro, así Y empezar. En primer lugar, vamos a crear el marcado HTML, que va a ser el sencillo Voy a abrir la etiqueta div, que va a ser el contenedor lo que debería ser seguido por el envoltorio de cuenta regresiva. Incluirá los tres elementos, decir, elementos de encabezamiento, con los textos próximamente. Después de eso tendremos un div vacío con la clase count down, en la que insertaremos el contenido desde JavaScript. Y por último, tendremos botón con el reset de clase y con el reset de texto. Bien, entonces aquí tenemos el encabezado y el botón. este momento, el elemento div de cuenta atrás no se muestra aquí porque está vacío. Entonces ahora voy a seguir adelante y empezar a escribir. Javascript creará una cuenta regresiva y hará que funcione. Y luego me encargaré del diseño. Pasemos al archivo script.js. Y antes que nada, seleccionemos la cuenta regresiva y la almacenemos en la variable. Vamos a crear una variable llamada cuenta atrás y seleccionar elemento div. Usando el método selector de consultas. Para crear la cuenta regresiva, tenemos que manipular los objetos de fecha JavaScript. Por defecto, JavaScript utiliza la zona horaria de los navegadores y muestra una fecha como una cadena de texto. Sigamos adelante y creamos un objeto de fecha y comprobemos cómo se ve. Voy a crear una variable. Vamos a llamarlo fecha. Entonces, para crear un objeto de fecha, tenemos que usar la nueva función constructora de fecha. Vamos a correr la fecha a la consola. Entonces, si inspecciono la página y reviso la pestaña de la consola, entonces encontrarás aquí la fecha y hora actuales seguidas de la zona horaria. Bien, entonces en general, el objeto date tiene un par de métodos diferentes que nos permiten obtener el día actual, boca, hora y así sucesivamente No voy a pasar por ellos. Usaremos solo la nueva función constructora de fecha. Así que además de obtener la fecha actual, puedes Especificar la fecha futura o pasada manualmente. Por ejemplo, podemos pasar aquí el año, digamos 2020 que un mes. Pero hay que recordar que hay que especificar un mes mediante el uso de números de índice. Los meses tienen números de índice de base cero. Entonces si quiero pasar año, digamos agosto, que es el octavo mes del año del que tengo que insertar aquí. Siete. A continuación viene el día del mes. Vamos a pasarte 15. Y luego se puede especificar la hora. Digo, horas, minutos y segundos. Pasemos aquí. 12 y ceros como los minutos y los segundos. ¿Bien? Entonces, si revisamos la consola, entonces obtendremos la fecha que acabamos de especificar aquí. Bien, entonces supongamos que esta fecha es la fecha límite y tenemos que contar a partir de esa fecha En realidad, quiero señalar que si ves este video en el futuro, esta fecha es aunque el pasado, entonces necesitas ingresar la fecha del futuro. Voy a cambiar el nombre de la variable. Hagamos que sea fecha límite y también nos deshagamos del console.log. Además de eso, tenemos que definir la hora actual. Así que vamos a crear una nueva variable. Voy a llamarlo actual, y luego asignarle nuevo constructor de fecha. Bien, entonces la hora que debe mostrar en la página va a ser la diferencia entre la fecha límite y la hora actual Entonces agreguemos primero, comprobemos la diferencia en la consola. Voy a crear una variable, llamémosla div. Yo hice la diferencia. Debe ser igual a plazo menos actual. Y luego alrededor de la variable a la consola. Entonces como pueden ver, tenemos aquí algunos extraños y un número enorme. En realidad, esta es la cantidad de tiempo, la diferencia entre la fecha límite y la hora actual que se muestra en milisegundos. Vamos a usar esta cantidad de milisegundos para definir por separado los días, horas, minutos y segundos restantes horas, minutos y segundos Así que vamos a seguir adelante y crear una variable y llamarla días. Entonces, para obtener el número de los días restantes, tenemos que dividir la cantidad de diferencia por el número de milisegundos, que tenemos en 24 h Entonces necesitamos diferencia dividida por paréntesis entonces abierta. diferencia dividida por paréntesis entonces abierta Y tenemos que multiplicar mil milisegundos a 60 s. Entonces necesitamos 60 min y finalmente 24 h. Entonces voy a ejecutar esta variable a la consola Entonces como pueden ver, llegamos aquí el número de los días, pero con algunos decimales No necesitamos esos decimales porque solo necesitamos mostrar el número de días Entonces tenemos que redondear el número a la baja. Y para eso podemos usar uno de los métodos JavaScript llamados Math.floor. Ahora como pueden ver, tenemos aquí solo el número de los días sin decimales Entonces a continuación necesitamos definir las horas, minutos y segundos de la misma manera. Pasemos a las horas. Voy a utilizar de nuevo el método Math.floor. Entonces en el caso nuestro, tenemos que dividir la diferencia por el producto de los milisegundos, segundos y minutos Y luego tenemos que agarrar la cantidad restante de esa operación. Entonces tenemos que usar uno de los operadores aritméticos llamados módulo, o a veces se llama el resto Entonces el operador de módulo devuelve un resto de división y se expresa por el signo porcentual. Necesitamos aquí. Diferencia dividida por el producto de mil milisegundos, 60 s y 60 min. Entonces tenemos que usar módulo seguido del 24, que es el número de horas. Entonces nuevamente, esta operación nos dará las horas restantes. Es decir, después de esta operación, el número de horas siempre será menor a 24. Si reviso horas a la consola, entonces obtendremos el número de horas restantes. Bien, pasemos a las actas. Crear nueva variable. Llámalo minutos, luego usa de nuevo el método Math.floor. Entonces en caso de minutos, tenemos que dividir la diferencia por el producto de los milisegundos y los segundos Y entonces necesitamos el módulo 60, que es el número de minutos Entonces necesitamos diferencia dividida por el producto de mil milisegundos y segundos. Módulo 60. Bien, sigamos adelante y definamos los segundos de la misma manera. Crear nueva variable, usar que Math.floor. Entonces, en caso de segundos, necesitamos dividir la diferencia por mil milisegundos. Y entonces necesitamos el módulo 60, que es segundos. Entonces si reviso los segundos en la consola, entonces empiezo a refrescar la página. Verás aquí cómo se actualiza el número de segundos. Bien, las cuatro cantidades de definido. Y ahora necesitamos mostrarlos en la página para ser más precisos y cuenta abajo div, que hemos creado en el archivo HTML y luego seleccionado aquí. Entonces voy a pasar un par de elementos div dentro del div de cuenta regresiva. Y luego se adjunta a cada elemento div, la variable apropiada de esas cuatro variables. Entonces necesitamos cambiar el contenido de la cuenta regresiva profundo. Para eso, voy a usar una de las propiedades de domo llamada innerHTML Nos permite establecer el contenido HTML de un elemento. Así que vamos a adjuntar a la cuenta regresiva la propiedad HTML interna. Luego abre las garrapatas porque necesitamos interpolar las variables a las etiquetas HTML Entonces necesitamos aquí para los elementos div. Entonces en la primera, voy a pasar días. Necesitamos signo de dólar, llaves y los días de nombre variable Entonces tendremos el nuestro. Minutos y segundos. ¿Bien? Entonces, como pueden ver, tenemos aquí los cuatro valores, días, horas, minutos y segundos. Ahora mismo están en modo estático. No se están actualizando automáticamente. Si vuelvo a cargar la página se actualizará el número de segundos Entonces tenemos que hacer dinámica la cuenta regresiva. Debe actualizarse automáticamente en cada segundo. Para ello, tenemos que usar uno de los métodos JavaScript llamados set interval. El método set interval ejecuta la función a intervalos especificados en milisegundos Bien, vamos a crear una variable y llamarla intervalo. Después asignarle un método de intervalo establecido. Este método toma dos argumentos. La primera va a ser la función callback, que se ejecutará con algunos intervalos Entonces ahora tenemos que pasarte dentro la función, todo este código. Vamos a agarrarlo y pegarlo dentro de la función. El segundo argumento va a ser la cantidad de tiempo que necesitamos para ejecutar la función después de cada segundo. Entonces voy a pasar aquí mil milisegundos. Entonces, como puedes ver, la cuenta regresiva está funcionando y se está actualizando después de cada segmento Bien, así que hemos logrado crear la parte principal de los proyectos Tenemos que personalizar un poco la funcionalidad. Pero para que el trabajo en proceso sea más interesante, vamos a encargarnos del diseño Una vez que iniciemos el proyecto, luego agregaremos un par de cosas a la cuenta regresiva desde JavaScript. Bien, vamos a abrir el archivo style.css. Y antes que nada, crear algunos estilos de reset y comunes. Voy a seleccionar cada elemento usando un asterisco. Y luego vamos a deshacernos del margen predeterminado y el relleno. Voy a ponerlos a cero a ambos . Y también usa box-sizing border-box. Además de eso, quiero cambiar la familia de fuentes para todos los elementos. Voy a usar una de las fuentes de Google. Así que vayamos al sitio web de Google Fonts y busquemos fuente llamada abajo el A2 Seleccionemos esos estilos. Después, agarra el enlace y pégalo en el elemento head. Después de eso, voy a establecer font-family para cada elemento a continuación del curso dA2. Bien, así como puedes ver, aplican estos estilos En realidad, voy a usar RAM como unidad de medida a lo largo de este proyecto. Eso lo hacemos en casi todos los tutoriales porque creo que es muy conveniente y fácil de usar. Ahora mismo. Un rem equivale a 16 píxeles, porque el tamaño de fuente de HTML es igual a 16 píxeles. Por defecto, quiero convertir una RAM en diez píxeles Que tenemos que disminuir el tamaño de fuente de los elementos HTML. Vamos a establecerlo en 62.5 por ciento. Entonces consideremos que los tamaños de los elementos han disminuido. Y ahora 1 g equivale a diez píxeles. Sigamos adelante y sacemos el contenedor. Voy a ampliarlo a toda la página. Así que vamos a seleccionarlo y definir ancho y alto. Voy a establecer con el 200 por ciento para la altura. Hagámoslo al 100% de la ventana. Y por último, cambiemos el color de fondo. Voy a usar tu color 17181. Bien, a continuación, seleccionemos el envoltorio de cuenta regresiva. Voy a colocarlo en el centro de la página. Es decir, para centrarlo verticalmente. Entonces, antes que nada, como ancho definido hacen que sea más difícil de presentar. Entonces voy a poner su posición a absoluta. Después de eso, voy a asignar a la posición del contenedor relativa porque quiero posicionar el envoltorio de cuenta regresiva de acuerdo con el contenedor Después defina la propiedad superior. Vamos a establecerlo en 15%. Luego coloca los textos en el centro usando text-align center y cambia el color Hazlo el D. Bien, así se cambia la posición del envoltorio de cuenta atrás y ahora voy a personalizar los elementos individuales Empecemos con una rúbrica. En primer lugar, voy a aumentar el tamaño de la fuente. Hagámoslo ocho RAM. Que cambiar el peso de la fuente, hacerlo más ligero, asignado a él 400. Siguiente Voy a transformar texto en mayúsculas. Después crea algo de espacio en la parte inferior usando el margen inferior ocho Ran. Y por último, voy a usar la sombra de texto para crear algún efecto de sombra. Pasemos aquí 0.5 alrededor de 0.8 RAM. Y el valor RGBA con color negro y con opacidad 0.5. Bien, entonces el rumbo se ve bien. Sigamos adelante y nos ocupemos de la cuenta regresiva. Voy a colocar esos números horizontalmente en fila usando Flexbox Y también colocarlos en el centro están usando justify-content Bien, eso es todo sobre la cuenta regresiva. Ahora voy a personalizar unos elementos div los cuales hemos creado en JavaScript. Quiero decir que el niño hace elementos de la cuenta regresiva. Entonces, antes que nada, definamos la anchura y la altura. Voy a ponerlos a los dos en 13 rampas. A continuación voy a definir los antecedentes. En realidad, quiero usar un gradiente lineal porque con el degradado lineal, podremos dividir el fondo en dos partes distintas. Entonces, antes que nada, voy a cambiar la dirección. Hagamos que se adapte al fondo. Significa que la transición irá de arriba a abajo. Luego use el valor RGBA. Hagamos una pausa aquí, 601-50-8508 y la opacidad 0.9. Y también necesitamos aquí el 50%. A continuación, necesitamos otro valor RGBA dentro de los números 909-90-3903 Y tenemos que ubicarte a cero. Entonces, como ves ahora, el fondo se divide en dos partes distintas. Después de eso, voy a crear algo de espacio usando margen. Vamos a ponerla a cero en la parte superior. Entonces para RAM en el lado derecho, 12 corrieron en la parte inferior, y cuatro en el lado izquierdo. Después de eso, vamos a aumentar el tamaño de la fuente, que sea siete RAM. Y también cambiar el peso de la fuente, que sea 400. Bien, a continuación voy a centrar los números dentro de cajas. Y para eso, usemos flexbox. Necesitamos mostrar flex, justificar el centro de contenido y alinear los elementos en el centro. Y por último, voy a crear algún efecto de sombra. Usemos box shadow con los valores 0.8 RAM 2.5 RAM. Y luego el valor RGBA con un color negro y con opacidad 0.5 ¿Verdad? Entonces, paso a paso, el proyecto se está volviendo bastante agradable. Lo siguiente que quiero hacer es mostrar una pequeña línea en el centro de cada caja o tarjeta, sea lo que sea. Voy a crear una línea usando antes de pseudo elementos. Así que vamos a seleccionar count down def, seguido de los pseudo elementos antes En primer lugar, definamos el contenido, lo hagamos vacío. Luego establece la posición en absoluto. Voy a posicionar el elemento según su elemento padre. Así que vamos a asignar a la cuenta atrás posición profunda relativa. A continuación, definamos ancho y alto. Voy a establecer con el 200 por ciento. En cuanto a la altura, hagámoslo 0.24 corrió. Y también definir el color de fondo. Hazlo 17181. Bien, se puede ver que tenemos aquí la línea en el centro de las cajas. Sigamos adelante y pasemos a lo siguiente. Echemos un vistazo al proyecto terminado. Como puede ver, debajo de cada caja, podemos ver el texto adecuado. Estoy en días, horas, minutos y segundos. Voy a agregarlos usando después de pseudo-clase. Entonces podemos seleccionar cada elemento div con el selector secundario F por separado y definir el contenido. Pero no voy a hacer eso. Voy a usar un pequeño truco. Vamos al archivo script.js y asignemos a cada desarrollo el atributo llamado data content. Entonces como los valores, vamos a insertar aquí días, horas. Entonces tenemos minutos y segundos. Después vuelve al archivo CSS y selecciona count down div con los pseudo elementos after Definamos el contenido. Entonces como el valor de la propiedad content, voy a pasar aquí la función llamada attribute, que se expresa como un TTR Y tenemos que pasar aquí los atributos de contenido de datos. Entonces como puedes ver, los valores de texto aparecen en la página. En este momento son dos más grandes. Entonces, vamos a encargarnos de eso. Cambiemos el tamaño de fuente, hagamos que apunte a RAM que establecer el peso de la fuente en 400. Luego establezca la posición en absoluto y defina la propiedad inferior. Que sea menos seis rondas. Bien, entonces el último elemento que quiero personalizar es un botón Así que vamos a seleccionarlo. En primer lugar, definamos la anchura y la altura. Voy a poner con 220 para correr. En cuanto a la altura, hagámosla de seis vueltas. Luego se deshace del borde predeterminado, usando border none. Y cambiar el color de fondo. Voy a usar tu color A5 a A12. A continuación, vamos a encargarnos de las fuentes. Voy a establecer el tamaño de fuente en 2.2 RAM que hacer font-weight 400 Crea algo de espacio entre las letras. Haz que apunte a la RAM. También transforma texto en mayúsculas. Después cambia el color del texto, hazlo claro usando color ie. Después de eso, voy a crear alguna sombra para el texto y para el propio botón. Entonces usemos sombra de texto, donde el valor es 0.3, 0.5 RAM. Y el valor RGBA con un color negro y la opacidad 0.5 Duplicemos esta línea de código. Cambia el texto a Box. Además, en lugar de 0.5 rampa, voy a usar 0.6 wrap. Por último, vamos a deshacernos del esquema predeterminado. Que no sea ninguno. Bien, así que eso es todo sobre el diseño. El proyecto se ve bastante bien. Y ahora voy a volver al archivo script.js y agregar un par de cosas más a la funcionalidad de la cuenta regresiva. Entonces, una vez que el número en la cuenta regresiva sea inferior a diez, entonces solo se mostrará un dígito Eso no es del todo agradable Así que voy a lograr mostrar siempre dos dígitos pase lo que pase. Entonces voy a usar las declaraciones condicionales. Tenemos que verificar si la duración de los días es igual a uno. Si esto es cierto, entonces tenemos que mostrar días con cero. Y si es falso, entonces tenemos que mostrar solo días. En realidad, he usado aquí la longitud de la propiedad dentro del número, pero no es correcta. La propiedad Length funcionará bien con estos valores de cadena. Así que tenemos que convertir esos números en valores de cadena. Hay un par de formas de hacerlo. Voy a añadir a cada número y cadena vacía. Entonces en este caso, los valores serán concatenados y obtendríamos los valores de cadena Bien, usemos este condicional para el resto de los números Voy a copiarlo y pegarlo. Aquí necesitamos horas que minutos. Por último, necesitamos segundos. Bien, entonces ahora el problema está arreglado. Ya no tendremos números de un dígito en la cuenta regresiva. Lo siguiente que quiero hacer es una vez que haya expirado el tiempo, tenemos que cambiar el contenido de la cuenta regresiva de esos números a algunos textos. Entonces necesitamos la declaración IF como condición, tenemos que verificar si la diferencia es menor que cero. Entonces si es cierto, entonces significa que el tiempo ha expirado y tenemos que cambiar el contenido de la cuenta regresiva. En primer lugar, tenemos que despejar el intervalo. Quiero decir, para detener la función de intervalo establecido. Para ello, tenemos que usar uno de los métodos llamados intervalo claro. Y tenemos que pasar intervalo variable yield. Después de eso, voy a cambiar el contenido de la cuenta regresiva. Entonces necesitamos el HTML interno del punto de cuenta regresiva. Usemos sus elementos de encabezado H1 con algunos textos. Digamos. Aquí vamos. Bien, entonces para poder comprobar cómo funciona, voy a fijar la fecha a la hora actual. Entonces aquí vamos. Ocho obras. Bien. Bien, así que ya casi terminamos. Lo único que voy a hacer es hacer que funcione el botón de reinicio. Una vez que haga clic en él, debería restablecer la cuenta regresiva y hacer esos números ceros Entonces voy a seleccionar botón de reinicio usando el método QuerySelector Entonces voy a adjuntar a un oyente de eventos usando el método add event listener Se necesitan dos argumentos. El primero va a ser el evento click. cuanto a la segunda, voy a pasar aquí una función de flecha, que se ejecutará una vez que hagamos clic en el botón de reinicio. En primer lugar, tenemos que dejar de establecer la función de intervalo. Quiero decir, tenemos que usar el método de intervalo claro. Pasemos aquí intervalo. Así que ahora voy a seleccionar todos los elementos div que necesitamos para mirar a través de ellos y cambiar el contenido. Tenemos que hacerlo ceros. Entonces voy a crear una variable, llamémosla divs Luego seleccione todos los elementos div dentro de la cuenta regresiva. Así que necesitamos un selector de consulta todo el método. Y tenemos que especificar aquí cuenta regresiva de clase seguida del div Entonces como decíamos, tenemos que mirar a través esos elementos div y cambiar su contenido. Así que voy a usar uno de los métodos de ayuda de matriz llamados para cada uno. Para cada método toma un argumento. Va a ser la función callback, que tomará un parámetro y va a ser el ítem actual en la lista Vamos a llamarlo div. Entonces necesitamos cambiar el contenido de cada div. Usemos innerHTML y pongamos el contenido a ceros. Entonces si hago clic en el botón, entonces restablecerá la cuenta regresiva 16. Proyecto 13 - Tarjeta de perfil: Bien, es hora de comenzar a construir nuestro próximo proyecto. En este video, vamos a estar creando una tarjeta de perfil. El proyecto va a ser sencillo con un diseño moderno y algunos efectos agradables. Entonces creo que vas a disfrutar construyéndolo. Bien, antes de comenzar a construir el proyecto, vamos a echarle un breve vistazo. Como puedes ver, tenemos una pequeña tarjeta en el centro de la página. Tiene alguna información sobre la persona. Estoy en, la imagen, nombre del archivo y alguna descripción. Y abajo tenemos un botón. Si hago clic en él, entonces el botón cambiará su forma, posición y contenido. Y también aparecerán tres casillas diferentes con algunos datos de contacto en redes sociales de la persona. Si vuelvo a hacer clic en el botón, entonces volveremos al estado anterior del auto. Entonces veamos qué vamos a construir. Espero que sea interesante porque aprenderás sobre cómo crear este tipo de efectos. Bien, Así que he creado una nueva carpeta en el escritorio llamada tarjeta. En él hay una carpeta para las imágenes. Voy a abrir esta carpeta en VS Code y luego crear tres archivos diferentes para HTML, CSS y JavaScript. El primero va a ser index.html. Entonces tendremos style.css y scripts dot js. Sigamos adelante y creamos el documento HTML básico. Para eso. Voy a usar m it, si pongo aquí un signo de exclamación y luego presiono Enter o tab, obtendremos la estructura básica del documento HTML Sigamos adelante y cambiemos el título. Voy a poner aquí tarjeta de contacto. Entonces después de eso, vinculemos los tres archivos. Voy a abrir la etiqueta de enlace en el elemento head para el archivo CSS. Pongamos aquí el nombre del archivo. Entonces necesitamos abrir la etiqueta script justo encima de la etiqueta del cuerpo de cierre. Y en el atributo source, tenemos que especificar la ruta del archivo. Bien, déjalo, los tres archivos están conectados. A continuación, voy a traer un par de enlaces adicionales. A lo largo del proyecto. Voy a usar los iconos Font Awesome y Google Forms. Así que sigamos adelante y busquemos Font Awesome, CDN, js. Después ve al primer enlace, selecciona CSS, y toma el primer enlace desde aquí. Entonces necesito abrir la etiqueta de enlace y poner el enlace como el valor del atributo h reference. Bien, eso es todo con respecto a los iconos Font Awesome. Sigamos adelante y traemos el enlace para las fuentes de Google. Voy a buscar fuentes de Google. Entonces a lo largo de este tutorial, voy a usar una fuente llamada doses. Vamos a personalizarlo porque usaremos diferentes pesos de fuente. Después agarra el enlace y pégalo en el elemento head. Bien, así que ahora es el momento de ejecutar el proyecto en el navegador Para eso, voy a usar uno de los paquetes de código VS que se llama Live Server. Nos permite ejecutar la vida del proyecto al navegador y realizar actualizaciones sin actualizar la página. Para que puedas seguir adelante e instalar este paquete. Bien, por último, coloquemos el editor y el navegador uno al lado del otro Así, y empieza. Entonces al principio voy a comenzar con el marcado HTML. Prepararemos toda la estructura HTML del proyecto, y luego le agregaremos CSS y JavaScript. Sigamos adelante y abramos la etiqueta div, que va a ser el contenedor de todo el contenido. Entonces dentro del contenedor voy a crear la propia tarjeta. Por lo que el auto constará de un par de partes diferentes. Tendremos tarjeta, tarjeta bio realizar algunos contactos de redes sociales y así sucesivamente. Sigamos adelante y comencemos con la biografía de la tarjeta. Incluirá la imagen de la descripción de la persona y el botón. Es una etiqueta div abierta y asignada a la tarjeta de clase bio. Después inserte en él en otro div, que va a ser el envoltorio de la imagen. Voy a llamarlo rapero IMG. Y voy a poner aquí una etiqueta de imagen y el atributo source. Tenemos que especificar la trayectoria de la imagen. Y también voy a poner aquí a persona como el valor del atributo alt. Y además de eso, voy a definir el ancho de la imagen desde aquí por un tiempo Hagámoslo cien pixeles. En realidad, lo haremos desde CSS al final del día. Bien, al minuto siguiente, datos personales. Así que vamos a abrir la etiqueta div con la información de la persona de clase e inserte elemento h3 heading para el nombre completo de la persona Voy a instituir a Jane Brown. Y también necesitamos el párrafo para alguna descripción. Agreguemos aquí algún texto ficticio. Bien, por último, necesitamos crear el botón, me refiero al botón negro que se moverá y cambiará la forma una vez que hagamos clic en él Vamos asignados a una clase llamada btn. Entonces dentro de ese botón tendremos dos partes. El primero va a ser el elemento span con el texto. Contáctame. En cuanto al segundo, va a ser el icono. Así que vamos a asignar a este panel elemento llamado btn contacts Y luego instituto gravado contáctame. Y a continuación voy a poner aquí Font Awesome icon, que debería tener nombres de clase, FAS, FA dash, angle, dash up. Bien, así que eso es todo sobre la bilis de la tarjeta. Eso es pasar a la siguiente parte. A continuación, tenemos que crear el encabezado, contactarme, que luego se ocultará y aparecerá al hacer clic. Así que vamos a abrir la etiqueta div con el contacto de la tarjeta de clase e insertándolo H4 elementos de encabezado con el texto Contáctame. Bien, entonces se crea la mitad del marcado A continuación, tenemos que encargarnos de las tres diferentes cajas blancas que se utilizarán para alguna información de contacto en redes sociales. Así que vamos a abrir la etiqueta div y asignado a la clase llamada Social. Esta va a ser la clase común para el estilo común. Pero también necesitamos la clase individual para el estilo individual. La primera casilla va a ser para el correo electrónico. Así que vamos a asignarle un correo electrónico de clase. En realidad, cada caja consistirá en un icono Font Awesome, y algunos datos de contacto. Vamos a abrir la etiqueta deep, que va a ser el envoltorio para el icono Font Awesome. Vamos a asignarle clase puedo envoltorio. Y luego inserta tu Irlanda con clases FAS, FA dash, sobre. Después de eso, necesitamos poner aquí algunos datos de contacto. Entonces abramos otra etiqueta div con los datos de contacto de la clase. Voy a poner aquí h f4 elemento de encabezado con el texto correo electrónico A continuación necesitamos un párrafo que incluya la dirección de correo electrónico real de la persona. Y también voy a insertar tu pequeña flecha, que será expresada por el corchete angular. Vamos a abrir elemento span y ponerlo aquí. Bien, eso es todo sobre los primeros contactos en redes sociales. En general, tendremos tres de ellos. Así que vamos a duplicar este código dos veces y luego hacer algunos cambios. Voy a cambiar el nombre de la clase, FB como el Facebook. Entonces voy a cambiar la clase de los iones cuando f, a, b, f dash, Facebook, dash square. Entonces necesitamos aquí facebook. Y el nombre completo de la persona, Jane Brown. Bien, Next va a estar vinculado en. Cambiar las clases de la isla, FAB, FA dash, LinkedIn. Además, necesitamos aquí LinkedIn y después el nombre de usuario en Jane Brown. Bien, así que finalmente terminamos con el marcado HTML de los elementos se crean y preparan Es hora de seguir adelante y empezar a escribir el CSS. En primer lugar, voy a crear algunos estilos de reset. Quiero deshacerme del margen predeterminado y el relleno de cada elemento. Para seleccionarlos, tenemos que usar un asterisco Entonces voy a poner tanto margen como relleno a cero. Bien, entonces a lo largo de este proyecto, voy a usar una rampa como unidad de medida Por defecto, una RAM es igual a 16 píxeles porque en este momento el tamaño de fuente del elemento HTML es igual a 16 píxeles. Quiero convertir una RAM en píxeles porque va a ser más conveniente y fácil de calcular. Entonces para ello, tenemos que disminuir el tamaño de fuente del elemento HTML del 100% al 62.5 por ciento Así que ahora una RAM es igual a diez píxeles Como puede ver, el tamaño de los elementos disminuyó. Bien, sigamos adelante y cuidemos el contenedor. Quiero que el contenedor ocupe toda la página. Así que vamos a seleccionarlo y definir el ancho y alto. Voy a establecer el ancho al 100%. En cuanto a la altura, voy a asignarle 100 de altura de ventana gráfica Entonces aquí decimos que el contenedor debería ocupar el 100 por ciento de la altura de la ventana gráfica A continuación, voy a cambiar el color de fondo. Usemos tu color 051321. Entonces después de eso, quiero colocar la tarjeta en el centro de la página. Para eso, vamos a usar CSS flexbox. Necesitamos usar tres propiedades diferentes. Flexión de pantalla. Entonces para centrar el elemento horizontalmente, necesitamos justificar el centro de contenido. Para centrado vertical. Tenemos que usar align items center. Eso es todo respecto al contenedor. A continuación, tenemos que encargarnos del auto. Ahora mismo, el contenido de la tarjeta no es del todo visible, así que vamos a arreglarlo usando algún fondo temporal. En primer lugar, vamos a establecer el ancho de la tarjeta, hacerla para que se ejecute, y luego cambiemos el color de fondo. Usa tu color D, D, D. Bien, así que ahora el contenido es visible en realidad con un cable mismo Ya terminamos. Tenemos que personalizar sus piezas por separado. Voy a comenzar con la primera parte, que va a ser la biografía de la tarjeta. Así que vamos a seleccionarlo y al principio definamos el color de fondo. Voy a usar aquí el color 458564. Después de eso, vamos a crear algo de espacio dentro de la caja usando relleno. Voy a poner relleno en la parte superior 23 de RAM. Entonces otra vez tres rem en el lado derecho a M en la parte inferior, y tres rem en el lado izquierdo. A continuación, voy a colocar los artículos horizontalmente en fila. Para eso, voy a usar display flex. Y también voy a hacer las esquinas superior izquierda y superior derecha Para eso, usemos radio de borde. En este caso, debería tomar cuatro valores diferentes. El primero va a ser para la esquina superior izquierda. Hagámoslo 0.5 rampa. Entonces voy a usar de nuevo puntos por Ram para la esquina superior derecha. Y debería ir seguido de dos ceros para las columnas inferior izquierda e inferior derecha Bien, eso es todo, ahora mismo con respecto a la biografía de la tarjeta, tenemos que darle estilo al contenido Voy a empezar con un botón. Contáctame porque creo que hará que el proceso de peinado sea un poco más fácil. Así que vamos a seleccionarlo. En primer lugar, voy a encargarme de su posición. Quiero colocarlo aquí en la parte inferior de la biografía de la tarjeta. Entonces hagamos que su posición sea absoluta. Entonces voy a establecer compró alguna propiedad a -2.5 rem. Entonces necesitamos la posición correcta. Voy a ponerla en diez rampas. Entonces como ves ahora mismo el botón ha terminado al final de la página. Ocurre porque la posición no está funcionando de acuerdo con los elementos padre, lo que se llama bio. Tenemos que hacer su posición relativa y luego el botón funcionará de acuerdo a la posición de los elementos padre. Bien, así que ahora se coloca correctamente. Definamos su anchura y altura. Voy a configurarlo en 20 RAM. En cuanto a la altura, hagamos que sea seis rampa. Y también cambiar el color de fondo. Haz que sea 3038. Bien, sigamos adelante y agreguemos algunos estilos más al fondo. Voy a cambiar el color del texto. Hagámoslo blanco. Después haga el botón redondeado usando border-radius con el valor de cinco rem Y también se deshace de la frontera por defecto es importante. Entonces, paso a paso, el botón se está volviendo más agradable. Vamos a encargarnos de la fuente. Voy a cambiar font-family. Hagámoslo Dole dice serif. Después aumenta el tamaño de fuente, hazlo de dos puntos para RAM. Y para transformar texto en mayúsculas. ¿Bien? En realidad, hay un par de estilos que quiero agregar aquí. Voy a crear alguna sombra usando box shadow con los valores 0.3 alrededor de 0.8 RAM. Y luego el valor RGBA, voy a usar color negro con la opacidad 0.3 A continuación, vamos a deshacernos del esquema predeterminado Establecer contorno a ninguno, y finalmente, cambiar el tipo del cursor. Haz que apunte al botón. Se ve bastante bien ahora mismo, ya terminamos con ello. Como veo ambos contenidos de la caja en este trazable quiero decir, el texto me contacta y el corchete angular Dejémoslo como está ahora mismo porque nos encargaremos de eso más adelante. Bien, una vez que terminemos con el botón y ahora podemos personalizar la imagen y la información personal Sigamos adelante y comencemos con la imagen. Voy a seleccionar un envoltorio div elementos. En primer lugar como definido ancho y alto. Voy a ponerlos a ambos a nueve rampas. Y también crear el espacio en el lado derecho usando margen derecho, con un valor de tres rondas. Después de eso, voy a seleccionar la propia imagen. Hagamos ancho y alto, ambos cien por ciento. En este caso a que heredará ancho y alto del desarrollo padre Me refiero al envoltorio IMG. Además de eso, tenemos que usar tu funda de ajuste a objetos. Nos permitirá mantener la calidad de la imagen. Y finalmente, hagamos que sea redondeado usando border-radius con un valor del 50 por ciento Entonces ahora la imagen se ve bastante bien. Como recuerdas, definimos el ancho de la imagen a partir del documento HTML. Así que sigamos adelante y deshagámonos de él porque ya no lo necesitamos. Bien, eso es. En cuanto a la imagen, sigamos adelante y personalicemos la información personal. Voy a seleccionar al Rapero. En primer lugar, definamos su ancho, que sea 60%. Entonces voy a agregarle un par de estilos comunes para el encabezado y para el párrafo. Hacer eso para evitar escribir las mismas cosas una y otra vez. Así que sigamos adelante y definamos font-family. Vuelva a usar ptosis serif. Después cambia el color, hazlo blanco. Y también voy a usar text shadow con los valores 0.1 rem point a RAM, y el color negro RGBA con la opacidad 0.3 Bien, entonces después de eso, necesitamos agregar algunos estilos individuales a ambos elementos. Comience con los elementos del encabezado. Voy a hacer el tamaño de fuente 2.5 rem. Después cambia el peso de la fuente. Hazlo 500. Además, voy a crear algún espacio entre letras. Hazlo 0.1 RAM, y luego crea algo de espacio en la parte inferior usando margen inferior con el valor one run. Bien, eso es todo sobre el rumbo. Sigamos adelante y seleccionemos un párrafo. En caso de párrafo, solo quiero hacer el tamaño de fuente 1.8 rem. Bien. Entonces como puedes ver, la primera parte de la tarjeta, la biografía de la tarjeta se ve bien y en realidad ya terminamos con ella. Ahora es el momento de encargarse de la siguiente parte. Quiero personalizar una pequeña sección debajo de la biografía del auto. Me refiero al rubro. Contáctame al principio, vamos a seleccionar su envoltorio llamado contacto. Cambiar el color de fondo. Voy a usar aquí, llamado o 2814d. Después haz que el texto sea blanco. Entonces voy a crear algún espacio dentro de los elementos. Vamos a usar relleno. Voy a ponerla en 1.5 rem en la parte superior e inferior. S4, los lados izquierdo y derecho. Hagamos el relleno para despotricar. Y también voy a usar radio fronterizo. En caso de contextos de tarjeta, quiero hacer redondeadas las esquinas inferior izquierda e inferior derecha. Entonces necesitamos los siguientes valores, 00 y luego 0.5 rem, y nuevamente 0.5 rem. ¿Bien? Ahora vamos a encargarnos del propio rumbo. Vamos a seleccionarlo y agregarle un par de estilos. En primer lugar, voy a cambiar la familia de fuentes. Vamos a usar de nuevo ptosis serif. Después cambia el tamaño de fuente, hazlo 1.8 RAM. Entonces voy a establecer el font-weight en 500. También haga el texto en mayúscula. Entonces crea espacio entre las letras. Hazlo 0.1 rem. Finalmente usa Shadow con los valores 0.1 rem point a RAM, y el color negro con la opacidad 0.3 Bien, entonces eso es todo respecto a esta sección. Sé que no se ve muy bien. O sea, se terminó detrás del botón parcialmente, pero en realidad no es el problema. Nosotros nos encargaremos de eso. Bien, así que paso a paso, seguimos adelante. A continuación, voy a darle estilo a los contacto de redes sociales. Quiero decir, estas tres cajas. En realidad, podemos deshacernos de este trasfondo temporal porque ya no necesitábamos. Entonces sigamos adelante y seleccionemos el desarrollo con una clase llamada Social. En primer lugar, voy a hacer que el fondo sea de color blanco. Luego crea algo de espacio dentro de la caja usando relleno. Hagámoslo 1.5 rem en los cuatro lados. Además, necesitamos crear algo de espacio entre las cajas usando margen. Vamos a ponerlo en dos rem en la parte superior e inferior y cero en los lados izquierdo y derecho. Entonces hagamos las esquinas redondeadas usando border-radius con un valor de 0.3 RAM Además, voy a hacer que los elementos se flexionen contenedor porque quiero colocar los elementos horizontalmente en fila. Así que usa display flex. Y luego con el fin de centrar los elementos verticalmente, vamos a usar align items center. Por último, necesitamos puntero de cursor. Bien, así que ahora mismo con envoltorio, ya terminamos. Personalicemos los elementos individuales en esas cajas. Voy a empezar con los iconos Font Awesome. Seleccionemos el rápido desarrollo. Tiene clase I can wrapper. Voy a establecer ancho y alto, ambos para que caigan corrieron. A continuación, voy a darle color de fondo al envoltorio. Pero como recuerdas, los tres iconos Font Awesome tienen diferentes colores de fondo. Por lo que tenemos que seleccionarlos individualmente. Sigamos adelante y comencemos con el correo electrónico. Correo electrónico seguido del envoltorio de iconos de clase. Entonces en caso de correo electrónico, y vamos a usar color de fondo con el valor d, d para B39 Entonces dupliquemos este código dos veces. El segundo recuadro es para Facebook. Entonces cambiemos la clase. Usa aquí FB, y también cambia el color. Voy a usar aquí 359 98s para el LinkedIn. Usemos el color de fondo 007, BB six. Bien, así que los tres iconos tienen los colores de fondo adecuados Sigamos adelante y agreguemos algunos estilos más comunes al envoltorio. Aquí necesitamos radio fronterizo con un valor del 50 por ciento. Porque tenemos que hacerlo redondeado. Luego use flexbox. Voy a centrar los íconos a la perfección. Entonces usemos display flex. Entonces justificar el centro de contenido. Para centrado horizontal. En cuanto al centrado vertical, necesitamos usar align items center, y luego crear algo de espacio en el lado derecho usando el valor de margen derecho para ejecutar Bien, entonces el envoltorio está preparado, todo queda bien, y voy a tener que añadir algunas estrellas a los íconos. Así que vamos a seleccionarlos. Voy a aumentar el tamaño de la fuente. Hagámoslo correr. Y también cambia el color, hazlo blanco. Bien, pasemos a los datos de contacto. Tenemos que personalizar el encabezado y el párrafo. Voy a empezar por el rubro. Vamos a seleccionarlo. En primer lugar, cambiemos la familia de fuentes. Voy a usar de nuevo dosis serif. Después cambia el tamaño de fuente, hazlo 1.6 RAM. Crea algo de espacio entre las letras. Quiero decir 0.1 RAM. Y también crear algo de espacio en la parte inferior usando margen inferior con valor 0.5 ran. Así es como se ven los encabezados en estos momentos. Tenemos que darles diferentes colores. Por lo tanto, voy a seleccionarlos por separado. Empecemos con el correo electrónico. Vamos a establecer el color a d. d para B39 Luego duplique este código dos veces, cambie el nombre de la clase a FB, y también cambie el color, hágalo 359 98s para el LinkedIn Voy a usar ceros de color 076. Bien, así que una vez que hayamos terminado con los encabezamientos, sigamos adelante y cuidemos los párrafos Sigamos adelante y seleccionémoslos. En primer lugar, cambiemos la familia de fuentes. Usar dosis serif. Entonces voy a establecer el tamaño de fuente en un punto para RAM. Cambia el color, hazlo 444, y luego crea algo de espacio entre las letras. Que sea 0.1 corrió. Bien, Así que en realidad con este alicatado, Ya casi terminamos El único elemento que tenemos que personalizar como esta pequeña flecha aquí. Así que vamos a seguir adelante y seleccionarlo ya que son los elementos span. En primer lugar, quiero colocarlo en el lado derecho de la caja. Para eso, podemos usar margen izquierdo. Y tenemos que configurarlo en auto. En realidad, no está funcionando. Los elementos span deben colocarse en el lado derecho. Creo que tenemos un pequeño error en el archivo HTML. Así que vamos a comprobarlo. Por lo que los elementos span deben estar fuera de los datos de contacto. Vamos a arreglarlo rápidamente. Y también cambiar aquí el selector. Necesitamos carrito social, seguido del lapso. Entonces voy a aumentar el tamaño de la fuente, hacerlo a Ram, cambiar el peso de la fuente, ponerla en negrita. Y también voy a establecer el color en 999. Por último, con el estilismo, ya terminamos. Ahora tenemos que seguir adelante y encargarnos de la funcionalidad de la tarjeta. Te voy a recordar lo que vamos a hacer. Entonces veamos el proyecto terminado. Entonces, por defecto, ocultaremos la sección Contáctame y los datos de contacto de redes sociales. Luego, una vez que hagamos clic en el botón, cambiará su forma, posición y contenido. Y los elementos aparecerán aquí abajo. Bien, sigamos adelante y nos encarguemos de eso. En primer lugar, voy a agregar un oyente de eventos click al botón Así que vamos al archivo script.js y seleccionemos el botón que voy a usar aquí método selector de consultas. Necesitamos especificar el nombre de la clase dentro del paréntesis Necesitamos aquí llamado btn. Entonces necesitamos adjuntar a cada oyente de eventos. Vamos a usar un método llamado add event listener. Este método toma dos parámetros. El primero es el tipo de evento. Como dijimos, vamos a usar click. Siguiente. Tenemos que pasar el año, la función flecha, que en realidad se ejecutará una vez que hagamos clic en el elemento. Bien, entonces déjame explicarte qué vamos a hacer. En realidad, vamos a crear una nueva clase y CSS llamada change. Vamos a agregar esta clase al contenedor. Después usando ocho, aplicaremos nuevos estilos a los elementos. Así que sigamos adelante y seleccionemos un contenedor usando un método selector de consultas de juego. Especifique aquí el contenedor de clase. A continuación tenemos que usar la propiedad llamada lista de clases. Esta propiedad nos da todas las clases que tiene el elemento Enter ahora tenemos que usar el método llamado toggle. El método toggle nos permite agregar la clase al elemento si no lo incluye , y eliminar la clase. Si el elemento incluye ocho dentro del paréntesis, necesitamos poner aquí un cambio de clase Bien, así que eso es todo con respecto a JavaScript. Ahora tenemos que usar el cambio de clase en CSS. Antes de hacer eso, voy a esconder aquí un par de elementos. Como sabes el rubro, contáctame y esas tres casillas deben estar ocultas por defecto. Entonces tenemos que asignar dos tarjetas de transformación de contacto. Con la función translate y. Nos permitirá mover los elementos hacia arriba. Pasemos aquí -100 por ciento. Entonces como puedes ver, el elemento se ha movido hacia arriba, pero terminó en la parte superior de la biografía de la tarjeta. En realidad, no lo necesitamos. Quiero colocarlo detrás de la biografía del auto. Para hacer eso, voy a usar la propiedad del índice Z Vamos a establecerla en, digamos 100. Entonces ahora el problema está arreglado. El elemento ha terminado detrás de la biografía del auto. Sigamos adelante y cuidemos los contextos de las redes sociales. Tenemos que esconderlas, y también tenemos que moverlas un poco hacia arriba. Entonces usemos de nuevo transform con la función translate y. Y en este caso, hagamos una pausa aquí -50 por ciento. Entonces las cajas se mueven hacia arriba y ahora tenemos que esconderlas. Con el fin de ocultar los elementos. Voy a usar opacidad cero y también visibilidad oculta. Bien, así que todo está listo. Sigamos adelante y hagamos que el evento click funcione. Cuando hacemos clic en el botón, entonces deberían aparecer esos elementos ocultos. Empecemos por el rubro contáctame. Tenemos que usar el cambio de clase, seguido del contacto de la tarjeta de clase. Entonces necesitamos transformarnos con la función translate y. Y en este caso, tenemos que pasar aquí cero. Además de eso, vamos a usar valores de transición, todos 0.5 s. si hago clic en el botón entonces el elemento aparecerá muy bien. Quiero añadir aquí un pequeño efecto. Voy a disminuir la escala del texto a cero y luego hacerla 100% una vez que hagamos clic en el botón. Entonces necesitamos transformarnos con la función de escala. Nos permite cambiar el tamaño de los elementos. Hagámoslo cero. A continuación, seleccione los elementos de encabezado. Pero en este caso con cambio de clase. Luego usa Transformar. Con la función de escala. Tenemos que hacer que el valor de la escala sea uno. Entonces otra vez use la transición. Inserte aquí 0.5 s. ¿Bien? Ahora una vez que hagamos clic en el botón, entonces la escala del encabezado aumentará. ¿Correcto? Ahora de un vistazo, parece que la dirección de la transformación es de derecha a izquierda. Creo que sería mejor cambiarlo y hacer una de izquierda a derecha. Para eso, tenemos que usar la propiedad llamada transform origin y tenemos que hacerla a la izquierda. Ahora creo que se ve mejor. Sigamos adelante y mostremos el resto de los elementos. Estoy en los contactos de redes sociales. Entonces necesitamos volver a usar el cambio de clase, seguido de la clase social. Entonces, para mover los elementos hacia abajo, tuvimos que transformarnos con la función translate y y con un valor de cero. Y luego para mostrar los elementos, necesitamos opacidad uno y visibilidad visible. Después de eso, tuvimos que usar transición, pero con diferente tiempo de retardo para cada caja. Seleccionemos el correo electrónico asignado a la transición con los valores 0.5 s y con el tiempo de retardo 0.3 s, Duplicemos este código dos veces. El segundo va a ser F B con un tiempo de retardo 0.5 s. Y luego para LinkedIn, necesitamos tiempo de retardo 0.7 s. Bien, así que como puedes ver, todo funciona bien hasta Lo único que hay que hacer es cuidar el botón. Tenemos que hacer un par de cosas. Por defecto, necesitamos mostrar el texto, contactarme. Una vez que hacemos clic en el botón, entonces debería cambiar al corchete angular. Además, necesitamos cambiar el ancho del botón y el radio del borde. Entonces, antes que nada, centremos el contenido. Es decir, ambos elementos perfectamente dentro del botón. Tenemos que seleccionar una tarjeta, btn conducta. Y luego el icono Font Awesome, necesitamos tarjeta VT y I. En primer lugar, hagamos el ancho cien por ciento. Después cambia la posición, haz un máximo absoluto. Necesitamos establecer propiedades superiores e izquierdas, ambas al 50 por ciento. Y finalmente, necesitamos usar la función Transformar Traducir. Aquí tenemos dos partes, -50% dos veces. Por lo que esta técnica se utiliza para enviar al elemento perfectamente. Bien, entonces el contenido está centrado. Ahora tenemos que ocultar el corchete angular por defecto. Vamos a seleccionar elemento y le asignamos opacidad cero y visibilidad oculta. Entonces una vez que hacemos clic en el botón, necesitamos ocultar el impuesto contactame y mostrar el corchete angular. Entonces en este caso tenemos que usar el cambio de clase seguido de la tarjeta de clase btn contacto lo que necesitamos opacidad cero Visibilidad oculta. Con el fin de mostrar los soportes. Necesitamos nuevamente el cambio de clase, seguido del elemento I. Y en este caso necesitamos opacidad con el valor uno y luego visibilidad visible. Bien, así como pueden ver, todo funciona bien. Ahora tenemos que encargarnos de la forma del botón. Cuando hacemos clic en él, necesitamos disminuir el ancho del botón. Entonces, seleccionemos un botón con el cambio de clase. Voy a hacer con seis RAM. Después cambia la posición correcta. Hagámoslo como tres RAM. Además, voy a cambiar ligeramente la posición inferior, que sea menos tres RAM. Y por último, usar border-radius con el valor 50 por ciento Entonces, si hacemos clic en el botón, entonces cambiará su forma. Bien, todo funciona bien como un gas. Lo único que tenemos que hacer es agregar los efectos de transición. Sigamos adelante y comencemos con el botón. Voy a asignar a transición con el valor 0 y la duración 0.5 s. a continuación, necesitamos agregar transición a la tarjeta btn conducta Vamos a insertar aquí todos los 0.5 s y poco tiempo de retardo, 0.1 s. A continuación tenemos que hacer la transición a, nuevo contrato escrito de tarjeta, pero con la clase de cambio, vamos a pasar todos 0.1 s. y finalmente, usar transición con el elemento I. Quiero decir yo elemento con la clase cambiar dirección 2.5 s. bien, así como puedes ver, todo funciona perfectamente y en realidad ya terminamos con este pequeño proyecto 17. Proyecto 14 - CSS Grid Menu: En este video, vamos a estar construyendo una página de aterrizaje simple con un menú CSS Grid. El proyecto se construirá con base en tecnólogos. Usaremos HTML, CSS y un poco de JavaScript. Bien, sigamos adelante y describamos primero el proyecto. Consta de dos partes principales. El primero va a ser una simple landing page. No puse aquí muchos elementos porque el foco principal del proyecto será el diseño de cuadrícula CSS. Tenemos aquí el banner con algunos textos y la imagen de fondo a pantalla completa En la esquina superior izquierda, se coloca un icono de menú. Si hago clic en él, esas líneas se moverán al lado derecho en orden. El menú de la cuadrícula aparecerá con algunos efectos agradables. Tenemos aquí un par de elementos del menú alineados muy bien. También en la esquina superior izquierda vemos el botón x de cierre. Si hago clic en él, entonces el menú se cerrará. El proyecto va a responder a diferentes tamaños de pantalla. Si inspecciono la página y reviso en tamaños de pantalla más pequeños, verás que responde y se ve bien. Una cosa a tener en cuenta aquí, vamos a usar el primer enfoque de escritorio. Vamos a construir el proyecto para mayor tamaño de pantalla en el que estoy. Esto coincide con el ancho de 1920 píxeles, alto de 1080 píxeles Si vas a usar este tamaño de pantalla más pequeño durante la construcción de este proyecto, entonces puede que no se vea bien. Pero no te preocupes, al final del día, lo haremos receptivo a diferentes tamaños de pantalla. Mientras tanto, puedes usar herramientas de desarrollador. Estoy en el modo responsive y especifico el ancho como 1920 pixeles y el alto como 108 semanas. Creo que estamos listos para irnos. He creado una nueva carpeta en el escritorio llamada menú CSS Grid, en la que puedes encontrar otra carpeta para las imágenes. Puedes descargar las partes fuente desde el enlace en la descripción. Voy a abrir esta carpeta en VS Code. Entonces sigamos adelante y creamos tres archivos diferentes para HTML. Voy a llamarlo index.html. Entonces necesitamos style.css. Y se enamoran de JavaScript, script.js. Justo después de eso, sigamos adelante y creemos el documento HTML básico en el archivo index.html. Para eso, voy a usar Emmet. Necesitamos colocar un signo de exclamación y luego presionar Enter o tab Así que aquí vamos. Sigamos adelante y cambiemos el título. Voy a poner aquí el menú CSS Grid. Entonces voy a crear enlaces para los archivos CSS y JavaScript. Vamos a abrir la etiqueta de enlace y especificar aquí la ruta del archivo. Necesitamos el nombre del archivo style.css como archivo JavaScript público. Voy a abrir la etiqueta de script. Luego en el atributo source, vamos a especificar el nombre del archivo. Bien, entonces los tres archivos están conectados. A continuación, voy a traer un par de fuentes de Google. A lo largo de este tutorial, vamos a usar dos fuentes diferentes. Sigamos adelante y visitemos el sitio web de Google Fonts. Voy a escribir aquí Google Fonts. Así que aquí está el sitio web de las fuentes de Google. Voy a buscar guion de baile. Entonces aquí está. Después de eso, busquemos la losa Josephine. Voy a personalizar esta fuente porque usaremos este teléfono con diferente peso de fuente. Así que vamos a comprobar aquí. Par de cajas. Bien, finalmente, vamos a agarrar el enlace y pegarlo en el elemento head. Bien, así que estamos casi listos para comenzar a codificar. Por último, quiero ejecutar el proyecto en el navegador. Para eso, usemos uno de los paquetes de código de vistas que se llama Live Server. Nos permite ejecutar la vida del proyecto al navegador y realizar actualizaciones sin actualizar la página cada vez. Por lo que recomiendo instalar y utilizar este paquete. Bien, coloquemos el editor y el navegador. Así. Y empezar. Entonces al principio voy a crear el marcado HTML para todo el proyecto, y luego comenzaremos a escribir CSS y JavaScript. Sigamos adelante y creamos el marcado Para la primera parte del proyecto, que va a ser el aterrizaje Vamos a abrir la etiqueta div. Envolverá todo el contenido de los proyectos. Voy a darle contenedor de clase. Después dentro del contenedor voy a insertar el icono del menú de hamburguesa Se construirá utilizando los desarrollos. Así que vamos a abrir el desarrollo y asignado a la clase menú de hamburguesas El icono del menú constará de dos partes. El primero va a ser el ícono de la hamburguesa. En cuanto a la segunda parte, va a ser el x botón de cierre. En primer lugar, vamos a abrir un elemento div con líneas de clase Se envolverá las tres líneas. Estoy en la primera parte del icono. Así que vamos a insertar aquí tres elementos div con un par de clases. Me refiero a la línea y la línea uno. Entonces voy a duplicar esta línea de código dos veces y cambiar los nombres de las clases con la línea dos y la línea tres. A continuación, voy a abrir otro div, que será un envoltorio de las X líneas de botones de cierre. Quiero darle una clase X btn. Después de eso, vamos a insertar aquí elemento div con clases x línea y x línea uno. Después duplicarlo y cambiar el nombre de la clase. Bien, así que eso es todo sobre el menú de hamburguesas. A continuación, voy a encargarme del encabezado. Vamos a abrirlo y asignado a la cabecera de la clase. A continuación necesitamos la pancarta. Entonces, insertemos aquí un nuevo desarrollo con el banner de la clase. El banner constará de dos elementos diferentes. El primero va a ser el rumbo. En cuanto al segundo, debería ser el párrafo como primero. Insertemos aquí H1, e insertemos aquí algún texto. Esta es una landing page. A continuación necesitamos un párrafo con un texto con un, en realidad voy a insertar aquí el texto con un menú CSS Grid, pero quiero usar algunos estilos diferentes para la cuadrícula CSS. Por lo tanto, envolvamos esas dos palabras con elementos span y luego escribamos menu. Bien, veamos sobre la primera parte del marcado. Sigamos adelante y creamos el menú de navegación. Voy a abrir los elementos nav que están asignados a la navegación de clases. Por lo que el menú de navegación estará representado por una lista. Voy a darle un menú de navegación de clase. En esa lista de elementos, voy a poner un par de elementos de lista. Vamos a abrir los elementos LI. Debe tener elemento de menú de navegación de clase. Entonces el elemento de la lista incluirá un elemento de enlace con el enlace del menú de navegación de clase. Entonces como primer elemento de navegación voy a insertar tu casa. En general tendrá 11 artículos. Por lo tanto, voy a duplicar diez veces un elemento ligero. Y luego voy a cambiar rápidamente los artículos. El segundo va a ser sobre. Entonces tendremos proyectos. Blog. El siguiente va a ser Galería. También tendrá precios de cartera que eventos. Los clientes. La siguiente serán las ofertas. Y por último, voy a poner aquí contactos. Bien, así que eso es todo sobre el marcado HTML. Todos los elementos están creados y ahora estamos listos para comenzar a estilizarlos. Pasemos al archivo style.css. En primer lugar, voy a crear algunos estilos de reset. Quiero deshacerme del margen predeterminado y el relleno de cada elemento. Para seleccionar cada elemento, necesitamos usar un asterisco Y luego para deshacerme del margen predeterminado y el relleno, voy a ponerlos a cero a ambos . ¿Bien? Entonces a lo largo de este tutorial, voy a usar RAM como unidad de medida. Por defecto, 1 g equivale a 16 píxeles porque el tamaño de fuente del elemento HTML es igual a 16 píxeles. Quiero convertir una RAM en diez píxeles porque creo que sería más conveniente de usar y calcular. Entonces tenemos que disminuir el tamaño de fuente del elemento HTML y tenemos que hacerlo 62.5 por ciento En este caso, una rampa debe ser igual a diez píxeles. Entonces en estos momentos, el tamaño de los elementos han disminuido y se hicieron más pequeños. Bien, sigamos adelante y nos ocupemos del cabezazo. Quiero que ocupe toda la ventana gráfica. Así que vamos a seleccionarlo y definir su ancho y alto. la siguiente manera. Voy a hacer con el 100%. En cuanto a la altura, voy a hacerla cien de altura de viewport Significa que ocupa hasta cien por ciento de toda la ventana gráfica Después de eso, vamos a establecer la imagen como fondo de pantalla completa En primer lugar, voy a usar gradiente lineal. Y voy a poner aquí tres valores RGBA diferentes. El primero va a ser 884,170.7. La opacidad. A continuación, voy a usar 1887190 y opacidad En cuanto al tercer color, vamos a usar aquí color negro. Necesitamos 03 veces y opacidad 0.2. Después de eso, vamos a especificar la URL. Me refiero a la parte de la imagen. Tenemos carpeta llamada images y necesitamos seleccionar PG dot JPG. A continuación necesitamos Centro y tampoco repetir. Y por último, hagamos la portada del tamaño del fondo. Bien, entonces el fondo está listo para el encabezado y luego viene el banner. Quiero colocarlo en el centro de los préstamos. Para eso, podemos usar un par de formas. Pero para mí, el mejor es flexbox. Necesitamos asignar un par de propiedades flexbox al elemento header El primero va a ser display flex, porque necesitamos hacer header Flex container. A continuación tenemos que cambiar la dirección. Tenemos que hacerlo columna. Entonces para centrar los artículos dentro del contenedor, necesitamos justificar el centro de contenido, y también alinear los elementos al centro. Bien, entonces la pancarta está centrada. Ahora necesitamos personalizar el encabezado y el párrafo. Sigamos adelante y comencemos con el rumbo. Vamos a seleccionarlo. En primer lugar, voy a cambiar la familia de fuentes. Usemos aquí uno de los scripts de baile de Google Fonts. A continuación necesitamos coercitivos. Entonces voy a aumentar el tamaño de la fuente. Hagámoslo ocho RAM. También cambia el peso de la fuente. Que sea 400. Después de eso, voy a cambiar el color. Hagámoslo e. E. Crear algo de espacio entre las letras usando espaciado entre letras, 0.5 rem. Además de eso, voy a crear algo de espacio en la parte inferior del elemento usando margin, bottom three rem. Por último, usemos la sombra de texto con los valores 0.2, 0.4 RAM. Y el color negro RGB a, tres ceros, y la opacidad 0.3 Bien, entonces el rumbo se ve bastante bien. Pasemos al párrafo. Sigamos adelante y seleccionemos este elemento. Voy a hacer su familia de fuentes. Nuevamente, guión de baile, cursiva. A continuación, aumenta el tamaño de fuente, hazlo para RAM. También cambia el color. Hazlo e. Voy a crear espacio entre las letras. Pero en este caso, hagamos que apunte a RAM. Y por último, vuelve a usar la sombra de texto. En realidad voy a agarrar esta línea de código de aquí y pegarla para el párrafo. Bien, Siguiente, quiero colocar el párrafo del lado derecho Para eso, podemos usar text-align, ¿verdad? Recuerda, hemos envuelto las palabras CSS grid con un elemento span porque necesitamos un estilo diferente para esas dos palabras. Entonces sigamos adelante y aplicarlo. Voy a seleccionar elemento span. Vamos a establecer la familia de fuentes en Josephine slab serif. Después aumenta el tamaño de la fuente, hazlo cinco rem. Cambia el peso de la fuente, hazlo 700. Y finalmente, transformar el texto en mayúsculas. Bien, así que finalmente terminamos con el párrafo y en realidad hemos terminado de trabajar en la pancarta A continuación, es el momento de personalizar el ícono de Menú. Estoy en la primera parte del mismo, que consta de tres líneas blancas. Sigamos adelante y seleccionemos los desarrollos rápidos, que tiene menú de hamburguesas de clase En primer lugar, voy a hacerlo visible. Entonces necesitamos definir la anchura y la altura. Hagamos ambos de rampa 3.5. Y también le voy a asignar un color de fondo temporal. Hagámoslo rojo. este momento el icono se coloca en la esquina superior izquierda del préstamo. Esta no es una posición del todo correcta. Así que definamos la posición del icono y haciéndolo fijo. Y también, voy a especificar las posiciones superior e izquierda. Voy a hacer que ambos sean 3.5 rem Bien, así que ahora mismo el icono se posiciona correctamente Por último, quiero cambiar el tipo de cursor y hacer que apunte. Bien, entonces a continuación voy a mostrar las líneas. En primer lugar, vamos a seleccionar el desarrollo envoltorio, que tiene las líneas de nombre de clase, y darle un par de fichas. Voy a establecer ancho y alto, ambos al 100%. En este caso, el elemento heredará el ancho y alto de su elemento padre, el menú hamburguesa Y ahora vamos a encargarnos de las líneas. Selecciónelos con una línea de nombre de clase común. Voy a establecer con como cien por ciento. En cuanto a la altura. Hagámoslo punto para RAM. También cambia el color de fondo. Que sea blanco. Y también voy a hacer las esquinas de las líneas ligeramente redondeadas. Para ello, vamos a usar border-radius con el punto de valor para ejecutar Bien, entonces ahora las líneas son visibles, pero como adivinaste, tenemos que cuidar su posición Para eso, voy a volver a usar libros flex. Así que vamos a asignar a las líneas. Flexión de pantalla. Siguiente. Tenemos que cambiar la dirección. Voy a hacerla columna. A continuación, tenemos que crear algún espacio entre las líneas. Y para eso necesitamos usar justificar contenido con el espacio de valor de manera uniforme. Y por último, necesitamos alinear elementos, centro. ¿Bien? Entonces ahora mismo las líneas están posicionadas correctamente. Si nos deshacemos del fondo rojo, los verás mejor. Bien, en realidad con la primera parte del proyecto ya terminamos El encabezado está estilizado, se ve bastante bien. Ahora tenemos que pasar a la navegación. Voy a diseñar el menú de navegación, y después de eso, voy a hacer que funcione. Entonces para proceder, voy a ocultar el encabezado por un tiempo y las líneas, para luego comenzar a trabajar en la navegación Sigamos adelante y asignemos al encabezado y la visualización de las líneas. No. Bien, así que aquí solo tenemos una lista de navegación. Sigamos adelante y comencemos a personalizar la navegación. Voy a seleccionar suficientes elementos. En primer lugar, fijemos su ancho y alto. Ambos 200 por ciento. Y voy a cambiar el color de fondo. Usemos tu color d, d, d. Así que ahora mismo la navegación comienza desde la esquina superior izquierda. Sucede porque el encabezado está oculto por un tiempo. Entonces quiero definir la posición actual manualmente también. Para ello, necesitamos posición absoluta. Y luego establecer las propiedades superiores e izquierdas, ambas a cero. Por lo que ahora la navegación ocupa todo el ancho y alto de la página. Creo que es hora de personalizar un poco los artículos. En primer lugar, seleccionemos los elementos LI y nos deshagamos de las balas predeterminadas. Ahora mismo, esas balas no son visibles porque establecemos el relleno a cero. En realidad, si lo vuelvo a encender, entonces verás las balas. Vamos a deshacernos de ellos. Voy a seleccionar elementos LI y eso se le asigna, o al menos estilo ninguno. A continuación, voy a seleccionar los elementos de enlace. En primer lugar, deshagamos del subyacente predeterminado usando decoración de texto, ninguno. Entonces voy a establecer familia de fuentes a Josephine slab serif También aumenta el tamaño de fuente, hazlo 2.5 RAM. Después cambia el peso de la fuente. Voy a hacerlo un poco más audaz. Use 700. Después transforma el texto en mayúsculas Y después de eso, voy a crear algún espacio entre las letras. Hagamos que apunte a rentar. Bien. Entonces los artículos se ven mucho mejor, pero voy a agregarles algunos estilos más. Cambiemos el color de fondo. En este caso, voy a usar el color a cinco. Ver C7. Entonces hagamos que el texto sea blanco. Y también hacer las esquinas de los elementos a su alrededor usando border-radius con el valor 0.5 renta Bien, así que eso es todo por ahora respecto a los elementos de enlace A continuación, tenemos que empezar a usar la grilla CSS En realidad, voy a ejecutar el proyecto al Mozilla Firefox porque en estos momentos cuenta las mejores herramientas de desarrollador para la grilla CSS. Quiero decir, es mucho más fácil trabajar en Mozilla Firefox cuando tratas con el diseño de cuadrícula CSS. Si no tenemos el Mozilla Firefox, entonces recomiendo descargarlo e instalarlo. Vamos a agarrar la URL. Después abre el navegador y pegarlo aquí. Entonces tenemos aquí nuestro proyecto en marcha. Voy a inspeccionar la página. Entonces ves aquí las herramientas para desarrolladores. Es algo similar a las herramientas para desarrolladores de Google Chrome, pero verás algunas diferencias cuando empecemos a usar la cuadrícula CSS, ¿verdad? Entonces antes que nada, voy a hacer que el elemento null greet container. Para eso tenemos que asignarle grilla de visualización. A continuación tenemos que definir las columnas y filas. En el caso de los elementos nav, vamos a tener tres columnas y tres filas. Entonces necesitamos usar columnas de plantilla de cuadrícula. El tamaño de la primera columna debe ser a RAM de lo que necesitamos una unidad fraccionaria Y luego otra vez a rampa. En cuanto a las filas, como decíamos, necesitamos tres de ellas. El tamaño de la primera fila debe ser de diez RAM. Entonces otra vez una unidad fraccionaria. Y luego correr. Entonces hemos definido las columnas y las filas. Y para poder verlas mejor, voy a marcar esta cajita. Y también voy a mostrar los números de línea. Así que aquí vamos. Ahora nuestra cuadrícula es visible. Desafortunadamente en Google Chrome. En este momento no tenemos esa oportunidad. Bien, déjame explicarte qué significan esas columnas y filas. Esas pequeñas columnas serán este ritmo. Después en la primera fila, va a estar el botón x de cierre. Como menú plegable en sí. Se va a colocar aquí en el medio. Sigamos adelante y definamos la posición del menú de nueces. Vamos a seleccionarlo. Y luego definir columna de cuadrícula con los números de línea 2.3 y fila de cuadrícula. Los números de línea 2.3. Otra vez. Como ves, el menú se coloca correctamente en la segunda columna, y ahora es el momento de colocar los elementos para eso. En primer lugar, tenemos que hacer suficiente menú, un contenedor de cuadrícula, que la rejilla de visualización. Y después de eso tenemos que definir las columnas y las filas. Entonces usemos columnas de plantilla de cuadrícula. En general, voy a crear 12 columnas. Vamos a usar la función de repetición. Después especifique el número de las columnas 12 y este tamaño, una unidad fraccionaria Después de eso, vamos a definir filas de plantilla de cuadrícula. Utilice la función de repetición. Tendremos cuatro filas, cada una de ellas igual a una unidad fraccionaria Y además de eso, voy a crear también el espacio entre las celdas de la cuadrícula usando brecha de cuadrícula igual a rampa. Bien, así que antes que nada, vamos a mostrar las líneas de la cuadrícula del menú de navegación Como ve, tenemos 12 columnas y cuatro filas. En este momento el diseño está un poco desordenado, pero pronto nos encargaremos de eso Antes de comenzar a posicionar los artículos individuales quiero usar, nuevamente, Flexbox Usando un par de propiedades flexbox, haremos que los elementos se estiren en las celdas y también se centrará el contenido de cada elemento Entonces tenemos que usar display flex. Entonces justifican centro de contenidos. Además, necesitamos alinear los artículos al centro. Y voy a hacer que la altura sea igual al 100%. Bien, Así que ahora los artículos se ven mejor y en posición estándar luego por separado. Para seleccionarlo, voy a usar el enésimo selector hijo Entonces necesitamos el elemento del menú de navegación seguido del enésimo selector secundario Y tenemos que especificar aquí el número del ítem. Y ganamos. Los primeros elementos deben colocarse en las dos primeras filas, y deben ocupar las tres primeras columnas. Así que necesitamos columna de cuadrícula donde los números de línea 1.4 y salir de rol con los números de línea 1.3. Entonces el primer ítem es la posición. Pasemos al segundo. En realidad, voy a copiar este código y luego cambiar el número que necesitamos. El segundo elemento se va a colocar también en las dos primeras filas, las columnas. Se va a colocar entre números de cuarta y séptima línea. Entonces necesitamos grilla columna 4.7 y fila de cuadrícula Los números de línea 1.3. Entonces dejémoslo como está. Eso es todo sobre el segundo ítem. Sigamos adelante y pasemos al siguiente punto, que va a ser tres. Por lo que el tercer elemento se posicionará en la primera fila. En cuanto a las columnas, se va a colocar desde el número de la séptima línea hasta el final del contenedor de cuadrícula. Entonces necesitamos columna de cuadrícula con una línea número siete y menos uno. Según la fila de la cuadrícula va a ser 1.2. Entonces, como ves, el tercer artículo se coloca correctamente. A continuación viene el cuarto ítem. Voy a colocarlo en la segunda fila. Y ocupará dos columnas, las columnas entre la séptima y la novena línea números. Entonces necesitamos la columna de rejilla 79. En cuanto a la fila de la cuadrícula va a ser 2.3. ¿Bien? A continuación tenemos el quinto ítem. Se va a colocar en la segunda fila. En cuanto a las columnas, voy a colocarla entre los números de la novena y la línea 11. Entonces cambiemos aquí los valores que necesitamos aquí, columna de cuadrícula 911 y fila de cuadrícula 2.3. Bien, entonces paso a paso, estamos avanzando y creando el diseño de la cuadrícula. Pasemos al siguiente punto, que va a ser el sexto. Por lo que se debe colocar de nuevo en la segunda fila. En cuanto a las columnas, ocupará dos columnas al final del contenedor de rejilla. Así que necesitamos salir columna son los números de línea 11, n menos uno. N fila de rejilla. Nuevamente con los números de línea 2.3. Bien, eso es. Acerca del sexto ítem. A continuación viene lo mismo a la una. Por lo que el séptimo ítem se va a colocar en la tercera fila, y ocupará seis columnas desde el inicio del contenedor de líquido. Necesitamos columna de rejilla con números de línea 1.7. En cuanto a la fila de la cuadrícula, debería ser 3.4. Bien, entonces eso es todo sobre el séptimo ítem. Pasemos al siguiente, que es ítem. Por lo que se volverá a colocar en la tercera fila. En cuanto a las columnas, quiero colocarla desde la línea número siete hasta el final del contenedor. Así que necesitamos la columna de cuadrícula con un número de línea siete menos uno, y la fila de cuadrícula tres menos uno. ¿Bien? Por lo que quedan sólo tres artículos. Sigamos adelante y definamos sus posiciones rápidamente. Sé que este proceso es un poco aburrido, pero así es como funciona la cuadrícula CSS. Pasemos al noveno ítem. Entonces el noveno ítem se va a colocar en la última fila y luego en la cuarta. En cuanto a las columnas, voy a colocar entre los números de la primera y tercera línea para que ocupe las dos primeras columnas. Necesitamos grilla columna 1.3. En cuanto a la fila de la cuadrícula, necesitamos cuatro y menos uno. Bien, a continuación tenemos el décimo ítem. Se va a colocar de nuevo en la cuarta fila. Y debería ocupar dos columnas desde la línea número tres hasta la línea número cinco. Entonces necesitamos grilla columna 3.5 y salir de rol de nuevo, cuatro y menos uno. Bien, por último, el último término de ítems. Voy a colocarlo en la última fila así como para las columnas. Se va a colocar entre la línea número cinco y la línea número siete. Entonces necesitamos grilla columna 5.7. Fila de cuadrícula de nuevo para n menos uno. Bien, así que eso es todo sobre el menú de navegación. Está muy bien posicionado, se ve bastante bien. Y ahora es el momento de seguir adelante y encargarse de las otras cosas. Creo que podemos volver a cambiar a Google Chrome porque ya no necesitamos la ayuda de los números de línea de la cuadrícula. Así que una vez que hayamos terminado con el diseño del menú de navegación, voy a seguir adelante y encargarme del cierre x. Pero antes que nada, vamos a mostrar las líneas. Para eso necesitamos seleccionar x línea. Definamos ancho y alto. Voy a establecer width a 3.5 ran En cuanto a la altura, vamos a hacerla punto para RAM. Luego cambia el color de fondo. Vamos a usar tu color, 307bd F. Y también voy a usar radio de borde con un punto de valor para rentar Entonces en estos momentos las líneas no son visibles porque terminaron detrás de la navegación. Para poder mostrarlos, tenemos que usar una de estas propiedades CSS llamada índice Z. Y tenemos que asignarlo al propio menú de hamburguesas porque el fondo es la parte del mismo. Entonces pongamos el índice en, digamos 100. Entonces, como puedes ver, las líneas se muestran en este momento. No tienen la forma de x y tenemos que encargarnos de eso. Entonces para que se vean como x, voy a usar transformaciones CSS, y luego rotan y traducen funciones. Así que sigamos adelante y seleccionemos x línea uno. Luego usa Transformar con la función de rotar. Voy a rotar la línea en -45 grados. Entonces dupliquemos este código, cambiemos el nombre de la clase. Necesitamos x línea dos, y también deshacernos del signo menos de aquí. ¿Bien? Entonces en este momento no tenemos la x perfecta Necesitamos usar la función Translate. Adicionalmente, nos permite mover el elemento ya sea horizontal o verticalmente según los ejes x e y Entonces en este caso, necesitamos traducir y con el valor 0.3 RAM S4. La segunda línea, necesitamos de nuevo traducir Y, pero con puntos negativos, tres rampa. Entonces ahora tenemos la x perfecta. Lo único que voy a hacer es mover el botón ligeramente hacia abajo. Podemos hacerlo usando un par de formas diferentes. En este caso, voy a usar posiciones. Quiero centrarlo perfectamente dentro del menú de hamburguesas Así que sigamos adelante y seleccionemos x btn. Después definir sus propiedades de posición, absoluta, set, top e left, ambas al 50%. Luego usa transform translate. -50 por ciento. Después otra vez -50 por ciento. En realidad, esta técnica se utiliza para centrar el elemento dentro del contenedor perfectamente. Bien. Entonces eso es todo con respecto al botón de cierre x. Ahora es el momento de que el menú de hamburguesas funcione. En primer lugar, voy a mostrarlo de nuevo los préstamos y ocultar el menú de navegación. Así que vamos a seguir adelante y deshacernos de la exhibición, ninguna de aquí. Además, voy a mostrar el icono del menú. Entonces sigamos adelante y ocultemos la navegación. En este caso, lo voy a hacer usando opacidad con valor cero y visibilidad oculta. Además de eso, también necesitamos las mismas propiedades para el botón X, porque tenemos que ocultarlo. Entonces usémoslos para X BTN. Bien, así que todo está listo para que el menú de hamburguesas funcione Lo primero que tenemos que hacer es crear el evento click. Para eso voy a usar JavaScript. Abramos el archivo script.js y luego seleccionemos el menú de hamburguesas Voy a hacer eso usando el método selector de consultas. Tenemos que adjuntarlo al documento, y luego dentro de los paréntesis, tenemos que especificar el nombre de la clase, en este caso menú hamburguesa A continuación tenemos que adjuntarle un oyente de eventos. Para ello, tenemos que usar un método llamado add event listener Se necesitan dos argumentos. El primero va a ser el tipo de evento. Como dijimos, vamos a utilizar el evento click. Entonces pasémoslo aquí como en parte segundo argumento. Debe ser la función que luego se ejecutará una vez que hagamos clic en el elemento. En este caso, voy a usar una función de flecha. Bien, así que ahora tenemos que pasar aquí el bloque de código que necesitamos que se ejecute una vez que hagamos clic en los iconos y se desencadene el evento. Déjame explicarte lo que vamos a hacer. Voy a crear una nueva clase y CSS llamada change. Vamos a agregar esta clase al contenedor onclick. Para ser más precisos, usaremos el método toggle, lo que significa que agregaremos la clase al contenedor si no la tiene. Y vamos a quitar la clase. Si el contenedor hace hábito El método toggle nos permitirá evitar el uso de dos métodos diferentes at y remote. Te preguntarás ¿por qué agregamos la clase al contenedor y no al menú de hamburguesas El motivo es que una vez que el contenedor tenga la clase, podremos usarlo para todos sus descendientes. Bien, sigamos adelante y seleccionemos el contenedor. Voy a utilizar de nuevo el método selector de consultas. A continuación, especifique aquí contenedor className. A continuación voy a usar una de las propiedades llamadas lista de clases. En realidad nos da todas las clases que tiene el elemento. Después de eso tenemos que agregar a esta propiedad, ellos alternan método. Y dentro del paréntesis, vamos a especificar el nombre de la clase, que vamos a crear Cambio. Bien, así que eso es todo con respecto al JavaScript. Ahora tenemos que crear un cambio de clase en el archivo CSS. Así que una vez que hacemos clic en el icono, tenemos que ocultar el encabezado, muestra la navegación, y también mostrar la x cerrando, pero esa es probablemente las líneas del icono del menú. No voy a ocultarlos simplemente porque vamos a crear un efecto diferente. Bien, así que vamos a ocultar el encabezado. Necesitamos un cambio de clase, seguido del encabezado de clase. Entonces, si esta selección es válida, entonces necesitamos aplicar los siguientes estilos. Necesitamos opacidad cero y visibilidad oculta. A continuación, vamos a mostrar la navegación. Utilice de nuevo cambiar con la navegación. Y en este caso necesitamos opacidad con el valor uno y visibilidad visible. Además de eso, también tenemos que mostrar el botón X. Entonces usemos change, seguido de la clase x BTN Y usa aquí opacidad uno y visibilidad visible. Bien, así que si hago clic en el icono, entonces el encabezado se ocultará y aparecerá el menú knock y el botón X Todo funciona bien hasta ahora. Ahora voy a agregar algunos efectos agradables a nuestro proyecto. Quiero ocultar el encabezado y mostrar la navegación con algunos efectos de fundido. Los crearemos usando transiciones CSS. Entonces voy a asignar al encabezado los valores de transición todos y 0.5 s, que es una duración. Necesitamos lo mismo para la navegación, pero tenemos que usar la propiedad transition con el cambio de clase. Entonces, si hago clic en el icono que la navegación mostrará con un efecto de desvanecimiento, y lo mismo sucederá en el siguiente clic, el préstamo aparecerá con falso. ¿Correcto? Siguiente Voy a encargarme de los elementos de navegación. Echemos un vistazo al proyecto terminado. Como dije, los artículos aparecen de izquierda a derecha. Entonces tenemos que movernos y colocarlos del lado izquierdo. Y luego tenemos que mover los artículos hacia el lado derecho onClick Entonces voy a usar Transform con la función translate. En este caso, necesitamos traducir x porque tenemos que mover el ítem así de acuerdo al eje x, vamos a insertar aquí menos cien por ciento Entonces en este momento el diseño se ha estropeado, pero eso no es un problema porque por defecto, vamos a ocultar los elementos. Para eso. Voy a usar una de estas propiedades CSS llamada overflow hidden. Y tenemos que asignarlo al elemento LI. Como ve, los artículos no están completamente ocultos. Vemos los bordes de ellos. Aumentemos el valor de la función translate. Voy a lograr que sea el 105 por ciento. Bien, ahora es mejor. Necesitamos mostrar los elementos una vez que hacemos clic en el icono del menú. Pero para que este efecto sea más agradable, tenemos que definir también algunos tiempos de retraso Entonces para volver a mostrar los elementos de navegación necesitamos cambio de clase, seguido del enlace, me refiero a enlace del menú de navegación. Entonces necesitamos transformarnos con la función translate x. Y en este caso tenemos que pasar aquí cero. Además de eso, voy a usar transformación de transición que la duración 0.7 s. tiempo de retardo 1 s. Bien, así que como veis, tenemos aquí bonito efecto cool Por ahora, todo funciona bastante bien. Ahora voy a tomar aquí de los íconos. Me refiero al ícono de Menú en el rellano y los actos de cierre. Pero lo que voy a hacer es que voy a mover las líneas del icono de izquierda a derecha en orden comenzando por la de arriba. Entonces para hacer eso, voy a usar de nuevo transform con función Translate y luego transiciones. Así que tenemos que usar el cambio de clase seguido de la línea de clase que necesitamos transformar De nuevo traducir la función x y voy a pasar aquí el 120 por ciento. ¿Bien? Ahora necesitamos transición para las tres líneas por separado porque tenemos que asignarles diferentes tiempos de retardo. Empecemos con la línea uno. Utilice la transformación de transición con una duración de 0.5 s y el punto de tiempo de retardo 1 s. Vamos a duplicarlo dos veces, luego cambiar los nombres de clase. Y también los tiempos de retraso. Necesitamos 0.3 s para esta segunda línea y 0.5 s para la tercera línea. Bien, si hago clic en el icono, entonces las líneas se moverán de izquierda a derecha en orden Pero en realidad, eso no es lo que queremos. Quiero que los préstamos se muestren hasta que las líneas terminen la mudanza. Necesitamos usar algún tiempo de retraso para el encabezado y la navegación también. Para el encabezado, voy a usar 0.7 s. eso probablemente sea navegación. Usemos la misma cantidad de tiempo. Ahora como puede ver, el problema está arreglado. Bien, eso está bien. Pero también hay que encargarte de otras cosas. Tenemos que ocultar las líneas una vez que se mueven hacia el lado derecho. Sigamos adelante y usemos desbordamiento. Oculto. Bien, eso es todo sobre el ícono de Menú. Sigamos adelante y trabajemos en el botón de cierre X. También necesitamos usar transiciones con este elemento. Entonces necesitamos aquí la transición todos los 0.5 s. y luego tenemos que usar la transición con el cambio de clase. Porque tenemos que especificar aquí el tiempo de retardo, 1.3 s. así que si hago clic en el icono, entonces todo va a funcionar perfectamente. Entonces podemos decir que hemos terminado de construir nuestros proyectos. Todo se ve bien. Y lo único que hay que hacer es hacer el proyecto sea receptivo a diferentes tamaños de pantalla. A lo largo de esta parte del tutorial, estaremos usando media queries CSS. Sigamos adelante e inspeccionemos la página y activemos el modo responsive. Entonces como ya configuramos, el proyecto está construido sobre un tamaño de pantalla más grande en el que estoy. Esto coincide con el ancho de 1920 píxeles y una altura de 1080 píxeles Sigamos adelante y encontremos el primer punto de ruptura. Estoy en el tamaño de pantalla en el que necesitamos hacer algunos cambios. Creo que tenemos que trabajar en 1,300 pixeles. Así que vamos a seguir adelante y crear una media query CSS con un ancho máximo de 1,300 píxeles en el tamaño de la pantalla, voy a cambiar todo el diseño de la cuadrícula Así que sigamos adelante y seleccionemos suficiente menú. A continuación, defina columnas de plantilla de cuadrícula. En este caso, voy a crear seis columnas. Así que use la función de repetición y especifique el número de columnas, seis y el tamaño, una unidad fraccionaria Entonces tenemos que cuidar la rosa. También voy a crear seis roles. Entonces usemos la función repeat con valor 6.1 unidad fraccionaria Entonces en este momento el diseño está en mal estado. Eso es obvio. Así que sigamos adelante y arreglemos eso. Necesitamos definir de nuevo los números de línea de cuadrícula para todos los artículos. Y en realidad voy a copiar este código. Entonces vamos a pegar aquí. Y luego comente rápidamente los números de línea. Fuera. Después 18. Proyecto 15 - Navegación CSS: En este video, vamos a estar construyendo un menú de navegación con HTML y CSS. Esto va a poder proyectar, pero podrás aprender sobre algunos efectos de transición geniales hechos por CSS. Entonces creo que el proyecto va a ser interesante. Antes de comenzar a construir el menú, sigamos adelante y describiéndolo. Como pueden ver, tenemos un texto. Síguenos en el centro de la página. Si pongo el cursor sobre, el menú aparecerá con algunas transiciones agradables Tenemos una línea horizontal en el lado derecho del texto, que aumenta de izquierda a derecha. También los elementos del menú aparecen en orden después de algún retraso. Y si pasamos el cursor sobre ellos, entonces obtendremos fondos coloreados con una transición suave En realidad, esta es una lista de redes sociales y cada elemento tiene su propio color de fondo original. Bien, así que eso es todo, lo que vamos a construir. Empecemos. He creado una nueva carpeta en el escritorio en la que he preparado dos archivos diferentes para HTML y CSS. Sigamos adelante y abramos la carpeta en el Código VS. En este momento, el archivo CSS está vacío. En cuanto al HTML, he preparado la estructura básica del documento HTML. Tengo dos enlaces diferentes en el elemento head, uno para las fuentes de Google y el segundo para el archivo CSS. Puede descargar los archivos fuente desde el enlace en la descripción. Sigamos adelante y ejecutemos el proyecto en el navegador. Para eso, voy a usar uno de los paquetes llamados Live Server. Este paquete nos permite ejecutar el proyecto en el navegador y realizar las actualizaciones sin actualizar la página cada vez. Este es un gran paquete, así que recomiendo descargarlo del Extension Manager con estilo y usarlo. Bien, finalmente, coloquemos el editor y el navegador, así y comencemos a construir el marcado HTML Voy a abrir un desarrollo que será el envoltorio del menú. A continuación, necesitamos otro desarrollo con el menú de clases. Este elemento incluirá todos los elementos del menú. Entonces tendremos un texto que nos siga, seguido de la línea. Y luego tendremos cinco elementos diferentes del menú. Entonces abramos un desarrollo con el nombre de la clase. Sigue un inserto, tú el contenido. Síguenos. A continuación, necesitamos otro div para la línea. Después de eso, voy a crear suficiente menú. Entonces, abramos el desarrollo con el menú de navegación de clases e insertemos aquí un par de elementos de navegación. Deberían estar representados por los elementos de enlace. Entonces se abre con el enlace del menú de clases. Entonces el primer elemento va a ser Facebook. Después duplica el enlace cuatro veces y cambia los nombres de las redes sociales. El segundo va a ser Instagram. Entonces tendremos Twitter, LinkedIn. Y el último va a ser YouTube. Bien, así que eso es todo sobre el marcado HTML. Ahora tenemos que empezar a escribir algunos CSS. En primer lugar, voy a crear algunos estilos de reset y comunes para cada elemento. Para seleccionar cada elemento, tenemos que usar un asterisco Vamos a deshacernos del margen predeterminado y el relleno. Voy a ponerlos a cero a ambos . Y luego cambiar la familia de fuentes. Hagámoslo arenas movedizas. Bien, entonces a lo largo del proyecto, voy a usar RAM como unidad de medida. este momento, una rampa equivale a 16 píxeles, porque el tamaño de fuente del HTML es igual a 16 píxeles. Quiero cambiar y convertir una ronda a diez píxeles porque creo que es mucho más conveniente calcular y usar para convertir una rampa a diez píxeles, necesitamos disminuir el tamaño de fuente del HTML y tenemos que hacerlo 62.5% Entonces, como puedes ver, los elementos han cambiado de tamaño y se han vuelto más pequeños. Bien, sigamos adelante y empecemos a trabajar en el envoltorio. En primer lugar, voy a definir la anchura y la altura. Vamos a establecer con el 200 por ciento. En cuanto a la altura, voy a hacer que sea el 100% de la ventana gráfica Por lo tanto, tenemos que usar 100 vh y también cambiar el color de fondo. Vamos a usar aquí color o 262626. Bien. Ahora voy a colocar el menú en el centro de la página. Y para eso, usemos un flexbox. Aquí necesitamos, display flex. Entonces para centrar el menú horizontalmente, vamos a usar justify content center Para el centrado vertical, necesitamos usar align items center ¿Bien? Entonces en este momento el menú se coloca en el centro, pero los elementos no son del todo visibles. Sigamos adelante y arreglemos eso. Voy a seleccionar artículos. Ambos nos siguen y los elementos del menú. Porque necesitamos los estilos similares para ellos. Aumentemos el tamaño de la fuente, hagámoslo a RAM. Después cambia el peso de la fuente. Hazlo 600. También, voy a hacer entonces blanco. Después transforma el texto en mayúsculas. Crea algo de espacio entre letras usando el espaciado entre letras, 0.1 rem. Y finalmente, voy a crear algo de espacio en el lado derecho de los artículos usando margin-right para ratas Así que ahora mismo los artículos se ven mucho mejor. Están visibles y voy a seguir adelante y encargarme del menú. Voy a colocar los artículos uno al lado del otro horizontalmente que quiero usar El flexbox. Nuevamente, necesitamos display flex. Y luego para el centrado vertical, necesitamos alinear los elementos al centro Y finalmente cambiar el tipo de la más basta, hazlo puntero. Bien, eso es todo por los artículos por ahora. Voy a seguir adelante y personalizar la línea. Entonces, sigamos adelante y seleccionemos los desarrollos que tiene la línea de nombre de clase. En primer lugar, definamos la anchura y la altura. Voy a hacer el ancho diez rampas. En cuanto a la altura, hagámosla 0.1 rem. Por último, crear espacio en el lado derecho usando margen derecho? Con valor cinco rondas. Ahora mismo, aquí no pasa nada. La línea no es visible, y voy a mostrarla usando los pseudo elementos after Así que vamos a seleccionar la línea con después. Después, vaciar el contenido. Y también definir la posición haciendo absoluta. Ahora para posicionar la línea de acuerdo a su elemento padre, tenemos que asignar a los desarrollos posición relativa. Después defina la anchura y la altura. Tenemos que hacerlos al cien por cien. Y por último, cambiemos el color de fondo, hazlo blanco. Entonces ahora la línea es visible y ahora es el momento de hacer que el menú funcione. Tenemos que seleccionar no Menú asignado para mostrar flex. A continuación, seleccione el enlace. Deshazte de los estilos predeterminados usando la decoración de texto. Ninguno. A lo mejor se posiciona relativo. Entonces voy a colocar los artículos abajo. Para eso necesitamos top con valor cinco rondas. Por lo que ahora los artículos se posicionan en sus lugares predeterminados. A continuación, tenemos que ocultarlos y mostrarlos al flotar. Entonces, para ocultar los ítems, usemos opacidad cero Después selecciona el menú con hover, seguido del enlace del menú Entonces aquí necesitábamos seleccionar el menú porque tenemos que hacer el hover en el menú Si seleccionamos los textos síguenos, entonces tendríamos algunos temas en el futuro. Porque eventualmente necesitamos pasar el cursor sobre los artículos también para cambiar los colores de fondo Entonces hagamos visibles los artículos y llevémoslos de vuelta a sus posiciones. Por lo tanto, necesitamos aquí el cero superior y la opacidad uno. Ahora los elementos están ocultos por defecto, y si pasamos el cursor sobre el síguenos, entonces aparecerán Pero aquí tenemos el problema. Si coloco el cursor sobre todo el menú, entonces aparecerán los elementos De todas formas. En realidad, no necesitamos eso. Necesitamos mostrar los artículos una vez que coloquemos el cursor sobre el síguenos. Para lograrlo, necesitamos deshabilitar los eventos de puntero para el menú. Es decir, cuando pasamos el cursor sobre el menú, los elementos no deberían aparecer Así que voy a usar una de estas propiedades CSS llamadas eventos puntero. Y voy a configurarlo en ninguno Ahora, si pongo el cursor sobre todo el menú, los elementos no se mostrarán En realidad, este todavía no es el resultado que queremos que obtenga. El siguiente paso es habilitar los eventos de puntero para el menú de nuevo. Pero tenemos que hacer eso en hover. Así que vamos a seleccionar menú con hover y hacer eventos puntero. Y además de eso, necesitamos habilitar los eventos puntero para el síguenos también. De lo contrario, no va a funcionar. Así que vamos a seleccionar elementos div con la clase follow y hacer sus eventos puntero. Entonces ahora cuando pase el cursor sobre el síguenos, los artículos se mostrarán Si paso el mouse sobre ellos, entonces seguirán mostrándose. Pero si paso el mouse sobre los elementos mientras están ocultos, no se mostrarán porque en este momento la propiedad pointer events está deshabilitada. Así que definitivamente necesitamos pasar el cursor sobre los seguidores. Ojalá tenga sentido para ti. Ahora, una vez que logramos mostrar los artículos, es el momento de encargarnos de los efectos de transición. También, tenemos que hacer que la línea funcione. Entonces voy a usar la transición para los artículos pero con un tiempo de retraso diferente. adelante y seleccionemos el elemento por separado usando la enésima pseudo-clase secundaria Entonces necesitamos el enlace del menú seguido de la enésima función hijo. Tenemos que especificar aquí el número de los ítems. Tenemos que partir de uno y pasar por cinco. Porque en general tenemos cinco artículos. Ahora necesitamos hacer la transición con los siguientes valores. Necesitamos primero top con una duración de 0.5 s y con el tiempo de retardo 0.1 s. A continuación necesitamos opacidad 0.5 s. Y nuevamente con el tiempo de retardo 0.1 s. Duplicemos este código cuatro veces y luego cambiemos los números de los ítems y también la cantidad del tiempo de retardo Para el segundo ítem, necesitamos 0.2 s. me refiero al tiempo de demora. Para el siguiente necesitamos 0.3 s, luego 0.4 s. Finalmente, para el último ítem, necesitamos 0.5 s. Así que si coloco el cursor sobre el texto , los ítems aparecerán muy bien con algún tiempo de retraso ¿Bien? Ahora voy a hacer que esta línea funcione. Por defecto. Debería estar oculto. Y cuando pasamos el cursor sobre el texto, tiene que mostrarse de izquierda a derecha Voy a hacer que su ancho sea cero por defecto. Después voy a seleccionar el menú con hover, seguido de la línea con después de pseudo elementos Y tenemos que hacer que el ancho sea cien por ciento. Por último, utilicemos de nuevo la transición. Necesitamos aquí con, con una duración de 0.5 s. bien, así como pueden ver, la línea está funcionando bien y en realidad casi terminamos con nuestro proyecto Lo último que voy a hacer es cambiar colores de fondo cuando pasemos el cursor sobre los artículos adelante y seleccionemos de nuevo los elementos por separado usando enésima pseudo-clase secundaria Pero ahora con más. Entonces necesitamos enlace de menú. Entonces necesitamos usar nth-child uno. Después le siguió el hover. El primer elemento es Facebook. Entonces cambiemos el color de fondo. Usa aquí el color original de Facebook. Es 35998. Después duplica este código cuatro veces y cambia los números y los colores. El segundo va a ser tres F, siete a nueve. El siguiente debería ser 55 ACE. Entonces tenemos 0077, B5. Por último, necesitamos cd a 01. Y después de eso, agreguemos las transiciones a los ítems. Voy a usar aquí, el multi más basto. Después inserte el color de fondo, el punto de duración o el segundo. Entonces, como puede ver, cuando pasamos el cursor sobre el estado del elemento, cambiamos el color de fondo suavemente Lo único que no me gusta aquí es la forma de los fondos. Voy a hacerlo ligeramente redondeado y además quiero crear algo de espacio dentro de ellos. Entonces necesitamos relleno. Valoramos 0.5 rem y border-radius con el valor 0.5 gram también Bien, ahora todo funciona perfección y en realidad ya terminamos con nuestro proyecto 19. Proyecto 16 - Menú desplegable: En este video, vamos a construir un menú desplegable con HTML, CSS y JavaScript. El desplegable tendrá algunos efectos de hover geniales. El proyecto va a ser pequeño, pero aprenderás sobre cómo crear algunos efectos agradables usando HTML, CSS y JavaScript. Bien, sigamos adelante y echemos un vistazo a los proyectos. Tenemos aquí, una imagen de fondo a pantalla completa con un encabezado en el centro También puedes ver tres elementos de navegación diferentes en la parte superior de la página. Si pasamos el cursor sobre ellos, se mostrará un menú desplegable con algunos buenos efectos de transición Bien, entonces eso es todo, lo que vamos a construir. He creado una nueva carpeta en el escritorio llamada Menú desplegable. Sigamos adelante y abramos esta carpeta en código VS. Como pueden ver, tengo aquí un par de archivos diferentes. Me refiero a archivos para HTML, CSS y JavaScript. Y también he preparado el archivo de texto en que guardo cierta confianza para los medios Dropdown Además de eso tengo una carpeta para la imagen de fondo. Bien, sigamos adelante y ejecutemos el proyecto en el navegador Para eso, voy a usar un paquete llamado Live Server, que nos permite abrir un proyecto en el navegador y hacer actualizaciones sin actualizar la página cada vez. Para que puedas descargar e instalar este paquete. Y también se pueden descargar los archivos fuente de inicio desde el enlace en la descripción. Bien, por último, coloquemos el editor en el navegador. Así. Y empieza a crear el marcado HTML. Ya tengo preparado el documento HTML básico aquí. Tengo dos eslabones diferentes y tenía elementos. Uno para la fuente de Google y el segundo para el archivo CSS. Además, tengo una etiqueta de script para el archivo JavaScript abajo. Sigamos adelante y abramos los desarrollos, que serán el contenedor de todo el contenido. A continuación, voy a abrir un elemento de sección con el envoltorio Class. Esta sección constará de dos partes distintas. El primero va a ser una pancarta con un encabezado. En cuanto a la segunda, debería ser la Navegación. Así que vamos a insertar aquí en el desarrollo con el nombre de clase binario. Después dentro del desarrollo, vamos a abrir el encabezado H1 con el texto del banner de la clase con el menú desplegable de contenidos. Bien, Siguiente voy a abrir unos elementos nulos, pero el Nombre de Clase Navbar Por lo que tendremos uno principal menos con tres elementos de lista diferentes dentro de la barra de navegación Y cada uno de ellos tendrá su propio Menú Desplegable. Vamos a abrir los elementos URL con un nombre de clase. Ahora por lo menos. A continuación necesitamos el elemento LI, que debería tener elemento de navegación de clase. Será seguido por el enlace con el link de navegación de clase y poner el texto desarrollo web. Entonces como dijimos, cada elemento de Navegación debe tener su propio Menú desplegable. Por lo tanto, vamos a insertar aquí una nueva lista donde se encuentra el desplegable de nombre de clase En el primer menú desplegable, tendremos seis elementos de lista diferentes Abramos el primero. El elemento desplegable de clase que inserta aquí el enlace con el nombre de la clase Enlace desplegable. Entonces insertaremos aquí algunos nombres tecnológicos con las descripciones. El primero va a ser HTML. Después abre el elemento P. Y ahora voy a agarrar la descripción del archivo de texto. Necesitamos aquí, la descripción del HTML. Vamos a pegarlo aquí. Como dije, en general, vamos a tener seis ítems. Así que vamos a duplicar mentira en cinco veces. El segundo va a ser CSS. Tomemos su descripción del archivo de texto. El siguiente debería ser reaccionar. Entonces tendremos nodo seguido por el expreso. El último va a ser mongodb Bien, veamos sobre el primer Duplicemos todo el primer artículo de la novela con su desplegable dos veces. El segundo ítem va a ser Front-end. En este caso, en general, contaremos con cuatro ítems diferentes. Voy a dejar aquí HTML y CSS que duplicar CSS. E inserta aquí JavaScript con su descripción. Voy a salir de aquí, reaccionar y además me deshago del resto de los átomos. Bien, eso es todo sobre el segundo ítem. El tercer ítem va a ser back-end. Y voy a dejar aquí solo los últimos tres artículos. ¿Bien? Entonces lo último que hay que hacer en el archivo HTML es crear desarrollo, el cual será utilizado para el fondo del Menú Desplegable Vamos a insertarlo justo encima la etiqueta nav de cierre y le asignamos el nombre de la clase, Dropdown PG Bien, así que eso es todo sobre el HTML de los elementos se crean y preparan A continuación tenemos que empezar a escribir algunos CSS. En primer lugar, voy a crear algunos estilos de reset para todos los elementos. Para seleccionarlos, necesitamos usar un asterisco Vamos a deshacernos del margen predeterminado y el relleno. Pongamos a ambos a cero. Además, voy a eliminar el subrayado predeterminado las vistas y las viñetas predeterminadas de los elementos de la lista para que necesitemos usar decoración de texto con el valor none y también list style Por último, cambie la familia de fuentes. A lo largo de este proyecto, vamos a usar font llamado EB, Garamond, font group Bien, así que vamos a ver ahora el contenido se ve diferente A lo largo de este proyecto, vamos a usar RAM como unidad de medida. Por defecto, 1 g equivale a 16 píxeles porque el tamaño de fuente del HTML es igual a 16 píxeles. Quiero convertir una RAM en diez píxeles. Y para eso, necesitamos disminuir el tamaño de fuente del HTML. Y tenemos que hacerlo 62.5 por ciento. Bien, sigamos adelante y empecemos a trabajar en el envoltorio. Voy a expandir el envoltorio a toda la página. Para eso, pongamos su ancho en cien por ciento. En cuanto a la altura, voy a hacer que sea el 100 por ciento de la ventana gráfica Por lo tanto, necesitamos aquí 100 pH. Después de eso, vamos a establecer la imagen como fondo de pantalla completa En primer lugar, usemos degradado lineal con colores blancos, pero con diferente opacidad El primer caso, voy a usar punto de opacidad para. cuanto al segundo caso, usemos opacidad punto a. Después de eso. Tenemos que especificar la URL de la imagen. Como ustedes saben, tenemos carpeta llamada imagenes en la que almaceno imagen llamada BG dot JPG. A continuación necesitamos Centro y no repetir. Y finalmente, necesitamos definir el tamaño de fondo con la cobertura de valor. Bien, así como puedes ver, establecemos la imagen de pantalla completa como fondo Y a continuación voy a encargarme del panel. Entonces sigamos adelante y seleccionémoslo. Voy a fijar su ancho 200 por ciento. También. Tenemos que posicionarlo. Y para eso, hagamos su posición absoluta. A continuación, voy a moverlo hacia abajo con la posición superior. Vamos a establecerlo en 35%. Bien, entonces se cambia la posición de la pancarta y ahora tenemos que trabajar en el propio rumbo. Voy a colocarlo en el centro de la página, y además voy a hacer que se vea mejor. Entonces, sigamos adelante y seleccionemos el texto del banner. Colóquelo en el centro usando text-align center. Después aumentar su tamaño de fuente, convertirlo en siete RAM. También cambia el color voy a hacerlo blanco. Después de eso, vamos a transformar el texto en mayúsculas usando la propiedad de transformación de texto Además, quiero crear algo de espacio entre las letras usando el espaciado entre letras con el valor punto a rampa. Por último, voy a usar algún efecto de sombra. Vamos a insertarte los valores 0.2, 0.5 RAM. Y como el color, usemos 888. Bien, así que en realidad con la primera parte, ya terminamos. Estoy en la pancarta. Ahora tenemos que encargarnos de la Navegación. Sigamos adelante y seleccionemos la lista principal, que tiene la clase. No menos importante. Voy a colocar los elementos de la lista horizontalmente en una fila. Y para eso, usemos flexbox. Necesitamos display flex. Y luego con el fin de centrarlos horizontalmente, vamos a utilizar justificar el centro de contenidos. Siguiente Voy a trabajar en el elemento LI. Así que vamos a seleccionarlo con el elemento de navegación de clase. En primer lugar, vamos a crear algo de espacio en la parte superior de los elementos usando margen superior con valor a carneros A continuación, voy a colocar el texto en el centro usando el texto align center. Y finalmente, definamos el ancho. Voy a establecerlo a 26 de ancho de ventana. Significa que establecemos el ancho como 26 por ciento de la ventana gráfica Por último, vamos a personalizar los enlaces, seleccionarlos, aumentar el tamaño de la fuente, hacerlo a los carneros Además, voy a cambiar el peso de la fuente. Vamos a establecerlo en 600. Después transforma el texto en mayúsculas. Cambia el color. En este caso, voy a usar color a cuatro o cinco F9 FBI y crear algún espacio entre letras Vamos a establecer el espaciado lateral en 0.1 RAM. Y por último, voy a usar shadow con los valores cero puntos para ram 0.5 RM. Y el color sea 888. Bien, así que con los elementos de la lista principal ya terminamos. Ahora hay que encargarte de los desplegables. Sigamos adelante y seleccionarlos está en clase Dropdown. Vamos a crear algo de espacio en la parte superior usando margen superior una RAM. Y también voy a cambiar el color de fondo para la lista por un tiempo. Hagámoslo blanco. ¿Correcto? Siguiente Voy a seguir adelante y personalizar el elemento desplegable. Así que vamos a seleccionarlo. este momento el texto se coloca en el centro, pero necesitamos colocarlo en el lado izquierdo. Entonces usemos textos alineados con el valor de la izquierda. También voy a crear algo de espacio usando relleno. Vamos a ponerla en dos rondas. En la parte superior de dos corridas en el lado derecho, cero en la parte inferior y 2 g en el lado izquierdo. Derecha. En realidad también necesitamos la misma cantidad de espacio al final de la lista. Es decir, después del último ítem. Para ello, usemos una pseudo-clase llamada last-child y seleccionemos el Necesitamos elemento desplegable, seguido de la última pseudo-clase secundaria Con el fin de crear algo de espacio en la parte inferior, vamos a usar padding-bottom el valor de dos rampas. Bien. Entonces eso es todo sobre los elementos LI. Sigamos adelante y personalicemos los enlaces. Seleccione el enlace desplegable. Voy a cambiar el tamaño de fuente, que sea 1.6 RAM. También haga que el font-weight sea más audaz. Transforma texto en mayúsculas. Y finalmente cambiar el color. Voy a usar de nuevo el color 245, F9. Estar bien con los enlaces, ya terminamos. Por último, voy a comenzar las descripciones. Están representados por los elementos P. Así que vamos a seleccionarlos. Voy a aumentar el tamaño de la fuente. Hagámoslo 1.6 redondo y cambiemos el color. Usemos aquí F5, F6, 061, Bien, así que ahora mismo, los desplegables se ven mucho mejor desplegables Y en realidad casi terminamos con el estilo. Como puedes ver, el encabezado, Menú desplegable se coloca en la parte superior de los menús Quiero colocarlo detrás de ellos. Y para eso voy a usar la propiedad z-index. En primer lugar, definamos la posición para el Dropdown porque de lo contrario el índice no funcionará Hagamos la posición relativa y luego usemos el valor del índice. Digamos 100. Bien, así que consideremos que el encabezado se coloca detrás de los menús Y ahora voy a crear un efecto hover. Vamos a ocultar los menús por defecto y mostrarlos al pasar el mouse Entonces para ocultarlos, usemos opacidad cero y visibilidad oculta. A continuación, seleccione el elemento de navegación con hover, seguido del menú desplegable Entonces, para poder mostrar la especificación del menú, necesitamos opacidad uno y visibilidad visible. Entonces ahora si pongo el cursor sobre el ítem que mostrarán los menús Pero en realidad tenemos aquí un pequeño problema. No necesitamos pasar el cursor sobre el elemento en sí porque si colocamos el cursor hacia abajo, los menús se mostrarán Entonces para arreglar eso, tenemos que establecer la altura a cero. Por defecto. Tenemos que hacerlo automático al flotar Entonces ahora el problema está arreglado. Por último, agreguemos aquí alguna transición con valores todos y 0.1 s. ¿Bien? Por lo que este es un simple desplegable estándar sin ningún efecto adicional Echemos un vistazo una vez más a la versión terminada de nuestros proyectos. Cuando pasamos el cursor sobre los elementos el fondo aparece desde el lugar diferente Para ser más precisos desde el lugar donde nos cercamos la última vez Además de eso, este fondo es un elemento diferente y no solo el color de fondo. Como recuerdas, creamos el desarrollo con un nombre de clase, Dropdown BG en HTML Así que sigamos adelante y seleccionemos estos elementos y definamos su anchura y altura. Voy a establecer el ancho a 40 corridas. En cuanto a la altura, voy a hacerla 60 g. En realidad, definimos esas propiedades y valores solo temporalmente. Eventualmente, los configuraremos desde el JavaScript. Ahora, para que el fondo sea visible, voy a definir el color de fondo. Quiero que el fondo sea ligeramente transparente. Entonces usemos aquí el valor RGBA 243, nuevamente, 243243, con la Y en realidad deshazte del fondo blanco del desplegable. Bien, por lo que se considera antecedentes es factible. Hagámoslo ligeramente redondeado usando border-radius con el valor de 0.3 ran Y también crea algunos efectos de sombra usando box shadow con el valor 0.5 RAM, una RAM, y el color 757575 A continuación, voy a crear una pequeña flecha. Me refiero a la forma literal, que se ve aquí. Para eso, usemos uno de estos pseudo elementos llamados antes Seleccione Desplegable VG con antes de pseudo elementos. En primer lugar, voy a vaciar el contenido. Entonces necesitamos hacer que su posición absoluta para posicionarla de la manera correcta. Y además de eso, necesitamos definir la posición para su elemento padre. Hagámoslo absoluto también. Después de eso, voy a dar la forma para estar ante pseudo elementos Voy a hacer eso usando un par de propiedades fronterizas. Voy a empezar con frontera izquierda. Vamos a asignarle los valores una RAM, sólido y el color transparente. Entonces voy a duplicarlo dos veces. El segundo inmueble va a ser pobre. El derecho con los mismos valores que para el tercero, va a ser borde inferior como el color. Vamos a usar rojo Bien, entonces la flecha es factible y ahora tenemos que cuidar de su posición Quiero colocarlo perfectamente en el centro del fondo. Y también se debe colocar en la parte superior de la misma. Entonces voy a hacer que sea la primera posición cero. También, necesitamos que nos quede al 50 por ciento. Además de eso, tenemos que usar Transform. Con la función de traducir. Tenemos que pasar aquí los valores -50 por ciento y luego -100% Bien, Lo último que tuvo que hacer es cambiar el color. Usemos aquí el mismo color claro en lugar del rojo. Vamos a copiarlo y pegarlo aquí. Como dije, estábamos fijando el ancho y la altura temporalmente, y ahora me voy a deshacer de ellos. Y también tenemos que ocultar el fondo por defecto. Por lo tanto, necesitamos aquí la opacidad cero y la visibilidad oculta. Bien, así que con el CSS, ya casi terminamos. Ahora es el momento de escribir algo de JavaScript. Vayamos al archivo script.js. En primer lugar, voy a crear una variable en la que almacenaremos un elemento DIV con la clase Dropdown PG Así que crea nueva variable, llámala Dropdown PG. A continuación, seleccione el elemento utilizando el método selector de consultas. Necesitamos especificar aquí el nombre de la clase, que va a ser Dropdown BG. Bien, entonces ahora necesitamos adjuntar a cada elemento de navegación un mouse sobre el manejador de eventos Para eso, necesitamos seleccionar todos los elementos y recorrerlos. Así que sigamos adelante y seleccionemos los elementos de navegación usando el selector de consultas, todo método. Necesitamos especificar aquí el elemento Nombre de clase ahora, en realidad selector de consulta todos los retornos de método y objeto similar a matriz llamado lista de nodos Y tenemos que transformarlo en una matriz. Para eso, voy a usar array dot from method. Después de eso, usemos uno de los métodos de ayuda de matriz llamado para cada uno. Nos permite ejecutar la función para cada elemento del array por separado. Necesitamos pasar aquí una función de flecha que tome el parámetro que va a ser el elemento actual durante el ciclo a través de la matriz Ahora tenemos que adjuntar al ítem mouse sobre controlador de eventos Entonces necesitamos tu propio mouse sobre. En realidad, el evento del mouse sobre es similar a hover en CSS. Entonces en hover tenemos que hacer visible el fondo. Por lo tanto, tenemos que insertarte Dropdown PG puntos estilo opacidad de punto igual a uno Entonces voy a duplicar esta línea de código. Necesitamos aquí. Visibilidad. Devaluamos factible este momento, el fondo no es visible porque no tiene la anchura y la altura. Como decíamos, vamos a definir ancho y alto a partir de JavaScript. Entonces sigamos adelante y hagamos eso. Defina un ancho para el desplegable BG. Quiero decir, necesitamos desplegable PG estilo punto ancho de punto. Así que vamos a hacer que el ancho del fondo igual al ancho del propio Menú desplegable Me refiero al desplegable que debería mostrarse al flotar. Para entonces voy a usar uno de los métodos JavaScript llamados get computed style. Este método nos da todas las propiedades CSS calculadas reales y los valores del elemento especificado. Entonces usemos este método. Dentro del paréntesis. Tenemos que especificar que el elemento va a ser un Dropdown. Y con el fin de llegar al elemento de dos dimensiones, vamos a hacer una pausa aquí, elemento punto últimos elementos hijo Porque si miramos el archivo HTML, encontraremos que Dropdown es el último elemento hijo de la cosa ahora, ¿verdad? Bien, Finalmente, tenemos que elegir con propiedad. A continuación, necesitamos exactamente lo mismo para la altura también. Así que vamos a duplicar esta línea de código y cambiar el ancho a alto. Entonces, si coloco el cursor sobre los artículos, entonces se mostrará el fondo Éste, cambió su anchura y altura dependiendo del artículo sobre el que estemos rondando Pero el problema aquí es que los antecedentes tienen una posición equivocada. Entonces tenemos que encargarnos de eso. Antes de eso, agreguemos una transición al fondo, necesitamos CSS asignado a él, todos los valores terminan 0.3 s. Bien, ahora tenemos un efecto de transición suave y es momento de cuidar la posición del fondo Voy a definirlo desde el JavaScript dinámicamente. Primero definamos la posición superior. Usa Dropdown, be G dot style dot top. Ahora voy a usar plantillas ES6, cadenas. Vamos a abrir backticks. Entonces necesitamos el signo de dólar con las llaves rizadas. Así que tenemos que establecer la posición superior igual a la parte superior de desplazamiento del desplegable. En realidad offset top property devuelve la posición superior relativa a la parte superior del elemento padre. Y nos da el valor en píxeles. Entonces necesitamos insertar aquí item.name, last elements, child Debido a que necesitamos tener acceso al Dropdown, entonces debería ser seguido por la parte superior offset Después de eso, tenemos que especificar Px porque necesitamos píxeles. En realidad necesitamos exactamente lo mismo para la posición izquierda también. Así que vamos a duplicar esta línea de código y cambiar de arriba a la izquierda. Ahora bien, si coloco el cursor sobre los elementos ese fondo se mostrará en las posiciones correctas Entonces todo funciona bien excepto la única cosa. Si coloco el mouse fuera del ítem, entonces el contenido del menú desplegable se ocultará El propio fondo mantendrá este plano. Así que tenemos que ocultarlo en el evento mouse out. Entonces necesitamos item.name en mouse out. Entonces vamos a agarrar esas dos líneas de aquí, pegarlas y cambiar los valores. Para la opacidad necesitamos cero. En cuanto a la visibilidad, se debe calentar. ¿Bien? Ahora el problema está arreglado. Todo funciona bien. Pero en realidad tenemos aquí un pequeño problema. Necesitamos un poco de tiempo de retraso hasta que se muestren los elementos desplegables Y también los voy a exhibir de derecha a izquierda. Para ello, usemos Transform con la función translate. Me refiero a traducir según el eje X como valor. Insertemos aquí el diez por ciento. Entonces en hover tenemos que hacer cero el valor de la función Translate X Por último, usemos aquí la transición con algún tiempo de retraso. Tenemos que asignarle todo que la duración 0.1 s y el tiempo de retardo 0.2 s. bien, así que ahora todo funciona perfectamente y de hecho raro hecho con este pequeño proyecto. Espero que haya sido interesante porque usamos aquí algunas técnicas diferentes y ojalá aprendas algunas cosas nuevas. 20. Proyecto 17 - Navegación: En este video, vamos a estar construyendo un menú creativo ahora superior con HTML, CSS y JavaScript. Bien, sigamos adelante y describamos el proyecto. Tenemos un botón en el centro de la página con tres puntos. Si hago clic en él, entonces esos puntos se transformarán en x con alguna transición suave. Y también navbar, mostraremos con un par de elementos de navegación Si hago clic en la X entonces el menú se cerrará de nuevo con algunos efectos de transición. Y también vamos a recuperar tres puntos en vez de x. Así que eso es todo. Este proyecto va a ser pequeño, pero espero que sea interesante. Entonces comencemos. He creado una nueva carpeta en el escritorio en la que tengo tres archivos diferentes para HTML, CSS y JavaScript. Sigamos adelante y abramos este problema en código VS. En realidad los archivos CSS y JavaScript están vacíos en este momento. En cuanto al archivo index.html, he preparado el documento HTML básico. Tengo dos enlaces en los elementos principales, uno para iconos Font Awesome y otro para CSS. También tengo aquí la etiqueta script para el archivo JavaScript. Puedes seguir adelante y descargar los archivos de inicio desde el enlace en la descripción. Bien, sigamos adelante y ejecutemos el archivo en el navegador. Para eso, voy a usar un paquete llamado Live Server. De hecho, nos permite ejecutar el proyecto en vivo en el navegador y realizar actualizaciones sin actualizar la página cada vez para que puedas instalarlo y usarlo. Por último, coloquemos el editor y el navegador uno al lado del otro y comencemos a crear el marcado HTML Voy a abrir un elemento div que será el contenedor. A continuación necesitamos elementos de navegación HTML5. Vamos a asignarle un nombre de clase, navbar. Envolverá toda la barra de navegación, me refiero al botón y a los elementos de navegación A continuación voy a crear un botón. Estará representado por un desarrollo. Vamos a asignarle la clase BTN. Entonces tendremos tres puntos. Vamos a crearlos usando desarrollos. Vamos a asignarle a diferentes clases. El primero va a ser cuatro puntos de estilo comunes. Y el segundo va a ser para los estilos individuales punto uno. Después duplique esta línea de código y cambie los nombres de las clases. Necesitamos. Punto dos, puntos tres. ¿Bien? En este momento el botón no es visible porque los desarrollos están vacíos y no tenemos ningún estilo. A continuación, voy a crear el propio menú. Vamos a abrir otro desarrollo con nombre de clase, Nav Menu. Así que en general tendremos cuatro artículos diferentes. Cada uno de ellos se creará con el enlace y los iconos Font Awesome. Así que vamos a abrir elemento de enlace con el nombre de la clase nav menu link. Después inserta tus elementos oculares con clases. Fas, tablero FA, entero. Luego duplique el elemento de enlace tres veces y cambie los nombres de las clases. Para el segundo necesitamos FAB, FA dash Blogger. El siguiente va a ser FAS dash, project dash diagram. Y para el último, usemos FAS, FA, dash actors, car. Bien, así que aquí tenemos los cuatro iconos y en realidad con HTML, ya terminamos Todos los elementos son creados y preparados. Sigamos adelante y abramos el archivo CSS y comencemos a escribir algunos CSS. En primer lugar, voy a crear algunos estilos de reset. Vamos a deshacernos del margen predeterminado y el relleno para cada elemento. Para poder seleccionar todos los elementos necesitamos usar asteriscos y luego establecer margin y padding ambos a cero. A lo largo de este proyecto voy a utilizar una RAM como unidad de medida. Por defecto, un rem equivale a 16 píxeles porque el tamaño de fuente del elemento HTML es igual a 16 píxeles. Voy a convertir una RAM en diez píxeles porque creo que será más cómoda y conveniente. Entonces para hacer eso, necesitamos disminuir el tamaño de fuente de HTML. Y tenemos que hacerlo 62.5 por ciento. Entonces, como puedes ver, los íconos se hicieron más pequeños. Bien, sigamos adelante y cuidemos el contenedor. Voy a expandirlo a toda la página. Así que vamos a seguir adelante y seleccionarlo Establece su ancho como 100%. En cuanto a la altura, voy a hacer que sea el 100% de la ventana gráfica Por lo tanto, necesitamos aquí 100 vh. Después cambia el color de fondo, hazlo gris claro usando E. A continuación, voy a enviar a los iconos para eso. Voy a usar flexbox. Necesitamos hacer contenedor flexible de desarrollo usando display flex. Entonces para centrar los elementos horizontalmente, tenemos que usar justify-content En cuanto al centrado vertical, necesitamos un centro de líneas de artículos, ¿verdad? Eso es todo sobre el contenedor. A continuación, voy a encargarme del menú en sí. Sigamos adelante y seleccionemos el menú de navegación. En primer lugar, definamos cuales hacen que sea 46 RAM. En cuanto a la altura, la voy a poner en 3.5 rem. Luego cambia el color de fondo. En este caso, voy a usar el color 2578. Entonces voy a crear algo de espacio dentro del menú usando padding. Vamos a colocarlo en dos REM, superior e inferior y tres rampas en lados izquierdo y derecho. Además, voy a hacer redondeado el menú. Para ello, tenemos que usar border-radius con valor five rem Por último, vamos a crear algún efecto de sombra usando box-shadow, que tendrá los siguientes valores Necesitamos 01 rem, tres rampas. En cuanto al color, voy a usar el valor RGBA 37172120, y Bien, el fondo está listo para los iconos. A continuación, voy a personalizar los iconos. Así que vamos a seleccionarlos. Necesitamos enlace de menú de navegación, seguido de la isla. Aumentemos el tamaño de la fuente, que sea 4M. En cuanto al color, voy a hacerlos blancos. Entonces ahora mismo puedo lucir mucho mejor y tenemos que encargarnos de sus posiciones. Necesitamos definir sus posiciones individualmente, pero antes de eso necesitamos agregarles algunos estilos comunes. Entonces, seleccionemos el elemento link y hagamos su posición absoluta. Voy a posicionar, puedo decir según la barra de navegación. Y para eso tenemos que hacer que la posición del nanoporo sea relativa Así que vamos a seguir adelante y seleccionarlo y asignarle colocado relativo. Después de eso, voy a centrar artículos particularmente para eso. Fijemos la posición superior al 50 por ciento. Y también necesitamos usar Transformar con la función Translate. Quiero decir traducir y con el valor -50 por ciento. Y ahora necesitamos definir las posiciones izquierda y derecha para todos los ítems individualmente. Para eso, voy a usar una de estas pseudo clases CSS Se llama f niño. Seleccionemos el primer elemento. Para eso. que seleccionar elementos de enlace de lo que debería ser seguido por la enésima pseudo-clase secundaria En realidad es la función. Y dentro del paréntesis tenemos que especificar el número. En este caso, necesitamos primero ítem, así que tenemos que pasar aquí uno. Hagamos la posición izquierda del primer ítem para RAM. Entonces voy a duplicar este código tres veces porque tenemos cuatro iconos. Para el segundo icono necesitamos posición izquierda con el valor 13 rentas. Entonces definamos la posición para el tercer ítem. En este caso, necesitamos usar la propiedad correcta con el valor 13 rampas cuanto al cuarto ítem, necesitamos posición correcta con valor para n. ¿Bien? Así que todos los artículos están posicionados. Como puedes ver, tenemos algo de espacio en el centro del menú, y en realidad pertenece al botón. Entonces sigamos adelante y empecemos a trabajar en ello. Voy a seleccionar desarrollo que tiene nombre de clase punto btn Entonces sigamos adelante y hagámoslo factible para eso. Voy a establecer ancho y alto, ambos a diez habitaciones. Y también cambiar el color de fondo. Hazlo a cinco ac 78. Entonces el elemento div es visible, pero ahora mismo ha estropeado todo el diseño Entonces tenemos que encargarnos de eso. Voy a colocarlo en el centro del menú. Entonces definamos esta posición como absoluta Entonces, para centrarla perfectamente, voy a usar las siguientes propiedades y valores. Tenemos que establecer posiciones de arriba y de izquierda, ambas al 50 por ciento. Y también necesitamos usar Transformar con la función translate. Y tenemos que pasar tu -50 por ciento dos veces. Entonces como puedes ver ahora, se coloca en el centro. A continuación, voy a hacerlo redondeado. Y para eso, como saben, tuvimos que usar border-radius con un valor del 50 por ciento También crea algún efecto de sombra. Usa box-shadow con los valores 01 RAM. Tres rems. Eso probablemente sea color. Usemos los valores RGBA, 13, 83, 57, y la opacidad 0.4 Por último, cambiemos el tipo del cursor, hagamos que apunte al botón que se prepara. Ahora voy a encargarme de los puntos. Sigamos adelante y seleccionarlos usando un nombre de clase común, punto. Y asignarle ancho y alto. Voy a ponerlos a ambos en una RAM. También cambia el color de fondo, hazlo blanco, y luego haz puntos a su alrededor usando border-radius con valor 50 por ciento Entonces como puedes ver ahora mismo, los puntos terminaron fuera del botón. Tenemos que encargarnos de sus posiciones. Voy a centrarlos usando flexbox. Necesitamos display flex. Entonces voy a usar justificar contenidos con el valor espaciado uniformemente. En realidad espaciados uniformemente nos permite crear un espacio uniforme entre los elementos flexibles. Y finalmente, para el centrado vertical, voy a usar align items center Bien. Entonces como puedes ver, todo está listo para que la barra de navegación funcione Otra vez. Una vez que hago clic en el botón, esos puntos, quiero decir primero y el tercero deben transformarse en x cuanto al segundo, debería esconderse. Y también el menú debe ocultarse y mostrarse al hacer clic. Entonces primero que nada, voy a transformar puntos en x, y luego haremos que funcione usando JavaScript. Sigamos adelante y seleccionemos el primero.tiene puntos de clase uno Hagamos su ancho 0.8 RAM. En cuanto a la altura, vamos a hacerla correr siete. Y también usar border-radius, ¿qué valor? Una renta. Después de eso, voy a duplicar este código y voy a cambiar el nombre de la clase. Necesitamos aquí punto tres. Eso es todo sobre el tercer punto. A continuación, tenemos que encargarnos del segundo. Como decíamos, necesitamos ocultar este segundo punto. Entonces sigamos adelante y seleccionémoslo. Y asignarle opacidad cero. Bien, ahora voy a hacer la x usando esas dos líneas Para eso, voy a usar las funciones rotar y traducir. En primer lugar, sigamos adelante y rotemos las líneas 45 grados. Usa Transformar. Con la función de rotación. En caso de los primeros puntos, necesitamos usar 45 grados, pero con signo menos. Entonces copiemos esta línea de código. Pégalo para el tercer punto y se deshace del signo menos. Entonces, como puede ver, las líneas se rotan, pero aquí no tenemos ninguna x así que también tenemos que usar la función Translate para solucionar ese problema. función Translate realmente mueve el elemento de acuerdo con el eje x o y Quiero decir según las direcciones horizontal y vertical. Usemos traducir con valores a RAM. Y otra vez para rentar. Después copiarlo y pegarlo para la tercera línea. En el caso de la tercera línea, tenemos que hacer el primer valor de negativo. ¿Bien? Entonces ahora mismo tenemos una x perfecta y ahora es el momento de que funcione. Entonces voy a crear una nueva clase y CSS. Después usando el método toggle, agregaremos y eliminaremos esta clase de los puntos usando JavaScript. Entonces usemos un multinúcleo y agreguemos a los tres puntos, cluster llamado change A continuación, abra el archivo JavaScript y seleccione el botón. Entonces voy a usar Método llamado selector de consultas. Tenemos que especificar aquí el nombre de la clase. Es puntos btn. Luego vamos a adjuntar a un oyente de eventos con un evento click, seguido de la función de flecha Entonces necesitamos agregar y eliminar el cambio de clase del contenedor, que es el envoltorio de todo el contenido. Así que vamos a seguir adelante y seleccionarlo usando de nuevo el método QuerySelector Insertemos aquí el contenedor ClassName. Ahora necesitamos usar la propiedad class list, que en realidad almacena todas las clases que tiene el contenedor. Por último, necesitamos usar el método toggle, que en general eds clase al elemento si no existe, y eliminarlo. Si existe. ¿Verdad? Ahora si hago clic en el icono, entonces los puntos se transformarán en x y viceversa. Esta transformación ocurre sin ninguna transición. Así que sigamos adelante y sumemos a la transición de puntos con los valores todos terminan 0.3 s, que es la duración. Ahora si hago clic, obtendremos un bonito efecto de transición suave. ¿Bien? Lo último que hay que hacer es ocultar y mostrar el propio menú. Para eso, antes que nada, haz x con cero. Entonces voy a esconder los artículos. Para eso. Usemos opacidad cero y visibilidad oculta. Ahora, de nuevo, necesitamos usar el cambio de clase porque queremos ocultar y mostrar los elementos cuando hacemos clic en el botón. Así que sigamos adelante y seleccionemos cambiar con Nav Menu y establecer con 246 Rams Y también usa transición con ancho de valor. Y con la duración 0.3 s. luego seleccione de nuevo cambiar con un enlace. Ahora necesitamos hacer factible el artículo. Para ello, tenemos que establecer la opacidad a uno y la visibilidad a visible Y también usa transición. Con opacidad 0.3 s. Bien, ya casi terminamos Lo único que tuvo que hacer es agregar algo de retraso. Cuando mostramos el icono. Para eso, necesitamos volver a usar la transición, pero con el cambio de clase. Entonces necesitamos aquí Todo que la duración 0.3 s, y luego la cantidad de retraso, 0.3 s también. Bien, ahora todo funciona a la perfección y en realidad ya terminamos con este proyecto de píxeles 21. Proyecto 18 - Navar redondeado: En este video, vamos a crear un menú de barra de navegación con HTML, CSS y un poco de JavaScript. Este tipo de navbar es un poco diferente porque creo que es más moderno y creativo que los otros números estándar Sigamos adelante y describamos el proyecto. Tenemos un fondo negro oscuro con el icono en el centro. Si hago clic en él, entonces los elementos de navegación se mostrarán con algún buen efecto de rotación. Bien, sigamos adelante y empecemos a construirlo. He creado la carpeta en el escritorio. Entonces vamos a abrirlo en VS Code. Voy a crear tres archivos diferentes. El primero va a ser index.html. Entonces necesitamos style.css y scripts dot js. Después vaya al archivo index.html e inserte aquí el documento HTML básico. Para eso, voy a usar una imagen. Tenemos que colocar un signo de exclamación y presionar Enter. Bien, sigamos adelante y cambiemos el título. Voy a insertar tu barra de navegación. Entonces también, voy a vincular archivos CSS y JavaScript. Para eso, necesitamos abrir la etiqueta de enlace y necesitamos indicar la ruta del archivo, en este caso el nombre de archivo style.css. En cuanto a la etiqueta JavaScript, vamos a abrir script, justo encima de la etiqueta de cuerpo de cierre. Y en atributo fuente especificar el nombre del archivo. Además de eso, vamos a usar un par de iconos Font, Awesome. Entonces necesitamos obtener el enlace CDN para eso. Sigamos adelante y busquemos Font Awesome. Cdn, JS. Agarra el primer enlace y pégalo en el elemento head. Muy bien, eso es todo sobre esta configuración. Por último, voy a ejecutar el archivo en el navegador. Para eso, voy a usar Live Server, que es un paquete de código VS. Nos permite hacer las actualizaciones sin refrescar la página cada vez. Así podrás seguir adelante e instalarlo y podrás ejecutar tus proyectos como en el navegador. Coloquemos el editor de texto y el navegador uno al lado del otro y comencemos a construir el marcado HTML Vamos a abrir desarrollos y asignarle FirstName Nakba wrapper Este elemento envolverá todo el número. Después abre otro elemento div con la barra de navegación de clase. En realidad incluirá todos los enlaces y los iconos. Entonces voy a abrir la etiqueta de enlace con el nombre de la clase navbar link Y aquí tenemos que insertar la primera Fuente, Icono Impresionante. Va a ser FAS, FA dash home. Entonces en general tendremos seis artículos. Duplicemos el elemento de enlace cinco veces y luego cambiemos los nombres de clase para los iconos. El segundo va a ser ciudad de lo que necesitamos escuela. Punto de referencia, hotel. Y finalmente, necesitamos aquí, almacenar, salir corriendo. Muy bien, eso es todo sobre los elementos de navegación. Por último, necesitamos crear el botón. Estará representado por el desarrollo y un icono Font Awesome. Entonces sigamos adelante y abramos div con el nombre de la clase Nakba dash btn Y luego inserta tu icono Font Awesome con las clases FAS, f, dash plus. Bien, eso es todo sobre el marcado HTML o se crean los elementos y estamos listos para comenzar a escribir algo En primer lugar, vamos a crear algunos estilos de reinicio. Voy a deshacerme margen y relleno para cada elemento. Para seleccionar cada elemento, tenemos que usar un asterisco Y luego sigamos adelante y fijemos el margen y el relleno de ambos a cero. A lo largo de este proyecto, vamos a utilizar RAM como unidades de medida. este momento, por defecto, una rampa equivale a 16 píxeles porque el tamaño de fuente de HTML es igual a 16. Voy a hacer un rem igual a diez píxeles porque creo que es más conveniente y más fácil de calcular. Entonces, para convertir una RAM en diez píxeles, necesitamos disminuir el tamaño de fuente de HTML. Así que vamos a seleccionarlo y hacer su tamaño de fuente 62.5%. Bien, así como puedes ver, el tamaño de los iconos disminuyó y ahora una RAM es igual a diez píxeles Sigamos adelante y seleccionemos elementos div envoltorio. Vamos a definir su ancho y alto voy a establecer el ancho como 100% S para la altura. Hagamos que sea el cien por ciento de la ventana gráfica. Necesitamos 100 vh. También cambia el color de fondo. Vamos a usar aquí. Tres b, tres B39. Bien, veamos ahora mismo los íconos no son del todo visibles Así que sigamos adelante y arreglemos eso. Voy a seleccionar íconos de barra de navegación. Aumentemos el tamaño de la fuente, hagamos 2.5 rem, y cambiemos el color, hágalo blanco. Además de eso, también voy a seleccionar el signo más. Aumentemos su tamaño de fuente, lleguemos a Ram, y también hagamos que el color sea blanco. Muy bien, entonces ahora los íconos son visibles. Lo siguiente que voy a hacer es colocarlos en el centro usando flexbox Necesitamos aquí display flex. Después para centrar los elementos horizontalmente, tenemos que usar justify-content En cuanto al centrado vertical, necesitamos alinear los elementos al centro Bien, sigamos adelante y empecemos a trabajar en la barra de navegación. Vamos a seleccionarlo y definir su ancho y alto. Voy a ponerlos a los dos en 20 repeticiones. También, cambia el color de fondo. Usemos tu color fácil para, para, para, para. Después de eso, voy a encargarme del botón del signo más. Así que sigamos adelante y seleccionemos navbar BTN. En realidad, si hacemos su posición absoluta, entonces el icono lo colocaremos en el centro del nanoporo porque saltará del flujo normal de la página Y el flexbox, lo centraremos perfectamente. A continuación, definamos su anchura y altura. Voy a ponerlos a los dos en seis asaltos. También, cambia el color de fondo. Voy a usar tu color uno para c095. Bien, además de eso, voy a mandar al signo más dentro de la caja Para eso, voy a utilizar de nuevo flexbox. Necesitamos banderas de exhibición, contenido justificado y centro de elementos de alineación Después hacer la caja redondeada usando border-radius con el valor 50 por ciento Y por último, cambia el cursor, hazlo señalar. Bien, así que eso es todo sobre el signo más. Ahora necesitamos centrar todos los artículos. Al principio. Cambiemos su posición y hagámosla absoluta. Como puede ver, los iconos se colocan uno encima del otro. Además, necesitamos cambiar la posición de su elemento padre, que es navbar Hagámoslo relativo. Una vez que hagamos la posición relativa, entonces podremos posicionar iconos de acuerdo a su elemento padre. ¿Verdad? Ahora voy a mandar los íconos. Y para eso, vamos a usar de nuevo Flexbox. En realidad, voy a agarrar esas tres líneas de aquí y pegarlas para la barra de navegación Ahora los íconos ya no son visibles porque terminaron detrás del botón. Entonces voy a comentarlo por un tiempo. Y luego una vez que coloquemos los artículos, entonces los mostraremos de nuevo. Ahora, por fin, es el momento de colocar cada uno de los elementos por separado. Para eso, voy a usar una pseudo-clase llamada nésimo hijo Entonces, sigamos adelante y comencemos con el primer ítem. Seleccione el enlace de la barra de navegación, seguido de la enésima pseudo-clase secundaria En realidad es una función y tenemos que especificar el número del ítem dentro del paréntesis Entonces, para el primer ítem, necesitamos oponernos a rampa. Entonces sigamos adelante y dupliquemos este código cinco veces. Para el segundo ítem, tenemos que definir las posiciones superior y derecha. Para la posición superior, necesitamos seis rampas En cuanto a la posición correcta, tenemos que ponerla en 2 g. A continuación tenemos el tercer ítem que necesitamos aquí, posición inferior. Vamos a ponerla en seis carreras. Posición derecha con valor dos rems. A continuación tenemos cuarto ítem Para el primer ítem, necesitamos usar solo la posición inferior con el valor dos carneros A continuación tenemos quinto ítem. Vamos a establecer sus posiciones inferior e izquierda. Voy a poner fondo a seis meses. En cuanto a la izquierda, necesitamos rentar. Y por último, para el último ítem, necesitamos posiciones de arriba y de izquierda. Para la posición superior necesitamos seis rampas y para la izquierda, necesitamos rentar Muy bien, entonces los iconos están posicionados. Vamos a mostrar el botón hacia atrás y también hacer que el número sea redondeado. Usemos aquí border-radius con un valor del 50 por ciento. A continuación, voy a crear unos pequeños efectos de hover. Voy a cambiar el color de los íconos cuando pasemos el cursor sobre ellos. Así que sigamos adelante y seleccionemos ahora por enlace con el hover. Y luego tenemos que seleccionar, voy a cambiar el color. Usa aquí el color 12095. Y también usa transición con propiedad de color con la duración 0.3 s. ¿Bien? En realidad, todo está preparado para hacer la siesta o trabajar. Por defecto. Voy a ocultar los íconos y también a rotarlos. Voy a ocultarlos usando la función de escala. Una vez que hagamos clic en el icono del signo más debería mostrarse, luego en el siguiente clic lo ocultarán. Entonces usaremos un método toggle. Voy a crear una nueva clase en CSS. Añadiremos y eliminaremos esta clase de la napa usando JavaScript. En primer lugar, ocultemos y rotemos los elementos por defecto. Cuando te transformas. Con la función de escala, tenemos que insertar aquí cero. Y entonces voy a rotar los iconos ciento 80 grados, pero con signo menos. Entonces crea una nueva clase y llámalo cambio. Después seleccione navbar. Necesitamos usar Transformar con funciones de nuevo escalar y rotar. Entonces cuando hacemos clic en el icono, entonces tenemos que dar a los artículos. Son de tamaño predeterminado. Entonces necesitamos usar K valor uno. Y también necesitamos rotar con cero. ¿Verdad? Ahora necesitamos escribir algo de JavaScript. Vamos al archivo script.js botón Seleccionar. Entonces voy a usar el método QuerySelector. Tenemos que especificar aquí el nombre de la clase, que es navbar btn Luego se adjunta a él el oyente de eventos con el evento click. Y también tenemos que pasar aquí la función de flecha. Entonces ahora necesitamos agregar un nuevo cambio de nombre de clase a la envoltura de napa. Así que antes que nada, necesitamos seleccionar este elemento, utilizar de nuevo el método QuerySelector y especificar el nombre de la clase en el envoltorio Napa paréntesis Ahora tenemos que usar la propiedad class list, que en realidad almacena todas las clases que tiene el elemento. Y entonces necesitamos el método toggle con el cambio de clase. Ahora, si hago clic en el icono, entonces se mostrarán los elementos. Pero en este caso, sin ningún efecto. Entonces necesitamos hacer la transición con transformar. Y con la duración 0.5 s. ahora, si vuelvo a hacer clic, los iconos se mostrarán con una transición agradable y fresca. Bien, por último, voy a agregar algunos efectos al signo más en sí Quiero rotarlo OnClick. Así que sigamos adelante y seleccionemos una ganancia para cambiar de clase, seguido de la barra de navegación p t n i. Así que voy a rotar el signo más 45 grados. Usemos la función de rotación. También. Para un efecto suave. Usemos la transición. Aquí necesitamos transformar. Y como duración eso es lo indican aquí 0.5 s. bien, así que ahora todo funciona a la perfección y en realidad ya terminamos con este proyecto 22. Proyecto 19 - Menú Sidebar: En este video, vamos a construir un menú lateral para el panel de administración. Este tipo de barras laterales son muy populares hoy en día. Entonces creo que este pequeño proyecto te será interesante y útil antes de que empecemos a construir nuestro proyecto. Y voy a repasar y describirlo. Entonces como veis, tenemos aquí una imagen de fondo a pantalla completa, y en la esquina superior izquierda tenemos un icono de menú Si hago clic en él, entonces esas líneas se cambiarán a x con alguna transición agradable. Y también la barra lateral, la mostraremos de izquierda a derecha. Como puedes ver, la barra lateral consta de un par de partes diferentes. En la parte superior, tenemos un avatar para admin con un nombre completo y el administrador de subtítulos Le sigue la barra de búsqueda. Entonces tenemos una lista con Font, Iconos impresionantes. Cada uno de los elementos de la lista tiene su propio submenú. Se representan como los menús desplegables. Y por último, en la parte inferior de la barra lateral tenemos un par de íconos. Si hago clic en el botón X, entonces la barra lateral se cerrará. En realidad, el proyecto responderá a todos los diferentes tamaños de pantalla. Vamos a construirlo para un tamaño de pantalla más grande. Tamaño de pantalla con 1920 píxeles de ancho y 1080 píxeles de alto. Entonces, si nos estás siguiendo con un tamaño de pantalla relativamente más pequeño, entonces te recomiendo abrir las herramientas del desarrollador. Cambie al modo de respuesta y establezca el ancho y altura en 1920 píxeles y 1080 píxeles. Pero de todos modos, al final del día, haremos las respuestas del proyecto. ¿Bien? Eso es lo que vamos a construir en este video. Así que comencemos. He creado una carpeta en el escritorio llamada sidebar, en la que tengo otra carpeta para las imágenes. Sigamos adelante y abramos la carpeta en VS Code. Lo primero que voy a hacer es crear nuestros archivos de trabajo. En general, tendremos tres archivos diferentes. Index.html, style.css, y también scripts dot js. A continuación, abra el archivo index.html e inserte el documento HTML básico. Para eso, voy a usar amidas. Coloquemos aquí un signo de exclamación y pulsaremos Enter o tal vez tabulador Cambiemos el título. Voy a insertar tu barra lateral. También. Voy a vincular archivos CSS y JavaScript. Para eso. Vamos a abrir la etiqueta de enlace. Indique aquí el nombre del archivo, style.css. Entonces abajo abrimos la etiqueta script. Y en el atributo source especificar el nombre del archivo script.js. Además de eso, necesitamos otros dos enlaces, uno para los iconos Font Awesome y otro para las fuentes de Google. Así que sigamos adelante y busquemos Font Awesome, CDN GIS. Después agarra el primer enlace de aquí y pégalo en el elemento head. Después de eso, voy a buscar las Google Fonts. En realidad, usaremos dos teléfonos diferentes. El primero va a ser Roboto Slab. Voy a personalizarlo porque vamos a usar un peso de fuente un poco más audaz Así que vamos a comprobar la fuente semi negrita. En cuanto al segundo, usaremos losa superior a 27. Agarremos el enlace y lo peguemos también en el elemento head. Eso es todo sobre la configuración. Por último, voy a ejecutar el archivo en el navegador. Para eso. Voy a usar Live Server. Este es uno de los paquetes de código VS. En realidad usamos este paquete casi siempre, pero de todos modos, te voy a recordar que nos permite ejecutar la vida del proyecto en el navegador y hacer actualizaciones sin actualizar la página cada vez para que puedas descargarla e instalarla. Por último, eso son entornos organizados o de trabajo. Voy a colocar editor de texto y un navegador así para que nuestro proceso de trabajo sea más conveniente. Bien, sigamos adelante y comencemos a crear el marcado HTML. Vamos a abrir un elemento div, que va a ser un contenedor. A continuación, necesitamos abrir elementos de navegación, que envolverán toda la barra lateral. Así que vamos a asignarle className sidebar. Como decíamos, la barra lateral constará de un par de partes distintas La primera va a ser un icono de menú. Entonces abramos los desarrollos con el nombre de la clase, menú de hamburguesas El icono del menú constará de tres líneas. Entonces voy a pasar aquí desarrollos con clases. Vino, que será el nombre común de clase para las tres líneas. Y también tenemos que alinear uno. Para alicatados individuales. Duplicemos la línea dos veces y cambiemos los nombres de las clases. Necesitamos la línea dos y la línea tres. Bien, eso es todo sobre el ícono de Menú. A continuación, necesitamos crear una tarjeta que incluya el avatar del abdomen, el nombre completo y el administrador de subtítulos Entonces abramos un desarrollo con la tarjeta de nombre de clase. A continuación necesitamos otro div, que envolverá la imagen del admin. Vamos a asignarle una tarjeta de nombre de clase, IMG. Después inserte el elemento de imagen. Voy a escribir en el atributo alt admin image. Entonces vamos a especificar la ruta de la imagen en el atributo source va a ser images, folder slash admin dot JPG Por último, utilice aquí el atributo de clase con una imagen de administrador de valor. Entonces tenemos aquí la imagen. Sigamos adelante e insertemos el nombre completo y el subtítulo. Y vamos a abrir otro desarrollo con el cuerpo de la tarjeta de nombre de clase. Después inserte H2 elementos de encabezado en él con el título de la tarjeta de clase. Como contenido, escribe el nombre completo. John Smith. A continuación necesitamos un párrafo que debe tener una tarjeta de nombre de clase, subtítulo Y como los contenidos, vamos a insertar usuario administrativo. Bien, eso es lo de la tarjeta. A continuación vienen los campos de entrada de búsqueda. Así que vamos a abrir un formulario elementos con el formulario de búsqueda de nombre de clase. Entonces en general tendremos dos elementos. El primero va a ser entrada con un tipo de textos. Además, necesitamos entradas de búsqueda de clase y el atributo placeholder con búsqueda de valor Además del elemento input, necesitamos también un botón que represente el icono de búsqueda. Entonces vamos a abrir el elemento botón. Debería tener el tipo de botón porque cuando el elemento botón se coloca dentro del formulario, entonces por defecto cargará la página en África. Entonces para evitarlo, tenemos que usar el tipo de botón. También necesitamos aquí el botón de búsqueda de nombre de clase. El icono de búsqueda estará representado por el icono Font Awesome. Así que vamos a insertar tu elemento ojo con clases. Fas, FA dash, búsqueda. Bien, así que eso es todo sobre los elementos formados. A continuación, tenemos que encargarnos de la lista. Entonces, sigamos adelante y abramos los elementos de UL con el nombre de clase novelista Entonces esta va a ser la lista principal en la acera. Contará con cinco elementos de lista diferentes, cada uno de ellos con su propio menú desplegable. Entonces vamos a abrir los elementos LI con el nombre de la clase. Ahora artículo. Entonces debería ser seguido por el enlace con el enlace de navegación de clase. Entonces voy a insertar aquí tres elementos diferentes. El primero va a ser el icono Font Awesome. Los nombres de las clases, FAS , FA, guión, taco, metro, guión, Alt. A continuación necesitamos un elemento span con los textos de enlace de clase nav. Entonces como los contenidos, Let's Institute dashboard. Por último, necesitamos nuevamente el icono Font Awesome para mostrar la flecha. Entonces debería tener clases, FAS, f, dash, dash, ¿verdad? Bien, eso es todo sobre el primer elemento de la lista. Como dijimos, en general, necesitamos cinco de ellos. Entonces voy a duplicarlo cuatro veces y luego cambiar los nombres de las clases y también el contenido de los ítems. El segundo va a ser Fas, un carrito de compras, comercio electrónico. El siguiente será F, F h, m con el ítem Componentes. A continuación tenemos los gráficos de líneas del gráfico FASFA. Y por último, necesitamos mapa FASFA, marcador con las marcas del ítem Bien, así que eso es todo sobre la lista principal. Ahora necesitamos crear un menú desplegable para cada elemento de la lista. Entonces voy a insertar una nueva lista justo antes de la etiqueta LI de cierre. Debe tener clase sub novelista. El primer menú desplegable constará de tres elementos de lista diferentes. Vamos a abrir el primer elemento LI con el elemento sub nav de nombre de clase. A continuación necesitamos un enlace de elementos con el enlace de subred de clase. Así que cada elemento de la lista enlazará para el icono Font Awesome, y el contenido representado por un elemento span. Vamos a insertar tu elemento ocular con las clases FAR F círculo discontinuas No debería ser seguido por esta sartén. Con el tablero de texto uno. Sigamos adelante y duplicemos los elementos LI dos veces y solo cambiemos los contenidos. Necesitamos tablero a tablero tres. Entonces aquí tenemos el primer menú desplegable. También lo necesitamos para el resto de los artículos. Así que vamos a seguir adelante y agarrarlo y pegarlo antes de las etiquetas LI de cierre. Luego continúe y cambie el contenido de todos los elementos del menú. Necesitamos aquí, productos, pedidos y tarjeta de crédito. A continuación necesitamos iconos y tablas generales. A continuación, necesitamos un gráfico circular, un gráfico de líneas y un gráfico de barras. Para el último menú desplegable, solo necesitamos dos elementos. Entonces voy a dejar aquí solo dos ítems con una consonante siguiente Necesitamos Google Maps y abrir el mapa de calles. Entonces como pueden ver, hemos terminado con la lista principal. A continuación, tenemos que encargarnos de la lista inferior. Entonces volvamos a abrir. Listar elementos con la clase. Lista inferior. La lista incluirá cuatro iconos diferentes. Por lo tanto necesitamos cuatro ítems de lista. Vamos a abrir el elemento LI, que debe tener nombre de clase, elemento de la lista inferior. Entonces necesitamos vincular elementos con un nombre de clase, enlace de lista inferior. Cada uno de los elementos de la lista tendrá un icono y también algunas notificaciones. Por lo tanto, te voy a insertar los elementos span con algún número, digamos cinco. Y también necesitamos un icono de Font, Awesome. Debería ser FAS. Belle. Duplicemos el elemento de la lista tres veces. Después cambia el número de las notificaciones y también los nombres de las clases. Para el segundo, voy a insertar aquí siete. En cuanto al nombre de la clase, necesitamos sobre FASFA. Para el siguiente, necesitamos uno. El nombre de la clase, FASFA Coke. Para el último ítem, voy a deshacerme de la notificación en absoluto. Simplemente salga de aquí Fuente Icono impresionante Con clases, FAS, FA, guión, guión apagado. Bien, así que eso es todo sobre la barra lateral. Casi terminamos con el marcado HTML. Lo único que tenemos que hacer es encargarnos de la sección principal que en realidad tendremos solo el encabezado con la imagen de fondo a pantalla completa Así que justo después de los elementos de navegación, vamos a abrir esta sección y asignado a la sección principal del nombre del clúster. Entonces dentro de él necesitamos unos elementos de encabezado con el encabezado de clase. Entonces dentro del encabezado tendremos solo un encabezado único con el nombre de la clase, encabezado con el tablero de texto. Bien, así que finalmente, hemos terminado con el marcado HTML de los elementos necesarios se crean y ahora es el momento de escribir algo Vamos a abrir el archivo style.css. En primer lugar, crear algunos estilos de reinicio y en realidad comunes. Seleccionemos todos los elementos usando un asterisco. Entonces voy a restablecer el margen y el relleno. Pongamos a ambos a cero. Además, tenemos muchos elementos de lista y enlaces. Entonces voy a deshacerme de sus estilos predeterminados con liststyle none y decoración de texto, ninguno Después de eso, definamos la familia de fuentes para cada elemento Voy a usar fuente llamada slideshow 27 pixels serif. Por último, deshagamos del esquema predeterminado. Bien, eso es todo sobre los estilos comunes. A lo largo del proyecto, vamos a utilizar una ROM como unidad de medida. Por defecto, una rampa equivale a 16 píxeles porque el tamaño de fuente de HTML es igual a 16 píxeles. En realidad, quiero convertir una RAM en diez píxeles porque creo que es más conveniente y más fácil de calcular. Para lograrlo, tenemos que disminuir el tamaño de fuente del HTML y hacerlo 62.5% Ahora el tamaño de fuente de HTML es igual a diez píxeles. Por lo tanto, una rampa es igual a diez píxeles también. ¿Bien? A lo largo de este proyecto vamos a utilizar diferentes colores para varias veces. Y en realidad para que este proceso sea más dinámico, voy a usar variables CSS. Almacenaremos los valores de color en variables CSS. Y usaremos esos nombres de variables. Para crear las variables de alcance global, necesitamos seleccionar una ruta. Entonces necesitamos definir nombres de variables con los valores propios. El primero se va a hacer color durazno , color de fondo Entonces debería ser tui, tui, tui. Entonces voy a duplicar esta línea de código un par de veces y cambiar los nombres y los valores. El segundo va a ser el color primario. Con el valor de color cinco a cuatro, las cuatro t. La siguiente va a ser color secundario con valores 777171 Entonces tendremos texto color 99393. Además, necesitamos pasar el color del texto con el valor p db88. Y el último va a ser color de icono activo con un valor a un 77. ¿Bien? Ahora voy a mostrarte cómo usar esos colores. Supongamos que queremos cambiar el color de fondo para el cuerpo. Tenemos que seleccionar cuerpo. Entonces necesitamos asignarle un color de fondo. Ahora tenemos que usar la función var, que significa variable. Dentro del paréntesis, tenemos que especificar el nombre de la variable Digamos color de fondo principal. Me refiero al color principal de color peachy. Entonces, como se puede ver, se cambia el fondo del elemento body. Entonces así es como funcionan las variables CSS. Bien, vamos a deshacernos de este código porque ya no lo necesitamos. Sigamos adelante y agreguemos algunos estilos a la barra lateral. Voy a seleccionarlo. Definamos su anchura y altura. En realidad como unidad de medida, voy a usar el ancho de la ventana gráfica Vamos a establecer el ancho de la barra lateral como 15% de la ventana gráfica Necesitamos 15 V W S para la altura. Voy a hacer que sea el 100% de la ventana gráfica. Entonces necesitamos 100 vh. Luego cambia el color de fondo. Ves tu color BG principal. Y también voy a hacer fija la posición de la barra lateral. Bien, entonces ahora la barra lateral es factible. Y en realidad creo que la imagen es bastante grande. Y voy a disminuir su tamaño desde el HTML ahora mismo. Al final del día, nos encargaremos de la imagen de CSS. Vamos al archivo index.html y asignemos al atributo Image llamado width con valor 50. Significa que establecemos el ancho de la imagen en 50 píxeles. Lo siguiente que quiero hacer es encargarme de la sección principal. Es decir, la segunda parte de la página, que se coloca abajo después de la navegación. Sigamos adelante y seleccionémoslo. La sección principal debe ocupar el resto de la página. Estoy en el lado derecho. Por lo tanto, voy a definirlo chirridos como 85 de ancho de ventana gráfica Además, necesitamos definir su posición porque la barra lateral y la sección principal deben colocarse lado a lado Entonces hagamos que se posicione relativa. Luego establezca la propiedad izquierda en 15 ancho de ventana gráfica. Ahora, como puede ver, el tablero de texto es visible. Significa que esas dos partes se colocan una al lado de la otra. Definamos el fondo de pantalla completa para el encabezado. Vamos a seleccionarlo. En primer lugar, definamos su anchura y altura. Voy a heredar de los elementos padre. Así que vamos a asignar a la propiedad width, heredar. En cuanto a la altura, hagámosla al 100% de la ventana gráfica. Por último, definamos los antecedentes. Voy a usar aquí. Degradado lineal con colores blancos, pero con diferente opacidad El primer color debe tener la opacidad 0.3. En cuanto a la segunda, va a ser 0.5. A continuación tenemos que especificar la URL. Tenemos carpeta llamada imagenes. Necesitamos seleccionar bg dot PNG. A continuación necesitamos centro. No repetir. Y por último, tenemos que definir el tamaño del fondo como cubierta. Bien, así que ahora como puedes ver, la imagen se establece como fondo de pantalla completa Y lo único que tenía que hacer era cuidar los elementos del rubro. Entonces sigamos adelante y seleccionémoslo. Voy a colocarlo en el centro. Para eso. Definamos esta posición como absoluta. Después establecer la posición superior al cinco por ciento. Entonces necesitamos que nos quede el 50 por ciento. Y por último, necesitamos usar Transform con la función translate para poder enviar al elemento perfectamente. Necesitamos aquí traducir x porque tenemos que mover los elementos según el eje X. Y ese es el valor que tenemos que pasar aquí, -50%. Bien, entonces el encabezado está centrado, y ahora voy a hacer que se vea mejor Sigamos adelante y aumentemos su tamaño de fuente. Que sea 12 Rahm. Cambia el color, hazlo blanco. Entonces, finalmente, crear algo de espacio entre letras. Utilice el espaciado entre letras con el valor uno rem. Bien, veamos sobre la sección principal. Ahora tenemos que volver a la barra lateral. Sigamos adelante y creamos algo de espacio dentro de la caja usando relleno. Voy a poner el relleno a 1.5 rem en la parte superior e inferior y un rem en los lados izquierdo y derecho. Y también para mantener el mismo tamaño de la caja, necesitamos usar box-sizing Con valor border-box Bien, entonces la barra lateral consta de varias partes. Y voy a comenzar con una tarjeta en que tengamos una imagen, título y subtítulo Seleccionemos una tarjeta y hagamos que sea un contenedor flexible. Para eso necesitamos display flex. Ahora voy a cuidar la imagen. Como sabéis, definimos su ancho a partir del HTML. Y en realidad me voy a deshacer de él. Después seleccione la imagen nombre de clase admin image. Definir su ancho como phi params. Y también voy a hacerlo ligeramente redondeado usando border-radius con el valor 0.5 rem Bien, eso es lo de la imagen. adelante y seleccionemos el cuerpo de la tarjeta, que en realidad incluye el nombre completo del subtítulo Entonces voy a crear algo de espacio en el lado izquierdo usando margin. Vamos a asignar dos a uno rem. A continuación, voy a utilizar de nuevo Flexbox para alinear esos dos elementos Hagamos el contenedor flexible del cuerpo de la tarjeta usando banderas de exhibición. Entonces tenemos que cambiar la dirección. Necesitamos columna. Con el fin hacer algo de espacio entre los artículos. Necesitamos justificar el contenido. Espacio alrededor. El nombre completo y el subtítulo están alineados. Sigamos adelante y hagamos que se vean mejor. Voy a comenzar con el título de la tarjeta. Así que vamos a seleccionarlo. Cambia el tamaño de la fuente, hazlo a Ram. Además, necesitamos algo de espacio en el lado derecho. Vamos a crearlo usando margen derecho. Tres rems. Después cambia el color. Ves tu color de impuestos. Y finalmente usar el espaciado entre letras con el valor 0.1 fila con el título ya terminamos. Y por último, vamos a encargarnos del subtítulo. Seleccionado. Cambia el tamaño de fuente, hazlo 1.8 RAM, y también cambia el color. Voy a usar tu color secundario. Bien, eso es todo sobre la tarjeta de los elementos. Luce bien. A continuación viene la búsqueda un cumplido. Así que sigamos adelante y nos ocupemos de ello. Seleccionemos un elemento de formulario. Tiene formulario de búsqueda de nombre de clase. Al principio, voy a hacer algo de espacio usando margen. Vamos a establecer el margen en, para correr en la parte superior. Cero en el lado derecho. Un rem en la parte inferior, y cero en el lado izquierdo. Entonces, para alinear la entrada y el botón de la manera correcta, hagamos un contenedor flexible de elemento de formulario usando display flex. Y también centrar los artículos verticalmente usando alinear elementos en el centro. Bien, sigamos adelante y diseñemos ambos elementos. Voy a empezar con la entrada. Entonces se selecciona. Definir su anchura y altura. Voy a establecer ancho 200 por ciento. En cuanto a la altura, hagamos cuatro carneros y cambiemos el color de fondo Usa tu color primario. Bien, sigamos agregando algunos estilos más a la entrada Voy a deshacerme del borde predeterminado. Usando el borde ninguno. También hacer un uso redondeado border-radius con un valor 0.5 rem A continuación, hagamos algo de espacio dentro de las entradas usando padding. Voy a ponerla a cero en la parte superior e inferior y una rem en los lados derecho e izquierdo. Después aumenta el tamaño de la fuente, hazlo 1.6 RAM. Cambia el color, usa tu color de texto. Y por último, crear algo de espacio entre letras usando espaciado entre letras, rampa 0.1. Bien, así como pueden ver, la entrada se ve bien y ya terminamos con ella. A continuación, tenemos que encargarnos del icono de búsqueda. Voy a colocarlo dentro de las entradas, decir, en la esquina derecha de la misma. Así que sigamos adelante y seleccionemos el botón Buscar. En primer lugar, vamos a deshacernos de sus estilos predeterminados. Voy a hacer transparente el color de fondo. Y también se deshace del borde predeterminado con borde ninguno Ahora para mover el icono hacia el lado izquierdo, voy a usar Transformar con la función Traducir X. Vamos a insertar aquí menos el 150 por ciento. Bien, Entonces el icono se coloca de la manera correcta y lo único que tuvo que hacer es darle estilo al elemento I. Entonces sigamos adelante y seleccionémoslo. Voy a aumentar su tamaño con el tamaño de fuente. Hagámoslo dos rems, y también cambiemos el color Ves tu color secundario. ¿Verdad? Eso es todo sobre el elemento formulario. Ahora tenemos que seguir adelante y empezar a trabajar en la lista. Sigamos adelante y seleccionemos la lista principal con el nombre de la clase. No menos importante, voy a crear este espacio en la parte superior usando margen. Hagámoslo tres rems. Después selecciona los elementos LI y crea algo de espacio en el margen superior e inferior, asignado a dos rampas Y luego cero en los lados izquierdo y derecho. ¿Verdad? Eso es todo sobre los elementos LI. Ahora, está empezando a personalizar el enlace. Sigamos adelante y seleccionémoslo. Voy a establecer su ancho como cien por ciento. Entonces. Hazlo flex contenedor usando display flex. También centrar los artículos verticalmente usando alinear elementos en el centro. Y por último, cambia el color. Usemos tu columna de texto. Paso a paso. Estamos avanzando ahora mismo. Los artículos son bastante más pequeños porque su tamaño es de apenas diez píxeles. Así que sigamos adelante y seleccionemos los elementos span, que tiene clustering nav link text Voy a aumentar el tamaño de la fuente. Hagámoslo 1.8 RAM. Y también crear algo de espacio en el lado izquierdo usando padding left one rem. Como puede ver, las flechas y los artículos se colocan demasiado cerca uno del otro. Tenemos que mover las flechas hacia el lado derecho. En realidad, podemos hacerlo usando un par de formas diferentes, pero la mejor manera para nosotros es usar las propiedades flexbox llamadas flex grow, que deberían ser iguales a una Usando esta propiedad, el elemento ocupará todo el espacio disponible dentro del contenedor flexible. Bien, sigamos adelante y cuidemos los iconos Font Awesome, que se colocan frente a los elementos Así que vamos a seleccionarlos. Necesitamos seleccionar el enlace de navegación seguido de iones. Y tenemos que usar pseudo clases CSS llamadas primero-hijo. Vamos a establecer ancho y alto, ambos a dos rems Y también cambiar el color de fondo. Voy a usar tu columna primaria. Como puede ver, necesitamos centrar los iconos dentro de la caja. Para eso, usemos flexbox. Necesitamos display flex. Y luego tenemos que centrar los elementos horizontal y verticalmente también. Así que usemos justify-content center y alineemos el centro Bien, ahora como puedes ver, los íconos están perfectamente centrados Lo único que quiero hacer es crear algo de espacio dentro de la caja y también hacerlas redondeadas. Entonces usemos relleno. Devaluamos punto a RAM y border-radius, ¿qué valor? 0.3 corrió. Después de eso, vamos a crear un pequeño efecto hover Cuando pasamos el cursor sobre el artículo, quería cambiar el color del icono Así que vamos a seleccionarlo. Necesitamos ahora link hover. Entonces otra vez, elemento I con la primera pseudo-clase hijo. Cambiemos el color, hagámoslo Activo, puedo llamarlos. También use la transición para hacer que el efecto sea más inteligente. Tenemos que pasar tu color con la duración 0.2 segundos. Bien, entonces si colocamos el cursor sobre los artículos entonces ellos cambiarán su color Por último, quiero encargarme de las flechas. Voy a moverlos hacia la izquierda y también aumentar su tamaño. Así que vamos a seleccionarlos. Necesitamos de nuevo enlace de navegación. Entonces yo elemento, seguido de la pseudo-clase llamada last-child Vamos a crear algo de espacio en el lado derecho usando margin right, 2.5 rem. Y además aumentar el tamaño de la fuente, hacerla 1.6 redonda. Bien, así que con los elementos de la lista principal ya terminamos y ahora tenemos que encargarnos de los menús desplegables Al principio, vamos a estilizarlos. Seleccione los elementos de la lista usando className sub novelista. Definamos el ancho, hazlo 90 por ciento. Y también colocó los ítems al lado derecho usando margin-left, el valor Bien, a continuación voy a crear algo de espacio entre los artículos. Así que vamos a seleccionar los elementos LI usando el elemento de subintervalo de agrupamiento Voy a definir el margen como 0.5 RAM en la parte superior e inferior y cero en los lados izquierdo y derecho. A continuación, tenemos que encargarnos del elemento link. Entonces sigamos adelante y seleccionémoslo. Cambiar el tamaño de fuente. Voy a hacer 1.5 rem. Y también cambiar el color. Usa aquí la columna de texto. Así que los artículos se ven mucho mejor. Y a continuación, voy a crear un efecto hover. Al flotar. Quiero cambiar el color de los artículos. Así que vamos a seleccionar enlace, flotar. Después cambia el color. Vamos a usar aquí el color del texto hover. Y también necesitamos una transición con el color y con la duración 0.2 s. bien, así que con los elementos desplegables, ya casi terminamos Solo necesitamos agregar un par de estrellas a los círculos. Así que sigamos adelante y seleccionemos elementos. Necesitas enlace sub novela. I. Luego cambie el tamaño de la fuente. Conviértalo en una RAM. También crea algo de espacio en el lado derecho usando margen con valor 0.5 rem. A continuación, necesitamos crear nuestro efecto. Seleccionemos enlace con hover, seguido del elemento I, y cambiemos el color Usa aquí, activo puedo llamar. Por último, necesitamos de nuevo la transición del color y la duración 0.2 segundos. Bien, Algunos Eso es todo sobre la lista. Están estilizadas, se ven bien. Y ahora tenemos que seguir adelante y personalizar la última parte de la barra lateral, que es una lista inferior. Entonces, sigamos adelante y seleccionemos elementos UL. Tiene clustering bottom list. En primer lugar, definamos su ancho. Voy a llegar al 100 por ciento. Y también cambiar el color de fondo. Usa tu color, color primario. La lista debemos colocar en la parte inferior de la barra lateral? Por lo tanto, necesitamos definir su posición. Voy a hacerlo absoluto. Y luego para colocarlo en la parte inferior, tenemos que establecer una propiedad de botón a cero. ¿Bien? Entonces la lista se posiciona de la manera correcta. A continuación, voy a crear algo de espacio dentro de la caja. Y también necesitamos colocar los artículos en una fila horizontalmente. Entonces necesitamos relleno en la parte superior e inferior, 0.5 rem y cero en los lados izquierdo y derecho A continuación, tenemos que usar flexbox Necesitamos display flex. Y también con el fin crear algún espacio entre los elementos flex, usemos justifique el contenido con los valores que circulen. ¿Bien? Entonces los ítems están muy bien alineados, pero como puedes ver, tenemos algo de espacio en el lado izquierdo de la lista. Entonces voy a mover toda la lista al lado izquierdo. Para eso, usemos Transform con la función translate x. Y como valor, pasemos menos una rep. ¿Bien? Entonces eso es todo sobre la alineación de la lista. Ahora voy a personalizar los iconos y también este patrón los elementos que se crean para las notificaciones. Entonces, sigamos adelante y comencemos con los íconos. Seleccione el enlace de la lista inferior, seguido del elemento I. Aumentemos el tamaño de la fuente, hagamos 1.6 RAM, y también cambiemos el color. Ves tu color secundario. Ahora los iconos se ven mucho mejor. Voy a añadir aquí poco efecto hover. Quiero cambiar el color de los iconos al flotar. Así que vamos a seleccionar enlace con hover. Y luego yo elementos. Cambia el color. Ves tu color de icono activo. Y también usa transición con el color. Y con duración 0.3 s. entonces si pasamos el cursor sobre los iconos, entonces ellos cambiarán el color Así que en realidad con iconos's, ya terminamos. Ahora voy a tomar aquí de este span elementos. Así que sigamos adelante y seleccionarlos usando el span de enlace de la lista inferior. En primer lugar, voy a cambiar la familia de fuentes. Vamos a usar aquí fuente llamada Roboto Slab Serif. Además, voy a aumentar el peso de la fuente porque quiero hacer span un poco más audaz Usa aquí 600. Después cambia el tamaño de fuente, conviértalo en una memoria RAM. Y por último, cambia el color, hazlo blanco. ¿Bien? Entonces esos números deben colocarse en la esquina superior derecha de los iconos. Entonces, sigamos adelante y cuidemos su posición. Voy a hacerlo absoluto. Entonces para definir la posición según el elemento padre, que en nuestro caso es un enlace. Tenemos que hacer que la posición de los padres sea relativa. Así que vamos a seguir adelante y seleccionar el propio enlace y asignarle posición relativa. Después de eso, definamos las propiedades superiores y correctas. Hacer Posición Top -100 por ciento. En cuanto a la posición correcta, hagámosla -50 por ciento Bien, entonces los elementos span están posicionados y ahora quiero crear diferentes antecedentes para cada una de las nitrificaciones Para ello, vamos a definir las propiedades de ancho y alto. Voy a hacer de ambos un punto para RAM. Y también agrega aquí algún color de fondo temporal, digamos rojo. Entonces ahora tenemos que hacer esos fondos redondeados. Y también quiero colocar esos números en el centro para hacerlos redondeados. Usemos radio de borde con valor 50 por ciento. En cuanto al centrado, los números, usa flexbox Necesitamos display flex y luego justify-content center y align items center Bien, en realidad, casi terminamos con las notificaciones Lo único que tenemos que hacer es cambiar el color de fondo y hacerlo diferente para cada altura. Entonces, deshagámonos del fondo rojo. Entonces para seleccionar el ítem por separado, voy a usar y selector Child, que es una pseudo-clase Entonces, seleccionemos el elemento de la lista inferior seguido del enésimo hijo En realidad esta es una función. Entonces dentro del paréntesis como argumento, voy a insertar el número del ítem, uno Entonces debería ser seguido por span. Como el color de fondo. Voy a usar CFA 012. Duplicemos este código dos veces. Cambiar el número que necesitamos aquí como el color. Usemos 54154 En cuanto al tercer ítem, necesitamos cubrir E, dos a siete a siete Bien, así que eso es todo con un diseño. Por último, ya terminamos. A continuación, tenemos que encargarnos de la funcionalidad. Y antes que nada, voy a trabajar en el menú de hamburguesas Sigamos adelante y agreguemos algunas estrellas al ícono de Menú. Por ahora no es visible. Así que vamos a seleccionarlo. Lo primero que tuvo que hacer es hacerlo visible. Así que definamos ancho y alto. Hacer ambos 3.5 rem. Y también cambiar el color, el color de fondo lo hacen blanco. Como puedes ver por defecto, se coloca en la esquina superior izquierda. Y ahora mismo necesitamos colocarlo en la esquina superior derecha. Así que definamos su posición y horneémosla absoluta. Y luego establecer a la derecha y a las primeras posiciones, ambas a cero. Bien, entonces el icono se coloca de la manera correcta. A continuación voy a mostrar las líneas. Así que vamos a seleccionarlos con un nombre de clase común, línea, ancho y alto definidos. Voy a establecer el ancho a 2.5 g. cuanto a la altura, hagamos que sea 0.3 rem, y también cambiemos el color de fondo. En este caso, voy a usar color secundario. Bien, como son las líneas Z, todas son visibles, pero en este momento se colocan demasiado cerca una de la otra Necesitamos algo de espacio entre ellos. Y también tenemos que colocarlos en el centro de la caja. Para hacer eso, no voy a usar flexbox. Quiero hacer lo mismo usando posiciones. Así que vamos a asignar dos posiciones de línea absoluta. Después voy a seleccionar cada una de las líneas por separado. Empecemos con la línea uno. Hacer su posición superior. Un punto a la RAM. Entonces voy a duplicarlo dos veces. Necesitamos aquí línea a S4, la posición superior. Hagámoslo 1.8 RAM. En cuanto a la tercera línea, necesitamos posicionar 2.4. Como pueden ver, ahora tenemos espacio entre líneas. Y para centrarlos, voy a usar relleno. En realidad, el tamaño del espacio es igual a una RAM porque el ancho del icono es 3.5 rem y el ancho de la línea es 2.5 rondas. Para hacer líneas perfectamente centradas, tenemos que establecer padding a 0.5 rem. En este momento se incrementa el tamaño de la caja. Y para arreglarlo, tenemos que usar el dimensionamiento de cajas Caja Fronteriza. Por último, deshazte del color de fondo blanco. Bien, entonces el ícono Menú está diseñado y ahora tenemos que hacerlo funcionar Quiero decir, cuando hacemos clic en él, necesitamos transformarlo en x Para una mejor demostración, quiero definir algunos estilos para las tres líneas por separado. Quiero decir, vamos a sobrescribir los estilos actuales, pero eventualmente usaremos una nueva clase que se agregará usando JavaScript on click event Bien, escribamos el código y quedará mucho más claro Seleccionemos de nuevo la línea uno. Línea uno y línea. Cambiaremos sus lugares que ellos rotarán. En cuanto a la línea a, se esconderá. Para la línea uno, necesitamos definir la posición superior como 2.4 RAM. Entonces necesitamos transformar con la función rotate con el valor -40 grados. Después seleccione línea a una asignada a su opacidad a cero. Como línea de pobreza tres, voy a copiar este código y cambiar el nombre de la clase. Necesitamos la línea tres. Además, necesitamos la posición superior como un punto para carnero. En cuanto a la rotación, necesitamos aquí 40 grados sin el signo menos. Entonces, como puede ver, las líneas se rotan. Bueno, no tenemos aquí la x. Tenemos que ajustar las posiciones usando la función translate. Pero antes de eso, tenemos que cambiar el origen de la transformación. Por defecto, las líneas se rotan según el Centro. Y en nuestro caso, necesitamos hacer que quede el origen de la transformación. Así que vamos a asignar a la línea transformar origen. Hazlo a la izquierda Luego abajo, usa la función translate. Para la primera línea, necesitamos traducir por qué devaluamos 0.3 rem En cuanto a la tercera línea, necesitamos lo mismo, pero con rentas negativas de 0.3 Bien, así que ahora tenemos la x perfecta y en real 23. Proyecto 20 - Menú de Hamburguesas: En este video, vamos a construir el menú de hamburguesas con algunos efectos agradables Este proyecto se construirá en base a HTML, CSS y poco de JavaScript. Entonces como puedes ver, tenemos aquí una landing page con imagen de fondo a pantalla completa Y en la esquina superior derecha se coloca el icono del menú de hamburguesa Si hago clic en él, entonces el icono se transformará en x. Y ahora parte se mostrará desde el lado derecho. Aquí tenemos un par de elementos de navegación y si coloco el cursor sobre ellos, entonces obtendremos buenos efectos de hover En este video, aprenderás sobre cómo crear todas estas cosas. Sigamos adelante y comencemos a construir nuestro proyecto. En código VS. Tengo un par de archivos para HTML, para CSS, y para JavaScript. Y también tenemos aquí carpeta llamada imágenes en que tenemos una imagen para fondo de página de préstamo. Puedes descargar archivos de inicio desde el enlace de la descripción. Bien, sigamos adelante y abramos el archivo index.html. He preparado la estructura básica del documento HTML. Dentro de los elementos de cabeza, tengo dos eslabones. Una para las fuentes de Google, voy a usar una fuente llamada doses, y otra para el archivo CSS. Además de eso, he insertado aquí etiqueta script con el fin de vincular el archivo JavaScript. Bien, comencemos a construir el marcado HTML, desarrollos abiertos, que va a ser un contenedor Por lo que se le asigna contenedor de clase. Entonces dentro del contenedor voy a abrir elementos que envolverán todo el contenido de navbar Vamos a asignarle clase navbar. Después dentro de él al principio voy a crear un ícono de menú de hamburguesas Así desarrollo abierto y se le asignó un nombre de clase, menú de hamburguesas Entonces dentro de esos elementos div, voy a insertar tres elementos div para tres líneas de un icono. Vamos a asignar a su nombre de clase para la línea de estilo común. Y también necesitamos aquí otro nombre de clúster para el estilo individual. Línea derecha uno. Después duplique esta línea dos veces y cambie los nombres de las clases. Necesitamos la línea dos, la línea tres. Muy bien, eso es todo sobre Menu icon por ahora, no es factible porque solo tenemos elementos div vacíos sin ningún estilo A continuación, voy a crear navegación. Estará representado por elementos UL. Vamos a asignarle clase no menos importante. Después inserte en ella elementos LI. Debe tener ítem de clase. Y por último, necesitamos tus elementos de enlace. Vamos a asignarle el nombre de la clase nav link, y también insertemos su primer elemento. En general, voy a tener siete elementos de navegación. Así que vamos a duplicarlo seis veces y luego cambiar rápidamente el contenido aquí mismo sobre nosotros. Esa noticia. El siguiente va a ser Galería que eventos. Precios. Y para el último, inserta tu contenido. Bien, así que eso es todo sobre HTML. Es hora de empezar a peinar. Vamos al archivo style.css. Al principio voy a crear algunos estilos de reset. Vamos a deshacernos del margen predeterminado y el relleno de cada elemento. Selecciónelos usando asterisco. Y luego pasa tu margen cero y relleno cero también. Entonces voy a cambiar la familia de fuentes por elemento body. Así que vamos a seleccionarlo. Y luego inserte aquí dosis font-family, san-serif. A continuación, vamos a encargarnos del contenedor. Establezca su ancho y alto como un ancho. Escribamos aquí 100 por ciento. En cuanto a la altura. Voy a fijarlo como el 100 por ciento de la ventana gráfica. Así que bien, 100 pH que como fondo. Voy a poner una imagen. Así fondo derecho de lo que necesitamos aquí, gradiente lineal. Voy a usar tres colores diferentes. El primero va a ser RGBA 000 y la opacidad 0.4. A continuación, escribamos RGBA 14848, nuevamente 48 y opacidad Y luego insertar RGBA 167-60-7607 y opacidad 0.4. Después dentro de URL indica parte de las imágenes de la imagen y selecciona la imagen llamada bg dot JPG como la posición de fondo. Necesitamos Centro y también pasar aquí, no repita. Y por último, voy a usar la propiedad de tamaño de fondo con la cobertura de valor. Bien, así que la página de destino está lista. Tenemos aquí imagen de fondo a pantalla completa. Y ahora me voy a llevar aquí del menú de hamburguesas Como ya saben, constará de tres líneas y deberá colocarse en la esquina superior derecha de la página Al principio, seleccionemos el desarrollo rápido, que tiene un className, menú de hamburguesas Definamos su anchura y altura. Voy a configurar con 35 pixeles. En cuanto a la altura, vamos a asignarle 30 pixeles. Por ahora, el icono sigue sin ser visible. Y para arreglarlo, vamos a asignarle algún fondo temporal, digamos rojo. Bien, entonces ahora el icono que se muestra por defecto se coloca en la esquina superior izquierda. Pero como dije, voy a colocarlo en la esquina superior derecha de la página. Para eso, definamos esta posición como fija. Y luego necesitamos la posición superior, establecida como 50 píxeles y la derecha como 50 píxeles. Así que ahora puedo desplazarme en la esquina superior derecha. Y por último, voy a cambiar el cursor. Hagámoslo señalar. Bien, por ahora con el elemento div padre, ya terminamos. Es hora de trabajar en las luces. Sigamos adelante y seleccionarlos usando la línea de nombre de clase común. Después fijó su ancho como 100 por ciento. Significa que la línea ocupará todo el ancho de su elemento padre, que es de 35 píxeles. A continuación, voy a definir la altura. Hagámoslo tres píxeles y cambiemos también el color de fondo. Ves tu color chocolate. Bien, Ahora las líneas son visibles, pero están pegadas entre sí y tenemos que separarlas. Para lograrlo, voy a usar Flexbox. Hagamos el menú Hamburger flex container. Para eso necesitamos display flex. Luego cambia la dirección del flex. Tenemos que colocar líneas como columna. Entonces necesitamos flexión dirección columna. Y por último, para hacer algún espacio entre ellos, utilizar justificar los contenidos. Los valores caminan alrededor. Bien, entonces ahora las líneas están separadas y en realidad podemos deshacernos de ese fondo rojo. Bien, entonces el ícono de Menú ya está creado y antes de que lo hagamos funcionar, voy a personalizar la barra de navegación Deberíamos colocarlo del lado derecho. Así que sigamos adelante y seleccionemos elemento nav con nombre de clase navbar Al principio, definamos su anchura y altura. Voy a establecer su ancho como 300 pixeles. En cuanto a la altura, hagámosla al 100 por ciento. Luego cambia el color de fondo. Usemos tu color 26262. Bien, entonces para poder colocar ahora barra en el lado derecho, definamos esta posición como fija. Y luego hacer que las propiedades superior y derecha sean ambas cero. Bien, entonces navbar se posiciona de la manera correcta. Ahora voy a encargarme de la posición de los elementos de navegación. Quiero colocarlos perfectamente en el centro dentro de navbar Y para eso, usemos Flexbox aquí mismo. Flexión de pantalla. Que para centrar los elementos horizontalmente, use justify-content Centro. S para centrado vertical Use alinear elementos, centrar. Bien, entonces los artículos se colocan en el centro. Y lo último que quiero hacer respecto a navbar es personalizar su forma Y lo voy a hacer usando radio fronterizo. En realidad, esta propiedad puede tomar cuatro valores diferentes apropiados a cuatro esquinas. Estoy en esquina superior izquierda, arriba derecha, abajo derecha e inferior izquierda Así que somos capaces de definir diferentes radios de borde, cuatro columnas diferentes. En este caso, voy a personalizar las esquinas superior izquierda e inferior izquierda. En cuanto al resto de las esquinas, no las vamos a tocar. Entonces como valor de border-radius de la esquina superior izquierda, voy a insertar aquí el 20 por ciento Entonces, como decíamos, las esquinas superior derecha e inferior derecha no se cambiarán. Entonces necesitamos insertar aquí ceros dos veces. Y para la esquina inferior izquierda voy a usar 60%. Bien, entonces la forma de la barra de navegación está personalizada y ahora voy a darle estilo a los elementos de navegación Sigamos adelante y seleccionemos elementos UL. Tiene nombre de clase. No menos importante. Voy a colocar texto en el lado derecho. Entonces usemos texto alinear a la derecha. A continuación, seleccionemos elementos LI. Tiene nombre de clase, no artículo. Primero, deshagamos de las viñetas predeterminadas usando ninguno estilo lista Después crea algo de espacio usando margen. 25 semanas. Bien, ahora tenemos que seleccionar los elementos de enlace, que tiene el nombre de la clase nav link Vamos a deshacernos de los estilos predeterminados. Usando texto-decoración. Ninguno. Después aumentó el tamaño de la fuente, lo hacen 22 pixeles. Cambiar color. Ves tu color E. Además, voy a hacer que la fuente sea más clara usando font-weight 300. Luego crea algo de espacio entre letras usando el espaciado entre letras. Un píxel. Y finalmente hacer texto en mayúscula usando transformación de texto Mayúscula. Bien, eso es todo sobre los elementos de navegación Como recuerdas del proyecto terminado, vamos a crear algunos efectos de hover el cursor, debemos mostrar líneas en la parte superior e inferior de los artículos Se mostrará con una transición suave. Y desde los sentidos opuestos. En realidad vamos a crear esas líneas usando después y antes pseudo elementos Ambos tendrán algunos estilos comunes. Así que sigamos adelante y seleccionemos ambos pseudo elementos, derecho, enlace de navegación antes Después duplica esta línea y cambia antes y después. Entonces primero tenemos que definir los contenidos como vacíos. A continuación, voy a definir la anchura y la altura. Vamos a establecer con nosotros el 100 por ciento. Después haz la altura a píxeles y también cambia el color de fondo. Ves tu color chocolate. Por ahora, las líneas no son visibles porque son elementos en línea y por lo tanto no se aplican a la anchura y la altura. Entonces, si definimos su posición como absoluta, y luego si asignamos a los elementos padre, que no es la posición de enlace relativa, entonces se mostrarán ambas líneas. De un vistazo. Vemos aquí solo una línea, pero de hecho, ambas líneas se colocan una al lado Bien, a continuación voy a definir una posición izquierda para ambos elementos como cero. Ahora ambas líneas están tomando los mismos spots y para poder separarlos, tenemos que definir una posición inferior para después de pseudo elementos y tenemos que hacerla cero Así que vamos a copiar este selector y asignarle abajo cero. Entonces ahora ambas líneas están separadas. Como saben, por defecto, posición superior se establece como cero. Entonces, si no lo definimos manualmente, eso no va a ser un problema. Pero de todos modos, voy a definirlo. Así que vamos a duplicar este código. Luego cambia después, en antes. Y en lugar de abajo, derecha, arriba. Bien, lo último que queremos aquí es crear algo de relleno porque la línea de fondo está demasiado cerca del ítem Así que vamos a asignar a nav link padding en la parte superior e inferior derecha tres píxeles y luego cero en los lados izquierdo y derecho. Bien, eso es todo sobre las líneas ahora tienen que crear un efecto hover Por defecto, voy a ocultar esas líneas. Y cuando pasemos el cursor sobre los elementos, esas líneas se mostrarán suavemente desde las direcciones opuestas Para ocultar líneas, voy a usar Transform. Después escala x. tenemos que ponerla como cero. Entonces ahora al flotar, tenemos que aumentar la escala y hacerla una Así que sigamos adelante y seleccionemos el enlace de navegación con hover. Después agrega aquí antes. Duplica este selector y cambia antes y después. Y luego inserta tu Transformar, Escala x con el argumento uno. Y por último, para que el efecto sea más inteligente, vamos a usar la transformación de transición 0.5 s. bien, así que si pasamos el cursor sobre los elementos se mostrarán las líneas Pero como puedes ver, por defecto, empiezan a aparecer desde el centro. Sucede porque la propiedad de origen de transformación se establece como sensor por defecto. Entonces tenemos que cambiarlo para ambas líneas. Vamos a asignar a después de pseudo elementos, transformar origen. Hacerlo bien. Después copia este código y pegarlo para antes de pseudo elementos Y en vez de derecha, vamos a insertar aquí a la izquierda. Si pasamos el cursor sobre los artículos, entonces todo funcionará perfectamente Tenemos aquí un bonito efecto hover. Bien, entonces con la navegación, ya terminamos. Siguiente. Eso que tenemos que hacer es hacer que el menú Hamburguesa funcione. En primer lugar, voy a transformar icono de menú en x. Para ello tenemos que cambiar posiciones para primera y tercera líneas. En cuanto al segundo, debe calentarse. Así que sigamos adelante y seleccionemos la línea uno. Tenemos que rotar la línea uno por 45 grados según el eje z Para ser más precisos, para la línea uno, tenemos que usar Rotar Z -45 grados. Duplicemos este código. Cambiar el nombre de la clase a la derecha, línea tres. Y también deshazte del signo menos de aquí. Como decíamos, tenemos que ocultar la línea dos. Así que vamos a seleccionarlo y usar tu opacidad cero. Entonces como puedes ver, las líneas se rotan, pero aquí no tenemos ninguna x. Tenemos que encargarnos de las posiciones de las líneas. Para eso. Voy a añadir aquí traducir. Entonces como el valor de la dirección x, ¿verdad? Menos ocho píxeles, S4, eje y. Tenemos que pasar tus seis semanas. Vamos a copiarlo Y pegar cuatro líneas tres En lugar de seis píxeles necesitamos aquí solo menos seis picos. Ahora se considera. El problema está arreglado y tenemos aquí x. En realidad este no es el estado predeterminado del icono. Tenemos que hacerlo x cuando hacemos clic en él. Para lograrlo, voy a usar un poco de JavaScript. Pero antes de escribir algo de JavaScript, voy a añadir dos líneas. Nuevo nombre de clase, llamémoslo cambio. Después agregaremos esta clase dos navbar usando JavaScript. Y todo esto sucederá cuando hagamos clic en el icono. Vamos al archivo script.js y antes que nada, creamos una nueva variable, llamémosla icono de menú. Y luego seleccionar los desarrollos que tiene un menú de hamburguesas con nombre de clase Para eso necesitamos escribir documentos, puntos, consulta, selector, y pasar tu nombre de clase menú hamburguesa Luego, adjunta el oyente de eventos al ícono de Menú, derecha, ícono de menú, punto, agrega oyente de eventos Como primer argumento tenemos que pasar tu nombre de eventos, que es camarilla Que necesitamos pasar tu función, que va a ser una función de flecha. Ahora tenemos que agregar dos nuevas clases que se cambian como primero, vamos a crear una nueva variable, llamarla barra de navegación. Debe ser igual a documentos, puntos, QuerySelector. Vamos a insertar tu nombre de clúster navbar. Entonces dentro de la función, derecha, barra de navegación y propiedad más fácil llamada lista de clases Ahora puedes pensar que tenemos que usar tu método agrega, pero en este caso no va a funcionar porque cuando hacemos clic en el icono, el cambio de clase debería agregarse a Napa. Pero en Siguiente clic, debería ser eliminado. Y para lograrlo, en lugar de agregar, tenemos que usar el método llamado Toggle. Vamos a insertar el cambio de nombre de tu clase. Entonces, si hacemos clic en el icono, entonces se transformará en x. Y luego en el siguiente clic, obtendrá su estado predeterminado. Para que esto afecte al motor, volvamos al archivo style.css y asignemos a la transición de línea con valores 0.8 s. así que ahora un hecho se volvió más inteligente, pero creo que podemos hacerlo aún más agradable En lugar de girar las líneas solo por 45 grados, podemos dejar que hagan una rotación completa, rotación de 360 grados y luego vuelvan a girar 45 grados. Entonces como los valores tenemos que insertar aquí, suma de 360.45, que eventualmente es 405 grados Entonces ahora estás de acuerdo en que se ve mucho mejor. Bien, así que ya casi estamos ahí. La otra cosa que hay que hacer es ocultar suficiente puerto por defecto, mostrarlo onClick Para ello, cambiemos el valor de la posición correcta y hagamos que sea -300 píxeles Entonces ahora Navbar está oculto. Para moverlo de lado derecho a izquierdo, voy a utilizar de nuevo el cambio de clase. Vamos a asignarle, derecho, con valor cero. Ahora, si hacemos clic, se mostrará Napa, pero como invitado, para que el efecto sea más agradable, tenemos que usar transición con los valores ¿verdad? 0.8 s. y además, voy a usar tu función llamada cubic Bezier, que nos permite crear una transición personalizada En este caso, quiero que el efecto comience un poco más lento y termine más rápido. Para eso, voy a pasar tus valores 100.1. Entonces ahora podemos decir que todo funciona a la perfección. Tenemos aquí una barra de navegación de aspecto agradable y moderno con algunos efectos geniales 24. Proyecto 21 - botón creativo: En este tutorial, vamos a estar construyendo un botón bonito con algunos efectos geniales Aquí tenemos un solo botón en la página. Tiene algún contenido. Y una vez que pasemos el cursor sobre él, entonces el contenido se cambiará con algún efecto agradable Eso es, lo que vamos a construir. Espero que sea interesante. Entonces comencemos. En código VS. Tengo dos archivos diferentes, index.html y style.css. Dentro del archivo HTML, he preparado la estructura HTML básica, el elemento head. Tengo dos enlaces diferentes, uno para fuentes de Google y el segundo para style.css. Pero puedes descargar estos archivos de inicio desde el enlace en la descripción. Sigamos adelante y antes que nada, creamos el marcado HTML. Vamos a abrir el desarrollo, que va a ser un rapero. Así asignado a la clase BTN wrapper. Después dentro de él, botón Crear con un nombre de clase btn Entonces como el contenido del botón, voy a instituir a diferentes elementos span porque como recuerdas, cambiaremos esos contenidos cuando pasemos el cursor sobre el botón Así que abre elementos span con nombre de clase, BTN, textos uno, e instituye algún texto Digamos que explora más. Después duplicarlo. Cambió className en lugar de uno, ¿verdad? Dos. Y también cambiar el contenido, ¿verdad? Es interesante. Bien, eso es todo sobre el marcado HTML Ahora es el momento de escribir algo de CSS. Entonces vamos al archivo style.css. En primer lugar, voy a crear algunos estilos comunes. Selecciona todos los elementos usando un asterisco y establece el margen y el relleno como cero Además, voy a cambiar la familia de fuentes para cada elemento. Usemos aquí Josephine Sans sensorial. Bien, a continuación voy a cambiar el color de fondo del elemento del cuerpo Así que vamos a seleccionarlo y asignarlo a su color de fondo C, F, D, E cero. Ahora voy a definir ancho y alto para envoltorio btn. En realidad ocupará toda la página. Así que vamos a asignar a cada ancho. Y tristemente eso es al 100%. En cuanto a la altura, la voy a establecer como 100% de la ventana gráfica Bien, así que a continuación, vamos a jugar botón en el centro de la página Y lo voy a hacer usando posiciones y transformar traducir. Vamos a seleccionar el botón. Establecer su posición como absoluta. Entonces voy a moverlo de arriba a abajo en un 50 por ciento. Así que pongamos la primera posición como 50 por ciento y también moverla de izquierda a derecha en un 50 por ciento también. Por último, para centrar el botón perfectamente, necesitamos usar transform translate. Y tenemos que pasar tu -50 por ciento. Y luego otra vez -50 por ciento. Bien, así que una vez que el botón esté perfectamente centrado en la página, lo voy a personalizar. Definamos su anchura y altura. Establecer con como 250 píxeles. En cuanto a la altura, vamos a asignar a 70 píxeles. Después cambiar de fondo. En este caso, voy a usar un degradado lineal con tres colores diferentes. Y también voy a cambiar la dirección de la transición de color. Utilizaremos de abajo hacia arriba. Ese inseguro de tres colores diferentes. El primero va a ser 001 54c. El siguiente debería ser 123 76e como el último, ¿verdad? 234, 87f. Bien, entonces se cambia el color de fondo. Cambiemos también el color del texto. Que sea blanco. Además, voy a hacer un botón alrededor de él usando border-radius Devaluamos 50 píxeles. Entonces deshazte del borde predeterminado. Además de eso, me voy a deshacer del contorno predeterminado porque cuando hacemos clic en el botón entonces aparece la línea azul. Así que pongamos esquema como ninguno. También cambia el tipo de más grueso, hazlo puntero. Y por último, crear algún efecto de sombra. Usa box-shadow con los valores 015 píxeles, dos píxeles. Y como el color, derecho, RGBA 000.5. Bien, así que por ahora eso es todo sobre el botón. Ya se ve bien y ahora tendremos que cuidar su contenido. Así que vamos a seleccionar elementos span. Al principio, aumentó el tamaño de la fuente, lo convierten en 18 pixeles. Después transforma el texto en mayúsculas y crea algo de espacio entre letras usando el espaciado entre letras con el valor uno de los picos Bien, así que ahora es el momento de crear los efectos hover. Pero antes de eso voy a posicionar elementos span. Al principio, voy a trabajar en el primero Seleccionarlo y establecer su posición como absoluta. Por ahora, quiero ocultar el segundo elemento span para que nuestro proceso de trabajo sea más conveniente. Así que vamos a seleccionarlo y asignarlo a cada display, ninguno. Bien, definamos el ancho de los primeros elementos span y hagamos que sea 100 por ciento Después colóquelo en el centro del botón. Para eso necesitamos top position con el valor 50 por ciento. Entonces necesitamos izquierda cero. Ahora bien, para centrar los elementos a la perfección, tenemos que utilizar de nuevo transform. Pero en este caso traducir con la dirección y y con un valor -50 por ciento. Bien, eso es todo sobre los primeros elementos span. Ahora, voy a definir una posición para la segunda. Por defecto, lo voy a colocar abajo debajo del botón. Y luego al pasar el cursor lo moverá hacia arriba y lo mostrará como el contenido del botón Así que vamos a deshacernos de la exhibición ninguno de aquí. En realidad, también necesitamos usar propiedades similares para el segundo elemento span. Entonces voy a copiar esas propiedades de aquí y pegarlas para el segundo lapso. Como ve, ambos elementos span ocupan el mismo lugar, pero no lo necesitamos. Como dije, voy a colocar el segundo lapso abajo debajo del botón. Y para ellos, cambiemos el valor para la primera posición y hagamos que sea 150 por ciento. Bien, así que todo está listo, es hora de crear un efecto hover Al flotar. Voy a subir el primer texto. Quiero decir, debería estar oculto. En cuanto al segundo lapso, lo moverá también hacia arriba y se mostrará como el contenido de la culata. Entonces, seleccionemos el botón con hover. A continuación, seleccione los primeros elementos span. Entonces voy a subir el primer elemento span en un 100 por ciento. Entonces necesitamos establecer la posición superior como -100%. Entonces, si pongo el cursor sobre el botón que el texto se moverá hacia arriba. Ahora tenemos que mover este segundo lapso también. En realidad, vamos a duplicar este código. Cambiar el nombre de la clase. Te necesitamos para S4, la posición superior. Tenemos que fijarlo como 50 por ciento. Entonces, si pongo el cursor sobre el botón, entonces todos lo haremos o ellos obtendrán este resultado Ahora solo tenemos que personalizar este efecto. O sea, voy a agregarle alguna transición con los valores top y 0.2 s. ahora el efecto se ve mucho mejor y lo único que tiene que hacer es ocultar el texto mientras están fuera del botón. Para eso, voy a usar desbordamiento oculto. Bien, ahora todo estaba bien. Y en realidad con este pequeño proyecto, ya terminamos 25. Proyecto 22 - Presentación de diapositivas: Hola y bienvenidos a nuestro nuevo video en el que vamos a construir una presentación de diapositivas Antes de comenzar a construir los proyectos, voy a describir de qué se trata. Como puedes ver por defecto, esta presentación de diapositivas se está ejecutando con algunos buenos efectos de desvanecimiento Aquí abajo, tenemos un botón Reproducir Pausa. Si hago clic en él, entonces la presentación de diapositivas se detendrá. Y también en los lados izquierdo y derecho, se mostrarán a controles o flechas. Utilizándolos, puedes ejecutar esta presentación de diapositivas manualmente. Si hago clic en el botón Reproducir y coloco el cursor sobre el lado derecho o izquierdo, se mostrarán las flechas Si hago clic en alguno de ellos, esta presentación de diapositivas cambiará al modo manual Ya no se ejecutará automáticamente, y además el botón post se cambiará a la jugada, pero bien, sigamos adelante y empecemos a trabajar en ello. Aquí en el escritorio, he creado una carpeta flamante llamada slideshow, en la que tengo otra carpeta llamada images Incluye todas las imágenes que vamos a utilizar a lo largo de este proyecto. En realidad, puedes descargar los archivos fuente desde el enlace en la descripción. Están subidos en GitHub, ¿verdad? Sigamos adelante y abramos esta carpeta en VS Code. Voy a crear tres archivos diferentes. El primero va a ser index.html. Entonces necesitamos style.css y también scripts dot js file. Después ve al archivo index.html y crea un documento HTML básico. Para eso, necesitamos colocar un signo de exclamación y luego presionar Enter o la tecla Tab Sigamos adelante y cambiemos el título. Voy a insertar tu presentación de diapositivas. Entonces voy a vincular archivos CSS y JavaScript. Vamos a abrir la etiqueta de enlace. Agregar H refiere atributo indica el nombre del archivo, style.css. Luego abajo, justo encima etiqueta del cuerpo de cierre, abra la etiqueta script. Necesitamos aquí atributos de origen y tenemos que indicar el nombre del archivo script.js. Bien, por último, tenemos que ejecutar nuestro proyecto al navegador Para eso, voy a usar un servidor en vivo, que es un gran paquete, y nos permite ejecutar la vida del proyecto en el navegador sin actualizar la página cada vez que hagamos algunos cambios. Para que puedas seguir adelante e instalar este paquete. Para ejecutar un servidor en vivo, puede usar un clic derecho y luego elegir Abrir con servidor en vivo. Bien, sigamos adelante y organicemos un poco el editor de texto y el navegador, y luego comencemos a crear el marcado HTML El primer elemento que vamos a crear es un div, que en realidad será un contenedor. Envolverá todo el contenido. A continuación, necesitamos otro div. Incluirá la presentación de diapositivas en sí. Así que está asignado al envoltorio de presentación de diapositivas de nombre de clase. Después de eso, voy a pasar la flecha izquierda a estos desarrollos. Entonces sigamos adelante y open div tendrá dos clases diferentes. El primero va a ser un nombre de clase común para ambas flechas Control. Y luego voy a usar un nombre de clase individual, flecha izquierda. En realidad, esas flechas se crearán manualmente. No vamos a tener ningún íconos. Entonces voy a pasar aquí otro consejo con la flecha de clase. Y finalmente, tenemos que insertar aquí dos líneas representadas por desarrollos. Entonces el primer desarrollo debe tener clases, línea y línea uno. Duplicemos esta línea de código y cambiemos el nombre de clase que necesitamos aquí línea a. Bien, eso es lo de la flecha izquierda. Voy a duplicarlo para la flecha derecha y cambiar los nombres de clase que necesitamos aquí, flecha derecha. En cuanto a los números de línea, necesitamos 3.4. Bien, eso es lo de las flechas. Ahora voy a insertar entre ellos, las diapositivas, estoy en las imágenes Vamos a abrir desarrollos con diapositivas ClassName. Entonces cada imagen será envuelta por un desarrollo. Por lo tanto, vamos a abrirlo Con los nombres de las clases, diapositiva, diapositiva uno. En realidad, necesitamos usar esos nombres de clase numerados porque los vamos a usar desde JavaScript. Después inserta aquí una imagen. En realidad, no voy a usar un atributo alt, así que vamos a seguir adelante y deshacernos de él y luego seleccionar la imagen de la carpeta de imágenes. Entonces aquí está nuestra imagen. adelante y duplicemos la diapositiva dos veces por ahora y cambiemos los nombres de clase e imagen en ella aquí deslizamos también. Imagen dos y 3.3. Entonces en este momento tenemos tres imágenes, pero al final del día, puedes agregar tantas imágenes como desees. Funcionará bien y no estrellará el proyecto. Por último, voy a crear un botón de pausa de reproducción. Vamos a abrir desarrollos justo después de la flecha derecha y asignados a la pose de juego del nombre del clúster. Como el botón de pausa de reproducción. Voy a usar el icono Font Awesome. Y para ello, tenemos que agarrar el enlace CDN para Font Awesome Así que sigamos adelante y busquemos Font Awesome, CDN, js. Después ve a este enlace y luego agarra el primer enlace. A partir de aquí. Voy a abrir etiqueta de enlace. Y luego peguemos un enlace y el atributo de referencia H. Bien, luego abajo, inserte el elemento con los nombres de clase, FAS, f, guión, play Bien, eso es todo sobre el marcado HTML. Aquí tenemos imágenes y también el botón Reproducir justo después de eso. Ahora es el momento de comenzar a escribir algo de CSS. Pasemos al archivo style.css. Lo primero que voy a hacer es crear algunos estilos de reinicio. Entonces, seleccionemos todos los elementos usando un asterisco y fijemos el margen y el relleno como cero A continuación, seleccione el envoltorio de presentación de diapositivas. En realidad, voy a expandir estos elementos a toda la ventana gráfica Así que pongamos el ancho como 100%. Y luego altura como cien vh. Vh significa que la altura tomará el 100% de la altura de la ventana gráfica Ahora mismo, aquí no está pasando mucho. Entonces necesitamos agregar algunos estilos más. Tenemos que encargarnos del propio tobogán. Entonces sigamos adelante y seleccionémoslo. Pongamos ancho y alto, ambos como 100 por ciento. Y también voy a establecer su posición como absoluta. Nos permitirá colocar imágenes una encima de la otra. Ahora parece que tenemos aquí solo una imagen, pero de hecho, el resto de las imágenes se colocan en el fondo una encima de la otra. Bien, siguiente, cuidemos la imagen misma. Así que seleccione el elemento IMG. También necesitamos el mismo ancho y alto para la imagen. Entonces voy a heredar esas dos propiedades, ancho y alto Y también para que la imagen se vea bien, usemos la cubierta de pies de objeto. Por último, quiero que la imagen sea un poco más oscura. Y para lograrlo, voy a asignar a su elemento padre, fondo negro. Y luego vamos a disminuir la opacidad para la imagen. Voy a hacerlo 0.6. Bien, entonces creo que se ve mucho mejor ahora es el momento de empezar a trabajar en los controles izquierdo y derecho. Como recuerdas, ambas flechas tienen nombres de clase comunes. Control. Entonces sigamos adelante y seleccionémoslo. Vamos a establecer la posición es absoluta. Entonces para hacer que Controles Posición funcione de acuerdo a su elemento padre, que en este caso es un envoltorio de presentación de diapositivas Tenemos que usar posición relativa Siguiente, voy a establecer la posición superior. Hagámoslo cero. Y también definir el ancho y altura como un valor de la propiedad width. Voy a usar el ancho de la ventana. Hace que los controles sean más receptivos en diferentes tamaños de pantalla. Voy a usar 15 de ancho de ventana. Significa que el ancho de control va a ser 15% del ancho de la ventana gráfica En cuanto a la altura, pongámosla como 100 por ciento. Entonces ahora mismo, el control no es visible. Y para arreglarlo, sigamos adelante y cambiemos el color de fondo. En este caso, voy a usar el valor RGBA. Entonces voy a pasar aquí 902-90-4907. Y luego como el valor de la opacidad, voy a pasar 0.6 Entonces ahora como pueden ver, tenemos aquí el control en el lado izquierdo de la página. El segundo control no es visible en este momento porque en HTML se coloca después de la presentación de diapositivas, y por lo tanto anualmente arriba detrás de esta luz Para arreglarlo, voy a usar la propiedad z-index. Hagámoslo 100. Ahora, de un vistazo, tenemos el mismo resultado, pero de hecho, ambos controles se colocan uno encima del otro. Porque por defecto para ambos, la posición izquierda se establece como cero. Entonces tenemos que encargarnos de eso. Para la flecha izquierda, necesitamos que la propiedad left se establezca como cero. En cuanto a la flecha derecha, también necesitamos hacer la posición correcta cero. Bien, ahora todo funciona bien. Ambos controles se colocan de la manera correcta. Lo último que voy a hacer con respecto a los controles es establecer el tipo del cursor como punto. Bien, ahora es el momento de cuidar las flechas. Como decíamos, tenemos que crearlos manualmente con desarrollos. Entonces voy a seleccionarlos todos usando la línea de nombre de clase común. Ante todo, hagámoslos visibles. Para eso, tenemos que definir ancho y alto. Voy a establecer el ancho como puntos para correr. En cuanto a la altura. Hagámoslo diez rampas Y también definir el color de fondo. Voy a usar aquí llamado r d d d Phi, d Phi. Entonces aquí tenemos nuestras líneas. De hecho, tenemos cuatro líneas distintas y para transformarlas en flechas, necesitamos girarlas. Así que sigamos adelante y seleccionemos la primera línea, que tiene nombre de clase la línea uno. Voy a rotarlo 20 grados. Entonces para eso tenemos que usar transformar la propiedad. Entonces necesitamos rotar la función. Y dentro de paréntesis tenemos que indicar 20 grados. Como puede ver, la línea se gira pero está parcialmente oculta. Entonces para arreglarlo, voy a centrar las líneas dentro del control para eso. Voy a usar un par de propiedades y valores de flexbox El primero va a ser display flex. Entonces para centrar el elemento flex horizontalmente, necesitamos usar justify-content En cuanto al centrado vertical, necesitamos alinear los elementos al centro este momento la línea es visible y en realidad la flecha está centrada. Sigamos adelante y nos ocupemos de la segunda línea. Necesitamos girarlo en el mismo grado pero con dirección opuesta. Así que vamos a seguir adelante y duplicar este código aquí. Voy a cambiar el nombre de la clase. Necesitamos aquí, línea dos. Y también necesitamos 20 grados negativos. Bien, ahora ya tenemos una flecha, pero como pueden ver, las líneas están un poco alejadas entre sí Así que para arreglar eso, voy a moverlos ligeramente usando la función Translate. Tenemos que moverlos según el eje y. Entonces necesitamos traducir y con el valor 0.35 RAM. También necesitamos lo mismo para la segunda línea, pero nuevamente, con el signo menos. Entonces vamos a copiarlo, pegarlo aquí y aquí mismo, signo menos. Bien, así que ahora como pueden ver, tenemos aquí la flecha perfecta Sigamos adelante y hagamos lo mismo por el correcto. Duplicemos ambas líneas. Entonces voy a cambiar los nombres de las clases. Necesitamos la línea tres y la línea cuatro Para la tercera flecha, necesitamos un negativo de 20 grados. cuanto a la cuarta línea, solo necesitamos 20 grados. Bien, así que eso es todo sobre los controles. Lo último de lo que tenemos que encargarnos es el botón Reproducir Pausa. Entonces sigamos adelante y seleccionemos estos elementos. En primer lugar, voy a encargarme de la posición del botón porque en estos momentos no es visible. Terminó detrás de las diapositivas. Entonces pongamos su posición como absoluta. Entonces voy a decir el cinco por ciento inferior. Y que para poder centrar estos elementos, tenemos que establecer la posición del pestillo como 50 por ciento. Y además de eso, para un centrado perfecto, necesitamos usar Transform Con Translate X. Tuvimos que mover los elementos según la dirección X, y tenemos que pasar aquí -50 por ciento Entonces esta pequeña técnica nos permite enviar a través del elemento a la perfección. Por último, usemos el puntero del cursor. Bien, entonces ahora el botón es factible y está centrado. Por último, quiero que se vea bien. Entonces sigamos adelante y seleccionemos yo elemento en sí. Cambia el color del elemento, hazlo blanco, y también aumenta el tamaño de la fuente. Hazlo 50 pixeles. ¿Correcto? Entonces en este momento ya terminamos con CSS. Todos los elementos son estilizados. Y ahora tenemos que seguir adelante y empezar a escribir algo de JavaScript. Pasemos al archivo script.js. Así que al principio vamos a ejecutar esta presentación de diapositivas automáticamente Para eso, vamos a crear dos funciones distintas. El primero va a ser cambiar diapositivas. En realidad, creo que será mejor si dividimos el editor y mostramos también el archivo HTML, porque vamos a seleccionar algunos elementos usando JavaScript DOM. Entonces voy a seleccionar todas las diapositivas. Vamos a crear una variable llamada lista de diapositivas. Para seleccionar un par de elementos que tengan el mismo nombre de clase, podemos usar el método query selector all. Pasemos aquí la diapositiva del nombre de la clase. En realidad, cuando selecciona elementos usando el método de selección de consultas all, devuelve un objeto similar a una matriz llamado lista de nodos Y para poder manipular en esa lista como una matriz, tenemos que transformarla en una matriz. Así que sigamos adelante y creamos una nueva variable. Voy a llamarlo diapositivas. Ahora, para transformar la lista de nodos en una matriz, tenemos que usar array from method. Y tenemos que pasar tu lista de diapositivas. Bien, ahora voy a crear una variable que representará la diapositiva actual en la presentación de diapositivas Me refiero a esta diapositiva que se va a mostrar en la pantalla, el valor de esta variable va a estar cambiando. Por lo tanto, vamos a usar let declaration. Llamemos a esta variable actual y luego la pongamos como una sola. Entonces, por defecto, el valor de esa variable indicará el número de una diapositiva que se mostrará actualmente. ¿Bien? Así que hemos seleccionado todas las diapositivas y las hemos almacenado en una matriz. Como saben, tenían nombres de clase. Deslice uno, deslice dos, y así sucesivamente. Tenemos que recorrer la matriz, obtener acceso en la segunda parte de esos nombres de clase, principalmente números, y compararlos con el valor de la variable actual. Si son iguales, entonces tenemos que mostrar esa diapositiva. Y si no son iguales, entonces tenemos que ocultarlo. Bien, eso es. Lo que vamos a hacer. Para recorrer la matriz, voy a usar uno de los métodos de ayuda de matriz, que se llama for-each Tenemos que pasar aquí una función de flecha con la diapositiva actual. Entonces, para obtener acceso al nombre del clúster, podemos usar una propiedad llamada class list, que en realidad nos da una matriz de los nombres de clase. Entonces voy a usar declaraciones if. Entonces como condición, necesitamos la siguiente lista de clases de puntos de diapositiva. Entonces como dijimos, esta propiedad nos dará una matriz de los nombres de las clases. En este caso, esos nombres de clase serán slide, slide one. Necesitamos el segundo ítem, me refiero a la diapositiva uno. Entonces tenemos que indicar el número de índice como uno. Entonces después de eso necesitamos dividir este nombre de clúster en el guión Devolverá otra matriz en la que tendremos dos elementos, slide y uno Tenemos que agarrar el segundo ítem, que es uno. Entonces necesitamos indicar aquí el índice número uno. Espero que tenga sentido para ti. Así que ahora tenemos acceso al número de cada diapositiva, pero de hecho, el tipo de datos de este número no es un número, es una cadena Entonces tenemos que transformarlo en número. Y podemos hacerlo simplemente multiplicándolo por uno. ¿Bien? Entonces, si este número es igual al valor de la variable actual, entonces tenemos que mostrar la diapositiva actual. Para eso. Vamos a insertar aquí diapositivas estilo punto. Y luego voy a usar la propiedad llamada texto CSS, lo que nos permite usar varias declaraciones CSS. Entonces necesitamos aquí visibilidad, visible y también opacidad uno Si esta condición es falsa, entonces tenemos que ocultar estas diapositivas. Entonces necesitamos la declaración L. Entonces vamos a agarrar esta línea de código. Oculta la visibilidad. Opacidad cero. ¿Correcto? Eso es. Podemos llamar a esta función ahora. Y veamos cómo funciona. Ahora mismo. La corriente es igual a uno. Por lo tanto, vemos aquí la primera imagen. Para probar que puedo pasar el cursor sobre la ruta de la imagen aquí, archivo index.html Entonces puedes ver que esta es definitivamente la primera imagen. En realidad, si quieres previsualizar e imagen de esta manera, puedes instalar un paquete llamado vista previa de imagen. Bien, si cambio el valor de la variable actual, digamos 23, entonces se mostrará la tercera imagen Si vuelvo a verificar en el archivo index.html, entonces encontraremos la misma imagen. Todo funciona bien hasta ahora. Ahora, es el momento de hacer que la presentación de diapositivas se reproduzca automáticamente. Para eso, voy a crear otra función. Vamos a llamarlo play pause. Así que tenemos que cambiar la diapositiva después de cada 3 s. Así que necesitamos usar el método setInterval Entonces los primeros 3 s, se estará mostrando la primera imagen. Después de eso, esta función de devolución de llamada se ejecutará. Entonces tenemos que aumentar en uno el valor de las corrientes. Para eso, usemos el operador de incremento plus, plus. Y también necesitamos llamar a la función de cambio de diapositivas. Por último, eso es indicar aquí el intervalo. Voy a guardarlo como 3 s. y hay que expresarlo en milisegundos Entonces necesitamos 3 mil milisegundos. ¿Bien? Entonces, como puedes ver, diapositivas se está ejecutando con éxito Después de la última imagen, el valor actual sigue aumentando. Por lo tanto, estamos consiguiendo aquí una página en blanco. Por lo tanto, necesitamos usar declaraciones if en la función de diapositivas de cambio. Entonces, si el valor actual es mayor que la longitud de las diapositivas, necesitamos que sea una. Otra vez. Necesitamos, si nosotros, la condición actual es mayor que la longitud de puntos de diapositivas. Si esto es cierto, entonces tenemos que establecer actual como uno. Ahora, como puedes ver, la presentación de diapositivas se ejecuta infinitamente. Bien, entonces ahora necesitamos controlar el botón de pausa de reproducción. Por defecto, la presentación de diapositivas se ejecutará automáticamente. Pero una vez que hacemos clic en el botón Pausa, entonces tenemos que detener la presentación de diapositivas Entonces necesitamos agregar un par de cosas para jugar. Función de pausa. Voy a crear dos variables distintas. En el primero tendremos un valor booleano, lo que nos ayudará a establecer alguna lógica Declaremos una nueva variable, llamémosla pose de juego. Y por defecto la configuración eso es cierto. Además, necesitamos una variable llamada interval, que almacenará la función set interval que usamos hace un minuto. Así que tenemos que ejecutar esta presentación de diapositivas automáticamente si play post pool es cierto, y de lo contrario tenemos que detenerlo Entonces tenemos que usar declaraciones if en las que voy a comprobar si placa post booleano Es cierto o Si es cierto, tenemos que insertar la función set interval dentro de la sentencia if. Y también, como decíamos, tenemos que almacenar esta función en la variable de intervalo. Y después de eso tenemos que hacer que la pausa de reproducción bool sea falsa. Declaración de otro minuto siguiente. Si la función de pausa de reproducción se llamó La segunda vez, entonces significa que el valor de play pause Boolean se volvería falso Por lo tanto, se ejecutará toda la sentencia else en la que necesitamos borrar el intervalo. Y tuvimos que volver a establecer play pause booleano a true. Bien, lo siguiente que tenemos que hacer es adjuntar un evento click al botón de pausa de reproducción Entonces sigamos adelante y seleccionemos este elemento. Voy a usar el método selector de consultas. Entonces usamos className play pose. Y adjunto a cada oyente de eventos. Pasemos aquí, haga clic en evento y luego la función de flecha. Dentro de esta función tenemos que llamar a la función de poste de placa. Entonces ahora, como ves, la presentación de diapositivas se ejecuta automáticamente. Pero si hago clic en el botón, entonces se detendrá. Si vuelvo a hacer clic, entonces seguirá funcionando. ¿Bien? Ahora necesitamos cambiar el icono de este botón. Cuando hacemos clic en él. Por defecto, creamos un botón de reproducción y necesitamos cambiarlo a un botón de pausa cuando hacemos clic en el icono. Entonces necesitamos manipular con dos fuentes diferentes, nombres de clase increíbles, FAA reproducir una F, un pulso Entonces voy a crear una nueva función. Llamémoslo cambiar pose de juego. Entonces sigamos adelante y seleccionemos el icono. Es de nuevo el método selector de consultas. Pasa tu pose de juego de nombre de clase. Y luego la Irlanda. Después de eso, voy a tener acceso al nombre de segunda clase, que es FA dash play. Y para eso otra vez, voy a usar una propiedad de lista de clases. Así que vamos a crear una nueva variable. Voy a llamarlo un camino más corto. Ver ls. Entonces tenemos que escribir tu lista de clases de puntos de icono con el índice número uno. Bien, así que si el nombre de la clase es igual a f a play, entonces debemos eliminarlo y agregar un post y viceversa. Entonces voy a usar una declaración if. Tenemos que comprobar si clase es igual a f a jugada. Si esta condición es verdadera, entonces tenemos que eliminar este nombre de clase. Así que necesitamos icono punto más lista, y tenemos que usar el método remove con un nombre de clase FAA play Y al mismo tiempo tenemos que agregar al elemento clase diferente. Entonces necesitamos icon, class list, dot, add, FA dash posts. Entonces si esta condición es falsa, si philos no es igual a f, un juego de guión Else declaración en la que tenemos que eliminar de los elementos agrupando postes FAA y le agrega F una placa Así que tomemos esas dos líneas de aquí y solo cambiemos el nombre de la clase. Bien, lo último que hay que hacer es llamar a esta función, y tenemos que hacerlo en play pose function Entonces, como ves por defecto, tenemos un botón de pausa porque diapositivas se ejecuta automáticamente Pero si hago clic en el icono, se volverá a cambiar al botón de reproducción y también se detendrá la presentación de diapositivas Bien, eso es todo sobre esta parte. A continuación, tenemos que encargarnos de los controles. Cuando hacemos clic en cualquiera de las flechas, entonces la presentación de diapositivas debería detenerse, y deberíamos poder cambiar las diapositivas manualmente Entonces, antes que nada, tenemos que seleccionar las flechas. Empecemos con una flecha a la izquierda. Voy a utilizar de nuevo el método QuerySelector. Hagamos una pausa aquí agrupando la flecha izquierda, luego adjuntamos a ella Oyentes de eventos. Con un evento click. Onclick, tenemos que llamar a la función de pausa de reproducción si la pose de reproducción booleana Porque cuando es falso, significa que la presentación de diapositivas se ejecuta automáticamente Una vez que llamamos a una función de pausa de juego , debería detenerse. Entonces necesitamos una declaración if que como condición debemos verificar. Si no juega pose booleana. Entonces necesitamos llamar a la función de pausa de reproducción. También en caso de hacer clic en la flecha izquierda, necesitamos disminuir el valor actual en uno. Entonces necesitamos corriente con decremento operador menos, menos. Tenemos que volver a llamar a la función de cambio de diapositivas. Entonces, si hago clic en la flecha, entonces solo obtendremos una página en blanco. Ocurre porque el valor actual se convierte en cero. Y con cero no tenemos ningún número de diapositiva. Entonces tenemos que evitar este tipo de cosas. Para eso, vamos a cambiar la función de diapositivas y agregar aquí. Else if declaración. Tenemos que verificar si la corriente es igual a cero. Si es así, si esto es cierto, entonces la corriente debería ser igual a la longitud del punto de las diapositivas. Ahora bien, si vuelvo a probar, funcionará bien. Bien, necesitamos lo mismo para la flecha derecha también. Así que sigamos adelante y dupliquemos este código. Voy a cambiar el nombre de la clase. No oímos la flecha derecha. En el caso de la flecha derecha, necesitamos aumentar el valor actual en uno. Entonces, en lugar de signos menos, necesitamos aquí más, más. Bien, así que todo funciona bien. Paso a paso. Vamos al final de este proyecto. Pero aún así tenemos que hacer un par de cosas para nuestra presentación de diapositivas se vea mejor Entonces, por defecto, cuando esta presentación de diapositivas se ejecuta automáticamente, los controles deben estar ocultos Y tenemos que mostrarlos cuando pasamos el cursor sobre las flechas Y también necesitamos mostrarlos una vez que detengamos la presentación de diapositivas Entonces sigamos adelante y vayamos al archivo style.css. Voy a crear una nueva clase. Llamémoslo flechas visibilidad. Tenemos que asignarle opacidad cero. Vamos a añadir y eliminar esta clase dinámicamente de JavaScript. Además de eso, tenemos que hacer que los controles aparezcan al flotar. Entonces necesitamos control sobre y establecer la opacidad como una sola. Finalmente, hagamos un efecto hover más agradable usando Tenemos que insertar aquí opacidad, luego duración 0.5 s, y también usar una de las funciones de temporización de transición llamada lineal Bien, eso es todo sobre CSS. Volvamos al archivo JavaScript. Voy a crear una nueva función. Llamémoslo flechas visibilidad. En primer lugar, tenemos que seleccionar ambas flechas. Vamos a hacer eso usando de nuevo query selector all method. Ambas flechas tienen el control de nombre de clase común. Entonces voy a recorrerlos y en base a alguna condición, agregar y eliminar visibilidad de flechas de racimo recién creadas. En primer lugar, para mirar a través de las flechas, necesitamos transformar la lista de nodos en una matriz. Ya sabes cómo hacerlo. Tenemos que usar array dot from. Entonces tenemos que pasar flechas que para recorrer el array que tenemos que usar para cada método. Pasemos tu función de flecha con flecha actual. Entonces, si la presentación de diapositivas se ejecuta automáticamente, entonces deberíamos ocultar las flechas Así que si declaración luego insertar aquí como una condición, reproducir pausa Boolean Si es cierto, entonces necesitamos agregar a la lista de clases de la flecha, flechas de clase visibilidad. Entonces necesitamos una lista de clases de puntos de fila. Entonces tenemos que usar el método llamado ed. Y tenemos que pasar aquí el nombre de clase flechas visibilidad. De lo contrario, si la presentación de diapositivas no se ejecuta automáticamente, tenemos que eliminar esta clase Entonces necesitamos la declaración L. Entonces vamos a agarrar esta línea de código. En lugar de métodos ágiles utilizados eliminar. Y finalmente, sigamos adelante y llamemos a esta función en función de pausa de reproducción. Bien, por defecto, las flechas están ocultas. Si vuelo el cursor sobre ellos, deberían aparecer. Si hago clic en alguna de ellas, esta presentación dejará de ejecutarse automáticamente, y podremos cambiar las diapositivas manualmente Además, si hago clic en el botón Pausa, entonces se mostrarán las flechas. En realidad ya casi terminamos. Lo único que hay que hacer es agregar algún efecto de desvanecimiento. Dos diapositivas que hice para agregar efectos de desvanecimiento cuando estas diapositivas están cambiando. Para eso en CSS, necesitamos agregar una transición a una diapositiva que se le asigne opacidad y la duración 1 s. Y también para hacer que el efecto fade sea más oscuro, tenemos que cambiar el color de fondo para el wrapper de diapositivas Hagámoslo negro. Bien, eso es. Enhorabuena, hemos terminado de construir este proyecto. Como puedes ver, todo funciona a la perfección. En realidad, voy a añadir aquí algunas imágenes más. Duplicemos la diapositiva tres veces y cambiemos los nombres de las clases. Además, necesitamos cambiar los nombres del Okay, que puedas adherir tantas imágenes como desees. Solo necesitas numerar las clases de la manera correcta. 26. Proyecto 23 - botón de radio CSS personalizado: En este video, vamos a estar construyendo un botón de radio CSS personalizado. Básicamente en diferentes sitios web, es posible que veas botones de radio predeterminados, que creo que no se ven del todo bien. Entonces en este video, podrás aprender sobre cómo crear botones de radio modernos y geniales usando solo HTML y CSS. Bien, así que como veis, tenemos aquí dos botones de radio, opción uno y opción dos Tenemos círculos verdes. Y si les hacemos clic, se comprobarán muy bien con algún efecto de desvanecimiento. Bien, entonces veamos qué vamos a construir. Aquí en el código VS tengo dos archivos diferentes, index.html y style.css. Dentro del documento HTML, tradicionalmente, he preparado la estructura básica del documento HTML. Tenemos aquí dos enlaces diferentes, uno para fuentes de Google y otro para el archivo style.css. Bien, sigamos adelante y como de costumbre, comenzamos a construir el marcado HTML Voy a abrir un elemento div, que debería ser un envoltorio para ambas opciones. Entonces está asignado a su envoltorio de nombre de clase. Entonces abrir otro desarrollo que será una opción en sí misma. Así asignado a su opción de clúster. Dentro de los elementos div, necesitamos dos elementos. El primero va a ser ingresado como el tipo que necesitamos aquí, radio. Además de los atributos de tipo, necesitamos otros dos atributos. El primero va a ser una identificación. Utilizaremos el ID para vincular entradas y etiquetar elementos y crear un evento click. Entonces vamos a asignarle el valor, marque uno. También necesitamos aquí el atributo name. El atributo name no nos permitirá verificar varios botones de opción simultáneamente. Vamos a asignarle valor radio. A continuación necesitamos una etiqueta. Como dijimos, vamos a vincular elementos de entrada y etiqueta. Y para ese ID y cuatro atributos deben tener exactamente los mismos valores. En este caso, necesitamos aquí verificar uno. Bien, vamos a tener dos opciones. Entonces, dupliquemos el desarrollo. Y lo único que tenemos que hacer es cambiar los valores para ID y para cuatro atributos. En lugar de marcar uno, tenemos que verificar dos. Bien, eso es todo sobre HTML. Vamos al archivo style.css y comencemos a escribir algo de CSS. En primer lugar, vamos a crear algunos estilos de reinicio. Seleccione cada elemento usando un asterisco. Luego establece el margen y el relleno como cero. Y también necesitamos aquí box-sizing, border-box. A continuación, voy a seleccionar envoltorio. Definamos este ancho y alto. Voy a establecer el ancho como cien por ciento. En cuanto a la altura, quiero referirme a ocupar el 100% de la ventanilla Y para eso, tenemos que usar unidad de medida llamada el H. Bien, voy a centrar el contenido perfectamente en la página para eso. Usemos flexbox. Necesitamos mostrar flex que para poder centrar el elemento horizontalmente, tenemos que usar justify content center, S4, centrado vertical Necesitamos alinear los artículos al centro. Y por último, como ves, las opciones se colocan una al lado de la otra horizontalmente, pero tenemos que colocarlas Y para eso, cambiemos dirección del flex y hagamos que sea columna. Bien, eso es todo sobre envoltorio. A continuación, voy a darle estilo a una opción. Así que vamos a seleccionarlo. Primero. Definamos su anchura y altura. Voy a establecer con 400 pixeles. En cuanto a la altura, hagamos que sea de 100 píxeles y también cambiemos el color de fondo. Ves tu color gris claro, ¿verdad? CCC. A continuación, vamos a crear un poco de espacio alrededor de cada opción usando el margen. Vamos a configurarlo como 20 píxeles y también crear algo de espacio dentro de la caja usando relleno, 20 píxeles. Por último, quiero colocar elementos verticalmente en el centro para eso, vamos a ver de nuevo, Flexbox, derecha, mostrar flex y luego alinear los elementos al centro Bien, así que eso es todo sobre la opción. Después de eso, sigamos adelante y diseñemos la etiqueta. Se seleccionó la etiqueta de opción correcta. Al principio, cambiemos la familia de fuentes. Voy a usar su fuente llamada Josephine slab san serif Después aumenta el tamaño de la fuente, hazlo 60 pixeles. Y por último, cambia el tipo de más basto, hazlo puntero. Bien, así que ahora es el momento de crear un botón de radio del cliente Para eso voy a usar después y antes pseudo elementos El botón de radio, constará de dos partes. Tendremos un círculo exterior, que se creará usando después de pseudo elementos En cuanto al círculo interno, debe ser antes del pseudo elemento Entonces sigamos adelante y seleccionemos después de pseudo elementos, ¿verdad? Opción, etiqueta. Después. Primero, hagamos su contenido Vacío. Entonces para alinear los elementos, fijemos su posición como absoluta. En realidad, voy a posicionar círculo acuerdo a una opción div elementos. Y para ello, tenemos que asignar a cada posición relativa. Después de eso. Para que los elementos sean visibles, definamos su ancho y alto. Voy a hacer que ambos sean 50 pixeles. Y también crear frontera. Al valor se le asignan cinco píxeles, sólidos. Y el color cero, a, a, c83. Ahora el elemento es visible. Tiene la forma de un cuadrado, y en realidad queremos transformarlo en un círculo. Para eso, definamos un radio de borde con un valor 50%. Bien, así que ahora es el momento de alinear esos círculos. Definamos la posición correcta y hagamos que sea 15%. Y por último, crear un pequeño efecto de sombra, sombra de caja derecha con los valores 003 píxeles. Y luego usar color RGBA 000 y opacidad 0.8. Bien, así que eso es todo después de pseudo elementos. Ahora tenemos que crear un círculo interno usando antes de pseudo elementos En realidad vamos a necesitar propiedades similares para ambos círculos. Así que vamos a seguir adelante y duplicar todo este código y luego hacer algunos cambios. En primer lugar, cambiemos después, antes, luego deshacernos de la propiedad fronteriza. Y en lugar de eso, inserte el color de fondo y se le asigne color cero, un c83 Después de eso, cambiemos el tamaño del círculo. Para eso voy a disminuir ancho y alto. Hagamos que ambos sean 40 píxeles. Y ahora tenemos que encargarnos de la posición del elemento. Tenemos que pasarlo perfectamente en el centro dentro del círculo exterior. Así que definamos la posición superior y hagamos que sea 50 por ciento. Entonces usa transform. ¿Traducir por qué? Lo estoy usando para mover un elemento de su posición actual un poco hacia arriba. Entonces, insertemos aquí -50 por ciento. Y por último, tenemos que mover los elementos un poco hacia el lado izquierdo. Para ello, cambiemos el valor de la posición correcta en lugar de 15. Intentemos 17. Como veo, no es suficiente. Cambiémoslo y hagamos 17.5. Bien, Ahora se ve bien. Y en realidad con el estilo, ya terminamos. Ahora tenemos que hacer que la casilla de verificación funcione. Entonces como dijimos al inicio de esta conferencia, tenemos que vincular entrada y etiqueta para crear evento click. Entonces, en general, para los usuarios, esos círculos funcionarán como los botones de radio. Es decir, visualmente, van a representar el botón de radio. Pero de hecho, detrás de escena, estas pequeñas entradas, haremos el trabajo principal. Bien, así que ya tenemos todos los elementos de etiqueta y entrada vinculados usando id y cuatro atributos Y en realidad esta conexión nos permite comprobar el botón de radio cuando hacemos clic en esos círculos y en realidad toda la etiqueta. Así que eventualmente esto nos permitirá crear el evento click. Vamos a escondernos en círculos por defecto. Y luego los mostraremos una vez que hagamos clic en la etiqueta. En otras palabras, una vez comprobamos el botón de radio original. Entonces para lograrlo, voy a usar uno de estos pseudo-clase que voy a usar uno de estos pseudo-clase se llama checkbox, lo que nos permite definir diferentes estilos CSS cuando la casilla de verificación está marcada Así que vamos a seleccionar elementos de entrada, ¿verdad? Entrada de opción. A continuación, utilice pseudo-clase llamada checked. Ahora tenemos que obtener acceso en el círculo interno, que es antes pseudo elemento Para eso, voy a usar uno de estos combinadores CSS, que se llama selector general de hermanos Y se expresa por el signo tilda. Ahora, tenemos que seleccionar elementos sobre los que debemos manipular. En este caso antes pseudo elemento, derecho, etiqueta con antes Ahora, antes de definir un estilo para estos elementos, vamos a hacer ambos círculos ocultos, asignados a antes de pseudo elementos opacidad a cero Ahora como ves, ambos círculos están ocultos por defecto y onclick, tenemos que mostrarlos de nuevo. Entonces vamos a insertar aquí la opacidad uno. Entonces, si hacemos clic en alguno de los botones entonces deberían ser revisados. Bien, así que ya casi terminamos. Solo tenemos que personalizar un par de cosas. Hagamos que el efecto de comprobación sea más inteligente usando la transición asignada a la opacidad Y la duración 0.4 s. también voy a ocultar elementos de entrada predeterminados. Así que vamos a seleccionar la opción de entrada e insertar aquí mostrar ninguno. Y por último, la opción Eliminar fondo de. Bien, así como puedes ver, todo funciona a la perfección. Y ahora ya sabes cómo crear botones de radio realmente bonitos y modernos, que son mucho mejores que los predeterminados. 27. Proyecto 24 - Tarjeta de visita: Hola y bienvenidos a nuestro siguiente tutorial. En este video, vamos a estar construyendo una tarjeta de presentación 3D de aspecto bonito Este pequeño proyecto se creará en base a HTML y CSS. Antes de comenzar a trabajar en este proyecto, sigamos adelante y describamos rápidamente lo que vamos a crear. Entonces aquí está nuestra tarjeta de presentación. El lado frontal consta de dos partes. En el lado izquierdo tenemos un logo con el diseño web de texto. En cuanto al lado derecho, aquí tenemos alguna información sobre la persona, cosas como nombre, número de teléfono, correo electrónico, dirección. Si pasamos el cursor sobre la tarjeta, entonces estará rotando en el espacio 3D Y se mostrará la parte trasera en la que tenemos un logotipo de la empresa Bien, eso es todo, lo que vamos a construir. Nuevamente, todas estas cosas se crearán usando solo HTML y CSS puros. Aquí en el código VS, tenemos dos archivos abiertos, index.html y style.css. Y también tengo una carpeta llamada images en la que almacenamos logo de la empresa. Usted es capaz de descargar estos archivos fuente de inicio desde el enlace en la descripción. Bien, entonces dentro del archivo HTML, he preparado la estructura básica del documento HTML Dentro del elemento cabeza tenemos un par de eslabones. Enlaces para fuentes de Google, Font, iconos impresionantes, y también tenemos un enlace para el archivo style.css. Sigamos adelante y comencemos a crear el marcado HTML. Vamos a abrir el desarrollo, que debería ser un envoltorio de la tarjeta. Así que vamos a asignarle envoltorio de tarjeta de nombre de clase. A continuación, voy a abrir otro desarrollo, que será la propia tarjeta. Así que vamos a asignarle tarjeta de clase. Entonces como decíamos, la tarjeta constará de dos partes, parte frontal y la trasera Entonces, insertemos su desarrollo con el nombre de clase llamado front. El lado frontal en sí tendrá dos partes, izquierdo y derecho. Entonces voy a insertar aquí y otro desarrollo con clase izquierda. Por lo que el lado izquierdo constará de dos elementos. El primero va a ser una imagen. Entonces vamos a abrir elementos IMG. Entonces en atributo fuente, Indiquemos parte de la imagen. Tenemos carpeta llamada images, y tenemos que seleccionar logo dot PNG. A continuación necesitamos h para encabezar elementos. En realidad incluirá dos palabras distintas, diseño web. Voy a envolver el primero con elemento span. Vamos a abrirlo. Que inserte web. Y luego firmar a la derecha. Bien, eso es todo sobre el lado izquierdo. Vamos a abrir el desarrollo, cual va a ser el lado derecho asignado a la clase, ¿verdad? Constará de varias partes. El primero va a ser una persona. Entonces vamos a abrir el desarrollo. En realidad la parte de la persona constará de dos partes distintas. Tendremos el icono Font Awesome en el lado izquierdo. En cuanto al lado derecho, incluirá el nombre de la persona y también el puesto y la empresa. Asignemos al desarrollo nombres de clase, persona, y luego escribamos contenido. Después inserta tu icono Font Awesome, abre el elemento I con nombres de clase, FAS, FA, dash, user, tie. Entonces necesitamos abrir desarrollos. Pasemos tus elementos de ocultación H4 con texto. John Smith. Después abra el párrafo e inserte en el diseño web de TI. Bien, así que vamos a tener para partes similares en el lado derecho Sigamos adelante y dupliquemos todo el desarrollo tres veces y luego hagamos algunos cambios. Para el segundo, necesitamos aquí className, phone Luego cambie el nombre de la clase para el elemento AI también. Necesitamos aquí, otra vez el teléfono. Al minuto siguiente aquí ambos elementos para ser párrafos. Entonces, eliminemos el encabezado. Entonces. Duplica esta línea de código e inserta aquí algunos números de teléfono ficticios ¿Bien? La siguiente parte va a ser un correo electrónico. Cambiemos el nombre de la clase, ¿verdad? Correo electrónico. También necesitamos aquí diferente Fuente, Icono impresionante. Cambiemos la clase. Necesitamos aquí. Sobre, abierto. Entonces otra vez se deshace del elemento encabezado de aquí y cambia el texto del párrafo. Vamos a insertar aquí algún correo electrónico ficticio. Juan smith@gmail.com. Bien, la última parte va a ser para una dirección. Entonces cambiemos el nombre de la clase aquí mismo en reposo. Luego también cambia el nombre de la clase para los elementos de IA. Necesitamos aquí mapa Dash, marcador, ALT. Entonces otra vez, borre un elemento de encabezado. Duplicar párrafo e insertar sus siguientes textos. Calle Principal, 1234, párrafo segundo. Vamos a insertar aquí Nueva York y y. Bien, así que eso es todo sobre la parte frontal Ahora voy a crear la parte trasera, que va a ser un desarrollo muy sencillo, vamos a abrir Y asignado a su dorso de tarjeta de clase. Aquí necesitamos un solo elemento, que será una imagen así que se inserta. Y como el atributo source, vamos a indicar parte de la imagen. Bien, así que eso es todo sobre el marcado HTML. Ahora, es el momento de comenzar a peinar. Vayamos al archivo style.css. En primer lugar, voy a crear algunos estilos de reset. Vamos a deshacernos del margen predeterminado y el relleno de cada elemento. Para poder seleccionar todos los elementos, tenemos que usar un asterisco Entonces pasemos tu margen cero, n, relleno cero. A continuación, seleccionemos el elemento del cuerpo. Voy a cambiar la familia de fuentes. Vamos a usar aquí encontrado llamado Montserrat san-serif. Que cambiar el color de fondo. Hágalo gris claro usando el color C. C, C. Bien, ahora voy a trabajar en envoltorio de tarjetas, pero antes de eso, para que nuestro proceso de trabajo sea más conveniente, sería mejor si disminuyéramos el tamaño de las imágenes Voy a hacer eso desde el documento HTML. Así que sigamos adelante y asignemos a ambas imágenes con atributos con el valor cien y 50. Bien, entonces ahora las imágenes son más pequeñas y podemos seguir adelante. Vamos a seleccionar llamar al envoltorio. Voy a colocarlo perfectamente en el centro para eso, definamos su posición como absoluta. Entonces tenemos que establecer las propiedades superiores e izquierdas como 50 por ciento. Y finalmente, para centrar el elemento a la perfección, necesitamos usar transform translate. Tenemos que insertar tus valores -50 por ciento y luego otra vez -50 por ciento. Bien, así que eso es todo por ahora respecto al envoltorio de tarjetas. A continuación, voy a trabajar en la propia tarjeta. Entonces sigamos adelante y seleccionémoslo. Al principio, definamos su anchura y altura. Voy a establecer el ancho como 550 pixeles. Altura. Vamos a establecerlo como 300 píxeles. Y también cambiar el color de fondo y hacerlo blanco. Ahora, voy a empezar a peinar el anverso y creo que sería mejor si escondemos el trasero por un tiempo Hagámoslo desde el documento HTML. Voy a asignar a comer el atributo que se llama aquí. Después vuelve al archivo style.css, selecciona Tarjeta, Frontal. Definir su anchura y altura. Hagamos los dos al 100%. Bien, a continuación voy a colocar los lados izquierdo y derecho, lado a lado Para eso, usemos display flex. Y ahora voy a dividir la parte frontal usando la función de degradado lineal. Como recuerdas de la versión terminada de este proyecto, la parte frontal se divide en dos partes diferentes, y el lado derecho tiene un color diferente. Entonces para lograrlo, vamos a usar la propiedad de fondo con un degradado lineal. Vamos a insertar tus colores. El primero va a ser RGB a 55, a 55, y nuevamente a 55. En realidad es de color blanco. Según segundo uno, voy a usar RGB 308-30-8308. Ahora quiero definir la dirección de la transición de color. Entonces vamos a insertar aquí como primer argumento, cien grados. A continuación, para dividir muy bien esos dos colores, agreguemos dos de cuello blanco, el valor 40% como Paul, el segundo color Escribamos aquí cero. Entonces como se puede ver ahora la parte delantera se juega muy bien en dos partes. Sigamos adelante y comencemos a trabajar por el lado izquierdo. Vamos a seleccionarlo usando className left. En primer lugar, definamos el ancho y hagamos que sea 40 por ciento. Entonces voy a colocar el contenido perfectamente en el centro del lado izquierdo. Para eso, usemos flexbox. Entonces necesitamos cambiar la dirección del flex. Hagámoslo columna. Y luego con el fin de colocar los artículos en el centro, vamos a utilizar justificar el centro de contenidos. Y también necesitamos alinear elementos. Centro. ¿Correcto? A continuación voy a definir el tamaño de la imagen. Pero ahora desde CSS, vamos a seleccionarlo. Punto derecho a la izquierda, IMG y se sentó con nosotros 80 por ciento. Después ve al archivo index.html y deshazte de los atributos width del elemento image. Ahora bien, lo último que quiero hacer respecto al lado izquierdo es encargarme de los elementos de rumbo. Entonces sigamos adelante y lo seleccionamos derecha, puntos, izquierda, H4. Luego crea algo de espacio alrededor del encabezado usando margen. Vamos a establecerlo como diez píxeles. Después aumenta ligeramente el tamaño de la fuente. Voy a hacer 18 pixeles. Y crea algo de espacio entre letras usando el espaciado entre letras con los picos del valor uno. Bien, finalmente, voy a personalizar la primera palabra de encabezado. Seleccionemos el elemento span, punto derecho span izquierdo. Hagamos el texto en mayúsculas usando texto, transformemos. Mayúsculas y cambiar de color. Usemos tu color, 0d56, 92 . Bien, eso es. Sobre el lado izquierdo. Hemos terminado de trabajar en ello, y ahora es el momento de personalizar el lado derecho. Vamos a seleccionarlo, derecha, derecha. Después defina su ancho y hágalo 60 por ciento. Y cambiar el color del texto. Hazlo blanco. Bien, a continuación voy a seleccionar el contenido adecuado. En realidad, como recuerdas , consta de dos partes distintas. La fuente, el icono impresionante y el texto. Quiero colocarlos uno al lado del otro. Y para eso, usemos Flexbox, ¿no? Flexión de pantalla. Y también quiero alinearlos verticalmente en el centro. Para eso necesitamos una línea de pedido con Centro de Valores. Y finalmente, vamos a crear algo de espacio en la parte superior e inferior usando el margen. Vamos a asignarle valores 20 píxeles y luego cero. Bien, sigamos adelante y comencemos a diseñar la primera parte, que es una persona Vamos a seleccionarlo con nombre de clase, persona. Cambio, su color de fondo. En este caso, voy a usar color 1187 AAC. Luego crea algo de espacio dentro de la caja usando relleno. Voy a poner el relleno en la parte superior como cinco píxeles, luego cero en el lado derecho, cinco píxeles en la parte inferior y 30 píxeles en el lado izquierdo. Además, agreguemos algo de espacio en la parte superior e inferior de la caja. Usa margen con los valores 30 píxeles y cero. Y por último, voy a crear algún efecto de sombra. Usemos sombra de caja con los valores 010 píxeles, 20 píxeles. Y como el color correcto RGBA, inserta tu color negro 000, y la opacidad 0.3 Bien, ahora se ve mucho mejor. A continuación, quiero encargarme del icono Font Awesome. Así que vamos a seleccionarlo puntos correctos, contenidos correctos que yo. Al principio, definamos ancho y alto. Voy a hacer ambos 35 pixeles. Además, quiero que el icono tenga el borde. Así que vamos a asignar dos valores, dos píxeles, sólido y color blanco. Y quiero que sea redondeado. Entonces necesitamos aquí radio fronterizo con valor 50 por ciento. Como C. Por ahora, los íconos no se ven del todo bien. Quiero que se coloquen perfectamente en el centro dentro del círculo. Para eso, usemos de nuevo flexbox. Necesitamos aquí display flex. Entonces justifique el centro de contenido, y también alinee los elementos al centro. Ahora como ves ahí, luciendo bien, vamos a cambiar el color de fondo. Usa tu color 11878. Y finalmente, crear algo de espacio en el lado derecho usando margen derecho? 20 píxeles. Bien, así que paso a paso, estamos avanzando. Lo siguiente que quiero hacer es transformar el nombre de la persona en mayúsculas Así que vamos a seleccionar elementos de encabezado y asignarle texto transformar con valor mayúsculas Bien, eso es todo sobre la persona Ahora como ve, tenemos que encargarnos de una alineación del resto de las partes. Empecemos por el teléfono seleccionado y asignado a él. Relleno a la izquierda con el valor 30 píxeles. Duplicemos este código dos veces. Cambiar los nombres de las clases. Necesitamos tu dirección de correo electrónico. Y también cambiar los valores de la propiedad padding-left. Para el segundo, necesitamos 20 píxeles y para la dirección, necesitamos diez picos. Bien, ahora tenemos que empezar a trabajar en hacer un efecto 3D En primer lugar, necesitamos preparar el entorno 3D para la tarjeta y también para que incluya partes. Para eso tenemos que asignar dos propiedades envoltorio de tarjeta llamada perspectiva. Tenemos que establecerlo como mil píxeles que necesitamos para la propiedad de la tarjeta llamada transform style, que debe tener valor. Preservar 3D. Usamos esta propiedad porque también necesitamos preparar un ambiente 3D para los elementos hijos del automóvil. Ahora mismo, como la parte frontal, tenemos que iniciar también la parte trasera En primer lugar, hagamos visible la parte trasera para eso, vayamos al archivo index.html y deshagamos del atributo oculto Después vuelve al archivo style.css. Ahora, voy a rotar la tarjeta ciento 80 grados. Para eso, tenemos que usar Transformar. Después rote y n dentro del paréntesis. Tenemos que insertar 180 grados. En realidad, como ves, parte frontal sigue siendo visible y no la necesitamos. Y para que se oculte, tenemos que usar una propiedad llamada blackface visibility. Tenemos que asignarle valor llamado oculto. Como veis, se gira el logo y tenemos que arreglarlo. Para eso, seleccionemos dorso de tarjeta. Y asignado a ello transformar rotar y con el valor ciento 80 grados. Bien, después de eso, vamos a encargarnos de la posición del logo. Quiero colocar. Está perfectamente en el centro para eso. Primero, hagamos su posición como absoluta. Entonces para definir su posición de acuerdo a su elemento padre, que en este caso es una tarjeta. Tenemos que asignar a la posición relativa. Y luego definir las propiedades superiores e izquierdas para el auto de vuelta. Y ponerlos a ambos como cero. Bien, así que con el fin de centrar perfectamente logo, vamos a utilizar de nuevo Flexbox Vamos a escribir display flex. Entonces necesitamos justificar el centro de contenidos y también alinear los elementos al centro. Como veo, el logo no está centrado y sucede porque no definimos ancho y alto para la parte trasera No voy a definirlo por separado para el trasero. Subamos y agreguemos aquí justo después del frente de la tarjeta. Otro selector volvió a llamar. Luego, abajo, seleccione Frontal de Tarjeta. Porque esas dos celdas pertenecen únicamente a la parte frontal. Así que vamos a agarrarlos y pegar aquí. Ahora todo se ve bien. Bien, definamos el tamaño de una imagen desde CSS como primero, vayamos al archivo index.html y deshagamos del atributo width Luego seleccione bec, IMG, y establezca su ancho como 40% Bien, ahora es el momento de hacer que el algodón funcione al principio, volvamos a girarlo. Se deshace de esta línea de código de aquí. Quiero que se rote el auto cuando volemos sobre él. Entonces, seleccionemos envoltorio de tarjetas con hover. Después selecciona tarjeta y se le asigna, transforma rotar y con el valor 180 grados. Para un efecto suave, usemos transición con los valores transforman 1 s. Ahora, si pasamos el mouse, entonces obtendremos efecto de rotación 3D realmente agradable ¿Bien? En realidad, ya casi terminamos. Lo único que quiero hacer es crear algún efecto de sombra. Y también quiero hacer curvas, ligeramente redondeadas. Vamos a asignar a la caja de la tarjeta la sombra con los valores 015 píxeles, 60 píxeles, y el color RGBA 000 y la opacidad Entonces para hacer un redondeado, vamos a asignarle un radio de borde con valor de 15 píxeles. Como ve por ahora, parece que la parte frontal no tiene el radio fronterizo Y para arreglarlo, vamos a heredarlo para los lados frontal y posterior, aquí mismo, border-radius con el valor Bien, ahora todo se ve perfecto y en realidad hemos terminado de trabajar en ese proyecto 28. Proyecto 25 - Tarjeta 3D: En este video, vamos a crear una tarjeta con bonitos efectos 3D usando transformaciones y transiciones CSS. Este pequeño proyecto se construirá en base a HTML y CSS puros. Entonces, después de ver este video, podrás crear bonitos y geniales efectos 3D usando solo CSS puro. Bien, entonces aquí tenemos nuestra tarjeta. Consta de dos partes principales. Tenemos marco y contenido. Se colocan en el espacio 3D. Es decir, se rotan con direcciones opuestas. Y si pasamos el cursor sobre la tarjeta, entonces esas partes se girarán hacia atrás y se colocarán juntas Bien, así que eso es todo, lo que vamos a construir en código VS. Tengo dos archivos diferentes para HTML y CSS. Dentro de los elementos head, tengo dos enlaces, uno para las fuentes de Google y el segundo para el archivo CSS de estilo. Bien, sigamos adelante y comencemos a construir marcas HTML, desarrollo abierto y asignarle envoltorio de tarjetas de clase Después en su interior se abren y otros desarrollos que va a ser la propia tarjeta. Entonces necesitamos otro div para el frame. Así que se le asignó marco de clase. A continuación, tenemos que crear contenidos. Así que abre de nuevo desarrollos con contenido ClassName. Y por último, tenemos que insertar los contenidos interiores H1 elementos de encabezado, que tienes título de nombre de clase. Consistirá en dos palabras distintas. Deberían tener diferentes estilos. Entonces voy a envolver el primer elemento pi span. Vamos a abrirlo e instituir textos 3D. Y entonces necesitamos segunda palabra, efecto. Bien, eso es todo sobre HTML. Abramos el archivo style.css y comencemos a escribir algunos estilos. Primero voy a deshacerme del margen predeterminado y el relleno de cada elemento. Así que selecciónalos usando un asterisco y establece margen como cero y el relleno como cero también A continuación, tenemos que seleccionar el envoltorio de tarjetas. Voy a colocar llamado perfectamente en el centro de la página. Para eso, primero definamos ancho y alto para el envoltorio. Voy a establecer con como 100 por ciento S4 de altura. Quiero fijarlo como cien por ciento de la ventana gráfica. Entonces tenemos que asignarle 100 vh. Y luego usar flexbox para poder enviar al elemento perfectamente, necesitamos las siguientes propiedades y valores. Flexión de pantalla. Entonces para centrar los elementos horizontalmente, necesitamos justificar el centro de contenidos. Y para el centrado vertical necesitamos alinear los elementos. Centro. Entonces como puedes ver, el contenido se coloca en el sentido, Bien, Ahora tenemos que cuidar de la propia tarjeta. En primer lugar, voy a preparar el entorno 3D. Y para eso, tenemos que usar una de estas propiedades CSS llamada perspectiva. Seleccionemos tarjeta e insertemos tu perspectiva con un valor de 800 píxeles. La perspectiva nos permite definir a qué distancia se coloca el elemento del usuario. Bien, Siguiente, voy a seleccionar fotograma. Vamos a definir la frontera. A cada valor se le asigna diez píxeles sólidos, y el color 333. Y también quiero hacer su esquina ligeramente redondeada usando border-radius con el valor cinco picos Bien, entonces el borde está listo y por ahora, veamos sobre el marco A continuación, voy a empezar a trabajar en los contenidos. Así que vamos a seleccionarlo. Definir su anchura y altura. Voy a establecer el ancho como 400 pixeles. En cuanto a la altura. Vamos a establecerlo como 200 píxeles. Luego cambia el color de fondo. Voy a usar el valor RGBA aquí mismo, 255-20-1205 A continuación, voy a colocar el rubro en el centro de los contenidos para eso. Veamos de nuevo, Flexbox. Voy a agarrar esas propiedades de aquí y vamos a pegarlas para el contenido. Bien, entonces como pueden ver, el rumbo se coloca en el centro, y ahora lo voy a personalizar. Así que selecciona los elementos H1. Primero. Voy a cambiar font-family Usemos su fuente llamada cancer Rael, San Serif. Después transforma texto en mayúsculas usando texto, transforma mayúsculas y cambia de color Usa tu color 333 Bien, siguiente, voy a seleccionar elemento span, que en realidad envuelve la primera palabra de encabezado Así que encabeza derecha, span, asignado a su color de fondo, y usa tu color 333. Y también cambia el color del texto, hazlo blanco. Bien, así que nuestros elementos están personalizados y es hora de comenzar a crear efectos 3D Como recuerdas, por defecto, marco y el contenido se rotan. Así que vamos a girarlo primero marco, tenemos que girarlo de acuerdo al eje y Entonces vamos a escribir aquí transformar que usan Rotar Y e instituir -40 grados. Entonces, como puedes ver, el marco se gira y el contenido también se gira porque son los elementos hijos para el marco. En realidad necesitamos rotar el contenido pero con dirección opuesta. Y también tenemos que girarlo según y y también según eje X. Entonces tenemos que escribir transformas, luego rotar y con valor 60 grados. Y luego después de eso necesitamos rotar x con valor 20 grados. Ahora como puedes ver, el contenido se gira pero no en el espacio 3D porque en este caso, perspectiva no tiene efecto sobre los contenidos. La razón es que la perspectiva se define para tarjeta y el contenido no es el hijo directo del automóvil. Entonces, para aplicar el entorno 3D a los contenidos, debemos usar otra propiedad llamada transform style. Tenemos que asignarlo a frame, que es el padre del contenido. Y tenemos que configurarlo como preserve 3D. Entonces ahora tenemos aquí los resultados necesarios. Constante se gira en el espacio 3D. Bien, así que ahora es el momento de crear un efecto de libración al flotar. Necesitamos dar posiciones predeterminadas tanto de marco como de contenido. Entonces, seleccionemos una tarjeta con hover. Después selecciona fotograma y pasa aquí, Transformar, Rotar Y con valor cero. A continuación, seleccione los contenidos, derecho, nuevamente, el contenido de la tarjeta hover Tenemos que pasar tu transformación. Nuevamente, gire y con cero, y luego gire x con valor cero. Entonces ahora si flotamos, entonces los elementos serán girados pero sin ningún efecto porque necesitamos una transición para hacer rotaciones Así que vamos a asignar a la transición de fotogramas con valores todos y 0.4 s. luego tomar esta línea de código y pegarla para el contenido también. Ahora, si volvemos a flotar, entonces obtendremos un bonito efecto 3D Lo último que quiero hacer es hacer que las esquinas de los contenidos sean ligeramente redondeadas, y luego lo retiraremos cuando coloquemos el cursor sobre la tarjeta Así que vamos a asignar dos contenidos para el radio con valor cinco píxeles. Y luego abajo, inserte border-radius con valor cero Bien, así que si pasamos el cursor sobre la tarjeta, entonces todo funcionará perfectamente 29. Proyecto 26 - Caja de control de CSS personalizada: Hola y bienvenidos a nuestro próximo video de YouTube. En este tutorial, vamos a estar construyendo una casilla de verificación CSS personalizada En la mayoría de los casos, puede encontrar casillas de verificación predeterminadas en diferentes sitios web Pero después de ver este video, podrás crear una casilla de verificación realmente bonita y moderna Aquí, como pueden ver, tenemos una caja y si hago clic en ella, entonces se comprobará con algunos efectos agradables. El tema de este tutorial es crear solo esta casilla de verificación personalizada. Entonces por eso no tengo aquí ningún otro contenido. Además, decidí crear una casilla de verificación con el tamaño grande para una mejor visibilidad. Pero claro que puedes hacerlo más pequeño para tus propios proyectos. Bien, sigamos adelante y comencemos a construir este pequeño proyecto. En código VS. Tengo dos archivos diferentes, index.html y style.css. En el archivo index.html, he preparado una estructura básica de documento HTML. He vinculado aquí archivos HTML y CSS. Sigamos adelante y comencemos a crear el marcado HTML. Vamos a abrir el desarrollo. Debe ser un envoltorio para casilla de verificación. Así que vamos a asignarle el envoltorio de casilla de verificación de clase. Dentro de ese desarrollo necesitamos pasar dos elementos, input y label. Así que vamos a abrir los elementos de entrada. Hagamos su tipo como chatbox. Luego crea etiqueta. siguiente que tenemos que hacer es vincular elementos de etiqueta y entrada para crear un evento click. Para ello, tenemos que asignar a un atributo ID de entrada. Y los valores de id y cuatro atributos deben ser los mismos. Pasemos tu cheque. Después asignado al atributo id del elemento de entrada con una comprobación de valor. Ahora bien, para demostrar que los elementos de etiqueta y entrada están enlazados, voy a pasarte algo de contenido, digamos check. Entonces, si hago clic en esta palabra entonces se marcará la casilla de verificación. Entonces veamos qué podemos lograr por ID y cuatro atributos y hace cada semana, lo que nos ayudará a crear cubeta limpia Vamos a deshacernos de esta palabra desde aquí. Lo último que quiero hacer dentro del documento HTML es asignar a label class name, checkmark Bien, vamos al archivo style.css y comencemos a escribir algunos estilos. No tenemos aquí muchos elementos HTML, pero de todos modos, voy a crear algunos estilos de reset. Seleccionemos cada elemento usando asterisco. Y luego establecer el margen y el relleno como cero. A continuación, seleccione el envoltorio de casilla de verificación. En realidad voy a colocar chatbox perfectamente en el centro de la página Para eso, voy a usar una de las técnicas. Quiero decir, centrar elementos con la ayuda de posiciones y transformar Entonces tenemos que escribir aquí posición, absoluta. Entonces necesitamos establecer las propiedades superiores e izquierdas tanto como 50 por ciento. Y luego para centrar el elemento perfectamente, tenemos que usar transform translate. Deberíamos tener dos valores, -50 por ciento y nuevamente -50% Bien, así como puedes ver, ahora la casilla de verificación está perfectamente centrada en la página En realidad, no voy a personalizar esta casilla de verificación. Eventualmente debería ocultarse. Vamos a crear una caja usando un elemento label. Este elemento de entrada solo nos ayudará a crear un evento click. Así que sigamos adelante y seleccionemos la etiqueta con la marca de verificación del nombre de la clase Como sabes en general, el elemento label es un elemento inline. Y si queremos aplicar al elemento inline width y height que primero, debemos transformarlo ya sea en bloque inline o elemento de nivel de bloque. Así que vamos a escribir tu bloque de visualización. Después establece ancho y alto tanto como dos píxeles. Y también cambiar el color de fondo. Hagámoslo gris claro usando D, D, D. Entonces como pueden ver, tenemos aquí cuadro, Hagamos sus esquinas ligeramente redondeadas usando border-radius Con valor diez picos. Bien, eso es sentarse, se crea la caja y ahora tenemos que encargarnos de las marcas de verificación firmar Al principio, sigamos adelante y creémoslo usando After pseudo elemento Y luego después de eso, nos encargaremos del evento click. Así que vamos a seleccionar la marca de verificación con después de pseudo elementos En primer lugar, voy a cambiar de fondo de elementos de etiqueta que estoy haciendo es sólo por un tiempo Eventualmente cambiaremos el color de fondo al hacer clic. Entonces cambiemos el color de fondo para la etiqueta aquí mismo, 08b b68 Entonces comencemos a trabajar en después pseudo elementos como contenido primero definido y lo hagamos vacío En realidad el signo de marcas de verificación debe ser creado por bordes Al principio, definamos una posición como absoluta. Y para posicionar los elementos de acuerdo a su elemento padre, tenemos que asignar a su posición padre relativa. A continuación, definamos ancho y alto. Establezca el ancho como 25 píxeles. En cuanto a la altura, vamos a asignarle 45 pixeles. Ahora con el fin de hacer visibles los elementos y de hecho con el fin de crear un signo de marca de verificación, vamos a usar bordes Voy a definir fronteras para dos sitios diferentes, para derechos y para botella. Así que escribamos aquí frontera, derecha, y asignemos valores de verdad, cinco píxeles, sólidos, y el color blanco. Que duplican esta línea de código y cambian a la derecha a la parte inferior. Ahora como puedes ver, el elemento es factible, pero como invitado, tenemos que cuidar su posición. Vamos a colocarlo en el centro, y también necesitamos girarlo para que se vea como señal de marcas de verificación Así que definamos la posición superior como 40%. Entonces necesitamos que nos quede el 50 por ciento. Entonces usa de nuevo transformar, traducir con valores -50 por ciento Y nuevamente -50 por ciento. ¿Bien? Ahora lo único que hay que hacer es rotar elementos según el eje z Y entonces nos va a necesitar un resultado. Entonces vamos a escribir rotar Z e insertar aquí por dos grados. Ahora puedes ver que tenemos aquí las marcas de verificación firman, y ahora es el momento de que funcione En primer lugar, cambiemos el color de fondo en la camarilla. Para eso, volvamos aquí. Color de fondo anterior, gris claro. Entonces para crear un evento click, voy a usar pseudo-clase llamada checked Nos permite definir estilos y aplicarlos al elemento cuando se marca la casilla de verificación Así que vamos a seleccionar el elemento de entrada con ID, comprobar. A continuación, agregue aquí pseudo-clase llamada marcada. Luego tenemos que seleccionar los elementos de la etiqueta. Como sabes, se coloca justo después de los elementos de entrada en el archivo index.html. Y para seleccionar etiqueta, voy a usar uno de los combinadores CSS llamado selector general de hermanos, que se expresa por hasta el signo Y ahora necesitamos el nombre de clase de los elementos, ¿verdad? Marca de verificación Pasemos tu color de fondo con un valor 0868. Bien, así que si hago clic en la casilla, entonces se cambiará el color de fondo. Hagamos que esto afecte al motor usando la transición. Vamos a asignar valores de verdad, fondo, color y duración, 0.4 s. así que ahora se ve mucho mejor y en realidad es el momento de trabajar en el signo de marcas de verificación Por defecto, voy a hacerlo oculto. Hagámoslo usando opacidad cero. Y ahora deberíamos exhibirlo. Cuando marcamos la casilla de verificación, lo vamos a hacer usando la misma técnica que usamos hace apenas un minuto Entonces vamos a agarrar esto, seleccionarlo de aquí. Luego agregamos después de pseudo elementos porque debemos mostrar las marcas de verificación firmar Y ahora inserta tu opacidad uno. Y también usa la transición para hacer afectaciones motoras asignadas a todo y 0.4 s. así que ahora si hago clic, entonces todo va a funcionar bien. Y en realidad ya tenemos aquí bonitos efectos. La casilla de verificación está funcionando. Antes de terminar este tutorial, quiero agregar a los chequeos, algunos otros datos. Por defecto, voy a hacer que las marcas de verificación firmen más grandes. Y luego onclick, le daremos su tamaño predeterminado. Y esto eventualmente se verá bastante bien. Así que sigamos adelante y agreguemos para transformar la función de propiedad llamada scale, que nos permite administrar el tamaño de un elemento que es inseguro diez Entonces significa que acabamos de hacer elementos diez veces más grandes de lo que era antes. Y ahora onclick tuvimos que hacerlo de nuevo más pequeño. Así que voy a agarrar toda esta línea de código. Necesitamos todas estas funciones porque si solo usamos Transformar Escala, entonces esas dos funciones, me refiero a traducir y rotar, se sobrescribirán y romperá la posición del lado de la marca de verificación Entonces cambiemos el valor de la escala, hagámoslo uno. Y ahora se puede ver que tenemos aquí muy bonito efecto. Bien, ya casi terminamos. Lo único que tenemos que hacer es ocultar los elementos de entrada. Y voy a hacer eso usando el atributo HTML llamado hidden. Así que vamos a asignarlo a elementos de entrada. Bien, así que ya terminamos. Todo funciona a la perfección y nuestro pequeño proyecto está terminado 30. Proyecto 27 - Menú de Hamburguesas: En este video, vamos a construir el menú de hamburguesas con algunos efectos agradables Este proyecto se construirá en base a HTML, CSS y poco de JavaScript. Entonces como puedes ver, tenemos aquí una landing page con imagen de fondo a pantalla completa Y en la esquina superior derecha se coloca el icono del menú de hamburguesa Si hago clic en él, entonces el icono se transformará en x. Y ahora parte se mostrará desde el lado derecho. Aquí tenemos un par de elementos de navegación y si coloco el cursor sobre ellos, entonces obtendremos buenos efectos de hover En este video, aprenderás sobre cómo crear todas estas cosas. Sigamos adelante y comencemos a construir nuestro proyecto. En código VS. Tengo un par de archivos para HTML, para CSS, y para JavaScript. Y también tenemos aquí carpeta llamada imágenes en que tenemos una imagen para fondo de página de préstamo. Puedes descargar archivos de inicio desde el enlace de la descripción. Bien, sigamos adelante y abramos el archivo index.html. He preparado la estructura básica del documento HTML. Dentro de los elementos de cabeza, tengo dos eslabones. Una para las fuentes de Google, voy a usar una fuente llamada doses, y otra para el archivo CSS. Además de eso, he insertado aquí etiqueta script con el fin de vincular el archivo JavaScript. Bien, comencemos a construir el marcado HTML, desarrollos abiertos, que va a ser un contenedor Por lo que se le asigna contenedor de clase. Entonces dentro del contenedor voy a abrir elementos que envolverán todo el contenido de navbar Vamos a asignarle clase navbar. Después dentro de él al principio voy a crear un ícono de menú de hamburguesas Así desarrollo abierto y se le asignó un nombre de clase, menú de hamburguesas Entonces dentro de esos elementos div, voy a insertar tres elementos div para tres líneas de un icono. Vamos a asignar a su nombre de clase para la línea de estilo común. Y también necesitamos aquí otro nombre de clúster para el estilo individual. Línea derecha uno. Después duplique esta línea dos veces y cambie los nombres de las clases. Necesitamos la línea dos, la línea tres. Muy bien, eso es todo sobre Menu icon por ahora, no es factible porque solo tenemos elementos div vacíos sin ningún estilo A continuación, voy a crear navegación. Estará representado por elementos UL. Vamos a asignarle clase no menos importante. Después inserte en ella elementos LI. Debe tener ítem de clase. Y por último, necesitamos tus elementos de enlace. Vamos a asignarle el nombre de la clase nav link, y también insertemos su primer elemento. En general, voy a tener siete elementos de navegación. Así que vamos a duplicarlo seis veces y luego cambiar rápidamente el contenido aquí mismo sobre nosotros. Esa noticia. El siguiente va a ser Galería que eventos. Precios. Y para el último, inserta tu contenido. Bien, así que eso es todo sobre HTML. Es hora de empezar a peinar. Vamos al archivo style.css. Al principio voy a crear algunos estilos de reset. Vamos a deshacernos del margen predeterminado y el relleno de cada elemento. Selecciónelos usando asterisco. Y luego pasa tu margen cero y relleno cero también. Entonces voy a cambiar la familia de fuentes por elemento body. Así que vamos a seleccionarlo. Y luego inserte aquí dosis font-family, san-serif. A continuación, vamos a encargarnos del contenedor. Establezca su ancho y alto como un ancho. Escribamos aquí 100 por ciento. En cuanto a la altura. Voy a fijarlo como el 100 por ciento de la ventana gráfica. Así que bien, 100 pH que como fondo. Voy a poner una imagen. Así fondo derecho de lo que necesitamos aquí, gradiente lineal. Voy a usar tres colores diferentes. El primero va a ser RGBA 000 y la opacidad 0.4. A continuación, escribamos RGBA 14848, nuevamente 48 y opacidad Y luego insertar RGBA 167-60-7607 y opacidad 0.4. Después dentro de URL indica parte de las imágenes de la imagen y selecciona la imagen llamada bg dot JPG como la posición de fondo. Necesitamos Centro y también pasar aquí, no repita. Y por último, voy a usar la propiedad de tamaño de fondo con la cobertura de valor. Bien, así que la página de destino está lista. Tenemos aquí imagen de fondo a pantalla completa. Y ahora me voy a llevar aquí del menú de hamburguesas Como ya saben, constará de tres líneas y deberá colocarse en la esquina superior derecha de la página Al principio, seleccionemos el desarrollo rápido, que tiene un className, menú de hamburguesas Definamos su anchura y altura. Voy a configurar con 35 pixeles. En cuanto a la altura, vamos a asignarle 30 pixeles. Por ahora, el icono sigue sin ser visible. Y para arreglarlo, vamos a asignarle algún fondo temporal, digamos rojo. Bien, entonces ahora el icono que se muestra por defecto se coloca en la esquina superior izquierda. Pero como dije, voy a colocarlo en la esquina superior derecha de la página. Para eso, definamos esta posición como fija. Y luego necesitamos la posición superior, establecida como 50 píxeles y la derecha como 50 píxeles. Entonces ahora puedo desplazarme en la esquina superior derecha. Y por último, voy a cambiar el cursor. Hagámoslo señalar. Bien, por ahora con el elemento div padre, ya terminamos. Es hora de trabajar en las luces. Sigamos adelante y seleccionarlos usando la línea de nombre de clase común. Después fijó su ancho como 100 por ciento. Significa que la línea ocupará todo el ancho de su elemento padre, que es de 35 píxeles. A continuación, voy a definir la altura. Hagámoslo tres píxeles y cambiemos también el color de fondo. Ves tu color chocolate. Bien, Ahora las líneas son visibles, pero están pegadas entre sí y tenemos que separarlas. Para lograrlo, voy a usar Flexbox. Hagamos el menú Hamburger flex container. Para eso necesitamos display flex. Luego cambia la dirección del flex. Tenemos que colocar líneas como columna. Entonces necesitamos flexión dirección columna. Y por último, para hacer algún espacio entre ellos, utilizar justificar los contenidos. Los valores caminan alrededor. Bien, entonces ahora las líneas están separadas y en realidad podemos deshacernos de ese fondo rojo. Bien, entonces el ícono de Menú ya está creado y antes de que lo hagamos funcionar, voy a personalizar la barra de navegación Deberíamos colocarlo del lado derecho. Así que sigamos adelante y seleccionemos elemento nav con nombre de clase navbar Al principio, definamos su anchura y altura. Voy a establecer su ancho como 300 pixeles. En cuanto a la altura, hagámosla al 100 por ciento. Luego cambia el color de fondo. Usemos tu color 26262. Bien, entonces para poder colocar ahora barra en el lado derecho, definamos esta posición como fija. Y luego hacer que las propiedades superior y derecha sean ambas cero. Bien, entonces navbar se posiciona de la manera correcta. Ahora voy a encargarme de la posición de los elementos de navegación. Quiero colocarlos perfectamente en el centro dentro de navbar Y para eso, usemos Flexbox aquí mismo. Flexión de pantalla. Que para centrar los elementos horizontalmente, use justify-content Centro. S para centrado vertical Use alinear elementos, centrar. Bien, entonces los artículos se colocan en el centro. Y lo último que quiero hacer respecto a navbar es personalizar su forma Y lo voy a hacer usando radio fronterizo. En realidad, esta propiedad puede tomar cuatro valores diferentes apropiados a cuatro esquinas. Estoy en esquina superior izquierda, arriba derecha, abajo derecha e inferior izquierda Así que somos capaces de definir diferentes radios de borde, cuatro columnas diferentes. En este caso, voy a personalizar las esquinas superior izquierda e inferior izquierda. En cuanto al resto de las esquinas, no las vamos a tocar. Entonces como valor de border-radius de la esquina superior izquierda, voy a insertar aquí el 20 por ciento Entonces, como decíamos, las esquinas superior derecha e inferior derecha no se cambiarán. Entonces necesitamos insertar aquí ceros dos veces. Y para la esquina inferior izquierda voy a usar 60%. Bien, entonces la forma de la barra de navegación está personalizada y ahora voy a darle estilo a los elementos de navegación Sigamos adelante y seleccionemos elementos UL. Tiene nombre de clase. No menos importante. Voy a colocar texto en el lado derecho. Entonces usemos texto alinear a la derecha. A continuación, seleccionemos elementos LI. Tiene nombre de clase, no artículo. Primero, deshagamos de las viñetas predeterminadas usando ninguno estilo lista Después crea algo de espacio usando margen. 25 semanas. Bien, ahora tenemos que seleccionar los elementos de enlace, que tiene el nombre de la clase nav link Vamos a deshacernos de los estilos predeterminados. Usando texto-decoración. Ninguno. Después aumentó el tamaño de la fuente, lo hacen 22 pixeles. Cambiar de color. Ves tu color E. Además, voy a hacer que la fuente sea más clara usando font-weight 300. Luego crea algo de espacio entre letras usando el espaciado entre letras. Un píxel. Y finalmente hacer texto en mayúscula usando transformación de texto Mayúscula. Bien, eso es todo sobre los elementos de navegación Como recuerdas del proyecto terminado, vamos a crear algunos efectos de hover el cursor, debemos mostrar líneas en la parte superior e inferior de los artículos Se mostrará con una transición suave. Y desde los sentidos opuestos. En realidad vamos a crear esas líneas usando después y antes pseudo elementos Ambos tendrán algunos estilos comunes. Así que sigamos adelante y seleccionemos ambos pseudo elementos, derecho, enlace de navegación antes Después duplica esta línea y cambia antes y después. Entonces primero tenemos que definir los contenidos como vacíos. A continuación, voy a definir la anchura y la altura. Vamos a establecer con nosotros el 100 por ciento. Después haz la altura a píxeles y también cambia el color de fondo. Ves tu color chocolate. Por ahora, las líneas no son visibles porque son elementos en línea y por lo tanto no se aplican a la anchura y la altura. Entonces, si definimos su posición como absoluta, y luego si asignamos a los elementos padre, que no es la posición de enlace relativa, entonces se mostrarán ambas líneas. De un vistazo. Vemos aquí solo una línea, pero de hecho, ambas líneas se colocan una al lado Bien, a continuación voy a definir una posición izquierda para ambos elementos como cero. Ahora ambas líneas están tomando los mismos spots y para poder separarlas, tenemos que definir una posición inferior para después de pseudo elementos y tenemos que hacerla cero Así que vamos a copiar este selector y asignarle abajo cero. Entonces ahora ambas líneas están separadas. Como saben, por defecto, posición superior se establece como cero. Entonces, si no lo definimos manualmente, eso no va a ser un problema. Pero de todos modos, voy a definirlo. Así que vamos a duplicar este código. Luego cambia después, en antes. Y en lugar de abajo, derecha, arriba. Bien, lo último que queremos aquí es crear algo de relleno porque la línea de fondo está demasiado cerca del ítem Así que vamos a asignar a nav link padding en la parte superior e inferior derecha tres píxeles y luego cero en los lados izquierdo y derecho. Bien, eso es todo sobre las líneas que ahora tienen que crear un efecto hover Por defecto, voy a ocultar esas líneas. Y cuando pasemos el cursor sobre los elementos, esas líneas se mostrarán suavemente desde las direcciones opuestas Para ocultar líneas, voy a usar Transform. Después escala x. tenemos que ponerla como cero. Entonces ahora al flotar, tenemos que aumentar la escala y hacerla una Así que sigamos adelante y seleccionemos el enlace de navegación con hover. Después agrega aquí antes. Duplica este selector y cambia antes y después. Y luego inserta tu Transformar, Escala x con el argumento uno. Y por último, para que el efecto sea más inteligente, vamos a usar la transformación de transición 0.5 s. bien, así que si pasamos el cursor sobre los elementos se mostrarán las líneas Pero como puedes ver, por defecto, empiezan a aparecer desde el centro. Sucede porque la propiedad de origen de transformación se establece como sensor por defecto. Entonces tenemos que cambiarlo para ambas líneas. Vamos a asignar a después de pseudo elementos, transformar origen. Hacerlo bien. Después copia este código y pegarlo para antes de pseudo elementos Y en vez de derecha, vamos a insertar aquí a la izquierda. Si pasamos el cursor sobre los artículos, entonces todo funcionará perfectamente Tenemos aquí un bonito efecto hover. Bien, entonces con la navegación, ya terminamos. Siguiente. Eso que tenemos que hacer es hacer que el menú Hamburguesa funcione. En primer lugar, voy a transformar icono de menú en x. Para ello tenemos que cambiar posiciones para primera y tercera líneas. En cuanto al segundo, debe calentarse. Así que sigamos adelante y seleccionemos la línea uno. Tenemos que rotar la línea uno por 45 grados según el eje z Para ser más precisos, para la línea uno, tenemos que usar Rotar Z -45 grados. Duplicemos este código. Cambiar el nombre de la clase a la derecha, línea tres. Y también deshazte del signo menos de aquí. Como decíamos, tenemos que ocultar la línea dos. Así que vamos a seleccionarlo y usar tu opacidad cero. Entonces como puedes ver, las líneas se rotan, pero aquí no tenemos ninguna x. Tenemos que encargarnos de las posiciones de las líneas. Para eso. Voy a añadir aquí traducir. Entonces como el valor de la dirección x, ¿verdad? Menos ocho píxeles, S4, eje y. Tenemos que pasar tus seis semanas. Vamos a copiarlo Y pegar cuatro líneas tres En lugar de seis píxeles necesitamos aquí solo menos seis picos. Ahora se considera. El problema está arreglado y tenemos aquí x. En realidad este no es el estado predeterminado del icono. Tenemos que hacerlo x cuando hacemos clic en él. Para lograrlo, voy a usar un poco de JavaScript. Pero antes de escribir algo de JavaScript, voy a añadir dos líneas. Nuevo nombre de clase, llamémoslo cambio. Después agregaremos esta clase dos navbar usando JavaScript. Y todo esto sucederá cuando hagamos clic en el icono. Vamos al archivo script.js y antes que nada, creamos una nueva variable, llamémosla icono de menú. Y luego seleccionar los desarrollos que tiene un menú de hamburguesas con nombre de clase Para eso necesitamos escribir documentos, puntos, consulta, selector, y pasar tu nombre de clase menú hamburguesa Luego, adjunta el oyente de eventos al ícono de Menú, derecha, ícono de menú, punto, agrega oyente de eventos Como primer argumento tenemos que pasar tu nombre de eventos, que es camarilla Que necesitamos pasar tu función, que va a ser una función de flecha. Ahora tenemos que agregar dos nuevas clases que se cambian como primero, vamos a crear una nueva variable, llamarla barra de navegación. Debe ser igual a documentos, puntos, QuerySelector. Vamos a insertar tu nombre de clúster navbar. Entonces dentro de la función, derecha, barra de navegación y propiedad más fácil llamada lista de clases Ahora puedes pensar que tenemos que usar tu método agrega, pero en este caso no va a funcionar porque cuando hacemos clic en el icono, el cambio de clase debería agregarse a Napa. Pero en Siguiente clic, debería ser eliminado. Y para lograrlo, en lugar de agregar, tenemos que usar el método llamado Toggle. Vamos a insertar el cambio de nombre de tu clase. Entonces, si hacemos clic en el icono, entonces se transformará en x. Y luego en el siguiente clic, obtendrá su estado predeterminado. Para que esto afecte al motor, volvamos al archivo style.css y asignemos a la transición de línea con valores 0.8 s. así que ahora un hecho se volvió más inteligente, pero creo que podemos hacerlo aún más agradable En lugar de rotar las líneas solo por 45 grados, podemos dejar que hagan una rotación completa, rotación de 360 grados y luego vuelvan a girar 45 grados. Entonces como los valores tenemos que insertar aquí, suma de 360.45, que eventualmente es 405 grados Entonces ahora estás de acuerdo en que se ve mucho mejor. Bien, así que ya casi estamos ahí. La otra cosa que hay que hacer es ocultar suficiente puerto por defecto, mostrarlo onClick Para ello, cambiemos el valor de la posición correcta y hagamos que sea -300 píxeles Entonces ahora Navbar está oculto. Para moverlo de lado derecho a izquierdo, voy a utilizar de nuevo el cambio de clase. Vamos a asignarle, derecho, con valor cero. Ahora, si hacemos clic, se mostrará Napa, pero como invitado, para que el efecto sea más agradable, tenemos que usar transición con los valores ¿verdad? 0.8 s. y además, voy a usar tu función llamada cubic Bezier, que nos permite crear una transición personalizada En este caso, quiero que el efecto comience un poco más lento y termine más rápido. Para eso, voy a pasar tus valores 100.1. Entonces ahora podemos decir que todo funciona a la perfección. Tenemos aquí una barra de navegación de aspecto agradable y moderno con algunos efectos geniales 31. Proyecto 28 - Tarjetas de precios: En este tutorial, te voy a mostrar cómo construir unas bonitas cartas modernas con algunos efectos geniales. Entonces como puedes ver, tenemos aquí tres tarjetas similares con diferentes paquetes de precios y condiciones. Si vuelo el cursor sobre ellos, entonces la escala de carros se incrementará sin problemas Se harán más grandes. Y también si hago navegador más pequeño que las tarjetas serán envueltas. Por lo que el proyecto responderá en diferentes tamaños de pantalla. Bien. Así que aquí en el código VS, tengo un par de archivos para HTML y para CSS. Y también tenemos una carpeta en la que tengo una imagen. En el archivo index.html, he creado la estructura básica del documento HTML. Dentro del elemento cabeza, tenemos un par de eslabones. El primero es para las fuentes de Google. Voy a usar fuentes llamadas Josephine Sans, y Montserrat Entonces he pasado aquí un enlace para los iconos Font Awesome. Y por último, tengo un enlace para el archivo style.css. Bien, sigamos adelante y comencemos a construir el marcado HTML. Voy a crear elementos div, que va a ser un contenedor. Incluirá todo el contenido. Así que vamos a asignarle contenedor de clase. A continuación necesitamos otros elementos div que deberían ser un wrapper para tarjetas. Así asignado a ella envoltorio de tarjetas de nombre de clase. Y ahora tenemos que crear la propia tarjeta. Abramos otro desarrollo con tarjeta de nombre de clase. En realidad la tarjeta constará de tres partes principales. Tendremos encabezado de tarjeta, cuerpo de tarjeta y pie de página de tarjeta. Entonces, insertemos sus elementos div, que deberían ser un encabezado de tarjeta. Vamos a asignar a su cabecera de tarjeta de nombre de clase. Consistirá en dos elementos de encabezamiento. Primero, describiremos qué tipo de paquete tenemos. Estoy en libre o estándar o premium. En cuanto al segundo, debería ser por el precio del paquete. Así que vamos a abrir h3 elemento encabezado e insertar sus textos gratis A continuación necesitamos elementos de encabezado H1 con textos, dólar, signo y cero. Bien, eso es todo sobre el encabezado de la tarjeta. A continuación, necesitamos un cuerpo de tarjeta. Representará qué tipo de características tenemos en caso del paquete gratuito. Así que vamos a crear desarrollo y asignado a su cuerpo de tarjeta de nombre de clase. Las características estarán representadas por al menos. Por lo tanto eso son elementos UL abiertos. Insertándolo LI. Así que tendremos aquí Fuente, Iconos impresionantes con algunos textos. En caso de paquete gratuito, solo estarán disponibles dos funciones y el resto de ellas no lo estarán. Por lo que las dos primeras características tendrán iconos de verificación, y el resto de ellas deberán tener x iguales. Vamos a abrir aquí I elementos y asignarle clase F, a, S, FA dash check. Eso instituyó algunos textos después del cierre, etiqueta. Algunas características de texto. En general, voy a tener seis características. Entonces vamos a duplicar esta línea cinco veces. Y entonces lo único que tuvimos que hacer aquí es cambiar los nombres de las clases para el final, para los iconos Font Awesome. En lugar del cheque, necesitamos aquí para escribir tiempos. Bien, así que eso es todo sobre el cuerpo de la tarjeta. Como dijimos, también necesitamos crear el pie de página de la tarjeta. Incluirá solo un botón. Entonces vamos a abrir desarrollos y se le asignó la clase de filtro de carbohidratos Después dentro del elemento div botón Create, que debería tener type button y el texto subscribe. Bien, entonces hemos creado la primera tarjeta. En general, tendremos tres de ellos. Así que sigamos adelante y dupliquemos la tarjeta entera dos veces. Entonces haz algunos cambios. En lugar de tres, necesitamos aquí estándar S para el segundo elemento de encabezado en lugar de cero, ¿verdad? Digamos 49 y slash, luego abrir elementos span e instituir un mes Entonces, en caso de un paquete estándar, voy a poner a disposición cuatro funciones. Entonces cambiemos los nombres de las clases aquí. Tenemos que verificar en vez de tiempos. Entonces la segunda tarjeta está lista. Hagamos algunos cambios para el tercero, necesitamos aquí, premium que 99, open span element e insert month. Por último, voy a poner a disposición todas las funciones. Entonces, para las últimas cuatro características, necesitamos el nombre de la clase. Verifique en lugar de veces Bien, eso es todo sobre el marcado HTML Hemos creado estructuras para las tres tarjetas. Ahora es el momento de empezar a peinarlos. Vamos al archivo style.css y antes que nada, creamos algunos estilos de reinicio. Voy a seleccionar cada elemento usando asteriscos. Luego establece el margen y el relleno como cero. Y también usar la propiedad de tamaño de caja y se le asigna border-box Bien, entonces el primer elemento que quiero cuidar de su contenedor Así que vamos a seleccionarlo y definir su ancho y alto. Voy a establecer el ancho como 100% S bar alto. Vamos a establecerlo como el 100 por ciento de la pupila, y también cambiemos el color de fondo Vamos a asignarle color d, d, d. bien, después de eso, voy a seleccionar envoltorio de tarjetas. Entonces quiero envoltorio para ser colocado en el centro horizontalmente. Y también voy a alinear cartas seguidas. Para hacer eso al principio, definamos el ancho como 90%. Entonces para centrar envoltorio de tarjetas dentro del contenedor, necesitamos margen, nuestra fila. A continuación, definamos la altura y fijémosla como cien por ciento. Ahora, voy a alinear las tarjetas horizontalmente en fila, y también quiero colocarlas verticalmente en el centro usando flexbox Entonces necesitamos aquí display flex. Ahora como puedes ver, las cartas se colocan en fila. Vamos a crear algo de espacio entre ellos. Y para eso, vamos a usar justificar contenido con espacio de valor alrededor. Por último, para enviarles verticalmente, usa una línea de pedido y ponla como centro. Bien, así que eso es todo sobre la alineación de las tarjetas. Ahora tenemos que empezar a peinar las células del cartílago. Así que sigamos adelante y seleccionemos una tarjeta. Adversas. Vamos a establecer el ancho como 300 píxeles. Entonces voy a cambiar de fondo. En realidad, quiero establecer una imagen como fondo. Primero, usemos aquí gradiente lineal y pasemos aquí algunos valores RGBA Necesitamos color negro con opacidad 0.5. Entonces otra vez pasar el valor RGBA con el mismo color negro, pero con opacidad 0.6 A continuación tenemos que indicar parte de la imagen. Así Insight URL, así es, imágenes y seleccione Imagen bg punto JPG. Después como una posición de imagen a la derecha Centro. También necesitamos aquí no repetir. Y finalmente, usemos la propiedad de tamaño de fondo con la cobertura de valor. Entonces como pueden ver, tenemos aquí imagen como fondo de la tarjeta, pero por ahora, la corriente misma se ve realmente fea. A continuación, cambiemos el color de los contenidos para que sea visible. Pongámoslo como blanco. Y luego simplemente centrar el texto dentro de la tarjeta usando text-align Bien, pasemos a diseñar elementos individuales dentro de la tarjeta La primera parte que quiero darle estilo es el encabezado de la tarjeta, que consta de dos elementos de encabezado. Al principio, seleccionemos el propio encabezado de la tarjeta y creemos algo de espacio en la parte inferior usando el margen inferior con valor de 40 píxeles. A continuación, voy a seleccionar los primeros elementos de encabezado. Así que tenemos que escribir aquí cabecera de la tarjeta. Después h3. Vamos a cambiar la familia de fuentes. Voy a usar su fuente llamada Josephine Sans. Sans-serif. Eso incrementó el tamaño de la fuente. Voy a configurarlo como 30 pixeles. Y además, voy a hacer que la fuente sea más ligera usando font-weight con valor 300 Bien, así que el primer rubro ya se ve bien, pero quiero agregarle algunos estilos más Cambiemos su color. En este caso, voy a usar color llamado chocolate. Entonces crea algo de espacio alrededor del encabezado. Usar margen con un valor de 30 píxeles. Después de eso, quiero crear un borde en la parte inferior del encabezado. Entonces para eso, usemos un fondo de borde. Entonces, aquí mismo valora un surco de píxel y el color blanco Así que como pueden ver, tenemos aquí borde en la parte inferior, pero creo que está demasiado cerca de encabezarse. Y para arreglar eso, vamos a usar únicamente padding con valor diez pixeles, con valor diez picos. Bien, eso es todo sobre el primer encabezamiento Elementos. Sigamos adelante y diseñemos el segundo. Selecciónalo encabezado de tarjeta derecho, H1. En realidad, para H1, necesitamos usar esas tres propiedades. Entonces voy a agarrarlos de aquí y luego simplemente cambiar los valores. Como familia de fuentes I, voy a utilizar Montserrat A continuación, establezca el tamaño de fuente como 60 píxeles. En cuanto al peso de la fuente, dejémoslo como está. Bien, Entonces el segundo elemento de encabezado está estilizado, pero necesitamos escuchar para hacer algunos cambios Quiero hacer un letrero de $1 más pequeño, y además quiero colocarlo un poco arriba. Para hacer eso, voy a usar la etiqueta HTML llamada superscript Entonces, sigamos adelante y envolvamos signos de dólar para todas las tarjetas por etiqueta superíndice Entonces, como ves, el signo del dólar se coloca un poco arriba, pero es demasiado grande. Así que vamos a disminuir su tamaño de fuente. Seleccione el encabezado correcto de la tarjeta y la sopa, y establezca el tamaño de fuente como 35 píxeles. Bien, así que sentémonos sobre el signo del dólar. Lo único que quiero hacer respecto a esta parte es disminuir el tamaño de las matemáticas porque como pueden ver, es bastante más grande. Como recuerdas, tenemos un elemento envuelto esta palabra por span. Vamos a seguir adelante y seleccionarlo encabezado de tarjeta derecho, span. Y luego definir el tamaño de fuente y convertirlo en 18 pixeles. Hemos terminado de trabajar en el encabezado de tarjeta. Ambos encabezados están estilizados y ahora tenemos que seguir adelante y cuidar el cuerpo de la tarjeta Dentro del cuerpo de la tarjeta tenemos listas de características con Font, iconos impresionantes y algunos textos. adelante y seleccionemos ese primer cuerpo de carta y creemos algo de espacio en la parte inferior usando margen inferior, 60 píxeles. A continuación, voy a tomar aquí de los elementos LI, que en realidad envuelve icono y texto. Así que vamos a seleccionarlo, derecho, tallado Baldry. I. En primer lugar, vamos a deshacernos de las balas por defecto usando list-style Ninguno. Después cambia la familia de fuentes. En este caso, voy a usar la fuente llamada Josephine Sans san-serif que establecer el tamaño de fuente Y peso de fuente correcto 300. Bien, así que los elementos de la lista se ven bien, pero necesitamos algo de espacio entre ellos. Y para eso, voy a usar margen. Hagámoslo 50 píxeles en la parte superior e inferior y cero en los lados izquierdo y derecho. Con los valores de los textos, estamos hechos. Y ahora quiero personalizar los likens. Lo primero que necesitamos aquí es crear algún espacio entre icono y texto. Para ello, vamos a seleccionar elementos llamados body. Yo uso margen, ¿verdad? 25 píxeles. Lo siguiente que quiero hacer es cambiar el color de los iconos. En caso de cheque, quiero usar color verde. En cuanto a X iguales, voy a hacerlos rojos. Así que sigamos adelante y seleccionemos el cuerpo de la tarjeta. Después F un cheque y establecer su color como 06838. Duplicemos este código. Cambiar el nombre de clase que necesitamos a veces en lugar de verificar, y también cambiar el valor de color aquí mismo, 911832 Bien, así como pueden ver, cambia el color de los iconos y en realidad con el cuerpo de la tarjeta, ya terminamos Próximo invitado, tenemos que encargarnos del pie de página de la tarjeta. Entonces, seleccionemos desarrollo con pie de página de tarjeta de nombre de clase. Y crea algo de espacio en la parte inferior usando margen inferior con valor 40 píxeles. A continuación, voy a personalizar el botón, así que vamos a seleccionarlo. Necesitamos el botón de pie de página de tu tarjeta. En primer lugar, pongamos su ancho como 120 píxeles. Después crea algo de espacio dentro del botón usando relleno píxeles cambian el color de fondo. Voy a usar tu color chocolate. Y también cambiar el color del texto. Hazlo más claro usando el color d, d, d. bien, ahora voy a tomar aquí de textos dentro del botón. En primer lugar, cambiemos la familia de fuentes. Voy a usar la fuente llamada Montserrat, sans serif. Después establece su tamaño de fuente, hazlo 12 pixeles. Voy a hacer que la fuente sea un poco más audaz para eso, correcto font-weight Y fijarlo como 600. También haga textos en mayúsculas usando texto transformar mayúsculas. Y por último, crea algo de espacio entre letras usando espaciado entre letras con valor de un píxel. Bien, eso es lo de los textos. Necesitamos aquí algunos estilos más para que el botón quede bien. Cambiemos el borde predeterminado y creemos uno personalizado. Aquí mismo, dos píxeles, sólidos, y el color del chocolate. Después haz redondeado el botón usando border-radius. 50 pixeles. Se deshace del valor por defecto, contorno, contorno ninguno. Y finalmente cambiar el tipo de más tosco, hazlo señalar. Bien, así como puedes ver, el botón está estilizado. Ahora quiero agregar algunos estilos a la propia tarjeta. Voy a hacer su esquina ligeramente redondeada. Y también quiero agregarle algún efecto de sombra. Así que sigamos adelante y asignemos a la tarjeta border-radius con el valor diez pixeles Luego usa sombra de caja. Inserte aquí, valores 010 píxeles, dos píxeles, y el color RGB 000 y opacidad 0.8 Bien, entonces ahora los carros se ven mucho mejor. Y a continuación, voy a crear poco efecto hover. Al flotar. Voy a aumentar la escala de cartas y también quiero cambiar ligeramente la sombra de caja. Así que vamos a seleccionar tarjeta con hover. Después inserte aquí transformar, escalar. Y como argumento en severo 1.1. En realidad, como sabes por defecto, la escala de elementos es uno. A continuación, necesitamos una sombra de caja con valores de 015 píxeles, 60 píxeles, y el color RGB 000.8 Y también para que el efecto sea más suave, vamos a usar la transición con los valores todos y 0.4 s. así que si pongo el cursor sobre la tarjeta, entonces su tamaño se incrementará suavemente Además, se cambiará la sombra y en general, obtendremos un bonito efecto, ¿verdad? En realidad, eso es todo. Casi terminamos con este proyecto. Lo único que quiero hacer es hacer que el proyecto sea receptivo en diferentes tamaños de pantalla. Para eso, inspeccionemos la página y luego cambiemos el modo de respuesta. Entonces, el punto de ruptura en el que necesitamos hacer algunos cambios, creo, es de unos 1.200 píxeles Porque como se puede ver en el tamaño de la pantalla se rompe el proyecto. Así que vamos a seguir adelante y crear una consulta de medios CSS. Para eso, tenemos que escribir en medios de señalización. Después dentro de paréntesis, tenemos que indicar max-width. Como decíamos, necesitamos escribir aquí 1,200 pixeles. Y ahora dentro de una media query, tenemos que crear algunos estilos CSS, a los que luego se aplicarán sobre ese punto de interrupción Seleccionemos contenedor y fijemos su altura en cien por ciento. A continuación, quiero envolver tarjetas. Para eso. Seleccionemos el envoltorio de tarjetas y le asignemos flex wrap con valor rab Y finalmente, necesitamos espacio alrededor de las tarjetas. Con el fin de envolverlos muy bien. Voy a crear ese espacio usando margen. Por lo tanto, seleccione la tarjeta y se le asigne el margen de 50 píxeles. Bien, así que si hacemos la página más pequeña que las tarjetas serán envueltas Y eventualmente el proyecto responderá en tamaños de pantalla más pequeños 32. Proyecto 29 - botón de palanca CSS: Hola y bienvenidos a nuestro siguiente tutorial. En este video, vamos a construir una casilla de verificación animada CSS, que te permitirá crear algún efecto de alternancia Entonces como puedes ver, tenemos aquí nuestra casilla de verificación por defecto, tenemos aquí un lugar circular en el lado izquierdo con fondo rojo Si hacemos clic en él, entonces el círculo se moverá hacia el lado derecho sin problemas. Y también se cambiará el color de fondo del rojo integrar. Además de eso, puedes notar aquí un pequeño punto colocado en el centro del círculo. Cuando activamos la casilla de verificación, entonces este pequeño punto también cambia su color Bien, así que eso es lo que vamos a hacer. En realidad, creamos esta casilla con gran tamaño solo para una mejor visibilidad. En general, en los sitios web modernos, conocerás casillas de verificación más pequeñas Bien, sigamos adelante y comencemos a construir este proyecto. En código VS. Tengo dos archivos diferentes, uno para HTML y el segundo para CSS. En el archivo index.html. He preparado la estructura básica del documento HTML. Dentro de los elementos de la cabeza, he pasado el enlace para el archivo style.css. Bien, primero vamos a crear desarrollo abierto de marcado HTML, que envolverá todo el contenido asignado a él contenedor de clase Entonces dentro del contenedor necesitamos crear dos elementos. El primero va a ser un elemento de entrada con tipo checkbox. A continuación, necesitamos crear una etiqueta dentro para el atributo, ¿verdad? Cheque. Y también asignado a la clase toggle. Y por último, necesitamos insertar el desarrollo dentro de la etiqueta. Va a ser un círculo. Así que vamos a asignarle círculo de clase. Lo último que tenemos que hacer dentro del documento HTML es vincular entradas y etiquetar. Para ello, tenemos que asignar dos atributos ID de entrada. Y debería tener exactamente el mismo valor que pasamos por, para atributo. Me refiero a chequear. Para poder ver con claridad de lo que estoy hablando. Vamos a insertar dentro del desarrollo algunos textos. Digamos camarilla. Entonces, si hacemos clic en ese texto entonces el cuadro de chat se marcará automáticamente. Vamos al archivo style.css y comencemos a escribir algo de CSS. Al principio, voy a crear algunos estilos de reset. Vamos a deshacernos del margen predeterminado y el relleno de cada elemento. Para seleccionar cada elemento, tenemos que usar un asterisco Y luego pasa tu margen cero y relleno cero. Bien, a continuación voy a colocar los contenidos perfectamente en el centro para eso, seleccionemos contenedor Y al principio definió el ancho y la altura, voy a establecer el ancho como 100 por ciento. En cuanto a la altura, la voy a establecer como cien por ciento de la vista. Luego cambia el color de fondo. Ves tu color E. Y ahora para poder centrar el contenido, voy a usar flexbox Necesitamos aquí display flex. Entonces para centrar el elemento horizontalmente, necesitamos justify-content Y luego alinear los elementos al centro con el fin de centrar elementos particulares. Bien, así como puedes ver, la casilla de verificación se coloca perfectamente en el centro Ahora voy a seleccionar la etiqueta. Pero antes de eso, vamos a deshacernos de este formulario de texto aquí. Después vuelve al archivo CSS y selecciona etiqueta usando className toggle Definamos el ancho como ciento 50 píxeles de lo que necesitamos alto. Vamos a establecerlo como 50 píxeles. Cambiar el color de fondo. Voy a usar tu color e24 848, y también hacer elementos redondeados usando border-radius Bien, así que lo último que quiero hacer con la etiqueta es crear algún efecto de sombra Pero en este caso, voy a crear una sombra dentro de los elementos. Para eso, necesitamos sombra de caja. Entonces como primer valor necesitamos aquí en conjunto de 02 píxeles, diez píxeles, y el color 555. Bien, entonces ahora estás de acuerdo en que se ve mucho mejor. Ahora es el momento de crear el círculo. Así que seleccione el elemento div con el nombre de la clase círculo. En primer lugar, definamos el ancho y alto y establecemos ambos como cinco píxeles. En realidad aplicamos esos start to circle porque usándolos, crearemos un poco.en el centro del círculo, S4, la parte blanca del Debe ser creado por la frontera. Entonces necesitamos aquí borde con los valores de 27 píxeles, columna sólida y blanca. Para poder hacer a lo largo del redondeado, vamos a usar border-radius con un valor del 50 por ciento Bien, entonces tenemos aquí el círculo, pero por ahora no se coloca de la manera correcta Tenemos que encargarnos de su posición. Para eso, voy a usar posición absoluta. Entonces para gestionar la posición del círculo de acuerdo a su elemento padre, que es una etiqueta, tenemos que asignar a la etiqueta posición relativa. Bien, vamos a mover este círculo un poco hacia arriba y también hacia el lado izquierdo. Por lo que necesitamos definir las posiciones superior e izquierda como arriba menos cuatro píxeles e izquierda menos cinco semanas. Y por último, voy a crear un pequeño efecto de sombra, ¿verdad? Sombra de caja con los valores 005 píxeles. El color AAA. Bien, vamos a ver. Hemos personalizado nuestra casilla y ahora es el momento de que funcione Para ello, tenemos que crear el evento click. Se puede pensar que para eso deberíamos usar JavaScript. Pero en este caso, voy a usar algunos trucos CSS que nos permitirán crear el evento click. Como recuerde, hemos vinculado entrada y etiquetas usando id y cuatro atributos. Entonces esta es la forma en que vamos a crear el evento click. Tenemos que definir algunos estilos CSS y tenemos que aplicarlos a los elementos cuando se marca la casilla de verificación En primer lugar, tenemos que seleccionar elemento de entrada. Cuenta con cheque de identificación. Entonces en CSS tenemos una pseudo-clase llamada marcada, lo que nos permite seleccionar la casilla de verificación en modo comprobado Ahora tenemos que acceder a los elementos que necesitamos personalizar. En este caso, necesitamos seleccionar el círculo, pero no podemos simplemente escribir aquí círculo. Al principio, tenemos que tener acceso en la etiqueta, que es un hermano de entrada Para seleccionar al hermano de los elementos de entrada, tenemos que usar uno de estos combinadores CSS llamado selector general de hermanos, que se expresa por Ahora necesitamos una etiqueta, tiene className toggle Y por último, necesitamos aquí círculo. Bien, entonces ahora tenemos acceso en el círculo y todos los estilos que vamos a pasar deberías aplicar al círculo una casilla de verificación se marcará. En caso de un círculo, necesitamos moverlo de su posición actual al lado derecho. Para ello, vamos a usar la posición izquierda. Y al principio vamos a asignarle el 100 por ciento. Además, necesitamos una transición para efecto suave asignado a ella valores izquierda y 0.5 s. vamos a comprobar lo que va a pasar si hago clic aquí entonces el círculo se moverá hacia el lado derecho. Pero se acabará demasiado lejos. Entonces, para obtener los resultados necesarios, necesitamos restar el 200 por ciento del tamaño del círculo Calculemos el tamaño del círculo. En realidad en tamaño del círculo, me refiero al diámetro del círculo. Tiene ancho cinco píxeles y Borde 27 píxeles. Pero hay que tener en cuenta que se deben duplicar 27 píxeles porque tenemos lados izquierdo y derecho. Entonces, en general, el valor debe ser la suma de 27 píxeles más 27 píxeles y más cinco píxeles. Son 59 pixeles. Por lo que tenemos que restar 200 por ciento, 59 picos. Como veis tenemos aquí diferentes unidades de medida, porcentaje y pixel. En realidad esta operación no es válida en CSS. Y para que sea válido, tenemos que usar una función llamada calc, que significa calcular Ahora esta operación es válida. Entonces, si volvemos a hacer clic, entonces el círculo se moverá y obtendremos unos resultados mucho mejores. De un vistazo. Ese es el resultado que necesitábamos obtener. Pero en realidad, necesitamos mover círculo un poco más hacia el lado derecho. Para ser más precisos, necesitamos moverlo por cinco píxeles. Porque como posición por defecto, hemos definido a la izquierda menos cinco píxeles. Entonces, en lugar de 59 píxeles, necesitamos 54 píxeles. Y espero que tenga sentido para ti. Entonces, si hacemos clic, entonces todo va a funcionar. Perfecto. Ahora necesitamos cambiar el color de la etiqueta. Tenemos que hacerlo verde. En realidad, necesitamos que uses la misma técnica. Así que vamos a duplicar este código. Tenemos que cambiar el color de fondo del elemento label. Entonces, deshagámonos del círculo desde aquí. Después borra también esta línea de código, y en color de fondo severo con el valor 3963 Por último, también necesitamos una transición para la etiqueta. Así que aquí mismo la transición con los valores fondo, color y 0.5 s. así como puedes ver ahora, todo funciona bien y en realidad ya casi hemos terminado. Lo único que tenemos que hacer es ocultar esta pequeña casilla de verificación Para eso, voy a ir al archivo index.html y asignado al atributo de elemento de entrada llamado hidden. Bien, así que eso es todo. Nuestro proyecto está hecho. Hemos creado una bonita casilla de verificación animada con efecto de alternar 33. Proyecto 30 - Galería de cuadrícula CSS: En este video, vamos a estar construyendo una galería responsive usando CSS grid. Hoy en día es muy popular y estoy seguro que ya te has encontrado con esas calorías en los sitios web modernos. Entonces como pueden ver, tenemos aquí 12 imágenes con pequeños huecos. Y esas imágenes están alineadas en el espacio bidimensional. Eso es. Lo que puedes lograr usando CSS grid. Es un módulo de diseño CSS bidimensional. Como decíamos, la galería responde. Si hacemos navegadores más pequeños que las imágenes se encogerán muy bien y la galería en sí no se romperá. Bien, sigamos adelante y comencemos a construir este proyecto que tengo aquí en VS Code, par de archivos, index.html y style.css Y también tengo una carpeta llamada images, que incluye todas las imágenes que vamos a utilizar a lo largo de este proyecto. En realidad, como nota rápida aquí, quiero decir que vamos a construir este proyecto en Mozilla Firefox, porque este navegador tiene un poco mejor entorno de trabajo para la cuadrícula CSS. Entonces por eso he corrido el proyecto en este navegador. Bien, entonces en el archivo index.html, he preparado una estructura HTML básica Como ves en el elemento head, tenemos un link para nuestro archivo CSS. Sigamos adelante y comencemos a construir nuestra galería. En primer lugar, voy a crear el marcado HTML. Entonces vamos a abrir el desarrollo. Debe ser un envoltorio para toda la galería. Así que vamos a asignarle contenedor de clase. Entonces voy a abrir otro desarrollo que envolverá todas las imágenes. Vamos a asignarle galería de clase. Entonces ahora es el momento de insertar tus imágenes. Abramos elementos IMG e indiquemos la ruta de la imagen. Tenemos imágenes de carpeta, y después tenemos que seleccionar IMG, un punto JPG Además, necesitamos asignar un par de clases al elemento image. El primero va a ser cuatro estilos comunes, escribir IMG también El segundo debería ser para estilos individuales. Así que escribe IMG dash one. Bien, así como dijimos, en general, vamos a tener 12 imágenes Entonces voy a duplicar esta línea de código 11 veces. Y luego cambiar rápidamente los nombres de las imágenes y también los nombres de las clases. ¿Bien? Entonces como pueden ver, tenemos aquí todas las imágenes, pero por ahora son bastante grandes. Y además se ven feas porque tenemos aquí solo HTML puro. Entonces es momento de empezar a peinar para eso. Vamos al archivo style.css. En primer lugar, voy a crear algunos estilos de reset. Vamos a establecer el margen y el relleno para todos los elementos como cero. Y además de eso, voy a establecer box-sizing border-box. Después de eso, voy a encargarme del contenedor. Entonces sigamos adelante y seleccionémoslo. Después, defina ancho y alto. Vamos a establecer con como 100%. En cuanto a la altura. Voy a fijarlo como 100 por ciento del puerto de visión. Bien, eso es todo por ahora. En cuanto a contenedor, voy a seleccionar una galería que envuelva todas las imágenes. La galería va a ser un contenedor de rejilla. En cuanto a las imágenes, las haremos como elementos de cuadrícula. Entonces, para poder hacer que los elementos de la cuadrícula contenedor, tenemos que asignarle la cuadrícula de visualización. Ahora tenemos que definir columnas de cuadrícula y filas de cuadrículas. Para ello, tenemos que usar propiedades llamadas columnas de plantilla de cuadrícula y filas de plantilla de cuadrícula. Empecemos por las columnas. Utilice aquí columnas de plantilla de cuadrícula de propiedades. En realidad, como nota rápida aquí, quiero decir que si no tienes bastante confianza en CSS grid, entonces te recomiendo que revises nuestro boot camp CSS en que explicamos este módulo en detalle. Y además construimos todo el proyecto basado en la cuadrícula CSS. Entonces si te interesa, entonces puedes encontrar el enlace de este curso en la descripción. ¿Bien? Entonces vamos a tener ocho columnas similares que tendrán el mismo tamaño. Y para eso, quiero usar una función llamada repeat. La función Repetir toma dos argumentos. Como primera, tenemos que indicar número de columnas, ocho. En cuanto a la segunda , tenemos que indicar tamaño para cada columna. En este caso, voy a usar una función llamada min-max. Nos permite definir los valores mínimo y máximo de cada columna. Entonces como valor mínimo, pasemos aquí diez pixeles. En cuanto al valor máximo, voy a usar una unidad especial llamada unidad fraccionaria, ¿verdad Uno. Por lo que significa que el espacio disponible se dividirá en ocho partes del evento. Y cada columna ocupará una parte del espacio disponible. Entonces, como puedes ver, las imágenes han cambiado el diseño. Tenemos aquí, una situación un poco desordenada. Inspeccionemos la página y abramos Herramientas para desarrolladores dije al principio de este tutorial que Firefox tiene un entorno de trabajo muy bueno para la cuadrícula CSS. En el lado derecho, tenemos aquí la pestaña Layout en la que puedes encontrar una sección para la cuadrícula donde tenemos nuestros elementos div, que es Gallery Si marcamos esta casilla, entonces se mostrará GridLayout Quiero decir, puedes encontrar tus ocho columnas que acabamos crear y los números de línea de cuadrícula adecuados. ¿Bien? A continuación voy a encargarme de las filas de cuadrículas. Para eso voy a usar una propiedad llamada grid template rows. Entonces tendremos cuatro filas. Cada uno de ellos tendrá el mismo tamaño. Por lo tanto, voy a usar, de nuevo repetir la función. Indiquemos aquí una serie de roles para s precisos, voy a usar aquí pequeño tweak que nos ayudará a hacer la respuesta de la galería Entonces voy a hacer que el tamaño de cada fila 10% del ancho de la ventana gráfica Significa que una vez que se disminuya el ancho de la página , entonces el tamaño de los roles se disminuirá en consecuencia. Y eventualmente, obtendremos un diseño receptivo. Para poder ver mejor, vamos al navegador. Por lo que si hago el navegador más pequeño que el tamaño de la rosa se disminuirá. Bien, así que por ahora, las imágenes son bastante grandes Y para arreglarlo, sigamos adelante y seleccionemos imágenes con nombre de clase común IMG, luego establecer ancho y alto como cien por ciento Ahora, las imágenes se colocan dentro de las celdas de la cuadrícula. También son más pequeños. Pero tenemos aquí un pequeño problema. Si las miras más de cerca, encontrarás que las imágenes están un poco estiradas y no se ven del todo bonitas. Entonces para arreglar eso, vamos a usar la propiedad llamada pies de objeto y asignada a cada cubierta de valor. Entonces ahora se ven mejor. A continuación, quiero crear algo de espacio entre celdas de cuadrícula. Para ello, tenemos que asignar a la galería la grilla gap. Vamos a establecerlo como 16 píxeles. Y también cambiemos el color de fondo. Voy a usar tu llamada o cero, d cuatro a cero. Entonces como puedes ver, tenemos algo de espacio entre celdas de cuadrícula y también se cambia el fondo. ¿Bien? Ahora necesitamos alinear cada imagen individualmente y eventualmente ocuparán toda la galería. Entonces comencemos desde la primera imagen. Quiero que retomes las dos primeras columnas y la primera fila. Así que vamos a seleccionarlo con nombre de clase individual IMG. A continuación, definir la propiedad llamada columna de cuadrícula. Esta propiedad nos permite definir el número de línea de columna inicial y también el final. Entonces como decíamos, la primera imagen ocupará las dos primeras columnas y la primera fila. Por lo tanto, necesitamos aquí como línea de salida número uno, luego slash y tres Y también, escribamos fila de cuadrícula con números de línea 1.2. Entonces, como puedes ver, la primera imagen ha ocupado las dos primeras columnas y se coloca en la primera fila. La segunda imagen ocupará las siguientes tres columnas y las dos primeras filas. Entonces sigamos adelante y copiemos el código para la primera imagen. Después cambia el nombre de la clase. Y también valores para columna de cuadrícula y fila de cuadrícula. Necesitamos 3.6 S fila de cuatro cuadrículas, ¿verdad? 1.3. Bien, a continuación tenemos la tercera imagen Quiero dejarla donde está. Es decir, va a tomar toda la deuda una celda. Entonces para la tercera imagen, necesitamos la columna de cuadrícula como 6.7 y el papel de coraje como 1.2. A continuación tomaremos dos columnas y dos filas. Entonces, para la cuarta imagen, escribamos líneas de cuadrícula. Para columna de rejilla necesitamos 7.9. Agregar para la fila de cuadrícula 1.3. Bien, A continuación tenemos la imagen número cinco. Quiero que tomes dos columnas y dos filas también. Me refiero a la segunda y tercera fila. Entonces, para la quinta imagen, cambiemos las líneas de la cuadrícula de la siguiente manera. Necesitamos aquí 1.3 como fila de cuatro cuadrículas, ¿verdad? 2.4. ¿Bien? En realidad así es como decidí alinear las imágenes. Pero claro que puedes hacerlo por tu cuenta. Puedes usar más imágenes o menos y crear el diseño como desees. Sé que escribir código para la galería es un poco repetitivo y tal vez un poco preocupante Pero así es como funciona. Eventualmente obtendremos un buen resultado. Bien, A continuación tenemos la imagen número seis. Quiero que se coloque dentro de la tercera y cuarta columnas. En cuanto a la fila, ocupará la tercera. Entonces, para los seis MHz, escribamos números de línea para la columna de cuadrícula 3.5, fila de cuadrícula S4, necesitamos 3.4. Bien, entonces hemos alineado seis imágenes. Todavía quedan otras seis imágenes. Como dijimos, escribir el código para tal diseño es un poco rutinario Entonces voy a pasar aquí el código para el resto de las imágenes y luego simplemente puedes sobrescribirlo Bien, espero que hayas escrito el código para las otras seis imágenes. Vamos al navegador y veamos cómo se ve nuestra galería. Así que las imágenes están muy bien alineadas y nuestra galería ya se ve bien, ¿verdad? En realidad, quiero hacer aquí algunos cambios. Como ve, tenemos una brecha entre las imágenes y quiero crear ese espacio también en los bordes de la galería. Quiero decir, en los cuatro lados, arriba, abajo, izquierda y derecha. Para eso, voy a usar padding. Escribamos aquí 16 pixeles. Lo siguiente que quiero hacer es colocar toda la galería verticalmente en el centro. Para eso, voy a usar Flexbox. Vamos a asignar al contenedor display flex. Y para centrar los artículos flexibles verticalmente, necesitamos alinear los artículos al centro. Entonces la galería está centrada. Y lo último que quiero hacer es crear efecto hover Por defecto, quiero disminuir la opacidad para las imágenes. Entonces lo aumentaremos al hover. Así que vamos a asignar a la opacidad de imagen 0.7. Después selecciona imagen con hover y aumenta la opacidad aquí mismo, uno Por último, usemos la transición con valores de opacidad y 0.5 s. ? Entonces como pueden ver, tenemos aquí bonito efecto hover Y en realidad nuestro proyecto está hecho 34. Proyecto 31 - Landing Page con formas modales: En este video, vamos a crear una bonita página de préstamos usando HTML, CSS y un poco de JavaScript. Antes de empezar a trabajar en este proyecto. Como Normalmente, voy a repasarlo y describirlo rápidamente. Entonces como pueden ver, tenemos aquí fondo de pantalla completa. En el centro de la página, teníamos una pancarta que consta de encabezamientos y párrafos Y también en la esquina superior derecha, se colocan dos botones diferentes. Si hacemos clic en ellos, entonces formularios agradables se mostrarán como las cajas del modelo. En realidad esas formas son similares. Sólo hay una diferencia. Un formulario es para iniciar sesión y el segundo es para registrarse. Bien, eso es. Lo que vamos a hacer. Espero que sea interesante y disfrutes de este proyecto. Así que comencemos. En el escritorio. He creado una carpeta llamada formularios modelo, en la que he creado tres archivos diferentes para HTML, CSS y JavaScript. También aquí hay una carpeta que incluye la imagen para la página de destino. Bien, sigamos adelante y abramos esta carpeta con el código VS. Entonces voy a revisar el archivo index.html. Como puedes ver, tenemos aquí la estructura básica del documento HTML. Dentro del elemento head, tenemos un par de elementos link. Quiero decir, enlaces para iconos Font Awesome, también un enlace para fuentes de Google. A lo largo de este proyecto, voy a usar fuentes llamadas Josephine Sans, y Montserrat Y por último, tenemos aquí un enlace para nuestros estilos CSS personalizados. En realidad puedes descargar archivos de inicio desde el enlace en la descripción. Bien, sigamos adelante y ejecutemos este archivo en el navegador. Voy a hacer eso usando un servidor en vivo. Es una gran extensión del Código VS para que puedas buscarlo desde el Administrador de Extensiones e instalar este paquete. Bien, sigamos adelante y coloquemos el editor y el navegador uno al lado del otro y comencemos a construir al principio el marcado HTML Todo el contenido estará envuelto por desarrollo. Así que vamos a abrirlo. Y asignado al contenedor de nombre de clúster. El contenedor constará de tres partes diferentes. Como primera parte, vamos a tener aquí Banner, que incluirá encabezamiento y un párrafo. Después en la esquina superior derecha tendremos botones para iniciar sesión y para registrarse. En cuanto a la tercera parte, será un contenedor lleno e incluiremos nuestros formularios. Entonces sigamos adelante y abramos el desarrollo. Y asignado a su nombre de clase, texto de banner. E inserte en él H1 elementos de encabezado con código de texto y cree. Después abre p elementos e inserta en él algunos textos. Digamos que aprende a sobrellevar. Bien, Siguiente deberíamos tener aquí los botones. Entonces vamos a abrir el desarrollo, que tendrá nombre de clase btn Y luego insertarlo en partes y elementos. Voy a asignar a cada clúster el nombre para estilos comunes, btn Y también necesitamos aquí otra clase para el estilismo individual. Vamos a llamarlo Login, btn como texto, voy a insertar tu login En realidad, también hicimos el botón similar para apuntarte. Así que vamos a duplicar esta línea de código y cambiar el nombre de la clase que necesitamos aquí, regístrate btn Y también voy a cambiar el texto. Vamos a escribir te registres. Bien, eso es todo sobre los botones. A continuación, tenemos que empezar a trabajar en formularios. Para eso voy a crear otro desarrollo. Debe ser un contenedor de forma. Así que vamos a asignar a cada nombre de clase para contenedor. Entonces tendremos aquí dos partes distintas. El primero va a ser para un registro. Así que vamos a abrir el desarrollo y asignado a nombre de clase inscribirse. Para envoltorio. Esta clase va a ser para estilos individuales. Necesitamos aquí otro para el estilo común. Entonces llamémoslo modelo. El modelo constará de un par de elementos. Tendremos botón X de cierre. También. Voy a crear un par de encabezamientos. Entonces tendremos varias entradas con Font, Iconos impresionantes. Y por último tendremos un botón. Bien, vamos a seguir adelante y crear esos elementos, desarrollo abierto y asignado a comer varios nombres de clase El primero va a ser x btn, y luego necesitamos registrarse x. dentro de esos elementos div Voy a insertar una de las entidades HTML, derecha, en signo y horarios con punto y coma Entonces como pueden ver, tenemos aquí x. A continuación tendremos un par de encabezamientos Entonces vamos a abrir otro desarrollo y le asignamos nombre de clase, encabezado de formulario. Y luego insertar elementos de encabezado H1 con código de texto y crear A continuación necesitamos aquí otro encabezado va a ser h3 elementos de encabezado Vamos a insertar tu texto. Únete a nosotros. Bien, ahora es el momento de crear un elemento form en sí mismo, que incluirá un par de entradas Así que vamos a abrir los elementos del formulario y asignemos a comer formulario className Por lo que el elemento form constará de tres grupos diferentes. Cada uno de ellos incluirá Font, Awesome, icon y el elemento input. Así que vamos a crear un elemento div y asignarle entrada de clase, grupo. Después inserte en él I elementos. Entonces el primer icono va a ser para nombre de usuario. Vamos a asignar a cada clase nombres FAS, un usuario. Entonces necesitamos un elemento input. Su tipo va a ser textos. Y también necesitamos aquí otro atributo llamado placeholder con un valor username Entonces como dijimos, necesitamos unos tres grupos de entrada. Duplicémoslo dos veces y luego hagamos algunos cambios. La segunda entrada va a ser para correo electrónico. Entonces cambiemos el nombre de clase de los elementos de IA. Aquí necesitamos, F, a, F, un sobre. Después cambia el tipo de entradas, hazlo por correo electrónico. Y también como valor de marcador de posición, necesitamos insertar correo electrónico Bien, la tercera entrada va a ser para una contraseña. Cambiemos el nombre de clase de los elementos de IA. Necesitamos tu llave FASFA. Luego cambia el tipo de elementos de entrada. Necesitamos la contraseña y también insertar contraseña para marcador de posición también Bien, veamos acerca de las entradas. Los últimos elementos que tenemos que crear es un botón. Así que vamos a abrirlo. Entonces. Voy a definir type attribute como un bottom y luego insertar tus textos, regístrate. Bien, así que hemos creado los primeros cuatro registros. También necesitamos similares para iniciar sesión. Así que vamos a duplicar el envoltorio de formulario de registro, y luego hacer algunos cambios Voy a cambiar el nombre de la clase que necesitamos aquí iniciar sesión. Entonces necesitamos cambiar el nombre de clase de x bottom. Necesitamos volver a iniciar sesión. Entonces también en lugar de unirse a nosotros, necesitamos iniciar sesión. En caso de formulario de inicio de sesión, no necesitamos un correo electrónico en absoluto. Entonces, deshagámonos del segundo grupo de entrada. Y por último, cambió el valor del fondo. Necesitamos aquí iniciar sesión. Bien, eso es todo sobre el marcado HTML. Ahora, es el momento de comenzar a escribir algo de CSS. Vamos al archivo style.css. En primer lugar, voy a crear algunos estilos de reset. Vamos a deshacernos del margen y el relleno de cada elemento. Necesitamos usar asterisco para seleccionar cada elemento. Entonces pasemos tus márgenes y relleno cero también. Entonces voy a seleccionar contenedor. Definamos su ancho y alto como un ancho. Voy a usar peligro presente. Altura S4. Quiero establecer la altura como 100% de la ventana gráfica. Y para eso, tenemos que usar unidad de medida relativa llamada VH. Entonces necesitamos 100 vh. A continuación, establecemos la imagen como fondo de pantalla completa. Voy a usar tu gradiente lineal. Después pasar algunos valores RGBA. El primero va a ser de color negro ¿verdad? 000 con opacidad 0.6. Como por segundo, necesitamos de nuevo RGBA color negro, pero con opacidad 0.8 A continuación, indiquemos URL. Quiero decir parte de la imagen. Tenemos imágenes de carpeta y luego imagen llamada PG dot JPG que necesitamos posición de fondo como centro. Y también no repetir. Por último, usemos la propiedad de tamaño de fondo con la cobertura de valor. Bien, así como pueden ver, tenemos aquí imagen de fondo a pantalla completa Ahora, voy a darle estilo a banner y botones. Y después de eso nos encargaremos de las formas de estilismo y también las haremos funcionar por ahora. Para que el proceso de trabajo sea más conveniente, voy a ocultar todo el contenedor de formularios por un tiempo Puedes hacerlo usando ya sea display none o simplemente podemos usar uno de los atributos HTML llamados hidden. Entonces usemos el atributo Keaton y asignémoslo para formar Container. Como puedes ver, ambas formas de oculto y tenemos aquí solo texto de banner y botones. Sigamos adelante y comencemos a diseñar el texto del banner. Entonces, seleccionemos desarrollos que tengan textos de banner de nombre de clase. Yo voy a encargarme de la posición de la pancarta. Quiero que se coloque en el centro. Para eso, voy a utilizar alguna técnica usando posiciones y transformar la propiedad. Si has visto nuestros videos recientes, entonces ya deberías conocer esta técnica. Pero si no, te lo voy a mostrar en un segundo. En primer lugar, necesitamos establecer la posición como absoluta. Entonces necesitamos encabezar la posición, establecer como 40 por ciento y posición izquierda con un valor del 50 por ciento. Entonces ahora decimos que los controles fronterizos desplazaron de arriba a abajo un 40% y de izquierda a derecha en un 50%. Eso no es lo que queremos. Para que los elementos centrales, tenemos que moverlo de su posición actual en un 50 por ciento al lado izquierdo y un 50 por ciento al alza. Para eso, necesitamos usar Transform. Después traduzca. Tenemos que pasar rendimiento los siguientes valores. Necesitamos -50 por ciento y luego otra vez -50 por ciento. Bien, Entonces con la posición del texto del banner, ya terminamos. Y ahora tenemos dos encabezamientos de estilo y un párrafo. Empecemos por el encabezamiento. Selecciónalo a la derecha, textos de banner, H1. Antes que nada, cambiemos de color. Voy a hacerlo blanco. Después cambia font-family. Usemos su fuente llamada Montserrat san-serif. Eso incrementó el tamaño de la fuente. Voy a configurarlo como 80 pixeles. Además, voy a hacer que la fuente sea más ligera usando font-weight. Vamos a establecerlo como 300. Entonces crea algo de espacio entre letras. Utilice el espaciado entre letras con el valor de dos píxeles. Y por último, voy a crear algo de espacio en la parte inferior usando margen inferior, dos picos. Bien, eso es todo sobre rumbo. Ahora, voy a seleccionar el párrafo. Así que el texto del banner derecho p. en realidad, necesitamos aquí propiedades casi similares que usamos para encabezado. Entonces voy a copiarlos. Vamos a pegar aquí y hacer algunos cambios como color. Usemos e. Entonces. Voy a cambiar familia de fuentes en lugar de Montserrat aquí mismo, Josephine Que disminuyen el tamaño de la fuente, lo hacen 40 pixeles. Como peso de fuente, necesitamos aquí lo mismo. Entonces dejémoslo como está. A continuación, voy a disminuir el espacio entre letras. Necesitamos un pixel. Y por último, en lugar de margen inferior, vamos a usar text-align, Bien, eso es lo de la pancarta. Creo que se ve bien. Y ahora quiero trabajar en botones. En primer lugar, cuidemos sus posiciones. Quiero que se coloquen en la esquina superior derecha. Para ello, vamos a seleccionar desarrollo, que envuelve ambos botones. Tiene nombre de clase BTN. Hagamos su posición como absoluta. Después defina los 50 píxeles superiores y los 60 píxeles derechos. Entonces como puedes ver, ambos botones se colocan en la esquina superior derecha. Y ahora voy a darles estilo. En primer lugar, vamos a darle a ambos botones algunos estilos comunes. Como recuerdas, tienen clase común, BTN. Vamos a seleccionarlo. Al principio, establezca el ancho como ciento 70 píxeles. Luego crea algo de espacio dentro de los botones usando relleno. En la parte superior e inferior, necesitamos diez píxeles, y luego 15 px está en los lados izquierdo y derecho. Entonces vamos a crear espacio en el lado derecho de los botones usando 20 píxeles margin-right Además, quiero hacerlos redondeados. Para eso, usemos border-radius y hagamos que sea 50 pixeles. Ahora, vamos a encargarnos de los textos. En primer lugar, cambiar font-family. En este caso, voy a usar teléfonos llamados Josephine Sans Serif. Después aumentó el tamaño de la fuente, lo hacen 16 pixeles. Crea algo de espacio entre letras. Utilice el espaciado entre letras. Un píxel. También se deshace de default, outline, outline, none Y por último, cambiar tipo de gruesamente. Hazlo un puntero. Eso es todo sobre estilos comunes. Ahora, voy a darle algunos estilos individuales a ambos botones. Seleccionemos el primero usando className, Login, btn. Luego cambia el color de fondo. Voy a usar tu color llamado tomate. Ahora, quiero cambiar el color del texto. Y en realidad necesito el mismo color para ambos botones. Entonces lo voy a escribir dentro de estilos comunes. Usemos tu color blanco. Además del color, también quiero el mismo borde. Entonces definamos la frontera. Dos pixeles, sólidos y como color, ¿verdad? Tomate. Y por último, selecciona el segundo botón que tiene nombre de clase, regístrate btn, y haz que su color de fondo sea transparente Bien, eso es todo sobre este alicatado de los botones. A continuación, quiero crear algunos efectos de hover y clicar. Al flotar. Quiero que el botón mueva a Elizabeth hacia arriba. Para eso. Seleccionemos btn con Harvard y luego definamos transform Necesitamos traducir Y con valor menos dos píxeles. Y también para que el efecto sea más inteligente, necesitamos hacer la transición del transporte 0.3 s. Si pasamos cursor sobre los botones, entonces llegaremos hasta aquí Bonito efecto. A continuación, como dijimos, necesitamos hacer clic en efecto. Para eso tenemos que usar una de estas pseudo-clases llamadas active Así que tenemos que seleccionar BGN con active. Y ahora podemos definir estilos que queremos que los botones obtengan cuando hacemos clic en ellos. Entonces, como saben, al flotar ahí, subiendo y onclick, necesitamos colocarlos en sus viejas posiciones Por lo tanto, necesitamos copiar esta línea de código y simplemente cambiar el valor. Tenemos que escribir aquí cero. Entonces, cuando hagamos clic, obtendremos un bonito efecto de clic. Bien, eso es todo sobre personalizar botones. Ahora es el momento de comenzar a trabajar en granjas. Entonces por ahora el contenedor de formulario está oculto. Lo primero que tenemos que hacer es mostrarlo de nuevo. Pero no necesitamos mostrar ambos formularios al mismo tiempo. Voy a comenzar al primer formulario de registro. Entonces la segunda forma será automáticamente estilo. Eso sucederá porque ambas firmas comparten las mismas clases. Entonces voy a ocultar el formulario de inicio de sesión para eso. Vamos a asignar a su wrapper atributo hidden. Después vuelve al archivo style.css. Voy a seleccionar ambos raperos de forma con modelo de clase común Después defina el ancho como 400 píxeles. Entonces voy a poner una imagen como fondo. Usemos aquí gradiente lineal y pasemos aquí algunos valores RGBA El primero va a ser 148422, después voy a 42 y la opacidad 0.8 S para el segundo va a ser 185-12-9129 A continuación, seleccione la imagen. Necesitamos aquí bg dot JPG como una posición, centro derecho que no repetir. Y también necesitamos propiedad de tamaño de fondo con la cobertura de valor. ¿Bien? Por lo que los formularios deben colocarse en el centro de la página. Es decir, deberían estar perfectamente centrados. Para eso, voy a usar la misma técnica que usamos para el banner. Así que fijemos la posición del modelo como absoluta. Que necesitamos arriba 50 por ciento, izquierda, 50 por ciento. Y también transformar, traducir con los valores -50 por ciento y nuevamente -50 por ciento. Por último, hagamos esquinas de modal, un poco redondeadas usando border-radius con valor 20 píxeles Bien, así que por ahora, la forma se ve realmente horrible, pero vamos a hacer que se vea bien en un rato. Sigamos adelante y comencemos a diseñar elementos que se colocan dentro del modal. Voy a comenzar con x patrón de cierre. Así que vamos a seleccionarlo. Necesitamos el nombre de la clase x BTM. Voy a colocarlo en la esquina superior derecha de modal. Para eso, voy a usar posición absoluta. Entonces, ¿a la derecha? Como 20 piezas. Por ahora, como puedes ver, el botón es bastante pequeño, así que vamos a encargarnos de ese mayor tamaño de fuente. Hazlo 50 pixeles Además, voy a cambiar el color. Vamos a usar aquí llamado o dos a dos. Y por último, cámbielo de tipo más basto, hazlo puntero. Bien, eso es todo sobre el botón X. Ahora tenemos que encargarnos de esos elementos de rumbo. Seleccionemos sus elementos padre, que es el encabezado del formulario. Voy a colocar texto en el centro usando text-align Después crea algo de espacio en la parte superior y también en la parte inferior del encabezado usando margen, derecho, ocho píxeles, cero, cien y 50 píxeles. Y otra vez cero. Y por último, cambiar el color de ambos encabezamientos, hacerlos blancos. Bien, ahora voy a seleccionar el primer rumbo para eso. Tenemos que escribir aquí el encabezado del formulario H1. Vamos a cambiar la familia de fuentes. En este caso, voy a usar fuente Josephine Sans, san-serif A continuación, voy a aumentar el tamaño de la fuente. Hagámoslo 40 pixeles. Entonces. Haz que los textos sean más ligeros usando font-weight 300. Y luego crear algo de espacio en la parte inferior del encabezado usando márgenes tercios inferiores píxeles. Después de las deudas, voy a seleccionar el segundo rubro. Así forma derecha encabezado h3. En el caso del segundo rubro, necesitaremos propiedades casi similares. Así que vamos a agarrar esas tres líneas de código. Pégalos para segundo encabezamiento. Después cambia font-family. Necesitamos aquí más Surat. Entonces como tamaño de fuente, derecho, 25 píxeles, font-weight, no necesitamos cambiarlo, así que dejémoslo como Y por último, agregar texto, transformar, mayúsculas. Bien, eso se sienta sobre encabezar elementos. Ahora tenemos que empezar a trabajar en insumos. Al principio, seleccionemos los elementos del formulario, que tiene el formulario className Quiero encargarme de su posición. Y para eso voy a usar flexbox. Así que la derecha de la pantalla flex. Los artículos flexibles se colocan horizontalmente en una fila. Entonces necesitamos cambiar la dirección del flex y tenemos que hacerla columna. Entonces para centrar los elementos, necesitamos alinear los elementos, centrar. Bien, ahora tenemos que empezar a diseñar esas entradas. Al principio, voy a seleccionar el grupo de entrada, que envuelve Font, Iconos impresionantes y entradas. Quiero crear algo de espacio en la parte inferior de cada grupo de entrada. Entonces usemos aquí margen inferior con valor diez píxeles. Después de eso, seleccionemos la entrada en sí, ¿verdad? Grupo de entrada. Esa entrada. Ancho definido como 250 píxeles. A continuación, quiero crear algo de espacio dentro de la entrada usando padding. En los lados superior, derecho e inferior, necesitamos la misma cantidad de espacio. Así que aquí mismo, 15 pixeles, tres veces S para el lado izquierdo, voy a crear un poco más de espacio porque eventualmente vamos a colocar tus iconos Font, Awesome. Entonces aquí mismo, 50 pixeles. A continuación, me voy a deshacer del borde y contorno predeterminados , borde derecho ninguno. Y no esbozar ninguno. También hacer entrada ligeramente redondeada. Usando border-radius con valor de 30 píxeles. Entonces voy a cambiar el fondo de entradas. Vamos a usar aquí el valor RGBA con color negro y con puntos de opacidad seis Bien, después de eso, voy a trabajar en el texto. Así que vamos a cambiar la familia de fuentes. Voy a usar su fuente llamada Josephine Sans. Sans serif. Eso incrementó el tamaño de la fuente. Hazlo 16 pixeles y luego cambia de color. Ves tu color di, di, di. Bien, así que acabamos de empezar los elementos de entrada. Es hora de seguir adelante y cuidar de los iconos Font Awesome. Así que vamos a seleccionarlos usando input-group. I. Al principio quiero gestionar sus posiciones. Como decíamos, los voy a colocar dentro de elementos de entrada. Para ello, definamos su posición como absoluta. Y para que funcionen de acuerdo con el elemento padre, que en este caso es input-group Tenemos que asignar al elemento padre posición relativa. Después defina cuatro elementos I, arriba como 13 píxeles e izquierda Como 17 píxeles. Entonces ahora como puedes ver, se colocan dentro de entradas. Solo aumentemos el tamaño de la fuente. Hágalo 18 píxeles, y cambie de color. Usa aquí. Bien, así que con los grupos de entrada, hemos terminado ahí luciendo bien Y el único elemento que queremos cuidar dentro de la forma es un botón. Así que vamos a seleccionarlo bien para botón. En primer lugar, definamos anchuras, conviértanlo 310 píxeles Luego crea algo de espacio dentro del botón usando relleno. Establecerlo como 12 píxeles, se deshace del borde y el contorno predeterminados , ¿verdad? Frontera ninguna. Y no esbozar ninguno. Después hacer botón redondeado. Use aquí, border-radius con valor se piensa en píxeles. Después de eso, voy a cambiar el color de fondo de Batson Usemos tu color o d8678. Además, necesitamos cambiar el color del texto. Hagámoslo blanco. A continuación, voy a trabajar en textos. Quiero cambiar font-family. Usemos aquí Josephine Sans. Serif. También aumenta el tamaño de la fuente. Hazlo 16 píxeles y transforma texto en mayúsculas usando texto, transforma mayúsculas Bien, así como puedes ver, el botón está casi estilizado Se ve bien, pero tenemos que agregarle un par de estilos. Como ves, necesitamos algo de espacio en la parte inferior de la misma. Y también voy a crear algo de espacio en la parte superior de la misma también. Para eso, tenemos que usar margen. En la parte superior derecha, diez píxeles que cero, que 50 píxeles en la parte inferior y cero. Entonces crea alguna sombra. Usa sombra de caja con los siguientes valores. Como 05 píxeles, 20 píxeles. Y como un color derecho RGBA, color negro posterior con opacidad 0.4 Y finalmente cambió más grosero, hacer que apunte un derecho, ese asiento sobre la personalización de Lo último que quiero hacer es crear efectos de hover y click, como lo hicimos en caso de iniciar sesión y botón de registro Así que vamos a seleccionar para botón con Harvard que necesitamos aquí, Transformar, Traducir Y con argumentos menos dos píxeles. Y además de eso, quiero cambiar ligeramente la sombra al flotar Así que la sombra de caja derecha. Aquí necesitamos valores cero, que ocho píxeles, 25 píxeles. Y como derecho de color, RGBA 000 y opacidad 0.3 Además, necesitamos usar la transición, ¿verdad? Todo 0.3 s. así como puede ver, efecto hover está funcionando Se ve bien. Ahora vamos a crear el efecto click. Voy a seleccionar para y abajo con pseudo-clase E2. Entonces vamos a agarrar esta línea de código. Pégalo aquí y como argumento pasa cero. Bien, así que eso es todo. El modelo está diseñado en realidad este es el formulario de registro. Por ahora el formulario de inicio de sesión está oculto. Pero si lo mostramos de nuevo, entonces encontrarás que también está estilizado porque ambas formas modelo tienen las mismas clases comunes Bien, así que todo está listo para que esos formularios modelo funcionen por defecto. Los vamos a esconder. Y cuando hacemos clic en los botones de inicio de sesión o registro, deberían mostrarse. Y también el resto de la página debería estar deshabilitado. Para lograrlo, vamos a usar un poco de JavaScript. Bien, entonces antes de escribir algo de JavaScript, al principio voy a ocultar los formularios, pero no lo voy a hacer desde HTML. Lo haremos desde CSS. Así que al principio vamos a deshacernos del atributo oculto desde aquí. Después vaya al archivo style.css. Para ocultar formularios, voy a usar opacidad cero y visibilidad oculta. Y debemos asignarlos a modelar. Las espumas están ocultas. Ahora para poder mostrarlos, cuando hacemos clic en los botones, tenemos que crear una nueva clase, que en realidad no existe en HTML. Y luego usando JavaScript, tenemos que agregar a esta clase dos formas de evento onclick Así que primero vamos a crear clase y llamarlo display. Entonces agarra esas dos propiedades. Y cambiar valores. Necesitamos opacidad de uno y visibilidad visible. Ahora es el momento de escribir algo de JavaScript. En realidad, necesitamos vincular nuestros archivos JavaScript a la celda HTML. Vamos al archivo index.html y abajo abajo antes de cerrar body tag, open script tag. Y en el atributo fuente indica parte del archivo JavaScript. Necesitamos aquí script.js, luego abrir el archivo script.js. Entonces antes de adjuntar un evento click dos botones, voy a crear un par de variables. Tenemos que crear variables para los modelos, y necesitamos seleccionar ambos modelos por separado. Como recuerda, asignamos a cada uno de ellos nombres de clase individuales. Quiero decir, envoltorio de formulario de registro y envoltorio de formulario de inicio de sesión. Por lo que necesitamos usar esas clases para seleccionar modelos por separado. Así que volvamos al archivo script.js y creamos la variable, llámalo modelo de registro En realidad, como nota rápida aquí, si no estás familiarizado con JavaScript, en este caso dom, entonces puedes consultar nuestro bootcamp de JavaScript en Udemy, en el que te explicamos todos los conceptos principales desde básico hasta avanzado en detalle Puedes encontrar el enlace de este curso en la descripción. Ahora tenemos que seleccionar el envoltorio de formulario de registro para eso. Escribamos aquí documento. Entonces voy a usar el método llamado selector de consultas. Dentro de paréntesis, vamos a indicar className, que es registrarse para rápido. Y de la misma manera tenemos que seleccionar el envoltorio de formulario de inicio de sesión. Así que vamos a duplicar esta línea de código. Después cambiar el nombre de la variable que necesitamos aquí, modelo de inicio de sesión. Y también cambió className aquí mismo, login. Bien, además de los modelos, también tenemos que seleccionar los botones de registro e inicio de sesión Así que vamos a crear otra variable y llamarla sign up btn, que debería ser igual al selector de consulta de punto de documento Y entre paréntesis como nombre de clase, ¿verdad? Regístrate en BTM Lo mismo necesitamos para un botón de inicio de sesión. Así que vamos a duplicar esta línea de código. Después cambiar el nombre de la variable. Necesitamos aquí Iniciar sesión btn. Y también cambiar el nombre de la clase, ¿verdad? Iniciar sesión btn Bien, así que por ahora todos sabemos o pueden adjuntar click evento dos botones para eso tenemos que escribir aquí, regístrate btn. Entonces tenemos que adjuntar a él método llamado add event listener Dentro de paréntesis, tenemos que indicar el nombre del evento como primer argumento Y luego tenemos que pasar tu función. En este caso, voy a usar la función de flecha ES6. Y ahora tenemos que agregar para registrarte la visualización de clase modelo, que acabamos de crear en CSS. Para eso, tenemos que escribir aquí modelo de registro que necesitamos usar la propiedad llamada lista de clases Y para poder agregar una clase al modelo, tenemos que usar el método llamado add. Entre paréntesis. Tenemos que pasar un nombre de clase como argumento. Entonces ahora si hacemos clic en el botón Registrarse, entonces se mostrará el modelo de registro. Agradable, el botón de registro está funcionando. También necesitamos lo mismo para el botón de inicio de sesión. Así que vamos a duplicar este código y cambiar los nombres de las variables. Necesitamos Login, btn, y también login model Bien, hagamos clic en el botón Iniciar sesión y podrás ver que funciona como lo hace el botón de registro. Por ahora. Sólo esos dos botones están funcionando. No podemos cerrar modelos usando botones X. Y además no se desactiva el fondo cuando se muestran los modales Entonces ahora es el momento de encargarse de esas cosas. Al principio, quiero que los botones X funcionen. Para eso. Vamos a crear nuevas variables por separado para el botón X de registro y el botón X de inicio de sesión también Vamos a llamarlo seno variable de x, que debe ser igual al selector de consulta de punto de documento. Y luego indiquemos el nombre de tu clase, seno de x. Vamos a duplicarlo. Cambiar el nombre de la variable aquí mismo, iniciar sesión x. Y también cambió className Necesitamos iniciar sesión x, como los botones de registro e inicio de sesión También necesitamos adjuntar el evento de clic a los botones X. En realidad, voy a duplicar este código Entonces vamos a cambiar el nombre de variable, derecha, seno de x Así que ahora cuando hacemos clic en el botón X, tenemos que quitar la visualización de clase, a que agregamos dos modelos. Así que aquí en lugar de método add, necesitamos usar el método llamado remove. Hagamos lo mismo para iniciar sesión x. Duplicar este código. Cambiar nombre del botón aquí mismo iniciar sesión x. Y también cambiar nombre de modelo, ¿verdad? Iniciar sesión modal. Bien, vamos a mostrar modelos. Entonces, si hacemos clic en X botellas, entonces se irán. Entonces los botones X funcionan bien. En realidad por ahora tenemos aquí una situación un poco desordenada. Podemos mostrar ambos modelos al mismo tiempo, pero definitivamente es la mala experiencia de usuario. Necesitamos algunas restricciones. Es decir, cuando se muestra uno de esos modelos, debemos desactivar toda la página para que no podamos hacer clic en segundo botón. Para disolver la página, debemos cubrir ocho por contenedor de forma. Y entonces no podremos hacer click en ninguna parte de la página. Para eso. Al principio, tuvimos que asignar algunos estilos para formar contenedor. Vamos al archivo style.css y seleccionemos. Para contenedor. Voy a definir su posición como fija. Entonces para la visibilidad, definamos este color de fondo aquí mismo, RGBA, e insertándolo color negro con opacidad 0.7 Por ahora, el contenedor formado no es visible. Y en realidad para arreglar eso, tenemos que difundirlo en toda la página. Para eso, voy a definir las cuatro posiciones como cero. Quiero decir, necesitamos arriba cero, derecho cero, luego abajo cero, y finalmente dejar cero. Entonces ahora desde contenedor es posible. Pero al mismo tiempo, no podemos hacer clic en los botones y también hacer clic en cualquier parte de la página. Por supuesto que no es lo que queremos por defecto. Queremos que suceda cuando mostramos uno de esos modelos. Entonces por defecto tenemos que escondernos del contenedor. Y para eso necesitamos opacidad cero visibilidad oculta. Entonces necesitamos crear una nueva clase la cual se agregará al contenedor de formularios usando JavaScript, que gestionará que aparezca el contenedor de formularios. Así que vamos a crear clase y llamarla deshabilitada. Tenemos que copiar esas dos propiedades. Después pegarlos aquí y cambiar los valores. Necesitamos opacidad uno y visibilidad visible. Bien, ahora volvamos al archivo script.js. Entonces necesitamos desactivar la página cuando hacemos clic en una de esas batallas, me refiero a iniciar sesión o registrarse. Entonces tenemos que crear una nueva variable. Vamos a llamarlo formulario contenedor. Debe ser igual al selector de consultas de puntos de documentos. Y vamos a indicar el nombre de tu clúster para contenedor. Entonces dentro de esta función, tenemos que agregar a la granja la clase contenedor deshabilitada, que acabamos de crear. Entonces para eso necesitamos contenedor foráneo. Entonces la propiedad llamada lista de clases. Tenemos que usar aquí método add. Y dentro de paréntesis tenemos que indicar el nombre de clase igual Lo mismo necesitamos para un botón de inicio de sesión también. Entonces vamos a copiar esta línea y pegarla aquí. Entonces, si hacemos clic en uno de esos botones, entonces se mostrará el modelo. Y también se deshabilitará la página. Y luego si hacemos clic en el botón X para se ocultará, pero la página se quedará, aún deshabilitada. Entonces, cuando hacemos clic en los botones X, debemos eliminar la clase deshabilitada del contenedor de formularios. Copiemos este código y lo peguemos para ambos botones X. Y simplemente cambiar el método agregar a eliminado. Entonces ahora si probamos, entonces todo va a funcionar correctamente. Lo único que tenemos que hacer es suavizar la visualización y ocultación de los efectos. Para eso, tenemos que usar la transición. Tenemos que asignarlo al modelo. Vamos a insertar sus valores todos y 0.5 s. luego agarrarlo y asignarlo al contenedor de formulario también. Bien, entonces nuestro proyecto está hecho. Espero que haya sido realmente interesante y aprendan muchas cosas. Gracias por mirar. Nos vemos en el siguiente tutorial. 35. Proyecto 32 - Landing Page animado: Hola y bienvenidos a nuestro próximo tutorial de YouTube creado por código y crear. En este video, vamos a construir una landing page de aspecto bonito con algunos efectos de animación El proyecto se creará en base a HTML y CSS. Vamos a usar fotogramas clave CSS. Entonces en este video, podrás aprender sobre cómo crear animaciones usando solo CSS puro. Sigamos adelante y antes que nada, describamos nuestro proyecto. Como puedes ver, tenemos aquí fondo de imagen a pantalla completa Y en el centro de la página, tenemos un par de elementos. Se puede ver aquí encabezamiento, párrafo, dos botones distintos. Si vuelvo a cargar la página, entonces el encabezado y un párrafo aparecerán desde las direcciones opuestas con algún efecto de desvanecido Y en cuanto terminen, moviéndose, los botones se mostrarán en orden. Todos esos efectos de animación se crearán usando CSS, fotogramas clave y un par de propiedades de animación Bien, comencemos en el escritorio. Tengo una nueva carpeta llamada landing page animada, en la que tenemos dos archivos diferentes para HTML y CSS. Y también carpeta llamada images, que incluye una sola imagen para fondo de landing page. Vamos a abrir esta carpeta con VS Code. Dentro del archivo index.html. He preparado una estructura básica de documento HTML. Aquí puedes encontrar dos enlaces dentro del elemento head. Una para las fuentes de Google, voy a usar una fuente llamada doses. Y tenemos otro enlace para los estilos CSS. Bien, vamos a ejecutar este proyecto en el navegador usando un servidor en vivo Si no usas este paquete, entonces te recomiendo instalar el servidor en vivo desde el Administrador de extensiones. En realidad es un paquete muy práctico y útil. Bien, sigamos adelante y coloquemos el editor de código y navegador uno al lado del otro y comencemos a crear marcas HTML Va a ser uno sencillo. Vamos a tener sólo un par de elementos. Entonces, antes que nada, vamos a crear desarrollos que serán un contenedor para todo el contenido. Así que vamos a asignarle contenedor de clase. A continuación necesitamos otro desarrollo que va a envolver un par de elementos. Vamos a asignarle nombre de clase, banner. Y luego dentro del banner, crear elementos de encabezado H1. Vamos a insertar algún texto. Digamos mi sitio web. En realidad, voy a envolver el sitio web por elemento span porque quiero darle estilo a la segunda palabra de encabezado de una manera ligeramente diferente. A continuación, necesitamos un párrafo. Vamos a insertar aquí algunos textos creados por código y crear. Después de eso, voy a crear un botón con botón tipo. Además, vamos a asignarle un nombre de clase, BTN, left. Y como texto, vamos a insertarte explora. Bien, necesitamos el botón similar al segundo. Así que vamos a duplicar esta línea de código. Entonces cambia el nombre de la clase que necesitamos aquí, btn, ¿verdad? Y también en lugar de explorar, escribamos Suscríbete. Bien, eso es todo sobre el marcado HTML. Estamos listos para comenzar a diseñar el banner. Vayamos al archivo style.css. Al principio, estilizaremos todos los elementos y luego nos encargaremos de las animaciones. Sigamos adelante y creamos algunos estilos de reinicio. Seleccione todos los elementos usando asterisco. Voy a poner el margen y el relleno como cero. Y también cambiar la familia de fuentes. Usemos la fuente llamada ptosis y luego sans-serif. Bien, a continuación voy a seleccionar contenedor. En primer lugar, definamos su anchura y altura. Establecer con nosotros cien por ciento S para la altura. Usemos 100 vh. Si no está familiarizado con unidad de medida VH, significa altura de ventana gráfica Y en este caso, decimos que la altura de los contenedores debe ser el cien por ciento de la ventana gráfica Después de eso, voy a poner una imagen como fondo. Usemos aquí gradiente lineal y pasemos aquí algunos valores RGBA El primero va a ser 53, luego un dos a 66. Y opacidad 0.5. Como segundo valor RGBA. Pasemos año 47, 80, 63, y opacidad 0.6 A continuación, voy a indicar parte de la imagen Tenemos carpeta llamada images y tenemos que seleccionar bg dot JPG. A continuación, necesitamos posición de imagen de fondo para que se establezca un centro. También necesitamos aquí no repetir. Y por último, voy a usar sitios de fondo propiedad con cobertura de valor. Bien, así como pueden ver, la imagen se establece como fondo del contenedor Y ahora tenemos que empezar a trabajar en la pancarta. Así que vamos a seleccionarlo usando ClassName Banner. Al principio, fijemos su ancho como 100%. Significa que el banner ocupará el 100 por ciento del ancho de su elemento padre, en este caso contenedor. Ahora voy a encargarme de la posición de la pancarta. Voy a colocarlo en el centro de la página. En realidad, no va a ser un centrado perfecto. Quiero decir, quiero centrarlo perfectamente horizontalmente pero no verticalmente. Para eso, voy a usar alguna técnica. Fijemos su posición como absoluta. Después definir la posición superior como 40 por ciento, luego a la izquierda como 50 por ciento. Por lo que ahora la pancarta se mueve de arriba a abajo en un 40 por ciento y de izquierda a derecha en un 50 por ciento. Pero esa no es la posición que queremos vincularlos para que tengan. Tenemos que colocarlo en el centro. Y para eso, tenemos que usar transform translate. Tenemos que pasarte los siguientes valores. Necesitamos -50 por ciento y luego otra vez -50 por ciento. Entonces, usando transform translate, movimos el banner de su posición actual en un 50 por ciento al lado izquierdo y un 50 por ciento al alza. Lo siguiente que quiero hacer con respecto al banner es colocar elementos en el centro dentro de la caja. Y para eso tenemos que usar el centro de alineación de texto. Bien, sigamos adelante y diseñemos elementos de rumbo. Seleccionarlo, derecho, ban o H1. Aumentemos el tamaño de la fuente. Que sea un dos pixeles. Luego cambia de color. Voy a usar tu color D, D, D. Además, quiero hacer que la fuente sea un poco más ligera usando font-weight Entonces 800. Y por último crear algo de espacio en la parte inferior usando margen, dos píxeles inferiores. ¿Bien? Como recuerdo envolvimos segunda palabra de encabezado. Me refiero a sitio web por elemento span. Entonces voy a seleccionarlo bien, banner span. Quiero transformar texto en mayúsculas. Para ello, vamos a usar texto transformar mayúsculas. Entonces hazlo un poco más audaz. Peso de la fuente 700. Y también hacen que su color sea blanco. Cuello blanco, f, f. Bien, eso es todo sobre rumbo Vamos a darle algunos estilos al párrafo. Selecciónela, banner derecho p. Definamos su tamaño de fuente como 50 píxeles. Después haz los textos más claros usando font-weight, 300, cambia de color, hazlo e, e. y por último, crea algo de espacio en la parte inferior usando margen, abajo 20 píxeles Bien, así como encabezar el estilo de párrafo también. Y ahora tenemos que encargarnos de esos dos botones. En realidad, deberían ser casi idénticos. Entonces, al principio, voy a definir algunos estilos comunes para los botones. Seleccione ambos. ¿Correcto? Botón de pancarta. Defina el ancho como 180 píxeles. Después crea algún espacio usando relleno asignado a él, 12 píxeles. Siguiente Quiero crear algo de espacio alrededor de los botones para eso, vamos a usar el margen y establecerlo como 20 pixeles. Entonces en lugar de borde predeterminado, vamos a definir uno personalizado, borde derecho con los valores dos píxeles, sólido. Y vamos a hacer color E. Además, voy a hacer botones redondeados usando border-radius Vamos a establecerlo como 50 píxeles. Además de eso, quiero aumentar el tamaño de la fuente. Hagámoslo 18 pixeles. Después deshazte del contorno predeterminado usando outline none. También crea algo de espacio entre letras. Para ello, vamos a usar el espaciado entre letras con valor un píxel. Y por último, cambia de tipo de rumbo, hazlo señalar. Bien, eso es todo acerca de los estilos comunes para los botones. Ahora, voy a asignar a cada uno de ellos algunos estilos individuales. Así que vamos a seleccionar el botón, que se coloca en el lado izquierdo. Tiene un className btn a la izquierda. Cambiemos su color de fondo. Usa tu color, es decir, E y luego cambia el color del texto. Voy a usar aquí el color para. En realidad necesitamos propiedades similares para este segundo botón. Así que sigamos adelante y dupliquemos este código. Cambiar el nombre de clase que necesitamos aquí, ¿verdad? Entonces voy a establecer el color de fondo como transparente. Es color de piel. Vamos a usar ie. Bien, entonces finalmente, todos los elementos están estilizados. La página de préstamos se ve bien, y ahora es el momento de crear nuestras animaciones. En CSS, puedes crear animaciones usando fotogramas clave Dentro de los fotogramas clave, puede definir diferentes reglas CSS en diferentes pasos de animación Después usando un par de propiedades de animación, puedes aplicar esas reglas CSS a diferentes elementos para poder verlo en la práctica, Vamos a crear fotogramas clave Para eso necesitamos a la señal. Después palabra clave, fotogramas clave. Debe ir seguido del nombre de la animación. En realidad es opcional. Puedes llamarlo como quieras. Y en este caso, quiero nombrarlo como mover a la izquierda. ¿Bien? Entonces esta parte de la animación va a ser para el encabezado uno, encabezado dos se colocará al lado derecho por defecto. Además, quiero que esté oculto en por defecto, me refiero al estado inicial de un elemento cuando se inicia la animación. Entonces cuando recarguemos la página, quiero que se mueva de derecha a izquierda y también que aparezca con algún efecto de fundido Entonces para lograrlo, debemos definir esos estilos dentro de los fotogramas clave Quiero decir, estado inicial de un elemento y su estado final también. Para definir los estilos cuando comienza la animación, necesitamos escribir aquí cero por ciento. Además, en lugar de cero por ciento, puedes usar la palabra clave from. Entonces como decíamos, el rumbo debe colocarse hacia el lado derecho y debe ocultarse. Para eso tenemos que escribirte, transformar, luego traducir X. Y como argumento, coloquemos aquí ciento 20 pixeles. Y también para ocultar un elemento, necesitamos opacidad. Cero. S4, el punto final de la animación que queremos que se dirija se coloque de nuevo en su antigua posición. Y también debería ser visible. Con el fin de definir el punto final, podemos escribir aquí palabra clave para. En realidad en este caso sólo tenemos dos pasos. Somos capaces de usar esas palabras clave, me refiero a partir de N2. Pero a veces, creo que sobre todo tenemos más de dos pasos. Y entonces en ese caso deberíamos usar valores porcentuales. Entonces de todos modos, cambiemos esas palabras clave y usemos valores porcentuales. En lugar de desde cero. En lugar de dos. Necesitamos al 100%. Después agarra estrellas desde el primer paso. Inserta tu cero S para opacidad, necesitamos uno. Bien, por ahora, aquí no pasa nada. El rubro no se mueve. Necesitamos algo más para aplicar esos estilos a un elemento, necesitamos usar algunas propiedades de animación. Así que sigamos adelante y asignemos dos encabezamientos a esas propiedades. El primero va a ser el nombre de la animación. Vamos a asignarle un nombre de fotogramas clave, mover a la izquierda. Y entonces necesitamos la duración de la animación. Vamos a establecerlo como 2 s. Así que si guardamos eso, el encabezado se moverá de izquierda a derecha con algún efecto de fundido. En realidad aquí tenemos un pequeño problema. Estamos recibiendo una barra de desplazamiento hacia abajo mientras el encabezado se mueve. Eso es porque por defecto se coloca en el lado derecho y el espacio en la página no es suficiente. Entonces, para solucionar ese problema, necesitamos usar desbordamiento oculto. Y tenemos que asignarlo al contenedor. Como pueden ver, el acero. Y tal vez inesperadamente tenemos el mismo problema aquí. Ocurre porque banner se ha posicionado absoluto. Y por ahora está funcionando de acuerdo con el elemento del cuerpo. Tenemos que hacerlo funcionar de acuerdo al contenedor. Para ello, tenemos que asignar a la posición relativa del contenedor. Entonces ahora todo funciona a la perfección. A continuación, voy a crear fotogramas clave para un párrafo. Va a ser similar a los fotogramas clave de encabezado. Pero en este caso necesitamos usar una dirección opuesta. Quiero que el párrafo se mueva de izquierda a derecha. Así que sigamos adelante y dupliquemos este código. Cambiar el nombre de la animación. En este caso, voy a escribir mover a la derecha. Entonces en lugar de 120 píxeles, necesitamos aquí menos ciento 20 píxeles. Entonces adelante y asigne dos propiedades de párrafo que usamos para encabezado. Entonces voy a agarrarlos, pegar para p elementos y simplemente cambiar el nombre de la animación. Tenemos que movernos a la derecha Así que si guardamos, entonces como encabezado el párrafo se moverá de izquierda a derecha con algún efecto descolorido Y en general creará un bonito efecto de animación. ¿Bien? Entonces como invitado, ahora tenemos que trabajar en los botones por defecto, quiero que se oculten. Y luego después de mostrar encabezado y un párrafo, quiero que aparezcan en orden y con algún efecto de desvanecido. Así que vamos a crear nuevos fotogramas clave. Nombrarlo como animado btn. Entonces, en caso de botón, solo necesitamos manipular por Opacidad Entonces, en el cero por ciento, necesitamos que la opacidad sea cero S para el 100%. Voy a hacer que sea uno. ¿Bien? Así que los fotogramas clave están listos Sigamos adelante y asignemos dos botones, propiedades de animación. Empecemos desde btn, dejó el nombre de animación definido y lo configuramos como animado Entonces como yo duración, vamos a usar un segundo. Además de esas dos propiedades, necesitamos un poco de tiempo de retraso porque quiero que aparezcan las de Batson cuando las animaciones de encabezado y párrafo están a punto de terminar. Así que vamos a usar el retardo de animación de propiedad y establecerlo como 1.5 s. luego tomar esas tres propiedades y pegarlas para btn, justo también Para el segundo botón, necesitamos un poco más de tiempo de retardo. Entonces cambiemos su valor y hagamos 2.3 s. Bien, guardemos y veamos qué va a pasar. Como puedes ver, mientras se ejecutan animaciones de encabezado y un párrafo, para ser más precisos, durante el tiempo de retardo, los botones son visibles y en cuanto termina el posterior, empiezan a animarse Entonces necesitamos ocultarlos durante el tiempo de retraso. Y para eso tenemos que usar otra propiedad llamada modo película de animación. Y tenemos que ponerla como al revés. Entonces en este caso, decimos que durante el tiempo de retardo, los elementos por defecto tendrán este estilo particular. Entonces, en otras palabras, durante el tiempo de retardo, los botones estarán ocultos. Agarremos este código y péguelo para el segundo botón también. Entonces Guardar. Y aquí vamos. Ahora todo funciona a la perfección. Tenemos aquí una bonita landing page animada. Bien, en realidad eso es todo. Nuestro proyecto está hecho. Y antes de terminar este tutorial, quiero mostrarte una cosa más respecto a las propiedades de animación. Como puede ver, utilizamos varios de ellos. Y en lugar de hacer eso, podemos escribirlos de una manera corta. Solo necesitamos usar la propiedad llamada animación. Y luego tenemos que asignarle a cada nombre, mover a la izquierda, a lo que debe seguir la duración. Vamos a copiar esta línea y pegarla para párrafo. Cambiar Nombre. Tenemos que movernos a la derecha. Vamos a ahorrar. Y ves que todo funciona exactamente de la misma manera. ¿Bien? En realidad, no voy a cambiar propiedades por Batson's. Creo que verás claramente cómo funciona para que puedas hacerlo por tu cuenta. Bien, vamos a verlo. Ya terminamos con este proyecto. Espero que lo hayas disfrutado y hayas aprendido algunas cosas útiles. Nos vemos en el siguiente tutorial. 36. Proyecto 33 - botón 3D: Hola a todos y bienvenidos a nuestro próximo tutorial. En este video, vamos a construir un botón 3D usando solo HTML y CSS puros. Y creo que será realmente interesante y útil porque podrás aprender sobre algunos trucos y técnicas geniales usando solo HTML y CSS. Así que comencemos. Como siempre. En primer lugar, describamos lo que vamos a crear. Entonces como veis, tenemos aquí imagen de fondo a pantalla completa. Y en el centro de la página tenemos botón 3D. Se coloca en el espacio 3D. Y cuando pasamos el cursor sobre él, está rotando con un efecto realmente agradable Entonces espero que estés disfrutando de este pequeño proyecto. En escritorio, he creado nueva carpeta en la que tengo dos archivos diferentes para HTML y CSS. Además, tengo aquí otra carpeta que incluye una imagen para fondo. Sigamos adelante y abramos esta carpeta con código VS. Dentro del archivo index.html. Contamos con estructura básica de documento HTML. En el interior tenía elementos. Hay dos enlaces, uno para el archivo style.css y otro para las fuentes de Google. A lo largo de este proyecto, vamos a utilizar teléfonos llamados losa. ¿Bien? Bien, sigamos adelante y ejecutemos este archivo en el navegador usando servidor en vivo Para obtener esta extensión, hay que buscarla en Extension Manager e instalarla. Bien, coloquemos el editor y el navegador uno al lado del otro para que funcione de manera más conveniente y flexible y comencemos a construir el marcado HTML Va a ser una muy sencilla. Solo necesitamos crear desarrollos, que va a ser contenedor. Entonces dentro de ella tenemos que insertar botón. Vamos a asignarle el nombre de clase BTN. Y también como texto aquí mismo, suscríbete. Bien, eso es todo respecto a HTML, vayamos al archivo style.css y escribamos algunos estilos En primer lugar, voy a crear algunos estilos de reset. Seleccionemos todos los elementos usando asteriscos y establecemos el margen y el relleno como cero. A continuación, tenemos que encargarnos del contenedor. Así que vamos a seleccionarlo. Al principio. Voy a definir su anchura y altura. Vamos a establecer con como 100 por ciento. En cuanto a la altura. Voy a asignarle 100 vh. En realidad, hemos explicado cómo funciona la altura de la ventana gráfica en otros videos Pero nuevamente, en este caso, decimos que la altura del contenedor, debería ser cien por ciento de Viewport Siguiente Voy a establecer la imagen como fondo de contenedor. Vamos a usar tu gradiente lineal. Voy a pasar tus valores RGBA, ¿verdad? 000 y opacidad puntos siete. Entonces otra vez, necesitamos RGBA valor 000, opacidad 0.8. Entonces voy a indicar dentro de URL parte de imagen, tenemos carpeta llamada images. Seleccionemos bg dot JPEG. Entonces voy a definir posición de fondo. Va a ser centro. Y también necesitamos aquí no repetir. Y por último, voy a usar la propiedad de tamaño de fondo con una cobertura de valor. Bien, entonces ahora el fondo se ve muy bien. Y lo último con respecto al contenedor es que vamos a colocar botón perfectamente en el centro de la página. En realidad, lo manejaremos usando Flexbox. Así que escribamos aquí display flex. Y entonces necesitamos usar justificar el contenido con el centro de valores y alinear los elementos. De nuevo con un centro de valor. Bien, eso es todo sobre contenedor. A continuación tenemos que encargarnos, pero vamos a seguir adelante y seleccionarlo está en nombre de clase BTN Al principio. Vamos a asignar a comer algunos estilos habituales de ancho definido y hacerlo 350 píxeles. Luego establece la altura como 100 píxeles, cambia el color de fondo. En este caso, voy a usar gradiente lineal. Pasemos tus dos colores diferentes. El primero va a ser 8539, 16s4. Segundo, voy a pasar por aquí 63019. Bien. Entonces así es como está buscando nuestro botón por ahora. Es realmente enorme, pero en realidad necesitamos esto. Sigamos y agreguemos algunos estilos más. Se deshace del borde y contorno predeterminados , borde derecho ninguno. Y bosquejar ninguno. Entonces sigamos adelante y trabajemos en el texto. Cambiar font-family. Usa tu fuente llamada losa 27 píxeles que serif, mayor tamaño de fuente Hagámoslo 35 pixeles. A continuación, voy a hacer letras mayúsculas usando transformación de texto Mayúscula, también crea algo de espacio entre ellas usando el espaciado entre letras Vamos a configurarlo como cuatro píxeles y luego cambiar de color, hacerlo blanco. Paso a paso. Nuestro botón se está poniendo más bonito. A continuación, voy a agregar algo de sombra al texto. Para ello, tenemos que usar la propiedad llamada sombra de texto. Insertemos aquí los siguientes valores. Necesitamos cero, luego diez píxeles, nuevamente, diez píxeles y color negro. Y también cambiar tipo de más basto. Hagámoslo señalar. Bien. En este punto con personalización de botón, ya terminamos. Es hora de seguir adelante y empezar a transformarlo en elementos 3D. En primer lugar, necesitamos crear un entorno 3D para Bateson Y para eso tenemos que asignar a su elemento padre la propiedad llamada perspectiva. Vamos a asignar a cada valor mil píxeles. En realidad, la perspectiva define qué tan lejos está un elemento del usuario. Ahora necesitamos girar el botón De acuerdo a las direcciones x y z. Así que vamos a asignarle transformar la propiedad. Al principio, vamos a girar el botón a lo largo del eje x. Gire x e inserte sus 70 grados. Entonces como puedes ver, el botón se gira, pero además de la dirección x, también tenemos que girarlo a lo largo del eje z Entonces necesitamos aquí rotar Z con valor 30 grados. ¿Bien? Entonces esa es la posición que queremos que tengan por defecto. Ahora necesitamos darle forma de botón de cuboide. En realidad, cuboide es como un cubo, pero tiene forma de rectángulo Lo estamos haciendo para transformarlo en aún más elementos 3D. Me gustaría señalar que esto va a ser algo no del todo sencillo. Usaremos algunas cosas avanzadas de CSS. Por lo que recomiendo estar más concentrados y enfocados en las cosas que vamos a mostrar. Entonces vamos a usar antes y después pseudo elementos. Seleccionemos el botón con. Antes de pseudo elementos. Escribir btn antes del contenido en vivo como vacío, asignado a él cadena vacía Después defina el ancho como cien por ciento y el alto como 15 píxeles. Para que los elementos sean visibles, vamos a asignarle color de fondo y hacerlo rojo por un tiempo Quiero decir, sólo para demostración. Además, necesitamos definir esta posición porque lo contrario no se le aplicará la altura y el ancho. Así que pongamos su posición como absoluta. Entonces aquí está antes de pseudo elementos, necesitamos cambiar su posición y colocarlo en algún lugar aquí frente a botón Así que pongamos abajo y las posiciones correctas como cero. El elemento ha cambiado su posición, pero eso no es lo que queremos. Eventualmente, necesitamos girarlo a lo largo del eje x 90 grados. ¿Bien? Entonces como se puede ver, en este punto, elemento ya no es visible. La razón es que no tiene sus propios entornos 3D porque es un elemento hijo de botón. Y no hereda exhibiciones del contenedor. Para lograrlo, en CSS, tenemos una propiedad llamada transform style, cual debe tener valor preserve 3D, y tenemos que asignarla a. Pero así vamos a escribir transformar estilo y asignado a ello preservar 3D. El elemento se muestra de nuevo mal tenemos aquí otro problema. Por defecto, el origen de la transformación se establece como centro. Es decir, se puede imaginar que eje x va en el centro de los elementos. En este caso, no lo queremos. Queremos hacer origen de transformar fondo. En realidad, sé que estas cosas son un poco difíciles de entender, pero así es como funcionan. Si he viajado para entender será mejor probar esas cosas por tu cuenta. Así que sigamos adelante y escribamos transformar origen y establecerlo como fondo. Bien, entonces veamos qué queremos que obtenga. Paso a paso. Estamos consiguiendo la forma de cuboide. Ahora, voy a cambiar el color de fondo. Vamos a usar colores de combinación de degradado lineal. Voy a copiar el segundo y pegarlo aquí. Ahora como pueden ver, se ve mucho mejor. Entonces como anverso, necesitamos lo mismo. En el lado derecho. Tenemos que crearlo usando después de pseudo elementos. En realidad vamos a necesitar propiedades similares. Así que vamos a duplicar todo este código. Después cambia antes a, después. En primer lugar, cambiemos de posición en lugar de abajo, necesitamos aquí arriba. Ves elementos terminaron detrás del botón. Entonces necesitamos girarlo de acuerdo al eje y con valor -90 grados Entonces ves donde los elementos se acaban de un vistazo, parece peso, pero la razón es que necesitamos cambiar los valores de altura y ancho. En caso de después de pseudo elementos, necesitamos cambiar los valores para height y width Ancho como 15 pixeles de alto con cien por ciento. Bien, ahora ya casi estamos ahí. Lo único que tenemos que hacer es cambiar origen de transformar. En este caso, en lugar de fondo, tenemos que hacerlo, bien. Bien, así que finalmente llegamos aquí, necesitábamos dar forma. Lo último con respecto a su estilo es cambiar el color de fondo de los pseudo elementos posteriores En este caso, vamos a agarrar el primer color del degradado lineal y pegarlo a usted. Bien, eso es lo de Batson. Ahora tenemos que hacerlo funcionar. Quiero decir, tenemos que crear un efecto de libración sobre la libración. Voy a girarlo a lo largo del eje x y z. Así que escribe btn con hover e inserta tu Transform. Girar X con argumentos 30 grados. Entonces necesitamos rotar Z con cero grados. Y por último, para un efecto suave, voy a usar la transición. Escribamos aquí transformar con duración 0.5 s. Bien, pasemos el cursor sobre el botón Y dijo que tenemos un efecto realmente impresionante. Bien, así que eso es todo sobre nuestros proyectos. Hemos creado un botón 3D genial, y espero que lo hayan disfrutado. Gracias por mirar. Nos vemos en el siguiente tutorial.