Construye 10 plantillas de diseño de interfaz de usuario completas y modernas

1. Introducción: Bienvenido al nuevo curso, donde podrás aprender sobre cómo crear plantillas de diseño modernas y hermosas para tus sitios web. Si quieres construir y personalizar tu portafolio, convertirte en un desarrollador experimentado y ser contratado, entonces este es el curso adecuado para ti. Construiremos juntos diez sitios web mega y conflictivos y receptivos con tres tecnologías principales, HTML, CSS y Java. Si tienes algunos conocimientos básicos de estas tecnologías, y aún así tienes algunos problemas para construir sus sitios web. O si quieres subir de nivel tus habilidades de desarrolladores y diseñadores, entonces vienes al lugar correcto. Creamos este curso con el fin de brindar a los estudiantes la mejor experiencia en tres tecnologías centrales y darles la oportunidad de crear las mejores plantillas de diseño que les permitan excitar a sus clientes Construiremos picantes para sitios web incompletos y no todas las partes de ellos desde cero. Estarán llenos de efectos y diseños modernos, bonitos y hermosos. Comenzaremos con proyectos relativamente simples y también pasaremos por algunas partes avanzadas. Podemos garantizarte que dominarás el desarrollo web front-end después de completar este curso. Mediante este curso, podrás obtener la inspiración que te ayudará a potenciar tus proyectos y ponerlos en tu portafolio. Dominar solo estas tecnologías centrales de desarrollo web front-end 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 algunos frameworks front-end y bibliotecas, que hoy en día son realmente populares y muy demandados El curso no es definitivamente pequeño. Así que ten paciencia y trata de sacarle el máximo partido a este curso sin apenas 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. 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 3. Proyecto 1 - Previsualización de proyecto: Bien, así que una vez que hayamos configurado todas las herramientas necesarias, ahora estamos listos para comenzar a construir nuestro primer proyecto El proyecto va a ser sobre algunos alimentos. Es decir, algo así como vender diferentes alimentos. Y consistirá en un par de secciones diferentes. Antes de empezar a escribir el código, voy a repasar el proyecto y describir cada sección. La primera sección va a ser la presentación de diapositivas de diferentes Font, Iconos impresionantes A continuación viene la sección de cartas en la que tendremos tres cartas diferentes con formas 3D y también con algún bonito efecto hover A continuación viene la galería. Consta de seis elementos de galería diferentes. Aquí tenemos imágenes con efectos de sombra multinivel. Si pasamos el cursor sobre ellos, entonces se mostrará alguna información con efectos bastante agradables y geniales Después de eso, tendremos un filtro simple con algunos elementos de texto y un campo de entrada con un botón. Bien, entonces esas son todas las secciones que vamos a construir Pero además de eso, tenemos aquí una bonita barra de navegación. Puedes ver aquí el ícono de Menú. Si hago clic en él, entonces el número lo mostrará desde la parte superior de la página web. Y los elementos de navegación aparecerán con algunos buenos efectos de fundido. Si hago clic en el icono en ese entonces no albert se esconderá. Bien, así que eso es todo sobre los proyectos. Lo construiremos usando un enfoque de fuerza de escritorio. Es decir, se construirá sobre un tamaño de pantalla extra grande, pero luego lo haremos receptivo a diferentes tamaños de pantalla. Si inspecciono la página y reviso el proyecto en diferentes tamaños de pantalla, verás que responde y se ve bien. Una cosa más a tener en cuenta, como decíamos, el proyecto está construido sobre un tamaño de pantalla extra grande. Entonces, si estás usando el tamaño de pantalla relativamente más pequeño que el proyecto, puede que no se vea bien durante las conferencias. Pero no tienes que preocuparte al final del día, nosotros lo haremos receptivo. Mientras tanto, puedes usar el modo de respuesta, establecer el ancho y la altura 1920 píxeles y 1080 píxeles y seguir los videos. Lo último que quiero mencionar es que puedes descargar este archivo fuente inicial y final. Se adjuntan a esta conferencia. Vamos a seguir adelante. 4. Proyecto 1 - Crea marcadores HTML para aterrizar y define estilos comunes: Bien, así que estamos listos para comenzar a construir nuestros proyectos. He creado una nueva carpeta en el escritorio llamada alimentos, en la que tengo otra carpeta para las imágenes. Sigamos adelante y abramos esta carpeta en código VS. Lo primero que voy a hacer es crear nuestros archivos de trabajo para HTML, CSS y JavaScript. Voy a llamarlos index.html, style.css, script.js. Después abre el archivo index.html y crea un documento HTML básico. Para eso, voy a usar un paquete de código VS incorporado llamado imagen. Necesitamos colocar el signo de exclamación de orina y golpear Tab o Enter Entonces aquí vamos. Aquí tenemos las etiquetas HTML básicas. Antes que nada, sigamos adelante y cambiemos el título. Voy a insertar aquí Alimentos. A continuación, vinculemos archivos CSS y JavaScript. Entonces voy a abrir la etiqueta de enlace. Y luego tenemos que especificar aquí la ruta del archivo. Solo necesitamos el nombre del archivo, style.css. En cuanto al JavaScript, voy a abrir la etiqueta script justo encima de la etiqueta de cuerpo de cierre. Y en el atributo source, necesitamos especificar script.js. Además de eso, voy a traer aquí un enlace más para Font, Iconos impresionantes. Así que vayamos al Google y busquemos Font Awesome, CDN, JS, y tomemos el primer enlace desde aquí Luego abra una etiqueta de enlace en los elementos head y pegue el enlace como el valor del atributo de referencia h. Bien, Así que los tres archivos están conectados y ahora es el momento de ejecutar el proyecto al navegador. Para eso, voy a usar uno de los paquetes de código VS que se llama servidor en vivo, lo que nos permite ejecutar el proyecto en vivo al navegador y realizar actualizaciones y cambios sin actualizar la página cada vez. Bien, finalmente, voy a colocar el editor de texto y el navegador, así. Y empezar. Vamos a construir el proyecto sección por sección. Crearemos el marcado para cada sección y luego diseñaremos cada una de ellas. Voy a comenzar con la primera sección. Consiste en el encabezado y un par de iconos Font Awesome, que como puedes ver, están animando muy bien Así que sigamos adelante y comencemos a crear el marcado HTML. Al principio, vamos a abrir los elementos div, que va a ser el contenedor. Vamos a asignarle un evento contenedor de nombre de clase. Voy a insertar tus comentarios en la sección uno. Y la sección uno. Después abre el elemento de sección con una clase, Sección uno. Entonces como dijimos, este elemento de sección incluirá el encabezado y un par de iconos Font Awesome. Entonces abramos la etiqueta de encabezado H1 con el encabezado de sección de clase. Como el contenido. Insertemos una variedad de alimentos. A continuación necesitamos insertar tus iconos Font, Awesome. Pero primero, vamos a abrir la etiqueta div, que va a ser la envoltura de estos iconos. Voy a asignarle iconos de la sección uno de clase. Entonces en general tendremos diez iconos diferentes. Así que sigamos adelante y creémoslos rápidamente. Voy a abrir, me etiqueta con las clases FAS, FAA huevo. Entonces dupliquemos esta línea de código nueve veces y cambiemos rápidamente los nombres de las clases. El segundo va a ser el gofre Stroop. Entonces tendremos queso, hot dog. El siguiente va a ser byte de baqueta. Entonces vamos a sacar manzana, helado. A continuación, tendremos pescado, galleta y hermano. Bien, así que eso es todo sobre el marcado HTML de la primera sección Ahora tenemos que empezar a escribir algunos CSS. A lo largo de este proyecto, voy a usar uno de los teléfonos de Google llamado non-metal Así que vayamos al sitio web de Google Fonts y busquemos a Nieto. Entonces voy a agarrar aquí todos los estilos excepto Itálica Así que vamos a revisarlos. Entonces. Voy a agarrar la URL. Para eso. Tenemos que hacer clic en Importar y luego copiar esta URL aquí. Vamos a pegarlo en archivo CSS. Bien, Siguiente voy a crear un par de estilos comunes y predeterminados Entonces voy a insertar sus comentarios. Estilos comunes. Después final de estilos comunes. Después selecciona cada elemento para eso. Voy a usar un asterisco. Entonces al principio, voy a deshacerme del margen predeterminado y el relleno de cada elemento. Establezca ambos a cero. Entonces voy a establecer el dimensionamiento de cajas. Caja de frontera. También deshazte de los valores predeterminados en las líneas de los elementos de enlace. Para eso tenemos que usar texto-decoración. Obtendremos valor ninguno. A continuación, elimine el contorno predeterminado. Tenemos que fijarlo en ninguno. También, cambie la familia de fuentes. Vamos a ponerla a nuevo Nieto sans-serif. Y por último, cambia el peso de la fuente. Voy a llegar a ser 400. Bien, así como puedes ver, algunos de los estilos comunes se aplican a los elementos Lo siguiente que voy a hacer es establecer el tamaño de fuente. Entonces a lo largo de este proyecto, voy a usar una rampa como unidad de medida. Por defecto, una RAM 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 ello, tenemos que disminuir el tamaño de fuente del elemento HTML. Tenemos que hacerlo 62.5 por ciento. Entonces en este caso, una RAM será igual a diez píxeles. ¿Bien? Entonces, como puedes ver, los elementos se hicieron más pequeños y en realidad con unos estilos comunes y predeterminados. Ya terminamos. Sigamos adelante y comencemos a diseñar la sección uno 5. Proyecto 1 - página de aterrizaje de estilo y crea diapositivas: Entonces voy a Personalizar el elemento de sección en sí. Pero al principio, insertemos aquí nuevos comentarios, sección uno. Y fuera de la Sección Uno. A continuación, seleccione Elementos de sección. Entonces antes que nada, voy a establecer el ancho y la altura. Vamos a hacer con como lo hizo presente. Esa es probablemente la altura. Voy a hacer que sea el 100 por ciento de la ventanilla. Por lo tanto, pongámoslo 200 VH. Luego cambia el color de fondo. Usemos tu color 333. Bien, para que pueda ver esta Sección uno se extiende a toda la página y se cambia el color de fondo. A continuación, voy a colocar el contenido en el centro. Y para eso voy a usar flexbox. Necesitamos establecer la propiedad de visualización en flex. Ahora mismo. Los elementos se colocan horizontalmente en una fila, y en realidad no los necesitamos. Entonces tenemos que cambiar la dirección del flex y la columna Make It. Siguiente. Para colocar los elementos horizontalmente en el centro, tenemos que usar align items center. Entonces los elementos se colocan en el centro. Y ahora voy a agregar algo de espacio entre ellos. Para ello, vamos a usar la propiedad de contenido de justificación con un espacio de valor de manera uniforme. Bien, sentémonos con respecto al elemento Sección. Sigamos adelante y Personalicemos el encabezado. Voy a seleccionarlo. En primer lugar, vamos a establecer el tamaño de fuente en 12 RAM. También cambia el peso de la fuente. Voy a hacer que el rumbo sea más audaz. Vamos a establecerlo en 900. También cambia el color, hazlo blanco. Y voy a alinear el texto en el centro. Después de eso, hagamos sus palabras en mayúscula usando transformación de texto en mayúscula Y también voy a crear algún espacio entre las letras usando el espaciado del libro mayor con el valor 0.5 renta. Bien, Finalmente, vamos a crear un pequeño efecto de sombra. Voy a usar la sombra de texto con un valor es 0.3 RAM tres veces. Y como el color, voy a añadir aquí, 000, que es el hola negro. Bien, entonces el encabezado está personalizado y ahora tenemos que seguir adelante y cuidar los íconos Así que vamos a seguir adelante y seleccionarlos. En primer lugar, aumentemos el tamaño de la fuente, hagamos 35 RAM, y luego cambiemos el color. Voy a usar tu color, un 7982d. Bien, entonces tenemos aquí nuestros íconos, son mucho más grandes y lo llaman como recuerden, esos íconos deben colocarse en el centro y tenemos que animarlos. Primero. Vamos a asignarles posición absoluta. Entonces ahora mismo me colocan uno encima del otro. Sucede porque por defecto, la posición absoluta salta los elementos del flujo normal de la página. Además de eso, necesitamos fijar las posiciones de los iconos. Creo que ahora mismo sería mejor si ocultamos todos los iconos excepto uno, porque hará que nuestro proceso de trabajo sea más conveniente. Entonces voy a comentar todos los íconos excepto el primero. Justo después de eso. Arreglemos la posición del icono. Tenemos que colocarlo en el centro. Entonces tenemos que moverlo un poco hacia arriba y hacia el lado izquierdo. Para ello, vamos a usar la propiedad transform con la función translate. En realidad la disfunción nos permite mover los elementos según las direcciones horizontal o vertical. Es decir, según eje x y eje y. Como los valores. Vamos a Instituto -50 por ciento para ambas direcciones. Bien, eso es todo sobre la posición del icono. Por último, quiero añadir a su efecto de sombra. Entonces usemos de nuevo la sombra de texto. Instituye tu punto a RAM o tres veces. Usa de nuevo color negro. ¿Bien? Entonces, como puede ver, los iconos están personalizados y ahora es el momento de crear la presentación de diapositivas En primer lugar, volvamos a recuperar todos los íconos. Así que vamos a ocultar y mostrar los iconos usando la función de escala. Al principio, sigamos adelante y ocultemos todos los íconos. Por defecto, la función scale tiene el valor establecido en uno. Y para ocultar los elementos, necesitamos poner la escala a cero Así que ahora el icosaedro A continuación voy a mostrar el primer icono porque ellos Presentación de diapositivas comenzarán con el primer icono Para eso voy a asignar al primer icono y cambio de clase adicional. Y después seleccione el primero que pueda usando este nombre de clase. Necesitamos iconos de la Sección uno. Yo cambio. Para hacer visible el icono. Tenemos que establecer la escala en uno. Pero además de eso, necesitamos volver a usar la función translate porque lo contrario se sobrescribiría y la posición del icono cambiaría ¿Bien? El primer icono es visible y todos los demás los conservo, los caliento. Ahora tenemos que crear el Slideshow, y para eso voy a usar JavaScript. Así que sigamos adelante y abramos el archivo script.js. Para alternar entre los iconos. Tenemos que eliminar un cambio de clase de borde a todos los iconos en orden y también con algún intervalo. Lo primero que tenemos que hacer es seleccionar todos los iconos. Así que vamos a seguir adelante y crear nueva variable. Voy a llamar a los íconos. Eso para seleccionarlos, voy a usar uno de los métodos llamados selector de consultas. Todo lo que necesitamos para especificar aquí el nombre de la clase Sección uno iconos, seguido del ion. Entonces, en general, selector de consultas, todo método devuelve un objeto similar a una matriz llamado note least Sus ítems tienen números de índice basados en cero como array. Además, este objeto tiene una propiedad length que usaremos un poco más adelante. Entonces como dijimos, vamos a deslizar los íconos con algunas integrales. Voy a usar uno de los métodos incorporados llamado setInterval Nos permite ejecutar la función una y otra vez con algunos intervalos. Entonces este método toma dos argumentos. La primera va a ser una función de devolución de llamada, que se ejecutará una y otra vez En cuanto al segundo argumento va a ser la cantidad de tiempo y debe expresarse en milisegundos. En nuestro caso, voy a establecer el intervalo como 4,000 milisegundos. Bien, como recuerdas, ahora mismo, el primer ícono tiene cambio de clase Tenemos que seleccionar este icono para eliminar el cambio de clase de él, y luego agregar clase al siguiente icono. Así que vamos a seguir adelante y crear nueva variable. Voy a llamarlo icono. Después usa query, selecciona un método para seleccionar el elemento. Seleccionemos este elemento usando el cambio de clase. Después de eso, para eliminar el cambio de clase, tuvimos que acceder a las clases de este icono. Entonces voy a usar una de las propiedades se llama lista de clases. Nos da todas las clases que tiene el elemento. Tenemos que adjuntarlo al icono. Y ahora tenemos que usar uno de los métodos llamados removidos. Especificemos aquí el cambio de clase. Entonces ahora después de 4 s, el ítem se ocultará porque se eliminará el cambio de clase. Bien, a continuación tenemos que mostrar y ocultar otros íconos. Para ello, tenemos que tener acceso al siguiente icono. Para ello, voy a usar una de las propiedades llamadas next element sibling Vamos a adjuntarlo al icono. Por otra parte, tenemos que acceder a las clases de estos elementos. Y por último, tenemos que sumar a cada cambio de clase. En realidad, quiero mostrar todo el ciclo del Slideshow y quiero hacerlo rápido Entonces cambiemos 4 s en uno. Entonces, como veo, los íconos están cambiando después de cada segundo. Si inspecciono la página y muestro los elementos, verás cómo se agrega el cambio de clase y remoto de cada icono. Una vez que se elimina del último icono, entonces obtenemos un error diciendo que no puede leer la lista de clases de propiedad de null. Ocurre porque el último icono no tiene ningún hermano siguiente Para solucionar ese problema, tenemos que hacer algún trabajo extra cuando rastrea de alguna manera cada interruptor del icono. Para eso, voy a crear una nueva variable. En este caso, lo voy a declarar con una palabra clave lead porque se cambiará el valor de esta variable. Esta variable va a ser un contador y voy a ponerla en uno por defecto. Entonces en cada ejecución de la función, en cada cambio, este comentario debería aumentar en uno. Una vez que sea mayor que la longitud de los iconos, debemos volver a poner el contador en uno. Y también necesitamos mostrar el primer icono retroiluminado. Entonces, para aumentar el valor en uno, tenemos que usar el operador de incremento, que se expresa por dos signos más A continuación, necesitamos crear sentencia if. Y como condición, tenemos que verificar si yo es mayor que la longitud de punto del icono. Entonces, si esta condición es cierta, entonces significa que un ciclo de la Presentación de Diapositivas había terminado Así que tenemos que mostrar de nuevo el primer icono y poner el contador en uno. Para acceder al primer icono, voy a usar los iconos de la lista de nodos. Y luego tenemos que especificar el número de índice del primer icono, que va a ser cero. Entonces necesitamos de nuevo clase menos que el método add. Y tenemos que especificar aquí el cambio de nombre de clase. Además de eso, necesitamos establecer la variable IBEC en uno. ¿Bien? Entonces, si esta condición no es cierta, que necesitamos ejecutar esta línea de código. Así que vamos a crear declaraciones else e insertar aquí esta línea de código. ¿Bien? Entonces, una vez que todo el ciclo ha terminado, entonces vuelve a comenzar. Puedes verlo aquí en Dev Tools. Bien, ya casi terminamos con la Presentación de Diapositivas. Lo único que tendrá que hacer es agregar algún efecto de transición. Entonces usemos la transición. Entonces. Tenemos que especificar aquí transformar. Y como la duración voy a agregar aquí 0.3 s. además de eso, necesitamos sumar transición abajo también. Porque una vez que la escala de los ICD-10s disminuyó, el siguiente icono que viene debería esperar 4.3 s. Por lo tanto, necesitamos algún Así que vamos a Instituir tus 0.3 s. Así que ahora, como puedes ver, tenemos un efecto mucho más agradable Y lo único que voy a hacer es cambiar la hora y hacerla 4 s. Bien, eso es todo Ya terminamos con la primera sección. Sigamos adelante y nos ocupemos del siguiente. 6. Proyecto 1 - Crea y estira tarjetas 3D: La siguiente sección que vamos a crear va a ser la sección de tarjetas. Tendremos un rubro de sección y tres costos diferentes. Representarán algunas comidas populares. Las tarjetas tendrán formas 3D, y también incluirán un par de elementos diferentes como imágenes, nombres y botones. Una vez que pasemos el cursor sobre las cartas, éstas se moverán ligeramente hacia arriba con algún efecto de sombra Bien, veamos sobre esta sección. Sigamos adelante y comencemos a crear un marcado HTML. Vamos a insertar nuevos comentarios, sección dos y sección dos. Después abre los elementos de sección. Voy a asignarle clase sección dos. A continuación, voy a crear un elemento de encabezado H1. En realidad, este rubro va a ser similar al anterior. Tendrán los mismos estilos. Entonces voy a asignarle el mismo nombre de clase, encabezado de sección. En cuanto al contenido, pongamos aquí comidas populares. Entonces voy a agarrar estas toallas de esta partida de sección y pegarlas en estilos comunes. Bien, así como dijimos, tendremos tres cartas distintas Voy a envolverlos con un elemento div, que va a ser contenedor de tarjetas. A continuación, voy a abrir otra etiqueta div, que va a ser la tarjeta real. Por lo que está asignado a su tarjeta de clase. Entonces como dije, la tarjeta constará de tres elementos diferentes. El primero va a ser una imagen. Entonces es etiqueta de imagen abierta. Después en atributo fuente, vamos a seleccionar la imagen que necesitamos aquí, tarjeta IMG uno Y también voy a asignar a la clase de imagen llamada IMG. Bien, A continuación tendremos el nombre de la tarjeta, que estará representado por el encabezado. Vamos a abrir la etiqueta de encabezado h3 con una clase llamada name. En cuanto al contenido, insertemos aquí. Digamos pescado. Por último, vamos a crear aquí abajo. Voy a asignarle una clase llamada BTN. En cuanto al contenido, hagámoslo una frontera ahora. Bien, entonces aquí tenemos nuestra primera tarjeta. Además, puedes notar que el encabezado está por todo este estilo porque lo agregamos al mismo nombre de clase, encabezado de sección. Como dijimos, vamos a tener tres tarjetas. Entonces voy a duplicar la tarjeta dos veces y cambiar los nombres de las imágenes y también los nombres de las tarjetas. Entonces necesitamos aquí img2, pastel y luego IMG tres, Bien, entonces veamos sobre el marcado HTML. Sigamos adelante y personalicemos esta sección. Voy a insertar nuevos comentarios, sección dos y sección dos. A continuación, seleccione elemento de sección. Entonces antes que nada, voy a definir ancho y alto. Voy a ponerle demasiado duro presente. Para la altura. Voy a hacer que sea el cien por ciento de la ventanilla. Entonces vamos a 3,200 vh. Y también cambiar el color de fondo. Yo también voy a usar un nuevo color. Bien, a continuación, voy a alinear elementos usando Flexbox. Me refiero al rumbo de los elementos y al contenedor de las tarjetas. Entonces necesitamos aquí display flex. Como saben, coloca elementos uno al lado del otro. Entonces en este caso necesitamos cambiar la dirección. Hagámoslo columna. Y también voy a crear algún espacio entre los elementos flex usando justify content. Espacio entre. Y finalmente, crea algo de espacio dentro de esta sección usando relleno. Vamos a ponerlo a diez rem en la parte superior e inferior y a cero en los lados izquierdo y derecho. Bien, veamos sobre este elemento de sección. A continuación, voy a encargarme de las tarjetas. En primer lugar, seleccionemos el contenedor. Voy a colocar las cartas una al lado de la otra en fila. Para eso. De nuevo, voy a usar flexbox. Entonces para crear algún espacio entre los elementos, voy a usar justificar contenidos con un espacio de valor uniformemente Bien, así las cartas se colocan horizontalmente en fila, y ahora voy a personalizar la propia tarjeta Vamos a seleccionarlo. Al principio. Voy a definir el ancho. Hagámoslo correr. Y luego cambiar el color de fondo. Voy a usar tu color a 79, a a D. Ahora mismo como puedes ver, las imágenes son demasiado grandes. Así que sigamos adelante y arreglemos eso. Voy a seleccionar Imagen. Y luego pongamos su ancho al 100%. En este caso, la imagen ocupará el 100 por ciento de la ola de sus elementos padre, que es la tarjeta. Bien, entonces ahora tenemos un resultado mucho mejor. Sigamos adelante y sigamos peinando la tarjeta. Voy a crear algo de espacio dentro de la tarjeta usando relleno. Vamos a configurarlo para RAM en los cuatro lados. Entonces voy a alinear elementos usando Flexbox. Vamos a establecer la propiedad de visualización en flex. Además, necesitamos cambiar la dirección porque por defecto, display flex alinea los elementos horizontales en una fila Entonces vamos a crear algo de espacio entre los elementos usando justify content. Espacio entre. Y por último, para alinear los elementos en el centro horizontalmente, usemos el centro de alinear elementos. Bien, por último, voy a crear algún efecto de sombra. Usemos box shadow con los valores una RAM tres veces y con un color negro. Ahora mismo, Eso es todo respecto a la tarjeta. Sigamos adelante y personalicemos su nombre y el botón. Al principio, seleccionemos el nombre de la tarjeta. Voy a aumentar el tamaño de la fuente. Hagámoslo tres RAM. También cambia el peso de la fuente. Voy a hacer que el texto sea de color negrita. Vamos a asignarle un 900. También transforma texto en mayúsculas y crea algo de espacio entre las letras usando espaciado eléctrico con el valor 0.5 rampa Después de eso, voy a cambiar su color. Vamos a usar aquí 111. Y también crear algo de espacio en la parte superior e inferior usando margen. Voy a poner el margen a RAM cero. Bien, Finalmente, vamos a crear un pequeño efecto de sombra usando sombra de texto. Vamos a interferir. 0.15 corrió tres veces. Y luego otra vez el color negro. Bien, eso es lo del nombre de la tarjeta. Sigamos adelante y personalicemos el botón. Vamos a seleccionar llamado btn. En primer lugar, voy a establecer su ancho en 70%. Entonces voy a cambiar el color de fondo. Vamos a usar aquí 111, también cambiar el color del texto. En este caso, voy a usar color o 888. Y luego voy a hacer las esquinas de la caja y redondeadas usando border-radius con valor cinco ran Derecha. Después de eso. Voy a encargarme del texto del botón. Vamos a cambiar el tamaño de fuente, que sea 1.5 RAM. Además, voy a aumentar el peso de la fuente. Vamos a establecerlo en 800. Entonces crea algo de espacio entre las letras. Vamos a configurarlo para que apunte a carnero. A continuación, voy a capitalizar las palabras usando texto, transformar mayúsculas, y también deshacerme del borde predeterminado. Vamos a ponerla en ninguna. ¿Verdad? Entonces el botón se ve bien, pero necesitamos agregarle un par de estilos más. Voy a crear espacio dentro del botón usando relleno. Vamos a establecerlo en 0.5 rem en la parte superior e inferior y cero en los lados izquierdo y derecho. A continuación voy a cambiar el tipo del cursor, hacerlo puntero, y también crear alguna sombra. En este caso, la voy a crear en el lado izquierdo. Para eso, voy a insertar u -0.2 RAM, luego otra vez menos punto a RAM que punto a rampa Y el color negro. Cuando quieres crear una sombra en el lado izquierdo, entonces tienes que usar los valores negativos. Bien, entonces el botón está personalizado y ahora es el momento de darle forma a la tarjeta 3D Para eso, voy a usar antes y después pseudo elementos Sigamos adelante y comencemos por el lado izquierdo. Voy a usar antes pseudo elementos. En primer lugar, necesitamos definir el contenido que va a estar vacío. Entonces voy a cambiar la altura y anchura. Voy a establecer la altura al 100 por ciento. Para el ancho, hagámoslo uno RAM Y luego cambiemos el color de fondo. Voy a usar tu color 817824. Bien, entonces ahora mismo el elemento no es visible. Y para arreglarlo, voy a poner su posición a absoluta. Además de eso, necesitamos establecer la posición de la tarjeta a un pariente. Lo necesitamos para posicionar el pseudo elemento antes acuerdo con su elemento padre Entonces ahora el elemento es visible, pero necesitamos cambiar su posición. Tenemos que colocarlo en el lado izquierdo de la tarjeta. Así que sigamos adelante y definamos la propiedad superior. Vamos a ponerla a cero. Además, necesitamos definir la propiedad izquierda. Hagámoslo menos uno corrió. Entonces ahora la posición del elemento es fija, pero como puedes ver, necesitamos sesgarla un poco Vamos a usar la propiedad transform con la función skew. En este caso, necesitamos sesgar los elementos verticalmente. Entonces necesitamos usar aquí eje y. Matemos a los elementos por 45 grados. Bien, entonces el elemento está sesgado, pero aún así su posición no es Se pierde un poco por defecto cuando usamos la propiedad transform que el elemento se mueve según su centro. Por lo que el origen de la transformación se establece en el centro. Pero en este caso, tenemos que cambiarlo y hacerlo bien. Entonces ahora consideremos que el problema está arreglado. El elemento se posiciona perfectamente. Y lo último que voy a hacer es agregarle un poco de efecto de sombra. Usemos box-shadow con los valores -0.1 RAM. Entonces otra vez -0.1 RAM que necesitamos para 0.1 rem y el color negro Bien, eso es lo del lado izquierdo. Ahora, voy a encargarme del top. Y para eso, vamos a usar después de pseudo elementos. En realidad necesitamos usar las mismas propiedades para el pseudo elemento también, pero con valores diferentes Entonces voy a duplicar este código aquí y luego voy a hacer algunos cambios. Entonces necesitamos hacer que la altura sea una RAM. En cuanto al ancho, va a ser del 100%. A continuación, cambiemos el color de fondo. En este caso, voy a usar 8f83, 17. Entonces vivamos la posición absoluta tal como es. Como tanto las propiedades superior como izquierda, necesitamos menos una RAM como valor de la propiedad top. En cuanto a la propiedad izquierda va a ser cero. Bien, a continuación viene la propiedad transform con esta función Q En este caso, necesitamos escalar el elemento horizontalmente. Por lo tanto, necesitamos usar aquí eje x. En cuanto al origen de la transformación, necesitamos hacerlo fondo. Además, dejemos sombra de caja como es con la forma de las tarjetas. Ya terminamos. Por último, voy a crear un efecto hover. Antes de eso, voy a rotar y escalar un poco el código. Entonces usemos la propiedad transform. Voy a rotar verticalmente según el eje y. Vamos a insertar tus 20 grados. En cuanto a la función de sesgo, voy a sesgar los elementos horizontalmente Entonces necesitamos aquí eje x. Vamos a interferir menos dos grados. Bien, ahora voy a crear un efecto hover. Entonces, una vez que pasamos el cursor sobre la tarjeta, necesitamos moverla ligeramente hacia arriba. Necesitamos transformarnos. De nuevo con las funciones rotar y escalar. Necesitamos aquí 20 grados y luego menos dos grados. Y también necesitamos agregar aquí función Translate con el eje y y como valor, Let's entrevistador menos tres rampa Además de eso, voy a cambiar los efectos de sombra al flotar Entonces usemos box-shadow con dos rampas tres veces y con un color negro Bien, así que una vez que coloquemos el cursor sobre la tarjeta, entonces ellos se moverán hacia arriba y también cambiará la sombra En realidad, esas cosas pasan sin ningún efecto suave. Y para arreglarlo, usemos la transición. Necesitamos especificar aquí transformar con una duración 0.5 s. y también necesitamos una sombra de caja con la misma duración. Bien, entonces el efecto de transición funciona bien, y en realidad hemos terminado con esta sección Sigamos adelante y nos ocupemos del siguiente. 7. Proyecto 1 - Galería de crear y dar estilo a los alimentos: La siguiente sección va a ser la galería en la que tendremos seis imágenes de comida diferentes con algunos efectos agradables. Cada imagen tendrá varias sombras de colores. Cuando pasamos el cursor sobre la imagen, entonces se mostrará alguna información como el nombre de la comida, alguna descripción y dos líneas diferentes La imagen en sí tendrá algún efecto borroso. Y también la sombra de la imagen se extenderá muy bien. Y todos esos defectos sucederán sin problemas. Bien, sigamos adelante y comencemos a crear el marcado HTML Como es habitual, insertemos nuevos comentarios, sección tres. Y de la sección tres. Ese elemento de sección abierta asignado a cada clase, sección tres. Al minuto siguiente aquí, el encabezamiento de esta sección, que será similar a otros encabezamientos de sección Entonces voy a copiarlo de la sección anterior y luego voy a cambiar el contenido. Vamos a insertar aquí galería. Bien, así que en general tendremos seis artículos calóricos. Estarán representados por los elementos de enlace. Y antes de crearlos, voy a abrir la etiqueta div, que va a ser el wrapper de esos enlaces. Voy a asignar a la galería de clases. A continuación voy a abrir la etiqueta de enlace, que tendrá enlace de galería de clase. Además del atributo class, también voy a usar el atributo title. Nos permite mostrar algo de texto una vez que pasamos el cursor sobre el enlace, insertemos su pedido ahora Bien, entonces cada elemento de enlace consistirá en un encabezado de imagen y el párrafo Abramos la etiqueta de imagen y luego seleccionemos Gallery IMG one de la carpeta images También voy a asignar a clase de imagen alimentos IMG. A continuación viene h3 elementos de encabezamiento. Asignemos a la clase el nombre del alimento como el contenido. Vamos a insertar tus panqueques. Y por último, voy a insertar tu párrafo con una descripción completa de la clase. Y como el contenido, voy a poner aquí algún texto ficticio Bien, entonces aquí tenemos el primer ítem. Como dijimos, en general, tendremos seis de ellos. Entonces voy a duplicar el elemento link cinco veces y luego hacer algunos cambios. Necesitamos aquí, img2. Y el nombre va a ser cupcakes. Entonces tendremos AMG o tres. Inocuo. Entonces para el cuarto ítem, voy a insertar aquí la hamburguesa El siguiente va a ser Sahlman. En cuanto al sexto ítem, me voy a comer tus verduras. Bien, así que eso es todo sobre el marcado HTML. Ahora, estamos listos para comenzar a escribir algo de CSS. Voy a crear nuevos comentarios, sección tres. Y la sección tres. A continuación, seleccione elementos de sección. Al principio, voy a cambiar el color de fondo. Hagámoslo gris oscuro usando el color 333. Y también voy a crear algún espacio dentro de esta sección en la parte superior e inferior de la misma. Usar relleno con el valor es cinco, rem y cero. ¿Bien? Antes de empezar a personalizar la galería, quiero cuidar el tamaño de las imágenes porque en este momento son demasiado grandes. Entonces, seleccionemos Imagen. Voy a establecer con 220, 4% del view-port fuera del ancho. En cuanto a la altura, voy a hacerla 15 de ancho de ventana gráfica Me refiero al 15% del ancho de la ventanilla. Y también voy a usar la cubierta de alimentación de objetos, lo que nos permitirá mantener la calidad de la imagen. No se estirará. Bien, luego seleccione Galería, me refiero al contenedor de los enlaces Entonces en general vamos a tener seis enlaces y voy a colocarlos en filas. Voy a hacer eso usando flexbox. Necesitamos establecer la propiedad de visualización en flex. Y también para poder colocar imágenes en dos roles, necesitamos flex wrap con un valor wrap Así que ahora las imágenes se colocan en dos filas. A continuación, los voy a colocar en el centro y también crear algún espacio entre las imágenes. Entonces, para colocarlos en el centro, necesitamos alinear los elementos en el centro, y para crear algo de espacio entre las imágenes, necesitamos justificar el espacio de contenido de manera uniforme. Por último, voy a crear algún espacio entre el encabezado y la galería. Vamos a usar margen superior con el valor diez rampa. Bien, entonces con la maquetación, ya terminamos. Sigamos adelante y personalicemos los elementos del hacer. Sigamos adelante y comencemos con los nombres de los pies. Por lo que el nombre del pie debe tocarse en la esquina superior izquierda de la imagen Entonces voy a fijar su posición a absoluta. Entonces necesitamos establecer la posición de los elementos de enlace en relativo porque es un elemento padre y necesitamos posicionar el encabezado de acuerdo con el enlace. Y luego establecer las propiedades superiores e izquierdas para el nombre de la comida en tres rampa. Quiero decir, las dos propiedades. Bien. Por lo que los encabezamientos se posicionan de la manera correcta. Sigamos adelante y personalízalos. Voy a cambiar el tamaño de la fuente. Vamos a llegar a Ram. Entonces aumentemos el peso de la fuente. Voy a fijarlo en 700. Entonces transformemos el texto en mayúsculas. Crea algo de espacio entre las letras usando espaciado entre letras, 0.1 RAM. Y por último, cambia el color, hazlo blanco. Bien, eso es todo sobre el rumbo. A continuación, voy a personalizar el párrafo. Entonces sigamos adelante y seleccionémoslo. En primer lugar, voy a definir su posición como absoluta. Y luego voy a definir las propiedades de fondo e izquierda. Voy a establecer la propiedad de botón dos o tres, ancho de ventana gráfica En cuanto a la propiedad dejada, voy a hacerla al azar. Entonces se posiciona el párrafo. Pero como puedes ver, el diseño de la galería está desordenado. Voy a arreglarlo. Sigamos adelante y creamos algo de espacio entre los enlaces usando margen. Voy a hacerlo para rem en la parte superior e inferior y un rem en los lados izquierdo y derecho. Bien, entonces ahora el problema está arreglado. Sigamos adelante y agreguemos algunos estilos más al párrafo. A continuación, voy a definir el ancho y hacerlo 70%. Entonces cambiemos el tamaño de fuente, hagamos 1.5 RAM, y también cambiemos el peso de la fuente. Voy a hacerlo un poco más ligero. Vamos a establecerlo en 300. Después de eso, vamos a crear algo de espacio entre las letras, que sea 0.1 RAM. También, voy a transformar el texto en mayúsculas N. Finalmente, cambia el color, hazlo blanco Bien, entonces con un párrafo, ya terminamos. Es estilizado. Y ahora voy a crear dos líneas. Uno bajo el rubro y el segundo en el lado derecho del párrafo. Voy a crear esas líneas usando pseudo elementos antes y después Al principio, vamos a crear una línea en el lado derecho del párrafo. Usemos los pseudo elementos antes. En primer lugar, necesitamos definir el contenido. Hagámoslo vacío. Entonces voy a poner la posición a absoluta. Y para que la línea sea visible, definamos un ancho, hagamos que apunte a RAM. Además, necesitamos establecer la altura al 80 por ciento y luego cambiar el color de fondo, hacerlo blanco. Entonces la línea es factible, pero necesitamos cambiar su posición. Tenemos que colocarlo en el lado derecho del párrafo. Así que vamos a establecer la posición superior en, al ancho de la ventanilla. En cuanto a la propiedad dejada, voy a hacerla 80%. Bien, veamos con respecto a los pseudo elementos antes. Ahora, voy a crear una segunda línea. En realidad ambas líneas tendrán las mismas propiedades. Así que vamos a seguir adelante y duplicar este código y luego hacer algunos cambios. Voy a cambiar la primera posición. Vamos a hacerlo 30%. También. Tenemos que cambiar la propiedad izquierda. Vamos a configurarlo a, para ejecutar eso, voy a cambiar el ancho. Hagámoslo 90%. En cuanto a la altura, va a ser punto a rampa. ¿Bien? Entonces se crean las líneas y en realidad todos los elementos están casi personalizados. Lo único que voy a hacer antes de crear un efecto hover es crear un efecto de sombra multinivel Para hacer eso, solo necesitamos usar propiedad de sombra de caja con múltiples valores como así. Voy a crear la primera Sombra. Vamos a insertar su 0.3, 0.3 RAM que 0.1 RAM, y el color E9 a nueve a nueve Entonces se crea la primera sombra, luego sigue adelante y crea la siguiente. Voy a insertar aquí 0.5 rem, 0.5 rem 0.1 RAM, y el color A2 e946 Entonces el siguiente va a ser 0.7 rem, 0.7 rem, 0.1 RAM. Y llaman hasta 97 CE nueve. Probablemente ese sea el último. Hagámoslo 0.9 rampa. 0.9 ejecutó 0.1 RAM y el color e92 999. Bien, entonces aquí tenemos las sombras, y ahora estamos listos para crear un efecto hover Por defecto, esos elementos deben estar ocultos. Entonces comencemos con el encabezamiento. Voy a hacer que su ancho sea cero. Y además, necesitamos usar su propiedad de desbordamiento con el valor oculto. Entonces el rubro está oculto. A continuación, voy a ocultar el párrafo. En caso de párrafo, voy a usar opacidad de jugo con valor cero y también visibilidad oculta Entonces, como pueden ver, el párrafo también está oculto. Y ahora voy a esconder esas dos líneas. Voy a establecer la altura a cero para la línea vertical. En cuanto a la línea horizontal, pongamos su ancho a cero. Bien, así que todos los elementos están ocultos, y ahora podemos crear un efecto hover Voy a empezar con las líneas porque deberían aparecer en primer lugar. Así que vamos a seleccionar el enlace de la galería con hover, seguido del pseudo elemento before Aquí necesitamos establecer la altura al ocho por ciento. Duplicemos este código. Voy a cambiarme antes y después. Y también en lugar de altura, necesitamos ancho con el valor nueve por ciento. Además de eso, para que el efecto sea más inteligente, tenemos que usar la transición. Necesitamos aquí altura 0.5 s. Y también en una transición con 0.5 s. Bien, así que una vez que pasemos el cursor sobre la imagen, las líneas tangentes aparecerán A continuación voy a mostrar el rumbo. Entonces, sigamos adelante y seleccionemos el enlace de la galería con hover, seguido del nombre de la comida Como recordemos, disminuimos el tamaño del rumbo a cero. Entonces tenemos que establecer con el 200 por ciento. También para que el efecto sea más suave, nuevamente, necesitamos transición con los valores con 1.5 s. Y además de eso, necesitamos aquí algún tiempo de retraso porque al principio deberían aparecer las líneas y luego después de eso, tenemos que mostrar el encabezado. Así que vamos a establecer el tiempo de retardo 2.5 s. En realidad, este efecto de transición ocurrirá una vez que pasemos el cursor sobre la imagen Entonces, como ves, el encabezado empieza a mostrarse una vez que aparecen las líneas. Pero cuando salimos del ratón que el rumbo inmediatamente alturas. Y para arreglarlo, necesitamos otra transición, que debería formar parte del propio encabezamiento. Vamos a establecer con 2.3 s. Bien, entonces ahora todo funciona bien. Sigamos adelante y hagamos lo mismo para el párrafo. Seleccionemos el enlace de la galería con hover, seguido de la descripción de la comida Entonces ahora mismo el párrafo tiene opacidad cero y visibilidad oculta. Y ahora necesitamos opacidad con el valor uno. Visibilidad visible. También, necesitamos aquí la opacidad de transición que la duración un segundo y el tiempo de retardo, pero en este caso 1 s. y exactamente de la misma manera necesitamos usar la segunda transición Vamos a pasar opacidad con una duración 0.3 s. bien, entonces el poder del grupo funciona Y ahora tenemos que seguir adelante y cuidar la imagen. Como primero, cambiemos la sombra al flotar. Así que sigamos adelante y seleccionemos nuevo enlace de galería con hover Entonces necesitamos imagen alimentaria. En realidad, voy a copiar este código de aquí y simplemente cambiar los valores. Aquí necesitamos 1 g dos veces. Entonces para la segunda sombra tenemos que correr. Entonces el siguiente va a ser tres RAM. Entonces para el último, necesitamos de RAM. Además de eso, de nuevo, tenemos que usar la transición. Vamos a interferir todos y la duración 0.5 s. bien, así como puedes ver, la sombra está cambiando una vez que pasamos el cursor sobre la imagen Por supuesto que eso no es todo lo que necesitamos para agregar un par de cosas más a la imagen. Tenemos que hacerlo borroso. Y para eso, tenemos que usar una de las propiedades llamadas filtro con la función soplador. Usemos el azul y el valor, voy a colocar tu rampa de 0.5. Entonces como puedes ver, la imagen se vuelve borrosa. Y una vez que pasamos el cursor sobre él, podemos hacer que este efecto sea mucho más agradable si disminuimos la opacidad de la Hagámoslo 0.5. Bien, así que ahora tenemos un resultado mucho mejor. Y lo único que tenemos que hacer es aumentar ligeramente la escala de la imagen al flotar Para eso, usemos Transformar. Con la función de escala. Voy a aumentar la escala de la imagen a 1.1. Bien, así que ya casi terminamos. Todo funciona perfectamente. Pero tenemos aquí un pequeño tema. Como puedes ver, la línea vertical no es del todo visible porque terminó detrás de la imagen. Entonces para arreglarlo, tenemos que usar la propiedad z-index Hagámoslo más alto que cero, que es el valor predeterminado. Voy a hacer diez. Bien, así que eso es todo. Ya terminamos con la galería. Creo que se ve muy bien. Aquí usamos un par de efectos geniales, así que creo que te va a gustar. Bien, ahora es el momento de seguir adelante y encargarse de la siguiente sección. 8. Proyecto 1 - Crea y personaliza pies de página: El siguiente apartado va a ser el pie de página, que será sencillo. Tendremos un párrafo de encabezado, InputField con un botón y algún texto de copyright abajo. Sigamos adelante y comencemos a escribir el marcado HTML. Voy a insertar su nueva sección de comentarios para el final de la sección cuatro. Después abra el elemento de sección con una clase, sección cuatro. Entonces en general vamos a tener tres partes distintas y el pie de página, la primera va a ser el encabezado y el párrafo que se colocan en el lado izquierdo. Vamos a abrir el elemento div, que va a ser el envoltorio de esos dos elementos. Voy a asignarle sección de clase para texto. A continuación, abra los elementos de encabezado H2 con la sección de clase para rumbo. Y como los contenidos, voy a instituir inscribirme para el párrafo. Debe tener sección de clase para párrafo. Y como los contenidos, voy a instruir que seas el primero en enterarte de nuevos productos Bien, así que eso es todo sobre la primera parte. El siguiente van a ser los elementos formados, que incluirán el elemento de entrada y el fondo. Entonces es forma abierta con el formulario de registro de clase. Entonces voy a insertar tu entrada con el tipo e-mail. A continuación, voy a insertar tus entradas de formulario de inscripción a clase. Y también vamos a usar el atributo placeholder con un valor, ingresa tu correo electrónico Bien, eso es todo sobre las entradas siguiente botón Columnas. Vamos a establecer su tipo a enviar y también asignado a cada atributo de clase con un valor de registro formulario BTN En realidad, el botón estará representado por el icono Font Awesome. Entonces vamos a abrir elementos I con los nombres de clase FAS, FAA, flecha, ¿derecha? Bien, eso es lo de los elementos del formulario. Por último, voy a crear el párrafo para el texto de copyright. Entonces es el elemento p abierto con los derechos de autor de clase. Y luego como los contenidos, vamos a insertar código y crear, seguido del signo de copyright. Voy a usar aquí HTML5, entidad, ampersand, copy, punto y coma, y Todos los derechos reservados. Bien, así que con el marcado HTML, ya terminamos y podemos personalizar esta sección Insertemos nuevos comentarios en el archivo CSS. Necesitamos la sección cuatro. Sección cuatro. A continuación, seleccione elementos de sección. Al principio, voy a definir ancho y alto. Vamos a establecer con el 200 por ciento. En cuanto a la altura, voy a hacer que sea 30% de la ventana gráfica Y también cambiar el color de fondo. Vamos a usar aquí llamado 222. Bien, a continuación voy a encargarme del diseño de las tres partes. Voy a usar Flexbox. Vamos a establecer la propiedad de visualización en flex. Y luego para crear algún espacio alrededor los elementos voy a usar justificar contenido con espacio de valor alrededor. Y también además de eso, voy a crear algo de espacio en la parte superior e inferior dentro de esta sección. Para eso, usemos padding con los valores tres, rem y cero. ¿Bien? Entonces ahora mismo, las tres partes se colocan horizontalmente en fila, pero en realidad no necesitamos eso. Voy a colocar el párrafo de copyright al final de esta sección. Así que vamos a encargarnos de la exposición. Voy a asignar a cada posición absoluta. Entonces para alinear el párrafo según su elemento padre, voy a establecer la posición del elemento section en un relativo. Y después de eso, definamos la posición inferior del párrafo y hagamos tres rondas. Bien, con el layout ya terminamos. Sigamos adelante y comencemos a personalizar cada uno de los elementos. Voy a seleccionar los elementos div wrapper. Vamos a asignarle texto transformar mayúsculas porque necesitamos ambos elementos, quiero decir que el encabezado y el párrafo estén en mayúscula Siguiente Voy a encargarme del Así que vamos a seleccionarlo. Voy a aumentar el tamaño de la fuente. Hagámosla RAM llena. Y también hacer que el texto sea negrita o usando el peso de fuente con un valor 900. Y finalmente cambiar el color. Voy a usar tu color H7N9, A2. Entonces se dirigen. Se ve bien. Sigamos adelante y comencemos el párrafo. Vamos a seleccionarlo. Cambia el tamaño de fuente, hazlo 1.5 redondo. En cuanto al color, voy a usar 888. Bien, eso es todo sobre la primera parte. Sigamos adelante y cuidemos el elemento formulario. Dentro del elemento form, tenemos una entrada y un botón, y los voy a colocar uno al lado Para eso, voy a usar flexbox. Y también con el fin de centrar ambos elementos, particularmente, usemos align items center. Entonces ahora mismo tenemos un pequeño problema aquí. Como puedes ver, el elemento formulario terminó un poco abajo. Y para arreglar eso, voy a asignar a la sección elementos, alinear elementos propiedad con el flex de valor, iniciar. En este caso, ambos artículos flexibles terminarán en la parte superior del contenedor. Bien, sigamos adelante y personalicemos el elemento de entrada. Vamos a seleccionarlo. En primer lugar, voy a definir ancho y alto. Vamos a establecer con 235 corridas. En cuanto a la altura, voy a hacer cinco RAM. Crea algo de espacio dentro de la entrada usando relleno. Pongámoslo a un rem en los cuatro lados y también cambiemos el borde. Voy a interferir punto a ram color sólido a 7982d. Bien, Siguiente, vamos a encargarnos del texto. Cambiemos el tamaño de fuente, que sea 1.6 RAM. También haga que los textos sean ligeramente más audaces usando el peso de la fuente con un valor de 700 A continuación, voy a crear algo de espacio entre las letras usando espaciado entre letras 0.1 RAM. Y también cambiar el color. Que vuelva a ser un 79 a a D. Bien, eso es todo con respecto a los elementos de entrada Y antes de personalizar el botón, voy a cambiar el color del atributo placeholder Así que vamos a seleccionar el elemento de entrada seguido del marcador de posición y le asignamos el color H7N9, a a D. Bien, ahora es el momento de cuidar el botón al principio, cambiemos su cambiemos Voy a establecer su posición en relativa. Usamos aquí posición relativa porque necesitamos usar la propiedad left. Y en caso de posición estática, que es la predeterminada, podemos acceder a esta propiedad. Vamos a establecer la propiedad left a -4.5 random. Bien, entonces el botón está posicionado y ahora necesitamos personalizarlo. En primer lugar, definamos el ancho y la altura. Voy a hacer las dos para RAM. Después cambia el color de fondo, hazlo 333. Y también cambiar el color. Se usa de nuevo H7N9 a a D. Bien, Entonces el botón ya se ve bien, pero necesitamos agregarle un par de Voy a deshacerme del borde predeterminado. Entonces, pongámoslo en ninguno. Después aumenta el tamaño de fuente, hazlo 1.8 RAM. Y también cambiar el tipo de la más gruesa, hacerla puntero. Bien, eso es todo sobre los elementos del formulario. Ahora necesitamos personalizar el último elemento de esta sección, que es el párrafo. Entonces vamos a cambiar el tamaño de fuente, hacer que se ejecute 1.7. Además, voy a hacer telefoneado más ligero usando font-weight con el Después cambia el color, hazlo e. Y también crea algo de espacio entre las letras. Hagámoslo 0.1 corrió. Bien, a continuación voy a crear el borde en la parte superior del párrafo Así que vamos a usar la propiedad border top con los valores punto 1 g, sólido. Y como el color, usemos 888. Y también vamos a crear algo de espacio usando padding top con el valor six ran. Se crea el borde, pero como ves, se extiende según el ancho del párrafo. Necesitamos que el borde ocupe todo el ancho de la página. Entonces voy a aumentar el ancho del párrafo. Vamos a establecerlo al cien por ciento. Ahora se incrementa el tamaño del borde, pero el párrafo ha terminado en el lado izquierdo. Y para arreglarlo, vamos a usar el centro de alineación de texto. Bien, entonces con el pie de página, ya terminamos. A continuación, tenemos que encargarnos de la navegación. Entonces, sigamos adelante. 9. Proyecto 1 - Crear y estilo de una barra fija: La navegación va a ser una especie de interesante. Como puedes ver por defecto, está oculto y el icono Menú se muestra en la esquina superior izquierda de la página. Tiene una posición fija. Una vez que haga clic en él, entonces el número se mostrará desde arriba muy bien. Y todos los elementos de navegación aparecerán con algún efecto de desvanecido. Además, si pongo el cursor sobre ellos, entonces van a cambiar el color Si hago clic en el icono de menú de nuevo hacia abajo en Alberta se esconderá de nuevo. Veamos qué vamos a crear. Entonces, sigamos adelante y comencemos con el marcado HTML. Voy a escribirlo antes del contenedor. Vamos a insertar nuevos comentarios. Ahora bar. Y de Navarra. Luego abre los elementos de navegación HTML5 con la clase ahora par. Entonces, en general, tendremos cinco elementos de navegación diferentes. Serán representados por los iones de enlace, y cada uno de ellos incluirá un icono Font Awesome con algunos textos. Bien, vamos a abrir los elementos de enlace con la clase ahora por enlace. Entonces en aquí, I elemento con una clase es FAS un hogar que el icono Font Awesome será seguido por los elementos span. Vamos a insertar aquí a casa. Bien, entonces en general tendremos cinco elementos de navegación. adelante y dupliquemos el elemento link cuatro veces y luego cambiemos los nombres de clase y también el contenido de los elementos span. El segundo va a ser utensilios. Y como el contenido, vamos a escribir comidas. Entonces tendremos hamburguesa. El artículo va a ser hamburguesa. Entonces el siguiente va a ser pizza rebanada de pizza. Y el último artículo va a ser soso o contacto telefónico. Bien, entonces aquí tenemos los elementos de navegación. Lo único que hay que hacer es crear un elemento div para el icono de Menú que está asignado con Class Menu. En realidad este elemento va a estar vacío. Lo personalizaremos desde CSS. Dicho esto, respecto al marcado HTML, sigamos adelante y comencemos a escribir CSS Voy a insertar nuevos comentarios justo después de los estilos comunes que necesitamos aquí, navbar y de Navarra Después selecciona suficientes elementos. Y antes que nada, definir ancho y alto. Voy a establecer el ancho al 100%. En cuanto a la altura, hagamos que sea 14 RAM, y también cambiemos el color de fondo, hagámoslo negro. Bien, entonces aquí tenemos la barra de navegación. En realidad debería ser arreglado. Entonces necesitamos establecer su posición fijo y también hacer que la propiedad superior sea cero. Bien, así que si me desplazo hacia abajo por la página, entonces el número mantendrá su posición como fija Como puede ver, una vez nos desplazamos hacia abajo entonces algunos de los elementos y hacia arriba en la parte superior de la barra de navegación Y para arreglarlo, voy a usar la propiedad index con algún valor mayor, digamos 100. Entonces ahora el problema está arreglado. Sigamos adelante y nos ocupemos del diseño de los elementos de navegación. Para eso, voy a usar Flexbox. Vamos a establecer la propiedad de visualización para flexionar y luego centrar los elementos horizontalmente y así verticalmente usando justify-content center y align items Bien, entonces los artículos se colocan en el centro. Y lo último que quiero hacer con respecto al elemento nav es crear un pequeño efecto de sombra. Usemos sombra de caja. Eso parece apuntar a RAM tres veces y como el color. Usemos el negro. Bien, entonces dentro de ese elemento, ya terminamos. Sigamos adelante y personalicemos los elementos del enlace. Seleccionemos ahora por enlace. En primer lugar, voy a cambiar el color. Hagámoslo gris claro usando el color AAA. Y también, voy a crear algo de espacio en los lados izquierdo y derecho usando margen con un valor de 0.4 rampa. Bien, Siguiente vamos a personalizar los elementos I y también el span. Quiero hacerlos más grandes. Así que antes que nada, voy a seleccionar Fuente, Icono impresionante. Aumentemos su tamaño de fuente, que sea siete RAM. En cuanto al elemento span, vamos a cambiar su tamaño de fuente. 2.5 RAM. Entonces voy a hacer que los artículos sean más audaces. Vamos a establecer el peso de la fuente en 900. Además, voy a crear algún espacio entre las letras usando el espaciado entre letras, el valor 0.5 RAM. Y luego crea algo de espacio en la parte superior usando margen superior 0.5 redondo. Bien, así que consideremos que los elementos de navegación se ven mucho mejor, pero necesitamos cambiar el diseño Quiero decir, tenemos que colocar, puedo terminar el elemento span uno encima del otro. Entonces para eso, usemos flexbox. Entonces. Para colocar elementos en la columna, necesitamos cambiar la dirección. Hagámoslo columna. Y luego colocar los artículos en el centro. Quiero decir tanto vertical como horizontalmente. Utilice el centro de contenido justificado y alinee el centro de elementos. Los elementos de navegación se ven bien. Antes de seguir adelante y personalizar el ícono Menú, quiero crear un pequeño efecto hover Una vez que pasemos el cursor sobre los artículos, quiero cambiar ligeramente el color Entonces, seleccionemos un enlace de Albert con hover y cambiemos de color, hazlo blanco Además de eso, para que el efecto sea más suave, vamos a usar la transición con los valores color y 0.3 s. bien, eso es todo. Ahora mismo, dentro de los elementos de navegación ya estamos hechos. Sigamos adelante y personalicemos el ícono de Menú. En primer lugar, voy a definir ancho y alto. Vamos a establecer el ancho para que caiga la RAM. En cuanto a la altura, voy a hacer que sea seis RAM. Y también cambia el color de fondo, hazlo negro. Entonces en este momento el icono del menú no es visible porque se coloca detrás de la barra de navegación Entonces voy a colocarlo un poco abajo, como el icono del menú de la barra de navegación también debería tener una posición fija Entonces, fijemos la posición para arreglar. Después defina la propiedad superior, hágalo 15 RAM. En cuanto a la propiedad izquierda, voy a hacerla rampa cinco. Bien, así que ahora como puedes ver, el icono del menú es visible A continuación, voy a cuidar su forma, va a cambiar su forma usando border-radius En realidad, se pueden definir diferentes radios de borde en diferentes lados. Usemos border-radius. El primer valor pertenece a la esquina superior izquierda. Voy a hacer que sea 30 RAM. Entonces el siguiente es para esquina superior derecha. Hagámoslo pasar a carnero también. Entonces tendremos esquina inferior derecha. Voy a hacer que sea 15 RAM asfáltica la esquina inferior izquierda. Hagámoslo 15 RAM también. Bien, así como puedes ver, cambia la forma del icono del menú. A continuación, voy a agregarle un poco de efecto de sombra. Entonces usemos box-shadow. Eso es Instituto 0.13 veces con un color negro. Y además de eso, voy a añadir aquí otra sombra, pero del lado izquierdo. Así que voy a usar aquí 0.1 corrió dos veces con el signo menos, luego 0.1 RAM, y nuevamente el color negro. Y por último, cambiemos el tipo del cursor, hazlo puntero. Bien, eso es todo, sobre el ícono de Menú. A continuación voy a crear una línea que va a ser la parte del icono. Y lo crearemos usando el pseudo elemento before. Así que vamos a usar antes. En primer lugar, definir el contenido, hacerlo vacío. Entonces voy a poner, podemos escondernos. Hagamos con 0.3 RAM. En cuanto a la altura, voy a hacerla rampa 15, luego cambiar el color de fondo, hacerla negra. Y también establecer la posición en absoluto. Entonces la línea es visible. Como puede ver, tenemos que fijar su posición. Vamos a establecer la posición superior, dos -15 RAM asfáltica la posición izquierda, necesitamos colocar la línea en el centro. El ancho de la línea es igual a 0.3 RAM. Tenemos que moverlo al lado izquierdo en un 50 por ciento. Pero también hay que tomar en cuenta el ancho de la línea para poder centrarla perfectamente. Entonces para hacer eso, voy a usar la función calc, donde debemos calcular 50 por ciento -0.15 RAM, que es la mitad del ancho de la línea Entonces nuevamente, en este caso, la línea estará perfectamente centrada Bien, por último, agreguemos algún efecto de sombra a la línea. Usa box-shadow con los valores 0.1 RAM, cero, luego 0.1 RAM, y el color negro ¿Bien? Entonces con este estilo ya terminamos. Ahora tenemos que hacer la siesta o trabajar. Y para eso, voy a usar un poco de JavaScript. Antes de eso, voy a colocarlo ahora bar y el icono de Menú en sus posiciones predeterminadas. O sea, cuando ahora se ocultan los poros y el icono del Menú se coloca un poco arriba. Cambiemos la posición superior de Naropa y hagamos que sea -14 RAM En cuanto al ícono Menú, necesitamos cambiar su posición, la posición superior, y convertirlo en una ronda. Bien, así que todo está listo para hacer nuestro trabajo. Vamos a adjuntar un evento click al icono Menú. Así que vamos al archivo JavaScript y seleccionemos el menú usando el método QuerySelector A continuación tenemos que adjuntar a ella agregar oyente de eventos. Se necesitan dos argumentos. El primero es el tipo de evento. En este caso necesitamos camarilla. En cuanto al segundo argumento va a ser la función callback, que se ejecutará una vez que hagamos clic en el elemento Ahora necesitamos seleccionarlo ahora poro y el icono Menú, en realidad podemos hacerlo por separado, pero sería mejor si asignáramos a ambos elementos la misma clase, y luego seleccionamos ambos simultáneamente. Así que vamos a asignarles objetivo de clase. Ahora, para poder seleccionar en Napa y el icono Menú, voy a usar el método selector de consultas all. Después dentro del paréntesis como el nombre de la clase, voy a especificar objetivos Así que vamos a agregar algunos estilos nuevos a ambos elementos una vez que hagamos clic en el icono y luego nos deshagamos de esos estilos en el siguiente clic. Para ello, necesitamos mirar a través de la lista de nodos que es devuelta por el método query selector all. Tenemos que agregar a cada elemento una nueva clase usando el método toggle. Después de eso, definiremos nuevos estilos usando esta clase desde CSS. Entonces, para mirar a través de la lista de nodos, voy a usar uno de los métodos de ayuda de matriz llamados para cada uno. En realidad forEach método toma un argumento, que es una función de devolución de llamada. Y esta función se ejecutará para cada ítem en la lista de nodos. Así que vamos a insertar aquí una función de flecha. Esta función de devolución de llamada toma un argumento, que es el elemento actual en la lista A lo largo del bucle, voy a llamarlo ítem. Entonces ahora como dijimos, necesitamos agregar a ambos elementos una nueva clase usando el método toggle. Para eso, usemos una de las propiedades llamadas class list. Tenemos que adjuntarlo al artículo. Nos da todas las clases que tiene el elemento. Y también nos permite acceder a diferentes métodos para manipular las clases del elemento. En este caso, necesitamos usar un método toggle, que nos permita agregar clase al elemento si no lo tiene, y eliminar clase si el elemento la tiene. Bien, ahora tenemos que pasar aquí el nombre de la clase, llamémoslo cambio. Eso es todo sobre JavaScript. Ahora tenemos que escribir algunos CSS. Pero antes de eso, voy a demostrar que ambos elementos están recibiendo un cambio de clase onClick Entonces, si inspecciono la página y visualizo los elementos, y luego hago clic en el icono, verás que ambos elementos obtienen clases. Si vuelvo a hacer clic, entonces se eliminarán. Bien, ahora tenemos que definir nuevos estilos usando el cambio de clase. Seleccionemos el menú con cambio. Entonces, una vez que hacemos clic en el icono, necesitamos moverlo hacia abajo. Cambiemos su posición superior, que sea 15 RAM. Entonces, si hago clic en el icono, entonces se moverá hacia abajo. Y la próxima semana volverá a subir. Hagamos que este efecto sea más suave. Transición. Con un valor es superior y 0.4 s. ahora se puede ver que tenemos un resultado mucho mejor. A continuación voy a mostrar la barra de navegación. Así que vamos a seleccionarlo usando el cambio de clase. Voy a definir la posición superior. Hagámoslo cero. Y también usar transición para efecto suave Los valores top y 0.4 s. así que si hacemos clic en el icono que la novela se mostrará sin problemas, y luego se ocultará en el siguiente clic. Para que este efecto sea un poco más agradable, voy a agregar algo de tiempo de retraso al ícono de Menú Agreguemos aquí 0.2 s. Ahora el icono se mueve con cierto retraso, pero eso no es lo que queremos. No necesitamos el tiempo de retraso en la siguiente camarilla. Entonces voy a usar otra transición, pero con cambio de clase y sin ningún tiempo de retraso. Bien, ahora tenemos un mejor resultado, pero aún así no es lo que queremos. También necesitamos tiempo de retraso dentro del puerto ahora. Así que vamos a seguir adelante y sumar una nueva transición con un valor es top 0.4 s y 0.2 s, que es el tiempo de retardo. ¿Bien? Ahora como puedes ver, todo funciona a la perfección. Lo único que tuvo que hacer es mostrar elementos de navegación con algún efecto de desvanecido. En primer lugar, necesitamos ocultar todos los íconos. Entonces pongamos la opacidad a cero. Entonces necesitamos mostrar los elementos onclick, pero con diferente tiempo de retraso Entonces tenemos que seleccionar el enlace numérico con cambio de clase. Pongamos la opacidad a uno. Y después de eso, necesitamos definir la propiedad de transición para cada elemento de navegación con un tiempo de retardo diferente. Sigamos adelante y comencemos con el primer ítem. Necesitamos. Otra vez cambiar. Entonces, ahora pon link seguido por el n-ésimo selector hijo como valor Entrevistemos a uno. Significa que hemos seleccionado el primer enlace Nobel. Entonces como dijimos, necesitamos aquí transición con opacidad 0.4 s. Y como el tiempo de retardo, vamos a insertar sus 0.5 s. En general tenemos cinco ítems Entonces dupliquemos este código cuatro veces y cambiemos los valores. Para el segundo ítem necesitamos 0.6 s. Entonces el siguiente va a ser 0.7 s. Para el cuarto ítem, voy a pasar aquí 0.8 s. Y para el último ítem, Hagamos tiempo de demora 0.9 s. Así que si hago clic en el icono, entonces los elementos de navegación aparecerán muy bien con algún efecto de desvanecido. En realidad, ya casi terminamos. Aquí tenemos pequeños temas. Si coloco el cursor sobre los artículos, entonces ya no tendremos un efecto de desplazamiento suave Y también cuando cerramos la altura de los artículos novedosos sin transición. El motivo del primer número es que se sobrescribe la antigua transición del vínculo navarro Entonces sigamos adelante y agreguemos una transición, quiero decir, color a todos los artículos abajo. Hagamos la duración 0.3 s. En cuanto al segundo número, necesitamos agregar opacidad al enlace Navajo por defecto Hagamos los puntos de duración 2 s. bien, así que ahora todo funciona a la perfección Y finalmente, ya terminamos dentro de ahora donde en realidad hemos terminado de construir este proyecto. Lo único que hay que hacer es que sea sensible a diferentes tamaños de pantalla. 10. Proyecto 1 - Hacer que responda al proyecto: Entonces como dijimos al inicio de este proyecto, está construido sobre un tamaño de pantalla extra grande. Estoy en el tamaño de pantalla con 1920 pixeles de ancho y diez ADB, los de altura Ahora vamos a hacer que sea sensible en diferentes tamaños de pantalla. Tenemos que crear un par de puntos de quiebre diferentes. Y haremos que el proyecto sea receptivo usando media queries CSS. Ya preparé los puntos de quiebre en los que tenemos que hacer algunos cambios, así que no voy a perder el tiempo encontrándolos. Bien, sigamos adelante e inspeccionemos la página. Y luego cambiar al modo de respuesta. Entonces, como puede ver, el ancho y la altura están establecidos en 1920 píxeles y diez ADP Bien, entonces el primer punto de interrupción en el que necesitamos hacer algunos cambios va a ser de 1,400 píxeles Así que tenemos que crear una media query CSS con un ancho máximo de 1.400 píxeles Pero al principio, voy a insertar nuevos comentarios, responsivos e insensibles A continuación, cree una consulta de medios CSS y especifique el ancho máximo como 1,400 píxeles Entonces el punto de interrupción, voy a disminuir el tamaño de fuente del elemento HTML Hagámoslo 50 por ciento. Disminuirá los tamaños de los elementos donde hemos usado RAM como unidad de medida. Bien, así que la primera sección se ve bien. Aquí no necesitamos hacer nada. cuanto a la segunda sección donde tenemos los carros, voy a incrementar el espacio en la parte inferior dentro de esta sección Pero para hacer eso, al principio, necesitamos fijar la altura a nuestra fila. Entonces, seleccionemos sección para establecer la altura en auto, porque de lo contrario no se aplicará el relleno en la parte inferior. Entonces necesitamos aquí relleno, diez rem en la parte superior, que cero, que 12 RAM en la parte inferior, y luego otra vez cero. A continuación necesitamos crear algo de espacio entre el encabezado y las cartas. Así que vamos a seleccionar el contenedor de tarjetas y se le asignó margen superior con el valor diez corrieron. Bien, eso es lo de la Sección Dos. Sigamos adelante y personalicemos la siguiente sección, que es la galería. este momento, cada enlace de galería tiene ancho y alto definidos en el ancho de la ventana gráfica Los hace más pequeños cuando disminuimos el ancho de la ventana del navegador. Entonces voy a cambiar el ancho de la vista en la RAM. Seleccionemos el enlace de la galería y luego definamos el ancho y el alto. Voy a poner ancho a cuatro para carnero. En cuanto a la altura, hagamos que sea 25 rem. Y además de eso, tenemos que definir el ancho y alto para las imágenes también. Tenemos que ponerlos a ambos al 100%. Bien, entonces hemos cambiado la anchura y la altura. Me refiero a la unidad de medida. Una cosa más que quiero hacer aquí es crear un pequeño margen alrededor de los edificios. Porque una vez que hagamos que el navegador más pequeño que las imágenes se acercarán demasiado entre sí. Y para evitarlo, pongamos el margen a cinco corridas. Bien, en realidad con este punto de ruptura, hemos terminado. Todas estas secciones se ven bien. Y ahora tenemos que seguir adelante y encontrar el siguiente punto de interrupción, que va a ser mil píxeles Así que sigamos adelante y creamos una nueva consulta de medios CSS con un ancho máximo de mil En el punto de ruptura, voy a cambiar el tamaño de los encabezamientos de esta sección Seleccionemos este elemento y establecemos el tamaño de fuente a nueve RAM. Además de eso, necesitamos usar tu margen en los lados izquierdo y derecho porque de lo contrario los encabezados se envolverán más tarde y no va a ser agradable Entonces pongamos margen a cero en la parte superior e inferior y cinco rem, en los lados izquierdo y derecho. Bien, entonces el rumbo es más pequeño. Ahora siguiente voy a hacer que el icono sea más pequeño también. Así que vamos a seguir adelante y seleccionarlos y establecer su tamaño de fuente en 25 rem. Bien, eso es todo sobre la primera sección. Sigamos adelante y personalicemos el segundo. Voy a envolver las tarjetas y colocarlas en diferentes líneas. Así que sigamos adelante y seleccionemos tarjetas. Contenedor Y le asignó una de las propiedades flex, me refiero flex wrap con un valor rab A continuación, voy a seleccionar la tarjeta en sí porque quiero crear algo de espacio alrededor de cada carta. Vamos a usar margin y establecerlo en cinco rem. Bien, entonces eso es todo. Las tarjetas se ven bien. Y lo único que quiero hacer en el punto de interrupción es aumentar ligeramente la altura del pie de Así que seleccionemos la sección cuatro y asignemos a su altura con el valor a través de rampa. ¿Verdad? Entonces con mil pixeles ya terminamos. Sigamos adelante y nos ocupemos del siguiente punto de interrupción, que en realidad va a ser de 900 píxeles Así que sigamos adelante y creamos nuevos medios CSS. A continuación, especifique el ancho máximo como 900 píxeles. En el punto de ruptura, voy a tomar aquí del null donde todas las demás secciones se ven bien Así que sigamos adelante y seleccionemos ahora barra de enlace. Voy a establecer margen a RAM. Entonces. Entonces como el elemento I, porque quiero disminuir ligeramente. Entonces el tamaño de la fuente. Vamos a ponerla en foro. Y también vamos a seleccionar elemento span. Estoy en los valores de texto y configuro el tamaño de fuente para ejecutar. Bien, ya está, pero se ve bien. Y tenemos que seguir adelante y encontrar el siguiente punto de interrupción, que creo que va a ser de 700 píxeles Así que vamos a crear nuevos medios CSS y especificar max-width como 700 piezas Entonces en el punto de interrupción, voy a disminuir el tamaño de esta partida de sección Sigamos adelante y seleccionemos el encabezado de sección. Establezca el tamaño de fuente en siete RAM. Y además de eso, voy a incrementar el margen de ganancia en los lados izquierdo y derecho. Entonces está asignado a cero y tan run. Bien, Siguiente vamos a encargarnos de los íconos. También voy a disminuir sus tallas. Así que vamos a seleccionarlos y establecer su tamaño de fuente en rampa 20. Bien, Antes de pasar a la siguiente sección, voy a mover un poco el icono del menú al ojo del lado izquierdo Así que vamos a seleccionar menú y definir su posición izquierda. Hazlo correr. Bien, Así que el icono se ve bien y en realidad todas las demás secciones se ven bien excepto el pie Así que sigamos adelante y nos ocupemos de ello. En primer lugar, voy a aumentar la altura. Sección cuatro, ajuste la altura a cuatro para correr. A continuación, voy a colocar los elementos en la columna uno encima del otro. Para eso, tenemos que cambiar la dirección del flex. Hagámoslo columna. Entonces necesitamos colocar artículos flexibles en la parte superior dentro del contenedor. Utilice aquí justificar contenidos flex start. Y también necesitamos centrarlos horizontalmente usando alinear elementos al centro. Entonces, como puedes ver, los elementos se colocan en una columna verticalmente, pero necesitamos crear algún espacio entre esos textos y el campo de entrada. Así que seleccionemos sección para textos y definamos margen inferior con el valor ocho Ran. Bien, eso es todo en el punto de quiebre. Ahora tenemos que personalizar nuestro proyecto sobre el último punto de interrupción, que va a ser de 550 píxeles Así que vamos a seguir adelante y crear nuevos medios CSS y especificar un ancho como 550 píxeles. Sigamos adelante y disminuyamos una vez más el tamaño de fuente de los elementos HTML. Voy a llegar al 40 por ciento. A continuación, necesitamos disminuir el espacio entre los elementos de navegación. Así que vamos a seleccionar ahora por enlace y establecer el margen a cero y 0.7 rampa. Bien, en realidad, ya casi terminamos. Pero aquí veo un pequeño tema. Puedes notar que el ícono del menú termina detrás de los enlaces de la galería. Estos también podrían ser un problema en otros puntos de interrupción. Así que sigamos adelante y arreglemos eso. Voy a asignarle una propiedad z-index por defecto. Hagámoslo 100. Bien, entonces el problema está arreglado. Y finalmente, hemos terminado de trabajar en nuestro proyecto. Creo que se ve bien en diferentes tamaños de pantalla, por lo que podemos decir que responde. Bien, entonces espero que este proyecto haya sido interesante. Lo disfrutaste y aprendiste algunas cosas nuevas. Ahora tenemos que seguir adelante y comenzar a construir el siguiente proyecto. 11. Proyecto 2 - Previsión de proyecto: Bien, así que ahora es el momento de comenzar a construir nuestro segundo proyecto Yo lo llamo diseño creativo, porque a lo largo de este proyecto, usaremos algunos efectos agradables y geniales. Antes de empezar a escribir el código. Sigamos adelante y describamos el proyecto. Consistirá en un par de secciones diferentes. Así que pasemos por cada una de ellas. En este momento estás viendo la primera sección, que consta de un par de partes diferentes. Tenemos aquí cuatro elementos de navegación diferentes. Están alineados verticalmente y una vez que colocamos el cursor sobre ellos, entonces comenzarán a colocarse horizontalmente y además obtendrán el fondo A continuación tenemos aquí un rumbo bonito. Abajo puedes ver el logo del sitio web. Y también tenemos aquí un fondo flotante que se parece a las olas. Y creo que se ve bastante bien. Bien, Siguiente tenemos carritos de los clientes. Cada auto incluye algunos iconos de Font, Awesome. Además, teníamos imágenes de los clientes y las calificaciones. Las tarjetas tienen un bonito efecto hover. A continuación viene la sección de equipo. Incluye también las tarjetas, pero esas tarjetas son diferentes, representan a los miembros del equipo. Y también incluyen algunas historias sobre los miembros que podemos mostrar haciendo clic en este botón. Derecha. Después de eso tenemos una sección de contacto. Incluye la imagen y un par de campos de entrada. Se colocan en un entorno 3D y además tienen un bonito efecto hover Abajo tenemos un pie de página simple con algún texto de copyright. Bien, entonces eso es todo sobre estas secciones del proyecto. Los elementos de navegación nos permiten navegar a las secciones adecuadas. Si les hago clic, entonces iremos a las secciones correspondientes sin problemas. Además de eso, tenemos aquí un botón fijo en la esquina inferior derecha de la página. Si hago clic en él, entonces se desplazará hacia arriba hasta la página dos, la primera sección. Bien, así que eso es todo sobre el proyecto. Va a responder a todos los diferentes tamaños de pantalla. Si inspecciono la página, cambio al modo responsive y compruebo el proyecto, entonces verás que se ve bien en diferentes tamaños de pantalla. Bien, así que estamos listos para comenzar a construir este proyecto. Se pueden descargar los archivos de inicio y de origen final. Se adjuntan a esta conferencia 12. Proyecto 2 - Crea marcadores HTML para aterrizar y define estilos comunes: Bien, así que estamos listos para comenzar a construir nuestros proyectos. He creado una nueva carpeta en el escritorio llamada creative design, en la que tengo otra carpeta para las imágenes. Sigamos adelante y abramos esta carpeta en código VS y creemos nuestros archivos de trabajo para HTML, CSS y JavaScript. Voy a llamarlos index.html, 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 m it, vamos a insertar aquí un signo de exclamación y luego pulsaremos Tab o Enter Bien, así que aquí tenemos etiquetas HTML básicas. En primer lugar, voy a cambiar el título. Insertemos tu diseño creativo. Después de eso. Vamos a vincular archivos CSS y JavaScript. Voy a abrir la etiqueta de enlace y especificar 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 tenemos que especificar ruta del archivo en el atributo source. Además de eso, voy a traer enlace más para los iconos Font Awesome. Así que vayamos a Google, busquemos Font Awesome, CDN, JES Luego toma el primer enlace, abre la etiqueta de enlace en los elementos head y pega aquí el enlace copiado. Bien, por último, vamos a ejecutar el proyecto al navegador. Para eso, voy a usar uno de los paquetes de código VS que se llama servidor en vivo. Nos permite ejecutar el proyecto en vivo al navegador y también hacer actualizaciones y cambios sin actualizar la página. Bien, sigamos adelante y coloquemos el editor y el navegador. Así. Y empezar. Vamos a construir el proyecto sección por sección. Crearemos el marcado HTML para cada sección y luego el estilo de las mismas. Así que sigamos adelante y creamos el marcado HTML para la primera sección En primer lugar, voy a abrir una etiqueta div, que va a ser el contenedor. Luego abra el elemento de sección con una sección de clase uno. Por lo que la primera sección incluirá un par de partes diferentes. Tendremos una barra de navegación que el encabezado seguido del logotipo Y también tendremos este fondo flotante. Sigamos adelante y creamos la barra de navegación. Voy a abrir el elemento de navegación HTML5 con la clase ahora para ese elemento de enlace interferente con la clase ahora por enlace. Y como primer artículo, vamos a insertar tu diseño. Entonces, en general, tendremos cuatro elementos de nav. Duplicemos esta línea de código tres veces y luego cambiemos el contenido. El segundo va a ser clientes. Entonces tendremos equipo y contenido. Bien, así que eso es todo por ahora para el siguiente, voy a insertar una etiqueta div, que va a ser el fondo flotante. Voy a asignar a cada clúster PG flotante. Después de eso, voy a crear un encabezado. Entonces es una etiqueta de encabezado H1 abierta con una sección de clase un encabezado. Y como el contenido que está aquí, el diseño creativo. Y finalmente, vamos a crear un logo que va a ser el icono Font Awesome. En primer lugar, vamos a abrir la etiqueta div con el logotipo de la clase. Va a ser el envoltorio del icono. Y luego inserta tu elemento ocular con una clase es FAS. Tengo una curva de Bézier. Bien, eso es. En relación a esta sección, se prepara uno de los elementos. Y ahora tenemos que empezar a escribir CSS. Al principio, voy a crear algunos estilos comunes y predeterminados. En realidad, a lo largo de este proyecto, vamos a utilizar dos Google Fonts diferentes. Entonces tenemos que traer el enlace. Vayamos al sitio web de Google Fonts. Entonces voy a buscar fuente llamada monótona. Además de eso, necesitamos texto tipo fuelle. En realidad, voy a seleccionar aquí un par de estilos. Seleccionemos todos estos estilos excepto el italiano. Entonces toma el enlace desde aquí y pegarlo en archivo CSS. Bien, así como dijimos, vamos a crear algunos estilos comunes Por lo tanto, voy a seleccionar cada elemento usando asterisco En primer lugar, vamos a deshacernos del default, margin y padding de cada elemento. Pongamos a ambos a cero. Entonces voy a establecer box-sizing border-box. También deshazte de los elementos subyacentes predeterminados de los elementos de enlace usando decoración de texto. Ninguno. El siguiente va a ser tipo lista-estilo-. Ninguno. Se librará de las balas por defecto de los elementos LI. Me refiero a los elementos de la lista. Después de eso, voy a eliminar el contorno predeterminado de cada elemento. Así que pongamos esquema a ninguno. A continuación, voy a definir la familia de fuentes. Vamos a usar aquí abajo ton, textos, cursiva. Y por último, pongamos el peso de la fuente a 400. Bien, así como puedes ver, se aplican todos los estilos. Entonces solo voy a proyectar, voy a usar RAM como unidad de medida. este momento, una RAM es igual a 16 píxeles porque por defecto 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 conveniente y simple de usar. Entonces para hacer eso, tenemos que disminuir el tamaño de fuente del HTML y hacerlo 62.5 por ciento Entonces, como puedes ver, los elementos se hicieron más pequeños y ahora 1 g equivale a diez píxeles 13. Proyecto 2 - Crea efecto de ondas con fondo flotante: Bien, así que finalmente podemos empezar a diseñar la primera sección Antes de hacer eso, voy a añadir algunos comentarios porque lo olvidé. Vamos a insertar comentarios en el archivo HTML. Necesitamos aquí, sección uno, fin de sección uno. Después en el archivo CSS, voy a insertar aquí estilos comunes y de estilos comunes. Y luego necesitamos la sección uno y de la sección uno. Bien, sigamos adelante y seleccionemos elementos de sección. En primer lugar, voy a definir ancho y alto. Vamos a establecer con el 200 por ciento. En cuanto a la altura, voy a hacer que sea 100% de la ventana gráfica Entonces voy a poner fondo en blanco. En realidad, por defecto el fondo es blanco, pero de todas formas, vamos a definirlo. Bien, ahora voy a encargarme del fondo flotante y a demostrar cómo funciona. Al principio, voy a hacerlo más pequeño y mostrarte cómo funciona y luego después de eso aumentará su tamaño. Así que sigamos adelante y seleccionemos elementos div, el fondo flotante de clase. Primero, definamos ancho y alto. Voy a hacer los dos 70 RAM. Luego cambia el color de fondo. Voy a usar el valor RGBA. Vamos a insertar tu 50231255 y luego la opacidad 0.8. Bien, entonces aquí tenemos antecedentes. A continuación, la voy a colocar en el centro. Vamos a establecer la posición en absoluto. Eso para posicionar el elemento de acuerdo a su elemento padre, voy a establecer la posición relativa para el elemento section. Después de eso, necesitamos definir las propiedades superior e izquierda. Vamos a configurar hasta 15%. cuanto a la propiedad left, En cuanto a la propiedad left, para centrar el elemento perfectamente, voy a usar la función calc Tenemos que restar la mitad del ancho de los elementos al 50 por ciento En este caso, el elemento se centrará horizontalmente. Entonces necesitamos aquí calc y el cálculo va a ser 50 por ciento -35 rampa Bien, entonces ahora mismo Eso es todo sobre los primeros antecedentes. A continuación, necesitamos crear una segunda. Y lo voy a hacer usando el pseudo elemento antes. Así que sigamos adelante y seleccionemos el PG flotante seguido de los pseudo elementos antes En primer lugar, definamos el contenido, lo hagamos vacío. Entonces voy a definir ancho y alto. Hagamos los dos al 100%. También cambia el color de fondo. Voy a usar el mismo color pero con diferente opacidad Entonces necesitamos RGBA 50231255 y la opacidad 0.1. Después de eso, voy a poner posición en absoluto. Y entonces necesitamos definir las posiciones superior e izquierda. Voy a hacer que ambos sean cero. En este momento el elemento no es visible porque se coloca detrás del primer fondo. Y para demostrarlo, podemos simplemente cambiar la posición de la izquierda, Hagámoslo, digamos 20%. Entonces ahora lo puedes ver con claridad. Ahora el antes, por lo que el elemento que estoy en el segundo fondo es visible. Bien, volvamos aquí cero. A continuación, necesitamos cambiar la forma de esos elementos. Necesitamos hacerlos a su alrededor usando border-radius, pero usaremos diferentes valores para cada elemento Entonces para el fondo principal, voy a establecer el radio de borde en 45%. En cuanto al segundo elemento, hagamos border-radius 40% Bien, entonces ahora todo está listo. Solo necesitamos animar ambos elementos. Entonces voy a usar fotogramas clave CSS. Nos permite crear algunas reglas CSS y luego aplicarlas a los elementos usando la propiedad de animación. Vamos a crear fotogramas clave CSS. Necesitamos agregar signo, luego la palabra clave fotogramas clave, seguido del nombre de la animación Voy a llamarlo rotar. Vamos a definir dos pasos diferentes, el punto de partida y el punto final. Quiero decir 0% y 100 por ciento. Y necesitamos rotar el elemento 360 grados. Entonces al 0%, quiero decir, en el punto de partida, necesitamos transformar con la función rotate y con el valor cero. En cuanto al 100%, como punto final. Necesitamos transformar, rotar 360 grados. Entonces, durante la animación, el elemento girará una vez 360 grados. Bien, así que para aplicar este estilo a los fondos, tenemos que usar la propiedad de animación para ambos elementos Al principio, necesitamos definir el nombre de la animación, que es rotar. Entonces tenemos que definir la duración. Van a ser treinta segundos. Y también, necesitamos hacer infinita la animación. Así que vamos a insertar tu infinito. Entonces como puedes ver, los elementos están rotando y tenemos un bonito efecto de animación. Ahora tenemos que cambiar el tamaño y la posición de esos fondos. Por cierto, usaremos el ancho de la ventana gráfica como unidad de medida ya que nos permitirá hacer el elemento sea sensible a diferentes tamaños de pantalla. Para demostrar por qué vamos a usar el ancho de la ventana gráfica, cambiemos la RAM, hagamos que sea el ancho de la ventana gráfica, y también disminuyamos el Vamos a hacerlo, Digamos 40 de ancho de la vista. Y también cambiar aquí, 35 embestir a 20 de ancho de la vista. Entonces, si hago la ventana más pequeña que el fondo, cambiará sus tamaños en consecuencia. ¿Bien? En realidad, necesitamos aumentar la anchura y la altura. Hagamos las dos. 150 ancho de la vista. También cambie 20 a 75 ancho de la vista. Además de eso, necesitamos fijar la posición. Vamos a establecer la posición superior a -125 de ancho de la vista. ¿Bien? Entonces el fondo se coloca correctamente. Tenemos aquí solo un problema. No necesitamos esta barra de desplazamiento aquí abajo. Entonces para arreglar eso, voy a asignar al elemento body overflow x hidden. Bien, sentémonos con respecto al fondo flotante. Se ve bastante bonito y moderno, así que espero que les guste. Ahora tenemos que encargarnos del resto de los elementos. Quiero decir, ahora para el encabezado y el logo 14. Proyecto 2 - Personalizar Landing Page: Sigamos adelante y comencemos con la barra de ahora. Tenemos cuatro elementos de navegación diferentes, y los voy a colocar horizontalmente en fila, pero cada elemento se alineará verticalmente. Sigamos adelante y seleccionemos navbar. este momento la barra de navegación se coloca detrás del fondo flotante Entonces para que sea visible, voy a usar la propiedad z-index Pero antes de eso necesitamos definir la posición porque de lo contrario la propiedad z-index no funcionará Así que pongamos la posición a relativa. Y luego usar el índice con el valor que va a ser superior a cero. Hagámoslo 20. Bien, entonces, ahora cuatro es factible y voy a cambiar su posición. Vamos a colocarlo un poco abajo. Entonces voy a establecer la posición superior a cuatro rampas. A continuación, voy a crear algo de espacio entre los elementos de navegación y también alinearlos usando Flexbox Entonces, sigamos adelante y fijemos la propiedad de display en flex. Y luego con el fin de crear espacio entre los elementos, voy a simplemente justificar propiedad de contenido con el valor espaciado de manera uniforme. Bien, eso es lo de la barra de navegación. Sigamos adelante y personalicemos en Alba link. Vamos a seleccionarlo. Y antes que nada, el aumento del tamaño de fuente hace que apunte a la RAM. Además, voy a hacer que los enlaces más audaces que crear algún espacio entre las letras Haz que apunte a la RAM. Y cambiar el color. Vamos a establecer el color en blanco. Bien, entonces los artículos se ven bien. Como recuerda del proyecto terminado, el ítem debe ser una línea verticalmente, y una vez que colocamos el cursor sobre ellos, entonces deben colocar de nuevo horizontalmente Y además deberían obtener un color de fondo, ¿verdad? Para colocarlos verticalmente, voy a disminuir el ancho del enlace de nanoporos Y además de eso, voy a usar una de las propiedades llamadas Word Wrap con la palabra de salto de valor. Así que vamos a establecer el ancho en 1.5 RAM. Y luego usa el ajuste de palabras con la palabra de ruptura de valor. Bien, eso es todo sobre el vínculo del Napal. Ahora es el momento de crear un efecto hover. Una vez que pasamos el cursor sobre el artículo, necesitamos aumentar el ancho y también cambiar el color de fondo Entonces, sigamos adelante y seleccionemos enlace noble con hover. Después establece con 215 RAM. En cuanto al color de fondo, voy a usar el valor RGBA Quiero decir, el color blanco. Y la opacidad apunta a. Entonces, una vez que pasemos el cursor sobre los elementos, entonces lo jugarán horizontalmente y además obtendrán un nuevo color de fondo Como puede ver, los artículos no están alineados en el centro de la caja. Y también necesitamos una transición para obtener este efecto suave. Entonces antes que nada, vamos a alinearlos en el centro. Usando el centro de alineación de texto. Necesitamos dos transiciones diferentes, una en hover y la segunda para el propio enlace Entonces usemos la transición con los valores todos 2.5 s. Y también necesitamos hacer transición de todos los 0.5 s. Esta segunda transición nos permitirá alinear los ítems verticalmente un poco más rápido. Bien, así que todo funciona bien. Tenemos aquí un bonito efecto hover. En realidad, puede notar aquí que estamos recibiendo una barra de desplazamiento en el lado derecho. Pero eso no es problema. Se arreglará una vez que procedamos y añadimos otra sección al proyecto. Bien, a continuación voy a darle estilo a un elemento de encabezado. Entonces sigamos adelante y seleccionémoslo. Al principio. Aumentemos su tamaño de fuente, que sea ocho RAM que cambiar la familia de fuentes. En este caso, voy a usar telefoneado llamado monótona corrosiva A continuación, voy a encargarme de la posición del rumbo. Tenemos que colocarlo en el centro. Para eso voy a usar posición absoluta de lo que necesitamos top position. Vamos a establecerlo en el ancho de la vista 18. Y también voy a definir una posición de izquierda con valor 50%. En este momento el encabezado no está centrado. Tenemos que moverlo hacia el lado izquierdo 50 por ciento de su ancho. Y para eso, necesitamos usar la propiedad transform con la función Translate. En este caso, necesitamos traducir con dirección x. Y como valor voy a insertar aquí, -50 por ciento. Ahora bien, el elemento está perfectamente centrado. Bien, después de eso, vamos a crear algún efecto de sombra. Voy a usar sombra de texto. Necesitamos 0.33 veces y el color 888. A continuación voy a cambiar el color. Hagámoslo blanco. También. También voy a establecer el color de fondo en blanco. Y luego aumentar el ancho del elemento. Hagámoslo 85 rem. Bien, entonces ahora el rumbo se ve mucho mejor. Tenemos que centrarlo dentro de la caja. Y para eso, usemos text-align center. También crea algo de espacio dentro de la caja. Voy a establecer padding a 0.8 rem en la parte superior e inferior para los lados izquierdo y derecho, Hagámoslo 1.6 RAM. Y también voy a hacer esquinas de la caja ligeramente redondeadas usando border-radius con valor 0.8 redondo Lo último que voy a hacer es disminuir ligeramente la opacidad Hagámoslo 0.9. Bien, entonces con el rubro ya terminamos Sigamos adelante y personalicemos el último elemento de esta sección, que es el logotipo. En primer lugar, cuidemos su posición. Voy a colocarlo abajo en el centro de la página. Volvamos a usar la misma técnica que establece la posición en absoluto. Después define la posición superior, hazla 70%. En cuanto a la propiedad izquierda, necesitamos fijarla en 50%. Y luego necesitamos transformarnos con la función Translate X. Vamos a insertar aquí -2%. Entonces se posiciona el logo, y ahora vamos a seguir adelante y personalizarlo. Seleccionemos elementos I y aumentemos su tamaño de fuente, que sea 15 RAM. Entonces voy a cambiar el color. Vamos a usar aquí RGBA valor 50,231,255.8. Y también voy a usar sombra de texto. En este caso, voy a usar sombra de texto multinivel. Entonces primer instinto a tu 0.1 RAM, 0.1 rem punto a ram Y llamaron o D, d, D S para la segunda sombra. Hagámoslo del lado izquierdo. Aquí necesitamos valores negativos, -0.1 RAM, -0.1 RAM, luego apuntar a Y la misma llamada. Bien, eso es. El logo es personalizado y en realidad con la primera sección, ya terminamos. Sigamos adelante y nos ocupemos de la siguiente sección. 15. Proyecto 2 - Crear y personalizar la sección de clientes: La siguiente sección va a ser la sección de clientes. Consistirá en el rubro y tres tarjetas distintas. Cada una de las tarjetas tendremos un par de elementos diferentes. O sea, las citas, luego el párrafo seguido estos recorridos y la imagen del cliente con su nombre. Bien, sigamos adelante y comencemos a crear el marcado HTML Vamos a insertar nuevos comentarios, sección dos y sección dos. Luego abra el elemento de sección con una sección de clase también. Voy a crear elementos de encabezado H1 con el encabezado de sección de clase y con el contenido. Clientes. Entonces abre el elemento div, que será el wrapper de las tarjetas que voy a asignar a la clase customers wrapper. Entonces necesitamos otra etiqueta div, que va a ser la tarjeta en sí que está asignada a tu cliente de clase. Bien, entonces como dijimos, vamos a tener aquí un par de elementos diferentes. El primero va a ser las citas, que estarán representadas por el icono Font Awesome. Entonces está abierto. I elemento con una clase es FAS, FAA, cita izquierda. A continuación necesitamos un párrafo con los textos de los clientes de la clase. Y luego vamos a usar algún texto ficticio. Después de eso, voy a crear una calificación de cliente. Tendremos cinco estrellas. Cuatro de ellos serán llenados. En cuanto a la última, sólo se llenará su media parte. Entonces al principio, voy a abrir la etiqueta div, que va a ser el envoltorio de la calificación que se le asigne. Calificación de clientes de clase que los elementos abiertos I y asignados con clases FAS, una estrella. Voy a duplicarlo cuatro veces. Después cambia el nombre de clase por el último elemento. Necesitamos aquí, f k estrella, a la mitad. Bien, eso es todo sobre la calificación. A continuación voy a insertar aquí e imagen. Seleccionemos imagen de la carpeta de imágenes que necesitamos aquí cliente IMG uno, y también asignemos atributo de clase a la imagen con el valor cliente Después de eso, vamos a abrir la etiqueta de encabezado H4 con un nombre de cliente de clase E inserte aquí el nombre del cliente. Digamos Jane Lee. Bien, eso es lo de la primera tarjeta. En general, tendremos tres de ellos. Así que sigamos adelante y dupliquemos la tarjeta dos veces y luego hagamos algunos cambios. Entonces aquí, para la quinta estrella, necesitamos clase una estrella porque también se llenará, como las otras cuatro estrellas. Después cambiar el nombre de la imagen que necesitamos aquí, img2, y también cambiar el nombre del cliente Ese es el Instituto, Bob Smith. En cuanto a la tercera carta, la quinta estrella estará vacía. Entonces voy a cambiar aquí el nombre de la clase en vez de FAS, necesitamos aquí FAR. Después f una estrella, luego cambió el nombre de la imagen. Necesitamos aquí, tres, y también como nombre del cliente, vamos a Instituto y marrón. Bien, así que se crean las tres cartas y ahora tenemos que personalizar esta sección Vamos a crear un nuevo comentario, sección dos y sección dos. A continuación, seleccione elementos de sección. Y antes que nada, definir ancho y alto. Voy a establecer con el 200 por ciento. En cuanto a la altura, hagámosla al 100% de la ventanilla. Antes de proceder a iniciar este elemento de sección, sigamos adelante y disminuyamos el tamaño de las imágenes porque en este momento son dos más grandes. Así que sigamos adelante y seleccionemos IMG al cliente. Voy a poner dentro de la altura ambos de ellos a diez rampa. Y también voy a usar aquí cubierta de alimentación de objetos para mantener la calidad de la imagen. Bien, después de eso, vamos a alinear elementos dentro de esta sección está en libros de flujo. Voy a establecer la propiedad display en flex. Entonces necesitamos colocar elementos en la columna, por lo que necesitamos cambiar la dirección. Hagamos una columna. Y luego para crear algo de espacio alrededor de los elementos flex, voy a usar justify content, space around. Bien, eso es. Sección en, es personalizado. A continuación voy a encargarme del elemento rumbo. Así que vamos a seleccionarlo con el encabezado de la sección de clase. En primer lugar, voy a aumentar el tamaño de la fuente. Hagámoslo diez RAM También cambie el peso de la fuente. Voy a hacerlo audaz. Entonces quiero transformar el texto en mayúsculas N. Finalmente cambiar el color, hacerlo 999 Entonces a continuación tenemos que colocar el rumbo en el centro. Y para eso voy a usar text-align center. También, vamos a disminuir la opacidad, hacerla 0.1. Y por último, agregar al encabezado algún efecto de sombra usando sombra de texto con los valores a RAM, para ejecutar para RAM y el color AAA. Bien, entonces el encabezado está estilizado. Creo que se ve bastante bien. Así que sigamos adelante y nos ocupemos de las tarjetas. En primer lugar, voy a seleccionar el elemento div wrapper, que tiene un className, wrapper costumers. Entonces voy a colocar las cartas horizontalmente en fila. Y para eso, usemos flexbox. Entonces para crear algún espacio entre los elementos flex, usemos justify content. Devalorizamos espaciados de manera uniforme. Y luego con el fin de alinear los artículos al centro, vamos a usar y luego los artículos al centro. Bien, entonces los elementos están alineados y ahora necesitamos arrancar el auto mismo. Vamos a seleccionarlo. Al principio definiendo el ancho, hazlo 35 RAM. Entonces voy a establecer la altura a 50 RAM. Y también cambiar el color de fondo, que sea e. bien, continuación voy a alinear los elementos dentro de la tarjeta usando Flexbox Así que usemos display flex. Entonces necesitamos colocar elementos en una columna. Entonces cambiemos la dirección, hagámosla columna. Y luego después de eso, vamos a centrar los elementos horizontalmente usando align items center. Bien, además de eso, voy a hacer redondeadas las esquinas de la tarjeta Utilice border-radius con un valor de 0.5 RAM. Además, voy a crear algo de espacio dentro de la tarjeta usando relleno. Vamos a configurarlo en dos RAM en los cuatro lados. Y finalmente usar sombra de caja. Voy a crear sombra multinivel. Insertemos aquí una RAM, una RAM que a RAM. Y el color o D, d, D. Y también crear una sombra en el lado izquierdo. Necesitamos aquí menos una habitación, luego otra vez menos uno rem a RAM y color E. Bien, así que con las tarjetas, ya casi terminamos Solo necesitamos alinearlos de una manera diferente. Y luego personalizaremos los elementos dentro de la tarjeta. Entonces voy a cambiar la posición de la primera y tercera cartas. Voy a colocar la primera tarjeta un poco abajo. Y para eso, usa, de nuevo, los libros de flujo. Voy a seleccionar la primera tarjeta. Entonces necesitamos aquí cliente, seguido de la pseudo-clase llamada Se seleccionará la primera tarjeta. Y luego con el fin de colocar un poco hacia abajo, necesitamos alinear uno mismo con el valor flex end. Colocará la tarjeta en la parte inferior del contenedor. Entonces en este momento no se cambia nada porque necesitamos definir la altura del envoltorio. Así que vamos a asignarle altura con el valor 70%. Entonces ahora la primera carta se coloca un poco abajo. Sigamos adelante y movamos la tercera carta también. En realidad, voy a duplicar este código y luego cambiar el primer hijo, el último hijo Y también en lugar de flujo, y necesitamos flexionar, empezar. Bien, entonces las cartas están alineadas. Sigamos adelante y comencemos a personalizar los elementos dentro de la tarjeta. Empecemos con las cotizaciones. Voy a seleccionarlo, pero es clase FA, cita izquierda. Aumentemos el tamaño de la fuente, hagamos que sea para RAM, y también cambiemos el color. Voy a usar aquí color f080f. Bien, a continuación voy a encargarme del párrafo. Aumentemos su tamaño de fuente, que sea 1.8 RAM. Entonces voy a crear algo de espacio en la parte superior e inferior usando margen. Vamos a establecerlo en 2.5 rem y cero. Y también voy a justificar el texto usando text-align en Bien, antes de seguir adelante y estilizar las calificaciones, voy a crear una pequeña sangría Entonces voy a seleccionar la primera letra del párrafo. Seleccionemos el propio párrafo y luego le adjuntemos la primera letra, que son los pseudo elementos Luego se definió el margen en el lado izquierdo. Que sea uno corrió. Bien, eso es lo del párrafo. Sigamos adelante y comencemos las calificaciones. Seleccionar elementos, aumentar el tamaño de fuente, hacer que se ejecute. En cuanto al color, vamos a usar de nuevo f080f Bien, entonces las calificaciones se ven bien y tenemos que pasar a la imagen. Vamos a crear algo de espacio en la parte superior e inferior de la imagen y también hacerla redondeada. Necesitamos margen con valores para correr y cero. Entonces para que la imagen sea redondeada, necesitamos un radio fronterizo con valor del 50 por ciento Bien, eso es una tontería sobre las imágenes. Por último, tenemos que personalizar el nombre del cliente. Así que vamos a seleccionar este elemento. Aumenta el tamaño de la fuente, hazlo a Ram, y también haz que la fuente sea un poco más audaz usando font-weight 700 Bien, así que eso es todo. Casi terminamos con esta sección. Lo único que quiero hacer es crear un pequeño efecto hover Una vez que pasemos el cursor sobre las cartas, quiero cambiar la sombra Así que vamos a seleccionar tarjeta con hover. Después defina la sombra de caja. Los siguientes valores que necesitamos aquí para correr dos veces, luego tres rem, y lo llamamos d d t Entonces necesitamos menos dos REM. Nuevamente menos dos corren tres rem y el color II. Además de eso, vamos a usar la transición con los valores box shadow y la duración 0.5 s. bien, así que tenemos aquí unos buenos efectos hover Y en realidad con esta sección ya terminamos. Ahora podemos seguir adelante y encargarnos de la siguiente. 16. Proyecto 2 - Sección de equipo de creación y estilo: En la siguiente sección volveremos a tener tarjetas. Esta sección va a ser sobre el equipo. Consistirá en el rubro y tres tarjetas que representen a los integrantes del equipo. Por lo que cada curva incluirá la imagen del miembro del equipo. Entonces tendremos un nombre completo con la posición del miembro del equipo, seguido de estas habilidades. Y además tendremos un botón en la parte inferior del auto. Además de eso, puedes ver aquí otro botón en la esquina superior derecha del auto. Y si le hago clic, entonces esta línea girará y alguna información se mostrará muy bien. Bien, así que eso es todo sobre esta sección. Sigamos adelante y comencemos a crear el marcado HTML. Voy a insertar sus nuevos comentarios, sección tres. Y la sección tres. Después abre el elemento de sección con la clase sección tres e instituto H1 etiqueta de rumbo. Voy a asignar a la misma clase que usamos para el encabezado de sección anterior. Porque ambos tendrán los mismos estilos. Así que asignemos a cada sección encabezando el contenido. Voy a insertar a tu equipo. ¿Bien? A continuación tenemos que crear tarjetas. Entonces, antes que nada, abre una etiqueta div, que va a ser la envoltura. Voy a asignar a un envoltorio de equipo de clase. Después abre otro div, que va a ser la propia tarjeta. Vamos a asignarle miembro del equipo de clase. La tarjeta constará de un par de elementos diferentes. La persona uno va a ser la imagen. Así que vamos a abrir elemento de imagen y seleccionar miembro del equipo un punto JPG. También voy a asignar a un miembro del equipo de clase IMG. Bien, a continuación voy a abrir la etiqueta de encabezado H2, que incluirá el nombre completo y la posición del miembro Entonces voy a asignar un nombre de miembro del equipo de clase. Vamos a insertar tu Nick Smith. Entonces voy a abrir etiqueta span e insertar aquí la posición del miembro del equipo. Escribamos diseñador. Después de eso vienen las habilidades. Voy a crear una lista. Vamos a asignar a una clase las habilidades de los miembros del equipo. Entonces en general vamos a tener cinco elementos de la lista. Así que vamos a crear el primero. Va a ser Photoshop. Vamos a escribir aquí la abreviatura P, S, luego duplicar el elemento LI cuatro veces y cambiar el contenido. El segundo va a ser Figma. Entonces tendremos HTML5, CSS3, y luego Ai, que significa Adobe Illustrator Bien, Siguiente voy a crear un botón para proyectos. Va a ser el elemento link. Vamos a asignar a la clase proyectos btn y como el contenido aquí mismo, proyectos Bien, ahora voy a encargarme de la historia del miembro del equipo. Al principio, voy a crear un botón. Entonces vamos a abrir la etiqueta div con una historia de clase btn. Además de eso, voy a usar otro atributo llamado title. Aparecerán algunos textos una vez que pasemos el cursor sobre el botón. Entonces, insertemos mi historia. A continuación, necesitamos otra etiqueta div, que va a ser la línea asignada a cada línea btn de historia de clúster Y deja vacío este elemento div. Bien, y así esta parte constará de dos elementos distintos, tendrá un encabezamiento y el párrafo. Vamos a crear un elemento div con historia de clase. Va a ser el envoltorio. Luego abre H4 ocultando elementos con un encabezado de historia de clase y los contenidos sobre mí. Después de eso necesitamos párrafo con la clase párrafo tory. Y luego depende de ti, algún texto ficticio. Bien, entonces ya está lista la primera tarjeta, como decíamos, en general, tendremos tres de ellas. Entonces voy a duplicarlo dos veces y luego hacer algunos cambios. Voy a cambiar el nombre de la imagen. También va a ser miembro del equipo. Entonces cambia el nombre completo que necesitamos aquí. Digamos Bob Brown. En cuanto a las habilidades, vamos a insertar aquí a, e After Effects, luego PR, que significa Premiere Pro. Entonces dejemos HTML y CSS como están para el último ítem, vamos a insertar aquí, digamos Inkscape Bien, eso es lo del segundo miembro del equipo. Hagamos algunos cambios. Para el tercero, necesitamos aquí, miembro del equipo tres que el nombre John Doe? A continuación, voy a cambiar la posición que necesitamos aquí. Desarrollador. En cuanto a las habilidades, vamos a insertar tu JavaScript. Después React js. El siguiente no va a ser JS que MongoDB. Y para el último ítem, Vamos a insertar Python. Bien, Así que el marcado HTML está listo, y ahora podemos comenzar a personalizar esta sección Sigamos adelante y creamos nuevos comentarios. Sección tres. Y la sección tres. Después defina ancho y alto. Voy a establecer el ancho al 100%. En cuanto a la altura, hagámosla al 100% de la ventanilla. Después de eso, voy a alinear el encabezado y al rapero usando flexbox Tenemos que ajustar la pantalla a flex. Entonces. Tenemos que colocar los artículos flexibles verticalmente en dos puntos por lo que necesitamos cambiar la dirección. Hagámoslo columna. Y luego después de eso, para crear algún espacio entre los elementos, necesitamos, justificar los contenidos con el espacio de valor entre ellos. Y por último, crear algo de espacio en la parte superior e inferior dentro de esta sección. Vamos a usar relleno. Vamos a establecerlo en cinco RAM y cero. Bien, veamos sobre los elementos de esta sección. A continuación tendremos una rúbrica que ya está estilizada. Y antes de pasar al siguiente elemento, voy a agarrar los estilos de la sección anterior y pegarlos en estilos comunes. Haremos que el código sea más limpio y comprensible. Bien, sigamos adelante y seleccionemos el envoltorio del equipo. Voy a alinear las cartas horizontalmente en fila. Entonces usemos Flexbox. Entonces. Voy a crear algo de espacio entre las tarjetas usando justificar el espacio de contenido de manera uniforme. Y también, voy a colocar tarjetas en el centro verticalmente usando alinear elementos al centro. Además de eso, voy a definir la altura del rapero también porque vamos a alinear cartas como lo fue en la sección anterior. Así que fijemos la altura a 70%. ¿Bien? Después de eso, seleccionemos la tarjeta en sí. Quiero decir, un miembro del equipo. Primero, definamos este ancho, hagamos 35 RAM, y luego cambiemos el color de fondo. Voy a usar tu color F, F, F, E, E. Bien, continuación voy a crear el espacio dentro de la tarjeta. Entonces usemos padding con los siguientes valores. Necesitamos una ejecución, luego una RAM. Después hacer el relleno a rem en la parte inferior. Entonces otra vez, usa una carrera. Además de eso, usemos sombra de caja. Voy a usar sombra de caja multinivel. Entonces vamos a insertar tu 1RM, entonces otra vez, una RAM que a ram, y lo llaman t, t En cuanto a la segunda sombra, va a ser colocada en el lado izquierdo. va a ser colocada en el lado izquierdo Entonces usemos tus valores negativos menos una RAM, luego otra vez menos una RAM a RAM y el color E. ¿Bien? Entonces antes de continuar, creo que sería mejor si ocultamos la historia por un tiempo Hará que nuestro proceso de trabajo sea más conveniente. Entonces, seleccionemos historia y asignemos para mostrar ninguna. ¿Bien? Entonces la historia está oculta. Y ahora voy a darle estilo a cada uno de los elementos del auto. Sigamos adelante y comencemos con la imagen. Voy a definir su ancho. Hagámoslo al 100 por ciento. Y también, voy a hacer las esquinas de la imagen ligeramente redondeadas usando border-radius con valor 0.5 rampa Bien, a continuación voy a personalizar el nombre del miembro. Así que vamos a seleccionarlo. Primero. Vamos a aumentar el tamaño de la fuente, que sea 2.3 RAM. Entonces voy a hacer telefoneado audaz usando font-weight También cambia el color. Voy a usar tu color 796717. Y también crea algo de espacio en la parte superior usando margen superior con un valor para correr. Bien, entonces el nombre se ve bien. Sigamos adelante. Y clientes la posición del miembro. Seleccionemos el nombre seguido del span. Y luego cambiar el tamaño de fuente, que sea 1.7 rem. Bien, sigamos adelante y cuidemos las habilidades. Voy a colocar los elementos de la lista horizontalmente en una fila. Entonces, al principio, seleccione los elementos UL. Voy a usar de nuevo flexbox. Necesitamos establecer la propiedad de display en flex. Colocará los elementos flex en una fila Luego, para crear algún espacio entre los elementos, use justify content con un espacio de valor entre. Además de eso, voy a crear algo de espacio en la parte superior e inferior. Entonces usemos margin, ponlo a un rem en la parte superior que cero, que a ram en la parte inferior. Y luego otra vez cero. Bien, entonces los elementos de la lista están alineados y ahora voy a darles estilo. Seleccionemos el elemento LI, cambiemos el tamaño de fuente, lo hagamos a 1.5 RAM, y luego cambiemos el color. Voy a usar tu color 5050, luego otra vez 50. Bien, sigamos adelante y pasemos al fondo. Vamos a seleccionarlo. En primer lugar, voy a cambiar el color de fondo. Vamos a usar aquí F, a b348. Después cambia el color del texto, hazlo blanco. Además, voy a crear algo de espacio dentro del botón. Vamos a usar padding y establecerlo en 0.5 rem en la parte superior e inferior, y luego 1.5 rem en los lados izquierdo y derecho. Además de eso, voy a hacer que el botón redondeado usando border-radius con valor five rem Entonces como se puede ver el botón todo o D se ve bien. Sigamos adelante y aumentemos el tamaño de la fuente. Hazlo 1.5 RAM. Y también voy a crear algún espacio entre las letras usando punto de espaciado entre letras para envolver. Bien, entonces eso es todo respecto a la primera parte de la tarjeta. A continuación, voy a personalizar el botón, que se colocará en la esquina superior derecha de la tarjeta. Así que sigamos adelante y seleccionemos historia btn. Y antes que nada, definir su anchura y altura. Voy a configurar ambos para que caigan corrieron, y luego cambiar el color de fondo, hacerlo también. Entonces aquí tenemos el botón. En primer lugar, tenemos que fijar su posición. Así que pongamos su posición a absoluta. Entonces, para alinearlo acuerdo con el elemento padre, necesitamos definir la posición relativa para la tarjeta. Y luego definir las propiedades superiores y correctas. Voy a ponerlos a menos una rep. ¿Bien? Entonces el botón se posiciona de la manera correcta. Hagámoslo redondeado. Utilice border-radius. Devaluamos cinco rondas. Bien, entonces ahora mismo, Eso es todo sobre el botón. Ahora voy a encargarme de la línea. Entonces sigamos adelante y seleccionémoslo. Definamos su anchura y altura. Hacer con 100%. En cuanto a la altura, voy a ponerla en 0.1 RAM. Y también cambiar el color de fondo y hacerlo blanco. Entonces en este momento la línea no es visible porque se coloca en la parte superior de la parte inferior. Entonces tenemos que fijar su posición. En realidad, la voy a colocar en el centro del botón. Y para eso, usemos Flexbox. Entonces ahora la línea es visible y lo siguiente que quiero hacer es crear un poco de espacio dentro del botón. Vamos a usar padding con el valor 0.5 RAM. Y también cambiar el tipo de la más gruesa, hacerla puntero. Bien, entonces con un botón, finalmente terminamos. Ahora, voy a encargarme de estos tori, que ahora mismo está oculto. Entonces al principio hagámoslo visible. Voy a deshacerme de la exhibición ninguno de aquí. Entonces como puedes ver ahora, es visible y tenemos que personalizarlo. Definamos su anchura y altura. Voy a hacer los dos cien por ciento. Y luego cambiar el color de fondo. Usemos tu valor RGBA. Vamos a insertar aquí 2536969, y luego la A continuación voy a cuidar su posición. Se debe extender a toda la tarjeta. Así que pongamos la posición a absoluta. Y luego hacer a la izquierda y a las propiedades superiores, ambas cero. Después de eso, alineemos los elementos dentro de esta historia usando flexbox Voy a colocarlos en el centro. Así que vamos a establecer la propiedad de visualización a flex. Entonces necesitamos cambiar la dirección, hacerla columna. Y luego después de eso, para colocar los elementos flex en el centro, tanto horizontal como verticalmente, voy a usar justify-content center y alinear items center y alinear Bien, por último, vamos a crear algo de espacio dentro de la historia. Vamos a usar padding y configurarlo en Ram Bien, con este tory, quiero decir, con el wrapper, ya terminamos Sigamos adelante y personalicemos el encabezamiento y el párrafo. Seleccionemos este encabezado tori y aumentemos su tamaño de fuente, conviértalo en una RAM completa. Entonces voy a hacer la carpeta de fuentes usando font-weight 700 Cambia el color y hazlo blanco. Y además, voy a crear algo de espacio en la parte inferior usando margen inferior, nos devalorizamos para correr Bien, después de eso, seleccionemos párrafo. Incrementa el tamaño de la fuente, hazlo 1.8 gramo. Entonces voy a cambiar el color. Hagámoslo e. también, voy a justificar el texto usando text-align, Y luego crear algo de espacio entre las letras usando espaciado entre letras 0.1 rampa. Bien, entonces el párrafo también está personalizado. Lo único que voy a hacer es crear una pequeña sangría Y para eso, voy a usar texto. La propiedad sangría se devalorizaría para ejecutarse. Bien, dicho eso respecto a la historia, ahora tenemos que hacerla funcionar. Pero antes de eso tenemos aquí un pequeño tema. El botón se coloca detrás de este tori. Entonces para arreglarlo, voy a usar la propiedad z-index Tenemos que fijarlo a algún valor superior a cero, digamos 50. Bien, entonces estamos listos para que este botón funcione. Entonces entonces voy a usar JavaScript. Al principio. Ocultemos las historias para eso. Voy a usar Transformar con la función scale. Para que el elemento quede oculto, tenemos que poner la escala a cero. Bien, así como puedes ver, el almacenamiento u oculto, vamos al archivo JavaScript y antes que nada, seleccionamos los botones. Para eso, voy a usar selector de consultas, todo método. Tenemos que especificar aquí el nombre de la clase, historia, BTN. En realidad, el selector de consultas método devuelve la lista de nodos, que es un objeto similar a una matriz Cada ítem tiene su número de índice y también la lista misma como una propiedad de longitud. Bien, entonces tenemos que mirar a través estos botones y adjuntarlos a cada uno de ellos y al oyente de eventos con el evento click Para recorrer la lista, voy a usar uno de los métodos de ayuda de matriz llamada para cada uno. Nos permite ejecutar una función para cada elemento de la lista por separado. Así que sigamos adelante y usemos forEach. Se necesita un parámetro que va a ser la función de devolución Y esta función se ejecutará para cada elemento de la lista. Esta función de devolución de llamada en sí toma un parámetro, que va a ser el elemento actual de la lista, me refiero al botón Así que vamos a insertar tu btn. Y a continuación tenemos que adjuntar un oyente de eventos al botón Especificemos aquí el tipo de evento que va a ser camarilla Y además ese oyente de eventos exceptúa el segundo parámetro, que es la función arrow, me refiero a la función callback Y se va a ejecutar una vez que rápidamente elemento. Bien, ahora sigamos adelante y probemos si el evento click funciona, voy a correr a la consola. Digamos que hizo clic. Entonces, si inspecciono la página y cambio a la pestaña Consola y luego hago clic en el botón, nos hará clic en la consola Entonces significa que todo funciona bien y ahora tenemos que hacer que la historia funcione. O sea, tenemos que mostrarlo desclick y también necesitamos rotar el botón Entonces déjame explicarte lo que vamos a hacer. Crearemos una nueva clase y CSS, y definiremos estilos con esta clase. Después agregaremos este className a la historia y al botón mismo Lo haremos usando el método toggle porque necesitamos mostrar la historia en el primer click y ocultarla en el siguiente. Entonces como dijimos para eso, tenemos que usar un método llamado toggle. Entonces sigamos adelante y agreguemos una nueva clase al fondo. Necesitamos btn. Y ahora tenemos que usar una de las propiedades llamadas class list. Nos da todas las clases que tiene la mujer. Y también nos permite acceder a los diferentes métodos como toggle, add, y remove. Necesitamos lista de clases seguida del método toggle. Dentro del paréntesis, tenemos que especificar el nombre de la clase Vamos a llamarlo cambio. Entonces ahora si exhibo elementos y cuento fino, BTN Y luego haga clic en él. Verás que obtiene el cambio de clase onclick. Y luego en la siguiente capa en se elimina. Bien, ahora podemos rotar el botón onclick. Vamos al archivo CSS y tenemos que seleccionar story btn con cambio de clase Luego usa Transformar con la función rotar. Voy a rotar elementos 405 grados. Entonces usa transición con transform y con la duración 0.5 s. así que si hago clic en el botón, entonces girará muy bien. Ahora, de la misma manera necesitamos mostrar la historia. Volvamos al archivo JavaScript y agreguemos más cambio a esta historia también. En realidad este tori es el hermano del botón. Así que voy a usar una de las propiedades llamadas next element sibling Necesitamos btn seguido del siguiente elemento hermano. De nuevo, necesitamos usar la lista de clases seguida del método toggle. Y como el nombre de la clase, necesitamos insertar tu cambio. Bien, vayamos al archivo CSS y seleccionemos historia con cambio. Entonces usa transform. Para que la historia sea visible, voy a aumentar la escala de nuevo a uno. Y también usa transición con los valores todos y 0.5 s. bien, ahora si hago clic en el botón, entonces la historia se mostrará Entonces funciona bien, pero eso no es lo que queremos se considera. La escala va en aumento desde el centro. Pero en nuestro caso, necesitamos aumentarlo desde la esquina superior derecha de la tarjeta. Para lograrlo, tenemos que cambiar la propiedad de origen de transformación. Por defecto, está configurado al centro y en nuestro caso va a estar arriba a la derecha. Bien, entonces ahora viene de la esquina superior derecha, pero aún así, no es lo que queremos. Para que el efecto sea mucho más agradable. Voy a manipular con border-radius. Por defecto, voy a establecer el border-radius en 50 RAM. Pertenece a la esquina superior izquierda. Entonces necesitamos cero para la esquina superior derecha. Y luego 50 corrieron por la esquina inferior derecha y también para la esquina inferior izquierda. Además, voy a establecer el radio de borde a cero con Cambio de clase. Bien, entonces ahora todo funciona perfección y antes de que terminemos esta sección, voy a hacer un par de cosas más. Voy a alinear los autos de manera diferente. Voy a colocar la primera tarjeta en la parte superior del rapero. En cuanto a la tercera tarjeta, voy a colocar en la parte inferior del envoltorio. Así que sigamos adelante y seleccionemos la primera tarjeta usando una de estas pseudo-clases llamadas primero-hijo fin de colocar la tarjeta en la parte superior del envoltorio, vamos a usar una línea auto con el valor flex start. Entonces vamos a duplicar este código. Voy a cambiar de primer hijo, último hijo. Y también en lugar de flex start, necesitamos flexionar. Y así como pueden ver, las cartas están alineadas. Entonces, por último, voy a crear un pequeño efecto hover. En realidad, voy a disminuir la opacidad por defecto. Vamos a establecerlo en 0.7. Después aumentar ocho al flotar. Entonces, seleccionemos al miembro del equipo con hover. Establezca la opacidad a uno y luego use la transición con los valores opacidad 0.5 s. Bien, entonces finalmente, terminamos Hemos terminado de trabajar en esta sección. Así que sigamos adelante y nos ocupemos del siguiente. 17. Proyecto 2 - Sección de contacto de creación y estilo y pie de página: La siguiente sección va a ser la sección de contacto. Echemos un vistazo al proyecto terminado. Entonces como se puede apreciar que la sección de conducta consta de tres partes distintas. Tenemos una imagen en el lado izquierdo que un par de campos de entrada en el lado derecho. Y abajo tenemos un pequeño pie de página con algunos textos de copyright. Las dos primeras partes, estoy en la imagen y los campos de entrada se colocan en un entorno 3D y tienen un bonito efecto hover En realidad, quiero mencionar aquí una cosa, mientras estábamos trabajando en el proyecto, me he dado cuenta de que a veces por alguna razón toda la página va al lado izquierdo, y sucede en Google Chrome. Entonces la solución que he pensado fue asignar desbordamiento oculto al contenedor en lugar del cuerpo. Además de eso, voy a definir el ancho. Hagámoslo al 100%. Bien, eso es. Sigamos adelante y comencemos a crear el marcado HTML. Voy a insertar su nueva sección de comentarios para el final de la sección cuatro. Entonces el elemento de sección abierta con una sección de clase para este elemento de sección consistirá en un par de partes diferentes. La primera parte que voy a crear es el encabezado, que será similar a los encabezados de sección anteriores Así que vamos a abrir el elemento de encabezado H1 con un encabezado de sección de clase. Y como el contenido, vamos a insertar tu contacto. Siguiente. Yo voy a encargarme del formulario. Pero antes que nada, vamos a crear una etiqueta div que va a ser el contenedor del formulario. Vamos a usar aquí clase contenedor de espuma. Después inserta una imagen. Voy a seleccionar Form IMG dot PNG de la carpeta images Y también vamos a asignar a la imagen elemento clase formulario IMG ¿Bien? Después de eso, voy a crear el propio formulario. Vamos a asignarle formulario de contacto de clase. Entonces la fórmula consta de cuatro elementos diferentes. Tendremos dos campos de entrada del área de texto y también el botón de enviar. Así que vamos a crear un elemento de entrada con texto tipo. Y además, voy a usar tu atributo placeholder con el valor de tu nombre Entonces voy a duplicar esta línea de código. Cambiar el atributo de tipo cuando aquí correo electrónico. En cuanto al marcador de posición, voy a insertar aquí tu correo electrónico A continuación viene el área de texto. Voy a asignarle un atributo de marcador de posición con el valor de tu mensaje ¿Bien? Después de eso, voy a crear un botón de enviar, y lo voy a hacer usando elementos de entrada, pero con type submit. Y también necesitamos aquí valor, que va a ser enviado. Bien, entonces el último elemento que necesitamos crear es el pie de página. Estoy en el párrafo. Vamos a insertarlo fuera del elemento formulario con los derechos de autor de la clase. Y luego te insertas algunos textos como copyright, seguido del signo de copyright, que va a ser la entidad HTML5. Necesitamos aquí, ampersand, copiar, punto y coma, luego codificar Y también todos los derechos reservados. Bien, eso es. Todo está preparado para comenzar, para iniciar esta sección. Sigamos adelante e insertemos nuevos comentarios en el archivo CSS. Necesitamos la Sección Cuatro. Después final de la sección cuatro. A continuación, seleccione los elementos de sección y defina su anchura y altura. Voy a establecer el ancho al 100%. En cuanto a la altura, hagamos que sea 130% de la ventanilla gráfica. Bien. Después de eso, voy a alinear el encabezado de la sección, el contenedor de formularios y el pie de página usando flexbox, necesitamos display flex Entonces necesitamos colocar los elementos verticalmente en una columna. Entonces voy a cambiar de dirección. Hagámoslo llamar. También. Con el fin de crear algo de espacio alrededor de los elementos flexibles, vamos a usar justificar el espacio de contenido alrededor. Y luego con el fin colocar los elementos horizontalmente en el centro, vamos a usar alinear elementos al centro. Bien, eso es todo sobre este elemento de sección. Sigamos adelante y personalicemos el contenedor del teléfono. Al principio, definamos este ancho y alto. Hagamos ancho Ocho por ciento. En cuanto a la altura, voy a ponerla en 40%. Y también cambiar el color de fondo. Usemos tu color o E5, E9, F, F. Bien, F. Bien, ahora necesitamos colocar la imagen y esos campos de entrada uno al lado del esos campos de entrada Y para eso, voy a utilizar de nuevo los libros flux. Necesitamos display flex. Entonces para colocar los elementos en el centro verticalmente, vamos a usar el centro de alinear elementos. Y luego crear algún espacio entre los elementos usando justificar el espacio de contenido de manera uniforme. Bien, por último, vamos a crear un poco de sombra y hacer el contenedor ligeramente redondeado Entonces voy a usar box-shadow. Va a ser la sombra multinivel. Entonces insertemos aquí 0.3 RAM dos veces, luego apuntemos para RAM y el CCC de color. En cuanto a la segunda sombra, voy a hacerla del lado izquierdo. Entonces necesitamos usar valores negativos, -0.1 gramo dos veces que punto cero para RAM y el mismo color Y también usar border-radius con el valor 0.5. Rampa. Bien, ahora podemos personalizar la imagen. Entonces sigamos adelante y seleccionémoslo. Y primero definamos su ancho. Voy a hacer 55 rem. A continuación voy a cambiar el color de fondo. En este caso, usemos el valor RGBA. Necesitamos aquí 50231255 y la opacidad 0.8. Y también crear algo de espacio dentro de los elementos usando relleno. Hagámoslo cinco rem en los cuatro lados. Bien, sigamos adelante y agreguemos un par de estilos más a la imagen. Voy a disminuir su opacidad. Hagámoslo 0.8, también creamos algún efecto de sombra. Va a estar del lado izquierdo. Entonces necesitamos aquí menos tres RAM que tres RAM para RAM y el color AAA. Y también crear poco radio fronterizo. Vamos a establecerlo en 0.5 redondo. Bien, sentémonos con respecto a la imagen ahora, voy a personalizar un elemento de formulario Vamos a seleccionarlo y definir su ancho. Voy a hacer 45 RAM. Ahora, luego cambia el color de fondo, hazlo blanco. Bien, a continuación, voy a alinear elementos dentro de la forma. Y para eso, vamos a aliviar de nuevo Flexbox. Establezca la visualización en flex, y luego cambie de dirección, conviértela en columna para alinear los elementos verticalmente. Por lo que se considera que los elementos se colocan verticalmente en una columna. Sigamos adelante y agreguemos un par de estilos más a la forma. Voy a crear espacio dentro del elemento usando padding. Hagámoslo tres RAM. Luego establece el radio de borde 2.5 RAM. Y también voy a crear sombra. Los valores tres RAM dos veces, y luego para RAM con el color AAA. Bien, eso es todo sobre el elemento form. Sigamos adelante y personalicemos los campos de entrada. En realidad, tenemos aquí dos entradas y el área de texto y también el botón de enviar, que está representado por el elemento input. Todos esos elementos tendrán un par de estilos comunes. Entonces sigamos adelante y seleccionemos entrada y también el área de texto. En primer lugar, voy a definir margin y padding. Necesitamos crear espacio alrededor de los elementos y también dentro de ellos. Así que pongamos el margen a una RAM. En cuanto al relleno, lo voy a poner en un rem también. A continuación, voy a cambiar el tamaño de fuente, que sea 1.3 RAM. Además, voy a crear algún espacio entre las letras. Vamos a configurarlo en 0.1 RAM. Entonces deshazte del borde predeterminado. Voy a ponérselo a ninguno. Voy a hacer las esquinas redondeadas. Vamos a establecer border-radius para que se ejecute. Y por último, voy a crear box shadow. En este caso necesitamos sombra desde el lado interior. Entonces voy a insertar tu inserción. El valor es 0.1, rem, 0.1 RAM, luego apunta a RAM y el color di, di, di. Y también voy a crear la misma sombra en el lado izquierdo. Entonces me parece a su inserción -0.1 RAM, -0.1 RAM que 0.2 rem, y del Bien, eso es todo sobre los estilos comunes. Ahora quiero personalizar el área de texto El botón por separado. Empecemos con un área de texto. Como saben, podemos cambiar el tamaño del área de texto manualmente, pero luego estropeará el diseño. Entonces quiero limitar su anchura y altura. Así que sigamos adelante y seleccionemos el área de texto. Voy a definir altura máxima y también min-altura. Vamos a establecer la altura máxima en 15 RAM. En cuanto a la altura media, voy a ponerla en diez RAM. Además de eso, voy a definir max-width y min-width Así que vamos a establecer un ancho máximo al 100%. En cuanto al min-width, hagámoslo 70%. Entonces ahora funciona mucho mejor. Sigamos adelante e iniciemos el botón de enviar. Vamos a seleccionarlo usando el atributo type. Entonces en este caso voy a seleccionar Formulario de contacto seguido de los elementos de entrada. Y entre corchetes tenemos que especificar tipo como Enviar. Cambiemos el color de fondo. Vamos a usar aquí RGBA, 50231255 y 0.8 también cambiar el color, Ahora el botón se ve mucho mejor. Sigamos adelante y le agreguemos algunos estilos más. Voy a hacer que la fuente sea más audaz. Así que pongamos font-weight a Boulder. También crea algo de espacio entre las letras. Que sea 0.5 rem. Y por último, cambia el tipo del más basto, hazlo señalar. Bien, entonces el botón está personalizado y antes de continuar, voy a agregarle un poco de efecto hover Así que vamos a agarrar este selector de aquí. Y a ello flotar. Voy a cambiar el color de fondo. Hagámoslo 327ff. Luego usa transición con color de fondo y con una duración de 0.5 s. bien, para que la fórmula esté personalizada Y antes de seguir adelante e iniciar el párrafo abajo, voy a crear algunos efectos 3D. En primer lugar, para crear un entorno 3D, necesitamos usar una de las propiedades llamadas perspectiva. Tenemos que asignarlo al elemento padre, que es el contenedor de espuma. Así que vamos a establecer la perspectiva 200 corrió. En general, una propiedad prospectiva define qué tan lejos está el elemento del usuario. Ahora, necesitamos rotar ambos elementos. Estoy en la imagen y en la forma. Entonces voy a usar Transform. Con función de rotación. Necesitamos rotar los elementos verticalmente según el eje y Vamos a Instituto 20 grados. Entonces necesitamos la misma transformación rotar para el formulario. Pero en sentido contrario, necesitamos -20 grados. Bien, así como puedes ver, los elementos se rotan y lo único que tenemos que hacer es crear un efecto hover Voy a mover los elementos un poco hacia arriba una vez que coloquemos el cursor sobre ellos. Y también, voy a cambiar la sombra. Así que sigamos adelante y seleccionemos Formar IMG con hover. Luego usa Transformar. Necesitamos aquí Traducir función con dirección y. Entonces para mover el elemento hacia arriba, tenemos que insertar tu valor negativo, digamos menos dos rampa. Y también necesitamos de nuevo rotar y con 20 grados. A continuación voy a cambiar la sombra de caja. Eso es Instituto o menos cinco RAM que cinco RAM. Carnero. Y el color AAA. Además, vamos a usar la transición con el valor es 0.5 s. A continuación, necesitamos el mismo efecto hover con el elemento form Así que vamos a seleccionar Formulario de contacto con hover. Entonces voy a agarrar esos estilos de aquí. Aquí necesitamos cambiar 20 grados a -20 grados. Y también en lugar de menos cinco RAM, necesitamos cinco ejecutados. Además, usemos la transición con los valores 0 y 0.5 s. bien, así que todo se ve bastante bien Y lo único que tenemos que hacer es personalizar aquí este párrafo. Así que vamos a seleccionarlo con el nombre de la clase copyright. Después aumenta el tamaño de la fuente, hazlo a Ram. Cambiar el espaciado entre letras. Haz que apunte a la RAM. Además, voy a establecer color a 444 y crear espacio en la parte superior usando margen superior con la rampa de valor cinco. Bien, así que eso es todo sobre la sección de contacto. terminamos con ello y en realidad ya hemos creado todas las secciones de este proyecto. Ahora lo siguiente que voy a hacer es hacer que la NEP o funcione Y también voy a crear un botón que nos permitirá desplazarnos hacia arriba sin problemas 18. Proyecto 2 - Crea botón de desplazamiento hacia arriba y crea trabajo navar: Bien, sigamos adelante y comencemos con la navegación. Tenemos aquí cuatro elementos de navegación diferentes y sus secciones correspondientes. Entonces, una vez que haga clic en los elementos de navegación, entonces debemos navegar a la sección correspondiente sin problemas. Para ello, tenemos que conectar enlaces de navegación a estas secciones utilizando los atributos h reference e ID. Los valores de esos atributos deben coincidir. Así que sigamos adelante y asignemos a todos los enlaces nofollow h atributos de referencia El primero va a estar en casa. Entonces tendremos clientes. El siguiente será equipo como cuerpo. El último va a ser el contacto. Después de eso, tenemos que asignar a los cuatro elementos de sección, atributos id con los mismos valores. Así que vamos a asignar a la primera sección, inserta tu casa. Entonces para la segunda sección , van a ser clientes. A continuación contaremos con equipo. Y por último, contacto. Bien, entonces ahora si hago clic en los elementos de navegación, entonces navegaremos a la sección correspondiente. Pero ahora mismo sin ningún efecto suave. Para solucionarlo, tenemos que usar una de las propiedades llamadas scroll behavior, y tenemos que asignarlo al elemento HTML. El valor va a ser suave. Ahora si hacemos clic en los enlaces de navegación, pero navegaremos sin problemas. Bien, ahora sentémonos sobre la navegación. Como prometí, vamos a crear un botón fijo, que nos permitirá desplazarnos hacia arriba hasta la primera sección. Me refiero a casa. Al principio, vamos a crear un botón en el archivo HTML. Va a ser el elemento link. Vamos a asignarle clase, desplácese hacia arriba BTN. Siguiente Voy a insertar aquí el icono Font Awesome. Vamos a asignar a las clases FAS, FAA, flecha arriba. Después selecciónela en archivo CSS. En primer lugar, definamos la anchura y la altura. Voy a hacer cinco rem a los dos. Luego cambia el color de fondo. Voy a usar aquí el valor RGBA. Eso parece Tier 50231255 y la opacidad 0.8. Entonces se va a arreglar el botón. Se debe colocar en la esquina inferior derecha. Así que vamos a establecer la posición a fijo y luego definimos las propiedades inferior y derecha ambas como cinco corridas. Otra vez. Entonces aquí tenemos el botón que tiene una posición fija. Vamos a agregarle un par de estilos más. Voy a hacerlo redondeado. Digamos que el radio fronterizo al 50%. Eso incrementó el tamaño de la fuente. Vamos a configurarlo en 1.6 RAM. También cambia el color, hazlo blanco. Por último, voy a colocar el icono en el centro. Entonces usemos flexbox. Necesitamos display flex, justifique el centro de contenido y alinee el centro de elementos. Bien, entonces el botón está personalizado y antes de que lo haga funcionar, vamos a agregarle un poco de efecto hover Seleccionemos el botón con hover. Una vez que pasemos el cursor sobre el botón, voy a cambiar ligeramente su color de fondo Entonces usemos tu color tres-dos e7ff, y luego usemos la transición con color de fondo y con la duración 0.5 s. bien, para que todo esté listo. para que todo Ahora, sólo tenemos que hacer que este botón funcione. Y para eso tenemos que especificar el atributo de referencia h. Necesitamos insertar tu casa. Ahora bien, si me desplazo hacia abajo y luego hago clic en el botón, entonces se desplazará hacia arriba de nuevo a la primera sección. Bien, así que eso es todo. Hemos terminado de construir nuestro proyecto. Lo único que tenemos que hacer es sea sensible a diferentes tamaños de pantalla. 19. Proyecto 2 - Hacer que responda al proyecto: Bien, así que como ustedes saben, este proyecto se construye sobre el tamaño de pantalla extra grande Estoy dentro. Esto coincide con 1920 píxeles de ancho y 1080 píxeles de alto Ahora tenemos que hacerlo sensible a diferentes tamaños de pantalla. Sigamos adelante e inspeccionemos la página y cambiemos al modo responsive. Entonces ya tengo todos preparados diferentes puntos de interrupción en los que necesitamos hacer algunos cambios Entonces no voy a perder el tiempo en encontrarlos. El primer punto de interrupción en el que voy a hacer algunos cambios va a ser de 1,400 píxeles Como ves, el proyecto necesita algunos cambios. Entonces, sigamos adelante e insertemos nuevos comentarios, receptivos e insensibles A continuación, cree una nueva consulta de medios CSS y especifique el ancho máximo como 1,400 Entonces lo primero que voy a hacer es mover un poco hacia abajo el fondo flotante. Así que vamos a seguir adelante y seleccionarlo y cambiar su posición superior. Voy a hacer que sea -120 de ancho de la ventanilla. A continuación, vamos a encargarnos de la rúbrica. Entonces sigamos adelante y seleccionémoslo. Al principio. Voy a disminuir el tamaño de la fuente. Hagámoslo seis RAM. También cambiar su posición. Vamos a establecer el ancho de la ventanilla 225 superior. Y también voy a cambiar su ancho. Hagamos que sea siete para correr. Bien, así como pueden ver, encabezado de la sección se ve bien A continuación, voy a disminuir ligeramente el tamaño de fuente de los elementos de navegación. Así que sigamos adelante y seleccionemos ahora por enlace y fijemos su tamaño de fuente para que se ejecute. Bien, eso es lo de la barra de navegación. Sigamos adelante y cuidemos el logo, que en este momento es mucho más grande. Y también voy a moverlo un poco hacia abajo. Así que vamos a seleccionar Logo. Establezca su posición superior en 75 por ciento. Después de eso, voy a seleccionar el icono Font Awesome. Disminuyamos su tamaño de fuente. Haz que se dé la vuelta. Bien, así que eso es todo sobre la primera sección. A continuación, voy a encargarme de la segunda sección. Al principio, vamos a personalizar el encabezado. Quiero decir, todos los encabezamientos de sección. Vamos a seleccionarlos. Voy a disminuir el tamaño de la fuente, que sea ocho RAM. También cambia el margen inferior, hazlo dar la vuelta. ¿Bien? Entonces el encabezado se ve bien en este momento, cada sección tiene la altura definida en la altura de la ventana gráfica Y voy a cambiarlo y hacer la altura. Aunque en este caso, esta sección ocupará la altura que se requiera para mostrar el contenido. Bien, a continuación, voy a encargarme de las tarjetas. Quiero colocarlos en diferentes líneas. Y además voy a crear algo de espacio alrededor de cada tarjeta. Entonces, antes que nada, vamos a seleccionar el envoltorio. Me refiero a envoltorio de clientes. Para poder colocar las tarjetas en diferentes líneas, tenemos que usar la propiedad flex wrap y necesitamos configurarla para envolverla. Después de eso, vamos a seleccionar el propio cable. Necesitamos cliente y definimos margen como cinco rem en la parte superior e inferior y diez RAM en los lados izquierdo y derecho. Bien, eso es sobre la segunda sección. Sigamos adelante y hagamos lo mismo para el tercero. Seleccionemos la Sección tres y dijimos hola a auto. Entonces tenemos que seleccionar un rapero, me refiero a team wrapper y establecer flex wrap para envolver. Por último, seleccionar la tarjeta en sí, me refiero a miembro del equipo y definir margen como cinco rem en la parte superior e inferior y tratando de rampa en los lados izquierdo y derecho. Bien, por último, voy a encargarme de la sección de contacto. Aumentemos el tamaño del fondo. Seleccione Formar contenedor y establezca su altura en 60%. A continuación, voy a ocultar la imagen en absoluto. Así que vamos a seleccionar Formulario IMG Asignado para mostrar cuál es el valor, ninguno Así es que se puede ver que la imagen está oculta. Además de eso, creo que ya no necesitamos rotar el propio formulario. Así que vamos a seleccionar Formulario de contacto. Luego use la propiedad transform con la función Translate. Tenemos que ponerla a cero. Y finalmente, cambiemos el efecto hover. Ahora mismo la forma se mueve hacia arriba por dos rampas y voy a cambiarla y hacerla una. Así que vamos a seleccionar Formulario de contacto con hover. Entonces agarra esta línea de código y en vez de cero, vamos a insertar aquí menos una carrera. Por último, vamos a crear algo de espacio en la parte inferior del párrafo. En este momento tiene un margen superior con el valor cinco rem. Voy a agregarle margen en la parte inferior también. Entonces, seleccionemos Párrafo y margen definido con los siguientes valores. Necesitamos cinco rem en la parte superior que cero en el lado derecho para RAM en la parte inferior y cero en el lado izquierdo. Bien, eso es. Creo que el proyecto se ve bien en ese punto de ruptura. Entonces, sigamos adelante y encontremos el siguiente, que creo que va a ser de 1,150 píxeles Así que vamos a seguir adelante y crear nuevos medios CSS y especificar un ancho máximo como 1,150 Al principio, movamos el fondo flotante hacia abajo. Así que vamos a seleccionarlo y configurarlo posicionado a -110 de ancho de ventana gráfica Después de eso. Como puedes ver, necesitamos personalizar el elemento heading. Así que vamos a seleccionarlo. Voy a establecer su tamaño de fuente a cinco RAM. Después cambia la posición superior, hazla 30. Reportaje. En cuanto al ancho, voy a disminuir H.263 redondo Bien, por último, vamos a disminuir ligeramente el tamaño del logotipo Seleccionemos el icono Font Awesome y establecemos el tamaño de fuente en nueve rampas. Bien, así como puedes ver, la primera sección se ve bien y en realidad todas las demás secciones también se ven bien Entonces voy a encargarme del siguiente punto de ruptura. El siguiente va a ser de 950 pixeles. Así que vamos a crear nuevos medios CSS y especificar aquí en el ancho máximo como 950 píxeles. En esos puntos de interrupción. Voy a encargarme de la primera sección otra vez. Así que seleccionemos fondo flotante y volvamos a cambiar su posición. Voy a moverlo. Esto va a estar abajo. Así que pongamos la parte superior a -100 de ancho de la ventanilla. Y también te sacará del rumbo. Voy a cambiar su posición. Vamos a establecer los dos primeros para el ancho de la ventanilla. ¿Correcto? Lo único que voy a hacer en el punto de ruptura es aumentar espacio entre los elementos de navegación. Así que vamos a seleccionar ahora poder y uso justificar propiedad de contenido con el ritmo de valores alrededor. Bien, así que eso es todo en el punto de ruptura. Sigamos adelante y encontremos el siguiente. Creo que va a ser de 750 pixeles. Así que de nuevo, voy a crear una nueva consulta de medios CSS con el ancho máximo de 750 Lo primero que voy a hacer en el punto de ruptura es disminuir el tamaño de fuente del elemento HTML. Vamos a establecerlo al 50%. En realidad, afectará a todos los elementos. Entonces, como puede ver, se disminuyen los tamaños de los elementos. Siguiente Voy a mover de nuevo el fondo flotante un poco hacia abajo. Así que vamos a seleccionarlo y establecer la posición superior. En este caso, dos menos nueve al ancho de la ventanilla. Después de eso, voy a mover el rumbo un poco hacia abajo también. Así que vamos a seleccionarlo. Encontramos propiedad superior, hacemos 48 de ancho de la ventanilla Y por último, voy a disminuir espacio en la parte inferior de este encabezamiento de sección. Vamos a establecer el margen inferior a cinco corridas. Bien, así que eso es todo. En un punto de ruptura, todas estas secciones se ven bien. Y ahora tenemos que seguir adelante y hacer algunos cambios en el último punto de interrupción, que va a ser de 550 píxeles Bien, vamos a crear nuevos medios CSS y especificar el ancho máximo como 550 Volvamos a disminuir el tamaño de fuente del elemento HTML. En este caso, voy a fijarlo en 45%. Después de eso, cuidemos el fondo flotante y el rumbo también. Voy a cambiar la primera posición. Hagámoslo -70 de ancho de la ventanilla. A continuación, seleccione Sección uno encabezado. Voy a cambiar su posición superior. Hagámoslo 65. Ancho de la ventanilla También cambia el ancho, hazlo 42 RAM, y luego disminuye el tamaño de fuente, hazlo 3.5 Ran. Bien, entonces la primera sección se ve bien. A continuación voy a disminuir el tamaño de fuente de los encabezados de sección Así que vamos a seleccionarlos y establecer el tamaño de fuente en seis RAM. Después de eso, voy a personalizar las tarjetas. Como puede ver, necesitamos aumentar el ancho de las tarjetas. Pero en realidad cada carta ya tiene suficiente ancho. Y el problema aquí es el margen en los lados izquierdo y derecho. Entonces, seleccionemos al cliente. Voy a definir margen como cinco rem en la parte superior e inferior y cero en los lados izquierdo y derecho. Hagamos lo mismo con el miembro del equipo también. Vamos a establecer el margen a cinco rem y cero. Bien, eso es todo sobre la segunda y la tercera sección Las tarjetas se ven bien. Sigamos adelante y personalicemos la cuarta sección. Yo hice la sección de contacto. Al principio, voy a cambiar la altura y ponerla en general. A continuación, voy a ocultar el fondo. Entonces, seleccionemos Contenedor de formularios. Voy a establecer el color de fondo en transparente. Y también deshazte de la sombra de caja. Vamos a ponerla en ninguna. Bien, por lo que se considera fondo está oculto. A continuación, cuidemos la forma misma. Voy a disminuir la sombra de caja. Seleccionemos Formulario de Contacto y fijemos la sombra de caja a 1 g dos veces que para ejecutar el color AAA. A continuación, también voy a cambiar la sombra de caja al flotar Duplicemos este código aquí al pasar el cursor al formulario de contacto y cambiemos los valores Vamos a usar aquí para RAM dos veces. Después tres Ran. Bien, eso es todo sobre el elemento formulario. Por último, voy a personalizar el párrafo y también quiero mover el botón de desplazamiento a la esquina. Entonces, al principio vamos a seleccionar párrafo con los derechos de autor de la clase. Voy a disminuir ligeramente el tamaño de la fuente. Hagámoslo 1.8 RAM. Después establece el margen a cinco rem. Y también usa el centro de alineación de texto. Para el botón. Voy a fijar ambas posiciones. Estoy en el fondo y derecho a, a correr. Bien, eso es todo. Todas estas secciones se ven bien y hemos terminado de trabajar en ello. Espero que lo hayas disfrutado y hayas aprendido algo nuevo e interesante . Vamos a seguir adelante. 20. Proyecto 3 - Previsión de proyecto: Bien, así que es momento de construir nuestro próximo proyecto, que va a ser el clon de uno de los sitios web más populares y de uso común llamado Paypal, creará la interfaz de usuario de las diferentes páginas Estoy en la página principal, páginas de inicio de sesión y registro. Por supuesto que no será el clon exacto con toda la funcionalidad. Como dije, vamos a construir solo una interfaz de usuario con HTML, CSS y JavaScript. Paypal se ve diferente en diferentes países. La interfaz de usuario cambia frecuentemente de vez en cuando. Así que no te preocupes si este no es el clon exacto de la IU actual. Bien, entonces antes de saltar directamente a escribir el código, al principio, describamos cómo es el proyecto Entonces como dije, construiremos tres páginas diferentes, sesión principal e inscríbase. Empezaremos por la página principal. Consistirá en un par de secciones diferentes. La primera sección va a ser el banner con navegación. Tenemos aquí varios elementos de navegación. Si pongo el cursor sobre ellos, entonces se mostrará el menú desplegable Cambiará una vez que pasemos cursor sobre otro elemento de navegación Además, tendremos aquí dos botones diferentes para iniciar sesión e inscribirse. Si hago clic en ellos, entonces navegaremos a la página adecuada. Por lo que a la pancarta le seguirá la segunda sección. Incluirá tres partes diferentes con Font, iconos impresionantes, algunos elementos de texto y botones. Entonces tendremos esta sección azul con algunos párrafos diferentes. A continuación, construiremos esta pequeña sección aquí con una imagen y tres pasos diferentes. Abajo, tendremos un botón para apuntarte, seguido del pie de página. Bien, así que veamos sobre la página principal. Echemos un vistazo a la página de inicio de sesión. Será bastante similar a la página de inicio de sesión original. Tendremos aquí dos campos de entrada con botones. Esa es probablemente la página de registro. Constará de dos partes. En el lado izquierdo, tendremos varias imágenes de los clientes. En cuanto al lado derecho, incluirá dos opciones distintas. Si queremos crear una cuenta personal o comercial. Bien, así que eso es todo sobre el proyecto. Como de costumbre, lo haremos sensible a diferentes tamaños de pantalla. Si inspecciono la página y cambio al modo responsive, verás que es responsive. Una cosa a tener en cuenta aquí, en tamaños de pantalla más pequeños, ya no tendremos los desplegables Se transformarán al menú así. Bien, entonces eso es todo. Estamos listos para comenzar a construir el proyecto. Entonces, sigamos adelante. 21. Proyecto 3 - Crear y personalizar el desembarque: Bien, así que una vez que describimos nuestro próximo proyecto, ahora podemos empezar a construirlo. He creado una nueva carpeta en el escritorio llamada Agencia de Negocios, en la que tengo otra carpeta para las imágenes. Sigamos adelante y abramos esta carpeta en VS Code y creamos nuestros archivos de trabajo para HTML, index o HTML. Entonces para CSS, llamémoslo style.css y script.js. Después abre el archivo index.html y crea un documento HTML básico. Para eso, como de costumbre, voy a usar una o dos vistas paquete de código se llama emmet Tenemos que insertar aquí un signo de exclamación y luego presionar Tab o Enter Aquí vamos. Aquí tenemos las etiquetas HTML básicas. En primer lugar, voy a cambiar el título. Insertemos una agencia de negocios de año y luego vinculemos los archivos CSS y JavaScript. Vamos a abrir la etiqueta de enlace y especificar la parte del archivo. Eso probablemente sea JavaScript. Voy a abrir la etiqueta script justo encima de la etiqueta del cuerpo de cierre. Y luego vamos a especificar la parte del archivo en el atributo source. Entonces los tres archivos están conectados. A continuación, quiero traer un enlace más. A lo largo del proyecto, voy a usar los iconos Font Awesome. Así que sigamos adelante y busquemos Font Awesome, CDN, js. Entonces toma el enlace desde aquí, abre la etiqueta de enlace en los elementos head y pega el enlace como el valor de los atributos de referencia h. Bien, así que ahora podemos ejecutar el proyecto al navegador para eso Como ya adivinaste, voy a usar uno de los paquetes de código VS se llama servidor en vivo Nos permite ejecutar la vida del proyecto para el navegador y realizar los cambios sin actualizar la página. Bien, por último, coloquemos el navegador y el editor de texto, así Y empezar. Entonces vamos a construir el proyecto sección por sección. Crearemos el marcado HTML para cada sección y luego lo personalizaremos usando CSS La primera parte que vamos a construir va a ser el aterrizaje. Abramos la etiqueta de regalo, que va a ser el contenedor. Después instituir nuevos comentarios para la sección uno. Y luego abrir elemento de sección con una clase sección uno. Por lo que la primera sección incluirá el banner, que a su vez consistirá en el encabezado, párrafo y un botón. Entonces vamos a abrir la etiqueta div con el banner de la clase. Entonces dentro de ese elemento, voy a abrir elementos de encabezado H1 con una banda de clase a la que nos dirigimos. Como recuerden, el encabezado tendrá la animación CSS. Consistirá en cuatro elementos de texto diferentes y estarán representados por los elementos span. Entonces voy a insertar lapso de año con una clase encabezando uno. Y con el contenido ideas de negocio. Duplicemos este código tres veces y cambiemos los nombres de las clases y también el contenido. El segundo va a ser de consultoría. Entonces tendremos marketing digital. Y la última va a ser la estrategia. Bien, así que eso es todo sobre el rumbo. A continuación, necesitamos crear el párrafo. Entonces es abrir elementos p con el párrafo del banner de clase, y luego interferir algún texto ficticio Por último, necesitamos crear un botón, por lo que es una etiqueta de botón abierto con el banner de clase btn Y luego inserta tu contenido descubre. Ahora. Bien, entonces se crea el marcado HTML para la primera sección, y ahora tenemos que empezar a escribir algo En primer lugar, voy a crear algunos estilos comunes y restablecer. Vamos a insertar nuevos comentarios, estilos comunes. De estilos comunes. Después selecciona cada elemento usando un asterisco. Entonces, antes que nada, voy a deshacerme margen predeterminado y el relleno de cada elemento. Así que pongamos ambos a cero Entonces voy a establecer el tamaño de la caja border-box Vamos a deshacernos del esquema predeterminado. Vamos a ponerla en ninguna. A continuación, voy a deshacerme del defecto subrayado de los elementos del enlace. Entonces usemos decoración de texto con el valor none. Y por último, voy a eliminar las viñetas por defecto de los elementos de la lista. Vamos a usar list-style-type, none. Bien, así como puedes ver, todos los estilos comunes se aplican a los elementos. A continuación, voy a encargarme de las fuentes. A lo largo del proyecto, usaremos un par de fuentes diferentes. Algunas de ellas serán fuentes de Google, pero además de eso, también usaremos otras formas. Sigamos adelante y visitemos el sitio web de Google Fonts. Y luego buscar abajo dA2. Voy a seleccionar todos los diferentes estilos aquí. A continuación, voy a buscar a Oswald. Seleccionemos todos estos estilos también. Entonces voy a agarrar el enlace y pegarlo en la cabeza. Entonces las fuentes de Google están enlazadas. Pero además de eso, voy a usar otros teléfonos llamados made Saul maize, que me parece bastante agradable Este teléfono se utiliza en un par de lugares del proyecto. Quiero decir, por ejemplo, el logo de la página web. Ya instalé esta fuente. Se adjunta a esta conferencia. Para que puedas seguir adelante y descargarlo e instalarlo. Bien, lo último que voy a hacer aquí, quiero decir que los estilos de cada elemento es definir la familia de fuentes Por defecto, voy a establecer familia de fuentes para comprar Lu Da dos cursos. Entonces, como puedes ver, la familia de fuentes se cambia. A lo largo del proyecto. Vamos a usar RAM como unidades de medida. este momento, 1 g equivale a 16 píxeles porque por defecto, el tamaño de fuente del elemento HTML es igual a 16 píxeles. Quiero convertir uno corrió 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, así como pueden ver, todos los elementos se hicieron más pequeños. Y ahora una RAM equivale a diez picos. Sigamos adelante y nos ocupemos de la primera sección. Voy a insertar sus nuevos comentarios, sección uno. Y la sección uno. A continuación, seleccione el elemento de sección. En primer lugar, definamos la anchura y la altura. Voy a establecer el ancho al 100%. En cuanto a la altura, hagámosla al 100% de la ventanilla. Además de eso, voy a establecer la imagen como fondo de pantalla completa Así que vamos a especificar aquí la URL de la imagen. Así que tenemos la carpeta Imágenes y necesitamos seleccionar Dark BG dot jpeg. Además, vamos a insertar aquí sin repeticiones. Además de eso, voy a establecer el tamaño del fondo para cubrir. Entonces, como puedes ver, este elemento de sección tiene una imagen de fondo a pantalla completa Entonces eso es todo sobre este elemento de sección. Sigamos adelante y cuidemos la pancarta. En primer lugar, voy a definir su posición y colocarla en el centro de la página. Entonces seleccionemos banner y definamos su ancho, hazlo al 100%. Entonces voy a poner su posición a absoluta. Entonces para posicionarlo de acuerdo a sus elementos padre, voy a establecer la posición relativa para este elemento de sección. Y luego definir la propiedad superior, hacerla 20%. En cuanto a la izquierda, voy a ponerla en 50 por ciento. Ahora, para el centrado perfecto, tenemos que mover el elemento hacia el lado izquierdo en un 50 por ciento Entonces usemos Transformar, luego traduzcamos con dirección x, y tenemos que colocar aquí -50% Y finalmente, alineemos el texto en el centro usando text-align Bien, así que consideremos que el banner está centrado y ahora tenemos que personalizar cada elemento Yo hice el rubro párrafo y botón. En este momento, el encabezado incluye cuatro elementos de span diferentes. Eventualmente vamos a crear animaciones agradables con esos elementos span. Pero ahora solo necesitamos personalizar los elementos. Entonces voy a comentar los elementos de este panel y dejar solo uno de ellos. Después selecciona el encabezado y crea algo de espacio en la parte inferior. Usando margin-bottom. Para RAM. También, voy a definir la altura del rumbo. Vamos a ponerla en rampa 20. Después de eso, vamos a seleccionar este elemento span en sí mismo. Entonces antes que nada, voy a definir la familia de fuentes. En este caso, vamos a usar fuente llamada Oswald san-serif que aumentan el tamaño de la fuente, hacen que hacen Y también, voy a definir el peso de la fuente como 400. Bien, agreguemos un par de estilos más. Los elementos span, voy a transformar texto en mayúsculas También cambia el color y hazlo blanco. Y además de eso, voy a usar poco efecto de sombra. Vamos a usar texto. La sombra con un valor es 0.3 rondas dos veces que 0.6 RAM. Y como el color, voy a usar el valor RGBA con color negro y con la opacidad 0.5 Bien, entonces veamos el rumbo ahora mismo. Sigamos adelante y cuidemos el párrafo. Voy a seleccionar el párrafo final. En primer lugar, definamos un tamaño de fuente, conviértalo en un rango completo. Después cambia el peso de la fuente. Voy a llegar a ser 400. También transforma texto en mayúsculas. Después cambia el color, hazlo blanco. Y también voy a establecer el color de fondo al valor RGBA Vamos a usar aquí el color negro y la opacidad 0.6. Bien, sigamos adelante y agreguemos un par de estilo más al párrafo. Por lo que voy a disminuir el ancho. Hagámoslo 30%. A continuación, voy a crear algo de espacio en la parte inferior. Y también hay que centrar el párrafo para eso. Vamos a usar margen. Voy a ponerla a cero en la parte superior. Entonces necesitamos aldol en los lados derecho e izquierdo. Y para RAM en la parte inferior. Después de eso, voy a crear algo de espacio en la parte superior e inferior dentro del párrafo usando relleno. Relleno a un rem y cero, y también crea algún efecto de sombra. Usemos box-shadow con los valores uno ejecutó dos veces que cinco RAM Y utilizar de nuevo el valor RGBA con un color negro y con la opacidad 0.5 Bien, entonces el párrafo está personalizado. Y a continuación tenemos que tomar aquí del fondo. Vamos a seleccionarlo. En primer lugar, definamos la anchura y la altura. Voy a establecer con 23 para correr. En cuanto a la altura, hagamos que sea seis RAM. Luego cambia el color de fondo. Voy a usar aquí la función de gradiente lineal. Consistirá en dos colores diferentes. Y quiero que la dirección de la transición de los colores sea, para escribir. En cuanto a los colores, vamos a insertar aquí el primero, va a ser 90 e0e Para el segundo, te voy a interrumpir 71010, luego cambiar el color del texto, hacerlo blanco Entonces aquí tenemos el botón. Sigamos adelante y le agreguemos algunos estilos más. Voy a aumentar el tamaño de la fuente. Hagamos que se ejecute y también transformemos el texto en mayúsculas Entonces voy a hacer redondear el botón usando border-radius Vamos a establecerlo en tres marca y también cambiar el borde predeterminado. Voy a poner borde 2.1 rampa sólida. Y como el color, usemos 800505. Bien, después de eso, voy a crear algunos efectos de sombra. Quiero crear sombra para el botón y para el texto también. Entonces usemos box-shadow son los valores una ejecución, luego para ejecutar tres RAM y el valor RGBA con el color negro y con la opacidad A continuación voy a crear sombra de texto. Vamos a establecer los valores 2.6 RAM que 0.3, 0.2 RAM. Y utilizar de nuevo RGBA con un color negro y con la opacidad 0.4 Por último, pongamos el cursor a punto. Bien, entonces el botón está estilizado y se ve bastante bien Ahora tenemos que agregar la animación y algunos efectos a los elementos del banner. Entonces, sigamos adelante. 22. Proyecto 3 - Añade animaciones al aterrizaje: Bien, así que hemos personalizado la landing page, y ahora tenemos que seguir adelante y agregar algunas animaciones a los elementos del banner Sigamos adelante y comencemos con el rumbo. Como saben, consta de cuatro elementos span diferentes. En este momento tres de ellos son mandados y escondidos. Entonces, antes que nada, hagámoslos visibles. Entonces aquí vemos los cuatro encabezamientos. A continuación, tenemos que colocarlos uno encima del otro. Y para eso necesitamos fijar su posición a absoluta. Entonces ahora los encabezamientos se colocan uno encima del otro, pero necesitamos colocarlos en el centro Para eso, usemos flexbox. En primer lugar, voy a establecer el ancho al 100%. Y entonces necesitamos display flex y justifique el centro de contenido. Bien, así que eso es todo. Los encabezados están posicionados y ahora tenemos que seguir adelante y empezar a trabajar en las animaciones CSS Entonces déjame explicarte lo que vamos a hacer. Vamos a mover los encabezados cerca del usuario con el traducir la función en el entorno 3D Y también los vamos a esconder. Este será el estado por defecto del rubro. Después de eso, mostraremos los encabezados en orden con algunos intervalos Entonces, antes que nada, vamos a crear un entorno 3D. Para ello, tenemos que usar una de las propiedades llamadas perspectiva. Nos muestra lo lejos que está el elemento del usuario. Voy a asignarlo a los elementos de encabezado. Así que pongamos la perspectiva a la rampa 50. Después de eso, movamos los encabezamientos y también alto. Entonces usemos Transformar con la función Traducir Z. Voy a usar aquí ocho RAM. Y luego para ocultar encabezamientos, usemos opacidad cero Y además de eso, para que el efecto se vea mejor, voy a incrementar el espacio entre las letras Vamos a establecer ese espaciado en tres rampas. Bien, entonces los encabezamientos están ocultos, pero ahora mismo tenemos aquí un pequeño tema Esta barra de desplazamiento apareció aquí abajo abajo. Entonces para arreglarlo, voy a usar overflow hidden y tenemos que asignarlo al elemento heading. Entonces como puedes ver, ya no tenemos aquí la barra de desplazamiento. Ahora es el momento de crear las animaciones CSS. Y para eso voy a usar fotogramas clave CSS. Necesitamos agregar signo seguido de la palabra clave fotogramas clave. Y luego tenemos que establecer el nombre de los fotogramas clave. Vamos a llamarlo encabezado animado. Entonces tendremos un par de pasos. Echemos un vistazo al proyecto terminado. El primer paso, del 0% al 3%, ocultarán los rubros Tendrán exactamente las mismas propiedades que les asignamos por defecto. Estoy en esas tres propiedades. Después de eso, del 3% al 25 por ciento, lo mostraremos de nuevo el rumbo a su posición predeterminada. En la posición predeterminada, estoy en la posición cuando el encabezado es visible. Entonces, sigamos adelante y definamos el primer paso. Cero por ciento. Necesitamos aquí Transformar, Traducir Z ocho RAM que opacidad a cero Espaciamiento lateral egn, tres rem. A continuación necesitamos el tres por ciento. Entonces, al tres por ciento, necesitamos Transformar Traducir Z con cero. Entonces tenemos que hacer visible el elemento. Vamos a establecer la opacidad a uno y también disminuir el espaciado lateral Hazlo 1.5 renta. Después de eso de 3% a 25%, el rubro será visible. Y luego del 25 por ciento al 28 por ciento. Durante este 3%, volverá a esconderse. Aquí necesitamos 25%. Vamos a agarrar esos tres valores y pegarlos aquí. En cuanto al 28%, necesitamos hacer algunos cambios. Necesitamos traducir la función z con un tranvía, luego opacidad cero y espaciamiento lateral tres rampa Y finalmente, del 28% al 100 por ciento, se ocultará el rubro. Entonces, al 100 por ciento, necesitamos Transform Translate Z, un tranvía, opacidad cero y tres rampas entre letras Por lo que agregaremos este ciclo a todos los encabezamientos, pero con diferentes tiempos de retraso Por lo tanto, se exhibirán en altura en orden. Nuevamente, todos los encabezamientos realizarán el ciclo, me refiero a ocultar que mostrar. Y luego otra vez escondiéndose. Pero lo harán con diferentes tiempos de retraso. Bien, entonces es momento de ejecutar esta animación. Necesitamos seleccionar todos los encabezados por separado y asignarles propiedades de animación Empecemos por la primera partida. Vamos a asignarle animación, seguido del nombre de la animación, que es encabezado animado Entonces necesitamos la duración 12 s. entonces el tiempo de retardo va a ser de 3 s para el primer rumbo. Y también necesitamos ejecutar la animación infinitamente. Entonces agreguemos aquí infinito. ¿Bien? Duplicemos este código tres veces y cambiemos los nombres de las clases. Y también la cantidad de tiempo de retardo. Necesitamos rumbo 2.6 s. Luego para el tercer rubro, necesitamos 9 s. Para la contratación de fallas, necesitamos 12 s. Entonces como pueden ver, tenemos aquí un efecto de animación bastante genial. Bien, así que eso es todo sobre los elementos del encabezado. A continuación, voy a crear animaciones para el párrafo y la parte inferior, y además voy a crear un bonito y genial efecto hover con el botón Entonces una vez que recarguemos la página, voy a mostrar el párrafo y el botón con algunos defectos falsos en orden Así que de nuevo, tenemos que definir los fotogramas clave CSS, y tenemos que ejecutar esas reglas CSS con propiedades de animación Sigamos adelante y comencemos con un párrafo. En primer lugar, voy a ocultar el párrafo por defecto. Vamos a establecer la opacidad cero y la visibilidad oculta. Entonces como puedes ver, el párrafo está oculto y ahora tenemos que crear los fotogramas clave CSS Vamos a llamarlo fade animation. En realidad, utilizaremos esta animación para ambos elementos. Yo estoy en el párrafo y Boston también. Entonces, en general, tendremos dos pasos diferentes. El 0.0 por ciento inicial y el 0.100% final. Lo único que tenemos que hacer es hacer que el elemento se oculte al cero por ciento y hacerlo visible al cien por ciento. Entonces necesitamos opacidad cero y visibilidad oculta al 0%. En cuanto al 100%, necesitamos opacidad uno y visibilidad visible. Entonces los fotogramas clave están listos. Ahora tenemos que ejecutar este código usando la propiedad animation. Así que vamos a asignarlo al párrafo con los valores fade animation 1 s duration, y luego necesitamos tiempo retardado, 1.5 s. así que ahora como puedes ver, la animación funciona. El párrafo aparece con efecto de desvanecido. Pero tenemos aquí un problema. Una vez terminada la animación, entonces el párrafo se eleva nuevamente. Obtiene, de nuevo, son estilos predeterminados. Me refiero a opacidad a cero y visibilidad oculta. No necesitamos eso. Necesitamos el párrafo para mantener los estilos que se definen en el segundo paso. O sea, esto dice que el 100%, para lograrlo, tenemos que agregar aquí otro valor, que es el valor de la propiedad de modo película de animación, y se llama forward. Entonces ahora si vuelvo a cargar la página, entonces todo va a funcionar perfectamente Bien. Entonces eso es todo sobre el párrafo. Hagamos lo mismo para el botón también. Como decíamos, necesitamos la misma animación, así que no necesitamos volver a definir los fotogramas clave Solo tenemos que asignar a la propiedad Bateson y animación Pero antes de eso, ocultemos el botón. Necesitamos opacidad cero y visibilidad oculta. Y luego usar la animación. Con los siguientes valores. Necesitamos una animación de desvanecido que la duración 1 s como el tiempo de retardo. Voy a usar 2 s. y luego necesitamos de nuevo adelante. Bien, así que ahora todo funciona bien y tenemos aquí bonitos efectos de animación Bien, a continuación voy a crear un bonito efecto hover para el botón Echemos un vistazo al proyecto terminado. Una vez que pasemos el cursor sobre el botón, entonces va a brillar. Este efecto brillante se creará con un pseudo elemento, creará estos pequeños elementos blancos, y seguiremos flotando Así que sigamos adelante y seleccionemos botón con un antes pseudo elementos En primer lugar, como contenido definido, hazlo vacío. Entonces voy a establecer ancho y alto, ambos 200 por ciento. En cuanto al fondo, voy a usar la función de degradado lineal. Por lo que la dirección de la transición de los colores será de izquierda a derecha. Y voy a usar tres colores diferentes. El primero va a ser transparente. Entonces tendremos el color blanco. Y el tercero va a volver a ser transparente. Entonces ahora mismo el elemento no es visible porque tenemos que definir la posición. Fijemos la posición a absoluta. Entonces. Para posicionarlo de acuerdo a su elemento padre, que es el botón, tenemos que definir la posición del botón como relativa. Luego usa Posición superior, hazlo cero. En cuanto a la propiedad de la izquierda, voy a ponerla en -100% Bien, entonces aquí tenemos los pseudo elementos antes. Antes de que lo hagamos funcionar, lo voy a sesgar un poco horizontalmente Entonces usemos la transformación con la función skew x. Y como valor, vamos a fijarlo en 30 grados. Bien, así que todo está listo para crear un efecto hover. Voy a mover el pseudo elemento antes hacia el lado derecho al flotar Así que vamos a seleccionar botón con hover, seguido del pseudo elemento before Y luego fijó la propiedad izquierda al 100 por ciento. Además de eso, necesitamos hacer la transición. Tenemos valores a la izquierda final, 0.5 s. ¿Bien? Así que todo funciona a la perfección. Lo único que tenemos que hacer es ocultar este elemento por defecto. Para ello, vamos a usar desbordamiento oculto. Bien, así que eso es todo. Con la primera sección ya terminamos. Ahora, voy a seguir adelante y crear la napa 23. Proyecto 3 - Crear y personalizar la barra de navegación: Bien, entonces ahora tenemos que empezar a trabajar en la barra de navegación. Sigamos adelante y echemos un vistazo al proyecto terminado. Entonces aquí tenemos el Napa con un logo y el ícono de Menú. Si hago clic en él, entonces la navegación aparecerá con un par de elementos de navegación. Tendrán un pequeño efecto hover. Cambiaremos el color de los artículos en Harvard. Además de eso, el ícono de Menú se transformará en esta flecha aquí. Si hago clic en él, entonces a la siesta o se cerrará. Ahora Pablo también tendrá la animación. Si recargamos la página, por defecto, se ocultará y luego aparecerá desde arriba Bien, sigamos adelante y comencemos a crear el marcado HTML Voy a colocar la barra de navegación fuera del contenedor. Entonces vamos a insertar tus comentarios, navbar y de Navarra Luego abre los elementos de navegación HTML5 con la barra de navegación de clase. Por lo que el número consistirá en un logotipo y los elementos de navegación. Sigamos adelante y creamos un logotipo. Voy a abrir la etiqueta div. El logo va a ser el código de texto y crear. Lo único que voy a hacer es usar un estilo diferente para tres letras. Así que voy a envolverlos usando elementos span. Al principio, insertemos una etiqueta de enlace. Y entonces necesitamos código de texto y crear. Voy a envolver la primera letra con elementos span. Después inserte ODE. Entonces otra vez, voy a envolver la letra a y luego envolver la letra C con span. A continuación, abramos una etiqueta div, que incluirá los elementos de navegación. Vamos a asignar a la lista de navegación de clase. Después abre la etiqueta de enlace con el link de navegación de clase y con el contenido. Entonces, en general, tendremos cinco elementos de navegación diferentes. Duplicemos cuatro veces los elementos del enlace y luego cambiemos el contenido. El segundo va a ser sobre entonces vamos a tener precios. El siguiente va a ser blog. Probablemente ese sea el último. Vamos a insertar aquí contacto. Bien, así que eso es todo sobre el Napa. La otra cosa que voy a hacer es crear un icono de menú. Vamos a insertar nuevos comentarios para el menú. Después abre la etiqueta div con el menú de clase. El icono del menú constará de tres líneas distintas. Voy a crearlos usando desarrollos que están asignados a la línea de cada clase, que va a ser el nombre común de la clase. Y también necesitamos aquí la línea uno. Duplicemos esta línea de código dos veces y cambiemos los nombres de las clases. Necesitamos la línea dos, la línea tres. Bien, así que eso es todo sobre el marcado HTML. Ahora tenemos que empezar para iniciar la novela. Sigamos adelante e insertemos nuevos comentarios en el archivo CSS. Navbar entonces. Y de navbar. A continuación, seleccione elementos de navegación. Voy a definir ancho y alto. Vamos a establecer con 200%. En cuanto a la altura, voy a hacer que sea ocho RAM, y también cambiar el color de fondo. Vamos a usar aquí el valor RGBA con color negro y con la opacidad 0.9. ¿Bien? Por lo que el número tendrá una posición fija. Se colocará en la parte superior de la página. Así que pongamos la posición a fija. Y también voy a poner la posición superior a cero. Entonces ahora la barra de navegación está oculta porque terminó detrás de la pancarta Para arreglarlo, voy a usar la propiedad z-index que se le asigna algún valor mayor que cero, digamos diez A continuación, vamos a crear algo de espacio dentro de la barra de navegación usando relleno. Vamos a ponerlo en tres rem en los cuatro lados. Bien, entonces ahora mismo Eso es todo sobre la barra de navegación. Sigamos adelante y personalicemos el logotipo. En primer lugar, voy a encargarme de su posición. Vamos a seleccionarlo y establecer su posición en absoluto. Entonces voy a definir propiedades superiores e izquierdas. Voy a establecer la posición superior a 1.5 RAM. En cuanto a la propiedad izquierda, pongámosla en cuatro corridas. Bien, a continuación, voy a darle estilo al logo. Entonces, seleccionemos elementos de enlace Luego definamos font-family. En este caso, voy a usar la fuente llamada may seoul maze. San-serif. Después aumenta el tamaño de la fuente, hazlo 2.5 RAM. Cambia el color. Voy a usar tu llamada o E. Y además, vamos a crear algún espacio entre las letras. Utilice el espaciado del libro mayor con el valor 0.1 ran. Bien, entonces ahora el logo se ve mucho mejor, pero como puedes ver, tenemos que personalizar esas tres letras Así que vamos a seguir adelante y seleccionar elemento span. Definamos font-family. Voy a usar, nuevo hizo almas gemelas san-serif Que aumentar el tamaño de la fuente. Voy a hacer que sea 3.5 RAM. Además, hagamos que el teléfono sea más audaz. Usar font-weight, devaluaría negrita. Entonces voy a cambiar el color. Vamos a usar llamas nueve E 0, E 09. Bien, así que esa es la sílaba, el logo. Sigamos adelante y personalicemos el ícono de Menú. Antes de hacer eso, voy a ocultar los elementos de navegación por un tiempo Entonces sigamos adelante y seleccionemos novelista asignado para exhibir ninguno Entonces, como puedes ver, los elementos de navegación están ocultos. adelante y personalicemos el icono Menú, que en este momento no es visible porque tenemos aquí solo unos elementos div vacíos. Entonces sigamos adelante e insertemos nuevos comentarios para el menú. A continuación, seleccione los elementos div envolventes con el menú de clase. En primer lugar, voy a definir ancho y alto y también el color de fondo. Así que vamos a establecer el ancho y el alto, ambos para que caigan RAM. En cuanto al color de fondo, voy a usar aquí, un color de fondo temporal. Hagámoslo es decir. estos momentos, el icono del menú no es del todo visible porque terminó detrás de la napa. Voy a arreglar eso usando la propiedad z-index. Pero como sabes, para poder usar la propiedad z-index al principio, necesitamos definir la posición para el elemento El icono Menú debe tener una posición fija. Entonces, fijemos su posición para arreglar. Y luego definir la propiedad index. Voy a asignarle algún valor superior, digamos cien. Bien, así que aquí tenemos el ícono del menú. Tenemos que colocarlo en la esquina superior derecha de la página. Así que sigamos adelante y definamos las propiedades superiores y correctas. Y voy a poner la posición en, a carnero. En cuanto a la posición correcta, vamos a hacerla cuatro rampa. Bien, entonces se posiciona el ícono de Menú. Ahora voy a encargarme de las líneas. Primero. Vamos a deshacernos de este trasfondo temporal. Y luego seleccione la línea. Definamos su anchura y altura. Voy a establecer el ancho al 100%. En cuanto a la altura, hagamos que apunte a rampa. Y también usa el color de fondo E. E. Ahora las líneas son visibles, pero como puedes ver, tenemos que crear algún espacio entre ellas y separarlas. Voy a hacer eso usando Flexbox. Así que pongamos display a flex. Entonces para colocar las líneas verticalmente en una columna, necesitamos cambiar la dirección. Hagámoslo columna. Para crear algún espacio entre los elementos que necesitamos, justifique el espacio de contenido de manera uniforme. Y también, quiero cambiar el tipo de la más basta una vez que pasemos el cursor sobre el menú Así que vamos a asignar al puntero del cursor del menú. Bien, así como pueden ver, las líneas están separadas A continuación, voy a cambiar los tamaños de la primera y tercera líneas ya que son más pequeñas que la segunda línea. Así que vamos a seleccionar la línea uno. Establezca su ancho en 50 por ciento. Entonces voy a duplicar este código, cambiar la línea uno a la línea tres. Y además del ancho, voy a agregar aquí, margen-izquierda auto, nos permitirá colocar la línea hacia el lado derecho Bien, así que eso es todo sobre el ícono de Menú. Es personalizado y posiciona. Y ahora voy a encargarme de los elementos de navegación. Echemos un vistazo al proyecto terminado. Entonces, por defecto, los elementos de navegación están ocultos. Una vez que hagamos clic en el icono del menú, entonces el número se expandirá a toda la página y los elementos de navegación aparecerán con un efecto de desvanecido. En primer lugar, voy a personalizar los elementos de navegación. Vamos a hacer que se vean así. Y luego programaremos el ícono de Menú. Entonces, al principio, ampliemos un aeropuerto a toda la página. este momento tiene una altura establecida en ocho RAM y voy a cambiarla y hacer cien viewport height Bien, ahora es el momento de personalizar los elementos de navegación ahora mismo que están ocultos Así que vamos a deshacernos de la pantalla ninguno. Lo primero que voy a hacer es posicionar los artículos. Voy a colocarlos en el centro. Así que pongamos la posición a absoluta. Entonces voy a definir la propiedad superior. Hagámoslo 25 por ciento. La posición izquierda va a ser del 50 por ciento. Y luego para centrar los ítems, como saben, tenemos que usar Transformar con función translate x. Y tenemos que mover los elementos en un -50%. Bien, entonces la lista está posicionada. Ahora voy a alinear los elementos de navegación verticalmente en una columna. Usemos display flex. Entonces voy a colocar los artículos verticalmente en una columna. Cambiemos la dirección, hagámosla columna. Y también, necesitamos alinear los elementos en el centro usando align items center. Bien, así que eso es todo sobre la lista. Ahora, voy a personalizar los elementos de navegación. Seleccionemos elementos de enlace. En primer lugar, cambiemos la familia de fuentes. Voy a usar aquí fuente hecha. Entonces maíz, san-serif. Después aumenta el tamaño de la fuente, hazlo para RAM. Además, crea algo de espacio entre las letras usando espaciado entre letras 0.3 RAM y para cambiar el color, hazlo blanco. Así que ahora como puedes ver, los elementos de navegación se ven mucho mejor. A continuación, voy a crear algún espacio entre ellos. Vamos a usar margin y establecerlo en dos rem en la parte superior e inferior y cero en los lados izquierdo y derecho. Bien, eso es. Los elementos de navegación están estilizados y ahora voy a crear un efecto hover Quiero cambiar el color de los artículos al pasar el cursor. Entonces, seleccionemos el enlace de navegación con hover y cambiemos el color. Ves tu color 99. Y también necesitamos usar la transición para un efecto suave. Vamos a asignar al color y la duración 0.4 s. ¿Bien? Entonces el efecto hover funciona bien. Y ahora tenemos que hacer que la napa funcione 24. Proyecto 3 - Hacer trabajo navar: Bien, una vez que personalizamos en ahora pourer, ahora tenemos que hacerlo funcionar. En primer lugar, voy a ocultar la barra de navegación por defecto, es decir, para disminuir la altura de la misma Entonces una vez que damos clic en el icono del menú, debería expandirse. Además de eso, necesitamos transformar esas líneas en una flecha. En primer lugar, ocultemos los elementos de navegación. Voy a usar opacidad cero y visibilidad oculta. A continuación, voy a disminuir la altura del nanoporo y darle la forma predeterminada Vamos a establecer la altura a un gramo. Bien, entonces ahora es el momento de programar el ícono de Menú para eso, voy a usar JavaScript. Una vez que hacemos clic en el icono, la barra de navegación debe expandirse a toda la página y los elementos de navegación deben mostrarse Así que vamos al archivo JavaScript y primero vamos a seleccionar el icono de menú. Voy a insertar nuevos comentarios. Ahora lejos ahora bar, y luego crear una nueva variable, voy a llamarla menú. Seleccionemos el icono del menú usando el método QuerySelector. Tenemos que especificar aquí el menú del nombre de la clase. Además de eso, voy a seleccionarlo ahora puerto también. Así que vamos a crear otra variable, llamarla ahora bar y seleccionar el número usando de nuevo el método QuerySelector Vamos a insertar tu clase ahora. Bien, así que ahora es el momento de adjuntar un oyente de eventos al ícono de Menú Especificemos aquí el evento click y también pasemos una función de flecha, que se ejecutará una vez que hagamos clic en el icono. Entonces déjame explicarte lo que vamos a hacer. Vamos a añadir una nueva clase llamada cambio a la barra de navegación. Usando esta clase, crearemos nuevos estilos y CSS, cuales se aplicarán a la barra de navegación onclick Después en el siguiente clic, se eliminará el cambio de clase, y por lo tanto también se eliminarán los nuevos estilos. Gestionaremos esto usando un método toggle. En general, el método toggle agrega una nueva clase al elemento si no la tiene, y elimina la clase si el elemento la tiene. Entonces, para agregar una nueva clase al elemento, voy a usar una de las propiedades llamadas class list. Nos da todas las clases que tiene el elemento. Y también nos permite acceder a diferentes métodos como agregar, eliminar y alternar. Así que vamos a adjuntar la lista de clases al número y luego usar el método toggle. Especificemos aquí el cambio de nombre de clase. Bien, así que eso es todo sobre JavaScript. Sigamos adelante y escribamos CSS. Entonces necesitamos expandir la napa onclick. Por lo tanto, necesitamos aquí ahora con cambio de clase. Y luego tenemos que especificar la altura. Hagámoslo 100 de altura de la ventana gráfica. Y además de eso, voy a usar la transición. Vamos a asignar para ocultar la duración 0.5 s. bien, así que ahora si hago clic en el icono de menú, entonces la barra de navegación se expandirá y se cerrará en el siguiente clic Bien, así que a continuación voy a mostrar los elementos de navegación Usemos esta técnica. Necesitamos un cambio. No menos importante. En este caso, necesitamos espacio aquí porque no menos importante es el hijo de la barra de navegación Así que pongamos la opacidad a uno, y luego necesitamos visibilidad visible. Además de eso, voy a usar transición con los valores 0.7. S es la duración. Y además de eso, voy a usar poco tiempo de retraso. Entonces insertemos aquí 0.5 s. Entonces, si hago clic en el icono, entonces los elementos de navegación lo mostrarán la próxima semana, se esconderán. Pero en este caso sin ningún efecto fade. Para arreglar eso, necesitamos de nuevo la transición, pero en este caso para el nub menos sólo Así que vamos a especificar aquí toda la duración 0.2 s. bien, entonces ahora todo funciona bien Y a continuación tenemos que encargarnos del icono del menú. Como recordemos, tenemos que transformarlo en la flecha deshacer clic La primera línea debe moverse hacia abajo hacia el lado derecho y luego girar. No tenemos que tocar la segunda línea en absoluto. En cuanto a la tercera línea, necesitamos girarla. Empecemos por la primera línea. Al principio voy a crear la flecha y luego haremos que el icono funcione. Usemos Transformar con la función translate. Entonces para mover los elementos hacia el lado derecho, voy a pasar el año al 100% como el valor de la dirección X. En cuanto a la dirección y, vamos a ponerla en una renta Así que la línea se ha movido hacia abajo hacia el lado derecho, ahora mismo ambas líneas, estoy en la primera y tercera líneas se colocan una encima de la otra. Y ahora voy a rotar la primera línea en -35 grados Entonces necesitamos rotar la función como el valor. Hagamos una pausa aquí -35 grados. Entonces, como puedes ver, la línea se gira pero no se coloca correctamente. La línea se gira desde su centro porque como saben, el origen de la transformación se establece en centro por defecto. En este caso, voy a cambiarlo y hacer, ¿no? Entonces, finalmente, la primera línea se juega correctamente. Sigamos adelante y nos ocupemos de la tercera línea. Tenemos que moverlo hacia arriba y rotar. Entonces necesitamos transformarnos. Luego traduce la función con dirección y. Vamos a insertar aquí menos una RAM. Y también necesitamos rotar la función con el valor 45 grados. Al igual que la primera línea, necesitamos cambiar el origen de la transformación. Vamos a configurarlo, ¿verdad? Entonces ahora tenemos aquí la flecha perfecta. Bien, ahora es el momento de hacer el menú que pueda funcionar. Necesitamos que todas estas cosas sucedan. Una vez que hagamos clic en el icono, voy a utilizar de nuevo el cambio de clase. Tenemos que agregarlo al ícono de Menú usando el método toggle. Así que vamos a ir al archivo JavaScript y densidad U menú lista de clases de punto, punto toggle. Y el nombre de la clase cambia. Después de eso, tenemos que seleccionar la primera y tercera líneas usando el cambio de clase. Vamos a agarrar esas dos líneas e insertarlas aquí. Después selecciona la tercera línea y haz lo mismo. Entonces como puedes ver, una vez que hacemos clic en el icono, entonces las líneas se transforman en una flecha. Lo único que tenemos que hacer es suavizar este efecto. Y para eso, usemos la transición con transform y la duración 0.3 s. bien, entonces todo funciona bien. Tenemos aquí un efecto agradable y genial. Antes de pasar a la siguiente parte de nuestro proyecto, voy a hacer una cosa más. Voy a mover toda la barra de uñas hacia arriba y esconderla. Entonces una vez que recarguemos la página, quiero que aparezca sin problemas desde la parte superior de la página, como si estuviera en el proyecto terminado Entonces antes que nada, voy a ocultar la parte nula. Quiero decir, voy a moverlo hacia arriba. Vamos a establecer la posición superior a menos ocho RAM. Entonces necesitamos crear fotogramas clave CSS. Voy a llamarlo animate navbar. Entonces, en general, tendremos dos pasos diferentes. Vamos a bajar entonces Albert de 0% a 100%. Entonces, al cero por ciento, necesitamos usar la posición por defecto. Vamos a colocar entre dos menos ocho RAM. En cuanto al 100%, necesitamos top con cero. Bien, entonces los fotogramas clave están listos. Usemos la propiedad de animación. Tenemos que especificar aquí el nombre de los fotogramas clave animate navbar que la duración de la animación 1 s. y además voy a usar un poco Hagámoslo 0.5 s. Si vuelvo a cargar la página entonces la barra de navegación se moverá hacia abajo Pero con el tiempo volverá a esconderse. Tenemos que mantener la posición que especificamos al 100%. Para ello, tenemos que utilizar uno de los valores de la propiedad de modo película de animación llamado forward. Entonces ahora como puedes ver, todo funciona a la perfección y hemos terminado de trabajar en la napa. Pasemos a la antigüedad aquí de la siguiente parte de nuestro proyecto 25. Proyecto 3 - Sección de creación y estilo sobre nosotros: Bien, así que hemos terminado de trabajar en la barra de navegación, y ahora es el momento de seguir adelante y encargarnos de la segunda sección de nuestro proyecto, que va a ser la sección Acerca de nosotros Echemos un vistazo a los proyectos terminados y recordemos cómo es esta sección. Entonces, como pueden ver, tenemos aquí tres partes distintas. Del lado izquierdo de esta acción. Ahí se coloca el rumbo con una línea. Entonces tenemos aquí el video con juego de disfraces, control de pausa. Y abajo tenemos un párrafo con algún texto ficticio. Nuevamente, sigamos adelante y comencemos a crear el marcado HTML También voy a insertar nueva sección de comentarios. Y fuera de la sección para luego abrir la etiqueta de sección con una sección de clase dos. Entonces como dijimos, esta sección constará de un par de partes distintas. El primero va a ser el rumbo. Así que vamos a abrir el elemento de encabezado H1 con el encabezado de la sección de clase. Y con el contenido sobre nosotros. Entonces tendremos la línea que se va a colocar en el lado izquierdo del rumbo. Vamos a abrir la etiqueta div con una línea de encabezado de sección de clase. Bien, después de eso, vamos a instituir el video. Voy a abrir una etiqueta div, que va a ser la envoltura del video. Vamos a asignar al envoltorio de video de clase. Entonces insertemos la etiqueta de video HTML five con un video de clase. Entonces tenemos que especificar la parte del video. Se coloca en la carpeta Imágenes. Seleccionemos Acerca de nosotros video. Entonces, en general, puedes crear los controles a partir de HTML usando el atributo llamado controles. Pero en este caso, voy a crear los controles personalizados, que luego se programarán con JavaScript. Entonces creo que va a ser más interesante. Vamos a abrir una etiqueta div, que va a ser la envoltura de los controles. Incluirá la barra de duración del video y el botón Reproducir. Así que vamos a abrir otra etiqueta div. Va a ser el envoltorio de la barra. Vamos a asignarle video de clase sobre envoltorio. Y luego instituir un nuevo div elementos, que será el propio bar. Bien, entonces a continuación tenemos que crear los botones. Estoy en los botones de pausa de reproducción. Se crearán usando los iconos Font Awesome. Eso primero vamos a abrir una etiqueta div, que va a ser el wrapper. Vamos a asignar a los botones de clase. Después inserta aquí una etiqueta de botón en la que voy a pasar el icono Font Awesome. Por defecto, voy a insertar aquí solo el botón Reproducir. Lo cambiaremos al botón de pausa más adelante usando JavaScript. Así que vamos a asignar a Irlanda clase es FAR FAA círculo de juego. Bien, veamos sobre el video. Lo único que tenemos que hacer es crear el párrafo. Entonces es la etiqueta P abierta con el párrafo de la sección dos de la clase. Dentro del párrafo, tendremos el texto y también a Font Awesome iconos para las citas. Vamos a abrir la etiqueta I con una clase es FAS, queda una cita. Entonces voy a instituir algún texto ficticio. Y por último, pasemos aquí el segundo icono de Font Awesome. Necesitamos clases, FIS, una cotización, ¿no? Bien, Así que el marcado se crea ahora mismo. Se ve muy desordenado, así que tenemos que encargarnos de ello. Lo primero que voy a hacer es disminuir el tamaño del video porque ahora mismo es demasiado grande. Vamos a insertar nuevos comentarios en el archivo CSS para la sección dos. Después seleccione el envoltorio de video y el ancho y alto definidos. Voy a poner con rampa 200. En cuanto a la altura, hagámosla rampa 50. Después selecciona el propio video y define su ancho y alto como 100%. Y además de eso, voy a usar la cubierta de pies de objeto. Entonces como puedes ver ahora el tamaño del video es menor y podemos comenzar a personalizar esta sección. Así que sigamos adelante y seleccionemos el elemento de sección. En primer lugar, voy a definir la anchura y la altura de esta sección. Vamos a establecer con el 200 por ciento. En cuanto a la altura, voy a hacer que sea el 100% de la vista. Y también, definamos el color de fondo. Voy a hacerlo gris oscuro. Vamos a usar el color hasta 22020. Bien, Siguiente, voy a alinear los elementos usando Flexbox Vamos a configurar la pantalla para flexionar. Alineará los elementos horizontalmente. Entonces los voy a colocar en el centro verticalmente. Así que usa alinear elementos al centro Y también crea algo de espacio en los lados izquierdo y derecho usando relleno. Pongámoslo a cero y a la rampa bronceada. Bien, eso es. En cuanto al elemento sección, sigamos adelante y personalicemos los elementos de encabezado. Seleccionemos el encabezado de la sección. En primer lugar, voy a establecer font-family. Hagámoslo atrevido sans-serif. Eso aumenta el tamaño de la fuente. Haz que se dé la vuelta. Y también cambia font-weight, hazlo más ligero. Pongámoslo a 300 y cambiemos de color, D. D. Así que como puedes ver, el encabezado está estilizado, pero no se ve del todo bien en este momento porque no hay suficiente espacio Yo voy a encargarme de la alineación del video y del párrafo. Voy a establecer la posición en absoluto para el envoltorio de video. Entonces necesitamos posición relativa para este elemento de sección porque es el elemento padre. Y tenemos que posicionar el envoltorio de video acuerdo a la sección. Y luego después de eso, defina las propiedades superior y derecha. Voy a establecer la propiedad superior a la fibrina. En cuanto a la posición correcta, hagamos que sea 15 rampa. Bien. Entonces se posiciona el video. Ahora voy a encargarme del párrafo. Sigamos adelante y seleccionemos este elemento. Vamos a establecer el ancho 200 ran. Entonces voy a poner la posición a absoluta. Luego se definieron las propiedades inferior y derecha. Voy a poner la posición inferior a ocho, corrió en cuanto a la posición correcta, vamos a hacerla rampa 15. Entonces el párrafo es posición también. Y ahora el rumbo se ve bien. Sigamos adelante y personalicemos la línea que se colocará en el lado derecho del encabezado. Así que vamos a seleccionar la línea de rumbo de la sección. Voy a definir su ancho y alto, configurado con 215 RAM. En cuanto a la altura, voy a hacer que sea un punto para rampa. Y también cambia el color de fondo, hazlo di, di, di. Bien, entonces aquí tenemos la línea, como pueden ver, tenemos que crear algún espacio entre el rumbo y la línea. Entonces usemos margin-right. Voy a asignarlo al elemento heading. Vamos a ponerla en renta. Bien, entonces ahora tenemos un mejor resultado. A continuación, voy a agregar un efecto de sombra al envoltorio de video. Vamos a usar box-shadow con los valores tres, correr tres veces Y luego el valor RGBA con un color negro y con la opacidad 0.7 Además de eso, vamos a disminuir la opacidad del video. Hagámoslo 0.3. Bien, así que eso es todo sobre el video por ahora. Es hora de seguir adelante y personalizar los controles de video. En primer lugar, voy a ocuparme de su posición. Seleccionemos los elementos div envoltorio. Al principio define cuáles lo hacen al 100%. Luego establece la posición en absoluto, y luego define la propiedad inferior, hazla cero. Además de eso, voy a cambiar el color de fondo. Vamos a utilizar de nuevo el valor RGBA con un color negro y con la opacidad a 0.7 Bien, entonces el envoltorio de los controles está personalizado. A continuación, vamos a encargarnos del botón. Y luego después de eso, personalizaremos la barra de duración del video. Seleccionemos el rápido desarrollo y creemos algo de espacio dentro de él. Voy a crear espacio usando relleno. Vamos a configurarlo a dos rem en la parte superior y luego una RAM. Tres veces. Después de eso, voy a detener el patrón en sí. Voy a deshacerme de default, fondo y frontera. Vamos a ponerlos a ninguno. Y también cambiar el tipo de la más basta, hazlo puntero. Justo después de eso, vamos a personalizar el icono en sí. Voy a aumentar su tamaño de fuente. Hagámoslo 2.8 RAM y luego cambiemos el color. Que sea blanco. Bien, entonces el botón está personalizado, se ve bien. Y ahora voy a encargarme de la barra de video. Seleccionemos el video sobre wrapper, que va a ser una especie de fondo de la barra de video. Entonces voy a definir su ancho. Hagámoslo al 100 por ciento. Después establece la altura dos 0.7 correr y luego cambiar el color de fondo, haciendo negro. Después de eso, voy a encargarme de su posición. Fijemos la posición a absoluta. Y luego encontramos propiedades superiores e izquierdas. Voy a ponerlos a cero a ambos . Bien, eso es todo sobre los antecedentes. Ahora, voy a darle estilo al bar en sí. Vamos a establecer su altura al 100%. Entonces, por defecto, el ancho de la barra de video será cero, y luego haremos que funcione usando JavaScript. Pero ahora mismo le voy a dar algo de ancho, digamos el 20 por ciento. Y también cambiar el color de fondo. Que sea D3, 0819. Bien, así que la barra de video está personalizada. Antes de que lo hagamos funcionar, voy a comenzar en primer párrafo abajo. Así que vamos a establecer el tamaño de la fuente en RAM y también cambiar el color. Usa tu color D, D, D. A continuación voy a crear los bordes en la parte superior e inferior. Entonces usemos border top, ponlo en 0.3, run double, y el color AAA. Entonces voy a duplicar esta línea de código. Cambiemos de arriba a abajo. Después de eso, voy a crear espacio dentro del párrafo usando relleno. Vamos a configurarlo en dos RAM en los cuatro lados. Bien, después de eso, voy a alinear las comillas y el texto usando Flexbox Quiero colocarlos verticalmente en el centro. Así que pongamos display a flex. Entonces voy a usar dirección flex. Hagámoslo columna. Para centrar los elementos vertical y horizontalmente, necesitamos usar justify-content center y alinear items center Entonces como se puede ver, los elementos están alineados. A continuación, voy a justificar el texto del párrafo. Entonces usemos textos alineados con el valor justifique. Y también vamos a crear un pequeño efecto de sombra usando sombra de texto con valores uno corrió dos veces que para ejecutar. Y el valor RGBA con el color negro y con la opacidad 0.7 Bien, así que ahora es el momento de cuidar los códigos. Voy a colocar el primero del lado izquierdo. En cuanto al segundo se va a colocar del lado derecho. Así que vamos a seleccionar cotización izquierda. Para colocarlo en el lado izquierdo, tenemos que usar align self con un valor flex start. Además de eso, voy a agregar aquí tamaño de fuente cinco rem, y también crea algo de espacio en la parte inferior. Vamos a establecer el margen inferior en, para correr. Bien, sigamos adelante y cuidemos el segundo elemento Quiero decir, escribir código. En este caso, necesitamos alinear uno mismo para ser flex y luego aumentar el tamaño de la fuente, hacer que sea cinco corridas. Entonces las citas están personalizadas y el párrafo en general se ve bien. Por último, voy a disminuir ligeramente la altura de la línea. Así que vamos a establecerlo en 1.5. Bien, así lo hará el párrafo ya terminamos. Es personalizado. Y ahora voy a encargarme del video. O sea, voy a hacer que funcione usando JavaScript. 26. Proyecto 3 - Haz funcionar los controles de video personalizados: Bien, así que hemos personalizado la sección Acerca de Nosotros y ahora voy a hacer que el video funcione Esta parte se creará con la ayuda de JavaScript. Antes de eso, voy a hacer un par de cosas en CSS. Quiero mover los controles un poco hacia abajo, y además voy a ocultarlo parcialmente. Una vez que pasemos el cursor sobre el video aparecerán los controles Para mover los controles, voy a usar la función Transformar con Traducir. En este caso, necesitamos dirección y. Entonces como dije, voy a ocultar parcialmente los controles. Entonces no necesitamos mover el elemento en un 100%. Para lograrlo, voy a usar la función calc Voy a restar punto por RAM al 100%. Entonces en este caso, poca parte será visible de los controles. Entonces consideremos que los controles se colocan hacia abajo y para ocultarlos, voy a usar desbordamiento oculto. Bien, entonces los controles están ocultos. A continuación, los voy a mostrar una vez que pasemos el cursor sobre el video Entonces, seleccionemos Envoltura de video con hover, seguido de los controles Y voy a poner transformar traducir y a cero. Además, usemos la transición. Necesitamos transformar 0.4 s. ¿Bien? Entonces el efecto hover funciona bien. A continuación, voy a hacer que funcionen los controles. Vamos al archivo JavaScript. En primer lugar, vamos a entidad tu nueva sección de comentarios a video. Después final de la sección dos video. Después voy a crear un par de variables distintas para seleccionar varios elementos. El primero va a ser el video. Así que vamos a crear una nueva variable y seleccionar el video usando el método selector de consultas. El siguiente va a ser botón. Así que vamos a crear una nueva variable, btn y seleccionar Hi Elements Vamos a seleccionarlo usando el método QuerySelector. Y también voy a seleccionar una barra de video. Nos encargaremos de ello un poco más tarde. Pero de todos modos, vamos a seleccionarlo también. Vamos a crear una nueva variable, voy a llamarla barra, y luego seleccionar elementos usando nuevamente el método selector de consultas. Bien, así que se seleccionan todos los elementos necesarios. A continuación voy a crear una función en la que programaremos ya sea para reproducir el video o pausar. Y ejecutaremos esta función una vez que hagamos clic en los botones. Así que vamos a crear una nueva función. Voy a llamarlo pose de juego. Entonces cuando hacemos clic en el botón Reproducir, tenemos que cambiarlo al botón de pausa. Y también necesitamos reproducir el video. Para reproducir el video, podemos usar uno de los métodos incorporados llamado Play. Entonces necesitamos video dot play. Ahora para ver los resultados, tenemos que llamar a esta función, pero tenemos que llamarla una vez que damos clic en el icono. Entonces voy a adjuntar un oyente de eventos al botón con un evento click Además, necesitamos pasar aquí la función arrow, que se ejecutará una vez que hagamos clic en el botón. Entonces ahora tenemos que llamar a la función playbooks. Entonces, si hacemos clic en el botón, entonces se reproducirá el video. Ahora mismo el botón no está cambiando. Así que sigamos adelante y nos ocupemos de eso. Como ya sabéis, el botón está representado por un icono Font Awesome. Entonces una vez que hacemos clic en él, tenemos que cambiar el nombre de la clase para que se transforme en el botón de pausa. Voy a cambiar el nombre de clase del botón usando una de las propiedades llamadas el nombre de la clase. Necesitamos btn dot class name. Y tenemos que pasar aquí las clases FAR, FAA, Pose, círculo Ahora si hago clic en el botón , cambiará al botón de pausa y se reproducirá el video. Pero luego en el siguiente clic, no pasará nada. Entonces, una vez que hacemos clic en el botón Pausa, tenemos que pausar el video. Y también tenemos que volver a cambiar el botón a la placa. Entonces necesitamos usar una sentencia if else en que tenemos que definir si el video está en pausa o no, entonces tenemos que establecer los nombres de clase de los iconos en consecuencia para verificar si el video está en pausa o no, voy a usar una de las propiedades llamadas post Entonces necesitamos video punto post como condición. Entonces, si es cierto, significa que el video no se está reproduciendo y se muestra el icono de reproducción. Entonces necesitamos reproducir el video y cambiar el icono al botón de pausa. Tenemos que instituir esas líneas. Si esta condición es falsa, entonces significa que el video se está reproduciendo. Entonces tenemos que posarlo y tuvimos que cambiar el ícono a la obra. Pero vamos a crear una sentencia else Luego copia esas dos líneas y pegarlas en la declaración else. Entonces, en lugar del método play, necesitamos pose. Y también tenemos que cambiar el nombre de la clase en lugar de los posts, necesitamos arcilla. Ahora si hago clic en el botón Reproducir, entonces el video comenzará a reproducirse y el botón cambiará. Y luego en el siguiente clic, el video se detendrá y el icono volverá a cambiar al botón Reproducir. Entonces todo funciona bien hasta ahora. A continuación, voy a cambiar la opacidad del video dependiendo de si se está reproduciendo o no Si es post, entonces mantendremos la opacidad tal como está. Pero si está jugando, entonces lo aumentaremos. En este momento la opacidad se establece en 0.3. Entonces tenemos que aumentarlo en las declaraciones if porque aquí estamos diciendo que tenemos que reproducir el video, video punto estilo punto opacidad igual a, digamos 0.7 Y entonces tenemos que hacer la opacidad 0.3 en la sentencia else porque vamos a pausar el video Entonces voy a agarrar esta línea de código. Vamos a pegarlo aquí y cambiar la opacidad. Necesitamos 0.3. Entonces como pueden ver, todo estuvo bien. Lo único que tenemos que hacer es suavizar el efecto usando la transición. Vamos a usar transición con opacidad 0.3 s. bien, entonces ahora tenemos un resultado mucho mejor Ahora, es el momento de encargarse de la barra de video. En este momento, tiene algo de ancho fijo. Entonces, al principio, pongámoslo a cero. Por lo que tenemos que aumentar el ancho de la barra de video acuerdo a la actualización de la duración del video. Voy a usar uno de los eventos DOM llamado actualización de tiempo. Este evento ocurre una vez que se está reproduciendo el video o audio. Así que vamos a adjuntar al video y al oyente de eventos con una actualización de tiempo Eventos. También pasa aquí, la función de flecha. En cada actualización de la hora del video. Esta función será ejecutada. Bien, entonces ahora tenemos que definir el ancho de la barra de video Para eso, voy a usar dos propiedades diferentes. Son actuales, tiempo y duración. Al principio, les voy a mostrar en la consola. Vamos a correr por la consola. Puntos de video, tiempo actual y duración de puntos de video. Inspeccionemos la página y cambiemos a la pestaña de la consola. Entonces, una vez que haga clic en el botón Reproducir, entonces obtendremos la cantidad actual del tiempo reproducido y también la duración del video. Para definir el ancho de la barra de video, tenemos que dividir el tiempo actual del video por la duración. Y tenemos que expresar esta cantidad en valor porcentual. Así que vamos a crear una nueva variable, voy a llamarla bar. El ancho va a ser igual a las dudas de video, tiempo actual dividido por la duración del punto de video. Ahora, tenemos que multiplicar esta cantidad 200 y expresarla en porcentaje. El resultado de este cálculo será el ancho de la barra. Así que vamos a insertar tu barra de estilo de punto ancho de punto igual al ancho de barra multiplicado por 100, seguido del signo de porcentaje. Bien, entonces ahora si reproducimos el video, entonces la barra de video comenzará a cargarse. Entonces todo funciona bien en este momento el efecto de carga no se ve del todo suave. Necesitamos usar la transición. Así que vamos a Instituto aquí ancho que la duración 0.2 s. y también voy a hacer la transición lineal. ¿Bien? Entonces ahora tenemos mejores resultados. En realidad casi terminamos con esta sección. Solo necesitamos agregar un par de cosas al video. Una vez que se juega. Quiero decir, una vez que se termine, quiero volver a cambiar el icono al botón de reproducción. Y además voy a disminuir la opacidad para poder averiguar si el video está terminado o no, voy a usar una de las propiedades llamadas celda terminada Vamos a crear una declaración if donde tenemos que verificar si el video ha terminado o no. Entonces como la condición que necesitamos aquí, video dot Android. Entonces, si esta condición es cierta, tenemos que cambiar el icono. Necesitamos btn dot class name. Va a ser LEJOS un círculo de juego. Y también tenemos que disminuir la opacidad. Necesitamos video punto estilo punto opacidad, 0.3. Entonces si reproducido el video y espero hasta que sea, y verás que se cambia el icono y también se disminuye la opacidad Bien, así que finalmente, hemos terminado de trabajar en la segunda sección Pasemos al siguiente. 27. Proyecto 3 - Sección de creación y personalización de tarjetas de precios: Bien, Así que hemos terminado de trabajar en la segunda sección, que era una sección Acerca de Nosotros. Y ahora tenemos que seguir adelante y comenzar a construir la siguiente. La siguiente sección va a ser la sección de precios. Recordemos cómo se ve esta sección. Entonces tenemos aquí un rubro y para diferentes tarjetas de precios con diferentes ofertas de precios pudimos arrastrarlas con un mouse, crearemos este efecto usando uno de los plugins de JavaScript llamado swipe o el JS. En primer lugar, quería crear y personalizar las tarjetas. Y luego usaremos el plugin y haremos que funcionen. Sigamos adelante y comencemos a crear el marcado HTML. Voy a insertar nuevos comentarios, sección tres. Y la sección tres. Después abra el elemento de sección con la clase sección tres. Entonces como dijimos, esta sección consistirá en el rubro y para el precio de los autos. El rumbo con su línea será similar al encabezado que creamos en el apartado anterior. Y también será similar a las siguientes secciones que encabezan. Entonces voy a abrir la etiqueta de encabezado H1 y vamos a asignarle un nombre de clase similar, encabezado de sección. En cuanto al contenido, voy a pasar tus precios que abrir una etiqueta div con la línea de rumbo de la sección de clase. Entonces como puedes ver, el encabezado todo ya tiene algunos estilos. Bien, sigamos adelante y creamos las cartas. Vamos a abrir una etiqueta div, que va a ser el envoltorio de las tarjetas. Voy a asignarlo al envoltorio de tarjetas de precios de clase. Entonces necesitamos otra etiqueta div para la llamada misma. Por lo que cada auto consistirá en un lado delantero y trasero. Vamos a abrir la etiqueta div, que va a ser la parte frontal que está asignada al frontal de la tarjeta de precios del clúster. El anverso constará de un par de elementos diferentes. Tendrá dos encabezamientos para el nombre del autor y el precio Después les seguirá la lista en la que tendrás algunos artículos de oferta con Font, Iconos impresionantes. Y por último, tendremos un botón. En cuanto a la parte posterior, tendremos un solo elemento link. Bien, sigamos adelante e insertemos aquí todos estos elementos Voy a empezar con los encabezamientos. Abramos el encabezado H1, etiqueta, encabezado de tarjeta de precios de clase. Este va a ser el nombre común de la clase, pero además de eso, voy a agregarle otra clase para algunos individuos alicatados La primera columna va a ser sobre una oferta gratuita. Por lo que se le asigna una clase con rumbo libre. Bien, A continuación necesitamos otro elemento de rumbo para el precio que está abierto. Etiqueta de encabezado H3 con la tarjeta de precios de clase, precio. Y el precio, te voy a insertar cero. Esa es la sílaba los encabezamientos. Sigamos adelante y creamos la lista. Voy a abrir la etiqueta UL con la lista de tarjetas de precios de clase. Y también voy a usar otra clase para el estilismo individual. Vamos a insertar tu menos gratis. Después abre la etiqueta LI. Estoy en el ítem de la lista. Así que cada elemento de la lista consistirá en un icono Font Awesome, y algunos textos. Vamos a abrir etiqueta con una clase es FAS, FA, cheque. Va a ser la marca de verificación. Luego abra la etiqueta span. En realidad, no voy a especificar aquí diferentes ítems. Simplemente insertemos el artículo de la tarjeta de precios. Puedes sentirte libre y usar diferentes artículos, pero no voy a perder el tiempo en eso. Entonces en la primera tarjeta tendremos cinco ítems de lista. Duplicemos el elemento LI cuatro veces. Lo único que voy a hacer es cambiar los iconos Font Awesome para los últimos tres elementos, los dos primeros iconos serán marcas de verificación En cuanto a los tres últimos íconos, se accederá a ellos. Entonces necesitamos FIS f a veces. Bien, entonces el último elemento en la parte frontal va a ser un botón que esté asignado a la tarjeta de precios del clúster, btn Y también necesitamos aquí otra clase para estilos individuales, btn gratis Y como los contenidos voy a insertar aquí elije plan. Bien, así que eso es todo sobre la parte frontal. Vamos a seguir adelante y sacarte de la parte trasera. Vamos a abrir la etiqueta div con un dorso de tarjeta de precios de clase. Y también necesitamos aquí otra clase de vuelta gratis. Vamos a insertarte elementos de enlace con el orden de contenido ahora. ¿Bien? Entonces aquí tenemos la primera tarjeta. En general, tendremos cuatro tarjetas, así que voy a duplicar el código tres veces. Entonces necesitamos hacer algunos cambios Así que la segunda carta va a ser básica. Entonces voy a cambiar la clase del rubro va a ser rumbo básico de lo que necesitamos aquí. Precio diferente, digamos 299 dólares. También cambiar la clase de los elementos de la lista que necesitamos aquí, al menos básicos. En cuanto a los iconos Font Awesome. En este caso, los cuatro primeros elementos van a ser marcas de verificación En cuanto al último, debería ser x. Además, cambiemos la clase del botón. Aquí necesitamos, btn básico. Y entonces te necesitamos de vuelta básico. Bien, veamos sobre la segunda tarjeta. Pasemos a la tercera tarjeta va a ser estándar. También cambiar la clase del rubro. Necesitamos rumbo estándar. El precio va a ser $699. Después cambiar la clase de los elementos UL. Necesitamos al menos estándar. Entonces en este caso tendremos todos los artículos con un icono de marca de verificación A continuación, voy a cambiar las clases por el botón y por el trasero Necesitamos estándares en ambos casos. Bien, pasemos al último acorde. Va a ser premium. Cambiar la clase del encabezado. Necesitamos encabezado premium también cambió el precio. Necesitamos aquí $999. Entonces necesitamos aquí al menos premium. Entonces, en el caso de la oferta premium, contaremos con seis artículos. Así que vamos a duplicar LI elemento quiere. Hacer todas las marcas de verificación de los iconos. A continuación, cambiemos las clases del Bateson y backside Necesitamos premium. Bien, así que eso es todo con respecto al marcado HTML, se crean todos los elementos y ahora ya estamos listos para comenzar a diseñar Insertemos nuevos comentarios en el archivo CSS para la Sección tres. A continuación, seleccione una sección de elementos. En primer lugar, definir dentro de la altura y voy a establecer el ancho al 100%. En cuanto a la altura, va a ser el cien por ciento de la vista. Y también cambiar el color de fondo. Entonces voy a usar el color 0, 3o7oe. Bien, a continuación voy a alinear los elementos horizontalmente en fila usando Flexbox Vamos a configurar la pantalla para flexionar. Y también colocar los elementos en el centro verticalmente. Para eso necesitamos alinear los artículos al centro. Y por último, voy a crear algo de espacio en el lado izquierdo dentro de esta sección, vamos a usar padding left con el valor Tan ramp. Bien, así como ya dijimos, no tenemos que tocar el rumbo y la línea. Son todas estas pestañas. Lo único que voy a hacer es agarrar el código CSS de ambos elementos y ponerlo en los estilos comunes. Bien, Siguiente voy a seleccionar el envoltorio de canchas. Voy a colocar las tarjetas una al lado de la otra horizontalmente. Al principio, definamos el ancho del envoltorio. Voy a hacerlo al 100%. Luego configura la pantalla para flexionar y también crea espacio entre las tarjetas usando justificar el espacio de contenido de manera uniforme. Bien, así como pueden ver, las cartas están alineadas y ahora voy a empezar a estilizarlas. Seleccionemos la tarjeta y definamos su ancho y alto. Voy a establecer el ancho a 28 RAM. Como bastante alto, va a ser 45 RAM. Y también cambiar el color de fondo. Voy a usar aquí el color 181, B1. Bien, entonces ahora las cartas ya son todas visibles bastante bien A continuación los voy a hacer redondeados, y también quiero agregarles un efecto de sombra. Así que pongamos el radio en una RAM. Y luego usar box-shadow con valores a RAM, dos veces que seis RAM Y como el color, vamos a usar RGBA con un color negro y con la opacidad 0.7 Bien, así que eso es todo sobre la tarjeta. A continuación, voy a encargarme de la parte frontal. Así que vamos a seleccionarlo y definirlo dentro de la altura. Voy a hacer que ambos sean 100% Siguiente Voy a alinear los elementos usando nuevamente Flexbox Vamos a configurar la pantalla para flexionar. Que para poder colocar los artículos verticalmente en una columna, necesitamos flex direction para ser columna. Entonces los voy a colocar en el centro horizontalmente. Para ello, vamos a usar align items center, y finalmente crear algún espacio entre ellos usando justify content. Espacio entre. Bien, así que eso es todo sobre la parte frontal. A continuación voy a tomar aquí de la rúbrica. Estoy en el primer elemento de rumbo del auto. Vamos a seleccionarlo. En primer lugar, definamos su tamaño de fuente, hagamos que se ejecute. Entonces voy a hacer la fuente más ligera. Vamos a establecer la forma de fuente a 300. Y también cambia el color, hazlo blanco. Bien, a continuación voy a definir el ancho y alto de la cabecera. Y también voy a cambiar la posición de los textos a la ligera. Entonces, fijemos con el 200 por ciento. En cuanto a la altura, hagámoslo cinco Ram. A continuación, quiero colocar el texto verticalmente en la central usando Flexbox Así que voy a configurar display a flex y luego alinear los artículos al centro. Por último, vamos a crear algo de espacio en el lado izquierdo del texto usando relleno. Acolchado a la izquierda. Vamos a configurarlo para que funcione. Bien, entonces ahora es el momento de agregar el color de fondo a los elementos del encabezado. Como recuerdas, tienen diferentes colores de fondo. Les he asignado el nombre de clase individual. Así que vamos a seguir adelante y seleccionarlos por separado y definir los colores de fondo. Voy a empezar con una rúbrica tres. Entonces el color de fondo tendrá algún degradado. Vamos a usar gradiente lineal. El rumbo de la transición va a ser de izquierda a derecha. En cuanto a las personas que llaman, usemos aquí 087285 Y también necesitamos AOD cinco, D3. El primer encabezado tiene el color de fondo. Pero ahora mismo tenemos aquí un pequeño tema. En las esquinas superior izquierda y superior derecha. Ya no tenemos el radio fronterizo. Así que sigamos adelante y arreglemos eso. Voy a usar border-radius. Vamos a usar hasta usted los siguientes valores. Necesitamos 1 g dos veces, quiero decir, una RAM como valor de las esquinas superior izquierda, superior derecha En cuanto al resto de los valores, ese debería ser cero. Bien, entonces ahora el problema está arreglado. Sigamos adelante y cambiemos los colores de fondo para el resto de los encabezados. Voy a duplicar este código tres veces y luego hacer algunos cambios. El segundo rubro va a ser básico. Y como los colores, vamos a usar 946809. Entonces el siguiente va a ser bd, ser AOE. Entonces vamos a tener estándar. En cuanto a los colores que van a ser un 1014. Entonces tendremos de a0 a a3. Ser un freebie. Para el último rubro va a ser premium con los siguientes colores. 0748 y luego tres be286. ¿Bien? Así que todos los elementos del encabezado tienen los colores de fondo adecuados. Y en realidad con los primeros encabezamientos, ya terminamos. Sigamos adelante y nos ocupemos del precio. Seleccionemos el precio de la tarjeta de precios. En primer lugar, voy a definir la familia de fuentes. Vamos a usar sus llamadas telefónicas hechas para maíz san-serif que aumentar el tamaño de la fuente, que sea siete RAM Haz que la fuente sea más clara. Vamos a establecerlo en 300. Y luego cambia el color, hazlo blanco. Bien, entonces el precio se ve bien. A continuación tenemos que encargarnos de los elementos de la lista 28. Proyecto 3 - Crea tarjetas de precios trabajando con Swiper: Bien, sigamos adelante y personalicemos el resto de los elementos de la tarjeta A continuación tenemos la lista, que consiste en los iconos Font, Awesome y algunos valores de texto. En primer lugar, seleccionemos la isla y aumentemos su tamaño de fuente, que sea 1.8. Corre. A continuación, tomemos aquí de los elementos span. Vamos a seleccionarlos. Voy a definir el tamaño de fuente, que sea 1.8 RAM. Luego establece el font-weight en 300. Y también crear algo de espacio entre las letras. Que sea 0.1 rem. Bien. Entonces ahora voy a crear el mismo espacio entre los iconos y los elementos de texto. Para eso, definamos el ancho de los elementos I. Voy a hacer tres rampas. Bien, así que ahora es el momento de cambiar los colores de los elementos de la lista. Como suposición, voy a definir un color diferente para cada lista. Ahora mismo, cada elemento de lista tiene el nombre de clase individual. Así que sigamos adelante y seleccionemos los elementos de la lista por separado. Necesitamos al menos tres, seguidos del elemento LI. En este caso, cambiaremos el color para ambos elementos. Estoy en el icono Font Awesome, y también el elemento span. Vamos a poner el color a cero, d Phi d tres. Duplicemos este código tres veces y luego cambiemos los nombres de las clases y las personas que llaman. Entonces necesitamos lo menos básico. Y el color va a ser BD BA II. Entonces tendremos lista estándar. Y el color va a ser a0 a a3. Ser regalo de cortesía. Por último, necesitamos al menos premium con el color 3286. Bien, así que los elementos de la lista se ven bien. Lo único que voy a hacer es aumentar ligeramente el espacio entre ellos. Así que vamos a seleccionar elementos LI y establecer margen inferior 2.5 rampa. Bien, así que eso es todo respecto a la lista, se ven bien. Y ahora tenemos que pasar al siguiente elemento, que va a ser un Batson Así que vamos a seleccionarlo. En primer lugar, voy a definir su anchura y altura. Vamos a configurar con 218 RAM. En cuanto a la altura, hagamos que sea cinco RAM. Después crea algo de espacio en la parte inferior usando margen inferior con el valor tres Ran. Bien, sigamos adelante y agreguemos algunos otros estilos al botón. Hagámoslo redondeado usando border-radius con un valor de tres RAM También voy a deshacerme del borde por defecto. Vamos a ponerla en ninguna. Después aumenta el tamaño de fuente del texto. Vamos a convertirlo en una RAM 1.6, y también ponerla en mayúscula Bien, Así que los botones se ven bien. Ahora, como otros elementos, tenemos que definir diferentes colores de fondo para los botones. También tienen los nombres de las clases individuales. Así que vamos a seguir adelante y seleccionarlos por separado. Voy a empezar con un BTN gratis. Vamos a establecer el color a cero, DA cinco, D3. Se cambia el color de fondo del primer botón. En realidad, necesitamos cambiar el color del texto. Y también voy a agregarle un poco de efecto de sombra. Vamos a establecer el color en blanco. Después usa sombra de texto con un valor de 0.3. Ejecutar dos veces de lo que necesitamos 0.6 RAM. Y el valor RGBA con el color negro y con la opacidad 0.5 Bien, entonces ahora tenemos un resultado mucho mejor. Sigamos adelante y cambiemos los colores de fondo para el resto de botones. Voy a duplicar este código tres veces y luego cambiar los nombres de las clases y los colores. El segundo botón va a ser btn básico. En realidad, necesitamos los mismos colores que usamos para la lista. Entonces voy a agarrarlos de aquí. El siguiente botón va a ser estándar. Vamos a copiar el color. Y el último va a ser btn premium con estos colores Bien, así que dicho con respecto a los botones y en realidad con el anverso de la tarjeta, ya terminamos A continuación, voy a personalizar la parte trasera. Y después de eso usaremos el plugin JavaScript llamado swipe o dot js. En primer lugar, voy a rotar la tarjeta 180 grados Visualizar la parte posterior de la tarjeta. Entonces necesitamos rotar con dirección y y como el valor como infinito aquí, 180 grados. A continuación, voy a seleccionar la parte trasera. En primer lugar, definamos esta posición. Voy a ponerla en absoluto. Después defina las propiedades superior e izquierda. Voy a ponerlos a cero a ambos . Entonces para poder expandir el dorso a toda la tarjeta, tenemos que establecer ancho y alto, ambos 200 por ciento Y luego usar algún color de fondo temporal. Vamos a ponerla en blanco. Entonces aquí tenemos la parte trasera. Voy a colocar el contenido en el centro usando Flexbox. Como sabes, necesitamos usar display flex, seguido del centro justify-content y align items center y align Entonces, como puedes ver, el elemento link se muestra en sentido contrario. Entonces tenemos que rotarlo. Usemos Transformar, Rotar Y como el valor menos Instituto 180 grados. Y además de eso, voy a hacer la parte trasera redondeada. Necesitamos border-radius con valor one ran. Bien, así que ahora es el momento de personalizar el elemento link. Pero antes de hacer eso, voy a cambiar los colores de fondo. Las cuatro tarjetas deben tener los diferentes colores de fondo. Serán similares al color de fondo que usamos para los primeros elementos de encabezado de la tarjeta. Entonces, seleccionemos libre de insectos y luego sigamos adelante y tomemos el color de fondo del elemento de encabezado Duplicemos este código tres veces. Tenemos que cambiar los nombres de las clases. El segundo va a volver básico. Entonces otra vez, sube y toma el color de fondo. A continuación, tendremos estándar. Y por último, tenemos que respaldar premium. Y también me voy a deshacer del color de fondo blanco temporal. Bien, Así se puede ver todos los dorsos de las tarjetas tienen diferente color de fondo. Por último, voy a iniciar los elementos de enlace. Vamos a seleccionarlo. Voy a aumentar su tamaño de fuente. Hagámoslo 2.5 rima. Y también establecer el color en blanco. Bien, entonces las tarjetas están personalizadas. Me refiero a ambos lados, delantero y trasero. Y ahora es el momento de usar el plugin Java llamado swipe o el JS. Antes de eso, voy a hacer retroceder las cartas. Así que vamos a deshacernos transformar con la función Rotar desde aquí. Sigamos adelante y visitemos el sitio web. Voy a buscar swipe o dot js. Entonces este es el sitio web de este plugin. Sigamos adelante y hagamos clic en las demostraciones. Así que aquí podemos echar un vistazo a diferentes versiones demo de este slider. En el lado izquierdo de la página web, tenemos una barra lateral donde puedes encontrar muchas versiones diferentes de este slider. No voy a perder el tiempo en eso. Puedes sentirte libre y probarlos. Voy a usar deslizador llamado efecto de flujo de cubierta 3D. Entonces aquí está. Para usar este control deslizante, hay un par de formas diferentes. Puedes descargar los archivos fuente y vincularlos al proyecto, o simplemente podemos usar los enlaces de CDN Pasemos a la primera página. Quiero decir, empezar. Entonces aquí tenemos los enlaces de CDN para CSS y JavaScript. Puedes encontrar aquí dos versiones del plugin. El primero es irregular. En cuanto a la segunda, es la versión minimizada. Voy a agarrar los primeros enlaces. Entonces tenemos que pegar el enlace CSS en los elementos head. En cuanto al enlace JavaScript se va a colocar abajo abajo. Bien, Siguiente, volvamos a las demostraciones y haga clic en el código fuente aquí Navegaremos a una página de GitHub donde puedes encontrar el código fuente para HTML, CSS y JavaScript. Echemos un vistazo al código HTML. Entonces tenemos aquí un swipe por contenedor y swipe a un rapero, seguido de este Wipro slides Esos deslizamientos o diapositivas serán nuestras tarjetas de precios. Entonces se va a crear esta y por contenedor . En cuanto al deslizamiento o envoltorio, va a ser nuestro envoltorio de tarjetas de precios. Así que sigamos adelante y asignemos al envoltorio de tarjetas de precios una nueva clase, swipe o wrapper. Luego crea un nuevo div elementos fuera del swipe, un wrapper. Necesitamos ClassName swipe por contenedor. Vamos a terminar con este elemento, todo el contenido. Además de eso, tuvimos que asignar a cada tarjeta de precios el nombre de la clase, deslizar la diapositiva. Entonces, como puedes ver, todo está mal aquí porque detrás de escena y otro código está funcionando desde el plug-in Lo que arreglaremos esas cosas en un minuto. Ahora mismo las cartas son demasiado grandes. El ancho y la altura ya no se aplican a ellos en consecuencia. Para arreglarlo, voy a sumar a ambos valores. Importante. Entonces ahora el problema está arreglado. A continuación, voy a agarrar el código JavaScript de la página de GitHub. Pasemos al archivo script.js e insertemos sus nuevos comentarios. Sección tres tarjetas de precios. Sección tres tarjetas de precios y péguelas aquí. El código JavaScript. En realidad, no necesitamos la paginación, así que vamos a deshacernos de estos bienes de ti Entonces ahora, como pueden ver, todo funciona bien. Antes de terminar de trabajar en esta sección, quiero hacer un par de cosas. Como puedes ver, tenemos aquí un objeto llamado el efecto overflow. Aquí hay algunas propiedades diferentes. Uno de ellos es rotar. En este momento está fijado a 50 y voy a aumentar a. Hagámoslo siete. Entonces ahora creo que tenemos un mejor resultado. Lo último que voy a hacer es crear algún espacio dentro del envoltorio. Así que sigamos adelante y pongamos el relleno a cinco rem. Bien, así que eso es todo. Por último, hemos terminado de trabajar en esta sección. Sigamos adelante. 29. Proyecto 3 - Sección de contacto de creación y estilo: Bien, así que paso a paso, estamos avanzando y ahora es el momento de crear una de las últimas secciones de este proyecto, que se llama contextos Echemos un vistazo al proyecto terminado. Por lo que la sección de contacto consta de un par de partes diferentes. Tenemos un rumbo en el lado izquierdo. En cuanto al lado derecho, puedes ver aquí algunos datos de contacto y un par de campos de entrada con un botón de enviar. Sigamos adelante y comencemos a crear el marcado HTML. Como es habitual, insertemos nuevos comentarios para la Sección Cuatro. Luego abra la etiqueta de sección, la sección Nombre de clase. Para lo siguiente, voy a crear el rumbo y la línea. Entonces vamos a abrir la etiqueta de encabezado H1 con el encabezado de la sección de clase. Y con el contacto de contenido. A continuación necesitamos la línea. Así que vamos a abrir la etiqueta div con una línea de encabezado de sección de clase. Bien, a continuación voy a abrir la etiqueta div, que va a ser la envoltura del contenido. El contenido del lado derecho de esta sección, lo voy a llamar envoltorio de contacto. Por lo que este elemento incluirá tres partes distintas, pero tendremos los datos de contacto, encabezado y el propio formulario. Vamos a abrir otra etiqueta div para los datos de contacto. Por lo que este elemento incluirá números de teléfono, direcciones y correos electrónicos con Font, iconos impresionantes. Vamos a abrir una etiqueta div con el teléfono de la clase. Entonces tendremos aquí un icono de Font Awesome que se dirige a párrafos. Vamos a abrir el elemento I con una clase es un s, un móvil Alt. Entonces voy a abrir la etiqueta de encabezado h3 con el teléfono de contenido Entonces crea párrafo con algún número de teléfono ficticio. Y luego volver a crear otro párrafo con algún dominó. Después de eso, tendremos direcciones. Así que vamos a abrir la etiqueta div con una dirección de clase. Entonces necesitamos el icono Font Awesome. Entonces está abierto el elemento I con las clases FAS, un mapa, marcador, ALT. A continuación, necesitamos la etiqueta de encabezado h3 con la dirección de contenido. Y por último, crear dos párrafos con dos direcciones ficticias diferentes Bien, entonces la siguiente parte va a ser un correo electrónico que sea etiqueta div abierta con el correo electrónico de la clase. Entonces otra vez necesitamos elementos IS con la clase es FAR FA, sobre que el encabezado va a ser correo electrónico. Y por último, instituyamos dos párrafos con dos direcciones de correo electrónico distintas. El primero va a ser supported@gmail.com. Y luego llamemos a esta segunda dirección de correo electrónico sales@gmail.com. Bien, así que eso es todo sobre los datos de contacto. A continuación voy a crear un encabezado. Vamos a abrir la etiqueta de encabezado H1 con un contenido. Ponte en contacto. Y ahora tenemos que crear la última parte de la sección del contrato, que se va a deformar. Vamos a abrir la etiqueta de formulario con el formulario de contacto de clase. Entonces te voy a insertar en elementos de entrada, área de texto, y el botón de enviar. Vamos a abrir la etiqueta de entrada con texto tipo con el atributo placeholder Vamos a insertar tu nombre. Después duplica esta línea de código, cambia el tipo. Va a ser correo electrónico. En cuanto al valor del atributo placeholder, va a ser tu correo electrónico A continuación necesitamos que el área de texto, que tendrá el atributo placeholder, valoraría tu mensaje Por último, necesitamos el botón Enviar. Se va a crear usando input. Elemento. El tipo va a ser enviado. Y también necesitamos valorar el mensaje enviado. Bien, así que aquí tenemos el marcado HTML, encabezado y la línea ya están todos En cuanto al resto de los elementos, se ven realmente feos. Entonces, sigamos adelante y nos ocupemos de eso. Voy a insertar nuevos comentarios en el archivo CSS, sección cuatro. Y fuera de la sección cuatro. Después seleccione los elementos de esta sección y defina su ancho, alto, y también el color de fondo. El ancho va a ser del 100 por ciento. Entonces necesitamos que la altura sea el 100% de la ventana gráfica como probablemente color de fondo Usemos tu color 171718. Va a ser el gris oscuro. Bien, lo siguiente voy a alinear los elementos horizontalmente en fila, y además quiero colocarlos en el centro verticalmente. Para eso. Como de costumbre, voy a usar Flexbox. Vamos a configurar la pantalla a flex Luego necesitamos alinear los artículos al centro. Y además voy a crear algo de espacio en vez de esta sección en los lados izquierdo y derecho, vamos a usar padding con un valor de cero y dar la vuelta. Bien, sigamos adelante y nos ocupemos del rapero de contacto. Consta de tres partes. Tenemos datos de contacto, rumbo y formulario. Voy a alinearlos usando Flexbox. Así que vamos a seleccionar el elemento div envoltorio. Estoy en contacto rapero. En primer lugar, voy a establecer el ancho al 80 por ciento. Luego use flexbox. Necesitamos display flex. Entonces tenemos que colocar los elementos verticalmente en columnas así que necesitamos cambiar la dirección que estaba haciendo columna. Y luego usa alinear elementos en el centro. Bien, entonces ahora mismo las tres partes están alineadas. A continuación, voy a encargarme de cada uno de ellos. Empecemos con los datos de contacto, como el envoltorio. Entonces voy a colocar las tres partes horizontalmente en fila. Así que vamos a establecer display a flex y luego crear algo de espacio en la parte inferior usando margen inferior ocho Ran. En realidad, no tenemos aquí el icono de la dirección. Vamos a revisar el código. Entonces como pueden ver, tenemos que deshacernos del tablero de aquí. Bien, entonces después de eso, voy a separar los envoltorios de Así que vamos a seleccionar elementos div. Establezca su ancho en 25 RAM. Entonces voy a colocar el texto en el centro y también crear este espacio alrededor de los elementos usando margin. Vamos a ponerla en renta. Bien, entonces cada elemento div consiste en un encabezado de icono Font Awesome, párrafos vacíos. Sigamos adelante y personalízalos. Voy a empezar con los íconos. Seleccionemos elementos I. Aumente su tamaño de fuente, hágalo cinco RAM, y luego cambie el color, hágalo 781010 Los iconos están estilizados. A continuación voy a personalizar los encabezamientos. Seleccionemos elementos de encabezado h3. En primer lugar, voy a cambiar el font-family. Vamos a usar aquí hecho alma laberinto san-serif que aumentar el tamaño de la fuente, que sea 2.5 RAM. Además, voy a crear algo de espacio en la parte superior e inferior del arenque. Vamos a establecer el margen a RAM y cero y también cambiemos el color. Voy a usar tu color ccc. Bien, eso es lo de los encabezamientos. Sigamos adelante y cuidemos los párrafos. Seleccionemos elementos p. Voy a definir el tamaño de la fuente. Hagámoslo 1.6 RAM, y luego cambiemos el color. En este caso, voy a usar color o AAAA. Bien, así como puedes ver con los datos de contacto, ya terminamos. Ahora es el momento de iniciar el rumbo. Y luego la forma misma. Seleccionemos elementos de encabezado H1. Voy a aumentar el tamaño de la fuente. Hagámosla RAM llena. Después cambia el color. Vamos a usar aquí llamada o CCC. Entonces voy a transformar texto en mayúsculas. Y finalmente crea algo de espacio en la parte inferior. Utilice margen inferior con rampa de valor tres. ¿Bien? Entonces como pueden ver, el encabezado está estilizado y ahora tenemos que seguir adelante y cuidar la forma Así que vamos a seleccionar Formulario de contacto. Primero. Voy a establecer su ancho en siete a RAM. Entonces voy a alinear elementos usando Flexbox. Vamos a configurar la pantalla para flexionar y cambiar la dirección. Haz que los llame. Bien, Entonces los campos de entrada se colocan verticalmente en una columna. Como saben, tenemos aquí dos campos de entrada, un área de texto. Tendrán algunos estilos comunes. Así que sigamos adelante y seleccionemos tanto la entrada como el área de texto. Entonces, antes que nada, voy a crear algún espacio dentro de los campos. Vamos a establecer padding a 1.5 ran, luego cambiemos el color de fondo. Voy a hacerlo gris oscuro usando para cuatro. Después cambia el color del texto. Hagámoslo e. también, me voy a deshacer de frontera por defecto. Vamos a ponerla en ninguna. Y luego crear algo de espacio en la parte inferior está en margen inferior para correr. Entonces ahora los elementos se ven mucho mejor y tenemos que encargarnos de las fuentes. Vamos a establecer la familia de fuentes en Oswald san-serif. Entonces voy a aumentar el tamaño de la fuente. Vamos a configurarlo en 1.8 RAM. Además, haz que la fuente sea más ligera. Establezcamos el peso de la fuente en 300 y aumentemos el espacio entre las letras. Vamos a ponerla en rampa 0.1. Bien, entonces las entradas y el área de texto, o un estilo, se ven bien Hemos utilizado algunos estilos comunes para las entradas y el área de texto, pero necesitamos un par de estilos más para el área de texto y el botón Enviar. Como sabes, puedes cambiar el ancho y alto del área de texto manualmente desde la esquina inferior derecha. Si hacemos eso, entonces estropeará el diseño. Entonces necesitamos limitar el ancho y la altura del área de texto de alguna manera. Para eso, voy a usar propiedades como max-width, max height, y una altura media Así que vamos a seleccionar el área de texto. Voy a establecer el ancho máximo al 100%. Entonces definamos la altura máxima, configurémosla en 15 RAM. En cuanto a la altura mínima, voy a poner en rampa 5.5. Así que ahora como puedes ver, podemos incrementar un poco el tamaño del área de texto. Bien, así que el último elemento que tenemos que personalizar es el botón de enviar Entonces, vamos a encargarnos de eso. Y voy a seleccionar el botón Enviar usando el atributo type que necesitamos aquí Enviar. Cambiemos el color de fondo. Voy a usar tu color 781010, luego transformar el texto en mayúsculas y también cambiar el tipo del curso están haciendo un puntero Entonces el botón de enviar está estilizado, se ve bien. Y por último, voy a crear un pequeño efecto hover. Quiero cambiar el color de fondo del botón ligeramente al flotar Entonces, seleccionemos el botón enviar con hover. Cambiar el color de fondo. Usemos tu color 50303. Y luego usa la transición con el color de fondo. Y con duración 0.3 s. bien, así que eso es todo Se crea la sección de contacto y estilo. Entonces, sigamos adelante. 30. Proyecto 3 - Crear y Style Footer: Bien, así que casi hemos terminado de construir nuestros proyectos Es momento de crear la última parte, que va a ser el pie de página. Será uno sencillo. Tendremos los elementos de navegación en el lado izquierdo. En cuanto al lado derecho, colocaremos aquí el párrafo con algunos textos de copyright. Además de eso, haremos que esos vínculos funcionen. Si hago clic en ellos, navegaremos a la sección adecuada sin problemas. Bien, sigamos adelante y comencemos a crear el marcado HTML. Voy a instituir nuevos comentarios. Pie de página y un pie de página. A continuación, abra el elemento de pie de página HTML5 con un pie de página de clase. Por lo que la foto constará de dos partes distintas. Tendremos el pie de página, navegación y el párrafo. Así que vamos a crear elementos div con la clase footer nav que Institute enlaza elementos con el contenido home. Por lo que en general tendremos cuatro enlaces diferentes. Duplicémoslo tres veces y cambiemos el contenido. El segundo va a ser sobre nosotros de lo que vamos a tener precios. Y el último va a ser el contacto. Eso es todo sobre la primera parte. Abramos una etiqueta p con un copyright de clase, y luego insertemos algún texto de copyright. Necesitamos aquí entidad HTML5, me refiero al signo de copyright, seguido de código y crear. Todos los derechos reservados. Bien, así que eso es todo sobre el marcado HTML. Sigamos adelante y personalicemos el pie de página. Voy a crear nuevos comentarios en el archivo CSS para pie de página. Después selecciona el pie de página y define su ancho y alto. Voy a establecer el ancho al 100%. Para la altura. Hagámoslo 12 alrededor. Y también cambiar el color de fondo. Voy a usar tu color para 0 a uno a dos. A continuación voy a alinear los elementos usando Flexbox. Vamos a configurar la pantalla para flexionar. Entonces voy a crear algún espacio entre los elementos flex que necesitamos justificar el espacio de contenido entre. Después, para colocar los artículos en el centro, alinear verticalmente los elementos en el centro. Y también voy a crear algo de espacio en los lados izquierdo y derecho. Vamos a usar relleno con el valor 0.10 rampa. Bien, entonces los elementos están alineados y ahora tenemos que estilizarlos. Empecemos con enlaces de navegación de pie de página. Voy a cambiar la familia de fuentes. Hagámoslo así hecho san-serif de maíz. Que aumentar el tamaño de la fuente, hacerlo a Ram y cambiar el color. Voy a usar aquí el color C, C, C. Como pueden ver, necesitamos crear algún espacio entre los elementos de enlace. Entonces usemos margin, right, con un valor de tres rem. Y también aumentar el espacio entre las letras. Utilice espaciado entre letras, rampa 0.1. Bien, Entonces los elementos de enlace o estilo, antes de pasar al párrafo, voy a crear un pequeño efecto hover Voy a cambiar el color al flotar. Así que vamos a seleccionar elementos de enlace con un hover. Entonces cambia el color que voy a usar aquí color edad seis a tres a tres. Y también usa transición con los valores color 0.3 s. bien, así que eso es todo sobre los elementos de navegación Pasemos al párrafo. Voy a aumentar su tamaño de fuente. Vamos a configurarlo en dos RAM. Y también cambiar el color. sea d, d, d. bien, así que eso es todo. El pie de página está personalizado. Y antes de que terminemos, voy a hacer que esos elementos de navegación funcionen. Una vez que hacemos clic en ellos, tenemos que navegar a la sección adecuada. Para lograrlo, tenemos que conectar las secciones a los enlaces. Lo haremos usando los atributos h reference e ID. Como usted sabe, el elemento de enlace H tiene un atributo de referencia H. Tenemos que asignar a cada elemento de sección y atributo ID. Y entonces los valores de ambos atributos deberían coincidir. Así que vamos a insertar un nuevo hogar. Entonces Sobre Nosotros precios y contacto. Después de eso, asignemos a cada sección elementos y atributo ID con los valores adecuados. La primera sección debe tener id con el valor la casa que la segunda va a ser sobre nosotros. A continuación, tendremos precios. En cuanto a la última sección, va a ser contenta. Entonces ahora si hago clic en los enlaces, navegaremos a la sección de propiedades, pero sin ningún efecto suave. Para solucionarlo, tenemos que usar una de estas propiedades CSS llamada comportamiento de desplazamiento. Tenemos que asignarlo al elemento HTML y tenemos que configurarlo para suavizar. Entonces ahora el problema está arreglado. Y finalmente, ya terminamos. El proyecto está terminado. Todas estas secciones son creadas y personalizadas. Y ahora tenemos que pasar a la última parte. Es decir, tenemos que hacer un proyecto sensible a diferentes tamaños de pantalla. Entonces, sigamos adelante. 31. Proyecto 3 - Hacer que responda al proyecto: Bien, así que hemos terminado de construir nuestros proyectos. Y como dije ahora es el momento de que responda a diferentes tamaños de pantalla. Como es habitual, hemos construido este proyecto con el escritorio. El primer enfoque está construido para un tamaño de pantalla extra grande. Tamaño de pantalla con 90, 20 píxeles de ancho y 1080 píxeles de alto. Y ahora tenemos que hacerlo sensible a tamaños de pantalla más pequeños. Inspeccionemos la página y cambiemos al modo responsive. Entonces, como puede ver, el ancho y el alto están establecidos en 1,920.10, 80 píxeles Por lo que necesitamos encontrar los puntos de interrupción en los que el proyecto necesita algunos cambios y ajustes Ya preparé los puntos de quiebre, así que no voy a perder el tiempo en encontrarlos. Entonces, el primer punto de interrupción en el que necesitamos hacer algunos cambios va a ser de 1,800 píxeles Porque como ves, la segunda sección no se ve bien. Así que vamos a seguir adelante y crear una consulta de medios CSS. Antes de eso, voy a insertar nuevos comentarios, responsivos, insensibles A continuación, crea la media query CSS. Voy a especificar quien es el max-width como 1,800 pixeles. Entonces en el punto de interrupción, voy a disminuir el ancho del envoltorio de video y el párrafo Y también voy a cambiar ligeramente sus posiciones. Entonces, seleccionemos Envoltura de video. Voy a establecer su ancho para correr. Entonces la altura va a ser de la marca 45. En cuanto a la posición correcta, vamos a hacerla diez rampa. Entonces eso es todo sobre el envoltorio de video. Pasemos al párrafo. Vamos a seleccionarlo. Voy a definir su ancho. Hagámoslo 90 RAM. Y luego cambia la posición correcta, hazlo tan rampa. Bien, entonces la segunda sección se ve bien. Lo único que voy a hacer es crear un poco de espacio en el lado derecho de la línea en la sección de alimentos. Como saben, las líneas tienen el nombre de clase común, línea de encabezado de sección. Entonces, para seleccionar la línea de la sección del pie, tenemos que usar la combinación de estos electrodos así. Al principio necesitamos especificar aquí la sección tres y la línea de rumbo de la sección. Pongamos margen en la rampa del lado derecho 23. Bien, así que con este punto de quiebre, terminamos porque todas las demás secciones se ven bien El siguiente punto de interrupción va a ser de 1,650 píxeles. Así que vamos a seguir adelante y crear una nueva consulta de medios CSS y especificar quién es el ancho máximo. Entonces en el punto de ruptura, tenemos que encargarnos de nuevo, la segunda sección Pero antes de eso voy a disminuir el tamaño de fuente del elemento HTML. Hará que los elementos sean más pequeños. Estoy en los elementos que se miden en RAM. Entonces, fijemos el tamaño de fuente en 57 por ciento. Entonces los elementos se hicieron más pequeños. Ahora voy a encargarme de la segunda sección. Tomemos este código de aquí y peguémoslo abajo. Entonces el ancho del envoltorio de video, que va a ser 85 corrió, luego cambia el valor de height. Hagámoslo cuatro para carnero. En cuanto a la posición correcta, voy a hacer que sea cinco corridas. Después cambia el ancho para el párrafo, hazlo 85 RAM de lo que necesitamos, posición correcta. Que sea cinco rem. Y también voy a agregar aquí, compré alguna propiedad con el valor diez corrió. Bien, así que eso es todo sobre este punto de ruptura. El siguiente va a ser de 1,500 pixeles. En el punto de ruptura, sólo voy a ocultar las líneas de rumbo Así que vamos a crear una nueva consulta de medios CSS y especificar el ancho máximo como 1,500 Después selecciona las líneas de rumbo y se le asigna. No mostrar ninguno. Bien, entonces las líneas están ocultas. Sigamos adelante y encontremos el siguiente punto de interrupción. Por lo que el siguiente punto de interrupción va a ser de 1,400 píxeles. Entonces, como pueden ver, tenemos muchas cosas que hacer porque el proyecto está casi estropeado en un tamaño de pantalla tan pequeño Vamos a crear una nueva consulta de medios CSS El ancho máximo, 1,400 En primer lugar, voy a disminuir nuevo el tamaño de fuente del elemento HTML. Vamos a establecerlo en 45 por ciento. Entonces como pueden ver, ya tenemos un resultado mucho mejor. Manipular el tamaño de fuente del elemento HTML es realmente algo poderoso cuando intentas hacer que el proyecto sea receptivo A continuación, voy a disminuir el tamaño de fuente del encabezado del banner. Así que tenemos que seleccionar el elemento span. Vamos a establecer su tamaño de fuente para dar la vuelta. Bien, después de eso, voy a encargarme del párrafo. Tenemos que aumentar el ancho de la misma. Seleccionemos B9 o párrafo. Aumente su ancho, 45 RAM, y luego cambie el tamaño de fuente, conviértalo en una rampa 3D. El párrafo se ve bien. Ahora voy a encargarme del resto de las secciones. A partir de este punto de ruptura, quiero cambiar un poco el diseño. Ahora mismo decapitan un lugar del lado izquierdo, y los voy a colocar en la parte superior de los tramos en el centro Para lograrlo, seleccionemos las tres secciones. Sección a sección tres y sección cuatro, y cambiar la dirección del diseño del flujo. Voy a hacer que los llame. Bien, por lo que ahora los encabezamientos se colocan en la parte superior de esta sección Sigamos adelante y personalicemos la segunda sección. Voy a aumentar su altura. Vamos a establecerlo a 120 de altura de la vista. Entonces voy a colocar el video y el párrafo en el centro de la página. Seleccionemos Envoltura de video y define dos posiciones, hazlo 20 por ciento. Entonces necesitamos la posición izquierda. Voy a lograr que sea el 50%. Y para centrar el elemento perfectamente, necesitamos transformar traducir con la dirección x Y como valor voy a instituir o -50 por ciento. Y también disminuir probablemente el ancho del envoltorio de video. Hagámoslo una rampa de dos. Bien, sigamos adelante y hagamos lo mismo para el párrafo. Vamos a seleccionarlo. En este caso, voy a definir justamente la posición de la izquierda. Hagámoslo 50 por ciento. Por otra parte, necesitamos transformar, traducir con la dirección x y con un valor de -50% Entonces por último, cambia el ancho, hazlo 80 RAM. Bien, así que eso es todo sobre la segunda sección. Pasemos a la siguiente sección. Voy a establecer la altura de la tercera sección a oral y también definir el relleno. Voy a ponerla a cinco rem en la parte superior, luego a cero en el lado derecho. Entonces necesitamos diez rampas en la parte inferior y cero en el lado izquierdo. A continuación, voy a crear algo de espacio en la parte inferior del encabezado. Para seleccionar específicamente el encabezamiento de la tercera sección, necesitamos seleccionar esa primera sección tres, seguida de este encabezado de sección. Definamos marzo importante con rampa de valor siete. Bien, Finalmente, aumentemos el ancho del swipe por contenedor al 100%. Vamos a seleccionarlo y establecer el ancho al 100%. Bien, entonces con la tercera sección ya terminamos. Sigamos adelante y personalicemos la sección de contacto. Voy a establecer su altura en auto también. Luego definí el relleno, lo voy a poner a cinco rem en la parte superior e inferior y a cero en los lados izquierdo y derecho. Bien, así que eso es todo con respecto a 1,400 píxeles o estas secciones se ven bien Sigamos adelante y encontremos el siguiente punto de interrupción. Creo que va a ser de 900 pixeles. Así que vamos a crear una nueva consulta de medios CSS y especificar el ancho máximo como 900 píxeles. Entonces lo primero que voy a hacer es disminuir el tamaño de fuente de los elementos HTML. Vamos a establecerlo en 40%. Entonces. Voy a disminuir el tamaño de fuente del encabezado del banner. Seleccionemos este elemento path y su tamaño de fuente a ocho corridas. Entonces creo que tenemos un gran espacio entre el encabezamiento y el párrafo. Y también sería mejor que bajáramos ligeramente por la pancarta. Entonces al principio seleccionemos banner y cambiemos su posición superior. Voy a hacer un 25% Y luego voy a disminuir la altura del encabezado de pancarta. Vamos a establecerlo en 15 carreras. Entonces ahora el binario se ve mucho mejor. Además, no necesitamos tocar las secciones segunda, tercera y cuarta. Pasemos al pie de página. Vamos a seleccionarlo y nos encontramos con relleno. Voy a disminuir el espacio en los lados izquierdo y derecho. Vamos a establecer el relleno a 0.5 ran. Después selecciona los elementos de enlace y cambia su tamaño de fuente. Voy a hacer 1.8 Ran. Bien, así que veamos sobre este punto de ruptura de estas secciones Luce bien. Sigamos adelante y encontremos el siguiente. El siguiente punto de interrupción va a ser de 700 píxeles. Sigamos adelante y creamos una nueva consulta de medios CSS con el ancho máximo de 700 Al principio, voy a disminuir el tamaño de fuente de los elementos HTML. este momento está establecido en 40%, por lo que es disminuirlo y convertirlo en 35 por ciento. Entonces los elementos se hicieron más pequeños. En realidad, la primera sección se ve bien. Pasemos al segundo. Creo que necesitamos disminuir la altura de esta sección. Hagámoslo 100 de altura de la vista. La segunda sección, se ve bien. Por lo que no necesitamos tocar la sección de precios. En cuanto a la sección de contenido, voy a disminuir probablemente el espacio entre los datos de contacto. Así que vamos a seleccionar elementos div y especificar margin con valores tres rem en la parte superior e inferior y dos rem en los lados izquierdo y derecho. Bien, por último, vamos a encargarnos del pie de página. Voy a colocar los elementos de navegación y el párrafo verticalmente uno encima del otro. Entonces cambiemos la dirección. Voy a hacerla columna. A continuación, los voy a colocar en el centro verticalmente. Para ello, vamos a usar justify-content center. Y por último, crear algo de espacio debajo de los enlaces. Seleccionemos footer nav y le asignemos margen inferior con valor para ejecutar. Bien, el término completo se ve bien y de hecho en el punto de quiebre, ya terminamos Ahora es el momento de hacer que nuestro proyecto se vea bien en el último punto de interrupción, que va a ser de 500 píxeles Así que vamos a seguir adelante y crear una nueva consulta de medios CSS y especificar el ancho máximo como 500 píxeles. Entonces nuevamente, al principio, voy a disminuir el tamaño de fuente de los elementos HTML. Vamos a establecerlo en 30%. En realidad, antes de personalizar la primera sección, me voy a deshacer del espacio en blanco que tenemos en el lado derecho de la página Es causado por las secciones segunda y conducta. Entonces, seleccionemos Envoltura de video y fijemos su ancho en 60 RAM. Después seleccione Párrafo, establezca su ancho en seis dracmas también. La segunda sección se ve bien. Vamos a encargarnos de la sección de contacto. Voy a seleccionar unos elementos div. Me refiero al div de los datos de contacto. Vamos a establecer su ancho en 18 RAM. También cambia el margen. Voy a ponerlo en tres rem en la parte superior e inferior y un rem en los lados izquierdo y derecho. Y también disminuir el ancho del formulario de contacto. Vamos a establecerlo en 60 carreras. Bien, entonces la sección de contacto se ve bien también. Y por último, tenemos que encargarnos de la primera sección. Seleccionemos el encabezado del banner, span. Voy a disminuir su tamaño de fuente. Hagámoslo 4.5 RAM. Y también voy a disminuir el espacio entre las letras. Hagámoslo correr. En realidad. Como saben, los elementos span en un encabezado cambian el espaciado entre letras durante la animación. Así que necesitamos disminuirlo en los fotogramas clave CSS también. De lo contrario, se puede ver que algunos de estos elementos span están rotos en dos líneas y no se ven bien. Voy a copiar todos los fotogramas clave CSS. Vamos a pegarlos aquí y cambiemos las cantidades de espaciado entre letras que necesitamos para ejecutar. Y luego una RAM en vez de 1.5 g Así que ahora todo funciona muy bien y en realidad ya hemos terminado. El proyecto responde a diferentes tamaños de pantalla. Entonces hemos terminado de trabajar en eso. Ojalá fuera interesante y lo disfrutaste. Ahora hay que seguir adelante y comenzar a construir el siguiente proyecto. 32. Proyecto 4 - Previsualización de proyecto: Bien, entonces es momento de comenzar a construir nuestro próximo proyecto, que va a ser uno de los más grandes e interesantes. Vamos a crear algo como el sitio web de comercio electrónico de APL Antes de empezar a escribir el código como de costumbre, sigamos adelante y describamos el proyecto. Consistirá en un par de secciones diferentes. Comenzaremos con el aterrizaje. Incluirá varias partes. Tendremos aquí un logo y la navegación con efectos hover Entonces vamos a construir estas bonitas cajas aquí con controladores. Podemos mover la caja usando estos controladores en un entorno 3D. Lo gestionaremos usando CSS y JavaScript. Además, tendremos aquí algunos elementos de textos y estas bonitas partes, que como pueden ver tiene un bonito efecto hover Además de eso, los préstamos tendrán las imágenes de fondo animadas. Cambiarán con Fade Effects. Bien, así que la siguiente sección incluye el encabezado y las imágenes del iPhone 12s Si pasamos el cursor sobre la imagen, entonces cambiará con un bonito efecto hover Además de eso, tenemos aquí dos botones, y una vez que pasemos el cursor sobre ellos, ¿jugarán algunos enlaces Después de eso viene la sección sobre MacBook Air. Una vez que nos desplazemos hacia abajo, entonces MacBook abrirá el logo y aparecerá la barra de progreso de carga. Y luego Mark Wu se encenderá, creará todas esas cosas usando solo CSS y JavaScript. Bien, pasemos a la siguiente sección donde puedes encontrar los Apple Watches. En esta sección, puedes elegir tus estuches favoritos y también las bandas usando esos controladores. Bien, A continuación tendremos una sección sobre aeropuertos seguida del pie de página, donde tendremos los iconos y el texto de copyright. Y en realidad esos íconos están conectados a las secciones adecuadas. Si hago clic en ellos, entonces navegaremos a la sección correspondiente. Además de eso, la navegación también está funcionando. Si hago clic en los elementos de navegación, entonces navegaremos a la sección adecuada. Bien, así que eso es todo sobre este proyecto. Por supuesto, lo haremos receptivo a diferentes tamaños de pantalla. Ahora es el momento de comenzar a construir un proyecto. Entonces, sigamos adelante. 33. Proyecto 4 - Crear y personalizar la página de aterrizaje: Bien, sigamos adelante y comencemos a construir un proyecto. He creado una nueva carpeta en el escritorio llamada pool e-commerce, en la que tengo otra carpeta para las imágenes. Sigamos adelante y abramos esta carpeta en Visual Studio Code y luego creamos nuestros archivos de trabajo. Voy a llamarlos index.html, style.css y script.js. A continuación, abra el archivo index.html y prepare el documento HTML básico. Para eso, voy a usar uno de los paquetes de código VS se llama Ahmed. Necesitamos colocar aquí un signo de exclamación y presionar Tab o Enter Bien, entonces aquí tenemos todas las etiquetas HTML básicas. En primer lugar, voy a cambiar el título. A ver, instituir el comercio electrónico de abril. Y luego después de eso, vinculemos archivos CSS y JavaScript. Voy a abrir etiqueta de enlace. Y luego necesitamos especificar la ruta del archivo en el atributo h reference. En cuanto al archivo JavaScript, vamos a abrir la etiqueta script justo encima de la etiqueta de cuerpo de cierre. Y luego en el atributo source, vamos a especificar la ruta del archivo. Además de eso, voy a traer un enlace más porque a lo largo del proyecto voy a usar iconos Font Awesome. Así que sigamos adelante y busquemos Font Awesome, CDN, js. Luego toma el enlace, abre la etiqueta de enlace en los elementos head y pega el enlace como el valor del atributo de referencia h. Bien, por último, voy a ejecutar el proyecto al navegador usando un servidor en vivo Nos permite ejecutar la vida del proyecto al navegador y realizar los cambios sin actualizar la página cada vez. Antes de seguir adelante, coloquemos el navegador y el editor de texto, así. Y empezar. Como es habitual, vamos a construir el proyecto sección por sección. La primera sección incluye un par de partes diferentes, como la presentación de diapositivas de las imágenes de fondo, también el cubo Estoy en esta caja. Esas partes serán un poco complejas. Entonces antes que nada, voy a encargarme del resto de las partes. Y después de eso, los crearemos también. Sigamos adelante y comencemos a crear el marcado HTML. Voy a abrir la etiqueta div, que va a ser el contenedor. Después inserta tus nuevos comentarios, sección uno y sección uno. Y luego abrir la etiqueta de sección con la clase sección uno. Entonces voy a empezar con un logo. Vamos a insertar tus nuevos Comentarios, logo y logo. Así que voy a crear logo usando el enlace y el icono Font Awesome. Entonces abramos una etiqueta con el logotipo de la clase y luego insertemos sus elementos de ojo con las clases FAB, FA apple. Bien, entonces aquí tenemos el logo. Sigamos adelante y creamos la navegación. Vamos a instituir nuevos comentarios, navbar. Y fuera ahora poro. Entonces voy a abrir elementos de navegación HTML5 con la barra de navegación de clase Y luego inserte aquí el primer elemento de navegación, etiqueta de enlace abierto con la clase ahora por enlace. Y como el contenido, vamos a insertar tu iPhone 12. Entonces, en general, tendremos cuatro elementos de navegación diferentes. Por lo tanto, voy a duplicar esta línea de código tres veces. Y luego cambiar el contenido. Voy a insertar tu MacBook Air. Entonces el siguiente va a ser Watch AirPods. Bien, eso es todo sobre la navegación. A continuación, voy a crear banner. Me refiero a los elementos de texto y al fondo. Así que vamos a crear nuevos comentarios, banner y de banner. Después abre la etiqueta div con el banner de la sección de clase uno. El banner incluirá cuatro elementos diferentes. Me refiero al párrafo del encabezado, elemento span y la parte inferior. Entonces es etiqueta de encabezado H1 abierta. Y vamos a insertar aquí la entidad HTML5, que va a ser la flecha izquierda. Entonces necesitamos ampersand, luego signo hash 8592, punto y coma, seguido Siguiente Voy a abrir etiqueta p, el párrafo con el siguiente texto. La creatividad es solo conectar las cosas Luego viene span elements. Insertemos aquí al autor de estas palabras, Steve Jobs. Y finalmente Crear botón con botón tipo y con el contenido a estas alturas. Bien, así que eso es todo sobre el margen ahora mismo. Como decíamos, nos encargaremos de esta presentación de diapositivas y de la caja un poco más tarde Es hora de empezar a escribir algo de CSS. En primer lugar, voy a crear algunos estilos comunes y restablecer. En realidad, a lo largo de este proyecto, vamos a utilizar una de las fuentes de Google. Entonces sigamos adelante y traemos el enlace. Visitemos el sitio web de Google Fonts. Entonces busca los teléfonos llamados exones. Voy a seleccionar todos estos mosaicos excepto Itálica. Así que vamos a seleccionarlos y luego importar la URL. Desde aquí. Tenemos que pegar esta URL en el archivo CSS. Bien, después de eso, vamos a crear comentarios, estilos comunes. Y de estilos comunes. Después selecciona cada elemento usando un asterisco. Entonces, antes que nada, voy a deshacerme del margen predeterminado y el relleno de cada elemento. Entonces, sigamos adelante y pongamos a ambos a cero. Entonces voy a hacer box-sizing border-box. Luego se deshace de las viñetas predeterminadas del elemento list usando list-style-type Además, no necesitamos esquema predeterminado. Vamos a ponerla en ninguna. A continuación, voy a deshacerme del subyacente por defecto de los elementos de enlace usando decoración de texto ninguno. Y por último, pongamos la familia de fuentes para que funcionen los sonidos. Sans-serif. Entonces, como puedes ver, todos los estilos comunes se aplican a todos los elementos a lo largo de este proyecto. Al igual que los demás, voy a usar la RAM como unidad de medida. este momento, una RAM 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 elemento HTML. Vamos a establecerlo en 62.5%. ¿Bien? Entonces, como puedes ver, todos los elementos se hicieron más pequeños y ahora 1 g es igual a picos de bronceado. A continuación, voy a crear un par de variables CSS para los colores porque vamos a usar varios colores frecuentemente en creo que sería mejor si usamos variables CSS. En general, las variables CSS pueden tener un alcance global o local. En este caso, necesitamos variables globales porque se puede acceder a ellas a través de todo el documento. En cuanto a las variables locales, solo se pueden usar dentro del selector. Para crear variables con un alcance global, necesitamos declararlo dentro del selector raíz. El selector raíz coincide con el elemento raíz de documentos. Después de eso, necesitamos especificar los nombres de las variables y los valores. Los nombres de las variables deben tener signos de doble guión Voy a llamar a la primera variable color primario. Y como valor, vamos a usar aquí seis, e, d e seis. A continuación, voy a crear un color blanco. Y el tercero va a ser de color negro. Bien, así que eso es todo sobre los estilos comunes. Sigamos adelante y comencemos a personalizar este elemento de sección. Inserta tus nuevos comentarios, sección uno. Y la sección uno. Al principio, definamos su anchura y altura. 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. En este caso, estaremos usando un color de fondo temporal, pero luego crearemos la presentación de diapositivas Entonces ahora voy a usar una de las variables. Y para hacer eso, tenemos que usar una función llamada var, que significa variable. Entonces tenemos que especificar el nombre de la variable dentro del paréntesis Vamos a usar aquí color primario. ¿Bien? Entonces como puedes ver, se cambia el color de fondo. Después de eso, voy a alinear los elementos usando Flexbox. Así que pongamos display a flex. Entonces voy a colocar los elementos en el centro verticalmente. Para eso, necesitamos usar align items center. Y con el fin de crear espacio entre los elementos, vamos a establecer justificar el contenido Para espaciado de manera uniforme. Entonces como puedes ver, los elementos se colocan en el centro horizontalmente. Lo último que quiero hacer respecto a este elemento de sección es cambiar un poco su forma. Echemos un vistazo a la versión terminada del proyecto. Como puedes ver, la parte de esta sección se corta en la esquina inferior derecha. Para lograrlo, tenemos que usar una de las propiedades llamadas clip-path con función de polígono Para elegir la forma y obtener los valores adecuados. Podemos visitar uno de los sitios web. Busquemos CSS de ruta de clip. Después visita el primer enlace. Así que aquí está el sitio web, o puedes elegir la forma que quieras y tomar los valores adecuados desde aquí. En nuestro caso, voy a usar un pentágono porque aquí tenemos cinco puntos diferentes y podemos definir diferentes formas con la ayuda de ellos. Entonces en nuestro caso, necesitamos la forma como esta. Tenemos que cortar la esquina inferior derecha. Entonces toma el código de aquí y asígnalo al elemento section. Bien, entonces se considera que la forma está cambiada. Y en realidad con este elemento de sección, ya terminamos. Sigamos adelante y personalicemos el logotipo. Voy a insertar nuevos comentarios para logo. A continuación, seleccione Logo. En primer lugar, voy a encargarme de la posición del logotipo. Se va a colocar en la esquina superior izquierda de la página. Entonces, sigamos adelante y fijemos su posición en absoluto. Entonces para definir su posición de acuerdo con su elemento padre, necesito asignar a esta sección elemento posición relativa. Y luego definir las propiedades superior e izquierda. Voy a ponerlos a los dos en tres asaltos. Bien, entonces se considera que se posiciona un logotipo. A continuación, voy a personalizar el icono en sí. Entonces, seleccionemos los elementos I. Primero, aumentemos el tamaño de la fuente, hagamos diez corridas, y luego cambiemos el color. Voy a usar tu valor RGBA con el color negro y con la opacidad 0.8 Bien, eso es todo sobre el logo. Sigamos adelante y cuidemos el Navbar. Vamos a insertar nuevos comentarios para la barra de navegación. Ahora la barra se va a colocar en la esquina superior derecha. Vamos a seleccionarlo y establecer su posición en absoluto. Entonces voy a definir las posiciones de arriba y derecha. Vamos a establecer la propiedad superior a tres RAM. En cuanto a la posición correcta, vamos a hacerla 10%. Bien, Entonces la barra de navegación se posiciona, se coloca en la esquina superior derecha adelante y personalicemos el enlace, seleccionemos un enlace superior y aumentemos su tamaño de fuente, conviértalo a Ram. A continuación, voy a crear espacio entre los elementos de navegación usando margen. En general, el elemento link es un elemento inline y por lo tanto no se aplicará margen a. Entonces necesitamos hacer enlaces en elementos de bloque de línea. Vamos a configurar la pantalla en bloque en línea. Entonces, cuando el elemento es un nivel de bloque en línea, se le puede asignar con altura, margen y relleno Y seguirán comportándose como un elemento inline. Quiero decir, no ocuparán todo el ancho dentro del contenedor y no se colocarán en líneas diferentes. Vamos a establecer el margen a cero en la parte superior e inferior y tres rem en los lados izquierdo y derecho. Bien, Después de eso, cambiemos el color de los enlaces. Y también voy a crear un efecto hover. Voy a aumentar el tamaño de los elementos al flotar. Entonces, antes que nada, cambiemos el color. Voy a usar aquí, color negro variable. Entonces selecciona ahora por enlace con hover. Entonces para aumentar el tamaño de los elementos, usemos Transformar con la función scale ya que si aumentamos el tamaño de fuente, empujará otros elementos y romperá el layout. Así que vamos a establecer la escala a 1.5 y también usar la transición para un efecto suave. Aquí necesitamos transformar. Y como la duración, vamos a insertar un 0.5 s. bien, Eso es todo sobre el Napa. Sigamos adelante y personalicemos el banner. Vamos a insertar tus nuevos comentarios para el banner Luego selecciona banner con el banner de la sección de clase uno. Entonces voy a alinear elementos verticalmente y también colocarlos en el centro. Para eso, voy a usar flexbox. En realidad, utilizaremos esta técnica frecuentemente a lo largo de este proyecto. Y para evitar usar las mismas propiedades y valores una y otra vez, voy a crear una nueva clase y estilos comunes. Vamos a llamarlo centro y asignado a él display flex. Luego justifique el centro de contenido para centrado horizontal y también alinee los elementos al centro para el centrado vertical Después asigne esta clase para hacer banner en el documento HTML. Entonces lo único que tenemos que hacer es cambiar la dirección porque necesitamos colocar elementos verticalmente en una columna. Así que tenemos que establecer la dirección de flexión a columna. Entonces consideremos que los elementos están alineados. Sigamos adelante y personalicemos cada uno de ellos. Voy a empezar con una rúbrica. Vamos a seleccionarlo. En primer lugar, voy a aumentar el tamaño de la fuente. Hagámoslo 13 RAM que hacer que la fuente sea más ligera. Establezca el peso de la fuente en 300. También transforma texto en mayúsculas y crea algo de espacio entre las letras usando espaciado entre letras 0.5 rem. Bien, veamos sobre el rumbo. Sigamos adelante y personalicemos el párrafo. Cambiemos el tamaño de fuente, hagámoslo para RAM. Además, voy a establecer el font-weight en 400, luego crear espacio entre las letras, convertirlo en 0.1 RAM Y por último, voy a crear algo de espacio en la parte superior e inferior usando margen. Pongámoslo a seis rem en la parte superior, cero en el lado derecho, antebrazo en la parte inferior y cero en el lado izquierdo Bien, entonces consideremos que el párrafo también está estilizado. Y después de eso voy a personalizar este elemento span. Vamos a seleccionarlo. Voy a aumentar el tamaño de la fuente. Hagamos tres RAM, y luego creamos algo de espacio en la parte inferior del elemento. Vamos a establecer el margen inferior en cinco rima. Bien, así que el único elemento que vamos a personalizar es este botón de aquí Entonces sigamos adelante y seleccionémoslo. En primer lugar, voy a crear algo de espacio dentro del botón usando padding. Vamos a ponerlo en dos rem en la parte superior e inferior y foro en los lados izquierdo y derecho. A continuación, voy a aumentar el tamaño de la fuente, llegar a Ram. También cambia el color de fondo. Vamos a usar aquí color negro. Entonces voy a cambiar el color del texto. Usemos tu color primario. Y luego cambia el peso de la fuente, hazlo 400. Bien, sigamos adelante y agreguemos un par de estilos más al fondo. A continuación, voy a crear algún espacio entre las letras. Vamos a configurarlo en 0.1 RAM. Además, me voy a deshacer de la frontera por defecto. Vamos a ponerla en ninguna. Después hacer las esquinas del Bateson ligeramente redondeadas usando border-radius con el valor 0.5 RAM Y finalmente cambiar el tipo del cursor, hacer que apunte a. Entonces ahora necesitamos cambiar la forma del patrón. Si echamos un vistazo al proyecto terminado, verás que tiene una forma diferente. Y su forma cambia. Una vez que pasemos el cursor sobre el botón, voy a usar de nuevo una propiedad de ruta de clip Pero no voy a crear la forma manualmente porque puede llevar demasiado tiempo. Ya he preparado necesitaban valores. Vamos a copiarlos y pegarlos. Aquí. Adjuntaré este archivo a esta conferencia para que pueda encontrar fácilmente esos valores. Entonces como se puede ver, la forma se cambia. Ahora necesitamos crear un efecto hover. Vamos a seleccionar el botón que flotaría. Entonces vuelve a agarrar los valores de aquí. Y finalmente usar transición. Necesitamos aquí clip-path y la duración 0.5 s. ¿Bien? Entonces como pueden ver, tenemos aquí un bonito efecto hover y con una pancarta, ya terminamos Ahora, vamos a encargarnos de esta presentación 34. Proyecto 4 - Crea imágenes de fondo: Bien, así que algunas de las partes de la landing page están hechas Ahora tenemos que encargarnos de esta presentación de diapositivas de la imagen de fondo La mayor parte de la presentación de diapositivas en la que estoy, la funcionalidad se creará usando JavaScript. En el documento HTML se creará un solo elemento div que representará la presentación de diapositivas Entonces, sigamos adelante e insertemos nuevos comentarios. Presentación de diapositivas y presentación de diapositivas. Y crea un elemento div con una presentación de diapositivas de clase. Bien, eso es todo sobre el HTML. Sigamos adelante y pasemos al archivo JavaScript. Es instituir los comentarios también, slideshow y off slideshow. Por lo que en general vamos a crear cinco desarrollos y vamos a definir para cada desarrollo imagen de fondo. Podríamos hacer esto usando HTML y CSS. Es decir, podríamos crear cinco desarrollos diferentes. Y luego podríamos asignar a cada uno de ellos imagen de fondo de CSS. Pero haremos lo mismo de manera más cómoda y dinámica con JavaScript. Bien, sigamos adelante y creamos una función. Voy a llamarlo escrituras de presentación de diapositivas. Entonces como dijimos, vamos a crear cinco elementos div. Y para eso voy a usar for-loop. Vamos a recorrer 1-5. Y en cada iteración crearemos un elemento div usando uno de los métodos dome llamado create element Así que vamos a crear for loop. Entonces necesitamos aquí el contador I, que va a ser igual a uno. Entonces como la condición que necesitamos yo menos o igual a cinco. Y por último, yo más, más. Después de eso, voy a crear una nueva variable. Vamos a llamarlo div. Entonces como dijimos, vamos a usar uno de los métodos dome llamados create element. Así que vamos a usarlo y luego especificar el nombre de la etiqueta entre paréntesis. Necesitamos profundo. Bien, eso se trata de crear nuevos elementos. Ahora tenemos que asignar a los elementos recién creados una imagen de fondo adecuada. Para ello, vamos a usar la propiedad style. Tenemos que asignarlo al div. Y entonces debería ser seguido por el nombre de propiedad imagen de fondo. Tenemos que escribirlo en estuche de camello. Entonces ahora necesitamos definir el camino de la imagen. Si revisamos nuestra carpeta de imágenes, entonces encontrarás aquí otra carpeta llamada slideshow, en la que tenemos cinco imágenes de fondo diferentes Como ves, la única diferencia entre los nombres son esos números aquí. Así que necesitamos establecer todas esas imágenes de fondo a los elementos div recién creados dinámicamente. Necesitamos tu URL, luego las imágenes del nombre de la carpeta. A continuación tenemos otra carpeta, slideshow. Y luego tenemos que especificar el nombre de la imagen, que va a ser la Sección uno, B, g. y en lugar del número, tenemos que pasar la variable i, seguida del JPG de extinción. Entonces en la primera iteración, seré igual a uno y se utilizará la primera imagen de fondo Después en la segunda iteración, se utilizará la segunda imagen, y así sucesivamente For loop continuará funcionando hasta que se utilicen las cinco imágenes. ¿Bien? Así que para agregar elementos div recién creados, para hacer el elemento div wrapper que creamos en el documento HTML, tenemos que usar otro método dome llamado padre-hijo En primer lugar, tenemos que seleccionar el envoltorio. Vamos a utilizar el método query select y especificar aquí el nombre de la clase slideshow Luego se adjunta a él método llamado append child y como los argumentos en su D. Bien, así que para poder ejecutar esta función, necesitamos llamarla Entonces, si inspeccionamos la página y verificamos la pestaña Elementos, encontrarás que tenemos aquí cinco desarrollos diferentes. Y cada uno de ellos tiene propiedad de imagen de fondo con la imagen adecuada. Bien, así que todo funciona bien hasta ahora. Ahora, tenemos que hacer que esta presentación de diapositivas funcione. En este momento, las imágenes de fondo no son visibles. Entonces, antes que nada, vamos a encargarnos de eso y escribir algo de CSS. En realidad, veo aquí que me faltan los comentarios finales para el banner por alguna razón. Y además no necesitamos aquí este comentario final de estilo común. Entonces sigamos adelante y arreglemos esas cosas. Después inserta tus nuevos comentarios para la presentación de diapositivas. Y luego seleccionar elementos div envoltorio. En primer lugar, voy a definir la anchura y la altura. Hagamos que ambos cien por ciento Y luego pongamos su posición en absoluta. Además, necesitamos definir propiedades superiores e izquierdas. Ambos deben ser iguales a cero. este momento, las imágenes aún no son visibles porque no tienen ancho y alto. Así que sigamos adelante y seleccionemos la propia DB y fijemos su ancho y alto, ambos 200 por ciento. Bien, Así que ahora se muestra una de las imágenes. El resto de ellos se colocan aquí abajo, pero no son visibles. Tenemos que colocar todas las imágenes una encima de la otra. Y para eso, usemos posición absoluta. Además de eso, voy a usar un par de propiedades de fondo. El primero va a ser de tamaño de fondo. Tenemos que configurarlo para cubrir. Entonces como la posición del fondo, voy a usar Centro. Y también necesitamos aquí repetir fondo con valor, no repetir. Bien, entonces ahora tenemos aquí un problema. El contenido de la landing page terminó detrás de las imágenes y no es factible. Entonces para arreglar eso, vamos a usar la propiedad z-index con un valor menor que cero Entonces hagámoslo menos uno. Bien, entonces ahora el problema está arreglado y tenemos que seguir adelante y hacer que esta presentación de diapositivas funcione Entonces ocultaremos todas las imágenes por defecto, y luego las mostraremos usando opacidad Usaremos una nueva clase en CSS, donde definiremos la opacidad con el valor uno Y agregaremos esta nueva clase a los desarrollos en orden desde JavaScript. Así que sigamos adelante y ocultemos todos los elementos div usando opacidad cero Entonces, como puedes ver, las imágenes están ocultas. A continuación, voy a mostrar la primera imagen por defecto. Para ello, utilizaremos la nueva clase antes mencionada. Entonces, para poder asignar a la primera clase de desarrollo, que se llamará cambio, necesitamos aquí una pequeña declaración condicional. Entonces cuando yo es igual a uno, entonces significa que es la primera iteración. El primer elemento div está creando. Este es el momento en el que necesitamos asignar a cada cambio de clase. Entonces para eso necesitamos aquí Y operador. Y luego tenemos que agregar al cambio de clase de desarrollo. Para eso, voy a usar una de las propiedades llamadas class list, que nos da todas las clases que tiene el elemento. Y también nos permite acceder por un par de métodos diferentes. Uno de ellos está en. Entonces vamos a especificar aquí el cambio de clase. Entonces, si revisamos de nuevo la pestaña Elementos, encontrarás que el primer elemento tiene un cambio de clase. Ahora, para mostrar la imagen, necesitamos ir al archivo CSS, seleccionar el elemento div con un cambio de clase. Y tenemos que establecer la opacidad a uno. Bien, así como se puede ver que la primera imagen de fondo es visible. Y ahora por fin, tenemos que hacer que esta presentación funcione. Así que tenemos que eliminar y agregar el cambio de clase a los elementos div en orden con algunos intervalos. Y tenemos que hacerlo infinito. Así que vamos al archivo JavaScript y seleccionemos todos los elementos div. Voy a crear nueva variable, llamémosla d, dz. Y luego para poder seleccionar todos los elementos div, voy a usar el selector de consultas, todo método. Tenemos que especificar aquí, la presentación de diapositivas de clase, seguida del nombre de la etiqueta D. Bien, continuación voy a crear una nueva función llamada slideshow, en la que tenemos que usar uno de los métodos incorporados llamado set interval, nos permite ejecutar la función y otra vez con algunos Este método toma dos argumentos. La primera es la función callback, que se ejecutará con intervalos En cuanto al segundo argumento va a ser el propio intervalo. Y debería expresarse en milisegundos. Así que vamos a insertar tu función de flecha. Y como la cantidad de tiempo de la integral, vamos a insertar 1,000 milisegundos. Eventualmente lo cambiaremos y lo aumentaremos. Entonces ahora necesitamos seleccionar el desarrollo que tiene el cambio de clase. Entonces necesitamos eliminar la clase de este elemento y agregarla al siguiente elemento div. Así que vamos a crear una nueva variable. Voy a llamarlo div, y después seleccionar desarrollo usando el método QuerySelector Tenemos que especificar aquí la presentación de diapositivas de vidrio seguida del cambio de clase. Entonces, una vez que se selecciona el elemento div con cambio de clase, entonces necesitamos eliminar la clase de este elemento. Así que necesitamos de nuevo la propiedad de lista de clase. Pero en este caso con el método llamado remove, vamos a especificar aquí el cambio de clase. Y por último, tenemos que agregarlo a los siguientes elementos div. Para eso, voy a usar una de las propiedades llamadas next element sibling Necesitamos adjuntarlo a los elementos div Por otra parte, tenemos que usar class least property y necesitamos agregar el cambio de clase. Entonces, para poder ejecutar este código, necesitamos llamar a la función slideshow Bien, así como se puede ver, después de cada segundo, la imagen de fondo está cambiando Una vez que se muestran las cinco imágenes, entonces obtenemos un error y esta presentación deja de funcionar. Ocurre porque una vez que llegamos al último elemento, entonces el motor JavaScript no puede encontrar otro hermano No existe. Entonces, una vez que llegamos a la última imagen de fondo, necesitamos comenzar de nuevo esta presentación de diapositivas desde la primera imagen de fondo. Entonces sigamos adelante y hagamos eso. Necesitamos crear una nueva variable que va a ser el contador. En este caso, voy a usar, vamos a declarar porque su valor va a estar cambiando. Llamemos a esta variable a y por defecto la hagamos igual a uno. Entonces necesitamos aumentar el contador en uno. Y una vez que es mayor que la longitud de los elementos div, significa que necesitamos comenzar nuevo esta presentación de diapositivas con la primera imagen Y tenemos que hacer un igual a uno otra vez. Entonces, para aumentar a en uno, necesitamos usar el operador de incremento, que se expresa por signos dobles más Entonces necesitamos crear sentencias IF en las que necesitamos comparar si a es menor que dos la longitud de los elementos div. Entonces si es cierto, entonces significa que quedan otros desarrollos. Entonces tenemos que ejecutar esta línea de código. Si es falso, entonces significa que ya no tenemos otro hermano Y tenemos que iniciar la presentación de diapositivas con la primera imagen. Entonces necesitamos la declaración Q else donde tenemos que acceder al primer desarrollo y tenemos que agregarle el cambio de clase. Y también necesitamos hacer un igual a uno. Entonces, para seleccionar los primeros elementos div, necesitamos desarrolladores seguidos del índice número cero Entonces necesitamos de nuevo propiedad de lista de clases con el método add. Y tenemos que especificar tu cambio de clase. Además de eso, necesitamos hacer un igual a uno. Así que ahora puedes ver que la presentación de diapositivas se está ejecutando infinitamente sin ningún error Y necesitamos crear algún efecto de desvanecimiento para eso. Vamos a usar la transición. Vamos a asignar a la opacidad y la duración de 1 s. Así que ahora todo funciona a la perfección Lo único que voy a hacer es aumentar la cantidad del intervalo. Hagámoslo 20 s en lugar de uno. Y también aumentó la duración de la transición. Que sea 5 s. Bien, entonces eso es todo. Esta presentación de diapositivas se crea, funciona bien. Entonces, sigamos adelante. 35. Proyecto 4 - Crea y personaliza el cubo: Muy bien, así que una vez que hayamos terminado con esta presentación de diapositivas ahora tenemos que seguir adelante y encargarnos de la última parte de la landing page, que va a vencer a esta caja de iPhone Voy a llamarlo el cubo. En realidad en matemáticas reales se llama cuboide, pero por simplicidad, voy a llamarlo solo el Entonces, como puedes ver, tiene una forma 3D. Por defecto, está rotando. Abajo. Tenemos controladores. Una vez que pasemos el cursor sobre ellos, entonces el cubo se detendrá Y luego podemos girarlo usando esos controladores en diferentes lados. Sentémonos a lo que vamos a hacer. Todas esas cosas se crearán usando CSS y JavaScript puros. En primer lugar, sigamos adelante y creamos un marcado HTML. Tenemos que escribirlo antes la pancarta porque se va a colocar en el lado izquierdo del préstamo. En primer lugar, vamos a seguir adelante y crear nuevos comentarios, cubo y fuera de cubo. Después abre los elementos, que va a ser el envoltorio. Entonces voy a asignarle envoltorio de cubo de clase. A continuación necesitamos otro div, que va a ser el propio cubo. Después de eso, voy a crear otro elemento div, que va a ser la parte frontal. E incluirá una imagen del iPhone 12. Así que insertemos su imagen y seleccionemos iPhone dot PNG de la carpeta images. A continuación, necesitamos crear una parte trasera. Así que vamos a abrir otra etiqueta div con la parte posterior de la clase. En la parte trasera tendremos un icono de la manzana. Así que vamos a insertar su elemento ojo con una clase es FAB, FA, manzana. Bien, así que eso es todo sobre el marcado del cubo. Nosotros nos encargaremos de los controles un poco más tarde porque ahora mismo voy a darle estilo al cubo. Sigamos adelante e insertemos sus nuevos comentarios. Cubo y de cubo. Después selecciona el cubo y define su ancho y alto. Voy a establecer ancho para lanzar a ram. En cuanto a la altura, voy a hacerla rampa 55. Y también le voy a asignar un color de fondo temporal. Vamos a hacerlo rojo. Entonces aquí tenemos el fondo rojo. este momento la imagen es demasiado grande, así que sigamos adelante y nos ocupemos de ello. Voy a seleccionar ese primer anverso y establecer su ancho y alto, ambos 200 por ciento. Y luego crea algo de espacio dentro de la parte frontal usando acolchado. Hagámoslo 2.5 rem en los cuatro lados. Después de eso, voy a seleccionar imagen. Definamos su anchura y altura. Voy a ponerles a ambos el 200 por ciento. Y luego también voy a usar pies de objeto con el valor contenido. Bien, entonces ahora la imagen se hizo más pequeña y vemos aquí el fondo rojo del cubo. A continuación voy a encargarme de la parte frontal. Así que sigamos adelante y cambiemos su color de fondo. Vamos a usar tu color F E. A continuación, voy a crear un entorno 3D con el fin de ver mejor cómo se va a construir el cubo. Para crear un entorno 3D, tenemos que usar una de las propiedades llamadas prospectiva, y tenemos que asignarlo al envoltorio de cubos. Entonces, seleccionémoslo y luego usemos la perspectiva con la rampa de valor 100. En general, la perspectiva de propiedad define qué tan lejos está el elemento del usuario. Ahora tenemos que movernos con la parte frontal en un entorno 3D. Y para eso, también necesitamos el espacio para la parte frontal. Y para eso tenemos que usar una de las propiedades llamadas transform style con el valor preserve 3D. Tenemos que asignarlo al cubo. Después de eso, compartirá el entorno 3D con sus elementos hijos. Bien, después de eso, tenemos que mover la parte delantera y un poco al frente Entonces para eso, voy a usar Transform donde traducen la función y como el valor, Let's entity o five ran. Ahora mismo, aquí no hay nada visible, solo tenemos un fondo blanco. Entonces para ver claramente lo que está pasando, voy a rotar el cubo. Vamos a girarlo según el eje y. Y como valor, vamos a insertar, digamos 72 grados. ¿Verdad? Ahora puedes ver claramente la parte frontal del cubo en el espacio 3D. Sigamos adelante y cuidemos el trasero. Voy a fijar su anchura y altura, ambas 200 por ciento. También cambia el color de fondo. Usa aquí el color F, E. Y luego otra vez, necesitamos mover la parte trasera como la parte frontal En este caso, necesitamos traducir función z con el valor menos cinco rondas Así que aquí tenemos la parte trasera, pero su posición no es correcta Tenemos que arreglarlo. Y para eso, fijemos posiciones de ambas partes a absolutas. En realidad, como puedes ver, mayoría de las propiedades y valores son los mismos para ambos lados. Entonces podemos agregar aquí atrás. Después podemos seleccionar la parte frontal por separado. Vamos a asignar propiedades de relleno 2D y transformar. En cuanto a la parte trasera, vamos a dejarte solo transformar propiedad Bien, entonces ahora ambos lados se ven bien. Para poder verlo mejor, voy a inspeccionar la página y usar la pestaña Elementos. Seleccionemos cubo. Luego, abajo, enfoca el valor de la función Rotar. Y luego usando la flecha superior, vamos a cambiar el valor. Entonces se puede ver que el cubo está girando y ambos lados se ven bien. Bien, Antes de pasar a los otros lados, voy a personalizar el icono de abril en la parte trasera En primer lugar, vamos a encargarnos de ello. La posición del icono. Voy a colocarlo en el centro de la parte trasera. Así que sigamos adelante y usemos el centro de clases. En realidad, cambiemos el valor de la función rotate para poder ver el icono. Bueno, vamos a hacerlo 140 grados. Bien, sigamos adelante y diseñemos el icono. Vamos a seleccionarlo. Al principio. Vamos a aumentar el tamaño de la fuente, que sea 12 rima. Después cambia el color. En este caso, voy a usar color primario. Además de eso, usemos sombra de texto. Voy a crear una sombra multinivel. El primero va a ser 0.1 rem dos veces, luego apuntar a RAM. Y el color AAA. En cuanto a la segunda sombra, va a quedar sombra. Entonces vamos a insertar aquí -0.1 gramo dos veces, luego apunta a RAM con el mismo color Entonces el icono está estilizado, pero como puedes ver, tenemos que girarlo 180 grados. Entonces usemos Transformar con la función rotar y y como valor, insertemos tus 180 grados. Eso es lo de la parte trasera. Ahora tenemos que cuidar de los otros lados. A continuación, voy a encargarme de los lados superior e inferior y los crearemos usando pseudo elementos de antes y después En primer lugar, voy a rotar el cubo de una manera diferente para mostrar ambos lados. Entonces cambiemos, rotemos y en, rotemos x como valor positivo. Insertemos aquí 91 grados. Entonces ahora mismo el lado inferior está cerca de nosotros. Y te voy a sacar del lado superior, lo crearé usando el pseudo elemento antes Así que vamos a seleccionar la parte frontal con él antes de los pseudo elementos En primer lugar, definamos el contenido, lo hagamos vacío. Entonces voy a establecer, podemos ocultar ese conjunto de ancho al 100%. En cuanto a la altura, voy a hacer que se dé la vuelta. Y también cambiar el color de fondo. Hágalo F E. En este momento el elemento no es visible. Tenemos que definir su posición. Entonces pongamos su posición a absoluta. Entonces después de eso, defina las propiedades superior e izquierda, hagamos que ambas sean cero. ¿Bien? Como se puede ver, todavía el elemento no es visible. Ocurre porque el entorno 3D no se comparte para el pseudo elemento antes Y para arreglar eso, tenemos que usar de nuevo transform style preserve 3D, y tenemos que asignarlo al elemento padre. Después abajo, gire los elementos según el eje x en -90 grados Ahora el elemento es visible, pero no se coloca del todo correctamente porque se gira de acuerdo con el centro. Es un origen por defecto de la transformación. Entonces tenemos que cambiarlo y hacerlo top. Necesitamos transformar el origen en el valor superior. Bien, así que eso es todo sobre el lado superior. Sigamos adelante y cuidemos el de abajo. En realidad, la mayoría de las propiedades y valores serán los mismos para ambos lados. Entonces voy a agregar aquí después de pseudo elementos Luego seleccionarlo antes de pseudo elementos Coge esas cuatro propiedades y pegarlas aquí. Entonces voy a duplicar este código. Cambiar antes, en después. Entonces necesitamos abajo en lugar de arriba. A continuación, deshagámonos del signo menos desde aquí. Como probablemente transformar origen va a estar abajo. ¿Bien? Entonces, si giramos el cubo, entonces verás que los lados superior e inferior están listos. Sigamos adelante y cuidemos los lados izquierdo y derecho. Voy a crearlos usando antes y después pseudo elementos de la parte trasera Entonces volvamos a rotar el cubo según el eje y. Con el valor -91 grados. Vamos a crear esos lados. De igual manera, comencemos por el lado izquierdo. Voy a crearlo usando el pseudo elemento before. Así que vamos a seleccionar backside con antes pseudo elemento como el contenido Voy a insertar tu iPhone. Después defina ancho y alto. Voy a establecer el ancho para dar la vuelta. En cuanto a la altura, hagámosla al 100%. Entonces cambia el color de fondo, hazlo F. Así que ahora mismo el lado izquierdo no es visible porque de nuevo, necesitamos usar posiciones y la función de rotar. Así que pongamos la posición a absoluta. Después defina las propiedades superior e izquierda. Voy a ponerlos a cero a ambos . Y después de eso, necesitamos transformar con rotar y función con el valor -90 grados. Entonces ahora el elemento es visible, pero como se puede ver, nuevo, tenemos que cambiar el origen de la transformación. Vamos a ponerla a la izquierda. Bien, entonces ahora el elemento está posicionado, y ahora tenemos que cuidar su contenido. Voy a enviar un mensaje de texto iphone. En primer lugar, volvamos a rotar el cubo. Vamos a deshacernos del signo menos de aquí. Y luego seguir adelante y personalizar el texto. Voy a colocarlo en el centro. Para eso, usemos flexbox. Necesitamos display flex. Y para un centrado perfecto, tenemos que usar justify content center, seguido del align items center Después de eso, aumentemos el tamaño de la fuente, hagámoslo a Ram. Además, voy a hacer que el peso de la fuente sea 300, un poco más ligero. Y como el color, usemos tu color EC 1919. Bien, eso es lo del lado izquierdo. Ahora de la misma manera, tenemos que crear el lado derecho, que va a ser similar al izquierdo. Entonces voy a agregar aquí después de pseudo elementos. Después seleccione antes de pseudo elementos por separado. Y agarra esas cuatro líneas de aquí. Después de eso, seleccione después de pseudo elementos e inserte las siguientes propiedades y valores que necesitamos top zero, luego escribe cero Entonces necesitamos transformar rotar y con 90 grados. Y por último necesitamos transformar origen el valor, ¿verdad? Bien, así que eso es todo sobre el cubo. Todos los lados están preparados. Si lo roto de acuerdo a ambas direcciones, entonces verás que se crean todos los sitios. Ahora, voy a deshacerme del color de fondo rojo del cubo. Vamos a quitarlo. Y además de eso, voy a crear una sombra de caja para mostrar los bordes de estos lados Entonces, al principio, crea una sombra para los lados frontal y posterior. Va a ser sombra multinivel. En primer lugar, necesitamos aquí el recuadro va a ser sombra interior con los valores 0.1 RAM tres veces, y el color D, D, D. Entonces copia este valor, pegarlo aquí E inserte el signo menos, donde los dos primeros valores. Necesitamos la misma sombra para los pseudo elementos antes y después también Así que tomemos este código y peguemos para ellos. ¿Bien? Si volvemos a girar el cubo, verás que todo queda bien. ¿Verdad? Siguiente Voy a personalizar los controles y también hacer que el cubo funcione 36. Proyecto 4 - Crear y personalizar controladores de cubo: Bien, una vez que creamos los clientes finales, el cubo, ahora voy a encargarme de los controles Sigamos adelante y creamos un marcado HTML. Los controles serán parte del envoltorio de cubos, por lo que necesitamos insertarlo dentro de él. Vamos a crear tus comentarios, controles de controles. Luego abre los elementos div con los controles de clase. Entonces, en general, tendremos seis controles diferentes. Serán representados por los iconos Font Awesome, y se envolverán con los elementos de enlace. Así que sigamos adelante y abramos la etiqueta de enlace. Entonces instituto IS elemento con una clase es FAS, una flecha hacia arriba. Además de eso, voy a agregarle otra clase. En realidad, rotaremos el cubo según la dirección x con este icono Entonces voy a insertar tu control X superior. Entonces como dijimos, vamos a tener seis flechas. Así que vamos a duplicar el elemento link cinco veces y luego cambiar los nombres de las clases. El segundo va a ser una flecha hacia abajo de lo que necesitamos aquí, abajo X control. El siguiente va a ser la flecha a la izquierda. Izquierda. ¿Por qué controlar de lo que te necesitamos? ¿Flecha derecha y derecha? ¿Por qué controlar? El siguiente debería ser reducido. Control Top Z. Y para el último necesitamos flecha arriba abajo Z control. Bien, entonces aquí tenemos nuestros controles. Sigamos adelante y personalízalos. Voy a insertar aquí nuevos comentarios, controles y de controles. A continuación, seleccione elementos div envoltorio. Entonces antes que nada, voy a encargarme de la posición de los controles. Fijemos su posición a absoluta. En realidad, los controles deben posicionarse de acuerdo con el elemento padre, que en este caso es un envoltorio de cubo. Puede pensar que necesitamos una posición relativa para el envoltorio, pero por eso, es un elemento flexible. Como recuerda el elemento de sección tiene display flex, entonces ya no necesitamos posición relativa para el envoltorio de cubo porque puedes mostrarnos que se posicionará de acuerdo con el envoltorio de cubo. Así que definamos las posiciones inferior e izquierda. Voy a poner fondo a -15 RAM. En cuanto a la izquierda, va a ser del 50%. Y luego para enviar a los elementos, necesitamos mover ocho al lado izquierdo en -50 por ciento Entonces necesitamos aquí transformar, traducir X con el valor -50 por ciento Por lo que el envoltorio de los controles se posiciona correctamente. Vamos a seguir adelante y personalizarlo. Voy a definirlo dentro de la altura. Pongamos ambos a diez RAM y también cambiemos el color de fondo. En este caso, voy a usar valor RGBA con el color negro y con la opacidad 0.9 Después de eso, voy a hacer el fondo su alrededor y también crear el borde. Entonces necesitamos aquí radio fronterizo con un valor del 50 por ciento Y luego crear borde con los valores una RAM, sólida. Y como el color, voy a usar de nuevo, valor RGBA, el color negro y la opacidad 0.8 Bien, sentémonos sobre el envoltorio. En realidad, necesitamos algo de espacio entre el cubo y los controles. Así que sigamos adelante y movamos el cubo hacia arriba. Voy a asignar a cada posición relativa. Y luego establecer la posición superior a menos dos RAM. Entonces, en caso de la posición relativa, el elemento se moverá hacia arriba por dos rampas desde su posición actual. Bien, sigamos adelante y personalicemos las flechas. En primer lugar, voy a encargarme de sus posiciones. Seleccionemos el elemento de enlace y luego establecemos la posición en absoluto. A continuación, voy a definir la posición para cada flecha por separado. Entonces, sigamos adelante y comencemos con los primeros elementos de enlace. Voy a seleccionarlo usando el enésimo selector hijo. Necesitamos especificar aquí uno para el primer elemento link. Entonces esta flecha se va a colocar en el centro en la parte superior de la envoltura. Así que pongamos la posición superior a cero. Y entonces necesitamos nuevamente la posición izquierda 50%. Y luego transformar traducir x -50%. Bien, Entonces se posiciona la primera flecha, pero como puedes ver ahora mismo, no es del todo visible. Entonces, sigamos adelante y arreglemos ese problema. Voy a seleccionar elementos I. Aumentemos su tamaño de fuente, que sea 1.5 RAM. Después cambia el color. Ves tu color primario. Y además de eso, voy a disminuir la opacidad. Hagámoslo 0.5. Bien, ahora, como pueden ver, se ve mucho mejor. Sigamos adelante y posicionemos la segunda flecha. Se va a colocar en el centro, pero en la parte inferior de la envoltura. Así que vamos a duplicar este código aquí. Cambiar uno en dos. Y también necesitamos aquí posición inferior con el valor cero. Bien, sigamos adelante y posicionemos la tercera flecha. Se va a colocar en el centro, pero en el lado izquierdo de la envoltura. Entonces, seleccionemos el tercer elemento de enlace y luego definamos la posición dura. Que sea 50 por ciento. La posición de la izquierda va a ser cero. Y luego para enviar a los elementos, necesitamos de nuevo transformar. Pero en este caso necesitamos traducir la función acuerdo a la dirección Y con el valor -50% La siguiente flecha se colocará también en el centro, pero en el lado derecho. Así que sigamos adelante y dupliquemos este código. Va a ser cuarto elemento de enlace. Y necesitamos escuchar la posición correcta con el valor cero. ¿Bien? Entonces como se puede ver, cuatro flechas o posición, quedan, sólo dos de ellas. Sigamos adelante y seleccionemos la quinta flecha. En realidad, se va a colocar en medio de esas dos flechas. Entonces necesitamos aquí las posiciones de arriba y derecha, ambas diez por ciento. Entonces necesitamos transformarnos. Pero en este caso, voy a usar la función rotate. Voy a rotar el elemento 45 grados. ¿Bien? Entonces necesitamos posicionar el último icono. Duplicemos este código aquí. Va a ser el sexto ítem. En lugar de arriba y derecha, necesitamos aquí Boltzmann Entonces como puedes ver, las seis flechas están listas, están posicionadas. Lo único que tenemos que hacer es crear un pequeño efecto hover Voy a aumentar la opacidad de los íconos de nuevo a uno Así que vamos a seleccionar los controles. Un hover, seguido de los elementos I. Pongamos la opacidad a uno. Entonces usa transición con los valores opacidad 0.5 s. Bien, veamos, los controles están personalizados y ahora tenemos que hacerlos funcionar. Entonces, sigamos adelante. 37. Proyecto 4 - Hacer trabajo en cubo: Bien, así que todo está listo para comenzar a programar el cubo y los controles En primer lugar, voy a hacer que el cubo gire automáticamente, y luego programaremos los controles. este momento, el cubo se gira con dirección y 91 grados. Entonces voy a comentar esta línea fuera. Siguiente. Vamos al archivo JavaScript e insertemos nuevos comentarios para el cubo. Después selecciona el cubo. Voy a crear una nueva variable. Seleccionemos el cubo usando el método QuerySelector. Necesitamos especificar aquí el nombre de clase q. Así que giraremos el cubo acuerdo con el eje y en un grado Y lo rotaremos con muy pocos intervalos. Quiero decir, solo cien milisegundos. Entonces voy a crear una nueva función. Vamos a llamarlo pose de juego. Vamos a crear una nueva variable y asignada a ella y la función de flecha. Ahora, necesitamos usar un método llamado set interval. Como saben, se necesitan dos argumentos. La primera es una función de devolución de llamada, que se ejecutará con algunos intervalos En cuanto al segundo es la cantidad del intervalo en sí. Entonces como decíamos, el intervalo va a ser de 100 milisegundos. Bien, ahora tenemos que rotar el cubo según el eje y Entonces necesitamos usar la propiedad style. Vamos a adjuntarlo al cubo y va a ser seguido por el transporte. Ahora tenemos que especificar el valor de la función rotate. Como dijimos, necesitamos rotar el cubo un grado después de cada intervalo. Para ello, al principio, voy a crear una nueva variable. Vamos a llamarlo y, y por defecto, establecerlo a cero. A continuación, tenemos que pasar aquí, rotar y función. Entonces después de cada intervalo necesitamos aumentar el valor en uno. Entonces necesitamos aquí el signo de dólar. Entonces necesitamos la variable y. Y para aumentarla en una, tenemos que usar aquí el operador de incremento, que se expresa por signos dobles más Va a ser seguido por grados. ¿Bien? Ahora llamemos a la función. Entonces, como se puede ver, el cubo está rotando. Si inspeccionamos la página y verificamos el cubo en la pestaña de elementos, verá que después de cada cien milisegundos, el valor de la función rotate aumenta en uno este momento, el efecto de rotación no se ve todo bien porque necesitamos usar la transición. Así que vamos a insertar tu transformación y la duración 0.5 s. bien, entonces ahora tenemos un efecto mucho mejor A continuación voy a encargarme de los controles. En realidad, usaremos una técnica similar. Rotaremos el cubo en diferentes direcciones. Pero en este caso, lo haremos una vez que hagamos clic en los controles, sigamos adelante y adjuntemos a cada flecha el oyente de eventos con el evento click Empecemos con el control superior. Necesitamos adjuntar un evento click a los elementos del enlace. En el video anterior, agregamos clases adicionales a los elementos I y en realidad sería mejor si asignamos esas clases para construir elementos de enlace. Porque de nuevo, necesitamos seleccionar elementos de enlace y no el icono. Así que asignemos esas clases para que sean elementos lean. Rápidamente. Voy a recortarlas y pegarlas como los valores de los atributos de clase. Bien, después de eso, seleccionemos los primeros elementos de enlace Voy a utilizar de nuevo, el método selector de consultas. Y luego especificar aquí el control X superior de clase y la parantesis A continuación, voy a adjuntar a él el oyente de eventos Con clic evento Y también tenemos que pasar aquí la función de flecha, que se ejecutará una vez que hagamos clic en el icono. Entonces, una vez que hacemos clic en el control superior, necesitamos rotar el cubo con dirección x Entonces voy a agarrar esta línea de código de aquí. Luego cambia y a x. aquí. No necesitamos signo más más porque vamos a incrementar el valor en uno, sino en 20 grados. Entonces podemos escribir aquí ya sea x es igual a x más 20. En este caso, el valor aumentará en 20 en cada clic. O simplemente podemos escribir aquí Más es igual al signo. Esas expresiones son las mismas. ¿Bien? Además de eso, necesitamos crear una nueva variable. Llamémoslo x y pongámoslo a cero. En realidad, antes de programar todos los controles, voy a pausar esta función por un tiempo para poder ver mejor los resultados. Entonces, si hacemos clic en el control superior entonces el cubo girará con dirección x 20 grados. Bien, sigamos adelante y hagamos lo mismo para el control de fondo. Duplicemos este código. Cambia la parte superior a la inferior. Y también en lugar del signo más necesitamos aquí menos, porque necesitamos rotar el cubo en la dirección opuesta. Bien, así que todo funciona bien. Sigamos adelante y programemos el control izquierdo. Duplicemos este código una vez más. Necesitamos aquí izquierda y. También cambiar la dirección. Necesitamos eje y. Ahora, si hago clic en el control izquierdo entonces el cubo girará. Pero tenemos aquí un pequeño problema si hacemos clic en la flecha izquierda y luego si hacemos clic en el control superior, al principio el cubo obtendrá su posición por defecto y luego girará. No necesitamos eso. Tenemos que mantener la posición anterior del cubo. Y para hacer eso, necesitamos definir las tres direcciones sin importar en qué dirección estemos cambiando. Entonces necesitamos agregar aquí rotar y. insertemos sus grados y. Entonces necesitamos rotar Z. con Z grados En realidad, necesitamos crear una variable para la dirección z Entonces creémoslo y pongámoslo a cero. Bien, agreguemos aquí también la función rotate. Necesitamos rotar x y luego rotar z. ¿Bien? Entonces ahora si comprobamos, verás que todo funciona a la perfección. Bien. Sigamos adelante y nos ocupemos del resto de los controles. Duplicemos este código y cambiemos de izquierda a derecha. Y también en lugar del signo menos aquí, más. Bien, entonces el control correcto funciona bien. Sigamos adelante y programemos esas dos flechas. Duplicemos este código una vez más. Entonces necesitamos aquí arriba Z. así que en este caso necesitamos rotar el cubo dirección z Así que voy a vivir aquí solo y. cuanto a la función rotar Z, necesitamos aquí, z menos es igual a 20. ¿Bien? Entonces este control funciona bien. Sigamos adelante y nos ocupemos del último. Duplicemos este código aquí. Luego cambia de arriba a abajo. Y también en lugar del signo menos, vamos a insertar aquí más. Bien, así que todos los controles funcionaron perfectamente. Casi terminamos con el cubo. Sólo tenemos que agregarle un par de cosas más. Vamos a deshacernos del comentario de aquí. Como ves, transform property tiene solo la función rotate y aquí. Entonces necesitamos agregar aquí otras direcciones también. De lo contrario no funcionará correctamente. Entonces necesitamos aquí rotar x y luego rotar Z. Bien, entonces ahora todo funciona Lo único que voy a hacer es evitar que el cubo gire. Una vez que pasamos el cursor sobre los controles. Para ello, necesitamos crear una nueva variable que tendrá el valor booleano Pongámoslo a verdad. Y luego necesitamos crear una declaración if-else dentro de la función Como condición, voy a insertar tu alberca. Entonces, si es cierto, entonces tenemos que ejecutar esta función. Así que vamos a agarrar este código y pegarlo aquí. Y luego si es false, necesitamos una sentencia else en la que tengamos que dejar ejecutar esta función usando el método clear interval. Entonces, para borrar el intervalo al principio, necesitamos almacenarlo en la variable, y luego tenemos que pasar esta variable a la función integral clara. Así que sigamos adelante y creamos una nueva variable. Tenemos que declararlo sin ningún valor. Entonces almacene, venda función integral en esta variable. Y finalmente, pasarlo a la función integral clara en la declaración else. Entonces ahora mismo todo funciona bien. El cubo está rotando. Pero si cambiamos el valor de la variable de arranque y le asignamos false por defecto, entonces el cubo dejará de girar. Bien, volvamos aquí también. Ahora tenemos que usar el mouse sobre el evento. Sigamos adelante y seleccionemos los controles. Voy a utilizar de nuevo el método QuerySelector. Vamos a especificar aquí los controles de clase y luego adherir el oyente de eventos con mouse sobre evento Así que una vez que pasamos el ratón sobre los controles, entonces tenemos que dejar de rotar. Por lo tanto, tenemos que establecer booleano verdadero, falso. Y también necesitamos volver a llamar a la función para borrar el intervalo y dejar de girar. Entonces ahora si vuelo el cursor sobre los controles, el cubo dejará de girar Pero una vez que salgamos que no va a seguir rotando, así que tenemos que arreglarlo. Duplicemos este código y cambiemos el evento. Necesitamos que salga el ratón. Y también en vez de falso, necesitamos que lo hagas. Bien, entonces ahora todo funciona a la perfección. Lo único que voy a hacer es cambiar el valor de la variable y Hagámoslo 20, porque una vez que recarguemos la página, quiero que el cubo se rote ligeramente en el punto de partida Y además de eso, necesitamos cambiar este valor de CSS por defecto. Así que vamos a deshacernos del comentario de aquí y agregar aquí rotar x y las funciones rotar Z. Tenemos que ponerlos a cero a ambos . En cuanto a la rotación y, va a ser de 20 grados. ¿Bien? Entonces, eso es todo. Todo funciona a la perfección. Y en realidad hemos terminado de trabajar en el cubo. Vamos a seguir adelante y sacarte de la siguiente sección. 38. Proyecto 4 - Crear y personalizar la sección de iPhones: Bien, una vez que hayamos terminado con la primera sección, ahora es el momento de seguir adelante y crear la siguiente Echemos un vistazo a la versión terminada del proyecto. Esta sección va a ser relativamente sencilla. Tendremos un par de elementos como rumbo. Luego las imágenes que cambian flotar con algún efecto de desvanecido Y esos dos botones también con el efecto hover. Bien, entonces eso es todo lo que vamos a crear. Sigamos adelante y comencemos a crear un marcado HTML. Voy a insertar nuevos comentarios, sección dos y sección dos. Y luego abrir elemento de sección con una clase sección dos. A continuación tendremos rumbo. Y en realidad voy a separar nuevo todas las partes de esta sección con comentarios. Entonces, insertemos una enorme sección dos encabezamiento de sección dos encabezado. Y luego abre la etiqueta H1 con una sección de clase dos encabezando con el contenido iPhone 12. Bien, A continuación tendremos las imágenes. Volvamos a insertar nuevos comentarios, sección dos imágenes. Después final de sección a imágenes. Y abra la etiqueta div, que va a ser el wrapper que voy a asignar a la clase iPhones Entonces te voy a insertar para diferir elementos de imagen. Abramos el primero y seleccionemos la imagen. Tenemos carpeta llamada imagenes. Entonces dentro de esa carpeta, tenemos otra carpeta llamada iPhones, donde necesitamos seleccionar iPhones uno, IM2 También voy a asignar al elemento de imagen el atributo class con un valor iPhone IMG one Duplicemos el elemento de imagen y cambiemos el nombre de la imagen. Aquí necesitamos, iPhones a IMG. Y también voy a cambiar el nombre de la clase. Necesitamos aquí, img2. Bien, eso es lo de las imágenes. A continuación, necesitamos crear la última parte de esta sección. Me refiero a los botones. Entonces, vamos a crear nuevos comentarios. Sección dos botones, luego final de sección dos botones. Después abre la etiqueta div, que va a ser la envoltura. Voy a asignarle clase iPhone BTS. Por lo que tendremos dos botones diferentes y serán presentados por los elementos de enlace. Entonces abramos una etiqueta con la clase iPhone btn. Además de eso, necesitamos elemento span para cada botón. Se mostrarán una vez que coloquemos el cursor sobre los botones como contenido, vamos a insertar Aprenderás más que duplicar elementos y cambiar el contenido del elemento span. Necesitamos aquí tienda. Bien, así que eso es todo sobre el marcado HTML. Sigamos adelante y comencemos a escribir algo de CSS. Insertemos tus nuevos comentarios para la sección dos. En primer lugar, voy a definir ancho y alto. Seleccionemos una sección de dos elementos y establecemos el ancho al 100%. En cuanto a la altura, voy a hacerla 120% de la ventana gráfica Además de eso, vamos a crear algo de espacio en la parte superior e inferior dentro de esta sección usando relleno. Vamos a establecerlo en 10% de la ventanilla en la parte superior e inferior y cero en los lados izquierdo y derecho Por lo que la altura de esta sección es 120% de la ventana gráfica. Pero la constante en sí ocupa 100 altura de ventana gráfica. Un acolchado en la parte superior e inferior nos da espacio entre las secciones. Porque la propiedad box-sizing se establece en border-box en estilos comunes Justo después de eso, voy a alinear los elementos usando Flexbox Así que pongamos display a flex. Entonces necesitamos alinear los elementos verticalmente en una columna así que necesitamos cambiar la dirección del flujo. Hagámoslo una Columna. A continuación, voy a alinear los elementos en el centro horizontalmente usando alinear elementos al centro. Por último, para crear algo de espacio alrededor de los elementos flexibles, usemos justificar contenidos con el espacio de valor alrededor. Bien, eso es todo sobre este elemento de sección. Sigamos adelante y personalicemos el encabezado. Vamos a instituir nuevos comentarios. Sección dos rubro. Del rubro de la sección dos. Después selecciona los elementos de encabezado y aumenta el tamaño de fuente, hazlo diez RAM. Entonces voy a hacer la fuente más ligera usando font-weight. Hagámoslo 200. Y también, pongamos el color del texto A negro. Bien, eso es todo sobre el rumbo en este momento, sigamos adelante y cuidemos las imágenes Vamos a insertar nuevos comentarios. Sección dos imágenes. Después, y fuera de la sección dos imágenes. Y seleccione los elementos div wrapper, que tiene la clase iPhones Voy a definir ancho y alto. Vamos a establecer la altura en 60% de la ventanilla. Eso es por el ancho. Voy a hacer que sea el 50% de la ventanilla Necesitamos un ancho de 50 viewport. Bien, Siguiente voy a seleccionar la imagen en sí. Y necesitamos definir la anchura y la altura. En este caso, voy a heredar ambos valores. Entonces necesitamos heredar para ancho y alto. Y también voy a usar object contains. Ahora los tamaños de las imágenes son más pequeños. Y a continuación voy a colocarlos uno encima del otro. Para ello, usemos posición absoluta. Bien, por ahora eso es todo sobre las imágenes. Sigamos adelante y personalicemos los botones. Voy a insertar nuevos comentarios. Sección dos botones. Y de sección dos botones. A continuación, seleccione los elementos div envoltorio. Entonces me voy a alinear. Pero desde que usamos flexbox, entonces necesitamos aquí display flex Después de eso, voy a personalizar el botón en sí. Así que vamos a seleccionarlo. Pero antes de eso, sigamos adelante y ocultemos los elementos span por un tiempo Vamos a seleccionarlos y establecer la propiedad de visualización en none. Y luego empezar a personalizar los botones. En primer lugar, voy a establecer ancho y alto, ambos a seis RAM. Después cambia el fondo. Voy a usar tu gradiente lineal. En primer lugar, definamos la dirección de la transición. Voy a llegar a la derecha. Luego usa el primer color. En este caso, voy a usar valor RGB. Vamos a insertar tus 5013 veces. Y también voy a insertar un valor adicional, 60%, lo que significa que la transición de las personas que llaman comenzará después del 60% del primer color A continuación, voy a insertar el segundo color. Utilice de nuevo el valor RGB. Vamos a insertar aquí dos o tres veces. A continuación, vamos a crear algo de espacio entre los botones y también hacerlos redondeados. Usar margen. Voy a ponerla a cero en la parte superior e inferior, y luego tres rem en los lados izquierdo y derecho. cuanto al radio fronterizo, pongámoslo al 50% Bien, ahora mismo Eso es lo de los botones. A continuación, voy a crear esos marcos dentro de los botones usando los pseudo elementos after Así que vamos a seleccionar iPhone btn, seguido de los pseudo elementos after En primer lugar, necesitamos definir el contenido. Hagámoslo vacío. Entonces voy a definir la anchura y la altura. Vamos a ponerlos a ambos al 50%. Además, voy a configurar display para bloquear para que los elementos sean factibles. Y por último, crear borde con el valor es 0.1 RAM sólida. Y como el color, vamos a usar seis E D a, E6. Entonces aquí tenemos los marcos, pero como pueden ver, necesitamos fijar sus posiciones. Deben colocarse en el centro de los botones. Y también voy a hacerlos ligeramente redondeados. Entonces, antes que nada, usemos border-radius con RAM de valor uno Para centrar los marcos dentro de los botones, necesitamos usar Flexbox Como saben, todos ya hemos creado un centro de clúster con algunas propiedades de flexbox Entonces voy a asignar a ambos botones, centro de clase. Bien, eso es todo sobre el pseudo elemento after. Ahora voy a encargarme de los elementos de este panel. Por defecto, deben estar ocultos y necesitamos mostrarlos una vez que pasemos el cursor sobre los botones Antes de crear el efecto hover, al principio, voy a personalizar los elementos span Así que vamos a hacerlos visibles y deshacernos de la exhibición ninguno de aquí. Entonces, como puedes ver, una vez que los elementos span son visibles, han estropeado el layout Entonces, antes que nada, tenemos que encargarnos de sus posiciones. Voy a colocarlos en la parte superior de los botones. Así que vamos a establecer su posición en absoluto que para posicionar los elementos span de acuerdo a su elemento padre, que es el botón, necesitamos asignar posición relativa al botón Y luego después de eso, voy a establecer la posición superior. Hagámoslo menos tres rampa. Bien, por lo que estos elementos de sartén están posicionados. A continuación, los voy a personalizar. Cambiemos el tamaño de fuente, hazlo a 1.6 RAM. Además, voy a establecer el peso de la fuente en 400. Después transforma el texto en mayúsculas. También crea algo de espacio entre las letras. Hagamos que corra 0.1. Y luego cambiar el color. Voy a usar aquí color primario. Ahora los elementos o personalizados. Pero como veis, tenemos aquí un pequeño tema. El primer elemento span se rompe en dos líneas diferentes. Y para arreglar eso, vamos a definir un ancho con un valor contenido máximo. Entonces en este caso, como sugiere el nombre de este valor, el elemento ocupará el ancho que se requiera para mostrar el contenido del elemento. Bien, entonces los elementos span están personalizados y ahora tenemos que crear un efecto hover En primer lugar, voy a ocultar esos elementos span por defecto. Y para eso, usaré propiedad transform con la función scale. Para ocultar los elementos, necesitamos establecer la escala a cero. Entonces el elemento está oculto. A continuación, seleccionemos un botón con hover, seguido del elemento span Entonces, para que el animal sea visible, necesitamos establecer la escala en uno. Y también vamos a usar la transición con el valor es transformar 0.5 s. ¿Bien? Entonces, una vez que pasemos el cursor sobre los botones, los elementos span aparecerán muy bien Entonces la mayor parte de esta sección está hecha, pero tenemos que hacer un par de cosas más. Necesitamos agregar fondo al encabezado y a las imágenes. Y también necesitamos crear otro efecto de fila completa para las imágenes. Sigamos adelante y comencemos con el fondo del encabezado que se va a crear usando antes pseudo elemento Entonces sigamos adelante y seleccionémoslo. En primer lugar, necesitamos definir el contenido. Hagámoslo vacío. Y luego definir ancho y alto. Voy a hacer que el ancho del fondo sea 130%. Para la altura, hagámoslo 30 de ancho de la ventanilla. Además de eso, necesitamos fondo con función de gradiente lineal. Voy a insertar tus dos colores. El primero va a ser el color primario. Para el segundo va a ser de color blanco. Entonces en estos momentos el elemento no es visible. Tenemos que definir su posición. Entonces, pongámoslo en absoluto. Además de eso, necesitamos posicionar relativo para el encabezado porque es un elemento padre y necesitamos posicionar fondo de acuerdo con el elemento padre. Entonces aquí tenemos los antecedentes. A continuación voy a definir las propiedades superior e izquierda. Pongamos a ambos a cero. Además de eso, necesitamos sesgar el elemento con dirección x Entonces usemos Transformar, entonces la función llamada skew X. Y como valor voy a insertar aquí -50 grados Entonces ahora el fondo se ve mucho mejor, pero aún así necesitamos agregarle un par de estilos más. Ahora mismo. Está sesgada según centro, pues como se sabe por defecto el origen de la transformación es centro En este caso, necesitamos cambiarlo y hacer un top izquierdo. Así que sigamos adelante y fijemos transformar origen en la parte superior izquierda. Por lo que el fondo se posiciona correctamente. Pero tenemos aquí un pequeño tema. No habían terminado detrás del fondo. Y para arreglarlo, usemos la propiedad z-index Voy a ponerla en valor inferior a cero. Entonces hagámoslo menos uno. Y además de eso, voy a hacer las esquinas del fondo alrededor usando border-radius con el valor one rep. Bien, veamos los antecedentes Antes de pasar a las imágenes, quiero aumentar el espacio entre el encabezado y las imágenes. Entonces se le asigna, margen inferior con el valor cinco corrió. ¿Verdad? Así que ahora podemos encargarnos de las imágenes. En primer lugar, voy a crear el fondo. Voy a usar de nuevo degradado lineal con dos colores diferentes. El primero va a ser color primario. En cuanto al segundo, debe ser de color blanco. Y luego usar border-radius con valor 0.5 despotricar. Bien, entonces aquí tenemos el fondo y lo único que tenemos que hacer es crear un efecto hover Por defecto, voy a ocultar la segunda imagen y mostrarla en hover Entonces sigamos adelante y ocultemos esta segunda imagen. Vamos a seleccionarlo y establecer la opacidad a cero. Ahora necesitamos crear un efecto hover. Seleccionemos los iPhones envoltorios con hover, seguido de la primera imagen Pongamos la opacidad a cero. Entonces voy a duplicar este código. Necesitamos aquí G2 y la opacidad. Y por último, usa transición con los valores opacidad 3 s. Así que ahora si pasamos el cursor sobre las imágenes, verás que todo funciona perfectamente Con esta segunda sección, ya terminamos. Sigamos adelante y nos ocupemos del siguiente. 39. Proyecto 4 - Sección de creación y estilo de MacBook - Parte 1: Muy bien, así que una vez que hayamos terminado con la segunda sección ahora es el momento de seguir adelante y empezar a trabajar en la siguiente sección, que va a ser la sección de MacBook En primer lugar, echemos un vistazo a los proyectos terminados y veamos cómo es esta sección. Entonces, una vez que nos desplazemos hacia abajo en la página se abrirá el MacBook, aparecerá el logotipo y la barra de progreso. Después de eso, el magma se encenderá y algunos contenidos se mostrarán Entonces veamos qué vamos a crear. Sigamos adelante y comencemos con el marcado HTML. Voy a insertar nuevos comentarios para la Sección tres. Después abre los elementos de sección con la clase sección tres. Este elemento de sección constará de dos partes principales. Tendremos el encabezado y los contenidos, que a su vez incluirán un par de partes distintas. Entonces, insertemos sus nuevos comentarios para el encabezado de la Sección tres. Después abre la etiqueta de encabezado H1 con la sección de clase tres rumbo. Y como el contenido, vamos a insertar tu MacBook Air. A continuación necesitamos crear el contenido. Entonces, insertemos nuevos comentarios. Contenido de la sección tres del contenido de la Sección tres. Después abre la etiqueta div con una clase sección tres contenido. En esta parte, tendremos imágenes. Estoy en las imágenes de las partes superior e inferior de la MacBook. Inicialmente era una imagen y la he separado en dos partes para crear un efecto de apertura de MacBook. Vamos a insertar nuevos comentarios. Imágenes de la sección tres. Que al final de las imágenes de la Sección tres. Voy a abrir etiqueta de imagen y luego especificar aquí la parte de la imagen. Contamos con carpeta Imágenes. Entonces tenemos que seleccionar la carpeta MacBook y la imagen MacBook screen dot PNG. Además de eso, vamos a usar atributo de clase con un valor MacBook IMG uno Duplicemos esta línea de código y cambiemos el nombre de la imagen que necesitamos aquí teclado múltiple, lote PNG como nombre de clase pública. Va a ser MacBook img2. Bien, a continuación voy a crear tu logo y la barra de progreso de carga. Entonces instituyamos nuevos comentarios. Sección tres cargando. Después final de la Sección tres cargando. Entonces instituye la etiqueta div con un envoltorio de carga de clases. A continuación, voy a crear otra etiqueta div. Con una carga de clase. Consistirá en dos elementos diferentes. El primero va a ser el logo. Estoy en la Fuente, Icono Impresionante, eso está abierto. I elemento con una clase es FAB, FA, manzana. En cuanto al segundo elemento va a ser div, que será la barra de progreso. Bien, después de eso, voy a crear la última parte del contenido va a ser Sección tres info Vamos a insertar tus comentarios. Entonces voy a abrir la etiqueta div, que va a ser el wrapper. Vamos a asignar a su clase Macbook info. Dentro de ese elemento, tendremos tres elementos diferentes. Me refiero al párrafo del encabezado y a la parte inferior. Abramos la etiqueta de encabezado H2 con un encabezado de clase MacBook Info como contenido. Vamos a insertar aquí la velocidad de la luz. A continuación, voy a abrir la etiqueta P con un precio de clase MacBook como contenido. Vamos a insertar aquí a partir de $999. Después de eso, necesitamos crear botón. Vamos a asignarle clase MacBook, btn, y luego interferir a estas alturas Bien, entonces se crea el marcado HTML y ahora tenemos que escribir algo Sigamos adelante e insertemos sus nuevos comentarios para la Sección tres. Después voy a seleccionar elementos de sección. Y antes que nada, definamos podemos escondernos, voy a ponerles a ambos 200 por ciento, y también cambiar el color de fondo. Vamos a ponerla en negro. Bien, Siguiente, voy a alinear elementos en el centro usando Flexbox Vamos a usar cluster center, que hemos preparado en los estilos comunes y asignarlo al elemento section. Además de eso, tenemos que cambiar la dirección para alinear los elementos verticalmente en una columna. Así que vamos a establecer la dirección flex para llamarlos. Por último, voy a crear un poco de espacio en la parte superior e inferior dentro de esta sección. Vamos a usar relleno. Colóquelo en 15 RAM en la parte superior e inferior y cero en los lados izquierdo y derecho. Bien, eso es todo sobre este elemento de sección. Sigamos adelante y personalicemos el encabezado, que en este momento no es visible porque el fondo es negro. Entonces, insertemos sus nuevos comentarios, encabezamiento de la sección tres. Fin del epígrafe de la Sección tres. A continuación, seleccione este elemento de sección. En primer lugar, voy a aumentar el tamaño de la fuente. Hagámoslo diez RAM. Entonces voy a hacer que la fuente sea más ligera. Vamos a establecer el peso de la fuente 200. También cambia el color. Voy a usar tu color primario. Y finalmente, vamos a crear algo de espacio en la parte inferior usando margen inferior 15 run. Bien, veamos sobre el rumbo. Siguiente. Yo voy a encargarme del contenido. Echemos un vistazo al proyecto terminado. Entonces al principio voy a personalizar el MacBook así sin ningún efecto de apertura y carga, agregaremos la imagen de fondo al envoltorio de carga. Y además personalizaremos la info del MacBook. En primer lugar, voy a disminuir probablemente el tamaño de las imágenes del MacBook. Insertemos sus nuevos comentarios para el contenido de la sección. Después voy a seleccionar el contenido de la Sección tres y establecer su ancho en 80 por ciento. A continuación, voy a instituir nuevos comentarios para las imágenes. Necesitamos las imágenes de la Sección tres de las imágenes de la Sección tres. Entonces en este caso, quiero que la imagen herede el ancho del elemento padre Así que vamos a Instituto con heredar. Entonces ahora como puedes ver, la MacBook es más pequeña. A continuación, voy a alinear elementos del contenido usando Flexbox Agreguemos un centro de clase al contenido y también cambiemos la dirección, hagamos que sea color. Además de eso, voy a usar tu propiedad llamada perspectiva, porque eventualmente crearemos algunos efectos 3D. Es decir, abriremos Mac book en un entorno 3D. Voy a establecer perspectiva 2000 corrió. Bien. A continuación voy a agregar el fondo al wrapper de carga, pero antes de eso, necesitamos alimentarlo a la pantalla. Entonces, insertemos nuevos comentarios para la Sección tres, cargando. Luego selecciona envoltorio y establece su posición en absoluto. Entonces para posicionarlo de acuerdo a su elemento padre, pongamos la posición a relativa para los contenidos de esta sección. A continuación, voy a establecer el ancho y alto del envoltorio. Vamos a establecer el ancho a 60%. En cuanto a la altura, hagámosla 85%. Elegí esos valores manualmente con el fin ajustar el envoltorio de carga a la pantalla de la MacBook, utilizo para tus valores porcentuales con el fin de hacer que la imagen de fondo responda a diferentes tamaños de pantalla. Vamos a establecer una imagen como fondo. En primer lugar, voy a usar gradiente lineal. Vamos a insertar aquí el valor RGBA. Me refiero al color blanco y establecí la opacidad a 0.4. Entonces usa aquí el mismo color. Después de eso, voy a definir el camino de la imagen. Tenemos carpeta de imágenes que otra carpeta, MacBook, y luego seleccionamos MacBook one desktop dot PNG. Además de eso, voy a definir el centro de posición. Y también necesitamos aquí, no repita. Bien, así que aquí tenemos la imagen de fondo, pero ahora mismo no se ajusta a la pantalla porque tenemos algo de contenido abajo. Voy a colocarlo en el centro. Entonces instituyamos nuevos comentarios. Necesitamos secciones que informamos que al final de la sección tres información y seleccionamos información de MacBook. Voy a poner su posición a absoluta. Entonces ahora consideremos que tenemos unos resultados mucho mejores, pero aún así necesitamos ocultar esta pequeña parte de la imagen de fondo. Y también necesitamos moverlo ligeramente hacia arriba para ocultar la parte inferior de la imagen. Voy a colocarlo detrás de la pantalla. Y para eso, usemos la propiedad z-index. Voy a ponerla en valor inferior a cero. Hagámoslo menos uno. A continuación, voy a mover la imagen un poco hacia arriba usando la posición superior. En general, cuando se utiliza posición absoluta, las posiciones superior e izquierda se establecen en cero por defecto. Pero en este caso el envoltorio de carga es un artículo flexible. Se centra usando Flexbox y así se cambia la posición y la parte superior ya no es igual a cero Entonces, sigamos adelante y fijemos la posición superior en 6%. Se moverá los elementos un poco hacia arriba. Bien, veamos, el fondo se posiciona correctamente. A continuación, voy a personalizar la información del MacBook 40. Proyecto 4 - Sección de creación y estilo de MacBook - Parte 2: Bien, así que ahora tenemos que darles estilo a la información de MacBook, pero antes de eso voy a esconder el logo por un tiempo. Así que vamos a seleccionar cargando y asignado para mostrar ninguno. Bien, a continuación voy a encargarme de la info de MacBook. Voy a definir el ancho. Vamos a ponerla a siete para correr. Y también voy a colocar elementos en el centro usando text-align Bien, siguiente, sigamos adelante y diseñemos el rumbo. Seleccionemos el encabezado Información de MacBook. En primer lugar, voy a aumentar el tamaño de la fuente. Hagámoslo seis RAM. Entonces voy a hacer la fuente un poco más ligera. Así que vamos a establecer la forma de fuente a 400 y también cambiar el color. En este caso, voy a usar columna primaria. Entonces el rumbo, se ve bien, pero creo que no es del todo visible. Entonces voy a aumentar ligeramente la opacidad de los colores del degradado lineal En este momento son 0.4. Entonces vamos a aumentarlos y hacerlos 0.6. Bien, ahora creo que es mejor. Pasemos al párrafo. Seleccionemos el precio de MacBook. Después aumenta el tamaño de la fuente, hazlo 2.5 rem. Además, voy a hacer que la fuente sea más ligera. Vamos a establecer el peso de la fuente en 200. Y además de eso, voy a crear algo de espacio en la parte superior e inferior usando margen. Vamos a ponerlo en tres rem en la parte superior e inferior y cero en los lados izquierdo y derecho. Bien, eso es lo del párrafo. Vamos a seguir adelante y personalizarlo botón. Voy a seleccionar MacBook BTN. Vamos a establecer el ancho en 25 RAM. Entonces voy a definir la altura. Hagámoslo cinco rem. A continuación, voy a cambiar el fondo. Vamos a usar la imagen de fondo y luego función de degradado lineal con dos colores diferentes. El primero va a ser D, D, D. Estoy en el gris claro. En cuanto al segundo va a ser el color blanco. Siguiente Voy a deshacerme de la frontera por defecto. Pongamos frontera a ninguno. Además, voy a hacer redondear las esquinas del botón usando border-radius Valoramos 0.5 rem. Además de eso, usemos box-shadow. Voy a usar sombra de caja multinivel. El primero va a ser 0.1 round en tres ocasiones. Y el color blanco. En cuanto a la segunda, va a ser la misma sombra pero del lado izquierdo. Entonces necesitamos aquí -0.1 habitación dos veces, luego 0.1 RAM, y el mismo color blanco Bien, Así que se considera botón se ve mucho mejor, pero voy a agregarle un par de estilos más. Así que vamos a definir el tamaño de fuente, que sea 1.5 RAM. Entonces voy a establecer font-weight en 500. También crea algo de espacio entre las letras. Hagamos que apunte a RAM. También cambia el color del texto. Vamos a usar aquí color primario. Y luego finalmente, cambia el tipo de lo más grueso, hazlo señalar. Bien, veamos sobre la información de MacBook. Está personalizado y ahora voy a encargarme de la parte de carga. Ahora mismo el icono de Apple está oculto, así que hagámoslo visible. Me voy a deshacer de mostrar ninguno de aquí. Después establece ancho y alto, ambos 200 por ciento. Siguiente Voy a encargarme de su posición. Fijemos la posición a absoluta. Y luego definir las propiedades superior e izquierda. Voy a ponerlos a cero a ambos . Además de eso, vamos a cambiar el color de fondo. Voy a hacerlo negro. Así que se puede ver que necesitamos escondernos en la información de MacBook. Voy a hacer eso usando la opacidad. Vamos a ponerla a cero. Bien, sigamos adelante y personalicemos el logotipo. Seleccione el icono Font Awesome. Aumentemos su tamaño de fuente, que sea diez RAM. Y también cambiar el color. Hagámoslo blanco. Entonces aquí tenemos el logo, pero necesitamos fijar su posición. Voy a colocar el logo y también la barra de progreso en el centro. Para eso, voy a agregar un centro de clúster a la carga. Y también tenemos que cambiar la dirección. Hagámoslo columna porque necesitamos colocar los elementos verticalmente. Nicole. Bien, vamos a encargarnos de la barra de progreso. En este momento no es visible porque solo tenemos aquí el elemento div vacío. Entonces sigamos adelante y seleccionémoslo. Y antes que nada, Definir su anchura y altura. Voy a configurar con 222 RAM. En cuanto a la altura, hagamos que sea 0.3 RAM. Y también cambia el color de fondo, hazlo 888. Entonces ahora la barra de progreso es factible, pero se coloca demasiado cerca del logotipo. Sigamos adelante y arreglemos eso usando margen. Voy a poner margen de fondo a rampa. Bien, así que lo único que voy a hacer con una barra de progreso es hacerla redondeada Entonces usemos radio de borde con el valor de cinco rem. Bien, eso es todo sobre la barra de progreso, como recuerdas eventualmente, cuando nos desplazamos hacia abajo en la página y se abra el MacBook, la barra de progreso debería sentir que vamos a crear este efecto usando los pseudo elementos after Así que vamos a seleccionarlo. En primer lugar, definir el contenido. Tenemos que hacerlo vacío. A continuación voy a establecer posición en absoluto. Entonces para posicionar el elemento de acuerdo a su padre, vamos a asignar a la barra de progreso posición relativa. Y luego agregar algunos estilos más a los pseudo elementos after Voy a definir propiedades superiores e izquierdas. Pongamos a ambos a cero. A continuación, voy a definir el ancho y lo voy a hacer del 50 por ciento por un tiempo Eventualmente, será cero y aumentará una vez que nos desplazemos hacia abajo y aparecerá la barra de progreso. Después de eso, pongamos alto 200 por ciento y también cambiemos el color de fondo. Hazlo blanco. Entonces todo está listo. Y ahora tenemos que agregar algunos efectos a la MacBook. Pasemos al archivo Java e insertemos sus nuevos comentarios, sección tres. Y la sección tres. Entonces necesitamos crear efectos y mostrarlos una vez que nos desplazamos hacia abajo por la página hasta la sección tres. Por lo que vamos a utilizar un scroll eventos. Y además de eso, voy a agregar una nueva clase. Es el contenido de la Sección Tres. Y luego usando esa nueva clase, definiremos diferentes estilos CSS. En primer lugar, seleccionemos los contenidos de la Sección tres. Voy a crear una nueva variable y luego seleccionar estos elementos usando el método QuerySelector Necesitamos especificar aquí el nombre de la clase, el contenido de la sección tres. Después de eso, voy a adjuntar al oyente de eventos de objeto de ventana con evento scroll En realidad ventana es el objeto global. Vamos a especificar aquí desplazan eventos y también pasan aquí la función flecha, que se ejecutará una vez que nos desplazemos hacia abajo por la página. Después de eso, necesitamos crear declaraciones IF en las que tenemos que definir si nos desplazamos hacia abajo a esta sección tres contenidos no están en la condición de la sentencia if. Usaremos un par de propiedades diferentes. De un vistazo. Puede parecer un poco difícil, pero voy a tratar de explicarlo. Entonces la primera propiedad que voy a usar se llama página Y offset. Tenemos que adjuntarlo al objeto de ventana. Esta propiedad devuelve los píxeles. El documento actual se ha desplazado desde el borde superior de la ventana En otras palabras, es la longitud de la parte de la página web que se desplazó hacia arriba. A continuación, necesitamos usar otra propiedad, que se llama una altura interna. Esta propiedad devuelve la altura de la ventana gráfica de la ventana Y necesitamos agregar esta propiedad al offset de página. Por lo que esta expresión nos dará la distancia total desde el borde superior de la página web. Quiero decir, la parte que se desplazó hacia arriba más la altura de la ventana gráfica Necesitamos comparar esta distancia con la posición de este contenido de la sección tres para averiguar si nos desplazamos hacia abajo hasta la parte necesaria de la página web o no. Entonces necesitamos aquí mayor que o igual signo. Y ahora necesitamos usar otra propiedad que se llama offset top. Pero en este caso, necesitamos aquí compensar la parte superior de la sección tres contenidos. Entonces esta propiedad nos da la posición de los elementos en píxeles. Es decir, mide la distancia desde el borde superior de la página web. Entonces, si esta condición es verdadera, entonces significa que nos desplazamos hacia abajo hasta esta sección tres de contenido. Pero en realidad, eso no es suficiente porque quiero iniciar efectos cuando nos desplazamos hacia abajo y llegamos a la mitad del contenido de la sección tres. Y para definir ese punto, voy a usar otra propiedad llamada offset height. Nos da la altura del elemento en píxeles. Y tenemos que dividirlo por dos Bien, Entonces si esta condición es cierta, entonces significa que necesitamos mostrar los efectos. Antes de eso voy a probar si esto funciona bien. Entonces voy a correr por la consola, garabatos. Inspeccionemos la página y cambiemos a la pestaña de la consola. Entonces, una vez que nos desplazemos hacia abajo y lleguemos a la mitad de esta sección por contenido, entonces nos garabatearemos en la consola Bien, todo funciona bien. Ahora necesitamos agregar una nueva clase al contenido de la sección tres. Vamos a usar aquí una de las propiedades llamadas lista de clases. Como saben, nos da todas las clases que tiene el elemento. Y además nos permite acceder a los diferentes métodos como add, remove, toggle que necesitamos aquí en. Y voy a especificar aquí el cambio de nombre de clase. Bien, eso es todo sobre el JavaScript. Volvamos a CSS. Entonces tenemos que hacer un par de cosas. En primer lugar, voy a ocultar el envoltorio de carga. Así que vamos a asignarle opacidad cero. A continuación tenemos que cerrar la MacBook. Para eso, voy a rotar la primera imagen, que es la pantalla. Entonces, seleccionemos la primera imagen y luego usemos Transformar, Rotar. Necesitamos girarlo de acuerdo al eje x. Como el valor, voy a insertar tus -80 grados. Entonces como puedes ver, la imagen se gira, pero claro que eso no es lo que queremos. Como saben, por defecto, el elemento se transforma desde su centro. Pero en nuestro caso, necesitamos transformarlo desde abajo. Entonces, sigamos adelante y cambiemos el origen de la transformación. Que sea Watson. Bien, entonces ahora la MacBook está parcialmente cerrada y tenemos que abrirla una vez que nos desplazemos hacia abajo. Y ese es el momento en el que tenemos que usar el cambio de clase. Seleccionemos MacBook IMG uno. A continuación, necesitamos transformar, rotar x, y tenemos que ponerla a cero. Además de eso, nos permite hacer la transición con transform y con la duración 3 s. así que si me desplazo hacia abajo y llego a la sección tres de contenido que abra el MacBook. Bien, así que eso es todo sobre el primer efecto. Ahora tenemos que mostrar el logo y la barra de progreso. Vamos a usar de nuevo el cambio de clase, seguido del rapero de carga. Ahora mismo su opacidad es cero y tenemos que ponerla en uno A continuación, necesitamos usar transición con los valores opacidad que la duración 1 s. Y además de eso, necesitamos escuchar un poco de tiempo de retraso porque al principio la MacBook debería abrirse y tenemos que esperarla Entonces agreguemos aquí 2 s. bien, así que una vez que nos desplazemos hacia abajo, entonces se abrirá la MacBook. Y después de eso, se mostrará el logotipo y la barra de progreso. En este momento la barra de progreso no funciona. La mitad de su ancho es de campo. Entonces, sigamos adelante y nos ocupemos de eso. Voy a hacer que su ancho sea cero. Entonces usa de nuevo el cambio de clase, seguido de los pseudo elementos after Entonces una vez que aparece la barra de progreso, entonces tenemos que aumentar el ancho del pseudo elemento after Vamos a establecerlo al 100% y luego usar la transición. Tenemos que lidiar con que la duración de un segundo. Y nuevamente necesitamos algún tiempo de retraso. Vamos a ponerla en 3 s. Así que ahora si me desplazo hacia abajo, verás que todo funciona perfectamente. Bien. Después de eso, necesitamos ocultar el logotipo y la barra de progreso y mostrar la información del MacBook. Entonces usemos de nuevo el cambio. Entonces. Seleccione la carga y establezca la opacidad a cero. Usa de nuevo la transición 1 s y luego el tiempo de retardo 5 s. Bien, así que una vez que nos desplazemos hacia abajo, entonces el logo y la barra de progreso se ocultarán. Se mostrará la imagen de fondo. Después de eso, necesitamos mostrar la información de MacBook. Entonces usemos de nuevo el cambio. Con información de MacBook. Tenemos que establecer la opacidad a uno. Y nuevamente, tenemos que usar la opacidad de transición 1 s y el tiempo de retardo 6 s. ¿Bien? Así es que se puede ver que todo funciona perfección y ya casi terminamos con esta sección. Lo único que voy a hacer es cambiar la forma del fondo de esta sección usando la propiedad de ruta de clip. En realidad, ya he preparado los valores, así que los voy a copiar de ese archivo de texto y lo voy a adjuntar a esta conferencia. Así que puedes descargarla y copiar los valores están justo en forma manual. Bien, así que finalmente terminamos con esta sección. Ojalá fuera interesante porque hemos creado un par de efectos agradables y geniales. Sigamos adelante y nos ocupemos de la siguiente sección. 41. Proyecto 4 - Sección de creación y estilo de relojes: Bien, así que terminamos trabajar en la sección MacBooks, y ahora es el momento de encargarnos de la siguiente sección, que va a ser la sección del Apple Watch Echemos un vistazo al proyecto terminado. Entonces aquí tenemos los relojes Apple. Es decir, el cliente puede probar diferentes casos y bandas usando esos controles fin de elegir la combinación favorita creará estos efectos usando CSS y JavaScript. En primer lugar, tenemos que comenzar con el marcado HTML. Entonces, sigamos adelante e insertemos sus nuevos comentarios para la Sección cuatro. Ese elemento de sección abierta con una sección de clase cuatro. A continuación, necesitamos crear una etiqueta div, que va a ser el envoltorio de los relojes. Estoy en las bandas y los casos. Pero antes de eso, insertemos nuevos comentarios. Sección para relojes y sección off para relojes. Y luego abre la etiqueta div con una clase de relojes. Este elemento incluirá dos partes distintas, me refiero a las bandas y los casos. Insertemos nuevos comentarios para las bandas de reloj. Después abre la etiqueta div, que envolverá las imágenes de las bandas. Entonces voy a asignarle pantalones de reloj de clase. Después abre la etiqueta de imagen y selecciona la imagen. Necesitamos imágenes de carpetas. Después otra carpeta relojes. Y tenemos que seleccionar banda de reloj uno JPG. Además de eso, voy a asignar al elemento de imagen el atributo class con una banda de reloj de valor, IMG Por lo que en general tendremos nueve imágenes distintas. Voy a duplicar esta línea de código ocho veces y luego cambiar rápidamente los nombres de las imágenes. Necesitamos números del dos al nueve. Bien, eso es lo de la banda. A continuación, necesitamos vigilar las cajas. Entonces, insertemos sus nuevos comentarios. Cajas de reloj entonces y de cajas de relojes. Entonces voy a agarrar todo este código de aquí, pegarlo, y primero cambiemos la clase. Quiero decir, cuándo cambiar bandas en casos de lo que necesitamos caso en lugar de prohibido en todas partes. Y también, voy a cambiar la extensión. Necesitamos PNG en lugar de JPG. Bien, veamos sobre las bandas y los casos. A continuación, voy a crear los controles. Tendremos cuatro controles diferentes. Entonces, insertemos sus nuevos comentarios. Controles de reloj que n de controles de reloj. A continuación voy a abrir la etiqueta de enlace con el control de reloj de clase. En realidad va a ser el nombre común de la clase. Pero además de eso, necesitamos reloj de clase individual, control superior. Y luego dentro del elemento link, voy a pasar Font Awesome icon con la clase es FAS, FAA, angle up. Entonces, en general, tendremos cuatro controles diferentes. Voy a duplicar elemento link tres veces y luego necesitamos cambiar las clases. Entonces el segundo va a ser vigilado, control correcto. En cuanto al icono Font Awesome va a estar en ángulo recto. Entonces necesitamos el control inferior del reloj, en ángulo hacia abajo. Y por último, mira el control izquierdo. En cuanto al icono va a estar en ángulo a la izquierda. Bien, Finalmente, necesitamos crear fondo. Volvamos a insertar nuevos comunes, ver Batson y de botón de reloj Y luego Crear elementos de botón con el reloj de clase, btn y con el contenido a estas alturas Bien, eso es todo sobre el marcado HTML. Sigamos adelante y comencemos a personalizar esta sección. Al principio lo vamos a darle estilo y luego haremos que funcione usando JavaScript. Entonces, sigamos adelante e insertemos su nueva sección de comentarios para el final de la sección cuatro. A continuación, seleccione los elementos de sección y defina la altura de esta sección. Voy a hacer que sea el 140% de la ventana gráfica. Además de eso, voy a crear espacio en la parte superior e inferior dentro de esta sección usando relleno. Vamos a establecerlo a 20 altura de la ventanilla en la parte superior e inferior y luego a cero en los lados izquierdo y derecho Antes de seguir adelante, voy a disminuir el tamaño de las imágenes Me refiero tanto a bandas como a casos. Así que vamos a insertar nueva sección de comentarios para relojes que fin de sección cuatro relojes. Además de eso, voy a insertar aquí otros comentarios para los pantalones de reloj. A continuación, seleccione la banda de reloj, IMG. Voy a definir la anchura y la altura. Vamos a ponerlos a los dos en 35 RAM. Y también voy a usar object fit contener. Siguiente cuando también es lo mismo para las cajas de relojes. Entonces voy a duplicar este código aquí y luego cambiar bandas en casos. Y también en lugar de banda de reloj, IMG, vamos a ver la caja IMG Bien, así como pueden ver, las imágenes se hicieron más pequeñas y ahora tenemos que encargarnos de la alineación de ellas. Voy a usar flexbox. Entonces necesitamos agregar un centro de clase a los elementos de sección, también a los relojes y luego curvas y estuches A continuación, necesitamos cambiar la dirección de flexión para los elementos de sección y los casos también. Seleccionemos cajas de reloj y fijemos la dirección de flexión en columna. Entonces en este momento las curvas se colocan horizontalmente. cuanto a los casos se colocan verticalmente, pero aún así el diseño está en mal estado. Ahora tenemos que manipular las posiciones. Voy a asignar dos elementos div, posición absoluta, quiero decir, envolturas de bandas y Y voy a usar uno de estos combinadores CSS llamado selector Child, que selecciona los elementos secundarios directos, en este caso los elementos div directos Fijemos la posición a absoluta. A continuación, necesitamos posición relativa para los elementos padre que estoy en relojes. Así que vamos a seleccionarlo y establecer la posición en relativo. Y además de eso, voy a definir ancho y alto. Vamos a ponerlos a ambos al 100%. Bien, así que ahora las imágenes están muy bien alineadas y solo necesitamos ocultar algunas de ellas porque como ves tenemos aquí una barra de desplazamiento y también algunas de las cajas se colocan en la sección MacBooks Entonces para arreglar eso, necesitamos usar desbordamiento oculto. Bien, ahora sentémonos sobre los relojes. Yo voy a encargarme de los controles. Insertemos tus nuevos comentarios para los controles del reloj. En primer lugar, voy a encargarme de sus posiciones. Como ustedes saben, son hijos directos del elemento sección. Entonces los voy a posicionar de acuerdo a esta sección. Seleccionemos el control del reloj y le asignemos la posición absoluta. Entonces necesitamos posición relativa para este elemento de sección. Ahora, voy a definir posiciones para cada control por separado. Sigamos adelante y comencemos con el de arriba. Primero, definamos las posiciones superior e izquierda. Voy a establecer la altura de la ventanilla 222 como probablemente la posición izquierda Voy a lograr que sea el 50 por ciento. Y además de eso, necesitamos enviar al control verticalmente. Y para eso, tenemos que moverlo. O sea, necesitas usar aquí traducir x función con el valor -50% Entonces aquí tenemos el control superior. Ahora mismo, es muy pequeño y difícil de ver, así que voy a darle estilo. Definamos su anchura y altura. Voy a ponerlos a ambos para RAM. Luego cambia el color de fondo. Usemos tu valor RGBA. Vamos a insertar aquí 22013 veces y luego la opacidad 0.4, y luego hacerlos redondeados usando Vamos a ponerla a cinco rem. A continuación, voy a colocar el icono en el centro. Y para eso, usemos el centro de clases. Voy a asignarlo a todos los elementos. Después de eso, vamos a personalizar el icono en sí. Así que vamos a seleccionar elementos. En primer lugar, voy a aumentar su tamaño de fuente. Hagamos que sea tres RAM, y luego cambiemos el color. Hagámoslo primario. Bien, entonces el control está estilizado. Voy a seguir adelante y posicionar el segundo control. Me refiero al control correcto. Definir la posición superior como 50 por ciento. Entonces voy a establecer la posición correcta en, para correr Además de eso, necesitamos enviar al control verticalmente. Entonces necesitamos aquí Transformar, Traducir, Y -50%. Bien, a continuación viene el control inferior. Vamos a seleccionarlo. Voy a definir la posición izquierda. Hagámoslo 50%. Entonces necesitamos fondo. Voy a fijarlo a 20 de altura de la ventanilla. Y nuevamente, necesitamos transformarnos con la función Translate. En este caso, necesitamos dirección x con un valor -50 por ciento. Bien, así que consideremos que el control inferior está posicionado En realidad. Tenemos aquí el botón que terminó detrás del control. Y nos encargaremos de eso un poco más tarde. Antes de eso, posicionemos el último control, que es el izquierdo. Así que vamos a seleccionarlo y definir las propiedades superior e izquierda. Voy a establecer la posición superior al 50 por ciento. En cuanto a la propiedad dejada, voy a llegar a Ram. Y además de eso, necesitamos de nuevo transformar con la función Translate, en este caso con eje y y con el mismo valor -50 por ciento Bien, veamos acerca de los controles. Sigamos adelante y cuidemos el botón. Insertemos nuevos comentarios para el botón de reloj. Después selecciona el botón y define la posición. Voy a ponerla en absoluto. Y además de eso, necesitamos definir las posiciones inferior y derecha. Voy a establecer la propiedad inferior a 30 altura de la ventanilla. En cuanto a la posición correcta, pongámosla en 25 por ciento. Entonces se posiciona el botón, y ahora voy a hacer que se vea bien. En primer lugar, definamos dentro de height, voy a establecer width a 13 RAM. En cuanto a la altura, hagamos que sea cinco RAM. Luego cambia el color de fondo. Voy a ponerla en negro. Y además de eso, necesitamos cambiar el color del texto. Hagámoslo primario. Bien, después de eso, voy a cambiar el borde predeterminado. Vamos a usar aquí borde con valores 0.1 habitación. Voy a hacerlo punteado y también cambiar el color, hacerlo blanco A continuación, hagamos el botón redondeado usando border-radius con un valor para Ran Bien, Así que el botón se ve bien. Vamos a agregarle un par de celdas más. Yo voy a encargarme del texto. Cambiemos su tamaño de fuente, que sea 1.6 RAM. Además, voy a hacer que la fuente sea más ligera. Vamos a establecer no va a esperar 200. Y por último, cambiar el tipo de la más basta, hazlo Bien, así que eso es todo. Toda la sección está personalizada y ahora ¿cómo hacer que funcione? 42. Proyecto 4 - Hacer trabajo de sección de relojes: Bien, una vez que hayamos personalizado la sección de relojes ahora tenemos que hacerla funcionar Tenemos aquí cuatro controles diferentes. Y una vez que los hagamos clic, entonces la imagen se moverá y podrás elegir tu estuche y banda favoritos. Entonces crearemos esas cosas usando JavaScript. Vamos al archivo script.js e insertemos nueva sección de comentarios para fin de sección para antes que nada, voy a seleccionar todos los elementos necesarios. Estoy en bandas, casos y todo para diferentes controles. Vamos a crear una nueva variable. Voy a llamarlo bandas de reloj. A continuación, seleccione elemento utilizando el método QuerySelector. Necesitamos especificar aquí las bandas de reloj de clase. Duplicemos esta línea de código y cambiemos las bandas en casos. Después de eso, voy a seleccionar controles. Empecemos con el control superior. Crea nueva variable y llámala watch top control. Vamos a seleccionarlo usando nuevamente el método selector de consultas. Voy a especificar aquí el nombre de la clase, ver el control de tabulación. adelante y dupliquemos esta línea de código tres veces y cambiemos los nombres y los nombres de las clases que necesitamos aquí, ¿verdad? Entonces el siguiente va a estar abajo. Y por último, necesitamos la izquierda. Entonces se preparan todos los elementos, como ustedes saben, los controles se crean utilizando los elementos de enlace. Y una vez que los hagamos clic, entonces navegaremos hasta la parte superior de la página por defecto. Y en realidad también tenemos el mismo problema con los controles de cubo. Si hacemos clic en ellos, navegaremos hasta la parte superior de la página. Seleccionemos todos esos controles. Voy a escribir este código en la parte superior. Vamos a insertar tus nuevos comentarios, CommonJS que n de JS común Después voy a seleccionar todos los controles usando el método QuerySelector all Primero, especifiquemos aquí el nombre de la clase. Control de vigilancia, que necesitamos controles del cubo cuando separar esas clases usando coma. Y finalmente entero a. entonces para solucionar ese problema, tenemos que mirar a través de la lista de nodos que es devuelta por el método query selector all. Se trata de un objeto similar a una serie. Después tenemos que adjuntar un evento click a los controles y usar uno de los métodos llamados prevent default. Entonces, para mirar a través de la lista, voy a usar uno de los métodos de ayuda de matriz llamados para cada uno. Se necesita un argumento, que es la función de devolución Esta función de devolución de llamada en sí tendrá un argumento. Va a ser el control actual en la lista. Y a continuación, tenemos que adjuntar al oyente de eventos de control con eventos click También necesitamos aquí la función de devolución de llamada. Voy a pasar aquí un objeto de evento. Y luego tenemos que adjuntar al método de objeto evento llamado prevent default. Ahora si hago clic en los controles, van a hacer nada y no navegaremos hasta la parte superior de la página. ¿Bien? Entonces una vez que hacemos clic en los controles, tenemos que mover los elementos envolvedores. Me refiero a bandas de reloj y cajas de relojes. Y lo haremos usando margen. Entonces el ancho y alto de cada imagen o igual a 35 rem. Y para mover una imagen y ajustarla a la banda, tenemos que mover todo el elemento por siete para rampa. Entonces para controlar la distancia, me refiero al movimiento de los elementos, voy a crear dos variables distintas. Uno para la dirección vertical, quiero decir para los casos, y el segundo para la dirección horizontal para las bandas. Entonces llamemos a la variable x es por eso que es para la dirección vertical. Voy a ponerla a cero. Y entonces necesitamos x es x con un valor de cero también. Por lo que esos valores aumentarán o disminuirán en siete para carnero según la dirección. Voy a empezar con el control superior. Una vez que hagamos clic en él, debemos mover las cajas de los relojes a la parte superior. Así que sigamos adelante y adjuntemos al oyente de eventos de control Tenemos que pasar aquí clic evento y la función flecha. Entonces ahora tenemos que mover los elementos usando margin top. Significa que tenemos que disminuir el valor de margin top en siete a RAM. Y tenemos que hacer eso en cada click Así que necesitamos aquí la caja del reloj es seguida por el atributo style. Y entonces tenemos que usar margin top como valor. Voy a restar siete a RAM al valor actual del eje y Entonces necesitamos aquí x es y igual a x es y -70. Corre. O simplemente podemos escribir esta expresión así. X es y menos es igual a 70. Corre, ¿verdad? Si hago clic en el control superior entonces los casos cambiarán. Pero ahora mismo sin ningún pequeño defecto. Entonces para arreglarlo, voy a usar transición. Necesitamos margen top 1 s. Así que ahora tenemos un efecto mucho mejor. Bien, entonces necesitamos lo mismo para el resto de los controles. Duplicemos este código. El siguiente control va a ser el de abajo. Y también en lugar de menos iguales, necesitamos aquí más iguales. A continuación, tendremos el control adecuado. Así que vamos a duplicar este código. En este caso, tenemos que mover los pantalones de reloj. Entonces cambiemos las cajas de los relojes por bandas de reloj. Entonces en lugar de margen superior, necesitamos margen derecho? También en el caso de las bandas, tenemos que cambiar la dirección que necesitamos aquí, eje x. Duplicemos este código. Cambiar de derecha a izquierda. Y también necesitamos aquí signo menos. ¿Bien? Al igual que las cajas de los relojes, también necesitamos hacer la transición para las bandas de reloj. Entonces, seleccionemos las bandas de reloj asignadas a la transición. El margen de valores, ¿verdad? 1 s. Entonces ahora si los probamos todos, los controles funcionarán bien. Como puedes ver, bandas en caso de que algunas se muevan sin problemas. Pero una vez que lleguemos a la última imagen, quiero decir en ambas direcciones que el elemento seguirá moviéndose infinitamente Entonces no necesitamos eso. Una vez que llegamos a la última imagen, tuvimos que ocultar el control. Para eso, voy a crear una nueva función. Vamos a llamarlo control de altura. Entonces necesitamos verificar si llegamos a la última imagen o no. Sucederá. Quiere que el valor del eje y o eje x se convierta en 280 RAM dependiendo de la dirección. O sea, a veces necesitaremos 280 RAM o alguna vez es -280 Para demostrar que necesitamos esta cantidad, voy a ejecutar el eje y a la consola Entonces en cada clic, el valor disminuirá en 70 RAM. Y una vez que lleguemos a la última imagen, entonces el valor será igual a -280 rampa Entonces tenemos que ocultar el control quiere que el valor del eje y sea igual a -280 RAM Vamos a crear sentencia if donde tenemos que comprobar si x es y es igual a -280 RAM Para ocultar el control, voy a crear una nueva clase y CSS, donde definiremos algunos estilos CSS para ocultar los elementos. Voy a llamar a esta clase hide control, luego asignarle opacidad cero y visibilidad oculta Entonces, si esta condición es verdad, necesitamos agregar esa clase recién creada al control. Entonces necesitamos ver el control superior, seguido de la propiedad class list. A continuación, necesitamos usar uno de los métodos llamados Add. Y tenemos que especificar el nombre de la clase dentro del paréntesis Y si la condición es falsa, entonces tenemos que volver a mostrar el control. Entonces necesitamos eliminar el control de clase alta. Usemos l declaraciones. Entonces voy a copiar esta línea de código. Tenemos que cambiar, agregar a removido. ¿Verdad? Por último, llamemos a esta función onclick Entonces, si hacemos clic en el control superior y luego llegamos a la última imagen, se ocultará. Necesitamos lo mismo para el resto de los controles. Sigamos adelante y dupliquemos las declaraciones if. Después se deshace del signo menos y también cambia la parte superior a la inferior. A continuación, tendremos el control adecuado. En este caso, necesitamos eje x. Y también necesitamos cambiar el control. Necesitamos aquí, bien. A continuación viene el control izquierdo. Agreguemos aquí el signo menos. Y también en vez de un control derecho, Esa es la entidad aquí, el control izquierdo. Entonces lo único que tenemos que hacer es llamar a esta función abajo para cada control. Ahora bien, si pruebo y hago clic en todos los controles, verás que todo funciona bien. Bien, eso es. Hemos terminado de trabajar en esa sección. Sigamos adelante y nos ocupemos del siguiente. 43. Proyecto 4 - Sección de creación y estilo de AirPods: Bien, así que hemos terminado de trabajar en la sección de vigilancia y ahora tenemos que seguir adelante y tomar año de la siguiente sección, que va a ser los aeropuertos, va a ser una especie de sección simple pero agradable Tendremos aquí el rubro con dos imágenes distintas y también con dos botones diferentes. Sigamos adelante y como de costumbre, comencemos con el marcado HTML Vamos a insertar nuevos comentarios. Sección cinco de la Sección Cinco. Después abre los elementos de sección con la clase. Sección cinco. A continuación, voy a insertar un chico en Nuevos comentarios para esta sección cinco contenidos. Después abra la etiqueta div con una clase aeropuertos. Este elemento incluirá todo el contenido de esta sección. Entonces vamos a tener aquí un encabezado, imágenes, y botones. Vamos a crear nuevos comentarios para el encabezado. Necesitamos la rúbrica de la Sección cinco del epígrafe de la Sección Cinco. Y luego abrir la etiqueta de encabezado H1 con una sección de clase cinco rumbo con el contenido, aeropuertos. Bien, después de eso, tendremos las imágenes. Entonces, vamos a crear nuevos comentarios para la Sección cinco. Imágenes. A continuación, abra la etiqueta imagen y seleccione Imágenes de carpeta de imágenes. Después otra carpeta, aeropuertos, y luego seleccionar aeropuertos, uno PNG. Duplicemos esta línea de código y cambiemos el nombre de la imagen que necesitamos aquí, aeropuertos a PNG. Bien, por último, voy a instituir los botones. Vamos a crear nuevos comentarios. Sección cinco botones. Después final de Sección cinco botones. Voy a abrir la etiqueta div, que va a ser la envoltura de los botones. Vamos a asignar a la clase el nombre aeropuertos Watson's. Y luego Abrir etiqueta de botón con la clase aeropuertos btn. Y con el contenido, aprende más. Duplicemos el botón y cambiemos el contenido. Voy a insertar aquí por. Bien, así se prepara el marcado HTML, se crean todos los elementos y ahora voy a personalizar esta sección usando CSS Sigamos adelante e insertemos nuevos comentarios para la Sección cinco. A continuación, seleccione el elemento de sección y defina su ancho y alto. Voy a establecer con 200%. En cuanto a la altura, hagámosla al 100% de la ventana gráfica. Bien, a continuación voy a encargarme de los elementos div wrapper. Me refiero al envoltorio de contenido. Vamos a instituir tus nuevos comentarios. Contenido de la Sección Cinco del Contenido de la Sección Cinco. Y luego seleccionar elementos div con la clase aeropuertos. En primer lugar, voy a definir ancho y alto. Vamos a establecer con dos 90%. En cuanto a la altura, voy a hacerla 80%. Y luego voy a alinear los elementos horizontalmente en fila. Para eso, vamos a configurar display a flex. Derecha. Después de eso, voy a encargarme de la alineación de los elementos. Empecemos por el encabezamiento. Voy a colocarlo en el centro horizontalmente. Insertemos nuevos comentarios para el encabezado. Necesitamos la Sección Cinco, rubro. Del rubro de la Sección Cinco. Luego selecciona los elementos de encabezado y establece su posición en absoluto. Bien, para posicionar de acuerdo a sus elementos padre, tenemos todo nuestro fondo que muchas veces necesitamos asignar al elemento padre posición relativa. Después de eso, definamos las posiciones superior e izquierda. Voy a poner la cima a cero. En cuanto a la izquierda, vamos a hacerla 50 por ciento. Entonces para centrar los elementos perfectamente, necesitamos moverlo hacia el lado izquierdo. Entonces necesitamos transformar, luego traducir la función con dirección x. Y tenemos que pasar aquí -50 por ciento Bien, entonces el rumbo se posiciona a continuación Yo voy a encargarme de los Batson, que ahora mismo se colocan en el lado derecho de esta sección Voy a colocarlos en el centro. Entonces, vamos a crear nuevos comentarios para los botones de la Sección cinco. A continuación, seleccione los elementos div envoltorio, que tiene los botones de nombre de clase aeropuertos. En primer lugar, voy a encargarme de sus posiciones. Fijemos la posición a absoluta. Y entonces voy a colocar botones perfectamente en el centro para eso, voy a poner arriba y dejar propiedades, ambas al 50 por ciento. Entonces necesitamos transformar, traducir y tenemos que especificar ambas direcciones. Tenemos que fijarlos en -50%. Bien, entonces los elementos están alineados y ahora podemos seguir adelante y estilizarlos. Volvamos a los elementos del encabezado. Voy a aumentar su tamaño de fuente. Vamos a ponerla en rampa 15. Después haz que la fuente sea más ligera. Voy a establecer font-weight en 300. Después cambia el color. Vamos a usar aquí color blanco. Y por último, voy a crear algún efecto de sombra. Usemos sombra de texto con los valores 0.1, 0.1, RAM distinta de cero, y el frío o 999 Bien, entonces están teniendo un estilo. Sigamos adelante y cuidemos las imágenes. Voy a crear nuevos comentarios, sección cinco imágenes de la Sección cinco imágenes. Y luego seleccionar elementos de imagen. Voy a disminuir su tamaño. Vamos a establecer con 250 por ciento. Después hacer la altura al 100%. Y también usar pies de objeto, contener. La imagen es cada vez más pequeña. Y ahora como puedes ver, no se colocan perfectamente en el centro de esta sección. Para arreglarlo, voy a usar el centro de clases. Vamos a asignarlo al elemento section. Bien, entonces ahora tenemos un mejor resultado. Lo único que quiero hacer respecto a las imágenes es cambiar el color de fondo de la segunda imagen. En primer lugar, voy a asignar a comer una clase. Llamémoslo aeropuertos img2. Después selecciónala y cambia el color de fondo. En este caso, voy a usar la columna primaria. Bien, eso es lo de las imágenes. Sigamos adelante y nos ocupemos de los botones. Voy a crear algo de espacio en la parte superior de los botones. Entonces usemos aquí margen superior con un valor de cinco rem. Después selecciona el botón en sí. En primer lugar, voy a encargarme de la anchura y la altura. Voy a establecer el ancho a 15 RAM. Para la altura. Hagámoslo para RAM. Y también cambiar el color de fondo. Usa tu color primario. Justo al lado, voy a crear algo de espacio entre los botones. Y también me voy a deshacer de la frontera por defecto. Así que vamos a crear espacio usando el margen. Voy a ponerla a cero en la parte superior e inferior y dos rem en los lados izquierdo y derecho. Y también puso la frontera a ninguno. Bien, sigamos adelante y agreguemos un par de estilos más a los botones Voy a hacerlos redondeados. Vamos a establecer el radio del borde 2.5 rem. También cambia el color del contenido. Que sea blanco. Y por último, cambia el tipo del más basto, hazlo puntero. Bien, entonces ahora mismo el primer botón sobre D se ve bien. cuanto al segundo, necesitamos cambiar su color de fondo, y también el color del texto. Entonces para poder seleccionar el segundo botón, voy a usar uno de los pseudo-clase que se llama hijo perdido Después cambia el color de fondo, hazlo blanco como el color del texto. Voy a hacer primaria. En este caso, se sobrescribirán el color de fondo común y el color del texto Bien, entonces eso es todo. Todo se ve bien. Y con esta sección, ya terminamos. Sigamos adelante y nos ocupemos del siguiente. 44. Proyecto 4 - Crear y personalizar pie de página: Entonces es momento de crear la última parte de nuestros proyectos, que va a ser el pie de página. Será un filtro simple, tendrá cinco iconos diferentes relevantes para las cinco secciones diferentes. Y nos permitirán navegar a las secciones adecuadas. Además de eso tendrá un párrafo con algún texto de copyright. Bien, así que sigamos adelante y comencemos a crear el marcado HTML Voy a insertar nuevos comentarios para la sección seis. Después abre la etiqueta de sección con un nombre de clase, sección seis. Entonces dentro de ese elemento de sección, tendremos dos partes distintas. El primero va a ser el desarrollo, que envolverá todos los iconos. Vamos a asignar a cada sección de clase seis iconos. Entonces, en general, tendremos cinco iconos diferentes y serán representados usando elementos de enlace. Entonces voy a abrir etiqueta de enlace con la clase. Puedo enlazar. El icono en sí será una imagen. Así que hagamos una pausa aquí etiqueta de imagen, y luego seleccionemos la imagen adecuada. Necesitamos carpeta de imágenes, luego iconos, y tenemos que seleccionar Inicio icono punto PNG. Bien, así como dijimos, en general, tendremos cinco iconos diferentes Duplicemos elementos de enlace cuatro veces y cambiemos los nombres de las imágenes. El segundo va a ser iPhone. Entonces tendremos MacBook que reloj. Y la última imagen va a ser AirPods. Bien, Finalmente, sigamos adelante y creamos el párrafo. Tendrá derechos de autor de clase. Entonces voy a insertar para usar algún texto copyright que entidad HTML5 insegura Emily signo de copyright, necesitamos ampersand copy. El punto y coma va a ser seguido por código y crear. Todos los derechos reservados. Bien, eso es todo sobre el marcado HTML. Sigamos adelante y personalicemos esta sección. Voy a insertar sus nuevos comentarios, sección seis. De la sección seis. Después seleccione los elementos de sección y defina su ancho y alto. Voy a establecer ancho 200 por ciento. En cuanto a la altura, hagamos que sea el 40% de la ventana gráfica. Bien, sigamos adelante y diseñemos los elementos. En realidad, no vamos a tener muchos estilos en esta sección. Disminuyamos el tamaño de las imágenes. Selecciónelos y conéctelos con dos RAM color canela. Entonces voy a aumentar el espacio entre los íconos. Puedo vincular y usar margen con los valores 0.5 rem. ¿Bien? Entonces ahora mismo los elementos se colocan en el lado izquierdo de esta acción y necesitamos colocarlos en el centro. Entonces, sigamos adelante y asignemos el centro de clase a los elementos de sección. Bien, ahora voy a personalizar el párrafo. En primer lugar, cuidemos su posición. Vamos a seleccionarlo y establecer su posición en absoluto. Entonces necesitamos definir la posición para elementos de esta sección porque es el padre. Así que pongamos la posición a relativa. Y después de eso, definamos la posición inferior para el párrafo. Vamos a ponerla en rampa cinco. Bien, entonces se posiciona el párrafo. Y por último, sigamos adelante y diseñémoslo. Voy a aumentar el tamaño de la fuente. Hagámoslo 1.5 RAM, y luego creamos algo de espacio entre las letras. Vamos a establecer el espaciado entre letras a 0.1 rampa. Bien, así que todos los elementos están estilizados. Y ahora como dije, voy a hacer que esos íconos funcionen. Una vez que hacemos clic en ellos, tenemos que navegar a la sección adecuada. Para eso, necesitamos agregar a cada elemento de sección id. Y luego necesitamos conectar h atributos de referencia de los elementos de enlace a estos ID. Así que asignemos a las aurículas para nosotros atributos, nombres de sección propios Tenemos que pasar los nombres de sus secciones de la Sección Uno a la Sección Cinco. Después siga adelante y asigne a cada sección elementos id, atributo con los mismos valores. Empecemos con la primera sección. Entonces voy a agarrar este código y pegarlo para cada elemento de sección y también cambiar los nombres de las secciones. Tenemos que hacer la sección cinco. Bien, entonces ahora si hago clic en el icono cuchara, navegue a la sección correspondiente. Pero eso no es lo que queremos. Queremos navegar con algún efecto suave. Para ello, tenemos que usar una de estas propiedades CSS llamada scroll behavior con el valor smooth. Y en realidad tenemos que asignarlo al elemento HTML. Bien, entonces ahora como puedes ver, todo funciona bien. Una vez hacemos clic en el I porque navegamos a las secciones relevantes con pequeño defecto. En realidad, antes de seguir adelante, voy a hacer lo mismo con los elementos de navegación también. Tenemos aquí cuatro enlaces diferentes y tenemos que especificar las secciones adecuadas, comenzando por la sección dos hasta la sección cinco. Entonces pasemos aquí los nombres de las secciones. Entonces, una vez que hagamos clic en los elementos de navegación, entonces navegaremos a las secciones correspondientes. Bien, entonces ya casi terminamos. Pero voy a hacer un par de cosas más aquí. Como puedes ver, el proyecto terminado tiene el icono de Apple en la barra de título. Así que vamos a agregarlo a nuestro proyecto de trabajo también. Necesitamos abrir la etiqueta de enlace en el elemento head. Entonces tenemos que pasar tu icono de acceso directo. Y luego tenemos que especificar la ruta del archivo. Va a ser el icono de inicio, que se coloca en la carpeta del icono. Bien, entonces ahora tenemos el logo en la barra de título. Lo último que voy a hacer es evitar las acciones predeterminadas de esos dos elementos de enlace en la sección de iPhones Porque una vez que hacemos clic en ellos, navegamos hasta la parte superior de la página. Para ello, solo necesitamos agregar sus nombres de clase aquí en el selector de consultas. Todo método necesita pasar tu iPhone btn. Bien, entonces ahora el problema está arreglado y en realidad se crea todo el proyecto Lo único que tenemos que hacer es que sea sensible a diferentes tamaños de pantalla. 45. Proyecto 4 - Hacer que responda al proyecto: Bien, una vez que terminamos de construir nuestro proyecto, ahora es el momento de seguir adelante y hacerlo receptivo a diferentes tamaños de pantalla. Como saben, el proyecto está construido sobre un tamaño de pantalla extra grande. Utilizamos el primer enfoque de escritorio, y ahora tenemos que hacerlo receptivo a diferentes puntos de interrupción Inspeccionemos la página y cambiemos al modo de respuesta. Entonces en este momento el ancho y la altura están establecidos para un tamaño de pantalla extra grande. Ya tengo todos preparados los puntos de interrupción en los que voy a hacer algunos cambios Entonces no voy a perder el tiempo encontrándolos. En general, no hay reglas estrictas sobre los puntos de interrupción. Algunos de los desarrolladores establecen puntos de quiebre según los dispositivos populares. Pero es mejor establecer los puntos de quiebre en cada sitio web individualmente para que se vea bien en cada dispositivo diferente. Bien, sigamos adelante y fijemos el primer punto de interrupción. Creo que necesitamos hacer algunos cambios una vez que el tamaño de la pantalla sea inferior a 1,500 píxeles. Así que vamos a seguir adelante y crear una consulta de medios CSS. Pero primero voy a insertar sus nuevos comentarios, responsive y ofrecer responsive. A continuación, cree una consulta de medios CSS y especifique el ancho máximo como 1,500 píxeles. En el punto de interrupción, voy a disminuir el tamaño de fuente de los elementos HTML Disminuirá los tamaños de los elementos que se miden en RAM. Así que vamos a establecer este tamaño de fuente en 45%. Entonces como puedes ver, todas las secciones se ven bien. Y ahora tenemos que encontrar el siguiente punto de interrupción, que creo que va a ser de 1,100 píxeles Así que vamos a seguir adelante y crear un nuevo medio CSS con el ancho máximo de 1.100 Al principio, voy a disminuir el tamaño de fuente del elemento HTML y vamos a hacerlo 40%. A continuación, voy a hacer que esos elementos de navegación más audaces porque no son del todo visibles Así que vamos a seleccionarlo ahora por enlace y establecer el peso de la fuente en 700. Bien, después de eso, voy a disminuir el tamaño del encabezado en el banner y también tenemos que hacer el párrafo más pequeño. Entonces, sigamos adelante y comencemos con el rumbo. Vamos a seleccionarlo y establecer su tamaño de fuente en ocho RAM. cuanto al párrafo, voy a hacer su tamaño de fuente tres rampa. Bien, así que eso es todo sobre la primera sección. Lo único que voy a hacer en el punto de interrupción es mover el botón de la sección de relojes hacia el lado derecho Entonces, seleccionemos watch btn y fijemos su posición correcta en 25% Bien, así que eso es todo respecto a este punto de ruptura, todas las demás secciones se ven bien Sigamos adelante y nos ocupemos del siguiente, que va a ser de 900 píxeles. Así que vamos a seguir adelante y crear de nuevo una nueva consulta de medios CSS y especificar el ancho máximo como 900 píxeles. Entonces en los puntos de interrupción, voy a aumentar el tamaño de la MacBook Por lo que tenemos que seleccionar los contenidos de la Sección tres. Y voy a fijar el ancho al 90%. A continuación, necesitamos aumentar el tamaño de la envoltura de carga porque como puedes ver, no encaja bastante bien. Así que vamos a seleccionar la envoltura de carga y establecer su ancho en 70%. Bien, por último, voy a disminuir el tamaño del logo. Seleccionemos el icono Font Awesome y establecemos su tamaño de fuente en seis rampas. Bien, eso es todo sobre esta sección. Lo único que voy a hacer en el punto de interrupción es disminuir el tamaño del rumbo en la sección del aeropuerto Entonces, sigamos adelante y seleccionemos el encabezado de la Sección cinco y fijemos su tamaño de fuente en 12. Corre. Bien, Entonces con 900 pixeles, ya terminamos. Sigamos adelante y encontremos el siguiente punto de interrupción. Va a ser de 700 pixeles. Así que vamos a seguir adelante y crear un nuevo medio CSS y especificar el ancho máximo como 700 píxeles. En ese punto de interrupción, voy a ocultar los controles del cubo en absoluto Usemos display none. Entonces como puedes ver, los controles están ocultos y ahora necesitamos mover el cubo un poco hacia abajo. Así que vamos a seleccionarlo. Voy a moverlo usando la posición superior. En este momento se establece en menos dos r1. Y voy a hacerla rampa 3D. Siguiente. Voy a disminuir el tamaño del logo y también voy a cambiar su posición. Entonces voy a moverlo a la esquina. Así que pongamos la posición superior a cero. En cuanto a la izquierda, voy a hacerla rampa. Además de eso, voy a seleccionar elemento y vamos a establecer su tamaño de fuente en ocho Ran. Bien, eso es todo sobre el logo. A continuación, voy a cambiar la disposición del banner y el cubo. Voy a colocar la cola detrás de la pancarta. Para eso, voy a establecer la posición del estandarte como absoluta. Por lo que se considera que el cubo terminó detrás de la pancarta. En este momento el texto de la batería no del todo legible. Y para arreglarlo, voy a disminuir la opacidad del envoltorio de cubos Así que vamos a seguir adelante y seleccionarlo y establecer la opacidad a 0.7. Entonces ahora tenemos un resultado mucho mejor. A continuación, voy a esconder esta flecha aquí. Como recuerdas, es una entidad HTML5, es la parte de los elementos de encabezado. Y para seleccionarlo, voy a usar uno de estos pseudo elementos llamados la primera letra Entonces primero vamos a seleccionar los elementos de encabezado H1, seguidos de la primera letra. Para ocultar el elemento, voy a usar visibilidad oculta y opacidad cero ¿Bien? Entonces la flecha está oculta, pero ahora el elemento heading no se coloca en el centro. Tenemos que moverlo ligeramente hacia el lado izquierdo. Para eso, usemos posiciones. Seleccionemos elementos de encabezado H1. Y al principio voy a establecer su posición relativa y luego establecer la propiedad izquierda en menos cinco rampa. Entonces en este caso, moveremos el elemento de su posición actual. Bien, entonces ahora se ve mucho mejor. Antes de pasar a la siguiente sección, voy a encargarme del botón de los anuncios de banner. Recuerda que una vez que pasemos el cursor por encima, el botón cambiará de forma Ya no necesitamos eso porque el cubo se coloca detrás de la pancarta. Así que una vez que pasamos el cursor sobre el botón y necesitamos mantener su forma predeterminada, vamos a seleccionar botón con hover Después sube y encuentra la propiedad de ruta de clip con sus valores. Voy a copiarlo y luego pegarlo aquí abajo. Bien, eso es lo de la primera sección. Pasemos al segundo. Voy a aumentar el tamaño de los iPhones. Me refiero al elemento div wrapper. Así que vamos a seleccionarlo y definir su altura y anchura. Voy a establecer la altura a 70 altura de la ventana gráfica. En cuanto al ancho, va a ser 70 de ancho de ventana gráfica. Bien, eso es todo sobre esta sección. A continuación viene la sección MacBook, que se ve bien. En cuanto a la sección de relojes, voy a mover el botón hacia el lado derecho. Así que vamos a seleccionarlo y establecer su posición correcta en 15%. Bien, Entonces la sección de relojes se ve bien. Sigamos adelante y nos ocupemos de los aeropuertos. Voy a ocultar la primera imagen en. Todo bien, ahora la primera imagen no tiene ningún nombre de clase. Entonces sigamos adelante y asignados a clase con un valor aeropuertos, IMG uno Después selecciónala y hazla oculta usando display none. En cuanto a la segunda imagen, voy a aumentar su anchura y hacerla 100 por ciento. Entonces, seleccionemos la segunda imagen y fijemos su ancho al 100 por ciento. Entonces como puedes ver, este código no funciona Porque inicialmente, cuando definimos el ancho de las imágenes, todavía nos gustan usando los elementos padre nombre de clase, seguido del nombre de la etiqueta. Y en realidad tiene una mayor precedencia. Entonces necesitamos agregar aquí la clase del elemento padre, AirPods Bien, ahora el problema está arreglado y el ancho de la imagen se volvió 100% A continuación, voy a cambiar el color de fondo del primer botón y hacerlo blanco. Vamos a seleccionar el botón. Cambia su color de fondo, hazlo blanco. En cuanto al color en sí, voy a usar aquí color primario. Por lo que se considera fondo y el color cambió. Además de eso, voy a agregar un poco de efecto de sombra a los botones. Entonces usemos box-shadow e instituyamos 0.1 RAM tres veces Y como el color, voy a usar la D. Bien, Eso es todo sobre la sección del aeropuerto. Lo último que voy a hacer en el punto de interrupción es cuidar los íconos y el pie de Tenemos que disminuir el espacio entre ellos. Así que sigamos adelante y seleccionamos Puedo vincular y usar margen. Voy a ponerla a cero en la parte superior e inferior y dos RAM en los lados derecho e izquierdo. Bien, eso es. Acerca de este punto de ruptura de las secciones. Luce bien. Sigamos adelante y nos ocupemos del siguiente, que va a ser de 550 píxeles. Así que sigamos adelante y creamos una nueva consulta de medios CSS con el ancho máximo de 550 Entonces lo primero que tenemos que hacer es disminuir el espacio entre los elementos de navegación. Entonces, seleccionemos Number Link y fijemos el margen a cero en la parte superior e inferior y 1.5 RAM en los lados izquierdo y derecho. Entonces la primera sección se ve bien. Pasemos al siguiente. Voy a disminuir el tamaño de fuente del encabezado. Así que vamos a seleccionar Sección dos encabezamiento y tamaño satisfecho a ocho Ran. Bien, pasemos a la siguiente sección. Disminuyamos también el tamaño de fuente de este encabezado de sección. Seleccionemos el encabezado de la Sección tres. Establezca su tamaño de fuente en ocho. Corre. Después de eso, voy a disminuir el tamaño de fuente del encabezado MacBook Info. Y también voy a disminuir el tamaño del botón. Así que sigamos adelante y seleccionemos el encabezado MacBook Info y fijemos su tamaño de fuente en fibrina A continuación, selecciona el botón MacBook y define su ancho y alto. Voy a establecer el ancho a 15 RAM. En cuanto a la altura, hagamos que sea tres RAM. Y también disminuir el tamaño de la fuente. Hacerlo 1.3 rampa. Bien, eso es todo sobre la sección de MacBook. Pasemos a la siguiente sección. Se ve bien. Entonces tenemos que pasar a la sección del aeropuerto. Como puede ver, los botones se colocan uno encima del otro. Tenemos que separarlos. Así que vamos a seleccionar un rapero, botones de aeropuertos y definir su ancho, que sea 50 RAM. Y luego para colocar el contenido en el centro, necesitamos text-align Bien, así que eso es todo sobre la sección de aeropuertos. Lo último que tenemos que hacer en ese punto de interrupción es disminuir el tamaño de los iconos y el pie Así que sigamos bloqueando el enlace del icono seguido de la imagen. Y establece el ancho en ocho RAM. Bien, así que eso es todo. Ya terminamos con este punto de ruptura. Ahora tenemos que seguir adelante y encargarnos del último punto de interrupción, que va a ser de 450 píxeles Así que vamos a crear una nueva consulta de medios CSS y especificar el ancho máximo como 450 píxeles. En primer lugar, voy a disminuir el tamaño de fuente de los elementos HTML. Vamos a establecerlo en 35 por ciento. Ahora, voy a encargarme del logo y la barra de navegación. Quiero colocarlos verticalmente uno encima del otro, y también quiero colocarlos en el centro. Así que sigamos adelante y seleccionemos Logo Y definamos sus posiciones. Voy a establecer la posición superior a diez RAM de lo que necesitamos la posición izquierda, 50 por ciento. Y para centrar el elemento horizontalmente, vamos a usar transform translate con x-direction Y ese valor, voy a pasar el año -50 por ciento. Por lo que el logo se posiciona correctamente. A continuación, vamos a encargarnos de suficiente barra. Voy a fijar su posición de rezago al 50 por ciento. Entonces otra vez, necesitamos transformar, traducir X con -50 por ciento Entonces el número se coloca en el centro, pero necesitamos definir su ancho debido a que la alineación de los elementos de navegación está estropeada. Quiero ahora bar para tomar el máximo disponible con. Así que vamos a establecer con dos contenidos mux. Bien, eso es todo sobre la navegación. Como puedes ver, tenemos aquí el espacio en blanco en el lado derecho de la página web Y en realidad es causado por la información de MacBook. En este momento tiene un ancho grande y tenemos que disminuirlo. Entonces, seleccionemos la información de MacBook y fijemos el ancho en rampa 40. Bien, entonces ahora el problema está arreglado. Volvamos a la primera sección. Tenemos que colocar el párrafo en el centro. Así que vamos a seleccionar p elementos y asignarle text-align center Entonces eso es todo sobre la primera sección. Pasemos al segundo. Voy a aumentar el ancho del envoltorio de las imágenes. Entonces, seleccionemos iPhones y establecemos su ancho en 75 ancho de ventana gráfica Entonces ahora se ve mejor. Sigamos adelante y disminuyamos el tamaño de fuente del encabezado de la tercera sección. Vamos a seleccionarlo y establecer el tamaño de la fuente en seis rampas. Además de eso, voy a cambiar los tamaños del encabezado y el párrafo de la info de MacBook. Empecemos por el encabezamiento. Voy a establecer su tamaño de fuente tres RAM que el precio de la MacBook de silicio. Define el tamaño de fuente, háganlo a Ram. Y también, voy a hacer que la fuente sea un poco más audaz. En este momento el peso de la fuente está establecido 200 y voy a hacerlo 300. Bien, eso es todo sobre la sección de MacBook. A continuación, tenemos que encargarnos de los relojes. Volvamos a movernos al botón del lado derecho, seleccionemos el reloj BTN y fijemos la posición correcta en 5% ¿Bien? Por último, voy a disminuir el ancho de los iconos y el pie de página. Así que vamos a seleccionar el enlace del icono seguido de la imagen. Y definir ancho. Que sea seis Ran. Bien, así que eso es todo sobre nuestro proyecto. Responde a diferentes tamaños de pantalla. Y en realidad ya terminamos con ello. Espero que te hayan gustado estos proyectos porque usamos muchas cosas interesantes y geniales. Entonces pasemos al siguiente proyecto. 46. Proyecto 5 - Previsualización de proyecto: Bien, así que es momento de construir nuestro próximo proyecto, que va a ser el clon de uno de los sitios web más populares y de uso común llamado Paypal, creará la interfaz de usuario de las diferentes páginas Estoy en la página principal, páginas de inicio de sesión y registro. Por supuesto que no será el clon exacto con toda la funcionalidad. Como dije, vamos a construir solo una interfaz de usuario con HTML, CSS y JavaScript. Paypal se ve diferente en diferentes países. La interfaz de usuario cambia frecuentemente de vez en cuando. Así que no te preocupes si este no es el clon exacto de la IU actual. Bien, así que antes de saltar directamente a escribir el código, al principio, describamos cómo es el proyecto Entonces como dije, construiremos tres páginas diferentes, sesión principal e inscríbase. Empezaremos por la página principal. Consistirá en un par de secciones diferentes. La primera sección va a ser el banner con navegación. Tenemos aquí varios elementos de navegación. Si pongo el cursor sobre ellos, entonces se mostrará el menú desplegable Cambiará una vez que pasemos cursor sobre otro elemento de navegación Además, tendremos aquí dos botones diferentes para iniciar sesión e inscribirse. Si hago clic en ellos, entonces navegaremos a la página adecuada. Por lo que a la pancarta le seguirá la segunda sección. Incluirá tres partes diferentes con Font, iconos impresionantes, algunos elementos de texto y botones. Entonces tendremos esta sección azul con algunos párrafos diferentes. A continuación, construiremos esta pequeña sección aquí con una imagen y tres pasos diferentes. Abajo, tendremos un botón para apuntarte, seguido del pie de página. Bien, así que veamos sobre la página principal. Echemos un vistazo a la página de inicio de sesión. Será bastante similar a la página de inicio de sesión original. Tendremos aquí dos campos de entrada con botones. Esa es probablemente la página de registro. Constará de dos partes. En el lado izquierdo, tendremos varias imágenes de los clientes. En cuanto al lado derecho, incluirá dos opciones distintas. Si queremos crear una cuenta personal o comercial. Bien, así que eso es todo sobre el proyecto. Como de costumbre, lo haremos sensible a diferentes tamaños de pantalla. Si inspecciono la página y cambio al modo responsive, verás que es responsive. Una cosa a tener en cuenta aquí, en tamaños de pantalla más pequeños, ya no tendremos los desplegables Se transformarán al menú así. Bien, entonces eso es todo. Estamos listos para comenzar a construir el proyecto. Entonces, sigamos adelante. 47. Proyecto 5 - Crear y personalizar la página de aterrizaje: Bien, creo que estamos listos para comenzar. He creado una nueva carpeta en el escritorio llamada página web de cartera, en la que tengo otra carpeta para las imágenes. Sigamos adelante y abramos este proyecto en código VS y creemos nuestros archivos de trabajo. Entonces, en general, tendremos tres archivos diferentes para HTML, CSS y JavaScript. Vamos a crearlos. Después de eso, voy a abrir el archivo index.html e insertar un documento HTML básico. Para eso, usemos Emirates. Necesitamos colocar un signo de exclamación y luego presionar Enter o Cambiemos el título. Voy a insertar el sitio web de su cartera. Entonces voy a vincular archivo CSS y JavaScript al HTML. Especifique aquí la ruta de acceso de la serie es archivo. Entonces voy a abrir la etiqueta script justo encima de la etiqueta del cuerpo de cierre. Y vamos a insertar aquí parte del archivo JavaScript en el atributo source. Además de eso, necesitamos traer un par de enlaces. A lo largo del proyecto, vamos a usar Font, iconos Awesome, y también una de las fuentes de Google. Así que sigamos adelante y busquemos Font Awesome, CDN js. Después ve al primer enlace y selecciona aquí CSS. Entonces agarra el enlace. A continuación, voy a abrir una etiqueta de enlace en los elementos head. Después pega aquí la URL. Después de eso, voy a ir al sitio web de Google Fonts. Entonces a lo largo del proyecto, voy a usar la fuente llamada geost Después te seleccionas todos los estilos diferentes excepto el Itálica. Agarra el enlace, y pegarlo en la cabeza. Bien, por último, 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 la vida del proyecto al navegador y realizar cambios y actualizaciones sin actualizar la página cada vez. Por lo que recomiendo utilizar este paquete. Bien, lo último que voy a hacer es colocar el editor y el navegador, así Y luego empezar. Construiremos el proyecto sección por sección. Al principio crearemos el marcado HTML y luego personalizaremos esta sección usando CSS Sigamos adelante y comencemos con la página de préstamos. Vamos a abrir desarrollos, que va a ser el contenedor. En realidad, quiero usar comentarios para definir el inicio y el final de cada sección. Entonces esta va a ser la primera sección. Entonces necesitamos aquí N de Sección uno que abra elemento de sección con una clase. Sección uno. Como decíamos, la primera sección va a ser la landing page. Aquí vamos a tener, encabezamientos, imagen, y el botón Vamos a abrir el elemento de encabezado H1 con una sección de clase un encabezado con el desarrollador web de texto. A continuación tendremos una imagen. Voy a seleccionar Imagen, el nombre John Smith punto JPG de la carpeta imagenes. Entonces como el valor del atributo alt, voy a pasar aquí, John Smith. Y también necesitamos atributo de clase, persona de valor, IMG. Por lo que a la imagen le sigue otro encabezamiento en el que tendremos el nombre completo de la persona. Entonces vamos a abrir el elemento de encabezado h3 con el nombre de la persona de clase e instituir a John Smith Y por último, necesitamos un botón que estará representado por el elemento link. Vamos a asignarle. La clase con valor es la sección uno, btn. Y también te inserte proyectos de texto. Bien, entonces se crea el marcado HTML para la primera sección Ahora es el momento de comenzar a escribir algo de CSS. Vamos a abrir el archivo style.css y agregar primero, crear algunos estilos de reinicio y comunes. Antes de eso voy a insertar tus comentarios, reset y estilos comunes. Y luego n de reset y estilos comunes A continuación, voy a seleccionar cada elemento usando un asterisco Así que me voy a deshacer del margen predeterminado y el relleno. Pongamos a ambos a cero. A continuación, voy a eliminar contorno por defecto con contorno ninguno. Además, vamos a establecer el tamaño de la caja border-box. A continuación, voy a deshacerme de los estilos predeterminados para el enlace y también enumerar elementos. Usemos decoración de texto ninguno. Y tipo de estilo de lista, ninguno. Después de eso, pongamos la familia de fuentes a Joseph sans-serif, que es el Y por último, voy a establecer el peso de la fuente en 400. Bien, así que vamos a ver la roseta y se aplican estilos comunes. Como de costumbre. Voy a usar una RAM como unidades de medida en este momento, una RAM 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. Y para eso, necesitamos disminuir el tamaño de fuente del HTML. Vamos a establecerlo en 62.5 por ciento. Entonces, como puede ver, los tamaños de fuente de los elementos han disminuido. Sigamos adelante y comencemos a personalizar los elementos de esta sección. Voy a insertar sus comentarios, sección uno. Y luego final de la sección uno. A continuación, seleccione elementos de sección. En primer lugar, voy a definir ancho y alto. Vamos a establecer el ancho al 100 por ciento. En cuanto a la altura, voy a fijarla al 100% de la ventana gráfica Entonces necesitamos 100 vh. Entonces voy a establecer la imagen como fondo de pantalla completa Entonces primero usemos gradiente lineal. Voy a usar su valor RGBA con color blanco y con opacidad punto A continuación, necesitamos nuevamente RGBA con color blanco y con la opacidad 0.3 Después de eso, definamos la URL de la imagen. Aquí necesitamos el camino de la imagen. El nombre de la imagen va a ser bg dot JPG. Url va a ser seguido por el centro y no repetir. Bien, por último, vamos a establecer el tamaño del fondo a cubrir. Entonces como puedes ver, esta sección tiene el fondo de pantalla completa A continuación, voy a colocar esos elementos en el centro de la página. Para eso, usemos flexbox. Necesitamos display flex. Entonces voy a cambiar la dirección porque necesitamos colocar los elementos en la columna. Entonces necesitamos flexión dirección columna. Entonces para enviar a los elementos flexibles dentro del contenedor, necesitamos justificar el centro de contenido y alinear los elementos al centro. ¿Correcto? Entonces eso es todo sobre este elemento de sección. Sigamos adelante y personalicemos los elementos individuales. Voy a comenzar con la primera partida. Vamos a seleccionarlo. Aumentar el tamaño de la fuente. Voy a hacer seis RAM. También cambia font-weight, hazlo 700. Entonces voy a poner el color del texto en blanco. Y también cambiar el color de fondo. Voy a usar aquí llamar o E para 1c6f. El rubro se ve bien, pero necesitamos agregarle algunos estilos más. Voy a crear algo de espacio dentro de los elementos usando padding. Hagamos que el relleno sea cero en la parte superior e inferior. Y tres corrieron por los lados izquierdo y derecho. Y también voy a crear algo de espacio en la parte inferior de los elementos usando margin bottom Five ran. A continuación, voy a transformar el texto en mayúsculas. Y también voy a crear algún espacio entre las letras. Entonces necesitamos que el texto transforme el espaciado entre letras mayúsculas con un valor de una rep. Después de eso, vamos a crear un borde en la parte inferior del encabezado y también crear algún efecto de sombra. Vamos a establecer para la parte inferior 2.3 RAM, sólido y el color blanco. Y luego definir sombra de texto con los valores apunta a Ram Point a RAM que una RAM. Y el color 555. Bien, lo último que voy a hacer con la rúbrica es sesgarla un poco Para eso, usemos Transform o esta función Q. Voy a sesgar los elementos menos diez grados. Bien, entonces nos dirigimos, ya terminamos. Pasemos a la imagen. Vamos a seleccionarlo. En primer lugar, definido ancho y alto. Voy a ponerlos a los dos a 25 RAM. Que para mantener la calidad de la imagen, necesitamos cubierta de alimentación de objetos. Y también para hacer circular su forma, vamos a usar border-radius, el valor 50% ¿Bien? A continuación voy a crear una frontera. Vamos a establecer su tamaño 2.7 run de lo que el estilo va a ser punteado, y el color será E para uno, C6, f. también cambiar el color de fondo Voy a usar valor RGBA con color blanco y con la opacidad 0.7 Y luego crear algo de espacio usando relleno, hazlo 0.5 RAM. Y por último, disminuir ligeramente la opacidad. Hagámoslo 0.9. Bien, eso es lo de la imagen. A continuación voy a personalizar y otros elementos de rumbo. Así que vamos a seleccionarlo, aumentar su tamaño de fuente, hacerlo rampa. Después cambia el color, hazlo blanco. Y también cambiar el color de fondo. Utilice de nuevo el color E4 uno, c, seis. A continuación, voy a crear algo de espacio en la parte superior de la cabecera y también dentro de la misma. Use margin y póngalo en cinco rem en la parte superior e inferior y cero en los lados izquierdo y derecho. En cuanto al relleno, lo voy a poner en 0.5 rem en la parte superior e inferior, y tres rem en los lados izquierdo y derecho. Después de eso, vamos a crear algo de espacio entre las letras usando el espaciado entre letras 0.3 RAM. Y también voy a sesgar ligeramente el rumbo como el primer encabezado Utilice Transformar sesgo con el valor menos diez grados. Bien, así que con el segundo encabezado, terminamos y ahora es el momento de personalizar el último elemento de esta sección, que va a ser el botón Sigamos adelante y seleccionemos este elemento. En primer lugar, cambiemos el tamaño de fuente, hagamos que se ejecute 1.7, y también fijemos font-weight en A continuación voy a cambiar el color. Hagámoslo 333 y pongamos el color de fondo en blanco. Después de eso, vamos a crear frontera. El valor es 0.3 corrió sólido y la llamamos 333. Además, quiero crear algo de espacio dentro del botón usando relleno. Vamos a establecerlo en 0.5 rem en la parte superior e inferior, y un rem en los lados derecho e izquierdo. Después transforma el texto en mayúsculas y crea algo de espacio entre las letras Hagámoslo 0.3 redondo. Bien, así que con la primera sección, ya terminamos. Se ve bien. Y ahora tenemos que seguir adelante y encargarnos de la siguiente parte, que va a ser la barra de navegación 48. Proyecto 5 - navegación de creación y estilo: En primer lugar, voy a crearlo y darle estilo y luego haremos que la barra de navegación funcione más adelante Sigamos adelante y creamos el marcado HTML. Voy a insertar tus nuevos comentarios navbar. Entonces n de no trabajar. Entonces vamos a abrir elementos de navegación HTML5 con la clase ahora aparte. Por lo que en general vamos a tener para los elementos de navegación, ellos serán representados como los enlaces. Entonces es elemento de enlace abierto con el enlace número de clase con el texto home. Sigamos adelante y duplicemos el elemento de enlace tres veces y cambiemos el contenido. El segundo ítem va a ser sobre. Entonces tendremos cartera. Por último, necesitamos contactar. Bien, así que ahora mismo el número se coloca al final de la página Entonces no es del todo factible. Necesito algo de espacio en el fondo del nanoporo para mostrarte las cosas con claridad Entonces voy a usar un par de B son etiquetas. Usemos Emmet. Tenemos que ser nuestro que asterisco y 50. Entonces ahora aquí tenemos algo de espacio. Entonces eso se dice de HTML. Sigamos adelante y comencemos a escribir el CSS. Sigamos adelante e insertemos nuevos comentarios. Navbar y luego n de elementos más nobles que seleccionar nav. En primer lugar, voy a definir la anchura y la altura. Vamos a establecer el ancho al 100 por ciento. En cuanto a la altura, hagámoslo para RAM. Y también cambiar el color de fondo. Vamos a usar aquí llamado o E para uno, C, F. Bien, continuación voy a posicionar los elementos de navegación en el sentido de la Napa. Y para eso voy a usar flexbox. En realidad, ya hemos utilizado esta técnica y la vamos a utilizar un par de veces a lo largo del proyecto. Y para evitar escribirlo una y otra vez, voy a crear una nueva clase en estilos comunes. Vamos a llamarlo centro. Y luego inserte aquí, muestre flex, justifique el centro de contenido y alinee los elementos al centro. Entonces para aplicar esos mosaicos, necesitamos asignar centro de clase a los elementos. Utilizamos esos azulejos con la Sección uno. Así que vamos a seguir adelante y asignarle un centro de clúster. Entonces deshazte de estos estilos desde aquí. Y luego asignar centro de clase al elemento nav también. ¿Bien? Entonces, como pueden ver, no se cambia nada para los préstamos. En cuanto a la barra de navegación, los artículos se colocan en el centro. Ahora mismo, lo último con respecto al Napa es crear un pequeño efecto de sombra. Entonces usemos sombra de caja con los valores apuntando a Ram. Apunte a RAM que 0.5 RAM. Y el color 555. Bien, eso es todo sobre el elemento navbar nav. Personalicemos los elementos de enlace. Entonces antes que nada, voy a cambiar el tamaño de la fuente. Hagámoslo 1.7 rem. También, voy a establecer el font-weight a 600 y luego cambiar el color del texto, hacerlo 333 Bien, a continuación necesitamos algo de espacio entre los artículos. Vamos a crear ese espacio usando margen. Voy a poner el margen cero en la parte superior e inferior. Y luego tres RAM en los lados derecho e izquierdo. Además de eso, vamos a crear espacio entre las letras. Usemos el espaciado entre letras con valor 0.3 RAM y también transformemos el texto en mayúsculas Bien, así que lo último que voy a hacer con respecto a navbar es crear un efecto hover Echemos un vistazo al proyecto terminado. Entonces, una vez que pasamos el cursor sobre los artículos, ellos cambian de color Y también se muestra la línea debajo del ítem. Esta línea se va a crear usando antes de pseudo elementos Así que sigamos adelante y seleccionemos el elemento link con antes de pseudo elementos En primer lugar, definamos el contenido. Voy a hacerlo vacío. Entonces voy a establecer el ancho en 130%. Además, defina la altura, haga que apunte a la RAM y cambie el color de fondo. Hagámoslo blanco. Entonces en estos momentos el elemento no es visible. Y para arreglarlo, pongamos la posición a absoluta. Entonces necesitamos posicionar relativo para el enlace superior porque voy a posicionar la línea de acuerdo con el elemento padre, que es una siesta o enlace. Las líneas son visibles, pero no se colocan de la manera correcta. Voy a definir las posiciones derecha e inferior. Entonces voy a establecer la posición correcta -15% porque el ancho de la línea es igual al 130% Y cuando se muestre los artículos se colocarán en el centro. En cuanto a la posición inferior, vamos a ponerla en -0.3 rondas Bien, así que todo está listo para crear un efecto hover. Por defecto, voy a ocultar las líneas. Entonces sigamos adelante y hagamos su ancho cero. Después selecciona el enlace numérico con hover, seguido del pseudo elemento before y establece el ancho Además, usemos la transición. Necesitamos aquí ancho y 0.2 s. ¿Bien? Entonces, como puedes ver, el efecto hover funciona bien. Y por último, voy a cambiar el color de los artículos en hover Así que sigamos adelante y seleccionemos ahora Berlín con hover. Después cambia de color, hazlo blanco. Y también usa transición con los valores color y 0.2 s. bien, así que todo funciona perfectamente La novela está personalizada, y ahora es el momento de pasar a la siguiente sección. 49. Proyecto 5 - Crear y personalizar barras de progreso: La siguiente sección va a ser la sección Acerca de mí. Consiste en una rúbrica, un par de barras de progreso que muestran diferentes habilidades del desarrollador y varios íconos de redes sociales con algunos servicios. Sigamos adelante y comencemos a crear el marcado HTML. Vamos a insertar nuevos comentarios, sección dos y sección dos. Esa sección de clase de elemento de sección abierta también. Por lo que dentro del elemento de sección tendrá tres partes principales. El primero va a ser el rumbo. Abramos H1 rumbo gobierno con la clase sección dos rumbo e insertemos aquí sobre mí. A continuación tendremos barras de progreso. Así que voy a abrir un elemento div, que va a ser el wrapper, firmar a él barras de progreso de clase, wrapper. Entonces, en general, tendremos siete barras de progreso. Sigamos adelante y creamos el primero, y luego lo duplicaremos seis veces. Así asignado a la barra de progreso del desarrollo. Después inserta tu párrafo con el texto de progreso de la clase. Tendremos aquí diferentes tecnologías. El primero va a ser HTML, luego open span element, que incluirá el número del porcentaje. Escribamos aquí 97, seguido del signo porcentual. Y por último, necesitamos el elemento div para el progreso. Presente. Se crea la primera barra de progreso. Duplicémoslo seis veces y luego cambiemos el contenido. Entonces el segundo va a ser CSS con 89%. Entonces tendremos JavaScript 85 por ciento. Entonces el siguiente va a ser Sass, 87%. Entonces Reacciona js 80 por ciento, NodeJS con Y por último, tendremos a Mongo DB con el 50 por ciento. ¿Bien? Entonces tenemos aquí barras de rumbo y progreso. A continuación, necesitamos crear la tercera parte de la segunda sección. Va a ser Servicios. Entonces, abramos desarrollos con los servicios de clúster. Entonces en general contaremos con cuatro servicios diferentes. Vamos a crear el primero, desarrollo abierto con el servicio de clase. Incluirá dos elementos diferentes. El primero va a ser Font, ícono Awesome. Así que abierto yo elemento con las clases, FAR, una bombilla. Entonces necesitamos el elemento de encabezado H2 con el encabezado de servicio de clase. Vamos a insertar aquí creado. El primer servicio está listo. Duplicémoslo tres veces, cambiemos los nombres de las clases y los encabezados. El segundo va a ser la resolución de problemas de corte FASFA. Entonces tendremos FAS, un medidor de tacos fuera, y el rumbo va a ser rápido. Y para el último servicio, voy a usar clases hi econ, FAS, un cohete Y como encabezamiento, vamos a insertar aquí dinámico. Bien, entonces el marcado HTML está listo. A continuación tenemos que seguir adelante y personalizar esos elementos. Sigamos adelante e insertemos nuevos comentarios. Sección dos y sección dos. A continuación, seleccione elementos de sección. Y antes que nada, definió la anchura y la altura. Voy a ponerlos a ambos. 200%. También crea algo de espacio usando relleno. Voy a establecer padding a 15 RAM en la parte superior que cero en el lado derecho. Diez corrieron en la parte inferior y cero en el lado izquierdo. Además, voy a establecer el color de fondo en blanco. Por defecto, es blanco. Pero en fin, voy a definirlo. Bien, a continuación voy a centrar los elementos horizontalmente. Usemos flexbox. En este caso, no necesitamos cluster center porque no vamos a usar todos los estilos de esta clase. Entonces necesitamos display flex, entonces tenemos que cambiar la dirección de flex. Hagámoslo columna. Luego coloca los elementos en el centro horizontalmente usando alinear elementos al centro Muy bien, veamos el elemento de sección Acerca Sigamos adelante y personalicemos el encabezado. Seleccione Sección dos encabezado. Aumentemos su tamaño de fuente, que sea cinco RAM. También cambia el color que necesitamos aquí. 333. Después transforma el texto en mayúsculas y crea algún espacio entre letras usando el espaciado entre letras, el valor 0.5 rem A continuación necesitamos algo de espacio en la parte inferior de la cabecera. Además, voy a agregarle un fondo de borde y algo de sombra a ello. Así que pongamos el margen inferior a 15 rampa. Después crea borde en la parte inferior con valores 0.3 RAM sólida, y el color 333. Y también usa sombra de texto con los valores punto a ram, punto a ram 0.5 rem y el color 555. Bien, así que eso es todo sobre el elemento de encabezado. Sigamos adelante y personalizemos las barras de progreso. Voy a seleccionar wrapper, que tiene el nombre de clase progress bars wrapper. Y crea algo de espacio en la parte inferior usando margen, valor inferior Tan alrededor. A continuación voy a seleccionar la propia barra de progreso. En primer lugar, definamos la anchura y la altura. Voy a establecer el ancho a 60 RAM. En cuanto a la altura, hagamos que sea tres RAM. Y también cambiar el color de fondo. Usa tu C. C, C. Bien. Ahora tenemos dos barras de progreso separadas, así que necesitamos algo de espacio entre ellas. Vamos a crear espacio usando margen. Voy a ponerla en 1.5, corrió como una parte superior e inferior y cero en los lados izquierdo y derecho. Además, voy a hacer las esquinas ligeramente redondeadas. Utilice border-radius con el valor 0.3 RAN. Por último, usa box-shadow con valores punto a ram, punto a ram, una RAM y el color 555 Bien, eso es lo de la barra de progreso. Sigamos adelante y personalicemos el texto. Así que selecciona Párrafo y establece su posición en absoluto. Además, necesitamos posicionar relativo para el elemento padre. A continuación, establezca la propiedad left en una sola ejecución. Después de eso, voy a aumentar el tamaño de la fuente. Hagámoslo 1.5 rem, y también hagamos que el texto sea blanco. Muy bien, después de eso, voy a personalizar los elementos span Me refiero a esos números. Entonces sigamos adelante y seleccionémoslo. En primer lugar, voy a crear algo de espacio en los lados izquierdo y derecho usando margen. Vamos a ponerla a cero ya que arriba e abajo. 0.5 rem en los lados izquierdo y derecho. Que aumentó el tamaño de la fuente, que sea 1.8 Ran. Y también cambiar el peso de la fuente. Voy a fijarlo en 700. Bien, entonces con el texto ya terminamos. Sigamos adelante y progreso de estilo elementos div por ciento. En este momento voy a establecer el porcentaje manualmente. Quiero decir, todas las barras de progreso tendrán el mismo porcentaje, pero eventualmente lo cambiaremos con JavaScript. Entonces, seleccionemos el progreso presente. Establezca su ancho en nueve por ciento. Esa es probablemente la altura. Hagámoslo al 100%. Entonces voy a cambiar el color de fondo. Vamos a usar tu color, E4, e1, ver seis F. Y también hacer las esquinas redondeadas usando border-radius con el valor 0.3 rat Bien, entonces veamos la barra, las barras de progreso. Pasemos a la tercera parte de esta sección, que van a ser los servicios. Seleccionemos el desarrollo rápido. En primer lugar, definir ancho y alto. Voy a establecer el ancho al 100%. En cuanto a la altura, hagamos que sea el 30% de la ventanilla. A continuación, voy a colocar los servicios horizontalmente en fila con algo de espacio. Y para eso voy a usar Flexbox. Vamos a usar aquí display flex. Eso con el fin de crear espacio. Me refiero incluso al espacio entre los artículos. Vamos a usar justificar el espacio de contenido de manera uniforme. Luego, para el centrado vertical, use alinear elementos en el centro Bien, así que con el envoltorio ya terminamos. Sigamos adelante y personalicemos el servicio en sí mismo. Voy a colocar elementos en el centro. Entonces usemos el centro de alineación de texto. Bien, sigamos adelante y personalicemos los iconos de Font Awesome. Entonces antes que nada, voy a aumentar el tamaño de la fuente. Hagámoslo diez RAM. Después cambia el color. Usa tu comió, comió, comió. También crea espacio en la parte inferior. Usa margin-bottom para correr. Y luego crear algún efecto de sombra. Usar texto. Sombra con un valor es 0.11, 0.1, 0.5 rem, y el color 555 Bien, veamos sobre los iconos Font, Awesome. Después de eso, tenemos que encargarnos de los rubros. Así que vamos a seleccionar el servicio H2, mayor tamaño de fuente, llegar a Ram. Cambiar color. Hazlo blanco. Además, voy a cambiar el color de fondo. Voy a usar color o 777. Y luego definir ancho, hacer que sea 25 corrió. A continuación, voy a crear algo de espacio entre las letras usando el espaciado entre letras con el valor 0.3 RAM. También va a sesgar ligeramente el rumbo. Entonces usemos Transformar sesgo con un valor de menos diez grados. Por último, voy a crear alguna sombra usando box shadow con los valores punto a ram, puntos para ejecutar 0.5 RAM, y la llamamos 555. Bien, entonces los servicios están estilizados. Casi terminamos con esta sección. Lo único que voy a hacer es cambiar las posiciones del primer y último servicio es ligeramente. Voy a moverlos hacia arriba. Seleccionemos esos elementos usando pseudo-clases de primer hijo, último Voy a seleccionar ambos simultáneamente. Luego usa align self, flex, start. Bien, entonces finalmente, terminamos con esta segunda sección. Se personaliza. Se ve bien, y ahora tenemos que pasar a la siguiente sección. 50. Proyecto 5 - Crear y personalizar sección de proyectos: La siguiente sección va a ser la sección de proyectos. Consiste en un rubro y un par de proyectos diferentes. Si pasamos el cursor sobre ellos, entonces algunos detalles se mostrarán con buenos efectos de transición Tenemos aquí también un botón, ir a video. Incluye el enlace del video adecuado en nuestro canal de YouTube. Bien, sigamos adelante y como de costumbre, comencemos a crear el marcado HTML Vamos a insertar tus nuevos comentarios. Sección tres. Después final de la Sección tres. Después abra el elemento de sección con la clase sección tres. En esta sección contaremos con dos partes principales. El primero va a ser el rumbo. En cuanto a la segunda parte, va a ser el proyecto. Abramos elementos de encabezado H1 con la clase, sección tres encabezando con el texto, mis proyectos. A continuación voy a abrir un elemento div, que va a ser el envoltorio de los proyectos. Deberías tener envoltorio de proyectos de clase. Entonces en general tendremos nueve proyectos similares. Voy a crear el primero y después lo duplicaremos ocho veces. Así que vamos a abrir una etiqueta div con un proyecto de clase. Cada proyecto tendrá tres partes diferentes. El primero van a ser los textos del proyecto, en los que tendremos dos rúbricas distintas El primero va a ser el nombre del proyecto. Abramos el elemento de encabezado H2 con un nombre de proyecto de clase e insertemos el sitio web de tu arquitecto. Los siguientes elementos del encabezado mostrarán las tecnologías que se utilizan para crear un proyecto. Entonces voy a abrir elementos de encabezado H4 con las tecnologías de proyectos de clase Insertemos tu HTML, CSS y JavaScript. Bien, sentémonos sobre la primera parte. A continuación, tenemos una imagen, elementos de imagen abierta. Especificemos aquí la ruta de la imagen. Necesitamos. Proyecta un punto JPG de la carpeta de imágenes. Y también voy a asignar a la clase de imagen atributo con valor proyecto IMG En cuanto a la tercera parte, va a ser un botón el cual se representará como el enlace. Así que vamos a asignarle enlace de proyecto de clase. Además de eso, voy a usar el atributo target con un valor subrayado en blanco Nos permitirá abrir el enlace en una nueva pestaña. Por último, insertemos aquí el texto ir al video. Bien, entonces el primer proyecto está listo. Voy a duplicarlo ocho veces y luego hacer algunos cambios. Lo primero que voy a hacer es insertar el enlace del video. En realidad, he preparado esos enlaces en un archivo de texto. Entonces voy a agarrarlos e insertarlos aquí. En realidad, puedes incluir esos enlaces o no. Depende de ti. El segundo proyecto va a ser presupuestado arriba, creado por React js. Entonces necesitamos aquí proyecto a JPEG. Y también te inserta el enlace. Bien, la siguiente va a ser la Casa Blanca, cual se crea en base a HTML, CSS y JavaScript. Entonces dejémoslos aquí como están. Después cambia el nombre de la imagen. Necesitamos proyectar tres puntos JPG e insertar aquí enlace de YouTube. Bien, A continuación tenemos Task Manager con React js. También necesitamos aquí el proyecto cuatro. Y luego el enlace. El siguiente proyecto va a ser el camino con HTML, CSS y JavaScript. Entonces necesitamos el proyecto cinco. Y también el enlace. A continuación tenemos receta de comida arriba. Se crea usando React js. Necesitamos aquí para proyectar seis. Y el enlace. A continuación tenemos presentación de diapositivas Se crea en base a HTML, CSS y JavaScript Cambiar el nombre de la imagen, necesitamos proyecto siete y luego Instituto el enlace. El siguiente proyecto va a ser el menú de hamburguesas. Se crea usando HTML, CSS y JavaScript. Además, cambiemos el nombre de la imagen. Necesitamos proyecto ocho e instituyó el vínculo. Y el último proyecto va a ser el menú CSS Grid, creado nuevamente con HTML, CSS y JavaScript. Y el nombre de la imagen va a ser Project Night. También pega aquí el último enlace. Bien, así se prepara el marcado HTML y ahora tenemos que empezar a escribir algo Vamos a insertar nuevos comentarios. Sección tres. Después final de la Sección tres. A continuación, seleccione elementos de sección. Definir su anchura y altura. Voy a ponerles a ambos el 200 por ciento. Además, voy a crear algo de espacio dentro de esta sección usando padding. Pongámoslo a diez rem en la parte superior e inferior y lo hagamos cero en los lados derecho e izquierdo. Y también cambiar el color de fondo. Voy a usar aquí el color E, F. A continuación, voy a colocar el contenido en el centro de esta sección. Para eso, usemos flexbox. Necesitamos mostrar hechos. Entonces voy a cambiar la dirección. Ves tu columna de dirección flexible. Y por último, usa alinear elementos en el centro. Bien, entonces el contenido se coloca en el centro, y ahora voy a personalizar el encabezado En realidad va a ser similar al encabezado de la sección anterior. Entonces, en lugar de escribir los mismos estilos una y otra vez, voy a asignar a ambos encabezados, los mismos nombres de clase, y los estilos se aplicarán a ambos al mismo tiempo Entonces usemos el encabezado de la sección de clase y también cambiemos la clase en el archivo CSS también. Y luego coloca esos mosaicos en estadísticas comunes. Entonces, como puedes ver, el encabezado de la tercera sección está estilizado Pasemos a los proyectos. Voy a seleccionar la etiqueta div wrapper. Definamos ancho, hazlo 80%. Entonces voy a colocar proyectos en el centro de la envoltura. Y para eso, quiero usar flexbox. Y en realidad en vez de escribir estas toallas aquí, vamos a usar el centro de clúster, que hemos preparado previamente. Y además de eso, voy a usar flex wrap con el value wrap. Entonces, como puedes ver, los proyectos se colocan uno al lado Sigamos adelante y personalicemos el proyecto en sí. En primer lugar, voy a colocar el contenido del proyecto en el centro para eso, necesitamos volver a usar, los libros flux. Podemos o bien asignar a cada centro de clúster de proyectos o podemos definir de nuevo, esto dice aquí. En este caso, usemos las propiedades de flexbox aquí en CSS porque asignar clúster a cada proyecto llevará más tiempo Entonces necesitamos display flex, luego flex direction, column. Necesitamos justificar el centro de contenido y alinear el centro de elementos. Siguiente Voy a crear algún espacio entre los proyectos. Hagámoslo usando el margen. Voy a configurarlo en una RAM. También como color de fondo definido. Hazlo blanco. Y por último, usa box shadow con los valores 0.3, 0.3 RAM que 0.5 rem. Y a esos los llamamos 777. Bien, eso es todo sobre el proyecto ahora mismo. Sigamos adelante y personalicemos los elementos del proyecto. Y entonces crearemos un efecto hover. Voy a seleccionar textos de proyectos. Vamos a asignar a un centro de alineación de texto Y también necesito espaciado lateral para todos los elementos incluidos Hagámoslo 0.1 corrió. Después de eso, vamos a seleccionar el nombre del proyecto. Cambia su tamaño de fuente, hazlo tres redondos. Entonces voy a establecer el peso de la fuente en 700. También define el color, hazlo 333. Y finalmente, voy a hacer nombres de proyectos se capitalicen usando la transformación de texto Capitalizar. El rumbo se ve bien. Sigamos adelante y personalicemos las tecnologías que se seleccionen. Voy a cambiar el tamaño de la fuente. Hagámoslo 1.8 RAM, y luego pongamos color a E4, e1 Ver seis F. Bien, continuación voy a disminuir el ancho de la imagen que se selecciona y hacer su ancho para dram. Bien, así que finalmente, necesitamos personalizar el enlace. Entonces sigamos adelante y seleccionémoslo. Al principio. Vamos a definir el tamaño de fuente, hacer que se ejecute. Después cambia font-weight, hazlo 500. Voy a establecer llamado a2, a3, a3, a3. Y también crea espacio entre las letras. Hagámoslo 0.1 corrió. Después de eso, voy a crear una frontera. Vamos a asignar valores de verdad punto, corrimos sólidos y el color E4, e1, ver seis F. Entonces voy a crear algún espacio dentro del enlace usando padding. Hagamos que sea cero en la parte superior e inferior y un rem en los lados derecho e izquierdo. Y por último, establece el color de fondo en blanco. Bien, así que todos los elementos están personalizados y ahora tenemos que crear un efecto hover Sigamos adelante y comencemos con un texto de proyecto. Voy a definir esta posición. Hagámoslo absoluto. Entonces necesitamos posición relativa para el proyecto, que es el elemento padre. Y luego establecer una propiedad superior a menos diez rampa. Entonces, como puede ver, se cambia la posición del impuesto del proyecto. Seleccionemos el proyecto con el hover, seguido de los textos del proyecto Digamos posición superior a cinco RAM. Y luego usar transición con un valor es top 0.3 s. ¿Bien? Entonces, una vez que pasemos el cursor sobre los proyectos el impuesto al proyecto se moverá de arriba a abajo Ahora quiero hacer lo mismo para el elemento link. Cambiemos su posición. Voy a ponerla en absoluto. Entonces necesitamos la posición inferior menos cinco RAM. Después de eso, voy a seleccionar proyectos con hover, seguido del enlace del proyecto Entonces al flotar, voy a poner botón a fibrina. Y también voy a usar transición con valores partidistas 0.37 Bien, así que ahora si pongo el cursor sobre el elemento de enlace estándar del proyecto también se moverá Después de eso, voy a disminuir la opacidad de la imagen Sigamos adelante y seleccionemos el proyecto que flotaría seguido de la imagen del proyecto Entonces voy a establecer la opacidad a 0.2. Además, usemos transición con los valores opacidad 0.3 s. Así que ahora el efecto se ve mejor Y a continuación voy a ocultar el contenido por defecto. Para eso, asignemos desbordamiento oculto al proyecto. Ahora el contenido está oculto por defecto. Y una vez que pasemos el cursor sobre los proyectos, ellos se mostrarán. Tenemos aquí un pequeño tema. Los textos del proyecto terminan detrás la imagen y no podemos seleccionarla. Entonces voy a usar el índice Z con un valor, digamos diez. ¿Bien? Entonces ahora el problema está arreglado. Lo siguiente que quiero hacer es agregar algo de tiempo de retraso a los textos del proyecto y también al enlace. Una vez que pasamos el cursor sobre el proyecto primero, quiero disminuir la opacidad de la imagen y luego mostrar el contenido Pero una vez que salimos del mouse, entonces ya no necesitamos un retraso. Por lo tanto, necesitamos usar la transición con la pseudo-clase hover Vamos a usar tu top con una duración 0.3 s. Y luego se especifica el tiempo de retardo 0.3 s. A continuación necesitamos hacer transición con bottom y con duración 0.3 s y el tiempo de retardo 0.3 s también. Bien, entonces ahora tenemos un efecto mucho mejor. Lo último que quiero hacer con esta sección es crear un efecto de sombra al flotar Entonces, seleccionemos proyecto con hauler y fijemos la sombra de caja en una sola carrera Después un one rem, y luego otra vez una RAM con el color 777. Y por último, usemos transición con el cuadro de valores shadow, 0.5 s. ¿Bien? Entonces el efecto sombra funciona bien. Y en realidad ya terminamos con esta sección. Ahora tenemos que seguir adelante y crear la sección de contenido 51. Proyecto 5 - Sección de contacto de creación y estilo: La sección de contacto va a ser sencilla. Tendremos un encabezado y un par de campos de entrada con este botón de enviar. Sigamos adelante y comencemos a crear el marcado HTML. Vamos a insertar nuevos comentarios. Sección cuatro, luego n de sección cuatro. Y elemento de sección abierta con una horquilla de sección de clase. Entonces en general vamos a tener dos partes distintas. El primero va a ser el rumbo. Entonces es elementos de encabezado H1 abiertos. Voy a asignar al rubro dos clases distintas. El primero va a ser el encabezado de sección de nombre de clase común. En cuanto a la segunda va a ser la sección de clase individual para encabezar como texto. Vamos a insertar aquí, contáctame. Bien, así que eso es todo sobre el rumbo. La segunda parte de esta sección van a ser los elementos formados. Vamos a abrirlo con el formulario de contacto de la clase. Por lo que el elemento formulario incluirá dos entradas, área de texto y el botón de enviar. Vamos a abrir el elemento de entrada con el texto de tipo. Y donde está el atributo placeholder, que va a tener value name que voy a duplicar este elemento Cambiar el tipo. Voy a usar tu correo electrónico, y luego cambiar el valor del atributo placeholder. Hagámoslo por correo electrónico. A continuación tendremos área de texto. Voy a asignarle un atributo de marcador de posición con un mensaje de valor Y finalmente, necesitamos un botón de envío que se va a crear usando los elementos de entrada. En este caso, se va a presentar el tipo. Entonces necesitamos presentar valor. Y también voy a usar tu contacto de clase para BTN. Bien, entonces se prepara el marcado HTML. Como puedes ver, el encabezado tiene algunos estilos, pero en estos momentos no se ve del todo bien. Lo arreglaremos en un minuto. adelante e insertemos nuevos comentarios en la sección del archivo CSS para el final de la sección cuatro. A continuación, seleccione elementos de sección. Y antes que nada, definir ancho y alto. Voy a establecer ancho 200 por ciento. Para la altura. Hagámoslo 70% de la vista. Y también cambiar el color de fondo. Hazlo 333. Bien, a continuación voy a colocar el contenido en el centro. Y para eso, usemos flexbox. Necesitamos display flex, flex direction columna. A continuación, voy a centrar el contenido horizontalmente. Para ese uso, alinee los elementos al centro. Y por último, con el fin de crear algún espacio entre los elementos flex, usemos justifique el espacio de contenido de manera uniforme. Bien, así que eso es todo sobre este elemento de sección. Sigamos adelante y nos ocupemos del rumbo. Ahora mismo. algunos estilos predeterminados de esta clase de encabezado de sección. Y voy a cambiar su color. Entonces, seleccionemos la sección para el encabezado y hagamos el color blanco. Después se deshace de la sombra de caja. Voy a establecerlo en none y también cambiar el color del borde usando la propiedad de color del borde. Hagámoslo blanco. Bien, entonces el encabezado está personalizado y ahora tenemos que pasar a los elementos del formulario. Sigamos adelante y lo seleccionamos y definamos el ancho. Voy a fijarlo a 50 rem. A continuación voy a colocar los artículos verticalmente en una columna, y también los voy a colocar en el centro. Entonces necesitamos usar flexbox. Y en este caso, vamos a asignar al elemento form class center. Y luego cambiar la dirección del flex, convertirlo en una columna. Los campos de entrada y los botones están alineados, y ahora voy a darles estilo. Seleccionemos entradas y área de texto juntos. Después define el ancho, hazlo al 100%. Luego crea algo de espacio dentro de los campos usando relleno. Hagámoslo 0.5 rem en los cuatro lados. Y además de eso, voy a crear espacio en la parte superior e inferior de los campos usando margin, vamos a establecerlo en 0.5 rem en la parte superior e inferior y cero en los lados derecho e izquierdo. A continuación, voy a cambiar el color de fondo. Vamos a usar tu color E F. También cambia el tamaño de fuente, hazlo 1.5 g. Luego crea borde con el punto de valores para correr sólido. Y el color E4, e1, C6, F. Y finalmente, cambia el color del texto, hazlo 555 Bien, a continuación, voy a personalizar el área de texto. Como sabes, puedes aumentar o disminuir su ancho y altura manualmente. Y en realidad no lo necesitamos porque va a romper el layout. Así que vamos a seleccionar el área de texto. En primer lugar, definamos esta altura, que sea diez rampa. Y luego voy a definir la altura máxima y una anchura máxima. Vamos a establecer max high a 15 RAM. En cuanto al max-width, hagámoslo al 100% Bien, así que eso es todo sobre el área de texto. El último elemento que voy a darle estilo es el botón de enviar. Entonces sigamos adelante y seleccionémoslo. Necesitamos aquí para seleccionar ese primer formulario de contacto, seguido del formulario de contacto BTN Cambiemos el color de fondo. Ves tu color. Si por 1c6f, entonces cambia el color del texto, hazlo blanco. Además, voy a transformar texto en mayúsculas. Entonces crea algo de espacio entre las letras. Vamos a convertirlo en una RAM. Y finalmente cambiar el tipo de la más basta, hazlo puntero. Entonces todos los elementos están estilizados y con la sección de contenido estamos hechos A continuación, tenemos que seguir adelante y personalizar la última sección del proyecto, que va a ser el pie de página 52. Proyecto 5 - Crear y Style Footer: En realidad, antes de pasar al pie de página, quiero disminuir el espacio entre el encabezado y los campos de entrada porque creo que es demasiado grande. Así que pongamos el margen inferior a cinco Ran. Bien, ahora es mejor. Entonces el pie de página va a ser uno simple como la sección de contacto, donde tendremos un par de íconos de redes sociales y el texto de copyright. Sigamos adelante y comencemos a crear el marcado HTML. Inserta tus nuevos comentarios sección cinco. Sección cinco. A continuación, abra el elemento de pie de página HTML5 con la sección de clase cinco. Tendremos dos partes distintas. El primero van a ser los íconos de las redes sociales. Vamos a abrir el elemento div con una clase social media. En general, tendremos cuatro iconos diferentes. Vamos a abrir elemento de enlace con un enlace de redes sociales de clase. E inserta tu icono Font Awesome. Las clases serán FAB, a, GitHub, cuadrado. Luego duplique el elemento de enlace tres veces y cambie los nombres de las clases. El segundo va a ser f a b, f a YouTube. Entonces tendremos f a b, f a una plaza de Facebook. Y por último, la última va a ser la raíz cuadrada de Instagram. Bien, eso es lo de la primera parte. A continuación, voy a crear un párrafo que incluirá algún texto de copyright. Asignemos a la clase copyright e insertemos nuevos derechos de autor, seguido del signo de copyright. Va a ser la entidad HTML5. Necesitamos ampersand, copy, punto y coma, luego escribir código Todos los derechos reservados. Bien, así que con el marcado HTML, ya terminamos. Sigamos adelante y personalicemos esta sección. Insertemos aquí nuevos comentarios, sección cinco. Y toda la sección cinco. A continuación, seleccione los elementos de pie y defina ancho y alto. El ancho va a ser del 100%. En cuanto a la altura, voy a ponerla 30% de la vista. Entonces, finalmente, cambia el color de fondo. Va a ser 222. Bien, Siguiente voy a colocar el contenido en el centro usando Flexbox Así que vamos a asignar al centro de clase elemento pie y luego cambiar la dirección de flexión columna. Con un elemento de pie de página. Ya terminamos. Sigamos adelante y personalicemos los íconos de las redes sociales. Vamos a seguir adelante y seleccionar los elementos div envoltorio, que tiene clase social media y establecer margen en la parte inferior a cinco rondas. A continuación voy a seleccionar los elementos de enlace. Entonces voy a crear espacio en los lados izquierdo y derecho de los enlaces usando margin. Vamos a ponerla a cero en la parte superior e inferior y dos rem en los lados derecho e izquierdo. Además de eso, voy a crear algo de espacio dentro del enlace usando padding. Vamos a establecerlo en 0.7. Rem en los cuatro lados. También cambia el color de fondo. Voy a usar aquí el color E para 1c6f. Y finalmente, usemos border-radius con valor 0.5 g Bien, sigamos adelante y diseñemos los íconos, seleccionemos elementos Aumentemos el tamaño de la fuente, hagamos que se ejecuten tres, y también cambiemos el color, hagámoslo blanco. Entonces, como puedes ver ahora mismo, los elementos de enlace no se ven del todo bien. Por defecto, son elementos inline y tenemos que hacerlos bloque inline. Entonces ahora se ven mucho mejor. Bien, entonces con los íconos de las redes sociales, terminamos. Y por último, tenemos que personalizar el texto de copyright. Sigamos adelante y seleccionemos un párrafo. Cambiemos el color, que sea a. entonces voy a aumentar el tamaño de la fuente, hacerlo a Ram. Crea algo de espacio entre las letras usando puntos de espaciado entre letras a la RAM. Además, voy a hacer que la fuente sea más ligera. Vamos a establecer el peso de la fuente al 300. Y finalmente, texto alineado en el centro. Bien, así que con el pie de página, ya terminamos y en realidad todas estas secciones están estilizadas Ahora estamos listos para agregar algunas funcionalidades a nuestro sitio web usando JavaScript 53. Proyecto 5 - Hacer que las barras de progreso y de Navbar funcionen con JavaScript: Bien, así que lo primero que voy a hacer es hacer la barra de navegación fija mensual se desplace hacia abajo y llegue a ella Así que vamos a crear una nueva clase y CSS, voy a llamarlo pegajoso. Vamos a definir la posición, hacerla fija. Y también establecer la propiedad superior a cero. Entonces agregaremos este número de clúster una vez que nos desplazemos hacia abajo y lleguemos a ocho. Abramos el archivo script.js y antes que nada, seleccionemos suficientes elementos. Crear nueva variable, llamarlo ahora bar y seleccionar elemento nav usando el método selector de consultas. Así que de nuevo, una vez que nos desplazamos hacia abajo y alcanzamos el número, necesitamos asignarle una nueva clase pegajosa. Así que necesitamos usar un scroll eventos. Tenemos que adjuntar al método de objeto ventana global llamado detector de eventos, que tomará dos argumentos El primero va a ser scroll de eventos. En cuanto a la segunda va a ser la función callback, que se ejecutará una vez que se desencadene el evento scroll Entonces ahora voy a usar dos propiedades diferentes. Se llaman offset de página y offset top. Así que voy a correr por la consola, ambos, y mostrarte cómo funcionan realmente. Vamos a correr a la página de puntos de la ventana de la consola, desplazamiento y la parte superior de desplazamiento. Inspeccionemos la página. Cambie a la pestaña Consola, comience a desplazarse. Entonces la primera propiedad, me refiero a la página Y offset, devuelve la distancia en píxeles que también se han desplazado verticalmente hacia arriba El segundo inmueble, muestra la distancia desde el borde superior de la página hasta el elemento, en este caso el Naropa Una vez que esos valores son iguales, entonces significa que ahora ha llegado al borde superior de la página. Y para demostrarlo, voy a usar una sentencia if, vamos a instituir la condición ventana punto página Y offset es mayor o igual a. Ahora barra de punto offset superior. Y luego corre a la consola algún texto, Digamos pegajoso. Una vez que empecemos a desplazarnos hacia abajo y enriquecer la barra de navegación, entonces nos pondremos pegajosos en la constante Entonces si esta condición es verdadera, entonces tenemos que agregar a la clase navbar sticky Y si es falso, entonces tenemos que quitarlo. Entonces, deshagámonos de un registro de consola e insertemos aquí. Ahora Upwork lista de clases de puntos. En realidad clase lista tiendas de propiedades de las clases que tiene el elemento. A continuación, necesitamos un método llamado add, y tengo que especificar clustered sticky en el paréntesis En cuanto a la declaración else, como dijimos, necesitamos eliminar sticky de la barra de navegación Necesitamos ahora bar punto lista de clases, punto eliminar. Y entonces la clase es pegajosa. Entonces, si nos desplazamos hacia abajo, entonces el número se volverá pegajoso. Pero tenemos aquí un par de temas. Termina detrás de los elementos. Y también si nos desplazamos hacia arriba, entonces el número seguirá siendo pegajoso en la parte superior de la página. Entonces para arreglar eso, tenemos que almacenar ahora desplazamiento de barra en la variable. Así que vamos a crear nueva variable y llamarla ahora más offset top, asignado a ella ahora, no offset top. Además, pasa la variable aquí. Entonces lo estamos haciendo porque compararemos el desplazamiento de página con la posición inicial de la barra de navegación Además, necesitamos definir el índice Z por ahora. En primer lugar, pongamos la posición a absoluta. Y entonces usas índice Z con algún valor mayor, digamos 300. Bien, entonces la barra de navegación funciona bien. A continuación voy a hacer los enlaces de la barra de navegación resaltados cuando lleguemos a la sección adecuada Pero eso al principio vamos a seleccionar todas estas secciones y también todos los enlaces de la barra de navegación Vamos a crear una nueva variable y secciones de colegas. Voy a seleccionar todas las secciones usando el selector de consultas todo método. Tenemos que especificar aquí la sección del nombre de la etiqueta. A continuación, seleccionemos ahora Enlaces de barra. Voy a utilizar de nuevo el selector de consultas todo el método. Especificemos aquí el nombre de la clase. Ahora barra de enlace. Crearemos una nueva clase en CSS llamada Change, en la que definiremos los mismos estilos que usamos en hover Entonces sigamos adelante e insertemos aquí. Más cambio seguido del enlace Navajo. Como ves, no usamos aquí el espacio. Vamos a establecer el color en blanco. A continuación, voy a seleccionar de nuevo cambiar con enlace navarra, seguido del pseudo elemento antes Establezca el ancho en 130%. Bien, después de eso, tenemos que revisar estas secciones y verificar si llegamos a la sección adecuada Así que tenemos que adjuntar dos secciones para cada método de ayuda de matriz. Pasemos una función de devolución de llamada con una sección de parámetros, que va a ser la sección actual a lo largo del bucle Entonces ahora tenemos que verificar si nos desplazamos hacia abajo hasta la sección adecuada Entonces necesitamos cada declaración con una siguiente condición. Ventana. Desfase Y de página mayor o igual que la parte superior de desfase de sección. En realidad quiero destacar ahora Berlín tinta un poco antes una vez que nos desplazamos hacia abajo. Entonces voy a restar diez píxeles a la propiedad offset Entonces, si esta condición es cierta, entonces necesitamos resaltar el enlace de la barra de navegación Y para ello, tenemos que añadir a la función callback un nuevo parámetro I, que va a ser el índice Y ahora tenemos que añadir dos enlaces novedosos, el cambio de clase. Necesitamos ahora Bar Links. Entonces tenemos que especificar el número de índice entre corchetes. A continuación, debe ser seguido por la propiedad class list con el método ADD. Y tenemos que especificar el cambio de clase entre paréntesis. Entonces, si nos desplazamos hacia abajo se resaltará el número de enlaces. Pero como pueden ver, tenemos aquí un pequeño problema una vez que seguimos desplazándonos hacia abajo que se resaltan las secciones anteriores y en realidad no necesitamos eso. Para solucionar ese problema, tenemos que recorrer los enlaces novedosos y eliminar el cambio de clase de todos ellos. Entonces necesitamos agregar el cambio de clase al enlace necesario. Así que tenemos que adjuntar a enlaces novedosos para cada método de ayuda de matriz. Luego pasa aquí la función de devolución de llamada con el parámetro que va a ser elemento actual en todo el bucle Entonces como dijimos, tenemos que eliminar el cambio de clase de los enlaces de la barra de navegación Entonces necesitamos ahora enlace de barra, lista de clases de nodo, eliminación de puntos, cambio de clase. ¿Bien? Ahora el problema está solucionado y nuestros enlaces están resaltados correctamente. Bien, entonces hay una cosa más con respecto a navbar. Cuando hacemos clic en el número de enlaces, entonces debemos ir a la sección adecuada con efecto de desplazamiento suave Para hacer eso al principio, necesitamos asignar al elemento HTML la propiedad llamada scroll behavior con el valor smooth. A continuación, necesitamos asignar a cada sección elementos y atributo ID. Voy a usar el multi cursor. Nuevamente, necesitamos el atributo ID, y cada uno de ellos debe tener el valor adecuado. Estoy en este nombre de sección que necesitamos en la sección uno, la sección dos, la sección tres y la sección cuatro. Después de eso, necesitamos asignar a los atributos de referencia h de los enlaces de la barra de navegación los valores adecuados Esos valores deben coincidir con los valores de los atributos. Por lo tanto, necesitamos aquí la sección uno, la sección dos, la sección tres y la sección cuatro. Y por último, voy a asignar al atributo h reference de los proyectos parte inferior de la sección tres, ya que cuando hacemos clic en el botón de proyectos, debemos navegar a la sección de proyectos. Si hago clic en la perilla o enlace, entonces navegaremos a las diferentes secciones. Además, si hago clic en el botón de proyectos, entonces iremos a la sección de proyectos. En realidad tenemos aquí un pequeño problema. Si hago clic en los iconos de las redes sociales y el pie de página, entonces navegaremos hasta la parte superior de la página con desplazamiento suave. En realidad no lo necesitamos. Entonces voy a insertar ninguno como el valor de h atributos de referencia. Entonces ahora el problema está arreglado y en realidad dentro de Alberta ya terminamos. A continuación, voy a encargarme de las barras de progreso. Entonces necesitamos sentir barras de progreso una vez que aparezcan en la página. Y para poder gestionarlo, nuevamente, necesitamos la ayuda de la página Y, offset y offset top propiedades Primero voy a seleccionar barras de progreso envoltorio. Vamos a crear una nueva variable. Voy a llamarlo progreso. Y luego seleccione el envoltorio de barras de progreso usando el método QuerySelector Vamos a especificar aquí el envoltorio de barras de progreso de nombre de clase. A continuación necesitamos una declaración if en la que necesitamos la siguiente condición. Página de punto de ventana Desplazamiento Y más altura interior de punto de ventana. Por lo que esta suma debe ser mayor o igual para compensar la parte superior del progreso. Usamos aquí ventana punto altura interior, y lo agregamos a la ventana, el desplazamiento de página. Entonces la ventana, la altura interior devuelve la altura de la ventana, altura del contenido que es visible en la página. Si esta condición es cierta, entonces significa que las barras de progreso empiezan a aparecer y tenemos que llenarlas de acuerdo a sus valores porcentuales. Voy a crear una matriz donde almacenaremos esos valores porcentuales. Vamos a crear nueva variable y llamarla barra de progreso presenta. Pasemos aquí los siguientes valores. Necesitamos 90, 780-985-8780 Entonces voy a establecer el ancho de los elementos div persona progreso a cero. Ahora mismo equivale al 90%. Entonces voy a seleccionar avances, presentar desarrollos. Entonces voy a mirar a través de ellos y definir su ancho a partir de esta matriz. Así que vamos a seleccionar el progreso presente usando el método QuerySelector all Eso es instituto nombre de clase progreso presente. Debe ser seguido por el método ForEach. Pasemos tu función de devolución de llamada, que tomará dos parámetros El primero va a ser el ítem actual de la lista. Llamémoslo elementos, quiero decir EL. Y también necesitamos índice para definir el ancho adecuado a partir de la matriz para cada elemento. Entonces como el bloque de código, tenemos que insertar aquí elemento estilo punto, ancho de punto. Después abre las garrapatas traseras. Agarra los valores de la barra de progreso presenta matriz. Tenemos que indicar el número índice entre corchetes como i, seguido del presente. Entonces, como puede ver, las barras de progreso se llenan de acuerdo a los valores porcentuales. Sigamos adelante y agreguemos un efecto de transición a ellos. Aquí está la transición con los valores width. Entonces necesitamos duración 0.5 s. Luego el tiempo de retardo 0.5 s. Y también usar una de las funciones de temporización de transición llamadas facilidad de entrada, salida. Entonces ahora las barras de progreso se sienten con un bonito efecto de transición. Lo último que quiero hacer es mostrar esos valores porcentuales de JavaScript dinámicamente. En este momento son valores codificados en documento HTML. Entonces necesitamos tener acceso a este span elementos para eso al principio, obtener acceso al párrafo. Así que tenemos que escribir aquí elementos punto elementos anteriores hermano. Una vez que tenemos acceso al párrafo, entonces tenemos que encontrar sus elementos hijos, que es el span. Entonces necesitamos usar la propiedad llamada primer elemento hijo. Y necesitamos cambiar su contenido usando texto. Propiedad de contenido. Debe ser igual a la barra de progreso presenta con el número de índice i. fin de ver claramente que mostramos los valores GI de la persona desde JavaScript, vamos a eliminarlos del archivo HTML de punto índice. Bien, así como pueden ver, todo estuvo a la perfección y con barras de progreso, ya terminamos Antes de seguir adelante y comenzar a hacer que el proyecto sea receptivo, necesito hacer un par de cosas en JavaScript. Entonces todas esas cosas, quiero decir, todo este bloque de código aquí se ejecuta. Una vez nos desplazamos por la página. En realidad, quiero ejecutar este código una vez por defecto antes de desplazarnos. Para evitar algún comportamiento inesperado y extraño de la página web. Para eso, voy a crear una función, llamémosla F principal, y luego agarrar todo este bloque de código y pegarlo aquí. Entonces voy a llamar a esta función dos veces. Al principio, llamémoslo fuera de este pergamino eventos en un alcance global. Y la segunda vez debería llamarse dentro de un evento scroll. Quiero decir dentro de la función de devolución de llamada. ¿Bien? Entonces, debido a eso, todo el código JavaScript está funcionando en función de propiedades como desplazamiento de página y desplazamiento superior. Entonces podríamos enfrentar algunos problemas cuando cambiemos el tamaño de la ventana. Entonces necesitamos recargar la página. Una vez que cambiemos el tamaño de la ventana, voy a usar resize event Adjuntemos el oyente de eventos al objeto de ventana global. A continuación, especifique el tipo de evento. Se va a redimensionar. Además, necesitamos aquí una función de devolución de llamada. Entonces, para recargar la página, necesitamos ubicación de punto de ventana, recarga de puntos Entonces si cambio el tamaño de la ventana, entonces la página se rebelará Bien, así que eso es todo sobre JavaScript. Ahora es el momento de pasar a la última parte de nuestro proyecto. Voy a hacer que el proyecto sensible a diferentes tamaños de pantalla. 54. Proyecto 5 - Hacer que responda al proyecto: En realidad, antes de empezar a escribir el código, voy a pausar el último código que hemos escrito en JavaScript porque tendremos que cambiar el tamaño de la ventana muchas veces A continuación, voy a inspeccionar la página y cambiar al modo responsive. Como dijimos al inicio de este tutorial, construimos este proyecto en gran tamaño de pantalla con un ancho de 1920 píxeles y una altura de 1080 píxeles. Ya he preparado los puntos de interrupción en los que necesitamos hacer los cambios, así que no voy a perder el tiempo en eso aquí Entonces el primer punto de interrupción en el que necesitamos hacer algunos cambios va a ser de 1,200 píxeles Así que vamos a insertar nuevos comentarios, responsivos e insensibles Entonces voy a crear media query CSS, donde tenemos que especificar el ancho máximo. Como dije, van a ser mil 200 píxeles. Tenemos que personalizar la segunda sección. Voy a colocar servicios en dos líneas. Así que vamos a seguir adelante y seleccionarlos. Quiero decir, el elemento div wrapper. Ajustemos la altura a oral. Y también voy a configurar flex wrap para envolver. Además de eso, seleccionemos el servicio en sí y refinemos el margen. Voy a configurarlo a tres rem en la parte superior e inferior y dos RAM en los lados derecho e izquierdo. La segunda sección se ve bien. Sigamos adelante y personalicemos la sección de contacto. Lo único que voy a hacer es cambiar la altura de esta sección. Hagámoslo 80 altura de la ventanilla. Entonces creo que eso es todo en el punto de ruptura. El siguiente va a ser de 800 pixeles. Así que vamos a seguir adelante y crear nueva consulta de medios CSS. Especifique el ancho máximo como 800 píxeles. En este punto de interrupción, voy a disminuir el tamaño del encabezado en la landing page Y también voy a disminuir el ancho de las barras de progreso. Entonces, sigamos adelante y seleccionemos el encabezado de la Sección uno. Establece el tamaño de fuente dos para RAM. Después selecciona barra de progreso y haz que su ancho 50 corra. Entonces todas las demás secciones se ven bien y tenemos que pasar al siguiente punto de interrupción El siguiente punto de interrupción va a ser de 600 píxeles. Así que vamos a seguir adelante y crear nueva consulta de medios CSS y especificar max-width Hazlo 600 pixeles. Sigamos adelante y disminuyamos el tamaño del rubro en el préstamo. Seleccione el encabezado de la Sección uno y establezca su tamaño de fuente en tres rampas. Entonces necesitamos personalizar la barra de navegación. Así que vamos a seleccionar el margen definido por el enlace numérico. Voy a ponerla a cero en la parte superior e inferior y dos rem en los lados izquierdo y derecho. También cambia el tamaño de fuente, hazlo 1.5 corrió. Sur de Alberta. Se ve bien. Pasemos a la sección para seleccionarla y establecer el relleno en los cuatro lados para dar la vuelta. Voy a seleccionar la rúbrica de la Sección dos. Eso ha disminuido. Margen en la parte inferior. Hazlo para dar la vuelta. Y entonces voy a disminuir el ancho de la barra de progreso. Hagámoslo 45 rem. A continuación voy a establecer el ancho de la imagen del proyecto 200 por ciento. También disminuye el ancho de los elementos del formulario. Establezca el ancho en 40 RAM. Y por último, voy a disminuir el ancho del texto de copyright. Hagámoslo 70%. Bien, así que todo queda bien en el punto de ruptura. Sigamos adelante y comencemos a trabajar en el siguiente, que va a ser de 500 píxeles. En realidad, en el punto de interrupción, voy a disminuir el tamaño de fuente del HTML ahora mismo equivale a 62.5 por ciento Y voy a hacerlo 55 por ciento. Bien, entonces no necesitamos hacer nada más en 500 pixeles. Pasemos al siguiente punto de ruptura, que va a ser el último Vamos a crear nuevos medios CSS y establecer el ancho máximo en 450 píxeles. Voy a disminuir de nuevo el tamaño de fuente del HTML. Hagámoslo 45%. Después disminuir el tamaño de esta sección un encabezamiento. Voy a hacer 2.5 RAM. Después de eso, voy a disminuir el espacio entre los enlaces de la barra de navegación Seleccionemos ahora bro link y pongamos el margen a cero en la parte superior e inferior y 1.5 rem en los lados derecho e izquierdo. Bien, a continuación vamos a alinear rumbo de esta segunda sección vCenter Utilice el centro de alineación de texto, y también disminuya el ancho de la barra de progreso. Hazlo para correr. Bien, entonces creo que hemos terminado porque todo se ve bien Entonces podemos decir que nuestro proyecto responde a diferentes sitios. Hemos terminado de trabajar en nuestro proyecto. Por último, voy a deshacerme de esos comentarios desde aquí. Bien, entonces el proyecto está terminado. Ojalá fuera interesante y servicial y aprenderás algunas cosas nuevas. Ahora podemos continuar y construir el siguiente proyecto. 55. Proyecto 6 - Previsualización de proyecto: Bien, así que es hora de comenzar a crear nuestro próximo proyecto Va a ser sobre algo así como autos clásicos. En este video, voy a repasar el proyecto y mostrarte de qué se trata. El proyecto consta de un par de secciones. La primera sección es sencilla. Tenemos aquí solo el rumbo y la imagen del auto. A continuación tenemos una sección llamada curso popular, que incluye tres tarjetas distintas del curso popular. Las tarjetas tienen un pequeño efecto de hover. Después de eso llega a la galería de videos. Tenemos aquí dos filas de los videos. Por defecto no están jugando, pero una vez que pasemos el cursor sobre ellos, comenzarán a jugar Bien, así que después de la galería de videos, tendremos una galería de imágenes va a ser una sección interesante Como pueden ver, tenemos aquí dos estantes diferentes con tres imágenes en cada una de ellas. Las imágenes tienen algunos efectos de hover agradables. En esta sección, aprenderás sobre cómo crear elementos 3D usando CSS. A continuación viene la sección de contacto con un par de campos de entrada y el botón de enviar. Y abajo tenemos el párrafo con algún texto de copyright. Bien, entonces esas son las cinco secciones de este proyecto. Además de eso, puedes ver aquí el ícono del menú fijo. Si hago clic en él, entonces las líneas se transformarán en una x. El número se mostrará. Estas acciones girarán muy bien en el entorno 3D. Si hago clic en los diferentes enlaces de navegación, entonces navegaremos a las secciones adecuadas con un efecto suave. ¿Correcto? Entonces ese es el proyecto que vamos a estar construyendo a lo largo de esta sección. Además de eso, el proyecto responde a diferentes tamaños de pantalla. Si inspecciono la página, cambio al modo responsive y compruebo el proyecto, encontrarás que es responsive y se ve bien en diferentes tamaños de pantalla. Bien, Al igual que los proyectos anteriores, quiero recordarles una cosa, el proyecto se construye usando un enfoque de escritorio primero. Está construido para un tamaño de pantalla extra grande. Tamaño de pantalla con 1920 píxeles de ancho y 1080 píxeles de alto. Entonces, si estás usando un tamaño de pantalla relativamente más pequeño y el proyecto podría no verse bien durante las conferencias. Pero no tienes que preocuparte al final del día, nosotros lo haremos receptivo. Mientras tanto, puede usar el modo de respuesta, especificar el ancho y la altura del tamaño de pantalla extra grande y seguir el proyecto 56. Proyecto 6 - Crea marcadores HTML para aterrizar y define estilos comunes: Bien, así que una vez que estemos listos para comenzar a construir los proyectos, voy a comenzar por crear el marcado HTML de la navegación y las cinco secciones O sea, solo esta sección los elementos lograrán hacer que el dinero funcione. Y luego personalizaremos esta sección ellos mismos. Sigamos adelante y abramos nuestra carpeta de trabajo en VS Code. Como veis tenemos aquí solo una carpeta para las imágenes. Vamos a crear tres archivos diferentes para HTML, CSS y JavaScript. Voy a llamarlos index.html, style.css y script.js. Después ve al archivo index.html y antes que nada, crea un documento HTML básico. Para eso, voy a usar uno de los paquetes llamados Emmet, que es un paquete incorporado en código VS Voy a colocar aquí un signo de exclamación. Y después de golpear Enter o tab, generará las etiquetas HTML básicas. Sigamos adelante y cambiemos el título. Voy a insertar aquí autos clásicos. A continuación, voy a vincular los archivos CSS y JavaScript. Así que vamos a abrir la etiqueta de enlace y especificar aquí la ruta del archivo style.css. En cuanto al archivo JavaScript, voy a abrir una etiqueta de script justo encima de la etiqueta de cuerpo de cierre. Y luego voy a especificar la ruta del archivo y el atributo source. Bien, sigamos adelante y abramos el proyecto en el navegador Para eso, voy a usar uno de los paquetes de código VS llamado servidor en vivo. Nos permite ejecutar la vida del proyecto al navegador y además realizar actualizaciones y cambios sin actualizar la página cada vez. Entonces entraré a instalar y usar este paquete. Bien, por último, vamos a reproducir el editor y el navegador, así. Y empezar. Como decíamos, vamos a crear la navegación y las cinco secciones. Empecemos por el icono del menú. Voy a insertar tu menú de comentarios y luego final de menú. Después abre la etiqueta div, que tendrá dos clases diferentes. El primero va a ser menú. El asfalto es nombre de segunda clase. Voy a insertar tu objetivo. Usaremos esta clase y el archivo JavaScript. Por lo que el icono Menú constará de dos líneas distintas. Vamos a abrir la etiqueta div con dos clases, línea de menú, que va a ser el nombre de clase común. Y luego cuando mi nueva línea uno para estilo individual, vamos a duplicar esta línea de código y cambiar el nombre de la clase. También necesitamos aquí la línea de menú. Bien, entonces ahora mismo el icono del menú no es visible porque tenemos aquí solo los elementos div vacíos. Sigamos adelante y creamos la barra de navegación. Vamos a insertar tus comentarios. Navbar. Después final de navbar A continuación, abra el elemento de navegación HTML5 con clases navbar, y luego utilice de nuevo los objetivos de clase Entonces, en general, tendremos cinco elementos de navegación diferentes. Vamos a abrir la etiqueta de enlace con el enlace de la barra de navegación de clase. Después inserte Q home. Voy a duplicar el elemento link cuatro veces y luego cambiar el contenido. El segundo ítem van a ser autos populares. Entonces tendremos galería de videos, luego Galería de imágenes. En cuanto al último ítem, va a ser contacto. Bien, así que eso es todo sobre el número que tenemos aquí, los elementos de navegación Sigamos adelante y creamos las secciones. Vamos a insertar aquí de nuevo comentarios sección uno, luego final de la sección uno. Entonces cada sección tendrá su envoltorio. Entonces es la etiqueta div abierta con el envoltorio de clase. Y luego interfiere elemento de sección con una clase es la sección uno y luego el objetivo Bien, Entonces en general tendremos cinco secciones diferentes. Sigamos adelante y dupliquemos este código cuatro veces. Y luego cambiar los números. En consecuencia. Tenemos que cambiar los números de los comentarios y también los nombres de las clases Bien, veamos sobre el mercado ahora mismo Sigamos adelante y comencemos a escribir algo de CSS. En primer lugar, voy a crear un par de estilos comunes y predeterminados. Entrevistemos comentarios, estilos comunes entonces, y de estilos comunes. A continuación, tenemos que seleccionar cada elemento. Y para eso, voy a usar un asterisco. Entonces dale algunos estilos. En primer lugar, vamos a deshacernos del default, margin y padding. Voy a ponerlos a cero a ambos . Entonces eliminemos el contorno predeterminado de cada elemento usando outline none. Además, voy a establecer el tamaño de la caja border-box. A continuación, deshagamos del subrayado predeterminado de los elementos de enlace usando text-decoration Y también deshazte de los estilos predeterminados de elementos de la lista usando el list-style-type Bien, después de eso, voy a definir una familia de fuentes para cada elemento de este proyecto, usaremos dos fuentes diferentes de Google Así que vayamos al sitio web de Google Fonts. Entonces voy a buscar élite especial. Seleccione este estilo individual aquí. A continuación, sigamos adelante y busquemos a Josephine Sans. Voy a seleccionar aquí un par de estilos. Pesos de fuente 400-700. Agarra el enlace y pegarlo en el elemento head. Bien, después de eso, voy a definir font-family. Por defecto. Voy a establecer la familia de fuentes a élite especial, coercitiva y también definir el peso de la fuente Hagámoslo 400. Bien, así que veamos que los estilos comunes y predeterminados se aplican a los elementos A lo largo de este proyecto, vamos a usar RAM como unidad de medida. este momento, una rampa equivale a 16 píxeles, porque por defecto 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, tenemos que disminuir el tamaño de fuente del elemento HTML, hacerlo 62.5 por ciento Bien, Entonces como pueden ver, el tamaño de los elementos ha disminuido. A continuación, voy a cambiar el color de fondo de los elementos del cuerpo. Así que sigamos adelante y seleccionemos este elemento y hagamos que sea color de fondo, gris claro usando el color ccc. Bien, así que ahora mismo, eso es todo respecto a los estilos comunes. A continuación, tenemos que encargarnos del icono del menú. Y en ahora por también 57. Proyecto 6 - Crear y crear trabajo de navegación: Bien, así que al principio vamos a hacer que el menú funcione. Es decir, una vez que hacemos clic en el icono del menú, tenemos que mostrar la barra de navegación y también rotar estas secciones Una vez que logremos eso, entonces diseñaremos todo el proyecto y haremos que se vea bien. Sigamos adelante e insertemos aquí los comentarios . Necesitamos menú. Después y fuera del menú. Voy a hacer visible el icono del menú. Así que vamos a seguir adelante y seleccionarlo y establecer su ancho y alto, ambos para que caigan RAM. Y también usa escuchar algún color de fondo temporal, digamos rojo. A continuación, cuidemos su posición. Voy a arreglarlo. Y también vamos a establecer las propiedades top e left, ambas para ejecutar. Bien, entonces se posiciona el ícono de Menú. A continuación, vamos a encargarnos del aldaba. Voy a insertar aquí los nuevos comentarios, ahora cuatro, luego n de Navarra Entonces entonces ahora Corea se va a colocar en el lado izquierdo de la página y debería ser arreglada. Entonces sigamos adelante y seleccionémoslo. Al principio, voy a definir su ancho. Hagámoslo 15 de ancho de la ventanilla. En este caso ahora, pero vamos a ocupar el 15% del ancho de la ventana gráfica Altura. Voy a hacer que sea el 100% de la ventanilla Así que vamos a configurarlo para que sea h Y también cambiemos el color de fondo, hazlo blanco. Después de eso, voy a arreglar su posición. Y además, pongamos las propiedades top e left, ambas a cero. Entonces, como puedes ver, una vez que hicimos la barra de navegación fija el ícono de Menú ha terminado detrás de ella Ocurrió porque la barra de navegación se coloca después del icono Menú en el documento HTML, y por lo tanto tiene una mayor precedencia Sigamos adelante y solucionemos ese problema usando la propiedad del índice Z. Voy a ponerla a un valor superior a cero, digamos diez. Ahora el icono del menú es visible, pero tenemos que cambiar su posición cuando se muestra el número entonces el icono Menú debe colocarse en el lado derecho del mismo. Entonces hagamos su posición a la izquierda. 15, ancho de la ventanilla. Bien, a continuación voy a colocar los elementos de navegación, particularmente en una columna. Y para eso, usemos flexbox. Necesitamos display flex. Y luego tenemos que cambiar la dirección del flex y hacerla columna porque display flex alinea elementos en fila Finalmente, vamos a crear algo de espacio dentro de la aldaba usando relleno. Voy a poner el relleno a rem completo en la parte superior que cero en el lado derecho, cero en la parte inferior y rem completo en el lado izquierdo. Como recuerdas, establecemos el tamaño de caja, border-box y los estilos comunes Entonces por eso no se incrementa el tamaño de la barra de navegación. Cuando usas box-sizing border-box con relleno. Que mueva los elementos dentro de la caja y no aumente el tamaño de la caja. Bien, sigamos adelante y nos ocupemos de estas secciones. Voy a insertar aquí los nuevos comentarios, estilos de sección. Y luego final de estilos de sección comunes. Después seleccione el envoltorio de esta sección. Ahora mismo, voy a asignarle con propiedad con el valor cien por ciento. En realidad, tal vez se esté preguntando ¿ por qué necesitamos este elemento en absoluto? Básicamente, lo usaremos para crear un entorno 3D para las secciones. Bien, sigamos adelante y seleccionemos este elemento de sección. En primer lugar, voy a definir su anchura y altura. Quiero establecer su ancho en el ancho de la ventana gráfica A25, porque ahora mismo tenemos la barra de navegación en el lado izquierdo y su ancho es igual a 15 ancho de ventana gráfica Quiero colocarlos uno al lado del otro. En cuanto a la altura, hagamos que sea cien por ciento de la ventana gráfica Y también cambiar el color de fondo. Voy a usar aquí llamado o E F, E, F, E F. Bien, entonces ahora estas secciones terminaron por detrás de la Napa. Y para arreglarlo, necesitamos cambiar su posición. Vamos a establecerlo en relativo. Entonces voy a establecer la propiedad left a 15 viewport width. Ahora el problema está arreglado. A continuación, separemos secciones usando margen voy a usar margen inferior con el valor tres rampa. Entonces como se puede ver que estas secciones están separadas y ahora empieza a rotarlas y crear un entorno 3D. Al principio, usemos la propiedad transform con la función rotate. En realidad, necesitamos aquí rotar y. porque necesitamos rotar el elemento de acuerdo a la dirección vertical, me refiero al eje y Entonces en este momento esta sección tan girada, pero no vemos aquí ningún efecto 3D. Entonces, para crear un entorno 3D, necesitamos usar una de estas propiedades CSS llamada perspectiva. Tenemos que asignarlo al elemento padre, que es un wrapper. Vamos a ponerla en rampa 50. Entonces, en general, la propiedad perspectiva define qué tan lejos está el elemento del usuario y eventualmente crea el entorno 3D. Ahora tenemos un resultado mucho mejor, pero en realidad no es lo que queremos. Ahora mismo. Estas secciones se rotan según el centro porque por defecto el origen de la transformación se establece en el centro. En realidad, tenemos que cambiarlo y hacerlo a la izquierda. Entonces en este caso, los elementos se rotan según el lado izquierdo. Y es por eso que las secciones y la novela se colocan lado a lado Bien, sigamos adelante y aumentemos el ancho de estas secciones Que sea cien por ciento. Y también crear algún efecto de sombra. Usa tu sombra de caja con el valor es 0.5 rem. Entonces otra vez, 0.5 rem, una RAM, y el color AAA. Antes de que empecemos a hacer que el dinero funcione, quiero hacer aquí una cosa más. Como puede ver, la sombra se superpone a la barra de navegación. Y para arreglarlo, voy a utilizar de nuevo la propiedad z-index con un valor diez En este caso, el número tendrá mayor precedencia y la sombra se acabará detrás de él. ¿Bien? Entonces esta es la situación después del clic, el icono del menú. Por defecto, necesitamos ocultar la barra de navegación y rotar estas secciones de nuevo a la posición normal Sigamos adelante y ocultemos el número que se le asignó. Ancho de la ventanilla izquierda -15. Después cambia la posición del icono del menú que necesitamos aquí a la izquierda con un valor de dos rem. A continuación, necesitamos cambiar la posición de esta sección. Pongamos eso a cero. Y también comente esta línea hacia fuera. Entonces estamos listos para programar el ícono de Menú. Pero antes de eso, voy a hacer una cosa más. Voy a crear algo de espacio en el lado derecho dentro del elemento del cuerpo. Para eso, vamos a usar relleno, ¿verdad? Con un valor de tres rampas. ¿Bien? Así que los estilos que acabamos de cambiar deben aplicarse a los elementos una vez que hacemos clic en el icono del menú. Y también deben ser removidos una vez que hagamos clic en estas secciones ellos mismos. Entonces voy a crear esos estilos con una nueva clase llamada change. Después agregaremos esta clase para que sean elementos y la eliminaremos usando JavaScript. Sigamos adelante y comencemos con el icono del menú. Tenemos que seleccionar un menú con el cambio de clase. Como puedes ver aquí, no usamos espacio entre esas clases porque necesitamos agregar esta clase al menú mismo. Vamos a establecer la posición izquierda en el ancho de la ventanilla 15. A continuación, necesitamos cambiar la posición de la barra de navegación. Así que vamos a seleccionar ahora bert con cambio y establecer la posición izquierda a cero. En cuanto a las secciones, necesitamos cambiar sus posiciones y también hay que rotarlas. Así que vamos a seleccionar sección con un cambio de clase. Luego establezca la propiedad left a 15 viewport width y use aquí la función Transformar, Rotar Bien, así que todo está listo. Vamos al archivo JavaScript y seleccionemos el icono del menú. Para eso, voy a usar el método selector de consultas. Necesitamos especificar aquí la clase del menú. Entonces tenemos que adjuntar a él el oyente de eventos. Este método toma dos argumentos. El primero es el clic. La segunda va a ser la función callback, que se ejecutará una vez que hagamos clic en el elemento Entonces, una vez que hacemos clic en el icono, necesitamos agregar el cambio de clase a la red del menú. Y estas secciones, recuerden, todos esos elementos tienen el objetivo de clase común. Entonces los seleccionaremos usando class target y agregaremos el cambio de clase que voy a usar aquí selector de consultas todo el método. Y tenemos que especificar aquí el objetivo de clase. En realidad, el selector de consultas devuelve todos los métodos y un objeto similar a una matriz llamado lista de nodos Necesitamos mirar a través de esta lista y agregar a cada cambio de clase de elemento de lista. Para mirar a través de la lista de nodos, voy a usar uno de los métodos de ayuda de matriz llamados para H. Toma un parámetro que va a ser la función de devolución Esta función se ejecutará para cada ítem de la lista. La función de devolución de llamada tomará un argumento y va a ser el elemento actual de la lista durante el bucle Ahora necesitamos agregar al cambio de clase de ítem. Y para eso, voy a usar uno de los métodos llamados toggle. En el caso del método toggle, agregamos clase al elemento si no existe, y lo eliminamos si existe. Entonces en el primer clic, el elemento obtendrá el cambio de clase y el siguiente, se eliminará. Entonces necesitamos usar item seguido de la propiedad llamada class list, que almacena todas las clases que tiene el elemento. A continuación, al alternar método. Y tenemos que especificar el cambio de clase dentro del paréntesis Entonces ahora si hago clic en el icono del menú, entonces todo va a funcionar bien. Para que este efecto sea más agradable, vamos a usar la transición. Para el icono Menú. Necesitamos hacer la transición con valores a la izquierda, 0.5 s. A continuación, también necesitamos la misma transición para la barra de navegación Asfalto la sección. Necesitamos hacer una transición donde queda el valor, 0.5 s, y luego transformarnos con esta misma duración. Bien, entonces ahora tenemos un efecto mucho mejor y más suave. Bien, así que con el ícono de Menú, ya terminamos. Ahora tenemos que cerrar el menú. Una vez que hagamos clic en las secciones, utilizaremos una técnica similar. Al principio, vamos a seleccionar todas estas envolturas de acción y adjuntamos a ellos los oyentes de eventos. Necesitamos de nuevo selector de consultas todo el método. Después pasa aquí el envoltorio de nombre de clase. Para poder adjuntar el oyente de eventos a cada envoltorio, al principio tenemos que mirar a través de ellos porque el selector de consultas, all method devuelve una lista de nodos Vamos a usar de nuevo para cada método. Luego pasa tu función de devolución de llamada con el elemento de argumento. A continuación, necesitamos adjuntar el oyente de eventos al elemento con el evento click y con otra función de devolución de llamada Entonces ahora necesitamos eliminar el cambio de clase de los tres elementos. En realidad, voy a seguir adelante y agarrar este código de aquí y luego cambiar alternando para quitar Así que ahora si hago clic en el icono de menú y luego hago clic en el menú de selección se cláusula. Así que todo funciona a la perfección y con el menú ya estamos hechos. A continuación, voy a hacer que esos enlaces funcionen. O sea, una vez que los hagamos clic, debemos navegar a las secciones adecuadas. Para eso, tenemos que hacer un par de cosas. Al principio, aumentemos el tamaño de los enlaces que seleccionen. Ahora Berlín, establece su tamaño de fuente en 1.5 RAM. Y también voy a separar enlaces usando margen. Vamos a ponerlo en dos rem en la parte superior e inferior y cero en los lados izquierdo y derecho. Bien, a continuación vamos al archivo index.html y asignemos a cada atributo id del elemento de sección Entonces, para navegar a las secciones adecuadas, los valores de los atributos de referencia id y h deben coincidir. Así que vamos a seguir adelante y asignarles estos valores similares usando un multi cursor. Para el primer ítem, voy a pasar por tu casa. Entonces para el segundo ítem, necesitamos autos populares. A continuación viene la galería de videos. Entonces tendremos Galería de Imágenes. Y por último, necesitamos contenido. Ahora, si hago clic en los enlaces, entonces navegaremos a la sección adecuada. De un vistazo, es difícil darse cuenta. Pero si miras esta barra de desplazamiento, entonces verás que estamos navegando a las secciones relevantes. Para que este efecto sea más suave, podemos usar una de estas propiedades CSS llamada comportamiento de desplazamiento. Y tenemos que adjuntarlo al elemento HTML con el valor pequeño. Así que ahora como puedes ver, estamos navegando entre diferentes secciones sin problemas 58. Proyecto 6 - Estira y hace que funcione el menú de hamburguesas: Bien, así que una vez que logramos que la navegación funcionara, ahora es el momento de darle estilo al ícono del Menú y también a los elementos de navegación Echemos un vistazo al proyecto terminado. Como puedes verlas en cualquier parte. Puedes constar de dos líneas. Una vez que hacemos clic en él, giran y se transforman en la x. Así que eso es lo que vamos a hacer ahora mismo. Tenemos aquí solo una caja roja. Sigamos adelante y seleccionemos líneas con línea de menú de clase común. Al principio, definamos la anchura y la altura. Voy a establecer el ancho a como presentar. En cuanto a la altura, hagamos que sea un punto para rampa. También cambia el color de fondo. Hazlo blanco. Entonces voy a crear algo de espacio en la parte superior e inferior de las líneas usando margen. Vamos a establecerlo en 0.3 rem y cero. Y luego crear algún efecto de sombra usando sombra de caja con el valor es 0.1, 0.1 RAM que 0.3 rampa. Y el color también. Bien, entonces aquí tenemos las líneas. A continuación, voy a alinear esas líneas. Y para eso, quiero usar Flexbox. Vamos a establecer la propiedad display en flex. También cambia la dirección. Hagamos una columna que fin de colocar las líneas en el centro del menú, usemos justificar el centro de contenido y alinear los elementos al centro. Bien, así como se puede ver, las líneas están alineadas y en realidad es el momento de deshacerse de este fondo rojo y también cambiar el tipo del curso apuntador. Entonces como decíamos, vamos a rotar esas líneas para que sea X. Y esto debería suceder una vez que hagamos clic en el icono, agreguemos bosque, vamos a transformar las vidas y a x, seleccionemos. La primera línea está en la línea de menú de clase uno. En realidad vamos a transformar las líneas en la cruz y luego giraremos el propio menú. Entonces usemos Transformar con la función rotate. Voy a rotar 270 grados la primera línea. Duplicemos este código. Cambiar el nombre de la clase. En cuanto al valor, voy a rotar esta segunda línea 360 grados. Entonces en estos momentos no tenemos aquí la cruz perfecta. Y para arreglarlo, movamos un poco las líneas. Voy a hacer eso usando la función translate, que en realidad nos permite mover el elemento tanto vertical como horizontalmente según los ejes x e y Entonces, en caso de la primera línea, necesitamos traducir X con el valor menos punto para RAM. En cuanto a la segunda línea, necesitamos Traducir Y con un valor menos punto para RAM. Entonces ahora tenemos aquí la x perfecta. Y por último, necesitamos rotar el propio icono de Menú. Entonces usemos de nuevo transform, donde giran la función como el valor. Pasemos aquí 45 grados. Bien, así que finalmente, hemos transformado las líneas en x Pero esto debería suceder una vez que hagamos clic en el icono. Pero esto debería suceder una vez que hagamos clic en el icono Para eso, nuevamente, voy a usar el cambio de clase, que se agrega al elemento onClick usando JavaScript. Vamos a agregar clase cambiada a ambas líneas. En este caso, tenemos espacio entre las clases porque las líneas son los hijos del menú. Por último, tomemos esta línea de código y la peguemos hacia abajo. Si hago clic en el icono, entonces obtendremos una x. Bien, para que este efecto sea más suave, vamos a usar transición con transform y 0.5 s. En vamos a usar transición con transform y cuanto al menú, ya tenemos aquí la transición, pero donde la propiedad izquierda Entonces voy a cambiarlo y hacerlo todo. Bien, así que con el menú, ya terminamos. Sigamos adelante y personalicemos esos enlaces. Tenemos todos los seleccionados. Ahora por enlace. Agreguemos aquí un par de estilos. Necesitamos un peso de fuente con un valor de 600. También cambia el color, hazlo 777. Entonces voy a crear algo de espacio entre las letras usando espaciado lateral, 0.3 RAM, luego transformaré texto en mayúsculas Entonces, como puedes ver, los enlaces están personalizados. Y por último, voy a crear un pequeño efecto hover. Voy a cambiar el color al flotar. Entonces vamos a seguir adelante y seleccionar, ahora se vinculará con un hover, cambiar de color, hacerlo 111 Y también usa transición para un efecto suave con el valor es color y el punto de duración. Bien, entonces dentro de la navegación, hemos terminado y ahora es el momento de personalizar las secciones 59. Proyecto 6 - Crear y personalizar la página de aterrizaje: Voy a comenzar con la primera sección. Echemos un vistazo al proyecto terminado. Como puedes ver, la primera sección va a ser bastante sencilla. Tendremos un fondo oscuro y dos elementos distintos, el encabezado y la imagen. Así que sigamos adelante y creamos el marcado HTML. Ahora mismo, tenemos aquí el wrapper y solo el elemento de sección vacía. Entonces, insertemos su elemento de encabezado H1. Debe tener dos clases diferentes. El primero va a ser encabezado de sección como Paul. El segundo va a ser el título de la Sección uno como el contenido. Insertemos aquí autos clásicos. A continuación voy a insertar aquí la imagen. Seleccionemos la imagen de la carpeta de imágenes que va a ser la Sección uno. También vamos a adherir el valor del atributo de clase es la imagen de la sección uno. Entonces eso es todo sobre el marcado HTML. Pasemos al archivo style.css e insertemos nuevos comentarios, sección uno. Y la sección uno. En realidad, las cinco secciones tendrán los encabezamientos similares En la primera tendremos algunos estilos individuales adicionales. Entonces creo que en lugar de escribir los mismos estilos una y otra vez sería mejor si creamos algunos estilos comunes. Usemos clase, encabezado de sección y apegemos un par de estilos. Voy a aumentar el tamaño de la fuente. Hagámoslo diez RAM. Después haz que el font-weight sea más audaz. También cambia el color, hazlo blanco. Entonces voy a agregar algo de espacio en la parte inferior de los elementos usando margin bottom. Diez rampas. También crea algo de espacio entre las letras usando el espaciado entre letras. Una rampa. Alineemos el texto en el centro. Y finalmente usar sombra de texto con un valor es 0.3, 0.3 alrededor de 0.5 rampa llamador 555. Bien, después de eso, voy a alinear esos dos elementos y también cuidar los antecedentes Así que sigamos adelante y seleccionemos el elemento de sección con la clase sección uno. Para alinear los elementos en el centro de esta sección, voy a utilizar de nuevo los libros flux. En realidad necesitamos usar propiedades y valores similares a los que usamos en caso del menú. Entonces para evitar escribir los mismos estilos Flexbox aquí, voy a crear una nueva clase y los estilos comunes, vamos a llamarlo centro y asignarle display flex que justify-content center y align items center Entonces voy a agregar esta clase al menú. Y la sección uno también. También deshazte de esas tres líneas. Ven aquí y deja solo flex dirección columna. Además de eso, también necesitamos flexionar la columna de dirección para la sección uno. Bien, entonces los elementos están alineados y ahora voy a cuidar el trasfondo Especificemos aquí la URL. Voy a seleccionar BG sección one dot JPG de la carpeta imagenes. Además de eso, agreguemos aquí centro y voy a repetir. Y también definir el tamaño del fondo. Hacerlo cubrir que se sientan con respecto al fondo y en realidad este elemento de sección. Sigamos adelante y agreguemos un par de estrellas para estar encabezando eso es seleccionado. Vamos a usar aquí la sección uno. Rúbrica de la sección uno. Yo utilicé aquí la sección uno. Y si me lo perdiera, Dan, esta tarea no se aplicaría porque todos ya creamos estilos comunes para encabezados de sección En este caso, se sobrescribirán algunos de los estilos definidos Así que agreguemos aquí margen inferior con un valor de tres RAM. Después transforma el texto en mayúsculas. Y también usa sombra de texto con los valores una RAM, tres veces. Y el color negro. En realidad, voy a agregar aquí a sombras adicionales, que eventualmente crearán un efecto de sombra multinivel Entonces, apegémonos a correr tres veces. Y el color 111. Entonces voy a agregar tres rem, nuevamente tres veces con un color a dos. Entonces como pueden ver, tenemos aquí bonito efecto de sombra. Por último, voy a definir el ancho de la imagen que se selecciona y establecer su ancho en siete por ciento. Solía escuchar el valor porcentual porque hará que la imagen sea sensible a diferentes tamaños de pantalla. Bien, así que veamos con respecto a la primera sección, sigamos adelante y pasemos a la siguiente 60. Proyecto 6 - Crea y personaliza sección de coches populares: El siguiente apartado van a ser los autos populares. Sigamos adelante y echemos un vistazo al proyecto terminado. Por lo que en esta sección tendremos un encabezamiento y tres tarjetas distintas. Cada tarjeta consistirá en imagen, auto, nombre, precio y el botón. Sigamos adelante y creamos el marcado HTML. Voy a empezar con una rúbrica. Abramos elementos de encabezado H1 con el encabezado de sección de clase y con el contenido. Autos populares. Vamos a insertar aquí div, que va a ser el envoltorio de las tarjetas. A continuación voy a crear la tarjeta en sí. Así que vamos a abrir la etiqueta div con la tarjeta de clase. Te voy a insertar un par de elementos. El primero va a ser el elemento de encabezado H2 con la clase Car name como contenido. Voy a poner aquí solo carbonato. A continuación tendremos una imagen. Seleccionemos auto one dot JPEG de la carpeta de imágenes. Y también voy a asignar a la clase de elemento de imagen llamada IMG A continuación tendremos elemento h3 rumbo, que va a ser el precio del auto Pongamos aquí 200 mil. Y por último, voy a instituir botón con el botón tipo con una clase llamada btn También te permite ver más. Bien, entonces esta es nuestra primera tarjeta. En general, tendremos tres de ellos. Así que vamos a seguir adelante y duplicarlo dos veces y luego hacer algunos cambios. La segunda imagen va a ser llamada a JPG. También cambia el precio. Entonces tendremos auto tres. Y el precio va a ser de 150 mil dólares. Bien, así que eso es todo con respecto al marcado HTML. Sigamos adelante y diseñemos esta segunda sección. Insertemos aquí un nuevo comentario, sección dos y sección dos. A continuación, seleccione el elemento de sección. En realidad, voy a alinear los elementos usando Flexbox, pero antes de eso, coloquemos las cartas una al lado de la Para eso, voy a asignar al centro de clases envoltorio de carritos, que ya hemos definido anteriormente Después de eso, hagamos que esta sección elemento flex contenedor usando display flex. Entonces tenemos que cambiar la dirección. Vamos a ponerla en columna. Y finalmente, vamos a crear algo de espacio alrededor de los elementos flexibles usando justificar contenido con el ritmo de valores alrededor. Bien, eso se dice de los elementos de esta sección. Sigamos adelante y personalicemos al policía. Voy a poner su ancho en rampa 50. En realidad, antes de agregar otros estilos al auto, definamos el ancho de la imagen. Vamos a seleccionarlo y hacer su ancho 100%. En este caso, la imagen ocupará 100% del ancho de su elemento padre, que es el COD. Bien, sigamos adelante y agreguemos algunos estilos más a la tarjeta. Voy a crear algo de espacio en los lados izquierdo y derecho usando margen con un valor de 0.3 rampa. También cambia el color de fondo, hazlo blanco. Entonces voy a establecer padding a una RAM en los cuatro lados. Y por último, vamos a crear alguna sombra usando box-shadow con los valores 0.6 RAM tres veces, y luego el color BBB A continuación, voy a crear un efecto hover. Quiero cambiar la sombra al hover. Así que sigamos adelante y seleccionemos la tarjeta con el hover. Luego se definió la sombra de cuadro, donde los valores 0.8 RAM tres veces y el color BBB Y también usemos la transición. Necesitamos aquí box shadow, donde la duración 0.5 s. bien, así que eso es todo con respecto a la tarjeta, adelante y personalicemos los elementos de encabezado, que es el nombre actual Vamos a seleccionarlo y cambiar el tamaño de fuente, hacerlo a RAM. Entonces voy a establecer el peso de la fuente a 600. También transforma texto en mayúsculas. Después cambia el color y hazlo blanco. este momento, el encabezado ya no es visible porque tiene un color blanco. Voy a colocarlo un poco abajo. Entonces, sigamos adelante y fijemos su posición en absoluto. Entonces para posicionarlo de acuerdo a su elemento padre, que es la tarjeta, necesitamos establecer esta posición en relativa. Después defina las propiedades superior e izquierda para el encabezado. Voy a hacer que ambos corran. Y también para ser el nombre del auto siempre en la parte superior de la imagen, voy a usar la propiedad z-index con un valor relativamente mayor, digamos diez Bien, entonces ahora el encabezado es visible. A continuación, voy a crear un efecto hover. Quiero aumentar la opacidad de la imagen al flotar. Al principio, vamos a configurarlo en, digamos 0.8. A continuación, seleccione tarjeta con un hover. Va a ser seguido por la imagen del auto. Y luego establecer la opacidad a uno. Además, voy a usar transición con los valores opacidad y 0.5 s. Bien Entonces el efecto hover funciona bien. Sigamos adelante y personalicemos el precio. Seleccionemos este elemento y al principio, cambiemos el tamaño de fuente, conviértanlo 1.8 RAM. Entonces voy a poner color a 777. Y también crea algo de espacio en la parte superior e inferior usando margen con valores punto fibrina y cero Bien, entonces el último elemento que necesitamos para darle estilo va a ser el botón. Vamos a seleccionarlo. Al principio. Voy a establecer su ancho al 100%. Después cambia el color de fondo, hazlo blanco. Además, voy a establecer el tamaño de fuente en 1.7 rem. Entonces crea algo de espacio entre las letras. Hagámoslo 0.3 rondas y luego transformemos el texto en mayúsculas Bien, Así que el botón se ve bien, pero necesitamos agregarle un par de estilos más. Vamos a deshacernos del borde predeterminado. Usando el borde ninguno. Entonces voy a crear algo de espacio en la parte superior del botón usando margin, top, one rank. A continuación, vamos a crear algo de espacio dentro del botón usando relleno. Voy a ponerla a 0.5 rem y luego cambiar el color, hacerla blanca. Por último, voy a crear algunos efectos de sombra. Al principio, usemos sombra de texto, donde el valor es 0.1, 0.1 rampa, luego punto, corrimos color negro. Y después de eso, voy a usar box shadow con los valores 0.1, 0.1 run, luego apuntar fibrina y el color sea BB Y por último, cambiemos el título del curso o hagamos que apunte. Bien, entonces con el botón ya terminamos. Y en realidad, eso es todo sobre esta sección. Tiene estilo y se ve bien. Sigamos adelante y pasemos a la siguiente sección. 61. Proyecto 6 - Crear y Style Video Gallery: La siguiente sección va a ser la galería de videos. Tenemos aquí un encabezado de sección y seis videos diferentes. Por defecto son post y una vez que pasemos el cursor sobre ellos, entonces jugarán Bien, sigamos adelante y como de costumbre, creamos el marcado HTML Voy a comenzar con el encabezamiento de la sección. Vamos a abrir el elemento de encabezado H1 con un encabezado de sección de clase. Y como el contempla, inserte aquí galería de videos A continuación, abramos los desarrollos. Va a ser el envoltorio de los videos. En general, tendremos dos de esos envoltorios y cada uno de ellos incluirá tres videos Vamos a abrir la etiqueta de video con un video de clase y especificar la ruta del archivo. Tenemos video llamado auto, video uno en la carpeta Imágenes. Además de eso, voy a usar dos atributos diferentes. El primero va a ser silenciado. Se silenciará el sonido del video. En cuanto al segundo, va a ser el bucle. Nos permite reproducir el video infinitamente. Y además de eso, podemos usar otro atributo llamado controles. Definamos también el ancho del video. Que sea 500 pixeles. Entonces aquí tenemos un video con controles. Como ves este sonido es Mildred, y también se está reproduciendo una y otra vez por el atributo un poco Bien, en realidad, voy a deshacerme de los controles. No los voy a usar. Solo usemos hear, silenciado y loop. Tendremos tres videos en este envoltorio. Duplicémoslo dos veces y cambiemos los nombres de los videos. Aquí necesitamos, 2.3. Entonces voy a duplicar el envoltorio en sí y cambiar de nuevo los nombres de los videos. Aquí necesitamos, 45.6. Bien, entonces el marcado HTML ya está listo. Todo está mal aquí porque los videos son de alta calidad y son demasiado grandes. Sigamos adelante y personalicemos esta sección. Insertemos tus nuevos comentarios, sección tres. Y la sección tres. Antes de comenzar a personalizar esta sección, al principio, vamos a disminuir el tamaño de los videos. Sigamos adelante y seleccionarlos y establecer el ancho en 25%. Bien, Así que ahora los videos son más pequeños y puedes personalizar el elemento de sección. Vamos a seleccionarlo. Voy a hacer que sea contenedor flexible usando banderas de exhibición. Entonces tenemos que cambiar la dirección. Hagámoslo columna. También. Voy a crear algo de espacio alrededor de los artículos flex. Vamos a usar justificar el espacio de contenido alrededor. Y también cambiar el color de fondo, hacerlo gris oscuro usando a dos. Eso es todo respecto a este elemento de sección. A continuación, voy a alinear los videos que quiero volver a usar, Flexbox Así que vamos al archivo HTML y asignemos al centro de clases envoltorio videos. Bien, así como puedes ver en los videos están alineados, pero necesitamos agregarles un par de estilos En primer lugar, vamos a crear algo de espacio en los lados izquierdo y derecho de los videos usando margen con los valores cero. Y para correr, entonces voy a hacer las esquinas de los videos redondeadas usando border-radius con el valor 0.5 rem Además, disminuyamos ligeramente la opacidad . Hagámoslo 0.8. Y por último, voy a crear un pequeño efecto de sombra usando box shadow con los valores 0.3, 0.3 rem. El siguiente va a ser 0.5 RAM y el color 111. Bien, así que ya casi terminamos. Solo necesitamos crear efectos de hover. Y también necesitamos reproducir los videos en hover. Para eso, usaremos un poco de JavaScript. Al principio, aumentemos la opacidad y cambiemos la sombra al flotar Seleccionemos el video con la pseudo-clase hover que aumentan la opacidad, lo convierten Y también cambiar la sombra de caja. Voy a insertar los valores como 0.5, 0.5 RAM que una RAM, y el color uno, uno a uno Y también usa transición. El valor es todo 0.5 s. Bien, así que como puedes ver, los efectos hover funcionan bien, y ahora es el momento de reproducir los videos en Sigamos adelante y vayamos al archivo JavaScript. Y al principio, selecciona todos los videos. Voy a crear una nueva variable, vamos a llamarla los videos, y luego seleccionar todos los videos usando el método query selector all. Tenemos que especificar aquí el video de la clase. Entonces, para reproducir los videos al pasar el mouse, necesitamos usar mouse over y mouse out eventos. Y también el método se llama Play and pulse. Antes de eso, necesitamos mirar a través de los videos y adjuntarlos al oyente de eventos Así que voy a usar uno de los métodos de ayuda de matriz llamados for-each Debería tomar un parámetro. Va a ser la función de devolución de llamada. Tenemos que pasar un argumento que va a ser el video actual durante el loop. Entonces necesitamos adjuntar al oyente de eventos de video. Vamos a insertar el mouse sobre el evento. Y también pasa aquí la función callback, que debería ser ejecutada una vez que pasemos el cursor sobre el video Ahora, para poder reproducir el video, necesitamos usar uno de los métodos de API de video HTML5 llamado play. Entonces ahora si pongo el cursor sobre el video, se reproduciría. Pero una vez que salgamos el ratón, seguirá jugando. En realidad, no necesitamos eso. Tenemos que pausar el video una vez que estemos a kilómetros de distancia. Entonces necesitamos usar otro evento llamado millas fuera. Adjuntemos al oyente de eventos de video con el evento a millas de distancia. Y luego usar un método llamado pulso. Bien, entonces ahora todo funciona bien. Y en realidad con esta sección ya terminamos. Sigamos adelante y pasemos al siguiente. 62. Proyecto 6 - Galería de imágenes de creación y estilo: Bien, entonces es momento de crear la siguiente sección, que va a ser la galería de imágenes Esta galería va a ser una especie de diferente e interesante. Uno. Tendremos dos estantes, cada uno de ellos con tres imágenes diferentes de los autos. En esta sección, aprenderás sobre cómo crear elementos 3D usando CSS. Sigamos adelante y creamos el marcado HTML. Voy a comenzar con el encabezamiento de la sección. Vamos a abrir el elemento de encabezado H1 con el encabezado de sección de clase con la galería de imágenes de contenido. A continuación, voy a abrir una etiqueta div, que va a ser el wrapper de la galería. Está asignado a la galería de clases. Entonces en general tendremos dos raperos, como si no fuera la sección anterior Cada uno de ellos codificará la repisa y tres imágenes. Entonces sigamos adelante y abrimos una etiqueta div, que va a ser la repisa voy a asignar a la estantería de la galería de clases. Debería ser el elemento vacío. Entonces el caparazón va a ser seguido por las imágenes. Vamos a abrir la etiqueta de imagen y especificar aquí la parte de la imagen. Necesitamos. Gallery car one dot JPG de la carpeta imagenes. Y también voy a asignar el atributo de clase de elemento de imagen con una galería de valores IMG uno Duplicemos dos veces y cambiemos los nombres de las imágenes y también los nombres de las clases. Tenemos que sumar tres. A continuación, voy a duplicar la propia galería. Y luego voy a cambiar de nuevo los nombres de las imágenes. En cuanto a los nombres de las clases, tenemos que dejarlos como están. Bien, eso es todo con respecto al marcado HTML, sigamos adelante y comencemos a personalizar esta sección Al principio, voy a colocar las imágenes una al lado de la otra en fila Para eso, usemos flexbox. Voy a asignar a ambas galerías clase. Bien, sigamos adelante e insertemos nuevos comentarios en el archivo CSS Va a ser sección para ellos. Y fuera de la sección cuatro. A continuación, seleccione elemento de sección. Voy a hacerlo flex contenedor usando display flex. Además, voy a colocar los elementos en la columna. Entonces, sigamos adelante y cambiemos la columna de dirección flex. Y también voy a crear algún espacio entre los elementos usando justificar el espacio de contenido entre. Lo siguiente que quiero hacer es disminuir el tamaño de las imágenes porque ahora son demasiado grandes. Así que vamos a seguir adelante y seleccionarlos y establecer con dos 15%. Ahora, es mucho mejor. Sigamos adelante y seleccionemos Galería. Quiero crear algo de espacio en la parte superior e inferior. Hagámoslo usando el margen. Voy a ponerla a diez rem en la parte superior e inferior y a cero en los lados izquierdo y derecho. Bien, así que ahora es el momento de crear la estantería y creo que sería mejor si ocultamos las imágenes por un tiempo. Así que usemos tu pantalla. Ninguno. Después selecciona la repisa. En primer lugar, voy a definir su anchura y altura. Vamos a establecer con 280 por ciento. En cuanto a la altura, voy a hacerla rampa 3D. Después defina el color de fondo. Voy a usar aquí el valor RGBA. Vamos a insertar aquí 38126199 y la opacidad 0.8. Y finalmente, para colocar la repisa en el centro de esta sección, usemos margin, el valor R0 Bien, entonces esta es la parte frontal de la repisa. En cuanto al resto de la parte, crearemos usando un pseudo elemento antes Así que vamos a seguir adelante y seleccionar Galería estante con antes pseudo elemento En primer lugar, hagamos que la columna esté vacía. Entonces voy a poner su posición a absoluta. Y para posicionar este elemento de acuerdo a su padre, que es el estante de la galería, necesitamos asignarle a la posición padre relativa. Después de eso, agreguemos un par de estrellas para hacer antes de pseudo elemento, voy a definir su ancho y alto Hagamos el ancho cien por ciento. En cuanto a la altura, la voy a poner en diez rampas. Y también cambiar el color de fondo. Voy a usar aquí color con el valor RGBA. Vamos a insertar aquí 34152248 y la opacidad 0.7. ¿Bien? Entonces en este momento no se posiciona correctamente. Voy a moverlo hacia arriba Así que definamos la posición superior. En realidad, necesitamos colocarlo en la parte superior de la parte frontal. Su altura es igual a diez rampas. Entonces necesitamos aquí propiedad superior con el valor menos diez rep. ¿Correcto? Después de eso, necesitamos rotar antes pseudo elemento horizontalmente de acuerdo con el eje x Entonces voy a usar la propiedad Transformar con la función rotate x. Y voy a poner aquí 20 grados. Entonces se gira el elemento, pero eso no es lo que queremos. El problema es que por defecto, el elemento se gira según su centro. Quiero decir que el origen de la transformación está centrado y necesitamos cambiarlo y hacerlo botón. Entonces usemos transform origin y hagamos que se compre. Ahora el problema se soluciona y el elemento se gira correctamente. Lo único que tuvo que hacer es crear un entorno 3D y hacer que esas repisas se vean como las reales. Para crear un entorno 3D, como ya sabes, tenemos que usar una propiedad llamada perspectiva. Vamos a ponerla a diez carreras. Bien, así como pueden ver, ahora tenemos un resultado mucho mejor con unos gritos Ya casi terminamos. Lo único que quiero hacer es crear un efecto de sombra. Entonces sigamos adelante y usemos sombra de caja con valores uno corrió, una rampa, fibrina y el color para cuatro Bien, así que finalmente, con la repisa, terminamos. Sigamos adelante y volvamos a mostrar las imágenes. Vamos a deshacernos de mostrar ninguno. Como puedes ver ahora mismo, el diseño está desordenado, así que vamos a encargarnos de eso Voy a poner posición a absoluta. Entonces ahora las imágenes se colocan una detrás de la otra. Al principio, vamos a moverlos hacia arriba y colocarlos en las repisas. Voy a definir la posición inferior donde el valor es seis RAM. Después voy a seleccionar cada imagen por separado y definir la posición izquierda. Sigamos adelante y comencemos con la galería IMG one. Voy a fijar su posición izquierda en el 50 por ciento. Entonces sigamos adelante y dupliquemos este código dos veces. Cambiemos el nombre de la clase. Necesitamos calorías img2. En cuanto a la posición de liderazgo, vamos a usar aquí el 30%. En cuanto a la tercera imagen, hagamos su posición izquierda siete por ciento. Entonces ahora vemos todas las imágenes, pero no están posicionadas del todo correctamente. Para arreglarlo, voy a moverlos hacia el lado izquierdo. Y para eso, usemos Transformar con la función Translate X, que la mayoría de los elementos horizontalmente. Voy a poner aquí -50 por ciento. Y además de eso, quiero rotar la imagen es horizontal, quiero decir, según el eje x Entonces usemos Rotar X con el valor 0.5 grados. Además de eso, vamos a crear un poco de efectos de sombra y también hacer que las imágenes sean redondeadas. Usemos sombra de caja con devalorizaciones punto a redondo. Entonces voy a usar un punto de valor negativo a RAM para cambiar la dirección de la sombra. A continuación, uno va a ser 0.5 corrió como el color. Usemos 888. Y también, hagamos que la imagen sea redondeada usando border-radius con un valor de 0.5 ran Bien, así que lo último que tenemos que hacer es crear un efecto hover Una vez que pasamos el cursor sobre las imágenes, necesitamos girarlas de nuevo a la posición normal Y también tenemos que cambiar la sombra. Así que sigamos adelante y seleccionemos la imagen de la galería con la pseudo-clase hover que usar Transformar En realidad, tenemos que usar aquí función Traducir de nuevo porque si la echamos de menos, entonces la posición de las imágenes va a cambiar. Entonces necesitamos traducir x con -50%. Entonces necesitamos rotar x función el valor cero. Además de eso, vamos a usar box shadow con los valores 0.2, 0.3 RAM, y el color 888. Eso con el fin de hacer el efecto más suave, vamos a utilizar los valores de transición todos y 0.3 s. entonces tenemos aquí un efecto hover Pero en realidad no se ve todo bien porque las imágenes están rotando desde el centro y necesitamos girarlas desde abajo. Entonces nuevamente, tenemos que cambiar, transformar el origen, tomarlo prestado Bien, entonces ahora el problema está arreglado y tenemos aquí un bonito hueco O en realidad antes de terminar esta sección, me he dado cuenta de que necesitamos algo de espacio en la parte superior e inferior de esta sección porque el rumbo no está muy bien posicionado. Y además de eso, creo que necesitamos espacio para las otras secciones también. Entonces voy a ir a los comentarios, estilos de sección, y asignar al elemento sección. Acolchado. El valor es fibrina y cero. Bien, ahora tenemos un resultado mucho mejor. Y en realidad con la galería de imágenes, ya terminamos. Sigamos adelante y comencemos a trabajar en la siguiente sección, que va a ser la última 63. Proyecto 6 - Crear y personalizar sección de contacto y pie de página: Bien, entonces es momento de crear una quinta sección, que va a ser la sección de contacto Terminaremos de construir el proyecto con esta sección. Y después de eso, lo haremos sensible a diferentes tamaños de pantalla. Echemos un vistazo al proyecto terminado. Entonces esta sección va a ser sencilla. Tendremos una imagen de fondo a pantalla completa con un encabezado de sección, elemento de formulario y un poco de texto con derechos de autor Sigamos adelante y creamos un marcado HTML. Vamos a insertar aquí y elemento de encabezado H1 con un encabezado de sección de clase. Y donde el contenido nos contacte. A continuación necesitamos elementos de formulario con el formulario de contacto de clase. Por lo que la forma constará de cuatro elementos diferentes. Tendremos dos entradas para nombre completo y correo electrónico. Después tendremos área de texto y el botón de enviar. Así que vamos a interferir elemento de entrada con una clase para entradas. Y también con el atributo placeholder, que tendrá el valor tu nombre completo Entonces voy a duplicar esta línea de código. Cambiemos aquí, escriba, haga un correo electrónico, y también como el valor del atributo placeholder Vamos a insertar tu correo electrónico. A continuación, necesitamos área de texto con una clase de entradas de formulario. Y también utilizar de nuevo el atributo de marcador de posición con un mensaje de entrada de valor Por último, vamos a crear el botón, que va a ser representado usando elemento de entrada que está asignado al clúster de forma BTN como el tipo que voy a usar submit Y también necesitamos presentar valor. Muy bien, eso es todo sobre los elementos del formulario. A continuación, necesitamos crear un párrafo con los derechos de autor de la clase. Insertemos aquí algún texto de copyright. Voy a usar aquí. El signo de copyright con entidad HTML5. Debe ser ampersand copy, punto y coma. Entonces voy a insertar tu código y crear todos los derechos reservados. Muy bien, así que eso es todo sobre el marcado. Todo está listo para comenzar a personalizar esta sección. Sigamos adelante e insertemos nuevos comentarios en el archivo CSS. Necesitamos Sección cinco y fuera de la sección F5. A continuación, seleccione esta sección de elementos. Entonces lo primero que quiero hacer es agregar la imagen como fondo de pantalla completa En primer lugar, usemos gradiente lineal. Necesitamos aquí el valor RGBA, donde el color negro y con la opacidad 0.6 A continuación, necesitamos el color similar. Pero con opacidad 0.8. Bien, después de eso, definamos la ruta URL de la imagen Va a ser BG Sección cinco puntos JPG. Además, insertemos su centro y no repita. Y por último, voy a definir el tamaño del fondo. Hagámoslo cubrir. Entonces aquí tenemos una imagen. A continuación, quiero alinear los elementos usando Flexbox. Hagamos el contenedor flexible del elemento de sección usando display flex. Entonces necesitamos alinear los elementos en una columna verticalmente. Entonces cambiemos la dirección, hagámosla columna. Luego crea algo de espacio alrededor los elementos usando justificar el espacio de contenido alrededor. Y por último, voy a colocar los artículos en el centro usando align items, center. Bien, entonces los elementos están alineados y ahora voy a seguir adelante y personalizar los elementos formados Sigamos adelante y seleccionémoslo. En primer lugar, voy a definir su anchura y altura. Vamos a configurar con 260 RAM. En cuanto a la altura, voy a hacerla 45 rem. A continuación, voy a cambiar el color de fondo. Usemos tu RGBA con el color blanco con el punto de opacidad Para. Por último, voy a crear el borde con valores para embestir sólido. Y luego utilizar de nuevo el valor RGBA con el color blanco. Y con la opacidad 0.8 Siguiente voy a alinear los elementos dentro del formulario para eso, vamos a usar de nuevo Flexbox En este caso, voy a hacer el contenedor form flex usando display flex. Entonces otra vez, cambia la dirección. Voy a colocar los elementos en una columna verticalmente. A continuación, voy a colocar elementos en el centro verticalmente. Utilice el centro de contenido justificado. Y finalmente, crear algo de espacio dentro del elemento form usando padding con un valor de cinco rem en los cuatro lados. Muy bien, eso es todo sobre el elemento form. Ahora hay que personalizar el área de texto de entradas y el Bateson Al principio voy a seleccionar los elementos de entrada y el área de texto porque tendrán algunos estilos comunes. Así que vamos a seleccionar ambos elementos. En primer lugar, definamos la anchura y la altura. Vamos a establecer con el 200 por ciento. Para la altura. Voy a hacerlo para rampa. Después de eso, vamos a crear algo de espacio en la parte superior e inferior usando el margen. Vamos a ponerla en Ram y a cero. Y también voy a hacer el color de fondo de transparente el color de fondo de los elementos de entrada y el área fiscal. Bien, sigamos adelante y agreguemos un par de estilos más a esos elementos Vamos a crear algo de espacio dentro de ellos usando relleno. El valor 0.5 RAM en los cuatro lados. Después cambiar la frontera. Voy a asignar 2.1 run solid y el color blanco. A continuación voy a cambiar el tamaño de la fuente. Hagámoslo 1.5 RAM. Después crea algo de espacio entre las letras usando espaciado entre letras 0.1 RAM. Y finalmente cambia el color, hazlo blanco. Bien, entonces las entradas y el área de texto o estilo. Y antes de seguir adelante y darle estilo al botón, voy a agregar un par de estilos más al área de texto. Ahora mismo. Tiene solo ancho y alto, lo que puede ocasionar el problema en el layout porque podemos cambiar manualmente el tamaño del área de texto. Entonces necesitamos definir el ancho y la altura máximos. Así que vamos a seleccionar el área de texto y definir max-width. Que sea 100 por ciento. En cuanto a la altura mínima, voy a hacer que corran ocho. Bien, entonces ahora se soluciona el problema con el área de texto. Pero tenemos aquí otro tema. La altura de los elementos de entrada disminuyó y sucede porque ahora el área de texto se hizo más grande y empujó al resto de los elementos. Entonces para evitar este tipo de cosas, podemos usar una de las propiedades del elemento flex llamada flex shrink y tenemos que hacerla cero. ¿Está bien? Lo siguiente que quiero hacer es cambiar el color de fondo para las entradas y el área de texto una vez que las enfoquemos. Así que vamos a seleccionar las entradas y el área de texto con un nombre de clase común para un put, que debe ir seguido de la pseudo-clase de desenfoque Cambiemos el color de fondo. Voy a usar RGBA con el color blanco y con la opacidad 0.5 También necesitamos transición con color de fondo y la duración 0.5 s. bien, así finalmente, podemos personalizar el botón. Sigamos adelante y seleccionémoslo. Necesitamos usar al principio la clase del elemento form porque de lo contrario algunos de estos estilos no se aplicarán al botón. Como ya sabéis, el botón se crea usando el elemento input, y probablemente todos tengamos algunos estilos para el down de abril. Cambiemos el color de fondo. Voy a usar RGBA, donde el color blanco y con la opacidad 0.8 Entonces cambiemos el peso de la fuente, hazlo 600. Así que vamos a crear algo de espacio entre las letras usando el espaciado entre letras 0.3 rampa. Después cambia el color, hazlo 444. Y también cambiar el tipo del cursor. Hacerlo señalar. Muy bien, entonces con el botón, ya terminamos. Y ahora tenemos que cuidar el último elemento, que es el párrafo. Entonces sigamos adelante y seleccionémoslo. En primer lugar, aumentemos su tamaño de fuente, hagamos que se ejecute. También cambia el peso de la fuente. Voy a hacer 300. Entonces hagámoslo de color blanco. Y también alinear el conjunto de texto. Bien, entonces el párrafo está personalizado y en realidad casi terminamos con esta sección y con un proyecto en sí Antes de seguir adelante y hacer que el proyecto sea receptivo, quiero hacer un cerdo más. La sección de contacto es la última sección del proyecto y quiero deshacerme del espacio en la parte inferior. Así que vamos a seguir adelante y asignarle un margen inferior con un valor de cero. Muy bien, así que finalmente terminamos. El proyecto se construye con éxito y ahora tenemos que pasar al último paso y hacer que el proyecto sea receptivo a diferentes tamaños de pantalla. 64. Proyecto 6 - Hacer que responda al proyecto: Bien, así que antes de comenzar a crear media queries CSS sobre diferentes puntos de interrupción y hacer que el proyecto Volvamos a echar un vistazo al proyecto terminado. Entonces, si inspecciono la página, luego cambie al modo responsive y verifique que los proyectos estén en diferentes tamaños de pantalla. Entonces encontrarás que se ve bien y anuncios receptivos. Bien, entonces necesitamos lograr este resultado. Sigamos adelante e inspeccionemos la página. Entonces, como saben, el proyecto está construido sobre un tamaño de pantalla extra grande. Estoy en el tamaño de pantalla con 1920 pixeles de ancho y 1080 pixeles de alto. Ya he preparado diferentes puntos de quiebre en que necesitamos hacer algunos cambios, así que no voy a perder el tiempo en encontrarlos. El primer punto de interrupción va a ser de 1,500 píxeles. Como puedes ver en el punto de interrupción, necesitamos cuidar la barra de navegación Y también algunas de estas secciones necesitan algunos cambios. Sigamos adelante e insertemos nuevos comentarios. Responsivo y fuera de respuesta. En realidad, antes de escribir aquí cualquier código, dividamos la ventana del código VS en dos partes. Y mostrar el archivo style.css en ambos lados. Creo que hará que nuestro trabajo en proceso sea más conveniente porque encontraremos estilos actuales rápidamente y luego crearemos una nueva consulta de medios CSS Voy a especificar aquí el max-width. Hagámoslo 1,500 pixeles. Lo primero que tenemos que hacer es aumentar la barra de navegación Me refiero al ancho de la Navbar. Sigamos adelante y seleccionémoslo. Vamos a establecer su ancho en 20, ancho de la ventanilla. Y también voy a disminuir ligeramente el acolchado. Vamos a llegar a RAM que la rampa 00.2. Entonces se incrementa el ancho de la novela, pero ahora el icono del menú está oculto. Y también, una vez que cerramos lo suficiente o es parcialmente visible. Entonces necesitamos cambiar la posición de la izquierda. Hagámoslo -20 de ancho de la ventanilla. Y también necesitamos cambiar la posición del icono del menú al hacer clic. Seleccione menú con el cambio de clase. Y pongamos su posición de liderazgo en 20. Ancho de la ventanilla. Bien, así que eso es todo respecto a Navbar Vamos a encargarnos de las secciones. Una vez que se muestra el número, entonces esta sección, por lo parcial oculta. Entonces, vamos a encargarnos de eso. Voy a seleccionar sección con el cambio de clase. Y voy a establecer su posición izquierda a 20 de ancho de ventana gráfica Además de eso, voy a cambiar el valor de la función rotate. Hagámoslo 15 grados. Bien, eso es todo sobre este elemento de sección. Sigamos adelante y nos ocupemos de la primera sección. Creo que necesitamos agregar algo de espacio entre el encabezado y la imagen. Ahora mismo. La sección uno tiene el centro del clúster. Por lo que justifican la propiedad de contenido se establece centro y voy a cambiarlo y el espacio de Megan de manera uniforme Bien. Sigamos adelante y nos ocupemos de este encabezamiento de sección. Quiero disminuir ligeramente su tamaño de fuente. Así que vamos a seleccionar este elemento y establecer el tamaño de la fuente en siete. Corre. Bien, eso es todo sobre la primera sección. Sigamos adelante y nos ocupemos del segundo. Voy a alinear las tarjetas en múltiples líneas. Y para eso, tenemos que establecer la propiedad flex wrap para envolver. Así que vamos a seleccionar tarjetas, envoltorio y asignado a flex wrap con el valor wrap. Entonces como se puede ver que las tarjetas están envueltas y colocadas en diferentes líneas, pero tuvieron que cuidar la altura de esta sección. Voy a configurarlo auto y también aumentar el relleno en la parte inferior. Voy a poner el relleno a cinco rem en la parte superior que a cero en el lado derecho. Tan corrió por la parte inferior y cero en el lado izquierdo. Bien, lo siguiente que tenemos que hacer es crear algo de espacio entre las cartas Y también voy a disminuir su ancho. Así que vamos a seleccionar la tarjeta Y establecer su ancho en cuatro para correr. Y también voy a poner margen a tres rondas. Bien, eso es sobre la segunda sección. Sigamos adelante y personalicemos este tercero. Voy a aumentar el ancho del video. Sigamos adelante y seleccionémoslo. Entonces voy a establecer ancho dos, así que para presentar. Y también voy a cambiar el margen. Vamos a llegar a RAM en los cuatro lados. Y también voy a aumentar el acolchado en los lados izquierdo y derecho de esta sección. Seleccionemos la Sección tres y fijemos el relleno a cinco rem. Y luego tres rampas en los lados izquierdo y derecho. Con una galería de videos. Estamos hechos bajo el punto de ruptura. Sigamos adelante y personalicemos la galería de imágenes. Lo primero que voy a hacer es aumentar el espacio entre las repisas. Entonces, seleccionemos Galería y fijemos margen a 12 rem en la parte superior e inferior y cero en los lados izquierdo y derecho. Verlo ahora mismo el diseño está deshecho porque la altura de esta sección ya no es suficiente Entonces necesitamos que sea R0. Seleccionemos la sección cuatro y establecemos la altura en auto. Bien, lo siguiente que quiero hacer es aumentar el tamaño de la repisa Así que vamos a seleccionarlo y establecer su ancho en 90%. Además, voy a aumentar el tamaño de la imagen. Entonces, seleccionemos Gallery IMG y fijemos su ancho en 20%. Las imágenes se hicieron más grandes, pero se colocan demasiado cerca una de la otra. Para arreglarlo, voy a cambiar las posiciones de la segunda y tercera imágenes. Entonces seleccionemos Galería en la que dos. Establezcamos su posición izquierda en 25%. En cuanto a la tercera imagen, voy a hacer su posición izquierda 75%. Bien, ahora se ven bien y donde la galería de imágenes estamos hechos Sigamos adelante y nos ocupemos de la última sección, que va a ser la sección de contacto. Lo primero que tenemos que hacer es cambiar la altura de la sección. Entonces sigamos adelante y seleccionemos la Sección cinco y hagamos su altura R0 A continuación, cuidemos los elementos del formulario. Seleccione Formulario de contacto. Voy a cambiar su tamaño al set con 255 corrieron. En cuanto a la altura que voy a hacer para correr. Y también cambiar el acolchado. Hagámoslo a rampa. Por último, necesitamos crear algún espacio en la parte superior del párrafo. Así que vamos a seleccionarlo con los derechos de autor de la clase y establecer el margen superior a cinco rondas. Bien, entonces creo que hemos terminado en el punto de ruptura por estas secciones. Luce bien. Entonces, sigamos adelante y pasemos al siguiente punto de interrupción, que va a ser mil píxeles Voy a crear una nueva consulta de medios CSS. Vamos a especificar max-width, hazlo mil pixeles. Lo primero que voy a hacer en el punto de quiebre es deshacerme del acolchado del lado derecho. Entonces, seleccionemos el cuerpo y fijemos el relleno derecho a cero. Bien, Siguiente vamos a personalizar lo suficiente o porque no se ve del todo bien En realidad, voy a agarrar el código del punto de interrupción anterior Y cambiemos 20 de ancho de la ventanilla a 25. Ancho de la ventanilla También voy a aumentar el valor de la función rotate. Hagámoslo 20 grados y deshagámonos de este relleno desde aquí. Bien, entonces el número se ve bien. Sigamos adelante y nos ocupemos de la primera sección. Voy a aumentar el ancho de la imagen. Entonces, seleccionemos la Sección uno, IMG y fijemos su ancho en 90% Creo que la primera sección se ve bien y no necesitamos cambiar nada más. Lo mismo podemos decir de la segunda sección. En cuanto a la galería de videos, sigamos adelante y personalízala. Voy a colocar los videos verticalmente en una columna. Así que sigamos adelante y seleccionemos envoltorio de videos Y luego cambiemos la dirección del flex, hazlo llamar. Los videos se colocan en una columna, pero ahora la altura de esta sección no es suficiente. Entonces voy a hacer remar todo. Seleccionemos la Sección tres y fijemos su altura en nuestra fila. Después aumenta el ancho de los videos. Hagámoslo 70%. Y también voy a cambiar el margen. Hagamos que tres corrieran por arriba e abajo y cero en los lados izquierdo y derecho. Bien, entonces la galería de videos se ve bien. Si revisamos otras secciones, entonces encontrarás que también se ven bien. Entonces es momento de pasar al siguiente punto de interrupción, que va a ser de 750 píxeles Así que vamos a crear nueva consulta de medios CSS donde el max-width 750 Así que de nuevo, necesitamos personalizar la barra de navegación. Sigamos adelante y agarremos el código del punto de interrupción anterior Voy a cambiar 25 de ancho de la ventanilla en. Tercero al ancho de la ventanilla. En cuanto a la función de rotación, hagamos su valor 25 grados. ¿Bien? Entonces, ahora bar se ve bien. A continuación voy a encargarme de los rubros. Seleccionemos el encabezado de la sección. Establezca el tamaño de fuente a 5.5 g. Bien, así que las tres primeras secciones también se ven bien La galería de imágenes, necesitamos hacer algunos cambios. Creo que tenemos que hacer las repisas más delgadas. Así que vamos a seleccionar la repisa Galería. Hagamos su altura 1.5 RAM como ancho de poli. Voy a fijarlo al 95%. Entonces voy a encargarme de la segunda parte de las repisas, que es antes pseudo elemento Así que vamos a seleccionar Galería estante, seguido por el pseudo elemento antes Hagamos su altura cinco RAM. En cuanto a la primera posición, voy a poner en menos cinco. Ran. Las repisas se ven bien, pero ahora tenemos que cuidar las imágenes. Y vamos a seleccionar la imagen de la galería. Voy a definir su ancho como 25%. En cuanto a la posición inferior, vamos a hacer que caiga envoltura. Por último, necesitamos cambiar las posiciones de las imágenes. Entonces seleccionemos Galería en la que dos. Voy a hacer presente su posición izquierda 22. En cuanto a la tercera imagen, hagamos su posición de liderazgo 78%. En realidad, casi terminamos con esta sección. Y antes de seguir adelante, creo que cuando se disminuye el tamaño del espacio en la parte inferior de esta sección. Entonces, seleccionemos la sección cuatro. Y el relleno definido con un valor es seis RAM 01 ejecutar, y luego otra vez cero. Bien, eso es. En cuanto a este punto de interrupción, sigamos adelante y creamos el siguiente, que va a ser de 600 píxeles Así que vamos a crear una nueva consulta de medios CSS y especificar el ancho máximo como 600 píxeles. En primer lugar, voy a disminuir el tamaño de fuente del elemento HTML porque disminuirá los tamaños de todos los elementos. Así que vamos a establecer el tamaño de la fuente en 55.5%. A continuación, vamos a disminuir el tamaño de fuente de todos los encabezados de sección Así que vamos a seleccionar el encabezado de la sección y hacer su tamaño de fuente 4.5 Ram. A continuación, voy a encargarme de la primera sección. Seleccionemos la imagen de la Sección uno y fijemos su ancho 200 por ciento. Después pasa a la galería de videos. Quiero aumentar el ancho del video. Así que pongamos el ancho al 100%. En cuanto al margen, voy a llegar a Ram en la parte superior e inferior y a cero en los lados izquierdo y derecho. Bien, sentémonos con respecto a la galería de videos. A continuación, voy a personalizar la galería de imágenes. Entonces, seleccionemos Galería y fijemos el margen a nueve RAM y cero. Eso es lo de la galería de imágenes. Sigamos adelante y personalicemos los elementos formados. Selecciónelo. Por lo que voy a cambiar el ancho, vamos a convertirlo en cuatro a RAM. Y también voy a establecer frontera a uno corrió sólido. Y el color blanco con la opacidad 0.8. Bien, así que todas estas secciones están personalizadas y ahora tenemos que encargarnos de la barra de navegación Voy a aumentar de nuevo de tamaño. Así que vamos a agarrar el código del punto de interrupción anterior. En realidad, voy a cambiar el ancho y las posiciones para el icono de Napa y Menú. Hagámoslo cuatro al ancho de la ventanilla. En cuanto a los elementos de esta sección, ya no queremos rotarlos. Así que pongamos let position a cero. En cuanto a la función rotate, hagamos su valor cero. Bien, así que eso es todo sobre este punto de ruptura. Sigamos adelante y creamos el último, que va a ser de 400 píxeles. Vamos a crear una nueva consulta de medios CSS y especificar el ancho máximo. Que sea 400 pixeles. En ese punto de interrupción, voy a disminuir el tamaño de fuente del elemento HTML Hagámoslo 40 por ciento. Y finalmente, vamos a disminuir el ancho del texto de copyright. Hagámoslo un 2%. Bien, así que finalmente, terminamos. El proyecto responde a diferentes tamaños de pantalla, y en realidad hemos terminado de trabajar en él 65. Proyecto 7 - Previsualización de proyecto: Bien, entonces es momento de seguir adelante y comenzar a construir el siguiente proyecto, que va a ser uno de los más grandes Como es habitual, antes de profundizar en nuestro proyecto y comenzar a construirlo al principio, sigamos adelante y describamos nuestro proyecto y comenzar a construirlo al principio, . Entonces si vuelvo a cargar la página, entonces llegaremos hasta aquí este pintor está exhibiendo por un par de segundos. Después de eso, se carga el proyecto. Lo primero que ves aquí es una landing page con un banner animado y el ícono de Menú. Una vez que se muestra el proyecto, el banner se mueve desde abajo con una transición agradable y suave. Además de eso, tenemos aquí un fondo animado a pantalla completa La escala de la imagen disminuye con una transición. Bien, así como dije, tenemos aquí el ícono de Menú que se coloca en la esquina superior derecha Si hago clic en él, entonces la barra lateral se mostrará desde el lado derecho. También el ícono de Menú se transformará en una X. La navegación va a ser sencilla, pero aquí tenemos un efecto agradable y genial. Si coloco el cursor sobre los elementos de navegación, entonces cambiarán su color de izquierda a derecha Además de eso, tenemos aquí un par de íconos de redes sociales en la parte inferior de decidible con algunos efectos de terror Si coloco el cursor sobre el botón de cierre x, entonces la información sobre herramientas se mostrará con un texto Y si hago clic en la X, la barra lateral se cerrará. Bien, veamos sobre los préstamos y la barra lateral. Pasemos a la siguiente sección, que va a ser sobre nosotros. Tenemos aquí el encabezamiento con un subrayado seguido de algunos textos e íconos En el centro de esta sección tenemos una pequeña imagen de la casa. Esta sección se va a construir en base al módulo de diseño CSS llamado cuadrícula CSS. A continuación viene la sección de código. Tenemos aquí tres cartas con un bonito y genial efecto hover Se va a crear con uno de los plugins de JavaScript llamado tilde dot js Así podrás aprender sobre cómo usar estos plug-ins. Después de la sección de tarjetas, construiremos la sección de contacto. Como pueden ver tenemos aquí la imagen de fondo en el lado izquierdo de esta caja. En cuanto al lado derecho, hay un par de elementos. Realicé los encabezados, varias entradas y el botón Enviar, cada uno de los campos de entrada como su etiqueta Y si enfoco la entrada y la etiqueta se moverá hacia arriba con alguna transición. Este efecto es muy popular y de uso común en la actualidad. Así podrás aprender a crearlo. Justo después de la sección de contacto, construiremos este simple pie de página donde tenemos el texto de copyright y algunos íconos de redes sociales. Entonces lo último que quiero mencionar aquí es este botón amarillo fijo con el icono de flecha hacia arriba. Si hago clic en él, entonces la página se desplazará suavemente hacia arriba hasta la parte superior derecha. Por lo que el proyecto va a responder a todos los diferentes tamaños de pantalla. Si inspecciono la página, luego cambio al modo responsive y verifico el proyecto en diferentes tamaños de pantalla. Entonces encontrarás que responde y se ve bien. Como de costumbre. Quiero recordarte una cosa. El proyecto se construye con base en el primer enfoque de escritorio, y lo construimos en el tamaño de pantalla más grande. Estoy en el tamaño de la pantalla con los vehículos de la década de 1920 de ancho y diez AD gran fuente de altura Entonces, si estás usando un tamaño de pantalla relativamente más pequeño, entonces el proyecto podría no verse bien durante las conferencias, pero eso no es un problema. Eventualmente, lo haremos receptivo. Mientras tanto, puede usar el modo de respuesta y establecer el ancho en 1920 píxeles y la altura en píxeles y trabajar así 66. Proyecto 7 - Crear y personalizar la página de aterrizaje: Bien, entonces creo que estamos listos para irnos. Empecemos. He creado una nueva carpeta en el escritorio llamada website architect, en la que tengo otra carpeta para las imágenes. Sigamos adelante y abramos la carpeta en código VS. Voy a crear tres archivos diferentes para HTML, CSS y JavaScript. Vamos a llamarlos índice de HTML, luego style.css y script.js. A continuación, voy a insertar el documento HTML básico en el archivo index.html. Usemos m it. Tenemos que colocar aquí un signo de exclamación y luego presionar Enter o tabular. Entonces aquí vamos. Bien, quiere que el documento HTML básico esté listo. Es hora de ejecutar el proyecto en el navegador. Para ello, voy a usar uno de los paquetes de código VS llamado Live Server. Este paquete y también para ejecutar el proyecto a la vida del navegador y realizar cambios o actualizaciones sin volver a cargar la página cada vez Por lo que recomiendo instalar y usar este paquete. Bien, entonces el proyecto está en marcha. Tenemos que montar un par de cosas más. En primer lugar, vinculemos estos tres archivos. Voy a abrir etiqueta de enlace. Después en los atributos de referencia h, voy a especificar la ruta del archivo CSS. En cuanto al JavaScript, vamos a abrir una etiqueta de script justo encima de la etiqueta de cuerpo de cierre, y en el atributo source para especificar la ruta del archivo de script. Además de eso, cambiemos el título. Te voy a insertar sitio web de arquitecto. Bien, así que los tres archivos están conectados. Y a continuación, voy a traer un par de enlaces. A lo largo del proyecto. Voy a usar algunos Font, iconos Awesome, y también un par de Google Fonts. Primero vamos a encargarnos del enlace impresionante de la fuente. Voy a buscar Font Awesome, CDN, js. Pasemos a este enlace. Selecciona CSS y toma el enlace. Voy a abrir una etiqueta de enlace aquí y pegar el enlace como el valor del atributo h reference. ¿Correcto? Después de eso, voy a buscar fuentes de Google. Entonces este es el sitio web de Google Fonts. En general, voy a usar tres fuentes diferentes. Busquemos Lu dA2 y seleccionemos algunos de estos diferentes estilos. A continuación necesitamos losa Josefina. Voy a seleccionar un par de estilos aquí también. Y por último, busca película. Entonces voy a agarrar el enlace y pegarlo en el elemento head. Bien, entonces creo que estamos listos para irnos. Voy a construir el proyecto sección por sección. Al principio, prepararemos las marcas HTML y luego escribiremos algunos CSS Echemos un vistazo al proyecto terminado. Entonces la primera parte de nuestro proyecto que se va a construir es un encabezado. Tiene la pancarta con un párrafo de encabezado, y botón. Una vez que recarguemos la página. Y el spinner termina cargarse de lo que aparecerá el banner con una bonita animación. Además, tenemos aquí una imagen a pantalla completa que también tiene algún efecto de animación Además de eso, voy a crear un icono de menú. Técnicamente, no es parte del encabezado. Tiene una posición fija. Pero de todos modos, voy a crearlo. Bien, lo suficiente como para hablar, comencemos. Voy a abrir una etiqueta div, que va a ser el contenedor. A continuación, vamos a abrir la etiqueta de encabezado HTML5. Con un encabezado de clase. El encabezado constará de dos partes principales. El primero va a ser la imagen. En cuanto a la segunda parte, debería ser la pancarta. Voy a abrir la etiqueta div con el envoltorio de clase IMG. Va a ser el envoltorio de la imagen. Y luego dentro de ese elemento div, vamos a abrir la etiqueta image y los atributos source. Voy a especificar la ruta de la imagen. Necesitamos bg dot JPG de la carpeta de imágenes. Bien, A continuación tendremos una pancarta. Entonces es la etiqueta div abierta con el banner de la clase. Consistirá en tres elementos diferentes. El primero va a ser H1 encabezando elementos con el texto, la arquitectura y el interiorismo. A continuación tendremos párrafo Con algún texto ficticio y también botón con un impuesto descubre ahora Bien, entonces aquí tenemos el encabezado con sus elementos. A continuación, voy a crear el marcado para el icono Menú. Entonces vamos a abrir la etiqueta div con un menú de hamburguesas de clase. Por lo que las líneas del icono se representarán con elementos div. Vamos a abrir la etiqueta div con la línea de clase, que va a ser el nombre de clase común. Pero además de eso, necesitamos aquí la línea uno para algún estilo individualista. Después duplique esta línea de código dos veces y cambie los nombres de las clases. Necesitamos la línea dos y la línea tres. Bien, así que eso es todo sobre el marcado HTML para el encabezado Ahora es el momento de comenzar a escribir algo de CSS. En primer lugar, voy a entrevistar algunos estilos de reset y comunes. Vamos a deshacernos del margen predeterminado y el relleno para todos los elementos. Para seleccionar cada elemento, necesitamos usar asterisco y luego establecer el margen y el relleno de ambos a cero Además de eso, voy a deshacerme del esquema predeterminado de los elementos. Necesitamos esbozar ninguno. Además, vamos a establecer el tamaño de la caja, border-box. A continuación, me voy a deshacer de los estilos predeterminados. Para la lista. Quiero decir, necesitamos ninguno estilo lista Y también me voy a deshacer de los estilos predeterminados para los elementos de enlace. Pasemos tu decoración de texto. Ninguno. Bien, así como pueden ver, todos los estilos comunes y reset se aplican a lo largo de este proyecto, voy a usar RAM como unidad de medida este momento, una RAM 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 una RAM en diez píxeles porque creo que será más conveniente y fácil de calcular. Entonces para ello, tenemos que disminuir el tamaño de fuente del elemento HTML. Hagámoslo 62.5 por ciento. Ahora, una RAM es igual a diez píxeles. Se puede ver que los tamaños de los elementos han disminuido. Sigamos adelante y personalicemos el encabezado. Vamos a seleccionarlo. En primer lugar, voy a definir su anchura y altura. Eso fijó con el 200 por ciento como probablemente la altura. Voy a hacer que sea 100 de altura de ventana gráfica. Significa que establecemos la altura del encabezado 200% de la ventana gráfica A continuación, voy a cuidar la imagen. Seleccionemos su envoltorio y fijemos ancho y alto, ambos 200 por ciento. Y además de eso, voy a definir color de fondo para que la imagen quede bien. Usemos tu valor RGBA con color negro y con opacidad 0.8 Por último, voy a personalizar la propia imagen. Así que vamos a seleccionarlo. Después, establecer ancho y alto, ambos 200 por ciento. Además, necesitamos aquí la cubierta de pies de objeto para mantener la calidad de la imagen. Y por último, voy a disminuir la opacidad. Hagámoslo 0.5. Entonces, como pueden ver, la imagen se ve bien. Ya no tenemos aquí las barras de desplazamiento, y ahora es el momento de personalizar ese banner. En primer lugar, voy a cambiar la posición de la pancarta. Vamos a seleccionarlo y establecer la posición en absoluto. Para definir la posición del banner según el encabezado, que es su elemento padre. Tenemos que establecer la posición del encabezado a un pariente. Entonces voy a hacer la primera posición de la pancarta 30% S para la posición. Hagámoslo 15 por ciento. Entonces se posiciona el banner y ahora voy a personalizar sus elementos. Empecemos por el encabezamiento. Vamos a seleccionarlo. En primer lugar, voy a definir esta familia de fuentes. Vamos a usar una fuente llamada bramido dA2, el grupo de fuentes serif Entonces voy a aumentar el tamaño de la fuente. Hagámoslo ocho RAM. También. Voy a hacer la fuente un poco más ligera usando font-weight 300 Y luego cambia el color, hazlo blanco. Entonces el rumbo se ve bien. Voy a disminuir su ancho para romperlo en dos líneas distintas. Hagamos su ancho 50 por ciento Además de eso, tenemos que disminuir la altura de línea porque hay dos grandes espacios entre las líneas. Entonces hagamos que la altura de la línea nueve corriera. ¿Bien? Ahora se ve mucho mejor. Agreguemos aquí un par de estilos más. Voy a crear algo de espacio entre letras usando punto de espaciado de letras a RAM. Y también crear un pequeño efecto de sombra usando sombra de texto con los valores 0.3, 0.5 RAM, y el RGBA con color negro y con opacidad Bien, eso es todo sobre el elemento heading. Pasemos al párrafo. Vamos a seleccionarlo. Voy a establecer familia de fuentes a Josephine slab serif. Eso incrementó el tamaño de la fuente, lo hacen extraño y cambian el color. Que sea blanco. Bien, Siguiente, voy a disminuir el ancho del párrafo también Hagámoslo 70%. Y también crear algún espacio entre las letras usando espaciado lateral con el valor 0.1 ran. Después de eso, vamos a crear algo de espacio en la parte inferior del párrafo y también agregarle alguna sombra. Entonces necesitamos margen inferior con un valor de tres rem. Y también sombra de texto. El valor es 0.3, 0.5 rampa, y RGBA con color negro y con opacidad Eso es todo sobre el párrafo. Pasemos al fondo. Vamos a seleccionarlo. Y antes que nada, voy a definir su anchura y altura. Vamos a configurar con 225 RAM. En cuanto a la altura, voy a hacer que sea siete correr. Y también cambiar el color de fondo. Voy a usar aquí color, ver 29525. Bien, sigamos adelante y agreguemos algunas otras estrellas al fondo. Voy a deshacerme del borde predeterminado. Usemos border none. También cambie la familia de fuentes. En este caso, voy a usar la fuente llamada Molly. Después aumenta el tamaño del hueso, hazlo a Ram. También transforma el texto en mayúsculas y cambia de color. Que sea blanco. Bien, así que paso a paso, el globo se está volviendo mucho más agradable Voy a agregarle algunos efectos de sombra. Primero usemos sombra de texto con valores 0.2 ram, punto para RAM. Y el RGBA con un color negro y con el punto de opacidad a, Duplicemos esta línea de código, cambiemos la sombra del texto en sombra de caja Además, en lugar de 0.2, necesitamos 0.3, luego 0.5, y la opacidad 0.4 Y por último, hagamos el tipo del puntero del cursor. Bien, así que eso es todo sobre el Batson está personalizado y creo que es bastante agradable Siguiente Voy a darle estilo al ícono de Menú. Y después de eso, nos encargaremos de la animación. Así que sigamos adelante y seleccionemos menú de hamburguesas y definamos su ancho y alto Voy a ponerles a ambos 23 RAM. Y también usa escuchar algunos antecedentes temporales. Hagámoslo rojo. Entonces tenemos que encargarnos de la posición del icono. Se va a colocar en la esquina superior derecha de la página. Entonces voy a fijar la posición del icono a fija. Y luego definir las propiedades superior y derecha. Voy a ponerlos a los dos a cinco carreras. Se posiciona el icono. Como puedes ver, no es del todo visible. Arreglemos eso con la propiedad z-index. Y también voy a hacer visibles las líneas. Entonces usemos aquí índice Z con algún valor más alto, digamos 200. A continuación, seleccione la línea. Como saben, es lo común costoso para todas las líneas. Entonces, antes que nada, definamos la anchura y la altura. Voy a establecer con el 200 por ciento. En cuanto a la altura, hagamos que apunte a correr. También cambiar. El color de fondo está aquí, blanco Y luego usa box shadow con los valores 0.1 RAM que punto a RAM. Y el RGBA con tres ceros y opacidad 0.2. Bien, entonces ahora las líneas son visibles, pero se colocan una encima de la otra Necesitamos algo de espacio entre ellos. Y lo voy a crear usando Flexbox. Así que hagamos el menú de hamburguesas flex container. Entonces necesitamos cambiar la dirección de la flexión. Hagámoslo columna. Para crear un espacio uniforme entre las líneas, vamos a usar justificar contenidos con los valores espaciados uniformemente. Después cambia el tipo del puntero del cursor. Y también me voy a deshacer del color de fondo rojo. Bien, así que con el ícono de Menú, ya terminamos. Está personalizado y se ve bien. Ahora como dije, voy a crear algunas animaciones. Voy a comenzar con la animación de imagen a pantalla completa. Va a ser algo simple. Aumentaré la escala de la imagen y luego la disminuiré durante la animación. Entonces voy a crear fotogramas clave CSS como el nombre de la animación Vamos a usar la escala. Entonces, en general, tendremos dos pasos, punto de partida y punto final. Aumentaremos la escala de la imagen a 1.3 y la disminuiremos a uno durante la animación. Entonces, en cero por ciento, necesitamos transformarnos con la función de escala. Voy a insertar aquí 1.3. Y todo el cien por ciento. Necesitamos, de nuevo transformar, escalar el valor uno. Entonces la animación está lista. Sólo tenemos que aplicarlo a la imagen. Para eso, tenemos que usar un par de propiedades de animación. Me refiero al nombre de la animación y a la duración de la animación. Entonces, como nombre de la animación, necesitamos usar una escala. En cuanto a la duración de la animación. Hagámoslo 25 s. Usamos aquí dos propiedades diferentes, pero en realidad podemos usar aquí solo la propiedad de animación. Y evita escribir un par de propiedades diferentes. Tenemos que especificar aquí el nombre de la animación, seguido de la duración, 25 s. así como puedes ver, la animación está funcionando. La escala de la imagen es decreciente. Pero tenemos aquí un pequeño problema. Quiere que se incremente la escala de la imagen. Aquí vemos estas barras de desplazamiento. Y para arreglarlo, tuvimos que usar overflow hidden y tenemos que asignarlo al envoltorio de imagen. Ahora se considera, el problema está arreglado. Bien, así que la primera animación funciona bien. Pasemos al segundo. Voy a animar la pancarta. Se debe mover de abajo, quiere que la página se carga. Entonces voy a crear otros fotogramas clave CSS. Vamos a llamarlo pancarta movida. Al igual que la animación anterior, tendremos dos pasos en un punto de partida. Voy a bajar los elementos y además girarlos un poco. Después durante la animación aparecerán desde abajo y girarán hacia atrás. En primer lugar, ocultemos los tres elementos de banner por defecto. Usemos opacidad cero. En realidad, el efecto de rotación va a ser un 3D. Entonces necesitamos crear un entorno 3D. Y para eso, tenemos que usar una de estas propiedades CSS llamada Perspectiva. Voy a asignarlo a la cabecera. Hagámoslo cien dram, y luego agreguemos algunos estilos a los fotogramas clave Entonces, sobre el cero por ciento, necesitamos transformarnos. Con la función Traducir Y. Moverá los elementos según el eje y. Vamos a insertar aquí por 2M. Y también necesitamos rotar y. girará elementos según el eje y así como el año pasado -20 grados. Al cien por ciento. Tenemos que establecer ambas funciones a cero. Entonces necesitamos transformar, traducir Y cero y rotar y cero también. Y además de eso, tenemos que hacer visibles los elementos usando opacidad uno Bien, entonces los fotogramas clave están listos. Ahora necesitamos definir las propiedades de animación para cada elemento del banner. Deberían tener el mismo nombre y duración, pero un tiempo de retraso diferente. Así que vamos a asignar a los tres elementos. Propiedad de animación. Dentro de un banner de movimiento. La duración va a ser de 1 s. Y después de eso, voy a definir diferentes tiempos de retardo para el encabezado necesitamos 0.5 s. Entonces para el párrafo, voy a usar 0.7 s. En cuanto al botón, hagamos que el tiempo de retardo sea 0.9 s. ¿Bien Entonces como puedes ver, los elementos están ocultos por defecto. Si vuelvo a cargar la página entonces aparecerán desde abajo Una vez finalizada la animación y los elementos desaparecen de nuevo. También durante la animación vemos la barra de desplazamiento. Entonces tenemos que arreglar esos problemas. Una vez finalizada la animación, los elementos del banner deben mantener estos mosaicos del segundo paso de los fotogramas clave Me refiero a traducir y rotar funciones con valores cero y opacidad uno Para lograrlo, podemos agregar a esos valores un valor adicional llamado forward. Pertenece a la propiedad de modo película de animación. Y también para deshacernos de esta barra de desplazamiento, necesitamos desbordamiento oculto. Bien, así que ahora todo funciona a la perfección. Y con un encabezado, ya terminamos 67. Proyecto 7 - Crear y hacer trabajo Sidebar: Sigamos adelante y empecemos a trabajar en la siguiente parte de los proyectos. Voy a crear la barra lateral y también hacer que el menú de hamburguesas funcione Echemos un vistazo al proyecto terminado. Entonces, una vez que haga clic en el icono del menú, luego la barra lateral que mostraremos, se moverá de derecha a izquierda. Tenemos aquí un par de elementos del menú. Si vuelo el cursor sobre ellos, entonces van a cambiar su color amablemente Además, tenemos aquí varios iconos de redes sociales abajo en la parte inferior de la barra lateral. Si coloco el cursor sobre el botón de cierre x, entonces aparecerá una pequeña punta de herramienta con el texto cerrado Y cuando haga clic en la X, la barra lateral, cerraremos. Eso dijo lo que vamos a crear en esta parte. En primer lugar, vamos a crear el marcado HTML. Voy a abrir la etiqueta de sección justo después del encabezado. Vamos a asignarle la barra lateral de clase. La barra lateral constará de dos partes diferentes. Tendremos los elementos de navegación y algunos íconos de redes sociales. Entonces vamos a abrir el elemento UL con el menú de clase. Entonces necesitamos el elemento LI con un elemento de menú de nombre de clase, seguido de los elementos de enlace, que deben tener enlace de menú de clase. Y como primer elemento del menú, voy a insertar aquí a casa. Entonces, en general, tendremos cinco elementos de menú diferentes. Así que vamos a duplicar el elemento LI cuatro veces y cambiar el contenido. El segundo va a ser sobre nosotros. Entonces tendremos precios de equipo y contextos. Entonces como puedes ver aquí, tenemos los enlaces. A continuación, agreguemos un par de iconos de redes sociales a la barra lateral. Voy a abrir elemento div con una clase, redes sociales. Entonces voy a pasar tus elementos de enlace, que incluirán Fuente, Icono impresionante. El primero va a ser Facebook. Entonces necesitamos aquí clase FAB, a, Facebook, F. Duplicemos el elemento link dos veces. Y para cambiar los nombres de las clases, necesitamos aquí, FAB, FAA, Instagram Y el tercero va a ser f a b, f un tweeter. Bien, así que con el marcado HTML, ya terminamos. Sigamos adelante y comencemos a personalizar la barra lateral. Voy a seleccionarlo y definir su ancho y alto. Hagamos su ancho para dos RAM. En cuanto a la altura, va a ser cien de altura de ventana gráfica Además, voy a definir la posición que se va a arreglar. Y luego tenemos que encabezar y encabezar las propiedades. Ambos iguales a cero. ¿Bien? Entonces la barra lateral se coloca de la manera correcta. Y para poder verlo mejor, cambiemos el color de fondo. Vamos a usar aquí color blanco. Bien, sigamos adelante y comencemos a personalizar los elementos del menú. Voy a seleccionar el propio menú y colocarlo en algún lugar del centro de la barra lateral. Entonces definamos su posición, hagámosla absoluta. Después fijó la propiedad al 40 por ciento. A continuación necesitamos que nos quede con un valor del 50 por ciento. Y también para centrar el elemento, usemos Transformar, Traducir, y pasar año -50 por ciento dos veces El menú se posiciona. A continuación, voy a personalizar los artículos. Sigamos adelante y seleccionamos los elementos LI, que tiene elemento de menú de clase y asignado al centro de alineación de texto. Después de eso, voy a seleccionar los enlaces. En primer lugar, definamos font-family. En este caso, voy a usar fuente llamada valor dA2. Serif. Después aumenta el tamaño de la fuente, hazlo para RAM. Y también cambiar el color. Hazlo gris oscuro usando 555. Bien, Eso es todo sobre los elementos del menú en este momento, adelante y cuidemos los íconos de las redes sociales voy a seleccionar el elemento div, que es el envoltorio de los iconos. En primer lugar, definamos la posición, hagámosla absoluta. Como sabes, los íconos de las redes sociales deben colocarse en la parte inferior de la barra lateral. Entonces voy a definir la propiedad bottom con un valor de tres rem y además hacer el ancho cien por ciento. Bien, Siguiente, voy a colocar el ojo constantemente en el centro para eso. Usemos flexbox. Necesitamos display flex y justificar el centro de contenido. Bien, sigamos adelante y personalicemos los íconos. Voy a seleccionar elementos. En primer lugar, aumentemos el tamaño de la fuente, hagamos que apunte a la RAM. Y crear margen. Tres corrieron. Después de eso, definamos el ancho y la altura. Voy a ponerlos a los dos a 4.5 RAM. También cambia el color de fondo. Hazlo gris oscuro usando 777. Y luego cambiar el color. Haz que los iconos sean blancos. Entonces voy a colocar los íconos en el centro de esas cajas. Y también vamos a hacer los círculos de cajas. Con el fin de centrar los iconos. Voy a usar Flexbox. Vamos a usar display flex y luego justificar el centro de contenido. Y alinee los artículos al centro. En cuanto a las cajas que hacen círculos como border-radius con el valor 50% ¿Bien? Entonces los íconos se ven bien. Y lo último que quiero hacer con respecto a ellos es crear un simple efecto hover Voy a cambiar el color de fondo al flotar. Así que sigamos adelante y seleccionemos elementos con hover y cambiar el color de fondo Voy a usar el color C2 9525. Además de eso, necesitamos valores de transición, color de fondo y 0.3 s. Bien, así que con los íconos de las redes sociales, terminamos Volvamos a los elementos del menú y creemos. El efecto hover va a ser diferente. No va a ser este simple hover que usamos hace un minuto. Entonces, una vez que pasemos el cursor sobre los artículos, deberían cambiar el color de izquierda a derecha Déjame explicarte lo que vamos a hacer. Crearemos los pseudo elementos anteriores para cada elemento del menú con exactamente el mismo contenido, pero con un color diferente ejemplo, el hogar tendrá el pseudo elemento antes con el texto Home About Us tendrá sobre nosotros y así sucesivamente Se colocarán en los elementos del menú reales, pero tendrán el ancho de cero píxeles. Una vez que coloquemos el cursor sobre los elementos, el ancho del pseudo elemento anterior aumentará al 100 por ciento. Y creará el efecto de cambio de color. Bien, escribamos el código y quedará más claro Vamos a seleccionarlo antes de pseudo elementos. Lo primero que tenemos que hacer es definir el contenido. Como decíamos, cada pseudo elemento tendrá los mismos contenidos Entonces podemos seleccionar los pseudo elementos para todos los enlaces de menú por separado usando el enésimo selector secundario O nos vendría bien un pequeño truco. Voy a asignar a todos los enlaces de menú el atributo llamado data content. Después especificaré los contenidos para cada enlace de menú por separado. Para el primero, necesitamos a la OMS. ¿Entonces sobre nosotros? De lo que necesitamos un equipo. Precios y contacto. Después de eso, solo necesitamos asignar a la propiedad content una función llamada attribute, que se expresa como TTR Y necesitamos especificar aquí el nombre del atributo, que es el contenido de datos. ¿Bien? Después de eso, voy a definir la posición. Hagámoslo absoluto. Necesitamos posición relativa para el enlace del menú porque son los elementos padre. Y necesitamos posicionar antes pseudo elemento de acuerdo con el enlace del menú Después de eso, definamos las propiedades superior e izquierda. Tenemos que hacer que ambos sean cero y cambiar el color It, C2 9525 Bien, entonces lo que vemos aquí son los pseudo elementos antes Ahora voy a hacer su ancho cero por defecto y aumentarlo 200 por ciento al flotar Entonces ahora mismo los pseudo elementos del antes siguen siendo visibles Y también el segundo ítem se rompe en dos líneas. Para solucionar esos problemas, necesitamos usar overflow hidden, que lo ocultará ante pseudo elementos Y para evitar envolver texto, necesitamos espacios en blanco con un valor no rep. Bien, así que ahora estamos listos para irnos Vamos a usar el efecto hover. Voy a seleccionar enlace de menú con hover, seguido de los pseudo elementos antes Y tenemos que hacer con el cien por ciento. Además, voy a usar transición con los valores width 0.3 s. Y además de eso, voy a usar una de las funciones de temporización de transición llamada facilidad de entrada, salida. Entonces, como puedes ver, el hover funciona perfectamente y crea un efecto realmente agradable y genial Bien, así que con los elementos del menú ya terminamos. A continuación, tenemos que hacer que el menú de hamburguesas funcione. Voy a ocultar esta barra lateral por defecto y mostrarla una vez que hagamos clic en el icono del menú, también tenemos que transformar las líneas en X y mostrar la punta de la herramienta una vez que coloquemos el cursor sobre la x En primer lugar, voy a lograr mostrar ocultando la barra lateral. primer lugar, voy a lograr En primer lugar, voy a lograr mostrar ocultando la barra lateral Y lo haremos usando un poco de JavaScript. Entonces crearemos una nueva clase y CSS llamada change, que incluirá algunos estilos para la barra lateral. Añadiremos este nombre de clase al contenedor cuando hagamos clic en el icono de menú. Así que vamos al archivo script.js y al principio seleccionemos el icono del menú. Voy a hacer eso usando el método selector de consultas. Tenemos que especificar aquí el nombre de la clase, que es menú de hamburguesas A continuación tenemos que adjuntar al elemento de escucha de eventos usando el método add event listener, que tomará dos argumentos El primero va a ser el tipo de evento. Haga clic. En cuanto al segundo argumento va a ser la función de flecha, que se ejecutará una vez que hagamos clic en los elementos. Después de eso, necesitamos seleccionar el contenedor. Vamos a utilizar de nuevo el método selector de consultas y pasar su contenedor de nombre de clase. Entonces nuevamente, tenemos que agregar la clase al contenedor cuando hacemos clic en el icono, y luego tenemos que eliminarla en el siguiente click. Entonces necesitamos usar un método toggle. Al principio, voy a usar aquí la propiedad de lista de clases. Esta propiedad devuelve todas las clases que tiene el elemento. A continuación, necesitamos adjuntarle un método llamado toggle. Y tenemos que especificar aquí el nombre de la clase. Cambio. Bien, así que eso es todo sobre el JavaScript. Volvamos a CSS. Voy a ocultar la barra lateral por defecto. Para eso, cambiemos su posición correcta. Ahora mismo equivale a cero y necesitamos aquí -40 rampas, porque el ancho de la barra lateral es igual a 40 Ran. Después de eso, necesitamos seleccionar un cambio de clase, seguido de la barra lateral. Tenemos que establecer la posición correcta a cero. Por último, usemos la transición con los valores derecho y 0.5 s. Así que si hago clic en el icono, la barra lateral se mostrará con una transición suave y se cerrará una vez que volvamos a hacer clic en el Eigen Bien, entonces la barra lateral se mueve, pero el ícono de Menú no cambia Como saben, tuvimos que transformarlo en x. Pero antes de eso voy a hacer icono del menú se mueva al hacer clic. Es decir, debería moverse en la misma dirección que lo hace la barra lateral. Para eso nuevamente, necesitamos usar un nuevo cambio de clase, seguido del menú de hamburguesas Y voy a cambiar su posición correcta. Hagámosla rampa 33. También use transición. Necesitamos aquí, ¿verdad? Y la duración 0.7 s, va a ser ligeramente superior la duración de la transición de la barra lateral. Creará un bonito efecto Así que consideremos que el icono se mueve con alguna transición agradable. Bien, finalmente, sigamos adelante y transformemos el icono en x. Necesitamos transformar la primera y tercera líneas En cuanto a la segunda línea, tenemos que ocultarla al principio. Cambiemos el color de fondo porque la barra lateral tiene un fondo blanco y el icono no es del todo visible. Voy a seleccionar la línea una vez más, porque eventualmente le agregaremos el cambio de clase. Entonces cambiemos su color de fondo. Voy a usar aquí el valor RGBA con un color negro y con la opacidad 0.8 Después voy a seleccionar las líneas con los nombres de las clases individuales. Seleccionemos la primera línea. Entonces, una vez que hacemos clic en el icono, la primera línea debe girar y también moverse ligeramente de acuerdo a ambas direcciones Estoy en los ejes x e y. Entonces necesitamos transformarnos con la función rotate. Voy a rotar líneas con 45 grados. En cuanto a la función translate, voy a pasar aquí 0.3 RAM y luego 0.8 rampa. Como decíamos, la segunda línea va a estar oculta. Así que vamos a seleccionarlo y asignarle opacidad cero y visibilidad oculta. Bien, eso es lo de la segunda línea. A continuación tenemos la línea tres. Voy a copiar este código desde aquí. Cambiemos el nombre de la clase. Necesitamos la línea tres. Y también necesitamos -45 grados y -0.8 RAM. ¿Bien? Entonces, como pueden ver, tenemos aquí la x. Y para que funcione, necesitamos agregar a las tres líneas el cambio de clase. Bien, entonces el menú de hamburguesas funciona a la perfección. Y en realidad decidimos donde casi terminamos. Lo único que quiero crear es la información sobre herramientas, que debería mostrarse una vez que coloquemos el cursor sobre la x En primer lugar, voy a agregar un elemento span en el menú de la hamburguesa. En primer lugar, voy a agregar un elemento span en el menú de la hamburguesa Vamos a insertar tu ropa. Como ves ahora mismo ha estropeado un poco las líneas Tenemos que darle estilo. Entonces, sigamos adelante y seleccionemos los huesos espinales. En primer lugar, definamos su posición, hagámosla absoluta. Y luego establecer propiedad izquierda a cinco corrieron. El elemento span se posiciona. Sigamos adelante y definamos su anchura y altura. Voy a establecer su ancho en diez RAM. En cuanto a la altura, hagámoslo para RAM y también cambiemos el color de fondo. Voy a usar aquí el color E para ser 646. Bien, Siguiente voy a colocar el texto en el centro y personalizarlo. Usemos flexbox. Necesitamos display flex y luego justificar el centro de contenidos. También alinee los artículos en el centro. Cambiemos el color del texto y también cuidemos la fuente. Voy a hacer color blanco. En cuanto a la familia de fuentes, voy a utilizar bellow dA2 Después cambia el tamaño de fuente, hazlo 1.6 RAM. Y también crear algún espacio entre las letras usando espaciado de celosía con valor 0.1 ran Bien, así que la información sobre herramientas está casi lista. Tenemos que agregarle una pequeña flecha en el lado izquierdo. Y lo voy a crear usando un antes pseudo elementos Así que vamos a seleccionar elemento span con los pseudo elementos antes Vamos a vaciar el contenido. Y posición definida. Hazlo absolutamente. Entonces ahora mismo el pseudo elemento no es visible, pero eso lo arreglaremos Voy a crear su forma con la ayuda de las fronteras. Por lo que necesitamos definir la frontera en los cuatro lados. Empecemos por el lado izquierdo. Necesitamos borde a la izquierda con los valores uno corrió color sólido y transparente. A continuación, voy a usar la frontera ¿verdad? Valora una RAM, sólida, y el llamador e para ser 646 A continuación, voy a usar border bottom. De hecho, vamos a agarrar esos valores de aquí y pegarlos. Después duplica esta línea de código y cambia de abajo a arriba. Entonces ahora el elemento es visible, pero necesitamos definir su posición. Hagamos su primera posición 50 por ciento. Entonces voy a definir la posición izquierda. Hagámoslo menos dos RAM y también usemos Transform. Traducir y con el valor -50%. Bien, así que eso es todo. La información sobre herramientas está lista. Voy a ocultarlo por defecto. Y una vez que colocamos el cursor sobre el icono, debería mostrarse Entonces necesitamos aquí opacidad cero, visibilidad oculta. Después voy a seleccionar el icono con el hover, seguido de este elemento span Hagamos que la opacidad uno y la visibilidad sean visibles. Y también voy a usar transición con los valores todos y 0.2 s. bien, así que una vez que pasemos el cursor sobre el icono, entonces se mostrará una descripción sobre herramientas Pero en realidad tenemos aquí un pequeño problema. Si coloco el cursor sobre el icono mientras la barra lateral está oculta, entonces la información sobre herramientas se mostrará de cualquier manera No necesitamos eso, necesitamos mostrarlo una vez que el icono se transforma en una x Y para lograrlo, necesitamos volver a usar el cambio de clase. Bien, así que ahora todo funciona perfectamente con este lado, pero ya terminamos 68. Proyecto 7 - Creación y estilo sobre nosotros con la sección Grid CSS: Es momento de pasar a la siguiente sección, que va a ser la sección Acerca de nosotros. Echemos un vistazo al proyecto terminado y vuelva a parecer lo que vamos a construir Entonces esta es la sección Acerca de Nosotros. Consiste en un encabezado que incluye el encabezado, el subyacente. Entonces abajo tenemos un par de párrafos con encabezados y algunos iconos de Font Awesome En el centro de esta sección podemos ver la imagen de la casa. Esta sección va a ser una especie de simple, pero a la vez, la interesante, porque vamos a crear el layout usando la cuadrícula CSS. Bien, sigamos adelante y comencemos a crear el marcado HTML Voy a abrir esta etiqueta de sección justo después la barra lateral con el nombre de la clase sobre nosotros. A continuación voy a insertar aquí el encabezado. En realidad también tendremos el mismo encabezado en otra sección. Así que voy a usar aquí hay algunos nombres de clase comunes, Digamos encabezado de sección. Entonces como decíamos, el encabezado consistirá en un encabezado y la otra línea. Entonces voy a instituir elemento de encabezado H1 con la sección de clase rumbo con el contenido sobre Nosotros. Y abajo abajo abrir la etiqueta div con la clase subyacente. Bien, a continuación tenemos que encargarnos de los servicios. En general, tendremos seis de ellos. Cada servicio consistirá en un encabezado, Fuente, icono Awesome y el párrafo. En primer lugar, voy a abrir una etiqueta div, que va a ser el wrapper de los servicios. Después abre una etiqueta div para el propio servicio. Por lo que tendremos dos partes principales en cada servicio. El primero va a ser el encabezado de servicio, que incluirá el icono Font Awesome y el encabezado. Después en su interior se abren I elementos con los nombres de clase, FAS, una pluma, plumín Siguiente Voy a abrir h3 elemento encabezado con el contenido interior Y también necesitamos párrafo con los textos de servicio de clase y con algún texto ficticio Bien, Como dijimos, en general, tendremos seis superficies Entonces voy a duplicar este código cinco veces y cambiar los nombres de clase de los elementos I y también los encabezados. Entonces el segundo va a ser FAS, un rodillo de pintura como probablemente rumbo. Hagámoslo exterior. A continuación tendremos FAS, un lápiz hacia fuera y ellos encabezan diseño. Entonces el siguiente va a ser pintura FASFA, decoración con brocha. A continuación tendremos la regla FASFA combinada. Y la rúbrica va a ser planeada. En cuanto al último servicio, usemos la clase FAR un edificio y la ejecución de rumbo. Bien, entonces aquí tenemos los servicios. Lo único que hay que hacer con respecto al marcado HTML es agregar la imagen Entonces voy a abrir la etiqueta div, que va a ser la envoltura de la imagen. Vamos a asignar a la clase sobre nosotros envoltorio de imagen que abra la etiqueta de imagen en sí. En el atributo source. Vamos a especificar la ruta de la imagen. Necesitamos House dot PNG de la carpeta de imágenes. Bien, así que eso es todo sobre el marcado HTML. Todo está listo para comenzar a escribir el CSS. Como dije, el layout de la mayor parte de esta sección será creativo usando CSS grid. Entonces voy a cambiar el proyecto al Mozilla Firefox por un tiempo Porque hoy en día, Mozilla Firefox cuenta con las mejores herramientas de desarrollo para el módulo de cuadrícula CSS. Hará que nuestro proceso de trabajo sea más cómodo y flexible. Si no estás familiarizado con el módulo de cuadrícula CSS, entonces puedes consultar nuestro tutorial rápido de CSS en YouTube. Puedes encontrar el enlace en la descripción. Bien, sigamos adelante y comencemos a escribir el CSS. En primer lugar, voy a seleccionar los elementos de esta sección. Definamos su ancho. Que sea 100 por ciento También cambia el color de fondo. Voy a usar un color gris claro, F5, F5, F5. Y también crear algo de espacio en la parte inferior usando relleno inferior con la rampa de valor 15. Bien, entonces ahora voy a personalizar el encabezado. Seleccionemos el encabezado de sección. Al principio, tenemos que centrar los elementos. Y para eso voy a usar flexbox. Así que vamos a hacer encabezado de sección Contenedor Flex. Entonces tenemos que cambiar la dirección. Hagámoslo columna. Y para centrar los artículos flexibles, necesitamos alinear los artículos al centro. Además de eso, voy a crear algo de espacio dentro del encabezado usando padding. Hagamos relleno en la parte superior siete RAM que cero en el lado derecho, bronceado Roma en la parte inferior y cero en el lado izquierdo. Bien, entonces el encabezado está centrado y ahora voy a personalizar el encabezado y luego el subrayado Sigamos adelante y comencemos con el rumbo. Vamos a seleccionarlo. Y antes que nada, definir font-family En este caso, voy a usar la fuente llamada movie serif. Entonces aumentó el tamaño de la fuente, que sea cinco rem. Además, voy a hacer que la fuente sea más ligera usando font-weight 300 Después cambia el color. Voy a usar color para B, para B, para B. Y crear espacio en la parte inferior usando margen, seis inferiores redondos. Bien, entonces el rumbo se ve bien. Sigamos adelante y cuidemos lo subyacente. Seleccionemos los elementos. Definir su anchura y altura. Voy a establecer el ancho a 12 RAM. En cuanto a la altura, hagámoslo 0.3 corrió. Y también, para que el subyacente sea factible, tenemos que definir el color de fondo. Usemos aquí C2 9525. Bien, así que con el encabezado ya terminamos. Sigamos adelante y nos ocupemos de estos servicios. Como dije, voy a alinearlos con la grilla CSS. Así que sigamos adelante y seleccionemos el envoltorio con los servicios de clase. En primer lugar, definamos el ancho y la altura, hagamos que ambos sean cien por ciento, y luego hagamos de los servicios un contenedor de cuadrícula usando la cuadrícula de visualización. Entonces ahora mismo, aquí no se cambia nada porque aún no hemos definido filas y columnas. Entonces en general tendremos 16 columnas y seis filas. Entonces tenemos que definir columnas de plantilla de cuadrícula. Usemos la función repeat y especificemos aquí el número de la columna 16 y luego el tamaño de la columna, una unidad fraccionaria A continuación tenemos filas de plantilla de cuadrícula. Entonces tendremos seis rollos. Utilice de nuevo la función de repetición, donde el argumento seis, cuanto al tamaño, voy a usar seis RAM. Finalmente, voy a crear espacio entre las filas usando brecha de fila de cuadrícula con valor para R1. ¿Bien? Entonces, como pueden ver, los elementos han cambiado sus posiciones. Sucedió automáticamente y ahora tenemos que definir sus posiciones manualmente y construir el layout. Antes de hacer eso, voy a inspeccionar la página y mostrar el diseño de la cuadrícula. En el lado derecho de las herramientas del desarrollador, tenemos una sección de diseño donde podemos encontrar un elemento div con el servicio de clase Entonces si marco aquí, la cajita, entonces se mostrará el diseño de la cuadrícula. Aquí puedes encontrar las columnas y las filas con números de línea adecuados. Entonces Mozilla, Firefox, también van a mostrar el diseño de la cuadrícula así. Bien, voy a disminuir el tamaño de la imagen por un tiempo porque creo que es demasiado grande ahora mismo Así que sigamos adelante y seleccionemos Imagen y fijemos su ancho en 50 RAM. Después de eso, definamos las posiciones para los servicios por separado. Para seleccionarlos por separado, voy a usar el enésimo selector hijo Entonces comencemos con el primer servicio. Vamos a seleccionarlo con el selector secundario enésimo. Y como número del servicio, vamos a especificar uno. Entonces ahora tenemos que definir los línea de columna de cuadrícula y los números de línea de fila de cuadrícula. Empecemos con la columna de rejilla. Voy a colocar Servicio Forestal entre 4.7 líneas. Entonces usemos aquí para slash seven. En cuanto a la fila de la cuadrícula, el servicio se va a colocar entre la primera y la tercera fila. Pasemos al segundo servicio. Voy a duplicar este código, cambiar el número del servicio y también el número de líquido columna y fila. Entonces, en caso de segundo servicio, necesitamos los números de línea de columna de cuadrícula 3.6. En cuanto a la fila de la cuadrícula, va a ser 3.5. En realidad, voy a definir rápidamente los números de línea para el resto de los servicios porque todos ustedes son esto. Entonces la forma que voy a usar para alinearlos. Entonces, para el tercer servicio, necesitamos columna de cuadrícula para siete y fila de cuadrícula cinco menos uno. Siguiente cuenta para el servicio. Necesitamos columna de rejilla, números de línea 11.14. Asfaltar la fila de la rejilla. Necesitamos 1.3. Para el quinto servicio. Voy a definir columna de cuadrícula como 12, 15, S4, la fila de cuadrícula necesitamos tres y 5.4, el último ítem. Para el sexto servicio, necesitamos los números de línea de columna de cuadrícula 11.14 En cuanto a la fila de la cuadrícula, necesitamos cinco menos uno. ¿Bien? Entonces los seis servicios están alineados, pero eso no es lo que queremos porque la imagen ha roto el layout. Sigamos adelante y definamos su posición también. Voy a definir posición para envoltorio. Vamos a usar la columna de cuadrícula y ponerla en 7.11. En cuanto a la fila de la cuadrícula, la voy a establecer en 2.6. Entonces ahora tenemos una situación mucho mejor, pero necesitamos agregar un par de estilos más al envoltorio de imagen y a la imagen misma para que el layout sea perfecto. Entonces voy a establecer el ancho del envoltorio de imagen 200 por ciento. En cuanto a la imagen, hagamos su ancho cien por ciento también. Además, necesitamos la cubierta de alimentación de objetos para mantener la calidad de la imagen. Y además de eso, voy a disminuir ligeramente la opacidad. Hagámoslo 0.8. Bien, entonces ahora la imagen se coloca perfectamente y ya terminamos con ella. Vamos a encargarnos de los servicios. Quiero que ocupen el 100% en sus celdas de cuadrícula. Entonces, seleccionemos el servicio y hagamos con el 100 por ciento. Y también crea algo de espacio en la parte inferior. Usando margen inferior para correr. Después de eso, vamos a personalizar los elementos individuales en el servicio. Empecemos con el encabezado de servicio, donde tenemos la Fuente, el ícono Awesome y el encabezado. Así que vamos a seleccionar este elemento. Voy a hacerlo flex contenedor usando display flex. Además, alineemos los elementos en el centro y creemos algo de espacio en la parte inferior usando margen inferior una rampa. En realidad, algo anda mal aquí porque el allí debería colocarse en la parte superior del párrafo. Vamos a revisar el marcado HTML. Entonces como puedes ver, el párrafo se coloca dentro la cabecera y ese es el error. Debe estar fuera de la cabecera. Así que vamos a arreglar eso rápidamente para todos los servicios. ¿Correcto? Después de eso, voy a darle estilo al icono Font Awesome. Entonces sigamos adelante y seleccionemos este elemento. En primer lugar, aumentemos el tamaño de fuente, hagámoslo para RAM. Luego cambia de color. Voy a usar para B tres veces. Y también crea algo de espacio en el lado derecho del icono usando margen derecho para ejecutar. Bien, entonces los íconos se ven bien y luego viene el encabezado Entonces, sigamos adelante y seleccionemos estos elementos. En primer lugar, voy a definir font-family. Vamos a usar aquí por Lou dA2. Serif. Después cambia el tamaño de fuente, hazlo 2.6 RAM. Y también definir la altura de línea con el mismo valor, 2.6 RAM. Además de eso, voy a hacer la fuente más ligera usando el peso de la fuente 400. Y crea un espacio en la parte inferior usando margen inferior para correr. Bien, entonces el estilo de rumbo también. Y por último, tenemos que encargarnos de los párrafos, seleccionar los textos de servicio. Al principio, definir font-family. Y este caso voy a usar Josephine losa serif. Después define el tamaño de fuente, hazlo 1.6 RAM. Y también voy a usar text align property con un valor justify. Bien, entonces los párrafos se ven bien. Y en realidad hemos terminado trabajar en la sección Acerca de Nosotros. Ahora es el momento de seguir adelante y comenzar a trabajar en la siguiente sección, que va a ser la sección de equipo 69. Proyecto 7 - Crea y personaliza tarjetas con inclinación: En primer lugar, voy a recordarles lo que vamos a construir. Entonces echemos un vistazo al proyecto terminado. Entonces aquí tenemos la sección de equipo. Consta de la cabecera y tres tarjetas. Si coloco el cursor sobre las tarjetas, aparecerá alguna información con un botón Y también se puede ver que tenemos aquí un bonito y genial efecto hover La corriente se mueve según la dirección del cursor. Este efecto se creará usando uno de los plugins de JavaScript llamado JS. Bien, entonces veamos qué vamos a construir. Como de costumbre, comencemos con el marcado HTML. Voy a abrir una etiqueta de sección justo debajo de la sección Acerca de nosotros. Vamos a asignar al equipo de clase. Por lo que en general tendremos dos partes en esta sección. El primero va a ser el encabezado. En realidad, voy a agarrar el código de la sección anterior. Vamos a pegarlo aquí y simplemente cambiar el rumbo que necesitamos aquí, nuestro equipo. La segunda parte de esta sección va a ser el envoltorio de tarjetas, que incluirá las tres cartas. Entonces es una etiqueta div abierta con un envoltorio de tarjetas de clase. Entonces necesitamos otro div, que será la propia tarjeta. Por lo que cada tarjeta constará de dos partes diferentes. El primero va a ser la imagen. Vamos a abrir una etiqueta div, que será el wrapper de la imagen que le voy a asignar clase card image wrapper. Entonces abrir en qué blanco sí mismo. Especificemos las partes de la imagen. Necesitamos una imagen llamada Person one dot JPEG de la carpeta images. Y también voy a asignar al atributo alt, el valor, digamos CEO. La segunda parte de la tarjeta va a ser la información de la tarjeta donde tengamos alguna información sobre la persona. Entonces voy a pasar aquí los elementos de encabezado H2, que incluirán el nombre completo de la persona. Entonces tendremos otro rubro, quiero decir, h3 elementos de encabezado, que especificarán la posición de la persona Vamos a insertar a tu CEO. Entonces tendremos poco párrafo con algún texto ficticio. Y por último, voy a insertar tu botón con el texto, leer más. Bien, así que aquí tenemos la primera tarjeta, que en este momento se ve bastante fea porque tenemos aquí solo HTML puro Entonces en general tendremos tres tarjetas. Así que vamos a duplicar la primera carta dos veces y luego hacer algunos cambios. Voy a cambiar el nombre de la imagen va a ser persona a JPG. También cambiamos el atributo alt que necesitamos aquí diseñador. El nombre completo de la persona va a ser n Brown. Y el diseñador de posiciones. A continuación, necesitamos cambiar el nombre de la imagen para la tercera tarjeta, va a ser persona tres puntos JPG. También el atributo alt va a ser arquitecto. Entonces voy a cambiar el nombre completo, se va a casar TO. Y finalmente, cambiar la posición, ¿no? Arquitecto. Se crea el marcado HTML y todo está listo para comenzar a escribir el CSS Como primero, voy a personalizar toda la sección y luego seguiremos adelante y usaremos la tilde J como plugin Entonces, sigamos adelante y seleccionemos los elementos de esta sección. Voy a hacerlo flex contenedor usando display flex. También cambia la dirección que necesitamos aquí columna. Y luego con el fin de centrar los elementos flexibles horizontal y verticalmente, vamos a usar justificar el centro de contenido y alinear los elementos al centro. Por último, voy a crear algo de espacio dentro de esta sección usando padding. Hagamos relleno en la parte superior. Cero, luego cinco rem en el lado derecho, 20 rampas en la parte inferior y cinco rem en el lado izquierdo. Derecha. A continuación voy a encargarme del envoltorio de tarjetas. Entonces sigamos adelante y seleccionemos este elemento. Que sea contenedor flexible. A continuación, voy a crear algo de espacio entre las tarjetas usando justificar el espacio de contenido de manera uniforme. Y por último, vamos a crear algo de espacio en la parte superior de las cartas usando margen superior con el valor ocho Ran. Bien, así como pueden ver, las cartas se colocan horizontalmente en fila. Sigamos adelante y personalízalos. Voy a la tarjeta en solitario. Definamos su anchura y altura. Voy a establecer con 237 RAM En cuanto a la altura, vamos a hacerla 45 rem. Entonces ahora mismo como puedes ver, cada una de las tarjetas tiene una anchura y altura diferentes porque tenemos las imágenes a más grandes. Entonces necesitamos definir sus tamaños. Seleccionemos Envoltura de imagen y definamos ancho y alto. Voy a ponerles a ambos el 200 por ciento. Después selecciona la propia imagen y define ancho y alto. Hagamos que ambos sean cien por ciento, y también usemos la cubierta de pies de objeto. Como puedes ver, no tenemos aquí el espacio entre las cartas porque no hemos definido el ancho para el envoltorio de Keras Así que vamos a asignarle un ancho y establecerlo al 100%. Bien, entonces ahora tenemos un resultado mucho mejor. Todas las imágenes tienen el mismo tamaño. Sigamos adelante y usemos un par de estilos más. Voy a agregar shadow usando box shadow con los valores 01 ejecutados para RAM. Y luego valor RGBA con el color negro y con punto de opacidad Para. A continuación, voy a agregar algunas estrellas al envoltorio de imagen y a la imagen misma. Entonces para el envoltorio, voy a definir el color de fondo. Hagámoslo 262626. Y también necesitamos border-radius para hacer las esquinas redondeadas Hagámoslo 0.5 rampa. A continuación, voy a agregar algunas estrellas a la imagen. Voy a disminuir ligeramente la opacidad. Hagámoslo 0.8. Y también necesitamos usar border-radius con el valor 0.5 rem Y además de eso, también necesitamos border-radius para el carro con el fin de crear perfecto para el radio para la tarjeta Así que hagamos que también sea 0.5 rampa. Bien, así que ahora tenemos que encargarnos de la información de la tarjeta. Como ya sabes, se va a colocar abajo y debe estar oculto. Y luego una vez que pasemos el cursor sobre la tarjeta, ésta debería mostrarse. Ahora mismo voy a colocarlo en la tarjeta. Y una vez que lo personalicemos, entonces nos encargaremos del efecto hover Así que sigamos adelante y seleccionemos la información de la tarjeta. Y que su posición sea absoluta. A continuación necesitamos posición relativa para la tarjeta porque voy a posicionar la información de la tarjeta de acuerdo con la tarjeta, que es el elemento padre. Luego defina la propiedad inferior para la información del auto y hágalo a Ram. Y también crear algo de espacio dentro de los elementos usando padding, value to ramp. Bien, vamos a seguir adelante y personalizar los elementos individuales en la información de la tarjeta Voy a empezar con un rumbo. Entonces sigamos adelante y seleccionémoslo. Define su familia de fuentes. Voy a usar fuente llamada bramido, el A2 serif. Después cambia el tamaño de fuente, hazlo dos puntos por Ram. Además, necesitamos usar tu altura de línea con el mismo valor 2.5 ran Haz que la fuente sea más clara usando el peso de fuente 300, y también cambia el color. Que sea e. Bien, así que el primer rumbo queda bien Quiero añadirle un poco de sombra. En realidad, quiero la sombra para el resto de los elementos también. Entonces voy a asignarlo a la propia información de la tarjeta. Así que definamos los textos shadow con los valores 0.2, 0.5 RAM, y el valor RGBA con color negro y con opacidad Bien, sigamos adelante y personalicemos el segundo encabezado. Vamos a seleccionarlo. Definido font-family. Voy a usar aquí moly serif. Después cambia el tamaño de fuente, hazlo a Ram. También haz que la fuente sea más clara usando el peso de fuente 500, cambia el color del texto. Voy a usar aquí llamado o A5 a A12 ocho. Y finalmente, vamos a crear algo de espacio en la parte inferior de los elementos usando margin bottom con valor one run. Bien, entonces eso es todo respecto al segundo encabezamiento, Pasemos al párrafo. Vamos a seleccionarlo Y definir font-family Vamos a usar aquí abajo dA2 serif. A continuación, voy a cambiar el tamaño de la fuente. Hagámoslo un punto para RAM. También, voy a definir line-height. Este caso, hagámoslo 1.6 RAM. Cambiar el peso de la fuente. Usa aquí 300. Entonces también, voy a cambiar el color del texto. Hagámoslo e. E. Después de eso, voy a disminuir ligeramente el ancho del párrafo. Hagámoslo 80 por ciento. Y también crear algo de espacio en la parte inferior usando margin, bottom to ram. Bien, entonces el párrafo se ve bien. Y el último elemento que necesitamos personalizar aquí es el botón. Así que vamos a seleccionarlo. Definir su anchura y altura. Voy a establecer el ancho a diez RAM. En cuanto a la altura, hagamos que sea tres RAM. Y también cambiar el color de fondo. Hagámoslo c29, 525. Bien, agreguemos un par de estrellas más al botón. Voy a conseguir frontera de voltios reductivos. Usemos border none. Después cambia font-family. Vamos a usar abajo la serif A2. A continuación voy a definir el tamaño de la fuente. Hagámoslo un punto para RAM. Y también definir la altura de la línea. Que sea 1.5 rem. En cuanto al color. Hagámoslo e Bien, así que finalmente voy a hacer los botones ligeramente redondeados y crear un poco de efecto de sombra Usemos border-radius con rampa de valor 0.3. Y también usar box-shadow con valores 0.1 rem, 0.8 RAM, y el valor RGBA con color plano y con el punto de opacidad para el botón está personalizado y en realidad estamos listos para crear un Al principio, cambiemos la posición de la información del auto y también lo hagamos oculto. Necesitamos que aquí la propiedad Watson sea igual a cero. Y también necesitamos opacidad cero y visibilidad oculta. Después voy a seleccionar una tarjeta con sin embargo, seguido de la información de la tarjeta. Una vez que pasamos el cursor sobre la tarjeta, tenemos que subir la información de la tarjeta y hacerla visible Entonces necesitamos comprar alguna propiedad con el valor a RAM que opacidad a cero y visibilidad visible. Y además de eso, vamos a usar la transición con los valores all y 0.3 s. bien, así como puedes ver, el efecto hover funciona En realidad, quiero añadir aquí una cosa más. Una vez que pasemos el cursor sobre la tarjeta, quiero hacerla un poco más oscura Así que vamos a seleccionar tarjeta con sin embargo. Entonces debería ser seguido por la imagen. Disminuyamos la opacidad, hazla 0.5. Y también usa valores de transición, opacidad y 0.3 s. bien, así como puedes ver, todo funciona a la perfección y en realidad estamos listos para usar el plugin llamado tilde J S. En primer lugar, voy a visitar su página web, buscar tilde Así que aquí está el sitio web de tildes JS plug-in. Aquí puedes encontrar información diferente. Estoy en los diferentes usos del plugin con diferentes opciones. Además, tenemos aquí las instrucciones de cómo usar este plug-in. Voy a hacer clic en el enlace de descarga. Navegaremos hasta el repositorio GitHub donde podremos encontrar diferentes archivos y carpetas. Tenemos que ir a la carpeta fuente. Puede encontrar aquí el archivo. Vamos a abrirlo. Entonces este es el código completo de este plug-in. Voy a copiarlo. Vamos a hacer clic en el botón Editar aquí, seleccionar el código completo y copiarlo. Después ve al código VS y crea un nuevo archivo llamado tilde dot js y pega aquí el código Después de eso, necesitamos vincular este archivo al documento HTML. Así que vamos a abrir la etiqueta script. Y en el atributo source especifique la ruta del archivo. Además de eso, también tenemos que traer el jQuery. Así que sigamos adelante y busquemos jQuery CDN. Ir al primer enlace. En realidad puedes elegir aquí diferentes versiones de jQuery. Voy a hacer clic en la versión sin comprimir y agarrar el enlace Vamos a pegarlo aquí. Bien, así que eso es todo con respecto a la configuración de tilt js. Volvamos a la página web. Entonces como dije, aquí, tenemos algunos efectos diferentes con las instrucciones. Se puede usar un efecto de paralaje, deslumbramiento, seguir votando, y así sucesivamente En nuestro caso, voy a usar el básico. Entonces, si deseamos utilizar diferentes opciones, puedes encontrar las instrucciones aquí. Lo único que tenemos que hacer es asignar a todas las tarjetas el atributo denominado tilde de datos Así que vamos a seguir adelante y usar el multi cursor e insertar para todas las tarjetas atributo llamado data tilt. Bien, así que si pongo el cursor sobre las cartas, entonces el efecto funcionará Creo que es bastante agradable y genial. Bien, entonces finalmente terminamos con la sección de equipo y podemos seguir adelante y comenzar a trabajar en la siguiente sección. 70. Proyecto 7 - Sección de contacto de creación y estilo: Echemos un vistazo a la versión terminada del proyecto. Por lo que la siguiente sección va a ser la sección de contacto. Tiene un fondo oscuro y el propio formulario de contacto se coloca en el centro de esta acción. Consta de dos partes. En el lado izquierdo tenemos una imagen como fondo. Como parte del lado derecho puedes ver aquí el encabezado, un par de campos de entrada y el botón de enviar. Cada campo de entrada tiene la etiqueta que se mueve hacia arriba muy bien una vez que nos enfocamos en los campos. Entonces eso es lo que vamos a construir antes de empezar a crear el marcado HTML, voy a arreglar un pequeño problema Si hago clic en el icono de menú y visualizo la barra lateral, notarás que termina detrás de las tarjetas. Entonces para arreglar ese problema, voy a usar la propiedad z-index con algún valor mayor, digamos 100 Bien, entonces ahora el problema está arreglado y podemos seguir adelante y comenzar a escribir el marcado HTML para la sección de contacto Vamos a abrir elementos de sección con el contacto de clase. Entonces voy a abrir la etiqueta div, que va a ser el envoltorio del formulario de contacto. Entonces como dijimos, el formulario de contacto, tendremos dos lados, izquierdo y derecho. Entonces vamos a abrir la etiqueta div, ese va a ser el lado izquierdo. Vamos a asignar a la clase contacto izquierda. A continuación necesitamos la etiqueta div abierta del lado derecho con el contexto de clase, ¿verdad? Por lo que el lado derecho constará de dos partes principales. El primero va a ser el rumbo. En cuanto al segundo, se debe deformar. Entonces abramos los elementos de encabezado H1 con el encabezado de contacto de clase. Y como el contenido aquí mismo, el contenido. Después de eso, abramos los elementos formados. El formado incluirá tres grupos de entrada diferentes y el botón submit, eso es open div tag con la clase input-group El primer grupo de entrada que tendrá el elemento input para el nombre completo y la etiqueta. Así que vamos a abrir la etiqueta de entrada con un tipo de texto y con campo de clase. A continuación tenemos que etiquetar. Vamos a asignarle entrada de clase, etiquetar, y también instituir el texto nombre completo. Bien, vamos a duplicar este código. Después cambia el tipo de gravado a correo electrónico. Y también en lugar de nombre completo, vamos a insertar tu correo electrónico. Bien, el tercer grupo de entrada va a ser diferente porque en lugar del elemento input, tendremos área de texto Vamos a abrir la etiqueta div con un grupo de entrada de clase. A continuación, inserte. área de textos donde se encuentra el campo de nombre de clase. Entonces después de eso, voy a crear etiqueta. Vamos a asignarle mensaje de clase, y también instituir el mensaje de contenido. Bien, finalmente, voy a crear el botón de enviar. Hagámoslo usando elemento de entrada con tipo submit. También necesitamos aquí presentar clase, btn y como el valor que está dentro de ti enviar Bien, así que eso es todo con respecto al marcado HTML de la sección de contacto Ahora tenemos que empezar a escribir algunos CSS y personalizar estos elementos. Sigamos adelante y seleccionemos los elementos de esta sección. En primer lugar, definir ancho y alto. Voy a establecer con el 200 por ciento. En cuanto a la altura, hagámosla al 100% de la ventanilla. Usa aquí 100 vh y luego cambia el color de fondo. Voy a usar aquí el color al siete, al siete, al siete. Bien, a continuación voy a colocar el contenido en el centro Y para eso, usemos flexbox. En primer lugar, voy a hacer que el elemento sección flex container usando display flex. Y luego con el fin de centrar el contenido verticalmente y también horizontalmente utilizar justify-content center y alinear items center Bien, entonces el contenido está centrado y con esta sección ya terminamos Pasemos al envoltorio de contacto. Primero, definamos ancho y alto. Voy a hacer su ancho 60 por ciento S para la altura. Hagámosla rampa 75. Además, voy a colocar las partes izquierda y derecha lado a lado usando display flex Y luego usemos algún color de fondo temporal para hacer visible el contexto propiamente dicho. Vamos a usar el color blanco. Y por último, voy a crear un pequeño efecto de sombra. Vamos a usar box shadow con los valores 03 RAM Sudden run y el valor RGBA, el color negro y con opacidad 0.5 Bien, así es como se ve ahora mismo el rapero de contacto Sigamos adelante y comencemos a personalizar el lado izquierdo. Seleccione Contacto. Se rió. Al principio, definamos su ancho. Voy a lograrlo 35%. Entonces voy a poner la imagen como fondo. Pero antes que nada, usemos gradiente lineal. Entonces te voy a pasar valor RGBA. Vamos a insertar aquí 153 veces y la opacidad 0.6. Entonces voy a usar otro valor RGBA. Inserte aquí 2023 veces y la opacidad 0.9. Después de eso, vamos a especificar la URL de la imagen. Necesitamos. Póngase en contacto con PG dot JPG de la carpeta de imágenes. Además, coloquemos aquí al centro y no repita. Y finalmente, necesitamos definir el tamaño del fondo. Cubierta. Bien, así que eso es todo sobre el lado izquierdo Sigamos adelante y cuidemos el lado derecho. Seleccionar contrato, ¿verdad? Debe ocupar el resto del ancho. Así que hagamos con 65 por ciento cambiar el color de fondo. Voy a usar tu color E. Y también definir relleno. Voy a hacer relleno en los tres primeros rounds. Y luego broncean RAM en el resto de los sitios. Además, deshagámonos del fondo blanco temporal del rapero de contacto. Bien, así que ahora voy a personalizar los elementos individuales del lado derecho Sigamos adelante y comencemos con el rumbo. Primero. Let's define esta familia de fuentes. Voy a usar aquí abajo dA2 serif que mayor tamaño de fuente, que sea seis RAM. También haz que la fuente sea más ligera. Usando el peso de la fuente 300. Cambia el color, hazlo a siete, a siete a siete. Entonces voy a crear algo de espacio en la parte inferior usando el margen inferior cinco corrieron. Y por último, vamos a colocarlo en el centro usando el texto align center. Por lo que el encabezado está estilizado. Se ve bien y voy a pasar a los elementos del formulario. Entonces sigamos adelante y seleccionémoslo. En primer lugar, definamos su ancho, hazlo al 100%. Hagamos el contenedor form flex usando display flex. Después cambia la dirección, hazlo columna. Y alinee los elementos al centro usando alinear los elementos en el centro. Bien, así que eso se dice de los elementos formados. A continuación voy a personalizar los campos de entrada. Me refiero a las entradas y al área de texto. Tienen el campo de clase común. Entonces sigamos adelante y seleccionémoslo. Vamos a definir el ancho, que sea 45 rem. Después haz que el color de fondo sea transparente. También se deshace del borde predeterminado. Y luego definir borde inferior con valores puntos. Correr. Voy a establecer el estilo de la frontera dos discontinuas. Después defina el color 636363. Bien, agreguemos un par de estrellas más a los campos. Voy a crear algo de espacio en la parte superior e inferior usando margen. Hagamos que sea tres RAM y cero. Además de eso, voy a usar relleno. Pongamos el relleno a un rem en la parte superior. En el lado derecho, en la parte inferior. En cuanto al lado izquierdo, hagamos que sea cero. A continuación, voy a definir font-family. En este caso, usemos la fuente llamada Molly serif. Después defina el tamaño de fuente, hágalo 1.6 RAM. Y cambiar el color. Usa aquí para b tres veces. Bien, así que los campos de entrada se ven bastante bien. Ahora voy a definir la altura para las entradas y el área de texto por separado. Entonces al principio vamos a seleccionar entradas y dijimos hola a para RAM. A continuación, seleccione el área de texto. Entonces, en caso del área de texto, voy a definir la altura máxima y la anchura máxima. Porque como sabes, podemos cambiar el tamaño del campo manualmente y rompería el layout. Entonces necesitamos desactivar esta opción. Vamos a establecer la altura máxima a siete rampa En cuanto al ancho máximo, hagámoslo 45 Marca. Bien, veamos sobre las entradas y el área de texto. A continuación, tenemos que encargarnos de las etiquetas. Deben colocarse dentro de los campos de entrada por defecto. Seleccionemos etiqueta y definiendo posición. Voy a hacerlo absoluto. Entonces necesitamos posicionar relativo para el grupo de entrada. Porque es el elemento padre. Después defina la propiedad izquierda como cero. Según la posición inferior. Lo definiremos por separado para las entradas y el área de texto. Entonces, al principio, definamos aquí font-family. Conviértelo con una serif de dA2 apetecible que el mayor tamaño de fuente. Que sea 1.8 corrió. Cambia el color. Voy a usar aquí el color para B, para B, para B. Y luego transformar el texto en mayúsculas Como sabes, las etiquetas deben colocarse dentro de los elementos de entrada. Y no vamos a poder enfocarnos en los insumos. Por lo tanto, voy a usar aquí eventos puntero, ninguno. Bien, seleccionemos las etiquetas de las entradas y el área de texto por separado y definamos la posición inferior Voy a comenzar con la etiqueta de entrada. Hagamos la posición inferior. Corrimos. En cuanto al área de texto. Me refiero a la etiqueta del área de texto, que tiene mensaje de clase. Hagamos la posición inferior seis. Bien, así que todo está listo para crear un efecto de enfoque Voy a hacer dos cosas distintas. Cuando me concentro en los campos de entrada, quiero transformar el borde discontinuas en uno sólido y también etiquetar múltiples y hacerlo un poco más pequeño Entonces voy a seleccionar el campo con la pseudo-clase de enfoque y definir el estilo del botón de borde Hazlo sólido. Entonces una vez que me concentre en los campos de entrada, entonces el borde cambiará y se transformará en resolverlo. Bien, a continuación pasemos a la etiqueta. Voy a seleccionar campo donde el foco. Ahora tenemos que seleccionar la etiqueta. Y en este caso necesitamos usar uno de estos combinadores CSS llamados selector general de hermanos, que se expresa por el signo tilde Así que voy a pasar a la etiqueta usando la función Transformar Traducir. Entonces necesitamos traducir Y. Vamos a Instituto valor menos tres ejecutar. También voy a disminuir el tamaño de fuente de la etiqueta. Hagámoslo un punto para correr. Y finalmente, usa la transición con los valores 0 y 0.3 s. Así que si vuelvo a hacer clic y enfocarme en los campos de entrada, entonces las etiquetas se moverán muy bien. Bien, así que casi terminamos con la sección de contacto. Lo último que tenemos que hacer es darle estilo al botón de enviar. Entonces, sigamos adelante y seleccionemos estos elementos. En primer lugar, definir el ancho y la altura. Voy a establecer el ancho a 45 RAM. En cuanto a la altura. Hagámoslo cinco rem. Luego cambia el color de fondo. Vamos a usar tu color. Ver 2955 Después cambia el color del texto, hazlo blanco. Se deshace del borde predeterminado usando el puerto o ninguno. Y crea algo de espacio en la parte superior usando margen superior para correr. El botón se ve mucho mejor, pero tenemos que agregarle algunos estilos más. Familia de fuentes Let's define. Voy a usar aquí fuente llamada Moly serif. Después cambia el tamaño de fuente, hazlo a Ram. También haz que la fuente sea más ligera usando font-weight 300. Transforma texto en mayúsculas. Después de eso, voy a crear algún espacio entre las letras usando el espaciado entre letras con el valor punto para redondear. Después hacer el puntero del cursor Finalmente, voy a crear algunos efectos de sombra para el texto y para el propio botón. Entonces usemos sombra de texto con los valores 0.1 rem, 0.3 rem, y el valor RGBA con un color negro y con la opacidad Entonces voy a duplicar esta línea de código, cambiar texto y a box y también hacer la opacidad 0.3 Bien, así que eso es todo. La sección de contacto está lista y en realidad podemos pasar a la siguiente parte de nuestro proyecto, que es el pie de página. El pie de página será sencillo. Tenemos aquí solo el texto de copyright y un par de íconos de redes sociales. Una vez que construimos un filtro, entonces crearemos ese botón de desplazamiento fijo, que nos permitirá desplazarnos hacia arriba hasta la parte superior de la página Bien, sigamos adelante y comencemos a crear el marcado HTML Y voy a abrir la etiqueta de pie de página con el pie de página de la clase. A continuación voy a abrir la etiqueta div, que envolverá el contenido de la foto. Así que vamos a asignar este contenido de pie de página de clase. Dentro del elemento div, tendremos dos partes. El primero va a ser el párrafo con algún texto de copyright. Entonces vamos a abrir el elemento p con un copyright de clase. Y luego Insertar, usar algún texto. Me refiero al copyright seguido del signo de copyright, que debe ser expresado por la entidad HTML5. Necesitamos escribir aquí ampersand, copiar, punto y coma, luego código 2020 Todos los derechos reservados. En cuanto a la segunda parte, va a ser la lista de los íconos de las redes sociales. Vamos a abrir la etiqueta div con la lista social de clase. Y pasa aquí par de elementos de enlace con la Fuente, Iconos impresionantes. El primero va a ser Facebook. Entonces usemos los nombres de tus clases. Fab, FA dash, Facebook, guión F. Duplicemos esta línea de código dos veces y cambiemos los nombres de las clases. Para el segundo necesitamos un BFA, Instagram. En cuanto al tercero, va a ser Twitter. Bien, entonces el marcado HTML está listo para el pie de página. Sigamos adelante y personalízalo rápidamente. Seleccionemos pie de página y definamos su ancho y alto. Voy a establecer con el 200 por ciento. En cuanto a la altura, hagamos que sea 15 RAM. Luego cambia el color de fondo. Voy a usar aquí el color 17181. A continuación voy a colocar el contenido del filtro en el centro. Y para eso, usemos flexbox. Necesitamos display flex. A continuación, justificar el centro de contenido y alinear el centro de elementos. Bien, sigamos adelante y personalicemos el contenido del pie de página. Seleccionemos estos elementos y definamos el ancho. Voy a llegar al 60%. Después haga que el contenedor flexible de contenido de pie de página usando display flex. Y luego crear espacio entre los elementos flex. Me refiero al párrafo y los íconos de las redes sociales que utilizan justifican el contenido, el espacio entre los elementos se alinean de la manera correcta. Sigamos adelante y estilízalos. Voy a comenzar con un párrafo que esté seleccionado y antes que nada, definir la familia de fuentes. Voy a usar aquí, abajo dA2 serif. Después define el tamaño de fuente, hazlo 1.6 corrió para el color. Voy a hacerlo A7, A7, A7. Entonces, como pueden ver, el párrafo está estilizado. Pasemos a los íconos de las redes sociales. Voy a seleccionar el elemento link que es margen definido. Voy a ponerla a cero en la parte superior e inferior. En cuanto a los lados izquierdo y derecho, hagámoslo correr. Después selecciona iones, aumenta el tamaño de la fuente, haz que se ejecute. Y cambiar el color. Aquí. Color A7 tres veces, ¿verdad? Entonces con el pie de página ya terminamos. Está personalizado y ahora tenemos que encargarnos de estos botones de rastreo Al principio, vamos a crear el botón en el archivo index.html. En realidad el botón se representará como enlace. Así que vamos a asignarle scroll de clase, BTN Luego inserte aquí I elementos con las clases FAS, flecha hacia arriba. Bien, sigamos adelante y diseñemos el botón. Selecciónelo. Debe tener posición fija. Luego se definieron los derechos y las propiedades inferiores. Voy a hacer cinco rem a los dos. Luego establece ancho y alto. Voy a ponerlos a los dos a 4.5 rem. Y también definir el color de fondo. Usa tu color E2, B64 seis. Bien, así que aquí tenemos el botón y ahora necesitamos darle estilo al icono Font Awesome Se debe colocar en el centro de la caja. Usemos flexbox. Necesitamos aquí justificar el centro de contenido, y también alinear los elementos del centro. Ese aumento en el tamaño de la fuente, hazlo a Ram. Cambia el color, hazlo blanco. Además, voy a crear un pequeño efecto de sombra usando box shadow con los valores 0.11, 0.6 RAM, y el RGBA con un color negro y con el punto de opacidad Y por último, utilizar el valor del radio de borde 0.3 corrió. ¿Correcto? Entonces el botón está listo, solo necesitamos que funcione. Para eso, voy a usar un par de líneas de JavaScript. Así que una vez que hacemos clic en el botón, pero vamos a asignar a los elementos HTML propiedad llamada scroll behavior. Y lo pondremos a suavizar. Entonces después de un segundo, lo retiraremos. Porque si no hacemos eso, entonces el desplazamiento suave funcionará. Si hacemos clic en alguno de los enlaces de la página. Sigamos adelante y antes que nada, seleccione el botón de desplazamiento con el método selector de consultas. Luego adjunte a él el oyente de eventos. Voy a pasar tu evento click y la función de flecha. Así que a continuación tenemos que seleccionar los elementos HTML. Vamos a utilizar de nuevo el método selector de consultas. Luego use el estilo y la propiedad llamada comportamiento de desplazamiento. Como decíamos, tenemos que configurarlo para suavizar. Después de eso con el fin de eliminar la propiedad de los elementos HTML. Después de 1 s, voy a usar el método llamado setTimeout, que tomará un argumento va a ser la función de devolución de llamada Y se va a ejecutar después 1 s. una vez que hagamos clic en el botón. Tomemos esta línea de código de aquí. Pégalo. Y en vez de suave, vamos a usar inicio. Y también necesitamos usar el segundo argumento, mil, que es mil milisegundos. Entonces, si hago clic en el botón, entonces navegaremos hasta la parte superior de la página sin problemas. Bien, así que eso es todo. Hemos construido todas las secciones de nuestros proyectos, y ahora es el momento de que respondan a diferentes tamaños de pantalla. 71. Proyecto 7 - Hacer que sea sensible al proyecto y cree Spinner de carga: Sigamos adelante e inspeccionemos la página. Luego cambia al modo de respuesta. En realidad, ya he preparado diferentes puntos de interrupción. ¿Dónde estamos para hacer algunos cambios? Entonces no vamos a perder el tiempo en eso. El primer punto de interrupción sobre el que necesitamos hacer algunos cambios va a ser de 1.500 píxeles Así que vamos a seguir adelante y crear CSS media query y especificar max-width como 1,500 En el punto de interrupción, voy a cambiar ligeramente la posición de la imagen en la sección Acerca de Nosotros. adelante y seleccionemos el envoltorio de la imagen y fijemos sus números de línea de fila de cuadrícula como tres, n menos uno. A continuación, voy a disminuir ligeramente el ancho de la tarjeta. Así que vamos a seleccionarlo y hacer el ancho. Para RAM. Después de eso, voy a encargarme del rapero de contacto. Voy a aumentar su ancho y disminuir la altura. Entonces, seleccionemos al rapero de contacto. Establezca su ancho en ocho por ciento. En cuanto a la altura, voy a hacerla rampa 65. Bien, así que lo último que voy a hacer es aumentar el ancho del contenido del pie de Así que sigamos adelante y seleccionemos este elemento y fijemos su ancho en 8%. Bien, así que eso es todo. No necesitamos ningún otro cambio en 1,500 píxeles. adelante y trabajemos en el siguiente punto de quiebre, que va a ser de 1,400 píxeles Así que voy a crear una nueva consulta de medios CSS con un ancho máximo de 1.400 Entonces lo primero que voy a hacer es personalizar los elementos del banner. Yo hice el párrafo del encabezamiento y el Bateson. Entonces sigamos adelante y comencemos con el rumbo. Voy a cambiar el tamaño de la fuente. Hagámoslo seis RAM. Después disminuye la altura de la línea. Que sea siete. Corre. Siguiente Voy a seleccionar el párrafo de banner. Disminuyamos su tamaño de fuente, que sea tres rampa. Y también seleccionar abajo. Vamos a disminuir su ancho, que sea 20 RAM. Después cambia la altura. Voy a fijarlo a cinco rem. En cuanto al tamaño de fuente, hagámoslo 1.6 redondo. Bien, entonces el encabezado se ve bien. Vamos a revisar la barra lateral. Como puede ver, necesitamos disminuir ligeramente el tamaño de fuente de los elementos del menú. Así que sigamos adelante y seleccionemos el enlace del menú y hagamos su tamaño de fuente tres rampa. ¿Correcto? Después de eso, vamos a encargarnos de la sección Acerca de Nosotros. Voy a cambiar ligeramente la disposición de los servicios. Así que vamos a seguir adelante y agarrar el código de aquí, pegarlo y cambiar los números de la línea de columna de la cuadrícula. En realidad, necesitamos deshacernos de la fila de la cuadrícula de cada servicio. A continuación, cambie los números de línea de columna de cuadrícula. Entonces, para el Servicio Forestal, necesitamos 37. Entonces van a ser 26. Para el tercer ítem, necesitamos 37. Entonces para el siguiente, van a ser 11, 15, luego 16. Nuevamente, 11, 15. Bien, entonces la sección Acerca de Nosotros se ve bien. Y en realidad no necesitamos ningún otro cambio en este punto de interrupción Pasemos al siguiente, que va a ser de 1,300 píxeles Así que sigamos adelante y creamos una nueva consulta de medios CSS con un ancho máximo de 1.300 Tenemos que encargarnos del equipo y de la sección de conflictos sobre ese punto de ruptura Todas las demás secciones se ven bien. Empecemos con la sección de equipo. Vamos a seleccionarlo y Disminuimos el relleno en la parte inferior. Hagamos que sea cinco rampa. Después selecciona envoltorio de tarjetas. Entonces en el punto de ruptura, voy a cambiar la dirección Hagámoslo una columna. Además, para colocar las tarjetas en el centro, use alinear elementos en el centro y cambiar el margen en la parte superior. Vamos a hacerlo para Ran. Bien, entonces a continuación tenemos que crear algo de espacio entre las cartas. Vamos a seleccionarlo y definir margen inferior con valor ocho redondo. Bien, entonces después de eso, vamos a encargarnos de la sección de contacto. Seleccionemos al rapero de contacto. Voy a aumentar su ancho. Hagámoslo 90 por ciento. Y también disminuir la altura. Voy a ponerla en 55 rondas. Después de eso, seleccionemos rumbo de contacto y cambiemos el espacio en la parte inferior. Vamos a establecer el margen inferior a la rampa. A continuación, voy a seleccionar campo. Me refiero a entradas y el área de texto y margen de cambio. Hagámoslo dos rem en la parte superior e inferior y cero en los lados izquierdo y derecho. ¿Bien? Entonces como puedes ver, con 1,300 pixeles, ya terminamos Pasemos al siguiente punto de interrupción, que va a ser mil píxeles Entonces, sigamos adelante y creamos un nuevo medio. Especifique aquí el ancho máximo como mil píxeles. Entonces al principio voy a personalizar el banner. Vamos a seleccionar elemento de encabezado. Cambia el tamaño de fuente, hazlo cinco rampa. Después disminuye la altura de la línea. Que sea seis. Ran. Después de eso, voy a seleccionar párrafo. Disminuyamos su tamaño de fuente, que sea 2.5 corrió. Después de eso, necesitamos botón. Voy a disminuir su tamaño. Hagamos su rampa de ancho 18. Después establece su altura en cuatro RAM. Y también cambia el tamaño de fuente, hazlo 1.5 rondas. Bien, entonces el binario se ve bien. Pasemos a la sección Acerca de nosotros. Entonces, bajo el punto de interrupción, ya no necesitamos el diseño de la cuadrícula Voy a usar flexbox. Colocaré todos los servicios y la imagen verticalmente en una columna. Así que sigamos adelante y seleccionemos los servicios y hagamos que sea contenedor flexible. Después cambia la dirección, hazlo una columna. Y también usa alinear elementos en el centro. ¿Correcto? Como puede ver, tenemos que disminuir el ancho de los servicios. Entonces, seleccionemos el servicio. Hacer su ancho para dos RAM. Y también definir margen inferior como seis corridas. A continuación tenemos que cuidar la imagen porque en estos momentos son dos más grandes. Así que al principio, vamos a seleccionar el envoltorio y establecer el ancho en cuatro para ejecutar. A continuación, tenemos que seleccionar la imagen en sí y tenemos que establecer su ancho 200 por ciento. Bien, así que con la sección Acerca de Nosotros, ya terminamos. Se ve bien. Además, no necesitamos hacer nada con la sección de equipo. Así que sigamos adelante y personalicemos la sección de contacto. En realidad voy a esconder el lado izquierdo en absoluto. Entonces, seleccionemos la conducta a la izquierda y pongamos su ancho a cero. Según el contrato, ¿verdad? Tenemos que hacer su ancho al 100%. Bien, cuidemos las entradas y el área de texto. Voy a seleccionar campo. Hagamos el ancho 55 rem. Entonces voy a seleccionar el área de texto porque necesitamos definir el ancho máximo para el área de texto. Vamos a ponerla en 55 rem. Y también cambiar el ancho del botón de enviar. Hagámoslo 55 rem también. Bien, así que eso es todo sobre la sección de contacto. Sigamos adelante y personalicemos el pie de página. Voy a colocar el párrafo y los iconos de las redes sociales verticalmente en una columna. Seleccionemos el contenido del pie y cambiemos la dirección, lo hagamos columna Siguiente necesitamos alinear los elementos al centro. También centro de alineación de texto. Y voy a establecer el ancho al 50%. Después de eso. Seleccionemos párrafo porque quiero cambiar los lugares para el párrafo y los íconos de las redes sociales. Quiero colocar íconos en la parte superior. Entonces cambiemos el orden del párrafo, hazlo uno. Y también definir margen top three run. Bien, así que eso es todo sobre el pie de página y hemos terminado de trabajar en mil píxeles Sigamos adelante y creamos el siguiente punto de interrupción. Va a ser de 700 pixeles. Así que vamos a crear nuevos medios y especificar el max-width. Hazlo 700 pixeles. En realidad, no tenemos que hacer mucho en un punto de interrupción. Solo necesitamos personalizar varios elementos. Entonces, seleccionemos el encabezado del banner. Voy a cambiar su tamaño. Hagámoslo tamaño de fuente para RAM. Y la altura de la línea cinco. Rem. A continuación, seleccione Párrafo y establezca su tamaño de fuente en, para ejecutar. Bien, Siguiente, vamos a encargarnos de la sección de contacto. Voy a seleccionar campo. Hagamos el ancho 35 RAM. También seleccione área de texto. Porque de nuevo, necesitamos definir su ancho máximo. Hagámoslo 35 RAM. Y luego cambiar el ancho del botón Enviar. Voy a ponerla en cinco rem también. Bien, así que eso es todo con respecto a los puntos de interrupción. Y por último, tenemos que personalizar el proyecto. En el último punto de interrupción, van a haber 500 píxeles Así que vamos a crear un nuevo medio y especificar el ancho máximo como 500 píxeles. Al principio, voy a disminuir el tamaño de fuente del HTML porque se reflejará en todos los tamaños de los elementos. Entonces hagamos que este tamaño de fuente sea 45%. A continuación, vamos a encargarnos de la barra lateral. Quiero expandirlo a toda la página. Entonces hagamos su ancho cien por ciento. En realidad tenemos aquí un pequeño problema porque una vez que se cierra la barra lateral, sigue siendo visible. Por lo que necesitamos definir su posición correcta y hacerla menos cien por ciento. Entonces ahora el problema está arreglado. A continuación, voy a cambiar la posición del icono del menú porque está demasiado lejos del borde. Entonces tenemos que seleccionar menú de hamburguesa, pero con la clase de cambio, Vamos a establecer la posición correcta a 38 ronda Bien, entonces a continuación, vamos a disminuir el ancho de los servicios Seleccione el servicio y establezca su ancho para lanzar a ram. Lo último que voy a hacer es aumentar ligeramente la altura del pie de página. Hagámoslo 18. Corre. Bien, así que finalmente, terminamos. Hicimos que el proyecto respondiera a todos los diferentes tamaños de pantalla. Si lo revisas, encontrarás que se ve bien en todos los diferentes tamaños de pantalla. Bien, así que casi terminamos con nuestro proyecto. Lo último que voy a hacer es crear un spinner el cual aparece antes de cargar el proyecto. Así que sigamos adelante y comencemos a crear el marcado HTML. Pero al principio, voy a esconder todo el contenedor. Así que vamos a seguir adelante y seleccionar contenedor y asignado a él, mostrar ninguno. Entonces el contenedor está oculto. Pero en realidad vemos aquí el botón de desplazamiento. Supongo que lo coloqué fuera del contenedor. Así que sigamos adelante e insertamos dentro de él Bien, Así que estamos listos para crear el marcado HTML para el spinner Voy a crearlo fuera del contenedor. Se trata de desarrollos abiertos, que va a ser el contenedor spinner. A continuación necesitamos el elemento div con unos círculos de clase en los que voy a colocar ocho elementos div vacíos. este momento vemos aquí solo una página en blanco porque los desarrollos están vacíos y no tienen ningún estilo. Sigamos adelante y comencemos a escribir algo de CSS. Voy a seleccionar estos contenedor pintor. Hagamos su posición absoluta. Después se puso la parte superior y carecía de propiedades, ambas a cero Además, voy a definir ancho y alto. Hagamos con cien por ciento. En cuanto a la altura, voy a hacer que sea 100% de la ventana gráfica Después de eso, voy a cambiar el color de fondo. Hagámoslo oscuro usando 262626. Y también voy a colocar los contenidos en el centro. Y para eso, usemos flexbox. Necesitamos aquí justify-content center y align items center y align Bien, entonces lo que vemos aquí es solo el fondo oscuro Ahora empezamos a crear los círculos y luego los haremos funcionar. Los círculos serán representados como los pseudo elementos posteriores de los desarrollos Al principio, seleccionemos nuestros círculos envoltorios y definamos su anchura y altura. Conviértelos ocho RAM. Y también cambiar el color de fondo. Voy a usar aquí algunos antecedentes temporales. Hagámoslo blanco. Entonces ahora voy a crear los círculos. Seleccionemos elementos div. ¿Estaban tras los pseudo elementos? En primer lugar, definamos el contenido. Voy a hacerlo vacío. Entonces cambia la posición, hazla absoluta. Y también voy a asignar a los círculos posición relativa porque quiero posicionar después de pseudo elementos según los círculos A continuación, voy a definir ancho y alto. Hagamos ambos rampa 0.7. Después con el fin de cambiar la forma del elemento y hacerlo Circular el radio fronterizo de Estados Unidos con el valor 50 por ciento. Y cambiar el color de fondo. Hazlo C2 955. Bien, así que ahora puedes ver los círculos. En realidad se colocan uno encima del otro porque todos tienen la posición establecida en absoluto. Sigamos adelante y definamos sus posiciones manualmente. Voy a seleccionar los primeros pseudo elementos usando el enésimo selector hijo Vamos a poner la parte superior a 6.3 RAM. Eso probablemente se haya ido. Yo también lo voy a hacer 6.3 Rama. Sigamos adelante y posicionemos el segundo círculo. Voy a duplicar este código. Necesitamos aquí enésimo niño para que voy a hacer posición dura 6.8 RAM En cuanto a la izquierda, va a ser 5.6 round. Bien, sigamos adelante y definamos rápidamente las posiciones para el resto de los círculos Para los terceros elementos, necesitamos que la posición superior sea 7.1 RAM. En cuanto a la posición de laboratorio, va a ser 4.8 RAM. Entonces para los siguientes elementos, voy a poner arriba a siete puntos para carnero. Como probablemente se fue. Va a ser para RAM. Entonces para el quinto ítem, la posición superior va a ser 7.1 RAM. Como probablemente la posición izquierda va a ser de tres puntos para correr. A continuación viene el sexto ítem. Vamos a hacer que pare la posición 6.8 RAM. En cuanto a la izquierda, va a ser 2.4. Y luego para los séptimos elementos, Hagamos posición dura 6.3 RAM. Y la izquierda, 1.7 correr. Para el último ítem. Voy a establecer la posición a 5.6 rampa y la posición izquierda a 1.2 rampa. ¿Correcto? Entonces estas son las posiciones de partida para los círculos. En realidad, ya no necesitamos ese fondo blanco. Entonces me voy a deshacer de él. ¿Bien? Entonces ahora tenemos que crear los fotogramas clave CSS. En los fotogramas clave necesitamos definir solo una regla CSS. Los círculos deben girar 360 grados. Así que vamos a crear fotogramas clave voy a llamarlo círculos Entonces en el cero por ciento, en el punto de partida, necesitamos transformarnos, rotar para ser cero. Para el 100%. Voy a hacer transformar rotar 360 grados. Los fotogramas clave están listos. Seleccionemos los elementos div y le asignemos la propiedad de animación para que esos estilos CSS funcionen. Entonces necesitamos el nombre de la animación, que es círculos, seguido de la duración 1.2 s. ahora como la función de sincronización de animación, voy a usar Bezier cúbico, lo que nos permite crear unos efectos de animación personalizados En realidad, puedes visitar el sitio web de Bezier cúbico donde puedes definir los diferentes efectos de animación manualmente Y una vez que definas el uno, puedes agarrar los valores desde aquí. Bien, en nuestro caso, voy a usar Bezier cúbico con los Eso es más fácil para tu 0.50, 0.5, y luego uno Y también voy a usar aquí otro valor llamado infinito, que nos permitirá ejecutar la animación infinity. Entonces como pueden ver, los círculos se mueven, pero claro que no es lo que queremos. Lo siguiente que voy a hacer es definir el origen de la transformación. Cuando usamos la propiedad transform, entonces por defecto, el elemento se mueve según el centro. Entonces, por defecto, el origen de la transformación se establece en el centro. Se puede definir el origen como izquierda o derecha. O incluso puede definir orígenes para el eje x y el eje y separados Para obtener más información sobre la propiedad transform origin, puede buscar MTN transform origin y consultar esta página Entonces aquí tenemos un par de ejemplos que muestran cómo funciona la propiedad transform origin. En nuestro caso, voy a usar el tercer enfoque donde definimos el origen del eje x y del eje y por separado Entonces voy a usar transform origin con los siguientes valores. Esa es una severa caída RAM. Y luego otra vez para RAN. Ahora, como pueden ver, tenemos un resultado mucho mejor, pero no el perfecto. Necesitamos cambiar ligeramente la alineación del círculo. Y para eso voy a usar margen. Vamos a establecer el margen menos cuatro rem en la parte superior que cero en el lado derecho, cero en la parte inferior y menos cuatro rem en el lado izquierdo. ¿Bien? Entonces ahora los círculos se mueven bastante bien. Pero otra vez, eso no es lo que queremos. Voy a agregar algunos efectos a la animación usando la propiedad de retardo de animación. Añadiré a los desarrollos diferentes tiempos de retraso por separado. Esos valores van a ser negativos. Cuando usamos los valores negativos con la propiedad de retardo de animación la animación comienza como si ya se hubiera estado reproduciendo durante algún tiempo. Por ejemplo, si la animación debe ejecutarse durante, digamos 5 s. Y define la propiedad de retardo de animación como -2 s entonces la animación comenzará desde la tercera. Segundo. Omitirá los primeros 2 s. Bien, así que seleccionemos el elemento div por separado y definamos la propiedad de retardo de animación para todos ellos Voy a empezar con el primer div. Vamos a usar el selector f child y establecer la propiedad de retardo de animación a -0.036 s. Entonces si miras más de cerca los círculos, notarás que el primero se está moviendo de una manera diferente Sigamos adelante y definamos el retardo de animación para el resto de los círculos también. Vamos a copiar este código, pegarlo aquí. Entonces, para el segundo desarrollo, voy a establecer el retardo de animación a -0.072 s. Luego para el tercer div, necesitamos -0.108 s. Luego para el siguiente, voy a establecer el retardo de animación a menos uno para 4 s. Por lo tanto, el quinto ítem. Por lo tanto, el quinto ítem Vamos a establecerlo en -0.18 s El siguiente va a ser -0.216 s. para el ítem Simons. Usemos -0.252 s. para el último. Quiero decir, para el octavo ítem, Vamos a establecer el retardo de animación a -0.288 s. Bien, entonces ahora el spinner está funcionando perfectamente y crea un efecto realmente agradable y genial Bien, así que ya casi terminamos. Lo único que tenemos que hacer es volver a exhibir el contenedor después de un par de segundos. Entonces voy a usar una técnica similar a la que usamos anteriormente con el nombre de la clase de cambio. Vamos a añadir una nueva clase para ser elementos del cuerpo usando JavaScript. Vamos a abrir el archivo script.js. Una vez que se carga la página, el spinner se moverá durante 4 s y luego se mostrará el contenedor. Entonces una vez que se carga la página, entonces después de 4 s tenemos que agregar dos body, una nueva clase, digamos display. En CSS, lograremos mostrar el contenedor usando esa nueva clase. Entonces necesitamos el objeto de ventana global y tenemos que adjuntarlo al manejador de eventos OnLoad Debe ser igual a una función de flecha. Esta función se ejecutará una vez que se cargue la página. Con el fin de ejecutar la función después de algún retraso, podemos utilizar el método llamado setTimeout Pasemos aquí la función de devolución de llamada. A continuación, seleccione los elementos del cuerpo utilizando el método QuerySelector. Como dijimos, necesitamos agregarle nuevo nombre de clase. Así que necesitamos a la propiedad de la lista de clases, a continuación, añadir el método. Tenemos que especificar aquí la clase. Digamos exhibición. El método setTimeout toma el segundo argumento, que es la duración En este caso necesitamos 4,000 milisegundos. Bien, entonces ahora necesitamos seleccionar una exhibición de clase con este contenedor penal y también el contenedor Entonces comencemos con este contenedor de maní. Tenemos que ocultarlo. Entonces, por lo tanto, necesitamos aquí opacidad cero y visibilidad oculta. Además, voy a usar transición con los valores todo en un segundo. Y además de eso, para que la transición funcione, voy a usar la propiedad z-index con el valor más alto, digamos 300 Después de eso, tenemos que seleccionar de nuevo la clase de visualización, seguido por el contenedor. este momento tiene la propiedad de visualización está establecida none y necesitamos hacer bloque de visualización. Entonces ahora si vuelvo a cargar la página, entonces el spinner se mostrará por 4 s, y luego aparecerá el contenedor Para que esos efectos sean perfectos, voy a crear un poco de animación para los círculos. Quiero mostrar y ocultar los círculos con algún efecto de fundido. Al principio, ocultemos los círculos por defecto. Vamos a usar aquí opacidad cero y visibilidad oculta. Entonces voy a crear nuevos fotogramas clave CSS. Vamos a llamarlo círculos de visualización. Entonces tendremos aquí un par de pasos del cero por ciento al 25%. Voy a usar opacidad cero y visibilidad oculta. Por lo que los círculos se ocultarán durante 1 s. Luego, del 25% al 90%, los círculos se mostrarán. Entonces necesitamos opacidad uno y visibilidad visible. Y luego del 9% al cien por ciento, los círculos comenzarán a esconderse. Entonces necesitamos aquí opacidad uno y visibilidad visible. Y luego en el 100 por ciento, necesitamos opacidad a cero y visibilidad oculta. Bien, entonces los fotogramas clave están listos. Vamos a asignar a los círculos la propiedad de animación. Vamos a especificar los círculos de visualización del nombre y la duración 4 s. así que ahora se puede ver que tenemos aquí un efecto mucho mejor. Bien, así que finalmente hemos terminado de trabajar en el proyecto Espero que haya sido interesante y útil. Lo disfrutaste y aprendiste algo nuevo. Vamos a seguir adelante. 72. Proyecto 8 - Previsión de proyecto: Bien, así que es momento de construir nuestro próximo proyecto, que va a ser el clon de uno de los sitios web más populares y de uso común llamado Paypal, creará la interfaz de usuario de las diferentes páginas Estoy en la página principal, páginas de inicio de sesión y registro. Por supuesto que no será el clon exacto con toda la funcionalidad. Como dije, vamos a construir solo una interfaz de usuario con HTML, CSS y JavaScript. Paypal se ve diferente en diferentes países. La interfaz de usuario cambia frecuentemente de vez en cuando. Así que no te preocupes si este no es el clon exacto de la IU actual. Bien, así que antes de saltar directamente a escribir el código, al principio, describamos cómo es el proyecto Entonces como dije, construiremos tres páginas diferentes, sesión principal e inscríbase. Empezaremos por la página principal. Consistirá en un par de secciones diferentes. La primera sección va a ser el banner con navegación. Tenemos aquí varios elementos de navegación. Si pongo el cursor sobre ellos, entonces se mostrará el menú desplegable Cambiará una vez que pasemos cursor sobre otro elemento de navegación Además, tendremos aquí dos botones diferentes para iniciar sesión e inscribirse. Si hago clic en ellos, entonces navegaremos a la página adecuada. Por lo que a la pancarta le seguirá la segunda sección. Incluirá tres partes diferentes con Font, iconos impresionantes, algunos elementos de texto y botones. Entonces tendremos esta sección azul con algunos párrafos diferentes. A continuación, construiremos esta pequeña sección aquí con una imagen y tres pasos diferentes. Abajo, tendremos un botón para apuntarte, seguido del pie de página. Bien, así que veamos sobre la página principal. Echemos un vistazo a la página de inicio de sesión. Será bastante similar a la página de inicio de sesión original. Tendremos aquí dos campos de entrada con botones. Esa es probablemente la página de registro. Constará de dos partes. En el lado izquierdo, tendremos varias imágenes de los clientes. En cuanto al lado derecho, incluirá dos opciones distintas. Si queremos crear una cuenta personal o comercial. Bien, así que eso es todo sobre el proyecto. Como de costumbre, lo haremos receptivo a diferentes tamaños de pantalla. Si inspecciono la página y cambio al modo responsive, verás que es responsive. Una cosa a tener en cuenta aquí, en tamaños de pantalla más pequeños, ya no tendremos los desplegables Se transformarán al menú así. Bien, entonces eso es todo. Estamos listos para comenzar a construir el proyecto. Entonces, sigamos adelante. 73. Proyecto 8 - Crea marcadores HTML para aterrizar y define estilos comunes: He creado una nueva carpeta en el escritorio llamada Wine House, en la que tengo otra carpeta para las imágenes. Sigamos adelante y abramos esta carpeta en código VS. Voy a crear tres archivos diferentes. Index.html, style.css y scripts punto js. Que abra el archivo index.html y genere el documento HTML básico. Voy a usar m él. Pongamos aquí el signo de exclamación y presionemos Enter o tab A continuación, voy a vincular esos tres archivos. Así que vamos a abrir la etiqueta de enlace y especificar aquí la ruta del archivo CSS. Siguiente Voy a abrir la etiqueta de script abajo, encima de la etiqueta del cuerpo de cierre. Y en el atributo source, vamos a especificar la ruta del archivo script.js. Bien, además de eso, voy a usar una de las fuentes de Google a lo largo de este proyecto. Entonces sigamos adelante y agarremos el enlace. Vayamos al sitio web de Google Fonts y busquemos una fuente llamada cormorán Garamond Seleccionemos aquí un par de pesos de fuente diferentes y luego agarremos el enlace. Voy a pegarlo en el elemento cabeza. A continuación, quiero cambiar el logo en la barra de título. Necesitamos abrir la etiqueta de enlace como el valor del atributo REL. Necesitamos aquí icono. Entonces voy a especificar el tipo. Se le va a fotografiar slash PNG. Y finalmente, tenemos que especificar la ruta de la imagen y los atributos de referencia H. Tenemos aquí, carpeta de imágenes, y después tenemos que seleccionar un logo punto PNG. Por último, cambiar el título. Necesitamos Wine House. Sigamos adelante y ejecutemos el proyecto al navegador. Para eso, voy a usar uno de los paquetes de código VS que se llama servidor en vivo. Nos permite ejecutar la vida del proyecto al navegador y realizar cambios sin actualizar la página cada vez. Para que puedas instalar y usar esta extensión. Entonces el proyecto está en vivo para el navegador. También puedes ver aquí el logo en la barra de título. Por último, organicemos un poco nuestros entornos de trabajo, coloquemos el editor y el navegador, así, y comencemos. Bien, así que crearemos y personalizaremos cada una de las páginas por separado. Y luego después de eso, programaremos el efecto scroll y también algunas otras cosas diferentes. Sigamos adelante y comencemos a crear el marcado HTML open div tag, que va a ser el contenedor A continuación tendremos otros elementos div. Va a ser el envoltorio. Entonces en general vamos a tener cinco páginas diferentes, quiero decir, cinco secciones diferentes. Así que vamos a seguir adelante y crear esta sección elementos para todos ellos. Voy a asignarle la clase sección uno. Entonces dupliquemos cuatro veces y cambiemos los nombres de las clases. Necesitamos nombres de clase de dos a cinco. Bien, así que voy a comenzar con la primera sección. Me refiero a la página principal. Incluye el encabezado con el subrayado y el fondo de pantalla completa Aquí se ven las flechas de navegación y la barra de progreso. Están fijos y se muestran en todas las páginas. Nosotros nos encargaremos de ellos un poco más tarde. Bien, sigamos adelante y abramos los elementos profundos dentro de la primera sección. Este elemento contará con dos clases distintas. El primero va a ser el envoltorio de sección de clase común. Para la segunda va a ser la clase individual. Voy a llamarlo sección uno rápido. En realidad necesitamos esta envoltura de sección para el resto de las secciones también. Entonces vamos a copiar este elemento y pegarlo para todos ellos. Además, necesitamos cambiar los nombres de las clases. Necesitamos dos números del dos al cinco. Bien, volvamos a la primera sección. Necesitamos insertar una etiqueta div que envolverá el encabezado. Vamos a asignarle un nombre de clase, sección uno, envoltorio de encabezado. Y pasar aquí H1 elementos de rumbo. Voy a asignarle clase sección uno encabezado. Y también, coloquemos aquí el siguiente texto. Los mejores vinos del mundo. Entonces eso es todo sobre la primera sección. Ahora, voy a empezar a escribir algo de CSS. En primer lugar, voy a crear algunos estilos comunes. Seleccionemos cada elemento usando un asterisco y pongamos aquí algunos estilos comunes y restablecemos Voy a deshacerme de margen y relleno de cada elemento. Pongamos a ambos a cero. También, voy a hacer box-sizing, border-box. A continuación, me voy a deshacer de algunos estilos predeterminados. Quiero decir, pongamos esquema a no. También, voy a configurar la decoración del texto para aprender. Luego se deshace de los estilos predeterminados de los elementos de la lista. Hagamos list-style-type none. Y por último, voy a establecer familia de fuentes para llamar a Moran caramel Lo siento. 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, quiero convertir 1 g en diez píxeles. Y para eso tenemos que disminuir el tamaño de fuente del elemento HTML, y tenemos que hacerlo 62.5% El tamaño del rubro ha disminuido. Después de eso, vamos a encargarnos del envoltorio. Voy a establecer su ancho y alto, ambos 200% de la ventana gráfica Así que vamos a asignar a la propiedad width cien viewport width En cuanto a la altura, voy a hacerla cien de altura de viewport A continuación, seleccionemos un elemento de sección sí mismo y fijemos ancho y alto, ambos 200 por ciento. Entonces voy a hacer que su posición sea absoluta. Y además de eso, necesitamos hacer la posición del envoltorio sea relativa porque quiero posicionar secciones acuerdo a su elemento padre, que es el rapero. Después de eso, hagamos la posición de rezago de la sección cero. Después de eso, voy a seleccionar envoltorio de sección. Definamos su anchura y altura. Tenemos que heredar ambos del elemento section. Así que vamos a establecer ancho y alto ambos para heredar. Por lo que en estos momentos la primera sección terminó por detrás del resto de las secciones por la posición absoluta. Como dije, voy a personalizarlo primero, la primera sección. Entonces, para colocarlo en la parte superior de las otras secciones, usemos la propiedad del índice Z. Seleccione la primera sección y establezca el índice en 50. Después de eso, voy a establecer la imagen como fondo de pantalla completa Seleccionemos la envoltura de la Sección uno. Entonces voy a usar aquí gradiente lineal. Pongamos aquí color negro. Me refiero a RGBA con tres ceros y con la opacidad 0.5. A continuación, necesitamos de nuevo RGBA, color negro, pero con diferente opacidad. Hagámoslo 0.4. A continuación, necesitamos especificar la URL de la imagen, la ruta de la imagen. Tenemos carpeta llamada images, y tenemos que seleccionar la Sección uno, PG dot JPG. A continuación, necesitamos Centro y también no repetir. Entonces finalmente, vamos a establecer el tamaño del fondo, hacerlo cubierto. Bien, así como pueden ver, tenemos aquí una imagen de fondo a pantalla completa para la primera Ahora vamos a seguir adelante y encargarnos de la salida, seleccionar su envoltorio div. En primer lugar, voy a sacarte de la posición del envoltorio. Voy a colocar el encabezamiento hacia abajo cerca de la parte inferior de la página. Entonces hagamos que su posición sea absoluta. Después defina la propiedad superior y hágalo 70%. En cuanto a la propiedad dejada, voy a hacerla 50 por ciento. Y también necesitamos transformarnos con la función de traducir. Tenemos que pasarte -50 por ciento para ambas direcciones. Es decir, para los ejes x e y. Entonces el rumbo se coloca de la manera correcta, pero en este momento no es del todo visible. Así que sigamos adelante y arreglemos eso. Voy a seleccionar el propio encabezamiento. Hagamos su tamaño de fuente. Diez RAM. También cambia el peso de la fuente, hazlo 300 Y cambia el color. Voy a usar aquí, blanco. Bien, a continuación voy a transformar texto en mayúsculas. Y también crear algo de espacio entre las letras usando el espaciado entre letras. Con el valor 0.1 corrió. Después de eso, agreguemos un borde en la parte inferior del encabezado. Así que usa borde inferior con valores puntos para carnero sólido. Y como el color, voy a usar D5 con cuatro ceros Bien, así que el rumbo se ve bien. Por último, quiero alinearlo al lado derecho, y también quiero desactivar la selección de usuario. Entonces necesitamos alinear el texto con el valor, ¿verdad? Y luego el usuario selecciona ninguno. Bien, veamos sobre la primera sección. Se ve bien y podemos pasar al segundo. En primer lugar, sigamos adelante y creamos el marcado HTML. Por lo que la segunda sección incluirá dos imágenes distintas y el botón. Sigamos adelante y abramos una etiqueta div con la venta de clase. Entonces tendremos una imagen y un botón en ese desarrollo que es elemento IMG abierto Los atributos de origen. Voy a especificar la parte de la imagen. Tenemos que seleccionar bag dot PNG de la carpeta images. También, voy a asignar al atributo alt sail back. Y también necesitamos atributo de clase con un valor de vela de vuelta. A continuación, insertemos aquí un botón con un nombre de clase, venta, btn Y como el impuesto, voy a pasar su orden. Ahora. Además de eso, voy a insertar aquí otra imagen, pero se va a colocar fuera del div. Especificemos aquí la ruta de la imagen. Necesitamos botella de vino punto PNG. Además, asignemos al atributo alt, el valor botella de vino. Y además de eso, voy a agregar un atributo de clase con una botella de vino de valor. Bien, así que eso es todo sobre el marcado de la segunda sección este momento, la segunda sección terminó por detrás de la primera. Por eso no vemos aquí algunos de los elementos. Voy a solucionar ese problema usando de nuevo, la propiedad index. Voy a cambiar aquí el nombre de la clase. Usemos la Sección dos. momento quería usar de esta manera, pero eventualmente definiremos diferentes valores de la propiedad index para todas estas secciones. Bien, entonces ahora necesitamos establecer el fondo para la segunda sección Sigamos adelante y tomemos este código de aquí. Y luego hacer algunos cambios. Necesitamos envoltorio de la Sección dos. Después cambiar las opacidades. Hagámoslos 0.8 y 0.9. Y también cambiar el nombre de la imagen. Necesitamos la Sección dos, PG. ¿Bien? Entonces así es como se ve la segunda sección ahora mismo como tenemos aquí, las barras de desplazamiento. Y quiero deshacerme de ellos. Para eso tenemos que asignar a hacer desbordamiento de envoltorio oculto. Después de eso, vamos a encargarnos de la disposición de esos elementos. Voy a usar Flexbox. Vamos a usar aquí display flex. Entonces necesitamos un centro de alineación de elementos para centrar los elementos verticalmente. Y también voy a usar justificar contenidos con el espacio de valor de manera uniforme. Bien, sigamos adelante y comencemos estilo a cada uno de los elementos Por lo que voy a seleccionar elemento div con la venta de clase. Vamos a usar de nuevo los libros de flujo. Quiero que sea contenedor flexible. Entonces necesitamos cambiar la dirección del flujo. Hagámoslo columna. Y después de eso, para el centrado vertical y horizontal, usemos align items center y justifique el centro de contenido Bien, después de eso, sigamos adelante y personalicemos la primera imagen Vamos a disminuir ligeramente la opacidad, que sea 0.9. Y también voy a cambiar el ancho de la imagen. Hagámoslo 45 rem del botón seleccionado. Cuenta con venta de clase, btn. En primer lugar, definamos el ancho y la altura. Voy a establecer el ancho a 20 RAM. En cuanto a la altura, hagamos que sea cinco rampa. A continuación, voy a encargarme del texto Vamos a aumentar el tamaño de la fuente. Hazlo a Ram. También cambia el peso de la fuente. Hazlo más ligero. Después transforma el texto en mayúsculas y crea algo de espacio entre las letras Hagámoslo 0.1 rep. Bien, después de eso, voy a establecer el color de fondo en transparente. También, cambia el color, hazlo blanco. Luego crea algo de espacio en la parte superior del botón usando margen superior con el valor para RAM. Y finalmente, vamos a crear borde con los valores 0.1, rampa sólida, y usar color blanco. Bien, así que el Buxton está personalizado. Por último, quiero crear un pequeño efecto hover. Voy a cambiar el color de fondo al pasar el cursor. Botón seleccionado con un hover. Cambiar el color de fondo. Usa aquí de nuevo este color rojo. Y luego para que el efecto sea un poco más suave, usa transición con un valor de color de fondo y con ello duración 0.2 s. bien, así que el botón está estilizado y el último elemento que quiero personalizar es la segunda Entonces sigamos adelante y seleccionémoslo. Voy a cambiar la opacidad. Quiero decir, quiero disminuirlo a 0.6 y también cambiar el ancho. Que sea una rampa de dos. Bien, entonces con esta segunda sección ya terminamos. Está estilizado y tenemos que seguir adelante y encargarnos de la tercera sección Va a ser, de nuevo, un poco simple. Tendremos la imagen de fondo a pantalla completa. Además, tendremos otras imágenes en el centro de la página y estos textos aquí mismo. Entonces, antes que nada, sigamos adelante y creemos de nuevo el marcado HTML Aquí tendremos tres elementos diferentes. El primero va a ser la etiqueta H1 de rumbo abierto con la sección de clase tres rumbo. Y pasa aquí el texto, la mejor calidad. A continuación tendremos imagen. Especifique la ruta de la imagen en el atributo source. Necesitamos seleccionar frame dot PNG. También agregue aquí el valor del atributo alt aquí mismo, digamos marco de uvas. Y luego agregar un atributo de clase con un guión de cuadro de valor IMG Duplicemos esta línea de código. Cambia el nombre de la imagen que necesitamos aquí, uvas punto PNG. También como el valor del atributo alt. Voy a dejar aquí solo uvas. El evento cambió la clase. Necesitamos aquí, uvas y G. ¿Bien? Entonces ahora mismo, esta sección no es visible y la razón es la misma. Ha terminado por detrás de la segunda sección. Así que vamos a arreglar eso de nuevo usando la propiedad z-index. Voy a cambiar aquí el nombre de la clase. Necesitamos la Sección Tres. Ahora los elementos son visibles. Sigamos adelante y personalicemos esta sección. En primer lugar, vamos a establecer la imagen como fondo de pantalla completa Seleccionemos la envoltura de la Sección tres. En realidad necesitamos el código similar para la sección de tres rapero también. Así que vamos a agarrar este código de aquí. Pégalo para el envoltorio de la tercera sección y realice algunos cambios. Cambiemos las opacidades. Necesitamos aquí. 0.3, 0.9, luego cambiar el nombre de la imagen. Necesitamos tres. Y finalmente, necesitamos aquí justificar los contenidos con el centro de valor en lugar del espacio de manera uniforme. Bien, eso es todo sobre el envoltorio. Sigamos adelante y personalicemos cada uno de los elementos por separado. Voy a empezar con las imágenes. Seleccionemos la primera imagen, que tiene marco de clase IMG Vamos a establecer el ancho a 100 rampa. También. Voy a hacer que su posición sea absoluta. Y finalmente, disminuir la opacidad, hacerla 0.5. Bien, Siguiente, voy a seleccionar esta segunda imagen, uvas IMG En realidad también necesitamos estilos similares para la segunda imagen. Entonces, sigamos adelante y tomemos este código de aquí y solo cambiemos los valores. Voy a poner ancho a cuatro para correr. En cuanto a la opacidad, hagámosla 0.7. Por último, voy a encargarme de los elementos del rubro. Entonces, sigamos adelante y seleccionemos estos elementos. En primer lugar, aumentemos el tamaño de la fuente, hagámoslo a 20 RAM. Después cambia el color. Voy a usar aquí, color gris claro, quiero decir CCC, y también transformar texto en mayúsculas A continuación tenemos que rotar el rumbo. Entonces usemos Transformar con la función rotate. Voy a rotar imagen con 20 grados. Además, usa tu centro de alineación de texto. Entonces el rumbo se ve bien. Quiero agregarle un poco de efecto de sombra, y además voy a desactivar la selección del usuario. Así que sigamos adelante y usemos sombra de texto con los valores 0.5 RAM que 1.5 RAM. Y como color, voy a usar 000, que es la columna negra. Y por último, usa tus usuarios seleccionar ninguno 74. Proyecto 8 - Personalizar y hacer que funcione la página de destino: Vamos a abrir desarrollos, que va a ser contenedor. En realidad incluirá todo el contenido del proyecto. Entonces vamos a crear el marcado del encabezado y luego le agregaremos algunos CSS Entonces construiremos nuestro proyecto sección por sección. Vamos a abrir elementos de encabezado y asignados a la cabecera de clase. El encabezado constará de tres partes diferentes. El primero va a ser el texto, que se colocó del lado izquierdo. Así que vamos a abrir un elemento div con un texto de encabezado de clase. El texto estará representado por rubro en párrafo. Entonces necesitamos abrir el elemento de encabezado H1 con encabezado de clase y con texto en todo el mundo. A continuación, voy a abrir p elementos con el nombre de la clase, párrafo de encabezado. Entonces instituyamos algunos textos. viaje. Te deja sin palabras Entonces te convierte en un narrador de cuentos. ¿Bien? A continuación voy a insertar aquí una imagen. Estoy en la imagen del globo de aire. Especificemos aquí la ruta de la imagen. Tenemos las imágenes de la carpeta, y luego tenemos que seleccionar un globo aerostático punto PNG. A continuación, voy a insertar aquí la imagen del encabezado de texto, quiero decir como el valor del atributo alt. Y por último, asignemos al atributo de clase elemento image, el value header image. Entonces aquí tenemos la imagen del globo aerostático, y finalmente, tenemos que crear un logotipo. Como recuerdas, utilizaremos un texto animado como logo. Entonces abramos un desarrollo con el logo de la clase. A continuación voy a instituir los elementos del rubro H1. Por lo que cada letra y el encabezamiento estarán representados por este elemento de panel. Porque necesitamos crear animaciones con un tiempo de retardo diferente para cada letra. Entonces vamos a abrir elemento span e insertar aquí la primera letra T. Luego duplicarlo seis veces y cambiar las letras. Para el segundo necesitamos h, luego E, luego R, 0, a, y D. El camino. Bien, así que eso es todo sobre el mercado para el encabezado Ahora, es el momento de personalizar esta sección. Antes de eso, quiero cuidar el contenedor. Entonces sigamos adelante y seleccionémoslo. Voy a cambiar el color de fondo. Entonces, como saben, creamos un par de variables para los colores. Y para poder utilizarlos, tenemos que usar aquí la función var, que en realidad representa la variable como argumento. Tenemos que pasar aquí el nombre de la variable, en este caso, color secundario. A medida que se cambia el color de fondo para el contenedor. A continuación, voy a crear algo de espacio a su alrededor usando margen. Hagámoslo 3.5 rem. Además de eso, vamos a crear algún efecto de sombra. Usemos sombra de caja con los siguientes valores. Necesitamos cero, luego una RAM, tres RAM. Y como el color, vamos a utilizar de nuevo var función, el color. Genial. Bien, Así que ahora mismo, Eso es todo sobre el contenedor A continuación, tenemos que empezar a trabajar en el encabezado. En primer lugar, definamos la anchura y la altura. Voy a establecer ancho como 100% de asfalto la altura. Voy a hacer algún cálculo. Echemos un vistazo al proyecto terminado. Como veo en la parte superior de la cabecera y en la parte inferior de la misma, tenemos la misma cantidad de espacio. Cada uno de ellos equivale a 3.5 RAM, debido a que el tamaño del margen es igual a 3.5 rem. Ahora, para crear el mismo espacio al final de la cabecera, voy a usar el siguiente cálculo. Necesitamos usar la función calc, que significa calcular Entonces tenemos que restar 200 viewport altura siete RAM. En realidad 100 altura de ventana gráfica es igual al 100% de la ventana gráfica Y las siete RAM es la suma del espacio en la parte superior y en la parte inferior Así que como puedes ver, ahora, tenemos el mismo espacio alrededor de la cabecera. ¿Bien? A continuación, definamos el fondo para el encabezado. Voy a poner la imagen como fondo. En primer lugar, usemos gradiente lineal. Voy a usar dos colores similares, pero con opacidades diferentes Entonces el color va a ser 1811455 y la opacidad A continuación necesitamos el mismo color. Pero con opacidad 0.3. Después de eso, voy a especificar la ruta de la imagen usando la función URL. Así que tenemos carpeta llamada images, y tenemos que seleccionar encabezado dash BG dot JPG. Al minuto siguiente centro y sin repetir. Y finalmente, definamos el tamaño del fondo. Voy a hacer que sea color. Bien, así como puedes ver, la imagen está puesta como fondo y ya se ve bien Lo siguiente con respecto al encabezado es alinear sus elementos hijos que voy a usar flexbox En realidad, no le asignaré propiedades de flujo manualmente. Como ustedes saben, ya todos hemos creado cluster center, y solo voy a asignar este nombre de clase para que sea encabezado en el HTML. Entonces las tres partes de la cabecera están centradas dentro de ella. Sigamos adelante y personalicemos el texto del encabezado. Entonces necesitamos algunos estilos comunes para el encabezado y el párrafo también. Y para eso, podemos agregar algunos estilos a sus elementos padre. Entonces quiero centrar el texto dentro de la caja. Vamos a insertar tu texto, alinear el centro. Después transforma el texto en mayúsculas y crea algo de espacio entre letras Vamos a establecer el espaciado entre letras en 0.1 wrap. Y ahora podemos personalizar encabezado en párrafo por separado. Empecemos por el encabezamiento. Voy a aumentar su tamaño de fuente. Hagámoslo un tranvía. Y luego cambiar de color. Voy a usar tu columna blanca. Bien, eso es todo sobre el rumbo. A continuación, cuidemos el párrafo. Sigamos adelante y seleccionemos estos elementos. Aumentar el tamaño de la fuente, que sea tres RAM. Después cambia el peso de la fuente. Voy a hacer 500. Y finalmente cambiar el color. En este caso, voy a usar columna secundaria, ¿verdad? Por lo que el párrafo también está estilizado. Pero creo que se estira demasiado. Entonces voy a definir el ancho máximo para el párrafo. Usemos propiedad de ancho máximo y hagamos que sea siete para rampa. Por último, para centrar el texto, vamos a usar el margen R0 Entonces no, creo que se ve mucho mejor en realidad con los textos de Heather, ya casi terminamos. Lo único que quiero hacer es agregar algún efecto de sombra tanto de los elementos. Entonces agreguemos sombra de texto al elemento padre con los valores 0.3, 0.5 RAM. Y como el color, vamos a usar el color gris. Bien, así que finalmente, terminamos con el texto del encabezado, y ahora tenemos que seguir adelante y empezar a trabajar en el logo Se debe colocar en la esquina superior derecha de la cabecera. Para eso, necesitamos usar la posición. Seleccionemos el logotipo y hagamos su posición absoluta. A continuación, voy a hacer que la posición del encabezado sea relativa porque necesitamos definir la posición del logotipo de acuerdo a su elemento padre. Y después de eso, definamos las posiciones de arriba y de derecha. Voy a hacer que ambos se renten. Entonces el logo se coloca en la esquina superior derecha, y ahora tenemos que personalizarlo. Como saben, cada letra está envuelta por este elemento span. Sigamos adelante y seleccionémoslo. Aumentemos el tamaño de la fuente, hagámoslo a RAM. Luego cambia font-weight. Voy a hacerlos más audaces. Entonces asignemos a 900, luego cambiemos de color. En este caso, voy a usar color primario. Después transforma el texto en mayúsculas Y finalmente, cambia el color de fondo Que sea blanco. Ahora necesitamos definir el ancho y alto de cada letra. Hagamos los dos de la marca 3.5. Como puede ver, el ancho y el alto no se aplican a las letras. La razón es que este elemento span es un elemento inline. Por lo tanto, no podemos definir el ancho y la altura para ello. Para arreglarlo, voy a convertirlo en un elemento de nivel de bloque por ahora, porque eventualmente usaremos flexbox Así que usemos tu bloque de visualización. Ahora el ancho y la altura se aplican a las letras. Y también se colocan verticalmente en una columna porque es el comportamiento predeterminado los elementos de nivel de bloque. Bien, ahora con el fin de colocarlos uno al lado del otro horizontalmente, usemos flexbox. Seleccionar elemento de encabezado H1 es el elemento padre para este pan asignado a él display flex. Ok. Ahora necesitamos algo de espacio entre las letras y también hacerlas redondeadas. Usar margen con el valor 0.5 rem. Y luego radio fronterizo 50 por ciento. Además de eso, voy a deshacerme del bloque de visualización de aquí porque ahora mismo estos elementos span son elementos flexibles y ya no necesitamos esta propiedad. ¿Bien? Lo último que necesitamos aquí es colocar letras en el centro de esos círculos. Para ello, vamos a utilizar de nuevo centro del clúster y asignarlo a todos los elementos span. ¿Correcto? Por lo que el logotipo está personalizado. Y ahora es el momento de crear la animación. Para eso, usaremos fotogramas clave CSS. Necesitamos agregar fotogramas clave de signo, que deben ir seguidos del nombre de la animación En realidad, puedes nombrar la animación como quieras. Dentro de los fotogramas clave. Podemos definir algunas reglas CSS con algunos pasos. Y entonces podemos aplicar esas reglas a los elementos usando la propiedad animation. Entonces tendremos cinco pasos diferentes. Estarán representados por los valores porcentuales. Voy a empezar con un cero por ciento y pasar por el 100 por ciento. 0-10% las letras no deben moverse. Entonces, por lo tanto, necesitamos aquí lo siguiente. Tenemos que indicarnos aquí al 0%. Entonces dentro de las llaves, voy a usar Transformar con la función Traducir Y, que debería tener el valor cero Porque no necesitamos mover las letras. El siguiente paso va a ser el diez por ciento. Y en realidad, necesitamos aquí la misma transformación traducir Y cero. Después de eso del 10% al 15%, voy a subir las conferencias. Por lo que el siguiente paso va a ser el 50 por ciento. Y aquí necesitamos transformar, traducir y con el valor -100% Entonces del 15% al 20%, necesitamos bajar las letras de vuelta a sus posiciones. Entonces en el 20 por ciento, necesitamos de nuevo transformar traducir Y cero. Y finalmente, del 20 por ciento al 100%, las letras deben permanecer en sus posiciones. Entonces necesitamos de nuevo transformar, traducir Y cero. Bien, entonces estas son las reglas que debemos aplicar a las letras, pero con un tiempo de retraso diferente Necesitamos un tiempo de retraso diferente para moverlos en orden. Tenemos que seleccionar cada elemento span por separado. Y para eso, voy a usar la enésima pseudo-clase hijo Así que vamos a gustar logo H1 y luego span, seguido por el enésimo selector hijo Y tenemos que especificar aquí el primer elemento span. Ahora necesitamos asignar al elemento diferentes propiedades de animación. El primero va a ser nombre de animación. Entonces debería ir seguido la duración de la animación. Para ello, tenemos que usar la propiedad llamada duración de la animación. Vamos a establecerlo a 5 s. A continuación, necesitamos el tiempo de demora para la primera letra. Voy a usar 0.1 s. Para definir el tiempo de retardo, tenemos que usar delay de animación. Vamos a asignarle 0.1 s. Finalmente, necesitamos especificar el valor de la propiedad de conteo de iteraciones de animación En nuestro caso, necesitamos ejecutar la animación infinitamente. Entonces necesitamos aquí infinito. Bien, entonces hemos definido la animación para la primera letra Para eso hemos utilizado aquí un par de propiedades de animación. Básicamente en la práctica, podemos usar una forma acortada. Solo necesitamos una propiedad CSS llamada animación, en lugar de usar varias propiedades de animación. Entonces podemos usarlo aquí. Animación y los siguientes valores. El primero va a ser el nombre Entonces necesitamos duración 5 s, seguido del punto de retardo 1 s. y finalmente, necesitamos infinito. Simplemente podemos deshacernos de todas esas propiedades desde aquí. Sigamos adelante y dupliquemos este código seis veces. Porque tenemos siete letras. Después cambia el número de delighters y también cambia el tiempo de retardo Para la segunda, necesitamos 0.2 s. A continuación necesitamos 0.3 s. Luego para la cuarta letra, cuando 0.4 s, 0.5 s. La siguiente va a ser 0.6 s. Y luego finalmente, necesitamos 0.7 s. ¿Bien Entonces como puedes ver, la animación está funcionando y tenemos aquí bonitos efectos geniales. En realidad, ya terminamos con el logo y ahora tenemos que seguir adelante y cuidar la imagen. Me refiero al globo de aire. Sigamos adelante y seleccionemos una imagen. En primer lugar, vamos a disminuir su tamaño. Hacer su ancho 35%. Echemos un vistazo una vez más a la versión terminada del proyecto. Entonces como puedes ver, globo de aire se está moviendo a través los encabezados de fondo en el que para lograrlo, necesitamos crear un entorno 3D. Y para eso en CSS, tenemos una propiedad llamada perspectiva, que necesitamos asignar al encabezado. En general, la propiedad perspective define qué tan lejos está el objeto del usuario. El menor valor creará un efecto 3D más intensivo. Entonces, en nuestro caso, necesitamos un poco más de valor. Así que vamos a asignarle 100 mil, ¿verdad? Al igual que el logo, aquí también tenemos que usar fotogramas clave CSS. Voy a nombrar la animación como imagen flotante. Entonces, en general, tendremos cinco pasos diferentes. Moveremos el globo a través de la imagen usando la función transform con translate z. Nos permite mover el objeto en el espacio 3D. Entonces de 0% a 40 por ciento, necesitamos las siguientes propiedades y valores. Necesitamos aquí Transformar, Traducir Z con valor para correr. En este caso, utilizamos un valor positivo y en realidad mueve el objeto cerca del usuario. Para mostrarlo, voy a asignarlo a la imagen directamente. Entonces así es como funciona la función Traducir Z. Si hacemos que el valor sea negativo, digamos -400 rondas, entonces la imagen se colocará profundamente dentro de la cabecera De un vistazo, puede pensar que el tamaño de la imagen disminuye, pero de hecho, la imagen está muy lejos del usuario. Bien, vamos a deshacernos de esta línea de código a casa aquí. Entonces además de la propiedad transform, voy a usar opacidad durante la animación va cambiar la opacidad ligeramente en cero por ciento. Hagámoslo uno. En realidad, puede omitir esta propiedad en absoluto aquí, porque por defecto, la opacidad para cada elemento se establece Pero lo uso de cualquier manera para que el proceso de trabajo sea más claro. Bien, eso es todo, sobre el 0%. El siguiente paso va a ser 40 por ciento, 0-40% necesitamos mover globo de aire dentro de la imagen Por lo tanto, necesitamos aquí Transformar, Traducir valor Z -500 g. Y además de eso, necesitamos mover el patrón un poco hacia el lado derecho Entonces voy a usar la función translate x. El valor 150 corrió. Esto lo necesitamos porque la batuta se mueve hacia el centro de la imagen por defecto. Por último, usemos la opacidad. Voy a disminuir es un poco, Hagámoslo 0.8. Bien, el siguiente paso va a ser el 70%. Duplicemos este paso aquí. Voy a cambiar los valores. Necesitamos 70%. De 40% a 70%. Necesitamos mover el globo aún más profundo dentro de la imagen. Entonces voy a pasar por aquí -1.500 rampa. En cuanto a la dirección x, necesitamos cambiar la dirección del globo explícitamente al mismo tiempo. Entonces voy a aumentar el valor de la función Translate X. Hagámosla rampa 800. Y finalmente disminuir la opacidad, hacerla 0.6. Bien, El siguiente paso va a ser el 80 por ciento. Entonces, una vez más, vamos a duplicar este código del 70% al 80%. Tenemos que mover el globo hacia atrás y hacia adentro más cerca del usuario. Entonces cambiemos los valores. Vamos a insertar aquí -50 RAM. Entonces necesitamos 100 rampa y la opacidad 0.8. Y finalmente en 100%, necesitamos hacer que el valor de la función de propiedad Translate Z sea igual al punto de partida. Entonces, cuando transformas traducir Z con un valor para t, ejecuta el opacidad uno Bien, así que con los fotogramas clave, terminamos. Y ahora necesitamos aplicar esas reglas a la imagen usando la propiedad de animación. Vamos a asignarle el nombre imagen fold. Ahora mismo, voy a definir la duración como 5 s. para poder ver rápidamente todo el proceso de animación. También, necesitamos aquí para hacer infinita la animación. Entonces como puedes ver, el globo se mueve de la manera correcta. El único problema que tenemos aquí son esas barras de desplazamiento. Y en realidad podemos arreglarlo simplemente usando overflow hidden, cual debe ser asignado al contenedor. Bien, así que todo funciona bien. Simplemente aumentemos la duración de la animación. Voy a hacerlo 1/52. Bien, así que eso es todo sobre el encabezado. Todo funciona a la perfección y ahora tenemos que seguir adelante y empezar a trabajar en la siguiente sección. 75. Proyecto 8 - Crea y Style la sección de tours más populares: En realidad paso a paso, el código se hace más grande porque el proyecto en sí es grande. Por lo tanto, antes de comenzar a construir la siguiente sección, creo que será mejor si añadimos algunos comentarios en nuestros archivos HTML y CSS. Tenemos aquí un encabezado. Vamos a insertar encabezado. Después de cabecera. La siguiente sección va a ser sobre recorridos populares. Así que agreguemos aquí tours populares. Y luego fin de herramientas populares. Para el CSS. Al principio tenemos algunos estilos comunes. Entonces voy a poner aquí estilos comunes. Y luego al final, ¿verdad? Y de estilos comunes. Entonces tenemos el encabezado, luego n de encabezado. Y finalmente voy a agregar aquí tours populares y de herramientas populares. Bien, echemos un vistazo una vez más al proyecto terminado Entonces vamos a construir la segunda sección llamada los tours populares. Consta de rubro y tres tarjetas diferentes. Cada tarjeta tiene dos lados, anverso y reverso. En la parte frontal tenemos una imagen de botón, imagen de fondo con encabezado. Y abajo tenemos algunas condiciones sobre el H2. Si recogemos el botón de precio, entonces la parte trasera se mostrará con el precio y el botón para reservar Si hago clic en el botón Atrás aquí entonces la parte frontal se mostrará hacia atrás. Bien, así que eso es enfermizo lo que vamos a hacer. Sigamos adelante y comencemos a crear el marcado HTML. Voy a abrir sección elemento con clase, turista popular. A continuación, voy a insertar aquí el encabezado H1 con el nombre de la clase, rumbo turístico popular. Y con el texto los más populares. Hacia. A continuación necesitamos desarrollo, que va a ser el envoltorio de las tarjetas. Así que vamos a asignarle un envoltorio de tarjetas de nombre de clase. Después de eso, voy a crear la tarjeta en sí. Así que sigamos adelante y abramos una etiqueta div con la tarjeta de clase. Entonces crearemos una tarjeta y luego la duplicaremos dos veces. Como decíamos, cada tarjeta consta de dos partes distintas, la parte frontal y la trasera Así que vamos a insertar otro desarrollo con el nombre de clase front side. Entonces en ese elemento div, tendremos un encabezado de imagen, lista y el botón. Así que vamos a insertarte elemento IMG, el atributo source. Especificemos la parte del archivo. Tenemos carpeta de imágenes. Y después voy a seleccionar forest dot JPEG. Y el atributo alt. Voy a poner bosque. Y también voy a agregar aquí atributo de clase con una imagen de tarjeta de valor. A continuación necesitamos los elementos de encabezado H1 con un nombre de clase. Insertemos aquí el nombre del Tor, que va a ser el bosque salvaje. Por lo que las condiciones del par estarán representadas por la lista. Vamos a abrir el elemento UL con la lista de tarjetas de nombre de clase. Entonces, en general, tendremos cinco elementos de lista diferentes. Vamos a abrir el elemento LI con una tarjeta de nombre de clase, elemento de lista. E inserta aquí la primera condición, siete días Entonces la voy a duplicar cuatro veces. Y también necesitamos cambiar el contenido. El segundo ítem va a ser de hasta 20 personas. A continuación, tendremos para guías turísticos. También se deslizan en tiempo privado. Y por último, voy a poner aquí dificultad. Mediano. El último elemento en la parte frontal va a ser el botón. Así que vamos a abrir la etiqueta de botón con un nombre de clase, botón de navegación. Yo uso tu navegación porque navegaremos entre los lados frontal y posterior con la ayuda de este botón. Vamos a insertar aquí. Precio. Además de eso, voy a usar entidades HTML5. Quiero exhibir los signos más grandes que. Entonces para eso, necesitamos insertar aquí y presentar GT, que significa mayor que. Que. Necesitamos punto y coma Una vez más, los mismos personajes. Bien, así que eso es todo por la parte frontal. Sigamos adelante y creamos la parte trasera. Va a ser más pequeño porque solo tendremos tres elementos diferentes. Sigamos adelante y abramos etiqueta div con un nombre de clase atrás. Entonces sigamos adelante y copiemos este botón desde aquí. Entonces en lugar del precio, tenemos que poner aquí de nuevo, pero necesitamos escribirlo después de las entidades HTML5. Y también en lugar de los signos mayores que, necesitamos menos que Entonces, en vez de GT, necesitamos U, L, T. Bien, luego viene el rumbo. Así que abramos la etiqueta de rumbo h3 con el nombre de la clase hacia el precio Voy a poner aquí 399 dólares. Y por último, necesitamos otro botón para reservar. Entonces es etiqueta de botón abierto con el botón de tarjeta de clase. Y luego inserte aquí, reserva. Bien, así que eso es todo sobre la primera tarjeta. En general, tendremos tres de ellos. Sigamos adelante y dupliquemos la tarjeta entera dos veces. Y luego cambiar un par de cosas. Tenemos que seleccionar aquí. Río punto JPG. También cambia el atributo alt. Necesitamos aquí Río. Entonces como rumbo, voy a poner aquí a lo largo del río. A continuación, voy a cambiar las condiciones que necesitamos aquí. Nueve días destrozaron hasta 30 personas, siete guías turísticos. La siguiente condición va a ser la misma. Entonces voy a dejarlo como está, según la dificultad. Vamos a hacerlo duro. Y también cambiar el precio. Hagámoslo 499 dólares. Bien. Sigamos adelante y cambiemos esas cosas por la tercera tarjeta también. Necesitamos aquí, C punto JPG. También cambie el valor del atributo alt. Voy a poner aquí, mira, el rumbo va a ser la playa de la isla. Después cambiar las condiciones. Necesitamos aquí cinco días torr. El siguiente será hasta 40 personas, comieron, guías turísticos, luego se deslizarán en el hotel. Entonces voy a facilitar la dificultad. Y finalmente cambiar el precio, hazlo $599 Bien, vender el marcado HTML Ahora mismo, las tarjetas se ven feas porque tenemos aquí solo el HTML puro. Sigamos adelante y comencemos a escribir algo de CSS. En primer lugar, voy a crear algo de espacio en la parte superior e inferior. Así que vamos a seleccionar el elemento de sección, que tiene la clase de tours populares y asignado a él relleno. Voy a hacer relleno en la parte superior, fibrina, luego cero en el lado derecho Tan corrió por la parte inferior. Y finalmente cero en el lado izquierdo. A continuación voy a encargarme del encabezamiento de esta sección. Seleccionemos este elemento. Entonces antes que nada, vamos a aumentar el tamaño de la fuente, que sea ocho RAM. Entonces voy a poner el encabezado en el centro usando el texto align center. A continuación, voy a crear algo de espacio en la parte inferior del encabezado usando margin, bottom. Vamos a ponerla en ocho. Ran. Cambia el color. Usemos tu color primario. Y finalmente, voy a crear algún efecto de sombra usando sombra de texto con los siguientes valores. Necesitamos aquí, cero, luego 0.1 RAM, apunte a RAM, y la columna primaria. Bien, Entonces como pueden ver, el encabezado está estilizado y se ve bien A continuación, voy a encargarme de las tarjetas. En primer lugar, alineémoslos uno al lado del otro horizontalmente. Para eso, voy a seleccionar envoltorio de tarjeta asignado a él, display flex. Entonces, para crear un espacio uniforme entre las tarjetas, usemos el espacio de contenido justificado de manera uniforme. Entonces las cartas se colocan una al lado de la otra, pero en este momento no tenemos este espacio entre ellas La razón es el ancho de las imágenes. Así que sigamos adelante y nos ocupemos de ellos. En primer lugar, seleccione la propia tarjeta y defina su ancho. Voy a ponerla a 35 corridas. Después selecciona una imagen con la imagen de tarjeta de clase y define su ancho, hazla al 100%. Entonces en este caso, la imagen heredará el ancho del elemento padre Ahora, como puedes ver, las imágenes son más pequeñas y tenemos este espacio entre las cartas. Bien, ahora sigamos adelante y empecemos a trabajar en la parte delantera Voy a seleccionarlo. Al principio. Coloquemos el impuesto y el centro usando text-align Luego cambia el color de fondo. Voy a usar aquí cuello blanco. Después de eso, voy a hacer la parte frontal un poco redondeada usando punto border-radius . ¿Bien? Entonces en este momento vemos un radio fronterizo solo en la parte inferior debido a la imagen Así que tenemos que hacer que las esquinas superiores de la imagen sean redondeadas también. Así que vamos a asignar a la imagen border-radius. Cuando desee hacer las esquinas individuales de los elementos que lo rodean, entonces puede asignar varios valores a la propiedad border-radius El primero pertenece a la esquina superior izquierda. Hagámoslo 0.3. Rem. A continuación viene la esquina superior derecha. Voy a ponerla en el mismo valor, 0.3 RAM. Entonces tenemos la esquina inferior derecha. Hagámoslo cero. Y por último, necesitamos especificar la esquina inferior izquierda. Hagamos que sea cero también. Bien, ahora tenemos radio fronterizo en las cuatro esquinas del auto Sigamos adelante y personalicemos el elemento de rumbo. En primer lugar, voy a aumentar el tamaño de la fuente. Hagámoslo 2.5 alrededor. Cambiar el peso de la fuente, establecerlo en 700, y también transformar el texto en mayúsculas Después de eso, voy a cambiar la posición del rumbo. Quiero colocarlo en la esquina inferior derecha de la imagen. Entonces hagamos que su posición sea absoluta. Entonces para posicionarlo acuerdo a su elemento padre, que es el lado frontal, necesitamos asignarle a la posición padre relativa Y después de eso, definamos las propiedades superior y derecha. Voy a configurarlo hasta el 30%. En cuanto a la posición correcta, vamos a hacerla 1.5. Ejecute la celda, se posiciona el rumbo. A continuación, voy a cambiar su color. Hagámoslo blanco. Y también agregarle algún efecto de sombra. Usa sombra de texto con los valores 001 run y la columna negra. Bien, así que eso es todo sobre el rumbo. Sigamos adelante y pasemos a la lista. Seleccionemos los elementos de la lista usando la lista de tarjetas. Voy a definir su ancho. Quiero decir, quiero disminuir su ancho. Entonces hagámoslo 80% que para poder centrar la lista, necesitamos usar margin auto. Y finalmente, vamos a crear algo de espacio dentro de la lista. Voy a poner relleno en la parte superior para correr. Después cero en el lado derecho. Tres rem en la parte inferior, y cero en el lado izquierdo. Bien, ahora es el momento de personalizar los elementos de la lista y así vamos a seguir adelante y seleccionarlos. En primer lugar, definamos el tamaño de fuente. Conviértelo 1.6 RAM, luego cambiar el peso de la fuente, establecerlo en 500 y cambiar el color. En este caso, voy a usar columna gris claro. Bien, Entonces los artículos se ven mejor, pero necesitamos agregarles algunos estilos más. Vamos a crear algo de espacio en la parte superior e inferior del ítem usando margin con los valores a RAM y cero. Entonces voy a crear un borde en la parte inferior. Así que vamos a usar la propiedad llamada border bottom con los valores 0.1 run solid y la columna primaria. Entonces, como puedes ver, cada elemento de la lista tiene un borde en la parte inferior, pero están demasiado cerca el uno del otro. Entonces necesitamos agregar algo de espacio. Y vamos a crear el espacio usando relleno. En la parte inferior con la rampa de valor 1.5. Bien, así que todo está estilizado excepto el botón de precio. este momento no vamos a darle estilo porque ambos botones, solo me cuesta botón y el botón atrás tienen la misma clase. Y creo que sería mejor si empezamos al principio la parte trasera y luego nos ocupamos de los botones Así que sigamos adelante y seleccionemos la parte trasera. En primer lugar, voy a encargarme del puesto. Hagámoslo absoluto. Entonces para posicionar de acuerdo con la tarjeta, asignemos a la posición de la tarjeta relativa. Después defina la posición superior. Hagámoslo cero y cambiemos el color de fondo. Vamos a establecerlo en el color primario. Bien, así es como se ve la parte trasera en estos momentos. Voy a ampliarlo a toda la tarjeta. Para eso, vamos a establecer ancho y alto 200%. Bien, a continuación, hagamos que sea redondeado y también le agreguemos algún efecto de sombra Voy a usar radio de borde con la rampa de valor 0.3. Y luego box shadow con los valores cero a Ram. Para RAM. Y el color 777. Bien, ahora tenemos que alinear los elementos dentro la parte trasera y luego tenemos que personalizarlos. Voy a colocar los elementos en el centro para eso. Usemos flexbox y solo agreguemos el centro de nombres de clase a la parte trasera. En HTML. Los elementos se colocan en el centro. Están colocados uno al lado del otro y en realidad no lo necesitamos Tenemos que cambiar la dirección del flex y convertirlo en una columna. ¿Verdad? A continuación, sigamos adelante y personalicemos el precio y el botón para reservar. Seleccione Precio total. Aumentemos su tamaño de fuente. Que sea cinco rem. Cambiar el peso de la fuente. Voy a fijarlo a 300 Luego hacer el color blanco y además crea algo de espacio en la parte inferior usando margen inferior tres rampa. Bien, entonces el precio se ve bien. Sigamos adelante y pasemos al botón. Vamos a seleccionarlo. Voy a cambiar el color. Hagámoslo primario. Luego cambia el color de fondo. Voy a hacerlo blanco. Deshágase del borde predeterminado usando border none. Y luego cambia el tamaño de fuente, hazlo 2.5 redondo. Bien, sigamos adelante y agreguemos algunos estilos más. Voy a crear algo de espacio dentro del botón usando relleno. Vamos a colocarlo en un rem en la parte superior e inferior y dos rems en los lados derecho e izquierdo Además, voy a incrementar el espacio entre las letras usando puntos de espaciado lateral para correr. Después haz el botón alrededor usando border-radius. Vamos a ponerlo a cinco rem. Y por último, cambia el tipo del más grueso, hazlo puntero. Bien, Así que el precio y el fondo están personalizados, y ahora es el momento de darle estilo a los botones de navegación Estoy en el botón de atrás y el botón de precio, que se coloca en la parte frontal. Entonces, seleccionemos el botón de navegación. En primer lugar, la voy a colocar en la esquina superior izquierda de la tarjeta Así que pongamos su posición a absoluta. Después defina las propiedades superior y derecha. Voy a ponerles a ambos 2.5 rampa. Bien, entonces se posiciona el botón. Ahora vamos a seguir adelante y personalizarlo. Voy a establecer el relleno a 0.5 RAM, luego cambiar el color de fondo. Y en este caso voy a usar el valor RGBA. Me refiero al color blanco con la opacidad 0.8. Después cambia el color. Voy a usar tu color gris claro. Después haz redondeado el botón usando border-radius 0.3 RAM. Y deshazte del borde predeterminado usando border none. Bien, finalmente, vamos a personalizar el texto. Define el tamaño de fuente, hágalo 1.5 RAM. Luego establece el peso de la fuente en 600. También, transforma texto en mayúsculas. Luego crea algo de espacio entre letras usando el espaciado entre letras. Apunte a RAM. Y por último, hacer puntero del cursor. Bien, entonces ambos lados, estoy en la parte delantera y trasera están estilizados Todo está preparado para que la tarjeta funcione. En primer lugar, necesitamos exhibir la parte frontal trasera. Para ello, vamos a usar la propiedad index. Vamos a ponerla en diez. Después de eso, necesitamos crear un entorno 3D porque como sabes, la parte frontal y la parte trasera deben moverse en el espacio 3D Entonces, para crear el entorno 3D, tenemos que usar una propiedad llamada prospectiva. Vamos a ponerla en rampa 150. Entonces necesitamos mover la parte trasera donde se encuentra la función translate Z. Entonces usemos Transformar. Traducir Z con un valor de menos cinco corridas. Y además de eso, necesitamos moverlo un poco hacia el lado derecho. Para ello, vamos a usar la función Traducir X con el valor tres rampa. Bien, entonces ambos lados se colocan de la manera correcta. A continuación, voy a disminuir la opacidad para ambos lados, pero con valores distintos Voy a hacer que la opacidad del lado frontal 0.9. En cuanto a la parte trasera, vamos a asignarle opacidad 0.5 Bien, así que ahora estamos listos para crear el evento click y hacer el trabajo duro que vamos a usar JavaScript. Entonces una vez que hacemos clic en el botón de lo que debería mostrar la parte trasera, y también deberían cambiar las opacidades y sombras Entonces vayamos al archivo script.js. En primer lugar, tenemos que seleccionar ambos botones. Ambos tienen el mismo nombre de clase, botón de navegación. Y para poder seleccionarlos, voy a utilizar un método selector de consultas all. Dentro del paréntesis, tenemos que especificar el nombre de la clase, que es botón de navegación Este método devuelve una lista de nodos, que es un objeto similar a una matriz. Necesitamos transformarlo en una matriz. Después tenemos que mirar a través de los botones y adjuntar a ambos manejador de eventos onclick Para transformar la lista de nodos en una matriz, necesitamos usar la matriz ES6 desde método que mirar a través de los elementos y adjuntarlos al controlador de eventos onclick Vamos a usar uno de los métodos de ayuda de matriz llamados for-each En realidad, este método nos ayuda a ejecutar la función para cada elemento de la matriz por separado. Tenemos que pasar una función de devolución de llamada, que debería tomar un argumento Y va a ser el elemento actual de la matriz. Y ahora necesitamos adjuntar al item onclick event handler Entonces necesitamos item dot onclick. Tenemos que asignarle una función de flecha. Bien, entonces déjame explicarte lo que vamos a hacer. En realidad, vamos a crear una nueva clase y CSS, que luego se asignará a la tarjeta desde JavaScript. Esta clase nos ayudará a definir nuevos estilos CSS, los cuales deben aplicarse a los lados frontal y posterior onclick Así que ahora tenemos que asignar a la baraja de cartas cambio rápido. Será el nombre de la nueva clase. Para seleccionar la tarjeta, voy a usar DOM Navigation. En este caso, el ítem se refiere al botón de navegación. Entonces tenemos que movernos un nivel hacia arriba usando la propiedad del elemento padre. Entonces tenemos que movernos de nuevo un nivel arriba. Y finalmente, llegaremos a la tarjeta. Ahora tenemos que usar una propiedad llamada class list, que almacena todas las clases que tiene el elemento. Entonces tenemos que usar la celda del método toggle. Ellos método toggle agrega el nombre de la clase al elemento si no existe y lo elimina del elemento si existe. Por último, insertemos aquí el nombre de la clase. Cambio. Bien, así que eso es todo sobre el JavaScript. Volvamos al archivo CSS y seleccionemos el cambio de nombre de clase. Debe ser seguido por la parte frontal. Pero necesitamos usar aquí uno de estos combinadores CSS llamado selector Child, que se expresa por el signo mayor que En realidad, el selector hijo selecciona todos los elementos que son los hijos de un elemento especificado. Entonces, una vez que hagamos clic en el botón, entonces el auto obtendrá un nuevo cambio de clase y toda esta selección será válida. Ahora tenemos que definir los estilos que queremos asignar a la parte frontal onclick, ambos lados intercambiarán sus posiciones, sombras, opacidades, y la propiedad z-index para el lado frontal, necesitamos aquí Transformar, necesitamos aquí Transformar, Traducir valor de la función Z menos cinco RAM También necesitamos traducir X valor tres RAM. A continuación viene caja sombra, donde los valores cero a ram, foráneo y el color 777. A continuación voy a establecer la opacidad a 0.5. En cuanto al índice Z, debe ser igual a cero. Bien, a continuación necesitamos lo mismo para la parte de atrás. Voy a copiar este código de aquí y pegarlo abajo. Con la parte trasera. Necesitamos parte trasera en lugar de la parte frontal. Cambiemos los valores aquí. Necesitamos cero. Y Stan otra vez cero. En cuanto a la sombra de caja, debería tener 0.5 rem a RAM. Y el color AAA. A continuación voy a establecer la opacidad a 0.9. En cuanto al índice Z. Voy a deshacerme de él. ¿Bien? Si hago clic en el botón, tarjeta estándar funcionará bien. Lo único que tenemos que hacer es suavizar el efecto. Para eso, tenemos que usar la transición. Vamos a insertar aquí opacidad con una duración 0.4 s. A continuación, necesitamos transformar con la misma duración Y también box-shadow 0.4 s. en realidad podríamos usar aquí todos en lugar de esas propiedades Pero entonces en todo incluiríamos también el índice y rompería el efecto. Bien, vamos a copiar esta línea de código y pegarla para la parte trasera también Bien, así que ahora todo funciona a la perfección. Tenemos buenos efectos de transición geniales. En realidad, hemos terminado con esta sección y es momento seguir adelante y comenzar a construir la siguiente. 76. Proyecto 8 - Crear y personalizar sección de testimonios: La siguiente sección va a ser las historias, las historias de los clientes. Echemos un vistazo al proyecto terminado. Entonces tenemos dos clientes con sus historias y el fondo del video. Entonces 12, esta parte, podrás aprender a configurar el video como fondo. Bien, como de costumbre, sigamos adelante y comencemos a crear el marcado HTML En realidad, primero, vamos a construir este toro, y después de eso nos encargaremos del fondo del video Insertemos nuevos comentarios, historias. Después de historias. Y elemento de sección abierta Historias de clase. A continuación necesitamos unos elementos div que envolverán ambas historias. Así que vamos a asignarle un envoltorio de historias de clase. Entonces en general vamos a tener dos historias. Vamos a abrir desarrollos que serán utilizados para crear y manipular el fondo de la historia. Así que asignarle una historia de clase, ser G. Y luego poner aquí esta torre misma. Voy a abrir otra etiqueta div con una historia de clase. Entonces cada historia consistirá en un encabezado de imagen, el párrafo. Vamos a insertar aquí elementos IMG. En el atributo source. Voy a especificar la ruta de la imagen dentro de la carpeta images. Voy a seleccionar historia, IMG un punto JPEG Entonces como el valor del atributo alt, voy a poner aquí la imagen del cliente. Y por último, voy a agregar aquí atributo de clase devaluaría la imagen de la historia Por lo que a la imagen le debe seguir el texto de la historia. Como dijimos, va a ser el encabezamiento y el párrafo. Serán envueltos por el desarrollo. Así que vamos a crear con una historia de clase textos que inserten su etiqueta de encabezado H1 con el encabezado de la historia del nombre de la clase. Voy a poner aquí algunos textos. Digamos Estos fueron los mejores días de este año. Siguiente Voy a crear un párrafo con el párrafo de la historia de la clase. Y voy a poner aquí algún texto ficticio. Bien, entonces esta es la primera historia. Necesitamos dos de ellos, así que vamos a duplicarlo una vez y luego hacer algunos cambios. Voy a cambiar el nombre de la imagen va a estar almacenando img2 dot JPG También. Cambia el rumbo aquí, ¿verdad? Disfruté estos. Genial. Bien, Así que ahora mismo, Eso es todo sobre el marcado HTML Sigamos adelante y comencemos a escribir algo de CSS. Voy a insertar nuevos comentarios, historias. Y las historias. Después selecciona los elementos de esta sección y crea algo de espacio en la parte superior e inferior usando relleno. Necesitamos aquí tan corrió y luego cero en los lados izquierdo y derecho. Después de eso, seleccionemos el envoltorio de las historias. Entonces voy a colocar historias en el centro de esta acción. Y deben colocarse verticalmente. Para eso, usemos Flexbox. Me refiero a flex de pantalla. En general, el flex de pantalla alinea los elementos uno al lado Por lo tanto, tenemos que cambiar la dirección y necesitamos hacerla columna. Entonces necesitamos flexión dirección columna. Entonces para centrar los elementos horizontalmente, necesitamos alinear los elementos al centro. A continuación, seleccionemos el fondo de la historia. Cuenta con className, story PG. Por lo que eventualmente el fondo de la historia será similar al color blanco. Pero ahora mismo, antes de encargarnos del fondo del video, hagamos que el color de fondo de las historias gris claro para que sea visible. Antes de seguir adelante y agregar algunos estilos más al fondo, vamos a cuidar las imágenes porque en este momento son dos más grandes. Entonces voy a seleccionar la imagen. En primer lugar, definamos el ancho y la altura. Hagamos que ambos 20 corrieran. Además, los voy a hacer redondeados usando border-radius con el valor del 50 por ciento Y además de eso, tenemos que usar objeto. Nosotros cubriríamos Bien, Volvamos al fondo. Voy a crear algo de espacio dentro de él. Para eso, voy a usar padding. Vamos a ponerlo a cinco rem. Entonces necesitamos algo de espacio alrededor del fondo. Para eso. Vamos a usar margin y establecerlo en cinco RAM también. ¿Correcto? Después de eso, aumentemos el ancho del fondo, conviértalo 70% de esta sección. Y luego crea algún efecto de sombra usando box shadow con los valores cero para ejecutar cinco rem. Y como el color, voy a usar el valor RGBA. Coloquemos aquí 5013 veces y luego la opacidad, 0.4. Bien, así que paso a paso, la historia se ve mejor. Echemos un vistazo una vez más al proyecto terminado. Como puedes ver, la forma del fondo es diferente. Está sesgada. Y vamos a lograr eso usando transform con la función skew x En realidad nos permite escalar el elemento según el eje x. Entonces necesitamos transformarnos. Después sesgar la función x. Y dentro del paréntesis, voy a insertar 20 grados. Entonces como pueden ver, el fondo está sesgado, pero tenemos aquí un pequeño problema El contenido de la historia también está sesgado. Para arreglar eso, podemos sesgar la historia misma hacia atrás en el mismo grado Entonces vamos a seleccionar historia. Y voy a pasar aquí Transformar Skew x. y como valor, voy a pasar -20 grados Bien, entonces ahora el problema está arreglado. A continuación, voy a colocar la imagen y el texto uno al lado Para eso, vamos a usar display flex. Después de eso, vamos a personalizar el encabezado y un párrafo. Pero además de eso, creo que necesitamos agregar algo de espacio entre la imagen y el texto. Entonces usemos margin-right. Cinco. Sigamos adelante y seleccionemos elementos de rumbo. Tiene nombre de clase es Tori rumbo. En primer lugar, cuidemos el tamaño de la fuente. Voy a hacer que apunte fibrina, luego transformarla en mayúsculas También, cambia el color. En este caso, voy a usar el color gris. Por último, vamos a crear algo de espacio en la parte inferior usando el margen inferior con el valor una rampa. Eso es todo sobre el rubro. Sigamos adelante y seleccionemos el párrafo, el párrafo de la historia ClassName Aumentemos su tamaño de fuente, que sea 1.8 rem. Después cambia el color. Ves tu columna gris claro. Bien, entonces el encabezamiento y el párrafo quedan bien. Quiero añadir aquí dos cosas más. Vamos a sangrar un poco el párrafo y también crear algo de espacio entre las letras, quiero decir, entre las letras de encabezamiento y el párrafo también Entonces voy a seleccionar su elemento padre, que es div con un texto de historia de clase. Usemos aquí el espaciado entre letras 0.1. Ejecutar eso para sangrar el párrafo, voy a seleccionar su primera letra Para ello, necesitamos usar pseudo elemento llamado primera letra Entonces al principio seleccionemos Párrafo y luego agreguemos aquí pseudo elementos Primera letra. Necesitamos crear algo de espacio en el lado izquierdo. Así que usa margen izquierdo con el valor una ronda. ¿Bien? Entonces eso es todo sobre las historias. Todo está listo para comenzar a trabajar en el fondo del video. En primer lugar, vayamos al archivo index.html y apegemos el marcado HTML para el video Voy a abrir la etiqueta div con un contenedor de video de clase. Entonces tenemos que usar una etiqueta de video, que en realidad es nueva en HTML5. Voy a asignarle ClassName video. Además, necesitamos agregar aquí un par de Atributos. El primero va a ser la reproducción automática Este atributo nos permite reproducir el video automáticamente. El siguiente va a ser silenciado. Reproducirán el video sin sonido. Y por último, necesitamos un loop que reproduzca el video sin parar. Después de eso, necesitamos especificar la fuente del video usando una etiqueta fuente que es en realidad la etiqueta de cierre automático Entonces necesitamos aquí atributos fuente en los que tenemos que especificar la ruta del video. Se coloca en la carpeta Imágenes. Además del atributo source, también necesitamos usar un atributo type, en el que debemos especificar el tipo del video. Voy a configurarlo en video slash MP4. Bien, así como pueden ver, el video se está reproduciendo y ahora necesitamos cuidar su posición Sigamos adelante y seleccionemos el contenedor y fijemos su posición en absoluto. Tenemos que posicionarlo de acuerdo al elemento padre, que es esta sección. Así que vamos a agregarle posición relativa. Entonces como el video está por todas partes como fondo, vamos a definir la parte superior y carecía de propiedades Voy a ponerlos a cero a ambos . También, tenemos que definir ancho y alto. Establezca a ambos el 200 por ciento. Y además de eso, vamos a disminuir la opacidad, hacerla 0.4 Bien, lo último es agregar un par de estilos, el video en sí, para mantener la calidad del video O sea, para evitar estirarlo o cosas así, tenemos que usar los siguientes estilos. Seleccionemos video PG y le asignemos ancho y alto. Ambos se fijaron en el 100 por ciento. Y además de eso, necesitamos aquí la velocidad del objeto con cobertura de valor. Bien, finalmente, cambiemos el color de fondo para estas historias. Voy a deshacerme de los antecedentes actuales. Entonces voy a establecer el color de fondo a RGBA. Hagamos una pausa aquí 2383 veces. Y la opacidad 0.85. ¿Bien? Como puedes ver, todo se ve muy bien. Y en realidad hemos terminado de trabajar en esta sección. Si quieres encontrar algunos videos gratis, puedes seguir adelante y visitar el sitio web llamado cover con dos rs.co, donde podemos encontrar muchos videos gratis diferentes Bien, eso es todo sobre estas historias. Sigamos adelante y pasemos a la siguiente sección. 77. Proyecto 8 - Crear y personalizar sección de contactos con fondo animado: En primer lugar, echemos un vistazo al proyecto terminado. Entonces después de esta sección de turistas, vamos a construir la sección de contacto. En el centro de esta sección, tenemos un par de campos de entrada con un botón de envío. En la parte superior del formulario, tenemos un encabezado contáctenos. Y además de eso, una sección tiene un fondo de pantalla completa con algunos efectos de animación Como puedes ver que el color está cambiando y crea algo así como el efecto día y noche. Bien, así que eso es todo, lo que vamos a construir. adelante e insertemos nuevos comentarios en los contactos del archivo HTML, y luego al final del contrato. Entonces voy a abrir elemento de sección con un contacto de nombre de clase. Entonces dentro de este elemento de sección, tendremos dos partes distintas. El primero va a ser un rubro. En cuanto al segundo, deberían ser los elementos formados. Sigamos adelante y abramos la etiqueta de encabezado H1, que tendrá nombre de clase, encabezado de contacto. Y luego te inserte, contáctanos. A continuación, necesitamos elementos de formulario con el formulario de contacto de clase. Entonces dentro de ese formulario, tendremos tres grupos diferentes de insumos y un botón de enviar. Así que sigamos adelante y abramos etiqueta div con el grupo de entrada de clase. El primer grupo que tendrá etiqueta y la entrada. Insertemos tu nombre completo con los asteriscos. Después voy a abrir la etiqueta de entrada con texto tipo. Entonces voy a agregar aquí atributo de clase con una entrada de conflicto de valor. Y también necesitamos marcador de posición con un texto. Ingresa tu nombre. Bien, entonces el segundo grupo va a ser ligeramente diferente Consistirá en dos grupos de entrada diferentes. Voy a abrir la etiqueta div con un grupo de entrada de clase. Observe que estoy usando q group en plural. Entonces ahora necesitamos crear aquí dos grupos de entrada diferentes. Agarremos este código de aquí y lo peguemos dos veces. Voy a cambiar etiquetas, tipos y también atributos de marcador Necesitamos tu correo electrónico. Después escriben correo electrónico. Y también voy a cambiar el valor del atributo placeholder Necesitamos ingresar su correo electrónico. En cuanto al segundo grupo de entrada, va a ser para el teléfono. Cambiemos aquí. El valor del marcador de posición haciendo el número de teléfono de respuesta. Bien, así que ahora es el momento de crear el tercer grupo de entrada Consiste en una etiqueta y área de texto. Y una vez que abras la etiqueta div con el grupo de entrada de clase, luego inserta tu etiqueta con el mensaje de texto luego inserta tu etiqueta con el Entonces la etiqueta va a ser seguida por el área de texto. Voy a agregarle atributo de clase con un área de texto de formulario de valor. Y también necesitamos marcador de posición. Tu mensaje aquí. Bien, así que lo último que queremos hacer es crear el botón de enviar Voy a hacer eso usando un elemento input. Tenemos que escribir enviar, luego el valor presentar. Y también voy a agregar aquí atributo de clase para btn. Bien, entonces el marcado HTML está listo. Todos los elementos están creados y ahora tenemos que seguir adelante y empezar a escribir algunos CSS. Voy a insertar nuevos comentarios para el contacto. Y de contrato. Vamos a seleccionar el elemento de sección y crear algo de espacio en la parte superior e inferior usando relleno. Voy a hacer relleno 15 RAM en parte superior que cero en el lado derecho, 20 RAM en la parte inferior, y cero en el lado izquierdo. Además, voy a colocar el contenido en el centro usando text-align Bien, a continuación voy a poner la imagen como fondo. Vamos a especificar la parte de la imagen en la función URL. Voy a seleccionar una bruja llamada Contáctenos G punto PNG. Entonces necesitamos centro y no repetir Además de eso, voy a definir el tamaño del fondo. Hagámoslo cubrir. Bien, entonces ahora mismo, Eso es todo sobre el elemento sección. Sigamos adelante y personalicemos el rumbo. Vamos a seleccionarlo. En primer lugar, aumentemos el tamaño de la fuente. Que sea siete RAM. Entonces voy a hacer el texto un poco más audaz usando el peso de fuente con un valor de 700, transformar texto en mayúsculas Y también crear algo de espacio entre las letras usando el espaciado entre letras, 0.5 rem. A continuación, voy a cambiar el color. Usemos tu color blanco. A continuación, voy a agregar alguna sombra al texto usando sombra de texto con los siguientes valores, 01 RAM a RAM y el color negro. Y finalmente, crea algo de espacio en la parte inferior usando margen, fondo, un tranvía. Bien, entonces el rubro está personalizado. este momento no es del todo factible, pero una vez que agreguemos una animación al fondo, se verá mucho mejor. A continuación, tenemos que cuidar el elemento form. Entonces sigamos adelante y seleccionémoslo. Y antes que nada, definamos su anchura y altura. Voy a poner su ancho en siete para correr. En cuanto a la altura, hagamos que sea 50 RAM, luego cambiemos el color de fondo. En este caso, voy a usar el color blanco. Pero con el valor RGBA, necesitamos colocar aquí a 5053 veces Y también voy a añadir aquí la opacidad 0.95. Bien, consideremos que el formulario se coloca del lado izquierdo y necesitamos centrarlo. Para eso. Voy a usar margen. Bien, continuación, voy a centrar el contenido dentro del formulario. Para eso voy a asignar al elemento form class center. El contenido está centrado, pero los grupos de entrada se colocan uno al lado Y para arreglarlo, cambiemos la dirección del flujo y hagamos que se enfríe. ¿Bien? Después de eso, voy a hacer la forma ligeramente redondeada. Para eso, voy a usar border-radius con valor 0.5 rem Y también agreguemos algo de sombra usando box shadow con valores 01, RAM, tres rem, y la columna negra. Bien, eso es todo sobre la forma. Por ahora, sigamos adelante y seleccionemos el grupo de entrada. En primer lugar, fijemos su ancho 200 por ciento. Entonces voy a usar flexbox. Necesitamos hacer contenedor flexible de grupo de entrada usando display flex Y también necesitamos cambiar la dirección. Hagámoslo columna. ¿Bien? Entonces en este momento se estiran la primera entrada y el área de texto y ocupan todo el ancho del formulario. En cuanto al segundo y tercer elemento de entrada, son las partes del elemento de grupos de entrada. Así que vamos a seleccionar grupos de entrada y hacer su ancho 100%. Bien, entonces ahora todas las entradas y el área de texto o estirada, necesitamos algo de espacio dentro del formulario Y eso es espacio creado usando relleno con el valor cinco rondas. ¿Bien? Entonces ahora tenemos un mejor resultado, pero en realidad no es lo que queremos. Necesitamos colocar el correo electrónico y el teléfono que pones uno al lado Y para eso, voy a utilizar de nuevo display flex. Ahora necesitamos algo de espacio entre los campos de entrada para eso, vamos a agregar primero, disminuir su ancho. Entonces voy a seleccionar grupos de salida, seguido del grupo de entrada. Sigamos adelante y fijemos con 248.5 por ciento. Entonces después de eso, voy a asignar a los grupos de entrada, justificar el espacio de contenido entre. Bien, entonces las entradas están alineadas y a continuación tendremos que personalizarlas. En primer lugar, crear algún espacio entre los grupos de entrada. Asignemos al margen del grupo de entrada con valores un rem en la parte superior e inferior y cero en los lados derecho e izquierdo Bien, sigamos adelante y personalicemos las entradas y también el área de texto. Voy a seleccionar a los dos. Al principio. Seleccionemos entradas. Después duplique esta línea de código y cambie la entrada al área de texto. En primer lugar, voy a crear algo de espacio dentro de los campos. Vamos a usar para ese relleno. En realidad, necesitamos un poco más de espacio en la parte superior porque ahí vamos a colocar las etiquetas. Entonces necesitamos aquí los valores de la siguiente manera. El primero va a ser de tres rampas y el resto de los valores van a ser de una sola carrera. Bien, a continuación, cambiemos el color de fondo. Usemos tu color secundario. También. Definir la frontera. Agreguemos aquí 0.1 rem sólido, y nuevamente el color secundario. Bien, entonces los campos se ven mucho mejor. ¿Qué necesitamos para agregarles algunos estilos más? Disminuyamos el tamaño de la fuente. Conviértalo en un punto para RAM. También cambia el color. Vamos a usar aquí color gris claro. A continuación, voy a crear algún espacio entre las letras. Hagámoslo 0.1 RAM. Y finalmente, hagamos la entrada y el área de texto a su alrededor usando border-radius 0.5 Bien, así que casi terminamos con los campos de entrada. Voy a personalizarlos en foco. Quiero decir, una vez que nos enfoquemos en los campos, entonces quiero mostrar el borde. Entonces tenemos que seleccionar una entrada de ganancia y el área de texto, pero con una pseudo-clase de enfoque Agreguemos aquí puntos de borde, una carrera sólida. Y el collar C. C. C. También te permite ver tu pequeña transición para que el efecto sea más suave. Borde derecho y la duración 0.3 s. bien, así que eso es todo con respecto a los campos de entrada y el área de texto Ahora tenemos que encargarnos de las etiquetas. Voy a personalizarlos y colocarlos dentro de los campos. Así que vamos a seleccionarlos como primero, vamos a definir el tamaño de fuente, que sea un punto a la RAM. También, cambie el peso de la fuente. Hazlo 600. Entonces voy a transformar texto en mayúsculas. Luego use espaciado entre letras, 0.1 habitación. Y por último, cambia el color. Que sea genial. Bien, Entonces las etiquetas se ven bien, y ahora tengo que colocarlas dentro de los campos que necesitamos para que su posición sea absoluta Entonces necesitamos posicionar relativo para el grupo de entrada porque necesitamos posicionar la etiqueta acuerdo con el elemento padre. A continuación, vamos a establecer las propiedades superiores e izquierdas. Ambos a una ronda. Bien, eso es lo de las etiquetas. Se ven bien y de hecho queda en el único elemento para personalizar, que es un botón de enviar. Entonces, sigamos adelante y seleccionemos estos elementos. En primer lugar, voy a definir su ancho. Vamos a establecerlo al 100%. Luego crea algo de espacio dentro del elemento usando relleno con un valor de una RAM. A continuación, voy a definir el tamaño de fuente como 1.6 RAM. También creamos algún espacio entre las letras que necesitamos algún espacio en la parte superior usando margen, arriba, una rampa. Y luego cambia el color de fondo, hazlo gris claro. Bien, así es como se ve ahora mismo el botón de enviar Tenemos que agregarle algunos estilos más. Cambiemos el color del texto. Voy a hacerlo blanco. Además, necesitamos redondear el botón usando border-radius 0.5 RAM Después deshazte del borde predeterminado usando border none. Y por último, cambiar el tipo de curso se hacen puntero. Bien, así que lo último con respecto al botón es crear un efecto hover Voy a cambiar el color de fondo ligeramente al flotar Así que seleccionemos Formar btn con hover. Y para cambiar el color de fondo, hazlo gris. Además, usemos aquí la transición. Necesitamos el color de fondo y la duración 0.4 s. bien, así que ahora ya casi terminamos antes seguir adelante y crear la animación en el fondo. Quiero mencionar aquí sobre un pequeño tema. Como sabes, por defecto, puedes aumentar el tamaño del área de texto. Y si hago eso entonces el layout del elemento form se estropeará Entonces para evitar eso, voy a establecer la altura máxima y anchura máxima para el área de texto. Sigamos adelante y seleccionémoslo. Vamos a establecer la altura máxima a 15. Corre. En cuanto al ancho máximo, hagámoslo al 100%. Bien, así que ahora todo funciona perfectamente con el estilo. Ya terminamos, y ahora tenemos que crear una animación. En realidad, la animación va a ser sencilla. En general, tendremos cinco pasos diferentes y cambiaremos el color de fondo en cada paso. Así que sigamos adelante y creamos fotogramas clave. Voy a nombrar la animación como contacto PG. Entonces en 0%, voy a hacer color de fondo 3D, 3D, 3D. Entonces en 25%, voy a hacerlo c e, d h e. por. A continuación, tendremos el 50 por ciento. En cuanto al valor, va a ser 181. A las tres. A continuación viene el 75 por ciento. Voy a hacer el color de fondo ff78, 42. Y el último paso, quiero decir, al 100%, voy a volver a hacer el color de fondo. 3D, 3D, 3D. Bien, así que eso es todo sobre los fotogramas clave. Están listos. Vamos a asignar la propiedad de animación a los elementos de esta sección. Al principio necesitamos especificar el nombre de la animación, que es contacto BG. A continuación, definamos la duración. Ahora mismo. Voy a fijarlo a 10 s, pero lo cambiaremos más tarde. Y también, necesitamos ejecutar la animación infinitamente. Entonces tenemos que escribir aquí infinito. Bien, así como puedes ver, la animación funciona bien. Corre un poco más rápido. Entonces cambiemos la duración. sea 35 s. Bien, veamos sobre la sección de contacto Hemos terminado de trabajar en ello, y ahora tenemos que seguir adelante y cuidar el filtro 78. Proyecto 8 - Crear y Style Footer: En primer lugar, insertemos nuevos comentarios en HTML. Pie de página y de pie de página. Y luego abrir HTML5 footer, elemento semántico con nombre de clase footer El pie de página constará de dos partes distintas. El primero va a ser una lista de un par de elementos de navegación. En cuanto a la segunda parte, debería ser párrafo para algunos textos de derechos de autor. Si colocamos el cursor sobre los elementos entonces ellos rotarán y obtendremos algún efecto 3D usando sombra De un vistazo, parece que los artículos se están moviendo hacia arriba. Sigamos adelante y creamos una lista. Debe ser representado por el elemento div y un par de enlaces. Vamos a abrir la etiqueta div y asignado a la lista de pie de página de clase. Después inserte aquí elemento de enlace con enlace de pie de página de clase y con un texto. Entonces en general tendremos cinco artículos diferentes. Duplicémoslo cuatro veces y cambiemos el contenido. El segundo ítem va a ser hacia. Entonces tendremos sobre nosotros oferta y contenido. Bien, eso es lo de la primera parte. Sigamos adelante y creemos un párrafo. Vamos a asignar a p elemento clase pie de página párrafo, y poner aquí algunos contenidos. Derechos de autor. Entonces para el signo de copyright, voy a usar la entidad HTML5. Necesitamos ampersand, copy, punto y coma, luego codificar Todos los derechos reservados. Bien, eso es todo sobre el marcado. Sigamos adelante y agreguemos algo de CSS. En primer lugar, voy a insertar nuevos comentarios. Pie de página, Pie de página. A continuación, seleccione el elemento footer. Y antes que nada, cambiemos el color de fondo. Voy a usar el color gris. Y también quiero crear algún espacio dentro del filtro usando relleno. Vamos a ponerlo en cuatro, correr en la parte superior que cero en el lado derecho a Ram en la parte inferior y cero en el lado izquierdo. Bien, a continuación voy a colocar lo menos en el centro. Y para eso, sigamos adelante y seleccionemos lista de pie de página. Voy a hacerlo flex contenedor usando display flex. Y luego con el fin de colocar los elementos en el centro, vamos a usar justify-content Bien, así que los elementos de la lista se colocan en el centro y ahora podemos personalizarlos. Sigamos adelante y seleccionemos el enlace. Al principio. Aumentemos el tamaño de la fuente, hagámoslo a rampa. Después cambia el color. Que sea blanco. Y también, quiero crear algo de espacio en los lados derecho e izquierdo de los ítems usando margen con un valor de 0.2 rampa. Después de eso, vamos a crear algo de espacio dentro de las alas usando relleno. Pero antes de eso, para hacer visible este espacio, cambiemos por un tiempo el color de fondo de los enlaces Vamos a hacerlo rojo. Y luego crear algo de espacio. Usa acolchado. Vamos a establecer el espacio en la parte superior e inferior 2.3 RAM. Y luego tres rem en los lados derecho e izquierdo. Y también aumentar el espacio entre las letras usando el espaciado entre letras. Rampa 0.3. Bien, eso es todo sobre los enlaces Cambiemos el color de fondo. Que sea genial. Bien, antes de pasar al párrafo, voy a agregar un efecto hover a los enlaces Voy a rotarlos y también agregar a la caja sombra al flotar Así que sigamos adelante y seleccionemos el enlace de pie de página con el cursor. Entonces voy a usar la función Transformar, Girar. Giremos los enlaces menos diez grados. Y también se adhieren box shadow con los valores cero para correr tres rem y el color negro. Y finalmente, usemos la transición. Necesitamos aquí toda la duración 0.2 s. ¿Bien? Entonces, si pasamos el cursor sobre los enlaces, entonces obtendremos un efecto agradable y genial Bien, eso es todo sobre los enlaces. Sigamos adelante y cuidemos el párrafo. Vamos a seleccionarlo. Primero. Voy a alinear el texto en el centro. Después para encontrar el tamaño de fuente, hazlo 1.5 corrió. Cambia el color. En este caso, voy a usar color secundario. Entonces vamos a crear algo de espacio entre las letras. Haz que apunte a rampa. Y por último, voy a crear algo de espacio en la parte superior usando el margen top cinco o n. Bien, entonces donde el pie de página estamos hechos. Fue un poco simple, pero creo que se ve bien En realidad, paso a paso, estamos pasando al final de este proyecto, pero aún nos queda algo de trabajo por hacer. A continuación, tenemos que empezar a trabajar en la navegación 79. Proyecto 8 - Crear y crear trabajo de navegación: En primer lugar, echemos un vistazo al proyecto terminado. Como puedes ver en la esquina superior izquierda de la página web, tenemos un icono de menú fijo. Si hago clic en él, entonces se mostrará la salida. Los enlaces vienen de arriba a abajo con buenos efectos de transición. Cambian la opacidad al flotar. Y también ahora cuatro tiene su fondo de pantalla completa o presentado por la imagen. Además de eso, tenemos x botón de cierre en la esquina superior derecha del nanoporo Y si hago clic en él, entonces volveremos a la página principal. Bien, entonces eso es todo, lo que vamos a construir. Voy a insertar esta parte justo encima del encabezado. Entonces, insertemos nuevos comentarios. Ahora parte de Napa. Después abrir un div elementos y asignarle par de clases. El primero va a estar abierto para icono. En cuanto al segundo, debería serlo. Ahora para el icono. Los iconos del menú constarán de tres líneas. Allí estarán representados por los desarrollos. Entonces vamos a abrirlo con línea de clase, luego duplicar esta línea dos veces. A continuación, necesitamos abrir otros elementos div, que serían el wrapper. Así asignado a cada cluster. Ahora para el wrapper, a continuación necesitamos el elemento nav con la clase. Ahora para dentro del elemento nav, tendremos dos partes distintas. El primero va a ser x botón de cierre también. El segundo, debería ser la lista de navegación. Así que vamos a seguir adelante y abrir elementos div. Y asignado a ello cruza cerca. Ahora por icono y ahora por acre. Que instituir dos líneas, desarrollo abierto y asignarle dos clases. La primera va a ser la línea de clase común. En cuanto al segundo que debería ser el de vid. Entonces duplica esta línea de código y cambia el nombre de clase que necesitamos aquí, línea dos. Bien, sigamos adelante y te insertemos la segunda parte, me refiero a la lista de los elementos de navegación Vamos a abrir desarrollos y asignados a la lista de navegación de clase. Y luego pasarte un par de elementos de enlace. Vamos a asignarle un nombre de clase, enlace de navegación. E inserta aquí el primer elemento de navegación home. Duplicemos el elemento de enlace cuatro veces y cambiemos los elementos. El segundo va a ser hacia. Entonces tendremos sobre nosotros y contactaremos. Bien, así que eso es todo sobre el marcado HTML. Voy a empezar a escribir algunos CSS. adelante e insertemos nuevos comentarios justo después de los estilos comunes que necesitamos aquí, navbar Después final de navbar. A continuación, selecciona el icono no-para. En realidad este nombre de clase pertenece a ambos botones. Definamos el ancho y la altura. Voy a ponerlos a ambos en rampa 5.5. Y también cambiar el color de fondo. Hazlo blanco. este momento ambos botones están visibles en este momento es difícil distinguirlos. Entonces podría ser mejor si ocultamos el segundo botón así como la lista. Porque ahora mismo vamos a trabajar en la primera parte. Así que vamos a seleccionar siesta o envoltorio y asignado a él, mostrar ninguno. Bien, sigamos adelante y posicionemos el icono. Voy a seleccionarlo con su clase individual, que ya está abierta para icono. Sigamos adelante y fijemos su posición para arreglar. Después defina las propiedades superior e izquierda. Voy a ponerlos a ambos a 6.5 run. Bien, Como veo ahora mismo, el icono no es visible porque ha terminado detrás de la cabecera. Y para arreglar eso, vamos a usar la propiedad z-index y establecerla en 200 Bien, ahora el problema está arreglado. A continuación, voy a hacer redondear el Icono. En realidad, necesitamos que ambos botones estén redondeados. Entonces asignemos a la NAACP o icono border-radius, 50 por ciento. Y también cambia el cursor, hazlo señalar. Bien, a continuación, voy a encargarme de las líneas. En primer lugar, sigamos adelante y mostrémoslos. Voy a seleccionar líneas usando la clase común. Ahora para el vino Icon. Definamos su altura, hagamos que apunte a correr, luego pongamos width a 3.5 rem. Y también cambiar el color de fondo, gris claro. Entonces en este momento los artículos se colocan uno encima del otro. Necesitamos algo de espacio entre ellos y además tenemos que colocarlos en el centro del ojo. Para eso, voy a usar nuestra clase predefinida Center. Necesitamos esta clase para ambos iconos También necesitamos cambiar la También necesitamos cambiar dirección del flex y convertirla en una columna. Debido a que la flexión de visualización alinea los elementos flexibles horizontalmente en una fila por defecto Por último, necesitamos espacio entre líneas para eso. Vamos a seleccionar de nuevo en línea, pero ahora con open, ahora para Icon class y crear espacio usando margin con los valores punto 3.0. Bien, entonces la primera siesta o icono está personalizada y ahora tenemos que seguir adelante y empezar a trabajar en la navegación Entonces ahora mismo está oculto. Así que vamos a deshacernos de mostrar ninguno. El envoltorio ocupará toda la ventana gráfica. Realicé el 100% del ancho y alto de la ventana gráfica. Así que vamos a establecer con 200 ancho de ventana gráfica. En cuanto a la altura, hagamos que sea 100 altura de ventana gráfica. Y también cambiar el color de fondo. Voy a usar aquí valor RGBA con color blanco. Coloquemos aquí 253 veces. Y también señala la opacidad. Bien, así que ahora mismo, así es como se ve la siesta o el envoltorio Necesitamos definir en qué posición debería haber colocado fijo. Y también voy a poner a la izquierda y a los bots y propiedades ambos a cero. Entonces ahora mismo, ahora para envoltorio terminó detrás del encabezado. Y ahora usemos nuevamente la propiedad index para solucionar ese problema. Vamos a establecer el índice en 300. Bien, sigamos adelante y empecemos a trabajar en la napa misma. Me refiero al elemento nav. Vamos a seleccionarlo y definir ancho y alto. Voy a establecer a ambos 200 por ciento, y también cambiar el color de fondo. Usemos tu azul real. Entonces ahora el puerto ahora ocupa todo el ancho y alto de la ventana gráfica Necesitamos agregar algo de espacio a su alrededor, como es en el caso del encabezado. Recuerda que la cantidad de espacio en cada lado es igual a 3.5 rampa. Entonces, por tanto, definamos padding y asignémosle el primer valor, 3.5 rem. Se crea el espacio. Pero como pueden ver, tenemos un pequeño problema en el lado derecho. Aquí tenemos una barra de desplazamiento. Ahora para el rapero se ha posicionado, establece un fijo, y no toma en cuenta la barra de desplazamiento. Necesitamos aumentar la cantidad de espacio en el lado derecho. El tamaño de la barra de desplazamiento es igual a 20 píxeles. Entonces necesitamos hacer el relleno en el lado derecho, 5.5 rem. Entonces necesitamos 3.5 rondas dos veces. El problema está arreglado. Sigamos adelante y nos encarguemos del cierre. Ahora para el icono, se va a colocar en la esquina superior derecha de la Napa. Así que vamos a seleccionarlo y hacer su posición absoluta. Para colocar el icono acuerdo a su elemento padre, vamos a asignar a Napa posición relativa. Después defina las propiedades superior y derecha. Voy a establecer la propiedad superior a 2.5 RAM. En cuanto a la posición correcta, hagamos que sea de tres rondas. Bien, entonces se posiciona el icono. Coloquemos esas líneas de la manera correcta y mostremos la x. En primer lugar la manera correcta y mostremos la x. , seleccionémoslas con nombre de costos comunes cerrar ahora para línea Icon y hagamos que la posición sea absoluta. Ahora necesitamos rotar cada una de las líneas 40 grados, pero con direcciones opuestas. Sigamos adelante y seleccionemos la primera línea. Con línea cruzada uno. Necesitamos usar la función Transformar, Girar. Pongamos aquí cuatro grados. Entonces voy a duplicar todo este código, cambié la clase que necesitamos aquí, línea dos. Y en lugar de 40 grados -40 grados. Bien, entonces el icono del pargo está personalizado y es hora de seguir adelante y cambiar el fondo por ahora verter Ya no necesitamos ese fondo azul. Entonces, deshagámonos de él e insertemos aquí. Gradiente lineal con valores RGBA. Voy a usar el color negro dos veces, pero con diferentes opacidades Y el primer caso, la opacidad va a ser 0.5. Como Paul, el segundo valor RGBA. Necesitamos la opacidad 0.3. A continuación voy a especificar la URL. Voy a seleccionar una imagen llamada Napa, PNG o JPEG. Es clase en carpeta de imágenes. Entonces necesitamos centro y no-repetición Y también definir el tamaño del fondo. Hagámoslo cubrir. Bien, entonces la imagen se establece como fondo y ahora es el momento de cuidar la lista de navegación En este momento, los enlaces no son del todo visibles. Entonces, antes que nada, seleccionémoslos usando la clase naftaleno Incrementa el tamaño de la fuente, hazlo tres rampa. Después cambia el peso de la fuente. Voy a hacer carpeta de enlaces. Establezcamos el peso de la fuente en 700. Cambia el color, hazlo blanco y transforma el texto en mayúsculas Bien, entonces ahora podemos ver los enlaces. Y lo siguiente que quiero hacer es definir el color de fondo para cada elemento de navegación. Podemos hacerlo desde CSS. Es decir, somos capaces de seleccionar cada uno de los elementos con enésima pseudo-clase hijo y asignado a cada uno de ellos diferente color de fondo Pero no voy a hacer eso desde CSS. Vamos a usar JavaScript. En primer lugar, voy a crear una matriz de colores. Pongamos aquí cinco colores diferentes. El primero va a ser 6495 ED. Entonces el siguiente va a ser siete, f, f, f, D4 Entonces voy a usar F fa078. Entonces a continuación necesitamos f08, 080. Y el último color va a ser a f e, e, e, e. ¿Bien Que necesitamos seleccionar todos los enlaces. Entonces tenemos que mirar a través de ellos y asignar el color de fondo a cada uno de los elementos. Así que vamos a seguir adelante y seleccionarlos usando el método selector de consultas all. Especificemos aquí el nombre de clase naftaleno. Entonces, en este caso, el método query selector all devuelve objetos similares a una matriz, que se llama no lists Voy a transformar la lista de nodos en una matriz. Y luego recorreremos la matriz usando el método foreach Para transformar la lista de nodos en una matriz, necesitamos usar array from method. Entonces después de eso, podemos usar el método forEach. Para cada uno nos permite recorrer un array y ejecutar una función. Para cada elemento de la matriz, necesitamos pasar una función de devolución de llamada, que tomará un parámetro y va a ser el elemento actual Entonces necesitamos definir el color de fondo. Para eso, voy a usar las propiedades de estilo y texto CSS. Necesitamos item dot style dot css text. Así que ahora tenemos que pasar aquí algún código CSS. Para eso. Voy a usar cadenas de plantilla ES6. Tenemos que abrir backticks. Después inserta aquí el color de fondo. Así que ahora necesitamos usar los valores de la matriz de colores por separado. En cada iteración, necesitamos definir el número de índice de los colores. Y para eso, voy a crear una nueva variable llamada I. Noté que he usado aquí let declaración. Esta variable va a ser algo así como contador. Por defecto debería ser igual a cero. Ahora, abajo, tenemos que usar un letrero de $1 con llaves rizadas Ahora tenemos que pasar su matriz de colores. Y entre corchetes, necesitamos indicar el número de índice. Entonces tenemos que pasar aquí i, seguido del operador de incremento, que se expresa con signos dobles más En la primera iteración, el número de índice va a ser cero y se utilizará la primera columna Entonces en la segunda iteración, el contador se convertirá en uno, y se utilizará la segunda columna y así sucesivamente Entonces, como puedes ver, cada elemento de navegación tiene su propio color de fondo. A continuación, voy a ampliar enlaces hasta el fondo del nanoporo Entonces sigamos adelante y seleccionemos novelista. Hacer su altura 100 por ciento. Y además además de eso, voy a hacerlo flex container usando display flex. Por lo que ahora los artículos se estiran de arriba a abajo y ocupan el 100% de la altura. A continuación, tenemos que cuidar el ancho. Esos artículos también deben sacar todo el ancho. Así que definamos el ancho y lo hagamos al 100%. Bien, entonces ahora mismo, todo va bien. Quiero colocar esos artículos en el centro de esas columnas. Para eso, vamos a asignar a cada uno de los elementos de enlace centro de clase Bien, Después de eso, vamos a disminuir la opacidad, que sea 0.8 C. La opacidad también ha afectado en el botón. Así que definamos la propiedad del índice Z para el botón y hagamos 300. Bien, a continuación voy a crear un efecto hover. Quiero cambiar el color de los artículos y también aumentar la opacidad al flotar Así que sigamos adelante y seleccionemos no vincular con hover. Haz que su opacidad sea una. Y también cambia el color, hazlo primario. Además de eso, voy a usar transición donde los valores todos y 0.3 s. ¿Bien? Entonces el efecto hover funciona bien. Y ahora voy a hacer que los íconos funcionen. Entonces por defecto, voy a colocar ahora para envoltorio abajo y hacerlo oculto. Para ello, cambiemos el valor del fondo por un superior, superior y lo hagamos -100 por ciento Y también hacer que la opacidad sea cero. Entonces el envoltorio de la barra de navegación está oculto. A continuación, quiero colocar los elementos de navegación hacia arriba porque una vez que hacemos clic en el icono del menú, deberían moverse de arriba a abajo. Para eso, asignemos a la posición nada relativa. Y luego definir la posición superior. Hazlo -100%. ¿Verdad? Ahora tenemos que usar JavaScript. En realidad, crearemos un cambio de clase en CSS, que se agregará al contenedor desde JavaScript. Así que vamos a crear una variable en que voy a almacenar el contenedor. Llamemos a este contenedor de variables y luego seleccionemos estos elementos usando el método selector de consultas. Ahora tenemos que seleccionar el icono del menú y necesitamos adjuntarlo al evento click. Volvamos a seleccionar el elemento usando el método QuerySelector Voy a especificar el nombre de la clase, abrir suficiente icono de barra. Y entonces eso está apegado a ello. Listener eventos. Necesitamos aquí haga clic en evento y la función de flecha. Así que una vez que hacemos clic en el icono del menú, tenemos que añadir al contenedor el cambio de clase. Por lo tanto, tenemos que insertar su lista de clase de puntos de contenedor. Como sabes, class list almacena todas las clases que tiene el elemento. Debe ser seguido por el método add, que agrega clase a la lista de clases. Y el paréntesis especifico cambio de nombre de clase. Bien, eso es todo sobre el primer ítem. Pasemos al segundo ítem. Me refiero al x botón de cierre. Una vez que hacemos clic en él, necesitamos eliminar el cambio de clase del contenedor. Así que sigamos adelante y dupliquemos este código. Entonces cambia el nombre de clase que necesitamos aquí, cierra. Ahora por icono. Y también en lugar de agregar método, usar, eliminado. Bien, siéntate sobre JavaScript. Volvamos a CSS. Ahora tenemos que crear el cambio de clase. Entonces tenemos que seleccionar envoltorio Napa. Para que el rapero vuelva a mostrar, necesitamos establecer su posición inferior a cero. Y necesitamos aumentar la opacidad. Tenemos que hacer uno. Por otra parte, necesitamos cambiar la clase. Pero para el enlace de navegación, ahora, como saben, los enlaces se colocan arriba y necesitamos hacer cero la posición superior. Entonces, seleccionemos Cambiar, seguido de un enlace sustantivo y hagamos cero la posición superior Entonces si hago clic en el icono del menú, entonces la pantalla inoperable, y si hacemos clic en la X, debería ocultarse Así que en realidad ya casi terminamos. Necesitamos personalizar ligeramente los efectos. Además, necesitamos mostrar los elementos de navegación en orden con algunos retrasos. Vamos a asignar a Napa transición rápida. Con los siguientes valores. Necesitamos abajo 0.5 s. Luego opacidad, 0.2 s. Necesitamos la misma transición aquí abajo, pero con cierto retraso Así que vamos a agarrar esta línea de código, pegarla aquí, y aquí, retrasar 0.25 s. Ahora, si hago clic en el icono, el número se mostrará con alguna transición suave. Pero en realidad eso no es lo que queremos. Necesitamos mostrar los elementos de navegación en el orden. Entonces necesitamos transiciones para cada uno de los ítems pero con diferente tiempo de retardo. Sigamos adelante y seleccionemos de nuevo cambiar. Seguido por ahora enlace con la pseudo-clase F child. Especifique aquí el primer ítem, uno, e inserte su transición con los siguientes valores. Necesitamos propiedad superior con duración 1 s y el tiempo de retardo 0.4 s. luego opacidad 0.3 s. el color 0.3 s también Duplicemos este código cuatro veces y cambiemos los números de los ítems y el tiempo de retraso. Para el segundo artículo necesitamos 0.6 s. luego para el tercer artículo, le permite ver sus 0.8 s. Para el cuarto artículo, necesitamos 1 s. En cuanto al último artículo hice el quinto artículo, necesitamos retraso 1.2 s. Bien, así que vamos a ver los artículos de visualización en orden Y en realidad ya casi terminamos. Lo único que hay que hacer es hacer los artículos se oculten mientras se colocan arriba. Para eso, voy a usar desbordamiento oculto, pero de acuerdo a la dirección y Bien, así que ahora todo funciona a la perfección. Y en realidad ya terminamos con nuestro proyecto. Todas estas secciones están construidas y personalizadas. Y por último, tenemos que hacer que el proyecto receptivo a diferentes tamaños de pantalla. 80. Proyecto 8 - Hacer que responda al proyecto: Bien, antes que nada, inspeccionemos la página y activemos el modo responsive Como saben, hemos construido este proyecto sobre la resolución. Y ahora voy a encontrar diferentes puntos de quiebre sobre los que tendremos que hacer algunos cambios. A lo largo de esta parte, utilizaremos media queries CSS. Entonces, sigamos adelante y encontremos el primer punto de ruptura. Creo que necesitamos hacer algunos cambios una vez que hagamos que el ancho de la ventana sea inferior a 1,200 píxeles. En los puntos de interrupción, voy a colocar cartas, particularmente en una columna Comprobaremos la parte nula. Se ve bien. Lo único que vemos aquí es un poco de espacio en el lado derecho. Vemos ese espacio porque en el modo responsive, la barra de desplazamiento no es visible. Y esa es la razón de ese tema. Entonces solo puedes ignorarlo porque en dispositivos más pequeños se verá bien. Vamos a crear una consulta de medios CSS. Voy a especificar el max-width como 1,200 pixeles. Después selecciona envoltorio de tarjetas. Cambiar la dirección del flex. Voy a hacerla columna. Y también necesitamos un centro de alineación de elementos para poder colocar las tarjetas en el centro. Bien, entonces las cartas se colocan verticalmente, y ahora tenemos que agregar algo de espacio entre ellas. Entonces, seleccionemos la tarjeta en sí y agreguemos un margen enorme. Tres rem en la parte superior e inferior, y cero en los lados izquierdo y derecho. Bien, por último, voy a aumentar el ancho de los fondos de estas historias Así que selecciona la historia BG y haz su ancho 85%. Bien, entonces en ese punto de ruptura, ya terminamos. Todo lo demás se ve bien. Sigamos adelante y encontremos el siguiente. Creo que el siguiente debería ser de mil píxeles, porque en ese punto de interrupción, algunos de los elementos necesitan personalizarse Entonces usemos contra los medios CSS y especifiquemos el ancho máximo Como mil Vamos a revisarlos ahora porque creo que sería mejor si colocamos los elementos de navegación verticalmente en una columna. Para eso, necesitamos cambiar la dirección del flex. Entonces, seleccionemos la lista y cambiemos la columna de dirección flexible. Entonces en este momento se colocan verticalmente, pero tienen aquí un espacio vacío. Esos artículos deben ocupar el espacio. Y para lograrlo, usemos una de las propiedades flexbox llamadas flex grow Seleccionemos el enlace de navegación y fijemos el flex grow a uno. Esta propiedad permite que los artículos flexibles ocupen el espacio disponible dentro del contenedor. Bien, sigamos adelante y nos ocupemos del encabezado. Voy a colocar encabezado y párrafo en el centro de la página. Entonces, seleccionemos el texto del encabezado y definamos su posición, hagámoslo absoluto. Entonces necesitamos establecer las propiedades superiores e izquierdas, ambas al 50 por ciento. Con el fin de enviar al elemento perfectamente. Tenemos que usar la función Transformar con Traducir. Y tenemos que pasar aquí -50% para ambas direcciones. Me refiero al eje x y al eje y. El rubro y el avance se colocan en el centro. Pero como se puede ver, terminaron detrás del globo de aire. Para arreglarlo, pongamos el índice en diez. Bien, Siguiente voy a disminuir el tamaño de fuente del encabezado y párrafo. Entonces, seleccionemos rumbo. Cambia el tamaño de la fuente, hazlo seis Ram. A continuación, voy a seleccionar el párrafo de encabezado. Hagamos que su tamaño de fuente 2.5 se ejecute. Bien, teníamos nuestros textos, ya terminamos. Pasemos a la siguiente sección. Tenemos que disminuir aquí el tamaño de la rúbrica. Así que vamos a seleccionarlo y hacer su tamaño de fuente. Seis rondas. Bien, eso es todo sobre esta sección. A continuación viene la sección de historia. Creo que desde este punto de ruptura, ya no necesitamos sesgar el fondo Entonces voy a darles la forma del rectángulo. Sigamos adelante y seleccionemos historia BOLSA. Luego usa Transformar sesgo x y hazlo cero. A continuación necesitamos la historia misma. Vamos a agarrar esta línea de código y pegarla. Tú. ¿Bien? Además de eso, voy a colocar el contenido verticalmente. Para eso necesitamos cambiar la dirección del flex. Así que vamos a hacerlo columna y también alinear los elementos en el centro. Bien, así que lo último con respecto al almacenamiento es crear algo de espacio debajo de las imágenes Sigamos adelante y seleccionemos la imagen. Y asignado a ello margen inferior con un valor de tres rampa. Bien, eso es todo sobre esta sección de historias. Por último, voy a encargarme del filtro. Voy a disminuir el espacio dentro de los enlaces y también voy a disminuir el espacio entre ellos. Así que sigamos adelante y seleccionemos el enlace que relleno definido como 0.3 RAM en superior e inferior y dos RAM en los lados derecho e izquierdo. Y también necesitamos usar margen con 0.1 rem. Bien, entonces creo que hemos terminado En el punto de ruptura. Todo se ve bien. Sigamos adelante y encontremos el siguiente. Por lo que debería ser de 800 píxeles. Así que sigamos adelante y creamos nuevos medios con ancho máximo de 800 píxeles En ese punto de ruptura, voy a ocultar el párrafo en absoluto Vamos a seguir adelante y seleccionarlo y asignado a él, mostrar ninguno. A continuación, vamos a disminuir el tamaño del encabezado de la sección de tarjetas. Entonces, seleccionemos el encabezado de herramientas populares y hagamos que su tamaño de fuente sea cinco. Bien, entonces en realidad todo parece estar bien excepto la sección de contacto y el pie Voy a disminuir el ancho de los elementos del formulario. Así que vamos a seguir adelante y seleccionarlo y establecer su ancho en 90%. En cuanto al pie de página, voy a colocar los enlaces verticalmente en una columna. Así que sigamos adelante y seleccionemos lista de pie de página. Cambiar la columna de dirección de flexión. Además, necesitamos alinear los elementos en el centro. Por último, agreguemos algo de espacio entre los enlaces. Seleccione el enlace de pie de página y agregue margen. Un rem en la parte superior e inferior y cero en los lados derecho e izquierdo. Bien, entonces en realidad, eso es todo sobre este punto de ruptura. Sigamos adelante y encontremos el siguiente. Entonces el siguiente va a ser, creo, 650 pixeles. Así que vamos a crear una nueva consulta de medios y especificar el ancho máximo como 650 píxeles. En el descanso, punto de interrupción, voy a extender estas secciones a toda la página Entonces, seleccionemos el contenedor y nos deshagamos del margen. Hazlo cero Entonces voy a cuidar al Navbar Empecemos con iconos. Seleccione, abra nuestro icono y cambie las posiciones superior e izquierda. Voy a ponerlos a los dos a 2.5 corrieron. Antes de pasar al siguiente icono, quiero deshacerme del espacio alrededor de la napa. Así que vamos a seleccionar ahora para el envoltorio y establecer el relleno a cero. Después selecciona el segundo icono, que tiene el icono de pargo cerrado, y cambia la posición correcta Que sea 4M. Bien, eso es lo de la barra de navegación. Sigamos adelante y seleccionemos encabezado. Voy a establecer su altura 200 vh. Bien, así que terminamos con el encabezado. Pasemos a la sección de contacto. Voy a disminuir el tamaño de la rúbrica. Así que sigamos adelante y seleccionemos el encabezado de contacto y hagamos su tamaño de fuente seis redondos. Además, voy a agregar algunos estilos al formulario de contacto. Cambiemos la cantidad del relleno. Hacerlo a rampa. En cuanto a la altura, hagamos que sea cuatro para rampa. Bien, así que eso es, unos 650 píxeles. Y por último, necesitamos personalizar el proyecto sobre los últimos puntos de interrupción, que creo que van a ser de 500 píxeles Así que sigamos adelante y creamos nuevos medios con los 500 píxeles de ancho máximo Entonces, la forma más fácil de hacer que los elementos se vean bien en ese punto de interrupción Pensé en disminuir el tamaño de fuente de los elementos HTML. Como saben, en este momento, equivale a 62.5% Y voy a disminuir el H2 45%. Este código tendrá efecto en el tamaño de cada elemento porque a lo largo de este proyecto, estuvimos usando RAM como unidad de medida. Bien, entonces creo que todo se ve bastante bien. Y finalmente, ya terminamos. Hemos terminado de construir este proyecto. Entonces enhorabuena, espero que lo hayan disfrutado. Aprendí muchas cosas geniales e interesantes. Si te gustó este proyecto, por favor, pulgares arriba, comente abajo, comparte el video, suscríbete a nuestro canal y haz clic en la campana para recibir notificaciones sobre los próximos proyectos Bien. Nos vemos la próxima vez. 81. Proyecto 9 - Previsión de proyecto: Bien, así que es momento de construir nuestro próximo proyecto, que va a ser el clon de uno de los sitios web más populares y de uso común llamado Paypal, creará la interfaz de usuario de las diferentes páginas Estoy en la página principal, páginas de inicio de sesión y registro. Por supuesto que no será el clon exacto con toda la funcionalidad. Como dije, vamos a construir solo una interfaz de usuario con HTML, CSS y JavaScript. Paypal se ve diferente en diferentes países. La interfaz de usuario cambia frecuentemente de vez en cuando. Así que no te preocupes si este no es el clon exacto de la IU actual. Bien, entonces antes de saltar directamente a escribir el código, al principio, describamos cómo es el proyecto Entonces como dije, construiremos tres páginas diferentes, sesión principal e inscríbase. Empezaremos por la página principal. Consistirá en un par de secciones diferentes. La primera sección va a ser el banner con navegación. Tenemos aquí varios elementos de navegación. Si pongo el cursor sobre ellos, entonces se mostrará el menú desplegable Cambiará una vez que pasemos cursor sobre otro elemento de navegación Además, tendremos aquí dos botones diferentes para iniciar sesión e inscribirse. Si hago clic en ellos, entonces navegaremos a la página adecuada. Por lo que a la pancarta le seguirá la segunda sección. Incluirá tres partes diferentes con Font, iconos impresionantes, algunos elementos de texto y botones. Entonces tendremos esta sección azul con algunos párrafos diferentes. A continuación, construiremos esta pequeña sección aquí con una imagen y tres pasos diferentes. Abajo, tendremos un botón para apuntarte, seguido del pie de página. Bien, así que veamos sobre la página principal. Echemos un vistazo a la página de inicio de sesión. Será bastante similar a la página de inicio de sesión original. Tendremos aquí dos campos de entrada con botones. Esa es probablemente la página de registro. Constará de dos partes. En el lado izquierdo, tendremos varias imágenes de los clientes. En cuanto al lado derecho, incluirá dos opciones distintas. Si queremos crear una cuenta personal o comercial. Bien, así que eso es todo sobre el proyecto. Como de costumbre, lo haremos sensible a diferentes tamaños de pantalla. Si inspecciono la página y cambio al modo responsive, verás que es responsive. Una cosa a tener en cuenta aquí, en tamaños de pantalla más pequeños, ya no tendremos los desplegables Se transformarán al menú así. Bien, entonces eso es todo. Estamos listos para comenzar a construir el proyecto. Entonces, sigamos adelante. 82. Proyecto 9 - Crear y personalizar las secciones primeras, segunda y tercera: Hola y bienvenidos a nuestro nuevo video de YouTube. En este tutorial, vamos a estar construyendo el sitio web llamado Wine House. El proyecto se va a crear en base HTML, CSS y JavaScript. Aprenderás sobre cómo crear efectos agradables y geniales. Entonces espero que el proyecto vaya a ser interesante y útil. Como dijimos a lo largo de este tutorial, vamos a usar HTML, CSS y JavaScript. Entonces espero que a todos ya se conozcan algunas cosas básicas de esas tres tecnologías. Bien, sigamos adelante y antes nada, describamos el proyecto Consta de cinco páginas diferentes y están alineadas de una manera diferente. En su mayoría, puede conocer los sitios web donde puede desplazarse hacia arriba y hacia abajo por las diferentes secciones de la página web. Pero en nuestro caso, puedes desplazarte por la página es horizontal. Quiero decir, una vez que te desplazas, navegarás a las diferentes páginas con algunos efectos de transición agradables y geniales. Además, puedes ver que no tenemos aquí la barra de desplazamiento. Además de eso, puedes ver aquí los controladores, quiero decir, esas pequeñas flechas. Si haces clic en ellos, entonces navegarás a las diferentes páginas. También abajo, tenemos una barra de progreso, que nos muestra en qué página nos encontramos actualmente. Además, tenemos aquí una navegación fija. Y los elementos de navegación tienen algunos buenos efectos de hover. Bien, entonces el proyecto va a responder a diferentes tamaños de pantalla. Si inspecciono la página, luego cambio el modo de respuesta y verifico el proyecto en diferentes puntos de ruptura. Verás que responde. En tamaños de pantalla más pequeños. Ya no tenemos la navegación fija. Se transforma en el menú de hamburguesas. Bien, así que en realidad todo esto se trata de nuestro proyecto. Sigamos adelante y comencemos. He creado una nueva carpeta en el escritorio llamada Wine House, en la que tengo otra carpeta para las imágenes. Sigamos adelante y abramos esta carpeta en código VS. Voy a crear tres archivos diferentes. Index.html, style.css y scripts punto js. Que abra el archivo index.html y genere el documento HTML básico. Voy a usar Emmet. Pongamos aquí el signo de exclamación y presionemos Enter o tab A continuación, voy a vincular esos tres archivos. Así que vamos a abrir la etiqueta de enlace y especificar aquí la ruta del archivo CSS. Siguiente Voy a abrir la etiqueta de script abajo, encima de la etiqueta del cuerpo de cierre. Y en el atributo source, vamos a especificar la ruta del archivo script.js. Bien, además de eso, voy a usar una de las fuentes de Google a lo largo de este proyecto. Entonces sigamos adelante y agarremos el enlace. Vayamos al sitio web de Google Fonts y busquemos una fuente llamada cormorán Garamond Seleccionemos aquí un par de pesos de fuente diferentes y luego agarremos el enlace. Voy a pegarlo en el elemento cabeza. Bien, a continuación quiero cambiar el logo y la barra de título. Necesitamos abrir la etiqueta de enlace como el valor del atributo que necesitamos aquí icono. Entonces voy a especificar el tipo. Se le va a fotografiar slash PNG. Y finalmente, tenemos que especificar la ruta de la imagen y los atributos de referencia H. Tenemos aquí, carpeta de imágenes, y luego tenemos que seleccionar un logo punto PNG. Por último, cambiar el título. Necesitamos Wine House. Sigamos adelante y ejecutemos el proyecto o el navegador. Para eso. Voy a usar uno de los paquetes de código VS que se llama servidor en vivo. Nos permite ejecutar la vida del proyecto al navegador y realizar cambios sin actualizar la página cada vez. Para que puedas instalar y usar esta extensión. Entonces el proyecto está en vivo para el navegador. También puedes ver aquí el logo en la barra de título. Por último, organicemos un poco nuestros entornos de trabajo colocamos el editor y el navegador, así, y comencemos. Bien, así que crearemos y personalizaremos cada una de las páginas por separado. Y luego después de eso, programaremos el efecto scroll y también algunas otras cosas diferentes. Sigamos adelante y comencemos a crear el marcado HTML open div tag, que va a ser el contenedor A continuación tendremos otros elementos div. Va a ser el envoltorio Así que en general vamos a tener cinco páginas diferentes, me refiero a cinco secciones diferentes. Así que vamos a seguir adelante y crear esta sección elementos para todos ellos. Voy a asignarle la clase sección uno. Entonces dupliquemos cuatro veces y cambiemos los nombres de las clases. Necesitamos nombres de clase de dos a cinco. Bien, así que voy a comenzar con la primera sección. Yo hice la página principal. Incluye el encabezado con el subrayado y el fondo de pantalla completa Aquí se ven las flechas de navegación y la barra de progreso. Están fijos y se muestran en todas las páginas. Nosotros nos encargaremos de ellos un poco más tarde. Bien, sigamos adelante y abramos los elementos div dentro de la primera sección. Estos elementos contarán con dos clases distintas. El primero va a ser el envoltorio de sección de clase común. Para la segunda va a ser la clase individual. Voy a llamarlo sección uno rápido. En realidad necesitamos esta envoltura de sección para el resto de las secciones también. Entonces vamos a copiar estos elementos y pegarlos para todos ellos. Además, necesitamos cambiar los nombres de las clases. Necesitamos dos números del dos al cinco. Bien, volvamos a la primera sección. Necesitamos insertar una etiqueta div que envolverá el encabezado. Vamos a asignarle un nombre de clase, sección uno, envoltorio de encabezado. Y pasar aquí H1 elementos de rumbo. Voy a asignarle clase sección uno encabezado. Y también, coloquemos aquí los siguientes textos. Los mejores vinos del mundo. Entonces eso es todo sobre la primera sección. Ahora, voy a empezar a escribir algo de CSS. En primer lugar, voy a crear algunos estilos comunes. Seleccionemos cada elemento usando un asterisco y pongamos aquí algunos estilos comunes y restablecemos Voy a deshacerme de margen y relleno de cada elemento. Pongamos a ambos a cero. También, voy a hacer box-sizing, border-box. Siguiente Voy a deshacerme de algunos estilos predeterminados. Quiero decir, digamos bosquejo a ninguno. Además, voy a poner la decoración del texto a ninguna. Luego se deshace de los estilos predeterminados de los elementos de la lista. Hagamos que el estilo de lista escriba ninguno. Y por último, voy a establecer familia de fuentes para llamar imbécil Garamond Lo siento. 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, quiero convertir un remedio a diez píxeles. Y para eso tenemos que disminuir el tamaño de fuente del elemento HTML, y tenemos que hacerlo 62.5% El tamaño del rubro ha disminuido. Después de eso, vamos a encargarnos del envoltorio. Voy a establecer su ancho y alto, ambos 200% de la ventana gráfica Vamos a asignar a la propiedad width cien viewport width En cuanto a la altura, voy a hacerla cien de altura de viewport Bien, a continuación, seleccionemos este elemento de sección en sí y fijemos ancho y alto, ambos 200 por ciento. Entonces voy a hacer que su posición sea absoluta. Y además de eso, necesitamos hacer la posición del envoltorio sea relativa porque quiero posicionar secciones acuerdo a su elemento padre, que es el rapero. Después de eso, hagamos la posición de rezago de la sección cero. Después de eso, voy a seleccionar envoltorio de sección. Definamos su anchura y altura. Tenemos que heredar ambos del elemento section. Así que vamos a establecer el ancho y la altura ambos de ellos para heredar. Por lo que en estos momentos la primera sección terminó por detrás del resto de las secciones por la posición absoluta. Como dije, voy a personalizarlo para la primera sección. Entonces, para colocarlo en la parte superior de las otras secciones, usemos la propiedad del índice Z. Seleccione la primera sección y establezca el índice en 50. Después de eso, voy a establecer la imagen como fondo de pantalla completa Así que vamos a seleccionar Sección uno envoltorio Entonces voy a usar aquí gradiente lineal. Pongamos aquí color negro. Me refiero a RGBA con tres ceros y con la opacidad 0.5. A continuación, necesitamos de nuevo RGBA, color negro, pero con diferente opacidad. Hagámoslo 0.4. A continuación, necesitamos especificar la URL de la imagen, la parte de la imagen. Tenemos carpeta llamada images, y tenemos que seleccionar la Sección uno, PG dot JPG. A continuación, necesitamos Centro y también no repetir. Y por último, vamos a establecer el tamaño del fondo, hacerlo cubierto. Bien, así como pueden ver, tenemos aquí una imagen de fondo a pantalla completa para la primera Ahora vamos a seguir adelante y encargarnos de la salida, seleccionar su envoltorio div. En primer lugar, voy a sacarte de la posición del envoltorio. Voy a colocar el encabezamiento hacia abajo cerca de la parte inferior de la página. Entonces hagamos que su posición sea absoluta. Después defina la propiedad superior y hágalo 70%. En cuanto a la propiedad dejada, voy a hacerla 50%. Y también necesitamos transformarnos con la función de traducir. Tenemos que pasar aquí -50 por ciento para ambas direcciones. Es decir, para los ejes x e y. Entonces el rumbo se coloca de la manera correcta, pero en este momento no es del todo visible. Así que sigamos adelante y arreglemos eso. Voy a seleccionar el propio encabezamiento. Hagamos su tamaño de fuente. Diez RAM. También cambia el peso de la fuente, hazlo 300. Y cambiar el color. Voy a usar aquí. Blanco. Siguiente Voy a transformar el texto en mayúsculas. Y también crear algo de espacio entre las letras usando espaciado del libro mayor con un valor 0.1 ran. Después de eso, agreguemos un borde en la parte inferior del encabezado. Así que usa border bottom con los valores apuntan a ram. Sólido. Y como el color, voy a usar D5 con cuatro ceros Bien, entonces el rumbo se ve bien. Por último, quiero alinearlo al lado derecho, y también quiero desactivar la selección de usuario. Entonces necesitamos usar texto alinear con el valor, ¿verdad? Y luego el usuario selecciona ninguno. Bien, veamos sobre la primera sección. Se ve bien y podemos pasar a la segunda. En primer lugar, sigamos adelante y creamos el marcado HTML. Por lo que la segunda sección incluirá dos imágenes distintas y el botón. Sigamos adelante y abramos una etiqueta div con la venta de clase. Entonces tendremos una imagen y un botón en su desarrollo que es elemento IMG abierto Y los atributos fuente. Voy a especificar la ruta de la imagen. Tenemos que seleccionar bag dot PNG de la carpeta images. Voy a asignar al atributo alt sail back. Y también necesitamos tu atributo de clase con un valor de vela de vuelta. A continuación, instituyamos un botón con un nombre de clase, venta, btn Y como el impuesto, voy a pasar su orden. Ahora. Además de eso, voy a insertar aquí otra imagen, pero se va a colocar fuera del div. Especificemos aquí la ruta de la imagen. Necesitamos botella de vino punto PNG. Además, asignemos al atributo alt, el valor de la botella de vino. Y además de eso, voy a agregar un atributo de clase con una botella de vino de valor. Bien, así que eso es todo sobre el marcado de la segunda sección este momento, la segunda sección terminó por detrás de la primera. Por eso no vemos aquí algunos de los elementos. Voy a solucionar ese problema usando de nuevo, la propiedad index. Voy a cambiar aquí el nombre de la clase. Usemos la Sección dos. Ahora mismo. Quería usar de esta manera, pero eventualmente definiremos diferentes valores de la propiedad index para todas estas secciones. Bien, entonces ahora necesitamos establecer el fondo para la segunda sección Sigamos adelante y tomemos este código de aquí. Y luego hacer algunos cambios. Necesitamos envoltorio de la Sección dos. Después cambiar las opacidades. Hagámoslos 0.8 y 0.9 Y también cambiemos el nombre de la imagen. Necesitamos que la sección sea G. ¿Bien? Entonces así es como se ve la segunda sección ahora mismo, como veo tenemos aquí las barras de desplazamiento, y quiero deshacerme de ellas. Para ello, tenemos que asignar al wrapper overflow hidden. Después de eso, vamos a encargarnos de la disposición de esos elementos. Voy a usar Flexbox. Vamos a usar aquí display flex. Entonces necesitamos un centro de alineación de elementos para centrar los elementos verticalmente. Y también voy a usar justificar contenidos con el espacio de valor de manera uniforme. Bien, sigamos adelante y comencemos estilo a cada uno de los elementos Al principio, voy a seleccionar elemento div con la venta de clase. Vamos a usar de nuevo los libros de flujo. Quiero que sea contenedor flexible. Entonces tenemos que cambiar la dirección del flujo. Hagámoslo columna. Y después de eso, para el centrado vertical y horizontal, usemos align items center y justifique el centro de contenido Bien, después de eso, sigamos adelante y personalicemos la primera imagen Donde se disminuye ligeramente la opacidad la hacen 0.9. Y también voy a cambiar el ancho de la imagen. Hagámoslo 45 en lugar de seleccionar el botón. Cuenta con venta de clase, btn. En primer lugar, definamos el ancho y la altura. Voy a establecer el ancho a 20 RAM. En cuanto a la altura, hagámoslo cinco rem. A continuación, voy a encargarme del texto. Aumentemos el tamaño de la fuente. Hazlo a Ram. También cambia el peso de la fuente. Hazlo más ligero. Después transforma el texto en mayúsculas y crea algo de espacio entre las letras Hagámoslo 0.1 rep. Bien, después de eso, voy a establecer el color de fondo en transparente. También, cambia el color, hazlo blanco. Luego crea algo de espacio en la parte superior del botón usando margen superior con un valor para RAM. Y por último, vamos a crear borde con valores 0.1 RAM, sólido, y usar color blanco. Bien, entonces el botón está personalizado. Por último, quiero crear un pequeño efecto hover. Voy a cambiar el color de fondo al pasar el cursor. Botón seleccionado con un hover. Cambiar el color de fondo. Usa aquí de nuevo este color rojo. Y luego para que el efecto sea un poco más suave, usa transición con un valor de color de fondo y con ello duración 0.2 segundos. Bien, entonces el botón está estilizado y el último elemento que quiero personalizar es la segunda imagen Entonces sigamos adelante y seleccionémoslo. Voy a cambiar la opacidad. Quiero decir, quiero disminuirlo a 0.6 y también cambiar el ancho. Que sea una rampa de dos. Bien, así que con la segunda sección ya terminamos. Está estilizado y tenemos que seguir adelante y encargarnos de la tercera sección Va a ser, de nuevo, un poco simple. Tendremos la imagen de fondo a pantalla completa. Además, tendremos otras imágenes en el centro de la página y estos textos aquí mismo. Entonces, antes que nada, sigamos adelante y creemos nuevamente el marcado HTML Aquí tendremos tres elementos diferentes. El primero va a ser la etiqueta H1 de rumbo abierto con un encabezado de sección tres de clase. Y pasa aquí el texto, la mejor calidad. A continuación tendremos imagen. Especifique la ruta de la imagen en el atributo source. Necesitamos seleccionar frame dot PNG. También agregue aquí el valor del atributo alt aquí mismo, digamos marco de uvas. Y luego agregar un atributo de clase con un guión de cuadro de valor IMG Duplicemos esta línea de código. Cambia el nombre de la imagen que necesitamos aquí, uvas punto PNG. También como el valor del atributo alt. Voy a dejar aquí solo uvas. Evento cambió la clase. Necesitamos aquí uvas Dash y G. Bien, así que ahora mismo esta sección no es visible y la razón es la misma. Ha terminado por detrás de la segunda sección. Así que vamos a arreglar eso de nuevo usando la propiedad z-index. Voy a cambiar aquí el nombre de la clase. Necesitamos la Sección Tres. Entonces ahora los elementos son visibles. Sigamos adelante y personalicemos esta sección. En primer lugar, vamos a establecer la imagen como fondo de pantalla completa Seleccionemos la envoltura de la Sección tres. En realidad también necesitamos el código similar para el rapero de la sección tres. Así que vamos a agarrar este código de aquí. Pégalo para el envoltorio de la tercera sección y realice algunos cambios. Cambiemos las opacidades. Necesitamos aquí. 0.3, 0.9, luego cambiar el nombre de la imagen. Necesitamos tres. Y finalmente, necesitamos aquí justificar los contenidos con el centro de valor en lugar del espacio de manera uniforme. Bien, eso es todo sobre el envoltorio. Sigamos adelante y personalicemos cada uno de los elementos por separado. Voy a empezar con las imágenes. Seleccionemos la primera imagen, que tiene marco de clase IMG Vamos a establecer el ancho a 100 rampa. También. Voy a hacer su posición absoluta. Y por último, disminuir la opacidad, hacerla 0.5. Bien, Siguiente, voy a seleccionar esta segunda imagen, uvas IMG En realidad también necesitamos estilos similares para la segunda imagen. Entonces, sigamos adelante y tomemos este código de aquí y solo cambiemos los valores. Voy a configurar con 240 RAM. En cuanto a la opacidad, hagámosla 0.7. Por último, voy a encargarme de los elementos del rubro. Entonces, sigamos adelante y seleccionemos estos elementos. En primer lugar, vamos a aumentar el tamaño de la fuente, que sea 20 RAM. Después cambia el color. Voy a usar aquí, color gris claro, quiero decir CCC, y también transformar texto en mayúsculas A continuación tenemos que rotar el rumbo. Entonces usemos Transformar con la función rotate. Voy a rotar imagen con 20 grados. También puedes usar tu centro de alineación de texto. El rumbo se ve bien. Quiero agregarle un poco de efecto de sombra, y además voy a desactivar la selección del usuario. Así que sigamos adelante y usemos sombra de texto con los valores 0.5 RAM que 1.5 RAM. Y como color, voy a usar 000, que es la columna negra. Y finalmente, vamos a usar aquí, el usuario selecciona ninguno 83. Proyecto 9 - Crear y personalizar secciones cuarta y quinta: Bien, eso es sobre la tercera sección. Ahora tenemos que seguir adelante y empezar a trabajar en sección para esta parte consiste en sólo encabezamiento y la imagen. Y también tenemos una imagen de fondo a pantalla completa. En realidad es la misma imagen con algún efecto de desenfoque. Bien, entonces esta sección va a ser sencilla. Sigamos adelante y comencemos a crear el marcado HTML. Vamos a abrir elementos div con la clase sección cuatro, b, g. Usaremos ese elemento div para crear un efecto de desenfoque para la imagen de fondo. A continuación, necesitamos el rumbo. Abramos la etiqueta H1 con la sección de clase para encabezar con el texto vinos recién lanzados. Y por último, quiero insertar aquí una imagen. Especificemos la parte de la imagen. Tenemos que seleccionar una sección para bg dot JPG de la carpeta de imágenes, luego asignado al atributo alt, el valor nuevos vinos. Y también voy a agregar aquí clase nuevos vinos. Img. Bien, así que con la maqueta ya terminamos. Pero como es habitual, necesitamos mostrar nueva sección en la página porque ha terminado por detrás de la tercera sección. Así que sigamos adelante y utilicemos de nuevo la propiedad z-index. Voy a cambiar el nombre de la clase de sección a sección. Para esta sección es visible. Sigamos adelante y empecemos a personalizarlo. Lo primero que voy a hacer es disminuir el ancho de la imagen para que nuestro proceso de trabajo sea más conveniente. adelante y seleccionemos nuevos vinos, IMG, y fijemos su ancho en siete para correr Bien, después de eso, coloquemos los elementos en el centro de la página Y para eso tenemos que usar flexbox. Entonces voy a seleccionar sección para envoltorio. Hagámoslo un contenedor flexible. Entonces voy a cambiar la dirección. Hagámoslo columna. Siguiente. Para centrar los elementos horizontal y verticalmente, necesitamos usar justify-content center y alinear items center Entonces los elementos se colocan en el centro de la página. Y ahora voy a cuidar los antecedentes. Como recuerdas, creamos un elemento div vacío para el fondo. Sigamos adelante y seleccionemos elementos. En primer lugar, voy a definir su anchura y altura. Hagamos que ambos sean cien por ciento, y también hagamos que la posición sea absoluta. A continuación, voy a definir los antecedentes. Estoy en una imagen a pantalla completa. En las secciones anteriores, asignamos los antecedentes a esta sección raperos. Pero en este caso, vamos a usar un efecto de desenfoque. Y si hacemos eso para el envoltorio de sección entonces todos los elementos incluidos quedarán borrosos Entonces por eso usamos un elemento adicional. Sigamos adelante y definamos los antecedentes. Voy a usar gradiente lineal. Con valores RGBA. Me refiero al color negro, pero la opacidad, 0.8 y el primer color, y luego 0.7 y el segundo A continuación, especifiquemos la parte de la imagen. Voy a seleccionar imagen llamada sección para PNG o JPEG. Entonces necesitamos centro y no repetir. También. Vamos a establecer el tamaño del fondo a cubrir. Entonces aquí tenemos la imagen de fondo, pero como puedes ver, el resto de los elementos están ocultos porque terminaron detrás del fondo. Para arreglarlo, sigamos adelante y usemos la propiedad z-index Voy a ponerla en el valor negativo, digamos menos uno. ¿Bien? Entonces, finalmente, tenemos que difuminar el fondo. Para eso. Voy a usar una de estas propiedades CSS llamada filter. Entonces tenemos que asignarle una función llamada bluer. Y luego como el valor, vamos a instituir puntos por rampa. ¿Bien? Entonces como puedes ver, el fondo tiene un efecto de desenfoque. Pero tenemos aquí un pequeño problema. Si miras los bordes de esta acción, entonces verás que no están borrosos Entonces voy a aumentar ligeramente el ancho y alto de esta sección. Ahora mismo. Ellos son iguales al 100 por ciento y voy a hacerlos 110% Bien, así que veamos los antecedentes. Sigamos adelante y pasemos al rumbo. Seleccionemos estos elementos. En primer lugar, voy a aumentar el tamaño de la fuente. Hagámoslo diez RAM Luego haga el impuesto un poco más ligero usando font-weight 300 Además, alineemos el texto en el centro usando text-align Entonces voy a crear espacio en la parte inferior del encabezado usando margen inferior con el valor siete RAM. También cambia el color. Aquí se ve el color rojo. Estoy en D5 con cuatro ceros. Y por último, voy a desactivar la selección de usuarios. Vamos a usar la selección de usuario con el valor none. Entonces el rumbo se ve bien. Y antes de terminar esta sección, voy a personalizar ligeramente la imagen. Vamos a crear un borde alrededor de la imagen que se le asignó, 0.1 redondo, sólido y el color blanco. Entonces también, voy a crear algo de espacio dentro de la caja usando relleno. Hagámoslo un rem en los cuatro lados. Y también voy a disminuir ligeramente la opacidad de la imagen. Hagámoslo 0.7. Bien, así que eso es todo sobre la cuarta sección. Es estilizado Y ahora tendremos que pasar a la última sección, que va a ser la foto. Por lo que consiste en una imagen. Además, tenemos algunos datos de contacto y hay un texto de copyright abajo en la parte inferior de la página. Así que sigamos adelante y comencemos a crear un marcado HTML. Voy a crear la lista con la comida de clase o liberada. Te voy a pasar un par de elementos LI. El primer ítem va a ser el contacto. Entonces tendremos Nueva York que alguna dirección, digamos 1049 Stanley Avenue A continuación, voy a poner aquí abierto todos los días. Eso es para el último ítem. Vamos a insertarlo solo con cita previa. Justo después de la lista. Voy a insertar aquí una imagen. Seleccionemos la imagen de la carpeta de imágenes. Va a ser la imagen con el nombre Pie de página, guión IMG punto PNG Y también voy a agregar un atributo de clase con valor footer, IMG A continuación necesitamos crear otra lista. En realidad, voy a copiar la primera lista de aquí, pegarla hacia abajo y cambiar los ítems. Pasemos aquí, conéctate que el número de teléfono. Voy a poner aquí algún número de teléfono ficticio, digamos 516.448.2 Además, voy a poner aquí el número de móvil, digamos 63,174,284.2 A continuación viene el correo electrónico. Pongamos aquí ejemplo en whitehouse.com. Por último, insertemos aquí, únase a nuestra lista de correo. Bien, Finalmente, vamos a crear el párrafo para el texto de copyright, abrir p elementos con los derechos de autor de la clase Después coloca tus derechos de autor, seguido de la entidad HTML5, que va a ser el signo de copyright. Necesitamos ampersand copy, punto y coma. Entonces escribamos tu código y creemos. Y todos los derechos reservados. En este momento esta sección no es visible. Así que sigamos adelante y utilicemos nuevamente la propiedad index. Cambiar el nombre de la clase 4-5. Entonces así es como se ve nuestra nueva sección. Sigamos adelante y personalízalo. En primer lugar, voy a configurar la imagen de fondo a pantalla completa Así que vamos a seleccionar el envoltorio, luego definir el fondo. En realidad, voy a copiar este código de aquí. Cambiemos los valores RGBA. Me refiero a los valores de la opacidad que necesitamos aquí, 0.7 y luego 0.5 También cambia el nombre de la imagen. Tenemos que usar la Sección cinco, BG. Bien, a continuación voy a colocar todos los elementos en el centro de la página Entonces usemos flexbox. Voy a hacer el contenedor flex wrapper. Entonces con el fin de centrar los elementos perfectamente horizontal y verticalmente, vamos a utilizar un centro de línea de elementos y justificar el centro de contenido. Bien, sigamos adelante y personalicemos lo menos. Me refiero a los elementos de la lista. Así que vamos a seleccionar los elementos LI. En primer lugar, voy a aumentar el tamaño de la fuente. Hagámoslo correr. Después cambia el peso de la fuente. Vamos a usar aquí 700. A continuación voy a crear algún espacio entre las letras con el valor 0.1 RAM. Cambiar el color, hacerlos más claros usando el color d, d, d. y finalmente crear este espacio en la parte superior e inferior de los elementos usando margen con los valores una RAM y celda cero, elementos de la lista son personalizados. Quiero cambiar ligeramente el estilo de los primeros elementos de la lista. Y para poder seleccionarlos, voy a usar una de las pseudo clases CSS se llama primero-hijo Así que vamos a seleccionarlo primero, los elementos LI unidos a él, primera pseudo-clase hijo Entonces voy a hacer el texto en mayúsculas y también cambiar el color Usa aquí, blanco. Eso es todo sobre la lista. Sigamos adelante y personalicemos la imagen. Selecciónelo. En primer lugar, definamos el ancho, hazlo 60 RAM. Entonces voy a crear espacio en los lados izquierdo y derecho de la imagen usando margen cuyos valores 0.20 RAM Y finalmente ha disminuido ligeramente la opacidad lo hacen 0.9 Bien, veamos sobre la imagen. Y el último elemento que necesitamos estilizar va a ser el párrafo. Así que vamos a seleccionarlo. En primer lugar, hacer que su posición sea absoluta, y también colocarla en la parte inferior de la página utilizando comprada alguna propiedad que devaluamos a Ram Además de eso, voy a aumentar el tamaño de la fuente, hacerla a Ram. También cambia el peso de la fuente. Voy a fijarlo en 600. Después a continuación tenemos el centro de alineación de texto. También cambia el color del texto, hazlo ligero usando E. Y finalmente, crea algo de espacio entre las letras usando el espaciado entre letras con el punto de valor para envolver. Bien, entonces esta sección cinco está lista y pasemos a la siguiente parte de nuestro proyecto. 84. Proyecto 9 - Crea y estiliza la barra navar y crea barras de progreso: A continuación, lo vamos a hacer es crear una navegación. También la barra de progreso y las flechas en el lado izquierdo y derecho de la página. Todos estos elementos tendrán una posición fija y se mostrarán en las cinco páginas. Sigamos adelante y comencemos a crear el marcado HTML. Voy a colocar esos elementos al principio en el contenedor. Así que vamos a abrir elementos div con una barra de navegación de clase. Navbar tendremos un logo y la lista de los elementos de navegación Así que vamos a insertar un elemento de enlace con el enlace del logotipo de la clase que voy a insertar aquí y la imagen. Seleccionemos logo punto PNG de la carpeta de imágenes. Además, voy a asignar al atributo alt logo. Y finalmente, agreguemos un atributo de clase con un logotipo de valor. Después de eso, voy a abrir la etiqueta nav con el nombre de la clase ahora al menos. Entonces, en general, tendremos cinco elementos de navegación diferentes. Vamos a abrir la etiqueta de enlace con el enlace de navegación de clase. El primer elemento de navegación va a ser el hogar. Entonces dupliquemos este ítem cuatro veces y luego cambiemos el contenido. El segundo va a ser viñedos. Que, uvas que vino. Y para el último ítem, quiero insertar contenido. Bien, entonces aquí tenemos un logo y los elementos de navegación. Antes de crear el resto de los elementos, agreguemos primero estilo a la navegación. Voy a seleccionar el elemento div con la barra de navegación de clase. Como decíamos, se va a arreglar. Entonces ahora mismo la barra de navegación ya no es visible porque ha terminado detrás del filtro Voy a solucionar ese problema usando la propiedad z-index Ahora para que sea factible, sigamos adelante y le agreguemos algunos estilos más. Voy a hacer su ancho cien por ciento. En realidad, creo que sería mejor que disminuyéramos el tamaño de la imagen. Es bastante más grande. Ahora, definamos la altura y hagamos que sea seis rampa. Ahora se ve mucho mejor y voy a colocar la barra de navegación ligeramente hacia abajo. Voy a hacer eso usando la propiedad superior. Vamos a establecerlo en una rep. Y además de eso, voy a usar aquí Flexbox. Hagamos que el contenedor navbar flex usando display flex. Además, voy a crear espacio entre el logotipo y la lista usando justificar el espacio de contenido de manera uniforme. Y finalmente, usemos align items center para centrar los artículos verticalmente. Bien, eso es todo, sobre suficiente barra. Sigamos adelante y personalicemos al novelista. Seleccionemos este elemento. Voy a convertirlo en un contenedor flex usando display flex. Y entonces necesitamos justify-content center. Bien, sigamos adelante y diseñemos los elementos de navegación. Voy a seleccionar el elemento link, que tiene className nav link En primer lugar, hagamos que el tamaño de fuente 1.5 RAM, y también cambiemos el color, hágalo blanco. Después de eso, aumentemos el ancho. Hagámoslo 15 RAM. También crea algo de espacio en los lados izquierdo y derecho usando margen. Voy a ponerla a cero ya que arriba y abajo. En cuanto a los lados izquierdo y derecho, hagamos margen. Hacemos rampa. Además, voy a poner el texto en mayúscula. Bien, así que los artículos se ven bien. Y a continuación les voy a sumar las fronteras. Entonces usemos border con los valores punto 1 g, sólido, y los llamas blancos. Como veis, tenemos que colocar los artículos en el centro. Para eso, voy a usar el centro de alineación de texto. También crea un poco de espacio dentro de la caja usando relleno. Voy a hacer un punto para carnero en la parte superior e inferior. En cuanto a los lados izquierdo y derecho, hagamos que sea cero. Y finalmente, crear algún espacio entre las letras usando el espaciado entre letras con el valor 0.1 rep. Bien, entonces los elementos de navegación están estilizados Y a continuación voy a crear un efecto hover. Echemos un vistazo a la versión terminada del proyecto. Así que una vez que pasemos el cursor sobre los artículos que esta cajita roja se moverá de izquierda a derecha En realidad va a ser el pseudo elemento antes Así que sigamos adelante y seleccionemos enlace de navegación con los pseudo elementos antes En primer lugar, voy a vaciar su contenido, luego hacer que su posición sea absoluta. También, voy a asignar al elemento link posicionamiento relativo porque necesitamos posicionar elemento de acuerdo a su padre, que en este caso es link. Después de eso, hagamos visible el elemento. Voy a definir la anchura y la altura. Vamos a establecer el ancho al 150 por ciento. En cuanto a la altura, voy a hacerla cinco rem. Y también cambiar el color de fondo. Voy a usar aquí. Color rojo. Digo, D5 con cuatro ceros Entonces así es como lo hacía antes ver el elemento se ve ahora mismo, cambiemos su posición izquierda. Voy a lograrlo -20 por ciento. Y también necesitamos girarlo y moverlo ligeramente, horizontalmente, es decir, según el eje x Entonces voy a usar Transformar con las funciones rotate y translate x. Voy a pasar aquí -40 grados como el valor de la función de voltaje. Como probablemente traducir x función. Voy a mover los elementos con menos 4M. ¿Bien? Entonces los elementos se rotan, pero esa no es la posición perfecta. Ahora mismo. Se transforman desde el centro. Estoy en, el origen de la transformación está centrado. Y lo voy a cambiar y hacer que quede abajo. Así que tuvimos que usar una de estas propiedades CSS llamada transform origin. Y tenemos que asignarle abajo izquierdo. Y finalmente, vamos a disminuir la opacidad. Voy a hacer que sea 0.8. ¿Bien? Entonces eso es todo antes pseudo elemento en este momento. A continuación, voy a crear el efecto hover. Quiero moverlo de izquierda a derecha. Así que sigamos adelante y seleccionemos el elemento link con hover y también con los pseudo elementos before Definamos la posición izquierda y hagamos que sea 110 por ciento. Además de eso, con el fin de hacer el modelo de efectos, vamos a usar la transición con el valor es el extremo izquierdo 0.3 s. así que una vez que pasamos cursor sobre el item stand antes pseudo elemento se moverá de izquierda a derecha Lo último que hay que hacer es ocultar la parte exterior de los elementos. Y en realidad voy a hacer eso usando desbordamiento oculto. Bien, así que ahora todo funciona a la perfección. Y en realidad con la barra de navegación, ya terminamos. Sigamos adelante y nos ocupemos de las flechas. En primer lugar, voy a crear el marcado HTML. Vamos a abrir la etiqueta de botón con la página de clase btn. Va a ser la clase común para ambos botones. Y también voy a usar aquí otra clase izquierda btn para algunos individuos de mosqueado A continuación voy a insertar tu imagen. Seleccionemos flecha punto PNG de la carpeta de imágenes. Entonces voy a duplicar el botón. Cambiemos el nombre de la clase que necesitamos aquí, ¿verdad? Btn. Vamos a tirar de la imagen que voy a usar aquí, la misma imagen. Simplemente rotaremos ambas imágenes para las direcciones adecuadas. Bien, entonces aquí tenemos las flechas. Sigamos adelante y personalízalos. Voy a seleccionar ambos botones con la página de clase Como, BTN Vamos a arreglar la posición del botón. Y también, necesitamos usar aquí el índice Z para que las flechas sean factibles. Entonces ahora mismo los botones se colocan en la esquina superior izquierda de la página Voy a colocarlos en el centro de la página. Es decir, para centrarlos verticalmente. Para eso, usemos top position y hagamos que sea 50 por ciento. Y también voy a usar Transform con la función translate y. Vamos a insertar aquí -50%. Nos permitirá enviar al elemento perfectamente según la dirección vertical. Bien, después de eso, vamos a deshacernos del fondo predeterminado y el borde del botón Así que hagamos transparente el color de fondo. Y también para deshacernos de la frontera por defecto, tenemos que usar border none. Bien, eso es lo del botón. Sigamos adelante y personalicemos las imágenes. Vamos a seleccionarlos. En primer lugar, definamos el ancho, hazlo para RAM. También, voy a disminuir la opacidad, hacerla 0.4. Y por último, hagamos el puntero del cursor Bien, así las imágenes están personalizadas. Ahora tenemos que colocarlos en los lados izquierdo y derecho. Así que primero vamos a seleccionar una flecha izquierda. Voy a definir su posición izquierda. Hagámoslo para RAM. Después después de eso, voy a seleccionar la propia imagen. Me refiero a la imagen de la izquierda. Necesitamos rotar la imagen 90 grados. Entonces necesitamos transformar, rotar. Y pasemos aquí -90 grados. Entonces como puedes ver, la flecha izquierda se coloca de la manera correcta. Sigamos adelante y hagamos lo mismo la flecha derecha también. En realidad, voy a duplicar este código aquí y luego cambiar los nombres de clase que necesitamos, ¿verdad? También necesitamos aquí a la derecha en lugar de la posición izquierda. Y finalmente, cambiar el valor de la función rotate. Necesitamos 90 grados en lugar de -90 grados. Bien, así que con las flechas ya casi terminamos. Lo único que voy a hacer es crear un pequeño efecto hover En realidad, quiero aumentar la opacidad al hover. Sigamos adelante y seleccionemos Imagen con hover. Después asignado a su opacidad con el valor uno. Y también, voy a usar transición con opacidad 0.2 s. bien, así que con las flechas ya terminamos A continuación, tenemos que seguir adelante y crear una barra de progreso. Al principio, como es habitual, crear un marcado HTML Vamos a abrir el desarrollo con el envoltorio de progreso de clase. A continuación voy a abrir otra etiqueta div, que incluirá los números de página. Vamos a asignarle un progreso de clase. Y luego dentro de él, vamos a insertar el elemento de encabezado H2. Por defecto, voy a pasar aquí una barra cinco. ¿Bien? Después de eso, voy a crear los círculos. Vamos a abrir la etiqueta div, que va a ser la envoltura. Se asigna a cada envoltorio de círculo de clase. Y luego comamos. Y aquí un elemento div vacío con clase es circle y circle one. Después duplique esta línea de código cuatro veces y cambie las clases. Necesitamos los números 2-5. Bien, Entonces el marcado de la barra de progreso está listo, y ahora tenemos que personalizarlo. Voy a empezar con el envoltorio. Seleccionemos envoltorio de progreso y antes que nada, hagamos su posición fija. Por lo que la barra de progreso no es visible porque al igual que los elementos anteriores, ha terminado detrás del pie de página. Arreglemos eso nuevamente usando la propiedad índice Z. Hagámoslo 100. Bien, entonces ahora es visible. Definamos esta posición. Voy a colocarlo abajo en la esquina inferior izquierda de la página. Entonces necesitamos aquí propiedad inferior con el valor dos rem. Y también dejó propiedad con el valor de tres vueltas. Bien, después de eso, vamos a personalizar el encabezado. Vamos a seleccionarlo. En primer lugar, voy a cambiar el tamaño de la fuente. Hagámoslo 2.5 RAM. Además, voy a hacer que el encabezado sea un poco más ligero usando el peso de la fuente con un valor de 300. Y luego cambia el color, hazlo blanco. Bien, entonces el encabezado está estilizado. Sigamos adelante y pasemos a los círculos. Vamos a seleccionarlos usando el círculo de clase común. En primer lugar, definamos el ancho y la altura. Voy a hacer de ambos una RAM. Y luego les voy a asignar borde con los valores 0.1 RAM sólida y el color blanco. Bien, entonces ahora los elementos son visibles, pero no tienen la forma del círculo. Para hacerlos los círculos, usemos border-radius con valor 50 por ciento ¿Bien? Ahora tenemos círculos. En este momento, se colocan verticalmente en una columna. Necesitamos alinearlos horizontalmente. Y para eso, usemos flexbox. Voy a seleccionar envoltorio de círculo y luego asignarle display flex. A continuación, vamos a crear algo de espacio entre los círculos. Voy a usar margen. Hagamos que sea cero en la parte superior e inferior. Y luego 0.3 rampa en lados izquierdo y derecho. Después de eso, voy a crear algo de espacio en la parte superior e inferior de los elementos del encabezado. Y también quiero colocarlo en el centro. Así que sigamos adelante y seleccionemos Es div envoltorio con el progreso de la clase. Después asignarle margen, establecerlo en un rem en la parte superior e inferior, y luego usar cero para los lados izquierdo y derecho. Y también, voy a usar texto alinear con el centro de valores. Bien, entonces ahora mismo con una barra de progreso, ya terminamos. Lo haremos funcionar usando JavaScript más adelante. 85. Proyecto 9 - Crea efecto de desplazamiento horizontal con JavaScript: Bien, Entonces con el estilo, estamos hechos las cinco páginas o una personalizada, y ahora es el momento de usar JavaScript y hacer nuestro proyecto dynam este momento, el filtro se muestra en la página y el resto de las secciones se colocan detrás de ella. Voy a poner las páginas en orden desde la primera página, tirar la última. Y lo voy a hacer usando la propiedad z-index. Cambiemos el nombre de la clase. Necesitamos la Sección uno en vez de esta sección cinco. Después copia este código y pegarlo para el resto de las secciones. Para la segunda sección, voy a hacer la propiedad z-index 40 Entonces para la tercera sección, va a ser tan t. A continuación tenemos la cuarta sección. Necesitamos aquí 20. Y por último, para la Sección cinco, hagamos que el índice sea igual a diez. Entonces todo está en orden y podemos empezar a escribir JavaScript. Antes de eso, voy a recordarles lo que vamos a hacer y cómo están terminados los trabajos del proyecto. Por lo que estas secciones se colocan una encima de la otra en orden. Vemos aquí la primera sección por defecto. Y una vez que nos desplazemos hacia abajo, entonces navegaremos a la siguiente sección. Pasaremos por el filtro. Y luego si volvemos a desplazarnos hacia abajo, nos pondremos en la primera página. Además de desplazarnos, también podemos navegar a las diferentes secciones por esos controles Bien, así que todas esas cosas se programarán con JavaScript. Y lo primero que voy a hacer es adjuntar un oyente de eventos al objeto de ventana global y usar uno de los eventos llamado la Rueda Este evento será despedido una vez que movemos la voluntad del ratón. Así que vamos a adjuntar a la ventana. En el oyente de eventos. Se deben tomar dos argumentos. El primero va a ser el evento. Como dijimos, necesitamos usar rueda. En cuanto al segundo argumento, va a ser la función callback Voy a pasar tu objeto de evento. Y luego vamos a ejecutarlo a la consola. Una vez que nos desplazemos por la página, entonces obtendremos el evento de rueda en la consola. Si lo dejé caer, aquí encontrarás un par de propiedades diferentes. Y en realidad nos interesa la propiedad llamada delta y. ahorita, equivale a cien. Significa que desplazamos la página hacia abajo. Y si me desplazo hacia arriba y verifico el valor de delta y propiedad, que debería ser igual a -100 Entonces usaremos esta propiedad para lograr navegar entre las diferentes páginas cuando desplazemos la página hacia arriba o hacia abajo. Bien, entonces si el valor de delta y property es positivo, entonces tenemos que navegar a la siguiente página Y si es negativo, entonces tenemos que ir a la página anterior. O sea, desplazándose hacia el lado derecho o el lado izquierdo. Tenemos que verificar si delta y es mayor que cero. A continuación, voy a crear una nueva variable que va a ser el contador. Nos ayudará a definir qué sección se está mostrando actualmente. Por defecto, voy a ponerla a cero. Entonces, si esta condición es cierta, entonces necesitamos aumentar el contador en uno. Para eso, voy a usar operador de incremento, que se expresa por signos dobles más Si la condición es falsa, entonces tenemos que disminuir el contador en uno. Entonces tenemos que usar declaraciones else. Tenemos que pasar tu contador con doble signo menos. Y por último, vamos a ejecutar el contador a la consola. Entonces una vez que nos desplazemos hacia abajo, entonces el contador aumentará en uno. Y si me desplazo hacia arriba, entonces disminuirá en uno. Bien, así que basándonos en esa lógica, podemos navegar a las diferentes secciones Y para eso tenemos que seleccionar elementos de sección. Voy a usar el método selector de consultas como el valor del nombre de la clase. Voy a pasar aquí lo siguiente. Vamos a usar backticks. Entonces voy a pasar tu sección. Como recuerdas, cada sección tiene un className con el número adecuado Sección uno, sección dos, y así sucesivamente. Y como el número de esta sección, tenemos que usar un contador Bien, así que una vez seleccionada esta sección, entonces tenemos que cambiar su estilo. Es decir, tenemos que mover esta sección hacia el lado izquierdo por cien de ancho de ventana gráfica Entonces necesitamos estilo punto a izquierda y tenemos que establecerlo en -100 ancho de ventana gráfica Bien, entonces si me desplazo hacia abajo, entonces navegaremos a las diferentes páginas. Una vez que lleguemos al pie de página y volvamos a desplazarnos, entonces obtendremos el fondo blanco. En realidad es el contenedor. Y en el siguiente scroll obtendremos un error porque no tenemos una sección dentro del número seis. Además de eso, veo aquí la parte de la sección cuatro, como ustedes saben, el ancho de su fondo borroso es igual al 110 por ciento Entonces para ocultar esta parte, aquí, tenemos que usar overflow hidden, y tenemos que asignarlo a esta sección. Y también para hacer este modelo de efectos de color, usemos la transición con los valores de la izquierda y 1.5 s. así que ahora tenemos un efecto de desplazamiento mucho más agradable Bien, así que ahora mismo podemos desplazarnos hacia abajo en la página, pero no podemos desplazarnos hacia arriba. Para lograrlo, voy a usar alguna lógica. Si el valor de la propiedad delta y es 100, entonces tenemos que desplazarnos hacia abajo. Y si equivale a -100, entonces tenemos que desplazarnos hacia arriba. Entonces, en lugar de solo menos cien de ancho de ventana gráfica, vamos a abrir backticks Luego use el signo de dólar con las llaves de código. Entonces tenemos que verificar si el delta y es positivo o negativo. Aquí necesitamos la misma condición. Estoy en la condición que usamos en la declaración if. Y en realidad sería mejor si almacenamos esta condición en la variable y luego usamos esta variable. Así que vamos a crear una constante delta y. y asignado a ella E punto delta y es mayor que cero. Que usen esta variable en la sentencia if. Y también pásalo aquí abajo. Entonces, si esto es cierto, entonces tenemos que mover esta sección hacia el lado izquierdo por -100 de ancho de ventana gráfica Y si es falso, entonces necesitamos cero. Entonces, si me desplazo hacia abajo y luego trato desplazarme hacia arriba, funcionará. Pero con un pequeño problema. Como ve, no podemos navegar a la página anterior. Cuando nos desplazamos hacia arriba, se omite la página anterior. Ocurre porque cuando nos desplazamos hacia abajo, el contador se incrementa en uno. Y una vez que nos desplazamos hacia arriba, entonces se disminuye. Tenemos que mantener su último valor. Entonces con un solo contador, no podemos lograrlo. Entonces voy a crear otro contador. Bueno, sigamos adelante y cambiemos el nombre de este contador, que sea contador uno. Después duplique esta línea de código. Voy a llamar a esta variable contador a. Y luego pongámoslo en uno. Después de eso, usemos este contador y la declaración FL también. Bien, vamos a correr por el contador de consola uno, encontrarnos con dos. Y en lugar de solo el mostrador, tenemos que verificar el mismo estado. O sea, si delta y es positivo o negativo. Entonces, si es cierto, entonces deberíamos usar el contador uno. Y si es falso, que significa que nos desplazamos hacia arriba, entonces necesitamos usar counter to Entonces ahora si me desplazo hacia abajo o hacia arriba, todo va a funcionar bien hasta que lleguemos al pie de página y volvamos a desplazarnos hacia arriba. Así como llegamos a la primera página y nos desplazamos hacia arriba. Bien, así que ahora vamos a solucionar esos problemas con dos declaraciones if diferentes Una vez que llegamos al filtro y nos desplazamos hacia abajo, tenemos que mostrar la primera página. Y también todas las demás secciones deben estar alineadas una encima de la otra, como es en el caso predeterminado. En primer lugar, sigamos adelante y seleccionemos todas estas secciones. Voy a almacenarlos en una variable, llamémoslo secciones. Para poder seleccionar todas estas secciones, voy a usar el método selector de consultas all. Pasemos aquí la sección de nombre de etiqueta. Entonces, si el contador uno es igual a cinco, entonces significa que el pie de página se está mostrando y ya no necesitamos desplazarnos por esta página. Tenemos que mirar a través de estos tramos y hacer que su posición izquierda sea cero. Además de eso, tenemos que reiniciar ambos contadores. Quiero decir, tenemos que ponerlos a ambos a sus valores predeterminados. Así que vamos a seguir adelante y crear la declaración if como condición. Tenemos que contrarrestar uno triple equivale a cinco A continuación tenemos que mirar a través de estas secciones. Como ya sabéis, cuando usamos query selector all method, entonces devuelve node list y tenemos que transformarlo en una matriz. Para ello, vamos a usar array from method. Con el fin de mirar a través de estas secciones matriz, voy a utilizar uno de los métodos de ayuda de matriz llamados para cada uno. Entonces tenemos que pasar una función de devolución de llamada, que tomará un parámetro y va a ser el elemento actual en la matriz Estoy en la sección actual. Como decíamos, tenemos que hacer una posición izquierda cero para todos los tramos. Entonces por lo tanto tenemos que usar tu sección estilo punto punto a la izquierda, y tenemos que hacerlo cero. Además, tenemos que restablecer ambos contadores. Es decir, tenemos que poner el contador uno a cero y el contador a uno. Y finalmente, voy a usar una sentencia return que nos permitirá terminar la ejecución de cualquier otro código en esta función. Bien, así que si me desplazo hacia abajo y llego al pie de página, verás que el contador uno es igual a cuatro Y en el siguiente pergamino, la condición en la declaración if será verdadera. Navegaremos a la primera página y todas las demás páginas estarán alineadas como es en el caso predeterminado. Bien, entonces el primer problema está arreglado. A continuación, tenemos que encargarnos del segundo tema. Es decir, cuando se muestra la primera página y nos desplazamos hacia arriba, entonces obtendríamos un error que decía que no se puede leer el estilo de propiedad de null. Bien, entonces ahora tenemos que revisar el caso cuando el contador uno es igual a menos uno. En ese caso, tenemos que mover todas estas secciones al lado izquierdo por -100 de ancho de ventana gráfica, Tenemos que mostrar la foto Así que vamos a crear otra declaración if. Entonces tenemos que verificar si el contador uno es igual a menos uno. Si es cierto, tenemos que mirar a través de la lista de estas secciones. Entonces tenemos que dar todas las secciones excepto esta sección cinco, una posición a la izquierda con el valor -100 viewport width Así que al principio, voy a transformar secciones en una matriz usando array dot from method. Pasemos tus secciones. Luego use forEach método. Tenemos que pasar tu función de devolución con la sección de argumentos, que va a ser el ítem actual, me refiero a la sección actual Entonces como decíamos, tenemos que hacer la última posición -100 de ancho de ventana gráfica para todas estas secciones excepto las segundas cinco adelante y usemos aquí otra sentencia if donde tenemos que verificar si el nombre de primera clase del ítem actual en la matriz es igual a la sección cinco, necesitamos la sección lista de clases de punto Y tenemos que especificar aquí el número de índice cero se refiere al nombre de la primera clase. Entonces necesitamos triple es igual a la sección cinco. Entonces, si esta condición es verdadera, entonces tenemos que terminar la ejecución de esta función mediante el uso de la sentencia return. En todos los demás casos, tenemos que hacer la posición izquierda de esta acción -100 ancho de ventana gráfica Así que necesitamos seccionar punto estilo punto izquierda igual a -100 ancho de ventana gráfica Y además de eso, tenemos que poner el contador uno a cuatro, N contrarrestó dos a cinco porque en ese caso, pie de página estará mostrando en la página Entonces, si probamos, entonces verás que todo funciona bien. 86. Proyecto 9 - Haz que la barra de progreso funcione con JavaScript: Bien, así que una vez que logramos desplazar las páginas a continuación, voy a seguir adelante y empezar a trabajar en la barra de progreso, que se coloca en la esquina inferior izquierda Y ahora mismo no hace nada. Por lo que la barra de progreso, debería mostrar qué página se está mostrando actualmente y también se debe resaltar el círculo apropiado. Sigamos adelante y creamos una función. Voy a llamarlo contador de progreso. Entonces tenemos que hacer dos cosas. Tenemos que hacer que este rubro dinámico y también tenemos que cuidar estos círculos. Primero voy a trabajar en el rubro. Sigamos adelante y seleccionemos estos elementos. Voy a almacenarlo a la variable llamada progreso. Seleccionemos elementos usando el método QuerySelector. Pasa el progreso de tu clase seguido del nombre de la etiqueta H2. Por lo que necesitamos cambiar el contenido de la rúbrica como el lado derecho de la misma. Voy a usar contador a porque está comenzando con uno y pasa por cinco. En cuanto a la segunda parte va a ser la longitud de estas secciones lista. Entonces para cambiar el contenido del elemento, voy a usar una de las propiedades llamadas text content. Aquí necesitamos, avanzar. Dot contenido de texto que abrir aquí. Backticks, seguidos por el signo del dólar y las llaves de colores Como dijimos, vamos a usar contador para luego cortar. Y pasemos aquí secciones de longitud de punto. Entonces tenemos que llamar a esta función dentro de aquí. En cambio contador de progreso. Y también tenemos que llamarlo dentro de las declaraciones if. Entonces, como puedes ver, la primera parte de nuestra barra de progreso funciona perfectamente. Bien, veamos sobre el rumbo. Pasemos a los círculos. En primer lugar, voy a seleccionarlos. Vamos a crear círculos variables y luego seleccionar todos los círculos usando el método QuerySelector all Voy a pasar aquí claseName circle. Entonces vamos a mirar a través de estos círculos y asignarles un color de fondo transparente. Entonces una vez que nos desplazemos, el círculo apropiado obtendrá un fondo diferente. En este caso, vamos a utilizar, nuevo contar hasta dos. En primer lugar, se transforma círculos en la matriz usando array from method. Pasemos aquí los círculos y luego utilícelos para cada ayudante de matriz. Tenemos dos rutas aquí, función de devolución de llamada con el elemento actual de la matriz, quiero decir círculo Y luego como bloque de código, necesitamos cambiar el color de fondo y hacerlo transparente. Entonces necesitamos círculo punto, estilo, punto, color de fondo transparente. Bien, a continuación tenemos que cambiar el color de fondo para el círculo adecuado. Así que sigamos adelante y seleccionemos círculo. Necesitamos consulta de punto de documento, selector. Entonces abre aquí backticks. Porque necesitamos definir el número del círculo. Necesitamos signo de dólar, llaves rizadas. Y otra vez, contrario a. Después de eso, sigamos adelante y cambiemos el color de fondo. Necesitamos estilo punto color de fondo. Hagámoslo gris claro usando la D. Bien, así que si me desplazo se cambiará el color de fondo para los círculos Pero en realidad tenemos aquí un pequeño problema. Si vuelvo a cargar la página, entonces el primer círculo no tendrá ningún fondo Entonces tenemos que definirlo manualmente. Vamos al archivo style.css y seleccionemos el primer círculo y hagamos que sea color de fondo. Además de eso, voy a usar transición con color de fondo y con la duración 0.3 s. bien, así que ahora todo funciona bien Y con la barra de progreso, ya terminamos. A continuación, voy a seguir adelante y encargarme de los controles. En primer lugar, sigamos adelante y seleccionemos ambos botones y adjuntamos a ellos, los oyentes de eventos con un evento click Voy a empezar con el botón izquierdo. Vamos a utilizar de nuevo el método QuerySelector con un nombre de clase a la izquierda btn y adjunto a él Add event, listener con click event y Voy a duplicar este código y cambiar a la izquierda por la derecha. Bien, así que una vez que hacemos clic en el botón izquierdo, tenemos que disminuir ambos contadores en uno Y en caso del botón derecho, necesitamos aumentarlos en uno. Entonces necesitamos aquí el contador uno, menos, menos y luego contrarrestar a con otra vez los signos dobles menos. En el caso del botón derecho, necesitamos ambos contadores con signos más más. Para navegar a las diferentes páginas, tenemos que cambiar la posición de plomo para estas acciones. Entonces, en caso del botón izquierdo, definiremos los números de sección usando counter to. En cuanto al botón derecho necesitaremos contador uno. Así que vamos a escribir el selector de consulta de punto de documento. Después abre hacia atrás ticks y sección insegura como el número de esta sección Vamos a usar contador a. A continuación, tenemos que definir la posición izquierda y tenemos que hacerla cero. Agarremos este código, lo peguemos aquí abajo, cambiemos el contador por el contador uno. Y también hacer posición izquierda -100 ancho de ventana gráfica. Bien, así que si hago clic en las flechas, entonces navegaremos a diferentes secciones Y una vez que lleguemos al pie de página y volvamos a hacer clic, nos enfrentaremos a los mismos problemas que tuvimos en caso de evento de rueda. Lo mismo sucederá si hacemos clic a la flecha izquierda cuando se está mostrando la primera página. Entonces, para solucionar esos problemas, tenemos que volver a usar declaraciones IF. Y para evitar usarlos dos veces, voy a crear una función y vamos a llamar a esta función varias veces. Así que vamos a crear una función dentro de un controlador de página. Entonces voy a agarrar ambas declaraciones if de aquí y pegarlas dentro de la función del controlador de página. Además, necesitamos llamar a la función de contador de progreso. Entonces ahora podemos llamar a esta función dentro de un evento de voluntad. Y podemos deshacernos de ambas declaraciones si. Entonces como puedes ver, todo sigue funcionando bien. En realidad, si nos desplazamos hacia abajo, quiero decir, si usamos la rueda de boca y alcanzamos al pie de página, entonces en el siguiente scroll, obtendremos un error diciendo que no se puede leer el estilo de propiedad de null. Sucede porque en la última llamada, si la sentencia se ejecutó dentro de la función del controlador de página, hizo el contador cero. No tenemos sección con este número y por lo tanto tenemos un error. Entonces cuando sucede, quiero decir, cuando se ejecuta una de las sentencias if, entonces no queremos ejecutar este código. Bien, así que para solucionarlo, necesitamos devolver un valor booleano de la función del controlador de página Para ello, vamos a crear una nueva variable fuera de la función. Voy a llamarlo Bu. Y eso se le asigna a través de. Entonces tenemos que establecer esta variable en true dentro de la función. En este caso, en cada ejecución de la función, Boolean se actualiza a true Pero si se ejecuta la sentencia if, entonces tenemos que establecer Boolean Tenemos que hacer eso en ambas declaraciones if. Y por último, tenemos que devolver el propio booleano. Entonces como ya dijimos, tenemos que ejecutar este código, quiere que el booleano sea cierto Entonces necesitamos aquí pool seguido de la lógica y operador. Entonces ahora si nos desplazamos, entonces verás que todo funciona bien y ya no tenemos ningún error. Bien, volvamos a los controles. Tenemos que llamar a la función de controlador de página en cada clic. Pero necesitamos aquí una declaración condicional. Si la función del controlador de página devuelve true, entonces necesitamos ejecutar este código aquí. Y si devuelve false, entonces solo se ejecutará esta función, cual es completamente suficiente. Entonces necesitamos aquí controlador de página, seguido del lógico y operador Bien, vamos a comprobar si todo funciona bien. Entonces podemos ver que los controles funcionan perfectamente. Bien, así que con los controles se hicieron una x. voy a encargarme de la tercera sección Si echas un vistazo al proyecto terminado, encontrarás que aquí tenemos un bonito efecto hover Vamos a crear este efecto usando CSS y JavaScript. Así que vamos al archivo style.css y asignemos a la sección tres color de fondo negro. Entonces voy a seleccionar imagen de tumbas con hover. Y voy a hacer de su opacidad una. Y también, necesitamos aumentar el tamaño de la imagen usando Transform Scale. Y vamos a insertar aquí también. Además de eso, necesitamos hacer la transición con un valor es todo y 1.5 s. Bien, vamos a comprobar cómo funciona. Entonces, si coloco el cursor sobre la imagen, entonces se hará más grande y la opacidad aumentará Bien, entonces ahora tenemos que cuidar el fondo y tenemos que hacerlo usando JavaScript. Voy a usar mouse over y mouse out eventos. Así que sigamos adelante y seleccionemos la imagen de las uvas. Utilice de nuevo el método selector de consultas. Pasemos tumbas IMG. A continuación, adjunte a un oyente de eventos. Así que una vez que pasamos el ratón sobre la imagen, entonces tenemos que disminuir la opacidad del envoltorio de sección Y cuando salimos del mouse, necesitamos aumentarlo de nuevo a uno. Así que pasemos el mouse sobre el evento de lo que necesitamos la función de flecha. Y como bloque de código, voy a seleccionar envoltura de la Sección tres usando el método QuerySelector Y entonces tenemos que hacer opacidad 0.5. Entonces necesitamos estilizar la opacidad igual a 0.5. Duplicemos este código y cambiemos los eventos que necesitamos aquí, a kilómetros de distancia. Y también necesitamos cambiar la opacidad. Hagámoslo uno. Por último, voy a usar transición para este envoltorio de sección tres, que valora la opacidad y 1.5 s. bien, así como pueden ver, todo funciona Tenemos aquí un bonito efecto hover. En realidad esta sección se está volviendo más oscura porque asignamos a esta sección elementos un color de fondo negro 87. Proyecto 9 - Hacer que responda al proyecto: Bien, así que la mayor parte de nuestro proyecto está hecho. Y a continuación, quiero que nuestro proyecto sea sensible a diferentes tamaños de pantalla. En realidad, no va a ser la última parte de este tutorial porque vamos a agregar un par de cosas más al proyecto. Sigamos adelante y cambiemos al modo de respuesta. El proyecto está construido para pantallas de mayor tamaño. Estoy en la pantalla con 1920 pixeles el ancho, y 1080 pixeles de alto. Entonces el primer punto de interrupción en el que quiero hacer algunos cambios va a ser de 1,600 píxeles Ya he comprobado esos puntos de interrupción, así que no voy a perder tiempo en eso en el video En el punto de ruptura, quiero Personalizar a Secciones. Debe ser el Pie de Página y la segunda sección. Así que vamos a seguir adelante y crear una consulta de medios CSS. A continuación, especifique el ancho máximo como 1,600 píxeles. Entonces primero, voy a Personalizar la segunda sección. Seleccionemos Imagen que navegó hacia atrás y cambiemos su ancho, Hazlo 35 rampa Después selecciona la segunda imagen, que tiene el nombre de la clase botella de vino, y Define su ancho como marca 65. Esa sílaba. La segunda sección, Pasemos al Pie de Página. Voy a disminuir el ancho de la imagen y también el tamaño del margen en los lados izquierdo y derecho. Así que vamos a seleccionar Pie de página IMG conjunto con 245 RAM. En cuanto al margen, hagámoslo 0.12 RAM en los lados izquierdo y derecho Bien, entonces el pie de página se ve bien y hemos terminado con un punto de interrupción El siguiente va a ser de 1,300 pixeles. En ese punto de ruptura, volveremos a encargarnos de esas dos secciones. Así que voy a duplicar este código y simplemente cambiar los valores. Hagamos max-width 1,300 pixeles como el ancho de la vela de vuelta Imagen Inserte aquí en RAM. Después hacer el ancho de botella de vino Imagen 60 RAM. En cuanto a la imagen del pie de página, Hagamos su ancho 35 RAM. En cuanto al margen, hagámoslo diez corrió por los lados izquierdo y derecho. Bien, así que eso es, alrededor de 1,300 pixeles. Ambas Secciones se ven bien. Pasemos al siguiente punto de quiebre. Sólo vamos a ser 1,200 pixeles. Así que sigamos adelante y creamos nueva consulta de medios con ellos, max-width, 1,200 pixeles Entonces lo primero que quiero hacer es disminuir el espacio entre los elementos de navegación. Sigamos adelante y seleccionamos el enlace de navegación y establecemos el margen en 0.1, 0.5 GB de RAM en los lados izquierdo y derecho. Entonces vamos a encargarnos del encabezamiento de la primera sección. Entonces, antes que nada, voy a seleccionar este envoltorio que tiene nombre de clase Sección uno, rumbo caucho. Eso es Make con 80 por ciento. Y luego después de eso, seleccione el propio encabezamiento. Cambia su tamaño de fuente, conviértelo en un terrane Bien, entonces eso es todo sobre la primera sección. Pasemos al segundo. Voy a disminuir los tamaños de esos tres elementos. Me refiero a las imágenes y al fondo. Entonces comencemos con zarpó de regreso. Hagamos su ancho. 25 RAM que voy a seleccionar venta BTN. Voy a cambiar su ancho. Hagámoslo 15 corrieron. Después cambia la altura, ponla en foro. Y también voy a cambiar el tamaño de la fuente. Hagámoslo 1.7 rampa. Y por último, voy a seleccionar botella de vino. Hagamos su ancho. 50 Ran. Bien, eso es. Acerca de la segunda sección. Se ve bien. Y la única página que vamos a Personalizar en el punto de interrupción va a ser Pie Sigamos adelante y seleccionemos Imagen de pie de página. Cambiar su ancho, hazlo 25 RAM En cuanto al margen, voy a hacer que se ejecute 0.7. Bien, así que con 1,200 pixeles, ya terminamos. Estas Secciones se ven y funcionan bien. Entonces tenemos que pasar al siguiente punto de interrupción, que va a ser mil píxeles Entonces, sigamos adelante y creamos nuevos medios y especifiquemos el ancho máximo como mil píxeles En el punto de ruptura, tenemos que hacer un par de cosas. Primero voy a personalizar todas estas secciones excepto la primera. Y luego nos encargaremos de la Navegación. Voy a transformar el Navbar en el menú Hamburguesa Empecemos también con esta sección. Voy a seleccionar la Sección Dos de Goma. este momento las imágenes se colocan horizontalmente en fila y quiero cambiar la dirección de fila a columna. Entonces necesitamos flexionar dirección. Y tenemos que configurarlo para llamarlos. También, voy a cambiar el orden de la venta que se le asigna. Uno. Eso es. Acerca de la segunda sección. Pasemos al siguiente. Como puede ver, necesitamos disminuir el tamaño de los elementos porque son dos más grandes. Voy a comenzar con el epígrafe de la Sección tres. Cambiemos su tamaño de fuente, hagamos que funcione 12. Además, voy a seleccionar imagen de marco. Cambiemos su ancho y hagamos que sea siete para correr. En lo que va de la uva Imagen. Voy a establecer su ancho a 25 corridas. Bien, así que con esta sección tres, ya terminamos. Pasemos a la siguiente sección. Voy a disminuir el tamaño del encabezado así como el tamaño de la imagen. Entonces, seleccionemos el encabezado de la Sección cuatro y hagamos que su tamaño de fuente sea ocho redondo. En cuanto a la nueva imagen de los vinos, hagamos su ancho 60 Ran. Bien, pasemos al Pie de Página. En este momento los elementos se colocan horizontalmente en fila. Y quiero cambiar la dirección y colocarlos en una columna. Y también quiero cambiar un orden de los elementos. Quiero colocar la imagen debajo de esas listas. Así que sigamos adelante y seleccionemos la envoltura de Sección cinco y la columna Make It's flex direction. También seleccione Pie de página IMG. Vamos a establecer su ancho en 20 RAM. Y también cambiar el orden. Voy a ponerla en un extremo. Por último, voy a seleccionar menos Pie de página. Definamos su ancho como 20 RAM. Y también voy a usar margen. Vamos a ponerlo en dos REM en la parte superior y la inferior, y luego R0 en los lados izquierdo y derecho Bien, entonces el Pie de Página es Personalizar y en realidad es el momento de crear un menú Hamburguesa En primer lugar, echemos un vistazo a los proyectos terminados. Voy a inspeccionar la página y cambiar al modo responsive. Entonces, después de mil píxeles, los elementos de navegación ya no son visibles. Y tenemos aquí un ícono de Menú. Si hago clic en él, entonces esas líneas se transformarán en una X y decidirán dónde nos mostraremos desde el lado derecho dentro de los elementos de navegación. Entonces veamos qué vamos a hacer. En primer lugar, vayamos al archivo index.html y creemos el marcado HTML Por lo que el icono Menú se representará como el enlace en el que tendremos tres departamentos como las líneas del icono. Entonces vamos a abrir un elemento con la clase Menú. Entonces voy a insertar desarrollo dentro del enlace. Debe tener dos clases diferentes. El primero va a ser la línea Menú para el estilo común. En cuanto a la segunda va a ser Menú línea uno. Se utilizará para el estilismo individual. Entonces en general vamos a tener tres líneas distintas. Duplicemos esta línea de código dos veces y cambiemos los nombres de las clases. Necesitamos aquí, Menú línea dos y Menú línea tres. Bien, así que al principio tenemos que ocultar el icono por defecto porque no queremos mostrarlo hasta que el tamaño de la pantalla sea inferior a mil píxeles. Así que seleccionemos Menú y asignemos para mostrar ninguno. Bien, Antes de comenzar a Estilo del ícono del Menú, Cuidemos la navegación en sí Voy a construir el Sidebar. Así que sigamos adelante y seleccionemos lista de navegación y hagamos su posición absoluta También Definir las propiedades superior y derecha. Voy a poner la parte superior a la fibrina. En cuanto a la derecha, va a ser cero. También cambia la dirección. Voy a colocar los artículos en una columna. Entonces necesitamos flexionar la dirección de la columna. Entonces, como veo, los elementos de navegación se colocan en el lado derecho en una columna. A continuación, voy a definir la altura de la lista. Voy a usar aquí algún cálculo. Como ustedes saben, establecemos la posición superior a cinco RAM y quiero hacer que la altura de la lista cien viewport height menos cinco ran Para hacer ese cálculo, usemos la función calc Necesitamos aquí cien altura de viewport menos cinco R&. También cambia el color de fondo. Voy a hacerlo gris oscuro usando 333. Bien, así es como se ve la barra lateral en estos momentos. Los elementos de navegación terminaron en el centro, y voy a moverlos hacia arriba para eso, usemos justificar contenidos. Inicio. Y además de eso, voy a crear algún espacio dentro de la lista usando padding value to run. Bien, eso vamos a crear algo de espacio entre los artículos. Y también voy a hacer que la esquina superior izquierda de la Barra lateral sea ligeramente redondeada. Entonces usemos border-radius con valores 0.5 g, seguidos de tres ceros A continuación, seleccione el enlace de navegación y establezca el margen en una corrida. La lista de navegación es Personalizar y ahora es el momento de cuidar el ícono de Menú. Pero antes de eso, quiero colocar el logo en la esquina superior izquierda de la página Para ello, seleccionemos Navbar y asignemos para justificar contenidos Inicio. Y también crear algo de espacio usando relleno a la izquierda con valor para rampa. Bien, eso es todo sobre el logo. Sigamos adelante y comencemos a trabajar en el ícono de Menú. Así que vamos a seleccionarlo. En primer lugar, voy a configurarlo para mostrar bloque, porque como ustedes saben, ahora mismo en este oculto usando display none. A continuación, voy a definir su anchura y altura. Vamos a configurar con dos para RAM. En cuanto a la altura, vamos a hacerla 2.5 rampa. Y por último, haz que el fondo sea de color blanco. Estoy usando este color para hacer visible el icono de Menú. Como ves, el ícono de Menú terminó en la esquina superior izquierda de la página Entonces tenemos que definir su posición. Hagámoslo absoluto. Y luego usa las posiciones superior y derecha. Voy a establecer la posición superior a una RAM. En cuanto a la posición correcta, vamos a hacerla rampa. Bien, entonces ahora el icono se coloca de la manera correcta. Y a continuación tenemos que mostrar las líneas. Así que sigamos adelante y seleccionemos Línea de menú. Es el nombre de clase común para las tres líneas. Vamos a establecer con el 200 por ciento. Entonces. Voy a definir la altura como rampa 0.3 y también definir el color de fondo. Voy a hacerla roja usando D5 y cuatro ceros. Entonces como puedes ver, las líneas son visibles, pero se colocan una encima de la otra. Necesitamos algo de espacio entre ellos. Así que sigamos adelante y usemos flexbox. Voy a establecer la propiedad de visualización en flex. Entonces tenemos que cambiar la dirección. Hagámoslo columna. Y con el fin de crear algún espacio entre las líneas, vamos a usar justificar contenidos con el espacio de valor entre. Y también deshazte del fondo blanco. Entonces tenemos aquí el ícono de Menú. Todo está personalizado y listo para hacer que esta barra lateral y el menú de hamburguesas funcionen Entonces, una vez que hacemos clic en esas líneas, la primera y la tercera línea deben transformarse en X. cuanto a la segunda línea, debe moverse hacia abajo por debajo de la X. Así que antes que nada, seleccionemos líneas y personalicemos. Y después de eso, haremos que el ícono de Menú funcione usando JavaScript. Voy a seleccionar la primera línea usando ClassName Menú línea uno Entonces necesitamos rotar la línea y también moverla ligeramente. Entonces voy a usar la función Transformar con Girar. Eso pasó aquí 40 grados. Y también voy a usar la función Translate, que nos permitirá mover los elementos según el eje X e Y. Entonces voy a pasar aquí 0.5 RAM, y luego una rampa. Justo después de eso, voy a seleccionar Menú línea dos En caso de segunda línea, no necesitamos rotar la función, solo necesitamos usar la función Traducir. Así que usa transform translate con los valores menos punto a RAM. Después a R& S para la tercera línea, Sigamos adelante y copiemos este código de aquí y pegarlo hacia abajo. Voy a cambiar el nombre de la clase. Necesitamos Menú mentir tres en lugar de uno. También tenemos que rotar la tercera línea -40 grados. Mientras que la función translate, necesitamos Q menos una RAM en lugar de una rampa. Bien, entonces tenemos aquí X por defecto, pero no necesitamos eso Tuvimos que transformar el icono en X una vez que le damos clic. Entonces voy a definir una nueva clase en CSS cual se agregará a la barra de navegación con un método toggle Esta nueva clase, definiremos nuevos estilos que se aplicarán a los elementos. Una vez hacemos clic en el icono y luego se eliminarán una vez que volvamos a hacer clic en el icono. Entonces vayamos al archivo script.js. Y antes que nada, aún carecía del ícono de Menú. Voy a crear variable, llamémosla Menú. A continuación, seleccione el elemento utilizando el método QuerySelector. Tenemos que pasar el nombre de tu clase Menú. Después de eso. Vamos a adjuntarle un oyente de eventos Necesitamos usar el método add event listener, que debería tomar dos argumentos El primero va a ser el evento click. En cuanto a la segunda, vamos a pausar aquí la función de flecha. Luego dentro de las llaves rizadas, necesitamos seleccionar Navbar Vamos a utilizar de nuevo el método selector de consultas. Como decíamos, tenemos que agregar nueva clase a la Navbar. Para eso voy a usar una de las propiedades se llama class list, que incluye todas las clases de los elementos, en este caso Navbar A continuación tenemos que alternar método. Y finalmente tenemos que pasarte className, que vienen a cambiarse Bien, eso es todo sobre JavaScript. Ahora necesitamos agregar cambio de clase a las líneas. Usemos multi cursor e insertemos aquí. Para las tres líneas, cambio de clase. Entonces voy a ocultar la Barra lateral por defecto, ahora mismo. Su posición correcta está puesta a cero y necesitamos -21 correr. Y por último, necesitamos mostrarlo una vez que hagas clic en el icono. Entonces tenemos que volver a cambiar. Seguido por novelista. Tenemos que hacer la posición correcta cero. ¿Bien? Entonces, si hago clic en el icono, entonces se transformará en X. Y también decidir dónde nos mostraremos desde el lado derecho. Lo único que tenemos que hacer es suavizar esos efectos usando transiciones. Por no menos importante, necesitamos transición con los valores que tienen razón. Y 0.5 s. En cuanto a la línea Menú, necesitamos transición con transformar con la duración 0.5 s. Entonces todo funciona bien. Y con Navegación ya terminamos. Tenemos que pasar al siguiente punto de interrupción, que va a ser 800 picos Así que vamos a crear nuevos medios con ancho máximo de 800 píxeles. En primer lugar, voy a cambiar la posición de los Controles. Coloquémoslos cerca de los bordes de la página. Seleccionemos botón faltado y fijemos su posición izquierda para correr Después voy a seleccionar el BTN correcto y hacer su posición correcta para correr también A continuación, voy a disminuir el tamaño del encabezado de la primera página. Así que vamos a seguir adelante y seleccionarlo usando la clase Sección uno encabezado. Hagamos su tamaño de fuente seis redondos. Bien, eso es sobre la primera sección. Pasemos a la segunda sección. Voy a disminuir los tamaños de esas imágenes. Así que todavía carecía de vela hacia atrás Y hacer su ancho 20 RAM Además, voy a seleccionar botella de vino. Hagamos su ancho para correr. Bien, entonces la Sección dos se ve bien. Pasemos al siguiente. Voy a cambiar el tamaño del encabezado y su opacidad Y también voy a disminuir el tamaño de la imagen del fotograma. Entonces, sigamos adelante y comencemos con el rumbo. Vamos a seleccionarlo. Cambia su tamaño de fuente, hazlo 11 RAM. Y luego establecer opacidad 2.7. Después de eso, seleccionemos frame Image y hagamos su ancho 60 redondo. Bien. A continuación tenemos la Sección cuatro en la que necesitamos disminuir el tamaño de la imagen. Así que vamos a seguir adelante y seleccionar nuevos vinos imagen y hacer su ancho 45 corrió la Sección cuatro y también las fotos se ven bien. Y lo único que voy a hacer en el punto de interrupción es cambiar la posición de la Barra de Progreso Quiero colocarlo en la parte superior de la página. Así que sigamos adelante y seleccionemos Envoltura de Progreso. Luego establece su posición superior a cero. También, necesitamos que nos quede el 50 por ciento. Y para centrar los elementos perfectamente, usemos Transformar, Traducir X e insertarte -50 por ciento Bien, entonces eso es todo con 800 píxeles, ya terminamos, y es hora de pasar al siguiente punto de interrupción, que va a ser de 600 píxeles Entonces, seleccionemos New Media y fijemos el ancho máximo en 600 píxeles Empecemos por la primera página. Voy a disminuir el tamaño de la rúbrica. Así que vamos a seguir adelante y seleccionar el encabezado y Hacer tamaño de fuente cuatro redondos. A continuación, pasemos a la segunda sección y otra vez, Haz que esas imágenes y botones sean más pequeños. Empecemos con la vela de regreso. Establezca su ancho en 15. Corre. Entonces voy a seleccionar botella de vino. Hagamos su ancho. Así que para correr y vastamente. Cuida el Botón, Vamos a seleccionarlo. Hacer su ancho 12 RAM que Definir altura como tres RAM. Y también cambiar el tamaño de la fuente. Que sea un punto para corrió. A continuación viene la Sección Tres. Voy a disminuir el tamaño del encabezado y también la imagen del marco. Seleccionemos encabezado y hagamos que su tamaño de fuente sea diez RAM. En cuanto al cuadro Imagen, voy a hacer su ancho 35 rampa. Bien, entonces esta Sección tres se ve bien. Y a continuación tenemos una Sección cuatro. Voy a disminuir el tamaño del encabezado y también quiero hacer la imagen más pequeña. Entonces, sigamos adelante y seleccionemos el encabezamiento de la Sección Cuatro. Hacer su tamaño de fuente seis redondos. En cuanto a los nuevos Imagen, voy a establecer su ancho en 35 g. bien, así que creo que eso es todo sobre este punto de ruptura Y ahora tenemos que definir los últimos puntos de interrupción, que van a ser de 500 píxeles Así que vamos a crear nuevos medios con un ancho máximo, 500 píxeles. Entonces, antes que nada, quiero disminuir el tamaño de fuente de los elementos HTML. Ahora mismo, N equivale al 62.5 por ciento, y quiero disminuirlo al 45% Así que vamos a hacer tamaño de fuente del HTML 45%. A continuación, cambiemos ligeramente la posición de los Controles. Así le faltó botón izquierdo. Hacer su posición izquierda. 0.5 RAM. En cuanto al botón derecho, voy a fijar su posición correcta, 2.5 también. Bien, después de eso, voy a cambiar ligeramente la posición de la barra lateral. Seleccionemos no menos importante y hagamos su posición superior. 6.5 g. Bien, Siguiente, vamos a encargarnos de esta Sección tres Voy a comenzar con el epígrafe de la Sección tres. Hagamos su tamaño de fuente. Ocho RAM También como uvas Imagen, hacer su ancho 15 corrió. Y además de eso, voy a cambiar el ancho de la imagen al flotar Seleccionemos la imagen de uvas con más y fijemos con rampa 225. Bien, así que finalmente hicimos que nuestro proyecto respondiera a diferentes tamaños de pantalla. Creo que se ve bien. Entonces podemos decir que casi terminamos con los proyectos. Pero antes de terminar este tutorial, quiero agregar un efecto más agradable al proyecto. Bien, sigamos adelante y echemos un vistazo a los proyectos terminados. Entonces, si me desplazo por la página entonces la escala de estas secciones se cambiará sin problemas. Por defecto, el tamaño de estas Secciones es mayor y una vez que nos desplazamos o hacemos clic en los Controles, entonces la escala disminuirá en general, creará un efecto agradable y genial. El único problema que tenemos con este efecto es que los navegadores tienen un poco de problemas para realizar este efecto. Entonces a veces se puede decir que no funciona del todo a la perfección. Entonces de todos modos, voy a crear este efecto y puedes agregarlo al proyecto o no. Depende de ti. ¿Bien? Entonces lo primero que tengo que hacer es aumentar la escala de esta Sección raperos por defecto Así que asignemos a ellos, transformemos con esta función de escala y hagamos la escala 1.5. También voy a usar transición con los valores todos y 2 s. como recordemos, asignamos transición al envoltorio de esta Sección tres. Y me voy a deshacer de él porque va sobrescribir la transición que acabamos de asignar a este envoltorio de sección Entonces, como puedes ver, los tamaños de todas las páginas han aumentado. En realidad, cuando cargamos el proyecto, necesitamos escalar para que sea uno por defecto para la primera página. Y lo voy a hacer desde JavaScript. Seleccionemos el rapero de la Sección uno. Voy a crear nueva variable. Vamos a llamarlo Sección uno envoltorio y luego seleccionar los elementos usando el método QuerySelector Hagamos una pausa aquí clase Sección uno rapero. Después de eso, hagamos de su escala una. Entonces necesitamos Style dot transform igual a la función de escala con el valor uno. ¿Bien? Entonces necesitamos cambiar la escala de las páginas, quiere que sea Scroll y una vez que hagamos clic en los Controles. Pero antes que nada, vamos a encargarnos del evento de rueda. Aquí tenemos un poco de declaraciones condicionales donde comprobamos si el toro es verdadero o falso. Entonces si es cierto, entonces tenemos que disminuir la escala de la sección propiamente dicha. Entonces tenemos que transformar esta declaración condicional en una declaración if. Pasemos el año Bu como condición. Primero, voy a escribir el código y después explicaré cómo funciona. Así que tenemos que seleccionar esta envoltura de sección. Vamos a usar QuerySelector que abrir aquí backticks y pasar tu nombre de clase Section dash Ahora necesitamos definir el número de esta envoltura de sección. Y para ello, tenemos que volver a usar el condicional donde comprobamos si Delta Y es verdadero o falso. Si es cierto, entonces necesitamos el contador uno. Y si es falso, entonces necesitamos el contador dos seguido del envoltorio. Bien, entonces una vez que se selecciona el envoltorio de sección adecuado, entonces tenemos que disminuir la escala o dejarla como está. Entonces necesitamos aquí Estilo punto transformar eso de nuevo, abierto backticks Utilice la función de escala. Y como valor, voy a pasar de nuevo aquí las declaraciones condicionales donde comprobamos si Delta Y es verdadera o falsa. Si es cierto, entonces como valor de la función scale, tenemos que pasar 1.5. Y si el Delta Y es falso, entonces necesitamos uno. Entonces, cuando nos desplazamos hacia abajo en la página el número de esta envoltura de sección se convertirá en el contador uno. Supongamos que estamos hablando de la primera página. Entonces seleccionaremos la primera página y su escala se convertirá en 1.5. Porque de nuevo, Delta Y es cierto. Si nos desplazamos hacia arriba que delta Y será falso. El número de estas envolturas de Sección pasará a ser contrario a lo que por otro lado, disminuirá en uno. Y volveremos a seleccionar la primera página. Y en este caso, es escalable con disminución porque Delta Y es falso ¿Tiene sentido? Bien, entonces el efecto de escala funciona parcialmente Es decir, las páginas que vienen no van en aumento. Y para arreglarlo, voy a duplicar este código. Entonces, por eso, necesitamos manipular la página siguiente. Tenemos que aumentar ambos contadores en uno. Entonces agreguemos aquí más uno. Y además de eso, tenemos que cambiar los lugares de esos valores. Bien, entonces ahora si nos desplazamos hacia abajo, entonces las próximas páginas cambiarán también las escalas. Y vamos a pasar lo mismo si nos desplazamos hacia arriba. Así que todo funciona bien hasta llegar al Pie de Página y luego volvemos a desplazarnos. Entonces, como ves, la primera página se está mostrando con una escala mayor. Sucede porque booleano es falso y si las declaraciones están funcionando en la función de controlador de página También tenemos que definir las escalas en las declaraciones if. este momento tenemos que trabajar en las envolturas de la Sección Uno y la Sección Tenemos todos estos seleccionados Sección uno envoltorio. Hagamos lo mismo para esta Sección cinco también. Voy a duplicar esta línea de código y simplemente cambiar una a cinco. Entonces, si la condición en la primera sentencia if es verdadera, quiero decir, si navegamos desde el Footer hasta la primera página, que necesitamos disminuir la escala del envoltorio de la primera sección. Y al mismo tiempo necesitamos aumentar la escala del Pie de Página. Entonces necesitamos la Sección uno, rapero dot style dot transform, escala con el valor uno. Duplicemos esta línea de código. Cambia el envoltorio de la Sección uno en el envoltorio de la Sección cinco. Y también como valor de la función de escala necesitamos 1.5. Bien, necesitamos es similar en la segunda sentencia if, pero con valores de escala opuestos Agarremos este código, lo peguemos aquí y cambiemos los valores. Necesitamos 1.5 y abajo de uno. Ahora, si nos desplazamos hacia arriba y hacia abajo, todo va a funcionar bien. ¿Bien? Entonces vamos a evento, quiero decir, con desplazamiento, ya terminamos Y finalmente tenemos que encargarnos de los Controles. Necesitamos los mismos efectos de transición una vez que hacemos clic en las flechas blancas latinas. Entonces, si el booleano es verdadero, entonces necesitamos definir las escalas para esta sección Si es falso, entonces la función de controlador de página lo administrará automáticamente. Necesitamos si declaraciones donde comprobamos si toro es verdadero o falso. Si es cierto que en el caso del botón izquierdo, tenemos que seleccionar este envoltorio de sección con el contador dos. Entonces usemos QuerySelector. Luego abre los backticks e inserta tu sección. Como el número de esta acción. Tenemos que pasar su contador dos, seguido del envoltorio. Tenemos que disminuir su escala a uno. Entonces necesitamos Estilo no transformar igual a escala con valor uno. Entonces este código se refiere a la página que viene En cuanto a la que sale, vamos a duplicar este código. En este caso, necesitamos el contador dos más uno y tenemos que aumentar la escala a 1.5. Bien, veamos el Botón Acerca del izquierdo. Copiemos todas las declaraciones if y peguémoslas para el botón derecho también. Entonces necesitamos dejar la primera parte ya que es como parte la segunda en lugar del contador dos más uno, solo necesitamos el contador uno. Entonces, si comprobamos y hacemos clic en Controles, entonces funcionará perfectamente. Bien, así que enhorabuena. Por último hemos terminado el proyecto. Ojalá fuera interesante y útil. Tal vez fue un poco desafiante, pero espero que lo hayas logrado 88. Proyecto 10 - Previsión de proyecto: Bien, así que es momento de construir nuestro próximo proyecto, que va a ser el clon de uno de los sitios web más populares y de uso común llamado Paypal, creará la interfaz de usuario de las diferentes páginas Estoy en la página principal, páginas de inicio de sesión y registro. Por supuesto que no será el clon exacto con toda la funcionalidad. Como dije, vamos a construir solo una interfaz de usuario con HTML, CSS y JavaScript. Paypal se ve diferente en diferentes países. La interfaz de usuario cambia frecuentemente de vez en cuando. Así que no te preocupes si este no es el clon exacto de la IU actual. Bien, así que antes de saltar directamente a escribir el código, al principio, describamos cómo es el proyecto Entonces como dije, construiremos tres páginas diferentes, sesión principal e inscríbase. Empezaremos por la página principal. Consistirá en un par de secciones diferentes. La primera sección va a ser el banner con navegación. Tenemos aquí varios elementos de navegación. Si pongo el cursor sobre ellos, entonces se mostrará el menú desplegable Cambiará una vez que pasemos cursor sobre otro elemento de navegación Además, tendremos aquí dos botones diferentes para iniciar sesión e inscribirse. Si hago clic en ellos, entonces navegaremos a la página adecuada. Por lo que a la pancarta le seguirá la segunda sección. Incluirá tres partes diferentes con Font, iconos impresionantes, algunos elementos de texto y botones. Entonces tendremos esta sección azul con algunos párrafos diferentes. A continuación, construiremos esta pequeña sección aquí con una imagen y tres pasos diferentes. Abajo, tendremos un botón para apuntarte, seguido del pie de página. Bien, así que veamos sobre la página principal. Echemos un vistazo a la página de inicio de sesión. Será bastante similar a la página de inicio de sesión original. Tendremos aquí dos campos de entrada con botones. Esa es probablemente la página de registro. Constará de dos partes. En el lado izquierdo, tendremos varias imágenes de los clientes. En cuanto al lado derecho, incluirá dos opciones distintas. Si queremos crear una cuenta personal o comercial. Bien, así que eso es todo sobre el proyecto. Como de costumbre, lo haremos sensible a diferentes tamaños de pantalla. Si inspecciono la página y cambio al modo responsive, verás que es responsive. Una cosa a tener en cuenta aquí, en tamaños de pantalla más pequeños, ya no tendremos los desplegables Se transformarán al menú así. Bien, entonces eso es todo. Estamos listos para comenzar a construir el proyecto. Entonces, sigamos adelante. 89. Proyecto 10 - Página de destino de creación y estilo - Parte 1: Bien, así que estamos listos para comenzar a construir los proyectos. He creado una nueva carpeta en el escritorio llamada clon papal, en la que tengo otra carpeta para las imágenes 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.css y script.js. A continuación, abra el archivo index.html y cree el documento HTML básico. Para eso, voy a usar uno de los paquetes integrados VS Code que se llama image. Necesitamos colocar su signo de exclamación y luego presionar Tab o Enter. Entonces aquí vamos. Aquí tenemos las etiquetas HTML básicas. Lo primero que voy a hacer es cambiar el título. Se va a enviar dinero, pagar en línea o configurar una cuenta de comerciante. A continuación, necesitamos vincular los archivos CSS y JavaScript a HTML. Así que vamos a abrir una etiqueta de enlace y especificar la parte del archivo CSS que necesitamos style.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 JavaScript en el atributo source. Bien, entonces los tres archivos están vinculados. A continuación, voy a traer otro enlace de CDN. A lo largo del proyecto. Voy a usar Font, iconos impresionantes. Así que vayamos al Google y busquemos Font Awesome CDN js Entonces agarra el primer eslabón. Desde aquí, abra una etiqueta de enlace en los elementos head y pegue el enlace como el valor de los atributos de referencia h. Bien, finalmente, voy a ejecutar el proyecto al navegador usando uno de los paquetes de código de vistas se llama servidor en vivo y nos permite ejecutar el proyecto a la vida del navegador y hacer los cambios y actualizaciones sin actualizar la página. Cada vez. Coloquemos al actor y al navegador. Así. Y empezar. Vamos a construir el proyecto sección por sección. En cada sección crearemos el marcado HTML. Después escribiremos algunos CSS. Voy a comenzar con la primera sección, que incluirá suficiente poro y la pancarta. En primer lugar, vamos a abrir la etiqueta div, que va a ser el contenedor. Envolverá todo el contenido. A continuación, voy a abrir otra etiqueta div que incluirá el contenido de la portada. Pero primero, insertemos tus comentarios para portada. Después abre la etiqueta div con una primera página de clase. A continuación, voy a insertar nuevos comentarios, sección uno. Y la sección uno. Después abre un elemento de sección con una clase, sección uno. Entonces como decíamos, la primera sección constará de dos partes principales. Tendremos una barra de navegación y una pancarta. Así que sigamos adelante y comencemos a crear la napa. En primer lugar, voy a abrir una etiqueta div, que va a ser el wrapper de la navegación. Voy a llamarlo envoltorio napa. A continuación, voy a abrir la etiqueta HTML5, que se llama nef, con la barra de navegación de clase Entonces tendremos un par de partes diferentes en la barra de navegación. Tendremos un logo, luego un par de elementos de lista con menús desplegables. Y además tendremos dos botones. Sigamos adelante y creamos un logotipo. Voy a abrir la etiqueta div con la clase. Ahora para un logo. A continuación, voy a pasar tu etiqueta span, que envolverá la primera letra del papal. Esa es esencialmente la clase P1 e inserte aquí P. Además de eso necesitamos aquí otros elementos span con una clase P2. Y luego otra vez insecto a tu p.sit. Entonces usaremos esos dos elementos span para personalizar el logotipo. En cuanto al resto de las cartas, solo interrumpamos aquí. Papel. Bien, veamos sobre el logo. Ahora, voy a crear listas. Tendremos la lista principal con tres elementos de la lista. Y esos elementos de la lista tendrán sus propios menús desplegables. Vamos a abrir una etiqueta de lista con la lista de navegación de clase. Entonces necesitamos los elementos LI con un nombre de clase, elemento de la lista de navegación. Debe ir seguido por el elemento link, que tendrá className nav, list link Y como el contenido, voy a insertar tu personal. Entonces los dos primeros elementos de la lista, tendremos una flecha en el lado derecho. Entonces te voy a pasar el ícono de Font Awesome. Vamos a abrir el elemento I con una clase es FAS. Fa, Chevron abajo Duplicemos el elemento LI dos veces y hagamos algunos cambios El segundo rubro va a ser de negocios. En cuanto al tercer ítem va a ser socios y desarrolladores. Y aquí no necesitamos una flecha porque este ítem UNO tiene un menú desplegable. Bien, así que ahora mismo no voy a insertar tus menús desplegables Nosotros nos encargaremos de ellos un poco más tarde. A continuación, tenemos que encargarnos de los botones. Vamos a abrir la etiqueta div con los botones de la barra de navegación de clase. Después inserte aquí un elemento botón con la clase ahora para btn Y también necesitamos aquí otra clase para estilos individuales, Login btn En cuanto al contenido, vamos a insertar tu login. Entonces dupliquemos el botón, cambiemos el nombre de la clase. Necesitamos registrarnos btn, y también cambiar los contenidos Inscríbase en el Instituto. Bien, entonces no tuvimos pobres, ya terminamos. Pasemos a como de la pancarta. Quiere abrir una etiqueta div que va a ser el envoltorio del banner. Por lo que el banner incluirá tres elementos diferentes. El primero va a ser el rumbo. Abramos la etiqueta de encabezado H1 con el encabezado del banner de la clase con el contenido. Te tenemos cubierto. Entonces necesitamos el párrafo. Abramos la etiqueta P con el párrafo del banner de la clase e instituyamos algún texto ficticio Después de eso, voy a abrir la etiqueta de botón con la clase blue btn Y con el contenido, aprende más. Yo usé aquí la clase azul btn. Será una especie de nombre de clase común porque tendremos un par de botones azules similares. Bien, así que eso es todo con respecto al marcado HTML de esta primera sección Ahora podemos empezar a escribir algunos CSS. Antes de hacer eso, voy a traer un enlace más para la fuente. A lo largo del proyecto. 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. Voy a seleccionar todos los estilos diferentes. Después agarra el eslabón y pégalo en la cabeza. Bien, así que ahora podemos escribir el CSS. En primer lugar, voy a crear un par de estilos comunes y restablecer. Vamos a insertar tus comentarios. Estilos comunes de estilos comunes. Entonces voy a seleccionar cada elemento para eso. Tenemos que usar un asterisco. Entonces, antes que nada, vamos a deshacernos default, margin y padding. Voy a ponerlos a cero a ambos . Entonces voy a hacer box-sizing border-box. Además, para eliminar subyacente por defecto de los elementos de enlace, necesitamos decoración de texto ninguno. El siguiente va a ser el tipo de estilo de lista ninguno. Eliminará las viñetas predeterminadas de los elementos de la lista. Después de eso, voy a deshacerme del esquema predeterminado. Vamos a ponerla en ninguna. Y finalmente, como se define font-family, usemos aquí abajo dA2 Bien. Entonces, como puedes ver, todos los estilos comunes y reset se aplican a los elementos a lo largo del proyecto. Voy a usar la rampa como unidad de medida. Por defecto, una habitación 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 píxeles porque creo que sería más conveniente y fácil de usar. Entonces para hacer eso, tenemos que disminuir el tamaño de fuente del elemento HTML y hacerlo 62.5 por ciento Así se puede ver que todos los elementos se hicieron más pequeños. Bien, así que finalmente, estamos listos para comenzar a personalizar la primera sección Sigamos adelante e insertemos sus comentarios para la sección uno. Después seleccione la Sección uno y defina su anchura y altura. Voy a establecer con el 200 por ciento como probablemente la altura. Hagámoslo 65% de la ventana. A continuación, voy a establecer la imagen como fondo de la primera sección. Por lo que voy a usar aquí, una función de degradado lineal, que nos permitirá oscurecer ligeramente el fondo Entonces la dirección de la transición de color va a ser de abajo hacia arriba. Vamos a usar aquí dos valores RGBA diferentes. Y el primero, voy a insertar 3083 veces con la opacidad 0.7 Como para el segundo va a ser del mismo color pero con una opacidad diferente Hagámoslo 0.6. A continuación, voy a especificar la URL de la imagen. Tenemos carpeta llamada images, y necesitamos seleccionar PG dot JPG. También, voy a definir la posición de la imagen de fondo. Hagámoslo en el centro. Y entonces necesitamos que no se repita. Por último, vamos a establecer el tamaño del fondo para cubrir. Bien, así que consideremos que la imagen se establece como fondo de este elemento de sección A continuación, voy a encargarme del Navbar. Seleccionemos a su rapero. Quiero decir, envoltorio de Napa. Voy a definir su ancho. Hagámoslo al 100%. Entonces voy a establecer la altura a ocho RAM. Entonces necesitamos frontera en la parte inferior. Vamos a asignar valores de verdad 0.1, correr sólido, y llamamos AAA. Bien, siguiente, voy a seleccionarlo ahora por sí mismo. Defínelo dentro de la altura. Voy a establecer el ancho a 120 RAM. En cuanto a la altura, va a ser del 100%. Después de eso, voy a alinear elementos fila lineal horizontal. Y para eso, usemos flexbox. Necesitamos display flex que necesitamos para crear algún espacio entre los elementos flex usando justificar el espacio de contenido entre ellos. Para alinear los elementos en el centro verticalmente, necesitamos alinear los elementos en el centro. Bien, se venden suficientes artículos de barra se colocan horizontalmente. Y ahora voy a colocar la navegación misma en el centro. Para eso, vamos a utilizar de nuevo flexbox. Necesitamos display flex y luego justify-content center. Bien, entonces la navegación está alineada y ahora voy a personalizar cada elemento de la Navbar Empecemos con el logo. Seleccione el envoltorio. Voy a definir tamaño de fuente 3.5 RAM. Entonces voy a hacer la fuente. Itálica. También hazlo más audaz Voy a establecer la forma de fuente a 800 y luego cambiar el color, hacerlo blanco. Bien, así que el logo ya se ve bien todo, pero tenemos que personalizarlo un poco más Como saben, hemos envuelto la primera letra con un elemento span. Eso lo hicimos porque la primera letra va a ser distinta. Vamos a seleccionarlo con la clase P1. Voy a establecer el tamaño de fuente a 4.5 RAM. Y luego crea algo de espacio en el lado derecho usando margen derecho, una carrera. Bien, entonces se considera que la primera letra se volvió un poco más grande que las otras letras. A continuación, voy a personalizar el segundo elemento span. Vamos a seleccionarlo con la clase P2. Voy a Es tamaño de fuente a 4.5 RAM. Y luego cambia el color, hazlo BBB. Bien, después de eso, voy a cambiar la posición del segundo elemento span Voy a poner su posición a absoluta. Entonces para alinearlo acuerdo a su elemento padre, que es el logo, voy a asignar a la posición del logo relativo. Y después de eso, definamos las propiedades superior e izquierda para el segundo lapso. Voy a poner el asfalto 2.4 RAM superior. La posición de la izquierda va a ser 0.5 corridas. Entonces la posición del segundo elemento span es fija, pero como puedes ver, terminó por encima de la primera P. voy a arreglar eso usando la propiedad z-index Pero al principio, tenemos que definir la posición del primer elemento span. De lo contrario, la propiedad z-index no funcionará. Entonces, sigamos adelante y fijemos su posición en relativa. Y luego usar la propiedad z-index con algún valor mayor que cero Hagámoslo diez. Bien, entonces con el logo, terminamos Ahora es el momento de cuidar los elementos de navegación 90. Proyecto 10 - Página de destino de creación y estilo - Parte 2: Bien, así que sigamos adelante y alicemos continuamente la primera sección, todos ya hemos personalizado el logotipo y ahora es el momento de cuidar los elementos de navegación Seleccionemos la lista de navegación. Voy a colocar los elementos de navegación horizontalmente en una fila así que necesitamos mostrar flex se considera que los elementos de navegación colocan uno al lado del otro A continuación, voy a personalizar los elementos LI. Así que vamos a seleccionar el elemento de la lista. Voy a hacer bien la altura. Hagamos ocho RAM, y luego creamos algo de espacio dentro de la lista. Necesitamos acolchado para rampa. Bien, siguiente, voy a centrarlos verticalmente. Para eso, voy a utilizar de nuevo los libros flux. Vamos a configurar la pantalla para flexionar y luego alinear los elementos en el centro. Bien, después de eso, voy a darle estilo a los enlaces. Entonces, seleccionemos no menos importante enlace. En primer lugar, voy a definir ancho y alto. Hagamos que ambos sean 100 por ciento. Que incrementen el tamaño de la fuente, lo hacen 1.7 rem. Además, voy a cambiar font-weight. Vamos a establecerlo en 400. Después haga el texto en mayúscula. Y finalmente cambia el color, hazlo blanco. En realidad, las flechas también deben ser estilizadas porque son parte de los elementos de enlace Vamos a revisar el código HTML. Entonces como puedes ver, se colocan fuera de los enlaces. Eso no es correcto. Así que sigamos adelante y arreglemos eso rápidamente. Bien, entonces ahora los enlaces se ven mucho mejor. Se colocan un poco arriba dentro de los elementos de la lista con el fin de centrarlos verticalmente, vamos a usar de nuevo el flexbox Necesitamos mostrar flex y alinear elementos al centro. Bien, sigamos adelante y personalicemos esas flechas. Voy a hacerlos un poco más pequeños. Y también necesitamos algo de espacio en el lado izquierdo. Así que vamos a seleccionar el elemento I. Voy a establecer su tamaño de fuente en 1.5 rem, y luego crear espacio en el lado izquierdo usando margin-left con valor 0.5 rampa Bien, así que veamos sobre los eslabones y flechas. Se ven bien. Antes de seguir adelante e iniciar los botones, voy a crear un efecto hover Quiero mostrar una línea blanca al final de los elementos de navegación. Y también voy a rotar esas flechas. Empecemos por las líneas blancas. Se crearán usando el fondo del borde. Así que vamos a seleccionar un elemento de lista con hover asignado a él, borde inferior con valores punto a ram, sólido y el color blanco Y también usar frontera de transición inferior. Y luego usa un poco de tiempo de duración, 0.1 s. bien, así que aquí tenemos buenos efectos hover Como dije, también vamos a rotar las flechas al flotar Entonces sigamos adelante y seleccionemos el elemento de la lista con hover, seguido del elemento I. Necesitamos transformar y luego girar la función con dirección z como valor. Voy a pasar aquí 180 grados. Y nuevamente usar transición con valores transforman 0.3 s. así que una vez que pasamos el cursor sobre el tallo del ítem, las flechas girarán Bien, así que finalmente podemos seguir adelante y personalizar los botones de la barra de navegación Tenemos dos botones diferentes. Tendrán algunos estilos comunes. Así que al principio, vamos a seleccionarlos usando el nombre de clase común navbar, btn Voy a definir el ancho. Hagámoslo un tranvía. Luego crea algo de espacio dentro de los botones usando relleno. Vamos a establecerlo en 0.7 rem. También necesitamos margen. Vamos a establecerlo en 0.3 RAM y luego hacer los botones redondeados usando border-radius con valor. Si hacemos rampa. Bien, sigamos adelante y agreguemos algunos otros estilos a los botones Definamos frontera. Voy a fijarlo para que apunte a un rem, sólido y el color blanco. Después defina el tamaño de la fuente. Hagámoslo un punto para RAM. Y también cambiar el tipo del más grueso, hazlo señalar. Bien, así que veamos sobre los estilos comunes. Ahora necesitamos algunos estilos individuales para ambos botones. Seleccionemos el primero usando el selector secundario enésimo. Voy a establecer su color de fondo a transparente En cuanto al color, hagámoslo blanco. Entonces voy a duplicar este código. Necesitamos aquí. Enésimo hijo con número dos. Entonces el color de fondo va a ser blanco. En cuanto al color del texto, voy a hacerlo gris oscuro usando el color al 62626 Bien, entonces los botones están personalizados y de hecho dentro de nuestra parte, ya terminamos Sigamos adelante y banner personalizado. Vamos a seleccionarlo. En primer lugar, voy a definir su ancho. Hagámoslo al 100%. Después de eso. Cuidemos su posición. Voy a poner su posición a absoluta. Entonces necesitamos posicionamiento relativo para esta sección en sí, porque es el elemento padre. Después de eso, definamos la posición superior. Voy a fijarlo en 25 por ciento. Y también reproduce los contenidos en el centro usando el texto align center. Bien, así se posiciona la pancarta. Empecemos a personalizar sus elementos. Voy a comenzar con un encabezado de pancarta. Aumentemos su tamaño de fuente. Hacer seis RAM. Luego establece el peso de la fuente en 300. También cambia el color, hazlo blanco. Y crea algo de espacio en la parte inferior usando margen, rampa inferior tres. Bien, entonces el encabezado está personalizado. Pasemos al párrafo. Voy a seleccionar el párrafo de banner. Aumentemos su tamaño de fuente, que sea 1.8 RAM. Y también cambia el color, hazlo blanco. Después de eso, voy a disminuir su ancho. Vamos a hacerlo 50%. En realidad, el párrafo debe colocarse en el centro de la pancarta. Entonces hagámoslo usando el margen. Voy a ponerla a cero. Entonces necesitamos 0 fila en los lados izquierdo y derecho. Se colocará el elemento en el centro. En cuanto al fondo, va a ser para n. Eso es todo sobre el párrafo. Por último, tenemos que cuidar el fondo. Seleccionemos btn azul. Voy a establecer su ancho a 35 corrida que la altura va a ser cinco rem. También cambia el color de fondo. Hazlo 036, B0, B1. Y cambia el color, hazlo blanco. Sigamos adelante y agreguemos un poco más de estilo al fondo. Voy a hacerlo redondo usando un border-radius. Corrimos. Entonces deshazte del borde predeterminado, establecelo en ninguno. Y por último, cuida las fuentes. Voy a aumentar el tamaño de la fuente. Hagámoslo 1.6 RAM, y también que sea un poco más audaz usando font-weight Bien, entonces el Buxton instaló, y en realidad ya terminamos con el banner Ahora es el momento de seguir adelante y agregar los menús desplegables a la navegación 91. Proyecto 10 - Crea y haz trabajo de menú desplegable: Bien, así que casi terminamos con la primera sección. Lo único que voy a hacer es crear un menú desplegable. Una vez que pase el cursor sobre los dos primeros elementos de navegación, entonces aparecerá el menú desplegable y podrá cambiar los menús Al principio, necesitamos crear el marcado HTML. En el primer menú desplegable entraremos en el primer elemento LI. Vamos a crear aquí otra lista con el desplegable de navegación de clase. Entonces, cada lista desplegable tendrá cuatro elementos de lista diferentes. Y cada elemento de la lista en sí tendrá dos enlaces diferentes. Entonces abramos la etiqueta LI con el elemento desplegable class nav. Entonces voy a pasar aquí etiqueta de enlace con la clase nav, desplegable, enlace. Uno. Vamos a instituir cómo funciona Paypal. Después duplica este código, cambia el nombre de la clase, y también cambia el contenido. Va a ser, ¿qué se puede hacer con una cuenta personal? Bien, dupliquemos el elemento de la lista tres veces y cambiemos el contenido. Necesitamos aquí. Paga en línea. Después en línea, pago sin fronteras. Entonces el siguiente va a ser enviar pagos de los que necesitamos para enviar pagos al extranjero. En cuanto a los dos últimos elementos de enlace, necesitamos aquí una búsqueda ofertas y luego pagar con PayPal y enviar dinero. Bien, así que eso es todo respecto al primer menú desplegable. Voy a copiarlo. Y luego vamos a pegarlo en el segundo elemento LI en la navegación principal. Voy a cambiar rápidamente los contenidos. Entonces necesitamos aquí todas las soluciones de negocio. Entonces tendremos C o gama de productos. A continuación tenemos excepto pagos en línea. Entonces recibe el pago en tu página web, envía facturas. El siguiente va a ser crear un correo electrónico facturas en línea. Y por último, necesitamos vender internacionalmente. Y Paypal apoya tu crecimiento global. Bien, entonces aquí tenemos los desplegables. Han estropeado el trazado del nanoporo, pero nosotros nos encargaremos de eso. Al principio. Voy a construir unos menús desplegables y luego los haremos funcionar en hover Antes de hacer eso, voy a ocultar por un tiempo el segundo menú desplegable Vamos a asignarle un nombre temporal. Ahora, caído a continuación, seleccionarlo en el archivo CSS y asignado a él. Mostrar ninguno. Bien, después de eso, voy a seleccionar suficiente desplegable Definamos su anchura y altura. Voy a establecer el ancho al 100%. En cuanto a la altura, pongámosla 20 RAM y también cambiemos el color de fondo. Voy a usar gradiente lineal. En primer lugar, definamos la dirección de la transición que va a ser de izquierda a derecha. Y luego voy a pasar tres colores. El primero va a ser 066399. Entonces necesitamos f, f, df. En cuanto al tercer color, va a ser el primero. Entonces voy a copiarlo y pegarlo. Puedes ver que tenemos que encargarnos de la posición del menú desplegable. Así que pongamos su posición a absoluta. Voy a posicionar el menú según el elemento de sección. Este elemento de sección ya se ha posicionado relativo. Necesitamos aquí arriba Ocho RAM para la posición izquierda va a ser cero. Entonces se posiciona el menú desplegable. Pero tenemos aquí un pequeño tema. El banner se coloca en la parte superior del menú. Sigamos adelante y arreglemos eso usando la propiedad z-index. Vamos a establecerlo 200. Bien, así que ahora el problema está solucionado y podemos comenzar a personalizar los elementos del menú desplegable Vamos a seleccionarlos. En primer lugar, voy a establecer con 225 RAM y luego crear espacio usando margen. Voy a poner margen a dos rem en la parte superior e inferior y Tanner M en los lados izquierdo y derecho Como sabes, cada ítem consta de dos enlaces diferentes. Deben colocarse uno encima del otro. Hagámoslo usando flexbox. Voy a configurar display a flex. Y entonces necesitamos flexión dirección columna. Bien, a continuación, voy a personalizar los enlaces. Empecemos por el primer enlace. Necesitamos seleccionar nafta de enlace descendente uno. Vamos a establecer su tamaño de fuente en 1.6 RAM. En cuanto al color, hagámoslo blanco. Entonces voy a duplicar este código. Necesitamos aquí enlace a. En cuanto al tamaño de fuente, va a ser 1.3 rampa. Bien, entonces los enlaces se ven bien, pero como pueden ver, tenemos que encargarnos de su alineación Deben colocarse en el centro en dos líneas. Entonces voy a definir el relleno. Hagamos que sea cero en la parte superior e inferior y cero a RAM en los lados izquierdo y derecho. Y luego otra vez, voy a alinear elementos usando flexbox. Necesitamos display flex. Y para poder colocar los elementos flex en el sensor, necesitamos justify-content Entonces ahora los artículos se colocan en el centro, pero necesitamos colocarlos en dos líneas. Quiero decir, tenemos que romperlos para eso. Usemos flex wrap con una envoltura de valor. Bien, así que los elementos del menú desplegable se colocan correctamente. Y ahora podemos crear un efecto hover. Por defecto, el menú desplegable debe estar oculto. Una vez que pasamos el cursor sobre el artículo, entonces debería mostrarse Y además de eso, también tenemos que cambiar el color de fondo de la barra de navegación Podemos crear el overfed con CSS para el desplegable, pero no podemos crearlo plegando ahora para wrapper Porque si seleccionamos el elemento de la lista con hover, entonces todavía nos gusta su elemento padre o cualquiera de los abuelos El hover no va a funcionar. Así que decidí crear efectos de terror usando JavaScript. En este momento el segundo menú desplegable tiene una pantalla ninguno. Así que vamos a seguir adelante y deshacernos de este código de aquí. Y también voy a quitar el nombre de clase temporal que lo agregamos al segundo desplegable. Después de eso, voy a ocultar los menús desplegables. Para eso. Usemos opacidad cero y visibilidad oculta. Bien, así como puedes ver, los menús desplegables están ocultos Vamos al archivo JavaScript y entrevista, comentarios, navegación. Después n de navegación. Entonces necesitamos seleccionar el primer y segundo elementos de navegación simultáneamente. Para lograrlo, voy a asignar a ambos elementos. Los nombres comunes de las clases. Vamos a llamarlo caído, flotar. Después de eso, vamos a crear una nueva variable. Voy a llamarlo elementos desplegables. Y luego seleccionar el primer y segundo elementos LI utilizando el método QuerySelector all Tenemos que especificar aquí el nombre de la clase, desplegable hover. Así que ahora hemos seleccionado ambos elementos de navegación. En general, el método query selector all devuelve un objeto similar a una matriz llamado lista de nodos Así que tenemos que recorrer la lista y adjuntarlo a cada elemento de navegación y oyente de eventos con un mouse sobre evento Para poder mirar a través de la lista, voy a usar uno de los métodos de ayuda de matriz llamados para h. Así que necesitamos adjuntar para cada método dos elementos desplegables Este método toma un argumento, que es una función de devolución Esta función se ejecutará para cada elemento de navegación. La función de devolución de llamada en sí tendrá un parámetro, que será el elemento actual de la lista durante el bucle, voy a llamarlo elemento desplegable. Entonces ahora tenemos que adjuntar un oyente de eventos a un elemento desplegable Tenemos que especificar aquí el Va a pasar el ratón por encima. Y también necesitamos aquí la función de flecha. Esta función se ejecutará una vez que coloquemos el cursor sobre el ítem Entonces necesitamos dos cosas. Al flotar. Tenemos que mostrar el menú desplegable, y también tenemos que cambiar el color de fondo de la envoltura de Napa. Comencemos con menús desplegables. Entonces tenemos dos elementos de navegación y dos menús desplegables. Necesitamos mostrar el menú desplegable adecuado una vez que coloquemos el cursor sobre el elemento de navegación Entonces tenemos que acceder al menú desplegable desde el elemento desplegable así Necesitamos elemento desplegable. Entonces necesitamos acceder al menú desplegable, que son los últimos elementos hijos del elemento de la lista. Entonces tenemos que usar aquí la propiedad llamada last element child. Así que una vez que tenemos el acceso al menú desplegable, ahora tenemos que hacerlo visible. Para eso, usemos una de las propiedades llamadas texto CSS. Voy a pasar tu opacidad uno y visibilidad visible. Entonces, si coloco el cursor sobre el primer elemento de navegación, entonces aparecerá el primer menú desplegable Y si coloco el cursor sobre el segundo elemento de navegación, entonces aparecerá el segundo menú desplegable Después de eso, el efecto de desplazamiento dejará de funcionar porque acabamos definir el evento mouse sobre y no el mouse out. Antes de eso, voy a cambiar el color de fondo del envoltorio Napa. Vamos a seleccionarlo usando el método selector de consultas. Especifique aquí el nombre de la clase envoltorio Napa. Entonces necesitamos propiedad llamada Style, seguida del fondo. Voy a usar aquí la función de gradiente lineal. La dirección va a ser escribir. Y entonces voy a pasar aquí tres colores. El primero va a ser 066399. Entonces necesitamos f8f, la F, y luego necesitamos de nuevo Entonces ahora si flotamos que el color de fondo de la novela, el envoltorio cambiará Bien, así que ahora tenemos que usar mouse out event. Una vez que salimos del mouse, tenemos que ocultar los desplegables Y también tenemos que deshacernos del color de fondo del envoltorio novedoso. En realidad, voy a duplicar este código, luego cambiar el evento, va a ser mouse out. De lo que necesitamos opacidad cero. Visibilidad oculta. En cuanto a los antecedentes, va a ser ninguno. Bien, así que ahora todo funciona perfección y con los menús desplegables, ya estamos hechos Bien, entonces esa sílaba, la primera sección, sigamos adelante y personalicemos la siguiente 92. Proyecto 10 - Crear y personalizar sección de servicios: Muy bien, entonces con la primera sección, ya terminamos, y ahora es el momento de seguir adelante y encargarnos de la siguiente Al principio, echemos un vistazo al proyecto terminado. Entonces vamos a construir la sección Servicios. Va a ser una simple, tendrá el encabezado y tres partes que incluirán iconos de Font Awesome, encabezados, párrafos y botones Bien, sigamos adelante y creamos el marcado HTML. Voy a insertar sus nuevos comentarios, sección dos. Y la sección dos. Después abre una etiqueta de sección con una clase, sección dos. Entonces como dijimos, esta sección constará de dos partes principales. El primero va a ser el rumbo. Abramos la etiqueta de encabezado H1 con el encabezado de la sección de clase dos. Y como el contenido, voy a insertar tu paypal es para todos los que pagan o se les paga. A continuación, necesitamos los servicios que están abiertos, una etiqueta div, que va a ser el wrapper. Entonces en general contaremos con tres servicios diferentes. Vamos a abrir la etiqueta div con el servicio de clase. Cada servicio consistirá en un icono de Font Awesome, encabezado, párrafo y el botón. Vamos a abrir la etiqueta I con una clase es FAS, un empate de usuario. Entonces necesitamos rumbo. Voy a abrir la etiqueta de encabezado h3 con el encabezado de servicio de clase con los individuos de contenido Entonces el siguiente elemento va a ser el párrafo. Está asignado a clase, párrafo de servicio. E inserte aquí algunos textos ficticios. Por último, necesitamos un botón con un servicio de clase, btn. Y con el contenido, aprende más. Bien, así que eso es todo sobre el primer servicio. Voy a duplicarlo dos veces y luego hacer algunos cambios. Voy a cambiar el nombre de la clase del icono Font Awesome. Va a ser el maletín FASFA como probablemente rumbo. Voy a insertar sus negocios. Entonces el siguiente Font, ícono Awesome, va a ser LEJOS un apretón En cuanto al rubro van a ser socios. Bien, entonces esa es la sílaba, el marcado HTML. Ahora tenemos que empezar a darle estilo a esta sección. Insertemos nuevos comentarios en el archivo CSS para la sección dos. A continuación, seleccione el elemento de sección. Vamos a definir su ancho, haciendo 100%, y luego crear algún espacio dentro de esta sección, necesitamos relleno. Vamos a ponerla a diez rem en la parte superior. Entonces cero en el lado derecho que 15 RAM en la parte inferior y cero en el lado izquierdo. Muy bien, a continuación, voy a alinear los elementos usando Flexbox O sea, voy a colocar el rubro y los servicios verticalmente en la columna. Vamos a configurar la pantalla para flexionar. Entonces tenemos que cambiar la dirección. Hagámoslo columna. Y luego coloca los artículos en el centro usando align items, center. Bien, entonces los elementos están alineados. A continuación voy a personalizar el rumbo. Vamos a seleccionarlo. En primer lugar, vamos a aumentar el tamaño de la fuente, que sea cinco RAM. Después haz que la fuente sea más clara usando font-weight a 100, luego cambia el color, hazla Y por último, voy a crear algo de espacio en la parte inferior usando margen inferior que corrimos. Entonces, como pueden ver, el rumbo se ve bien. Sigamos adelante y nos ocupemos de los servicios. Voy a colocarlos horizontalmente en fila. Seleccionemos los servicios y fijemos la pantalla en flex. Muy bien, después de eso, voy a seleccionar el servicio en sí En primer lugar, definamos el ancho. Voy a hacer 35 RAM que necesitamos para alinear textos en el centro. Y también crear algo de espacio en los lados izquierdo y derecho usando margen. Vamos a ponerla a cero y fibrina. Bien, así que eso es todo sobre el servicio. Ahora tenemos que empezar a personalizar sus elementos de manera individual. Sigamos adelante y comencemos con los iconos Font Awesome. Selecciónalos, aumenta el tamaño de la fuente, hazlo seis RAM. Después cambia el color. Voy a usar tu color o dos a nueve F E7. Y luego crea algo de espacio en la parte superior e inferior usando margen. Vamos a ponerla en dos rampa y cero. Bien, así que los iconos Font Awesome se ven bien. Sigamos adelante y comencemos los encabezamientos. Seleccionemos el rumbo del servicio. Establezca su tamaño de fuente en tres RAM. Entonces voy a establecer el peso de la fuente a 300 y también crear algo de espacio en la parte inferior usando margen inferior una rampa. Por lo que los encabezamientos están personalizados. Pasemos a los párrafos. Entonces como párrafo de servicio. Luego establezca el tamaño de fuente en 1.5 RAM. Voy a hacer que la fuente sea un poco más audaz. Vamos a establecerlo en 600 y también crear espacio en la parte inferior. Vamos a establecer el margen inferior a la rampa. Bien, Entonces el párrafo, Se ve bien. Lo único que quiero hacer, que disminuirá ligeramente la altura de línea del párrafo. Vamos a establecerlo en 1.2. Bien, entonces con un párrafo, ya terminamos. Pasemos al último elemento en los servicios, que es un botón. En primer lugar, definamos su ancho. Voy a hacer 20 RAM. Después haz algo de espacio en lugar de las partes y usando padding, vamos a configurarlo en 1.5 RAM. Además, voy a hacer transparente el color de fondo. Después haz los botones a su alrededor usando border-radius. Tres rampas. Agreguemos un par de estilos más al botón. Voy a cambiar la frontera. El 2.1 correr sólido. Y como el color, vamos a usar O365, B0, B1. Entonces necesitamos cambiar el color. Vamos a usar aquí de nuevo color R36, b0, b1. Además, voy a aumentar el tamaño de la fuente. Hagámoslo 1.5 RAM que hacer que la fuente sea negrita. Y también cambiar el puntero del método del cursor. Bien, Así que los botones se ven bien. Y en realidad con esta sección ya terminamos. Se ve bien. Y ahora tenemos que encargarnos de la siguiente sección. 93. Proyecto 10 - Sección de características de creación y estilo: Bien, entonces una vez que hayamos terminado de trabajar en la segunda sección, ahora es el momento de seguir adelante y empezar a construir. La siguiente sección va a ser sobre algo así como características. Y será un poco simple sección tendrá un encabezado de sección y seis características diferentes con un bonito fondo azul Así que sigamos adelante y comencemos a crear el marcado HTML. Vamos a crear nuevos comentarios para la Sección tres. Después abre una etiqueta de sección con una clase, sección tres. Por lo que en esta sección tendremos dos partes distintas. El primero va a ser el rumbo. Abramos la etiqueta de encabezado H1 con el encabezado de la sección de clase tres. El contenido va a ser el mundo prefiere pagadero. En cuanto a la segunda parte , van a ser las características. Entonces, en general, tendremos seis características diferentes. Vamos a abrir la etiqueta div con la entidad de clase. Cada característica incluirá el encabezamiento y el párrafo. Abramos la etiqueta de encabezado h3 con el encabezado de entidad de clase. Y con la protección avanzada del contenido. Entonces necesitamos un párrafo con el párrafo de entidad de clase como contenido. Voy a insertar aquí algún texto ficticio. Bien, así que eso es todo sobre la primera característica. En general, tendremos seis de ellos. Así que vamos a seguir adelante y duplicarlo cinco veces y luego mostrarte el contenido de los elementos del encabezado. El segundo va a ser pagos rápidos. Entonces tendremos alcance global. El siguiente va a ser una integración fácil que simple y conveniente. Y el último va a ser el servicio 24-siete. Bien, así que eso es todo. El marcado HTML está listo, y ahora tenemos que darle estilo a esta sección Sigamos adelante y creamos nuevos comentarios en el archivo CSS. Necesitamos aquí la sección tres y la sección tres. Y luego seleccionar esta sección elementos. En primer lugar, voy a definir su ancho. Hagámoslo al 100 por ciento. Entonces voy a crear algún espacio en la parte superior e inferior dentro de esta sección, usemos padding, pongamos en cinco rem y cero, y luego definamos fondo. Voy a usar gradiente lineal con tres colores diferentes. Pero al principio, voy a definir la dirección de la transición de color. Va a ser de izquierda a derecha, y luego usar el valor RGBA El primero va a ser tres, luego 303129, y la opacidad Este segundo color va a ser el 967153. Y la opacidad de 0.8. En cuanto al tercer color, vamos a hacer 4321 a cuatro Y la opacidad punto noche, y también cambiar el color del texto. Hazlo blanco. Bien, después de eso, voy a alinear los elementos usando Flexbox El contenido se va a colocar en el centro horizontalmente. Vamos a configurar la pantalla para flexionar. Entonces para colocar el encabezado y el contenido uno encima del otro, vamos a usar la columna de dirección flexible. Y luego para colocar el contenido en el centro, vamos a usar align items center. Bien, entonces los elementos están alineados. Sigamos adelante y personalicemos este encabezamiento de sección. En primer lugar, voy a definir el tamaño de la fuente. Hagámoslo cinco RAM. Después haz que la fuente sea más ligera, establece font-weight en 300 Y finalmente crea algo de espacio en la parte inferior usando el margen inferior cinco rem. Bien, sigamos adelante y personalicemos las funciones. Seleccionemos un envoltorio div elementos y definamos el ancho 70%. Y luego voy a colocar las características una al lado de la Para eso, necesitamos usar display flex. Bien, entonces ahora tenemos que colocar las características en dos líneas distintas. Pero antes de eso, voy a definir un ancho de cada característica. Quiero que cada característica ocupe un tercio del ancho de la envoltura Así que vamos a seleccionar característica, entonces, definir el ancho. Entonces ahora voy a usar la función calc porque necesitamos dividir el 100% por tres En este caso, cada característica ocupará un tercio del ancho del envoltorio Y después de eso, usemos flex wrap. Para envolver. Nos permitirá colocar los futuros en dos líneas distintas. Bien, entonces ahora tenemos que resolver la característica en sí. Vamos a los textos de la aerolínea en el centro. Entonces voy a crear algo de espacio en los lados izquierdo y derecho dentro de la función usando relleno. Vamos a configurarlo en 0.5 RAM. Y finalmente crea algo de espacio en la parte inferior usando margen inferior cinco renta. Bien, entonces ahora tenemos un resultado mucho mejor. A continuación tenemos que darle estilo al encabezado y al párrafo. Vamos rumbo futuro. En primer lugar, voy a definir un ancho. Vamos a configurarlo en contenido máximo. En este caso, el elemento ocupará el ancho que se requiera para mostrar el contenido. A continuación, necesitamos el tamaño de fuente. Hagámoslo tres RAM. También establece el peso de la fuente en 300. Y entonces tenemos que definir margen. Vamos a ponerla a cero en la parte superior. Entonces para centrar los elementos, necesitamos establecer margin a auto en los lados izquierdo y derecho. En cuanto al fondo, va a ser una renta. Bien, finalmente, cuidemos el párrafo. Seleccionar párrafo futuro. Encuentra Tamaño de fuente, hazlo 1.5 RAM que necesitamos font-weight. Hagámoslo 500. Y por último, voy a disminuir la altura de línea. Vamos a establecerlo en 1.2. Bien, así que finalmente, somos la tercera sección. Ya terminamos. Se ve bien. Sigamos adelante y nos ocupemos de la siguiente sección. 94. Proyecto 10 - Creación y estilo Sección de introducción de inicio: Ya hemos creado un par de secciones de la portada. Es hora de seguir adelante y continuar con la construcción de la siguiente sección. Tenemos que construir una cuarta sección de la portada, probablemente secciones anteriores Esta va a ser una sección sencilla también. Tendremos un encabezado seguido de la imagen y la lista. Sigamos adelante y comencemos a crear el marcado HTML e ir a instituir nuevos comentarios para la Sección cuatro Después abre una etiqueta de sección con la sección de clase cuatro. Por lo que tendremos dos partes principales en esta sección elementos. El primero va a ser el encabezamiento de esta sección. Abramos la etiqueta H1 con la sección de clase para encabezado. El contenido va a ser empezar con Paypal. Entonces necesitamos una etiqueta div que envolverá la imagen y la lista. Voy a asignar a la sección de clase para el contenido. Entonces ahora voy a insertar una imagen, pero al principio vamos a crear una etiqueta div, que será la envoltura de la imagen. Voy a asignar a la sección cluster para envoltorio IMG Y luego inserte aquí en la imagen. Voy a seleccionar MacBook dot PNG de la carpeta images. Bien, entonces después de eso, necesitamos crear una lista Vamos a abrir la etiqueta UL con una sección de clase para al menos el que incluirá tres elementos de lista diferentes. Vamos a abrir la etiqueta LI con la sección de clase para el elemento de la lista. Entonces, cada elemento de la lista constará de dos elementos span. El primero va a ser el número. cuanto a la segunda , debe ser el contenido del ítem que es la etiqueta open span con la clase número uno. Entonces necesitamos otra etiqueta span. En realidad, dentro de esa etiqueta span, tendremos link. Insertemos aquí una cuenta comercial. Duplicemos el elemento LI dos veces y hagamos algunos cambios. Entonces en los ítems de la segunda y tercera lista tendremos algún texto ficticio ¿Bien? Entonces se prepara el marcado HTML, y ahora tenemos que empezar a personalizar esta sección Insertemos nuevos comentarios y la sección del archivo CSS para el final de la sección cuatro. Después selecciona una sección de elementos y define el ancho, hazlo al 100%. Entonces voy a crear espacio en la parte superior e inferior de esta acción usando padding. Vamos a establecerlo en diez RAM cero. Y luego voy a alinear encabezado y el contenido usando flexbox Necesitamos display flex. Entonces tenemos que cambiar la dirección. Hagámoslo columna. Y también con el fin de colocar el contenido en el centro, vamos a usar align items center. Bien, entonces los elementos están alineados. A continuación, vamos a personalizar este encabezado de sección, seleccionado, definido tamaño de fuente, que sea cinco RAM. Entonces voy a cambiar el peso de la fuente. Hagámoslo 400. También cambia el color. Voy a hacerlo 44 y luego crea un espacio en la parte inferior, uso margen, rampa inferior cinco. Bien, sigamos adelante y cuidemos el contenido de esta sección Voy a colocar la imagen y lo menos lado a lado. Así que vamos a seleccionar el envoltorio div y asignado a él display flex. Las deudas. Personalicemos la imagen. En realidad, ahora mismo es demasiado grande. Seleccionemos envoltorio. Voy a definir el ancho. Hagámoslo 50 RAM. Después selecciona la propia imagen. Voy a establecer con el 200 por ciento. En este caso, la imagen ocupará el ancho de su elemento padre, que es el envoltorio. Y entonces voy a disminuir ligeramente la opacidad de la imagen Vamos a establecerlo en 0.8. Bien, entonces la imagen se ve bien Vamos a entrar y personalizar la lista. Seleccionar elementos UL. En primer lugar, voy a definir el ancho. Hagámoslo 55%. Luego crea algo de espacio en la parte superior usando margen superior para correr. Ahora tenemos que trabajar en los ítems de la lista. Seleccionemos elementos LI y definamos el tamaño de fuente. Voy a hacer 1.6 RAM. Después haz que la fuente sea un poco más audaz. Vamos a establecer la forma de fuente a 600. Y después de eso, voy a colocar los números y los elementos de texto uno al lado Usemos display flex y también coloquemos los artículos en el centro. Y finalmente crear algo de espacio en la parte inferior usando margen inferior para correr. Bien, así que ahora voy a encargarme de los números. Vamos a seleccionarlos. En primer lugar, definamos la anchura y la altura. Voy a hacer las dos 3.5 RAM. Entonces necesitamos crear el borde con el valor es 0.1 RAM sólido. El color 555. Además, tenemos que hacerlos a su alrededor. Usemos border-radius con un valor del 50 por ciento. Y además crear este espacio en el lado derecho es emoji escribir 1.5 rampa. ¿Bien? Después de eso, tenemos que colocar los números en el centro de los círculos. Para eso, voy a usar flexbox. Necesitamos display flex. Y para centrar, tenemos que usar justify-content center y alinear items center Bien, así que ya casi terminamos. Lo único que voy a hacer es cambiar el color del enlace en el primer elemento de la lista y hacerlo un poco más audaz Seleccionemos elementos de enlace. Voy a cambiar el color. Hagámoslo o36, b0, b1. Y también cambiar el peso de la fuente. Hazlo audaz. Bien, así que eso es todo. La cuarta sección se ve bien. Sigamos adelante. 95. Proyecto 10 - Crear y Style Footer: Bien, así que paso a paso, estamos avanzando. Ahora es el momento de crear la última sección de la portada. Va a ser la quinta sección. Constará de dos partes principales. La primera parte incluirá un rubro y compré algunos. cuanto a la segunda bola va a ser el pie de página, incluirá el contrato de arrendamiento y un texto de copyright. Sigamos adelante y comencemos a crear el marcado HTML. Voy a insertar nuevos comentarios para la Sección cinco. Después abre una etiqueta de sección con una sección de clase cinco. Entonces como dijimos, vamos a tener dos partes principales. El primero va a ser la Sección Cinco. Parte superior. Aquí tendremos sólo dos elementos, rumbo y Bateson Abramos el encabezado H2, etiquetemos con una sección de clase cinco, encabezado superior. En cuanto al contenido, deja que las cosas si te registres y comienzas. En cuanto al botón va a ser similar al botón que hemos creado en la primera sección. Estoy en el botón azul. Entonces usemos la clase. Azul. Btn. Se inicia el contenido. Entonces como puedes ver, ya es estilo. Bien, eso es todo sobre la primera parte. Sigamos adelante y creamos el pie de página. Voy a usar el elemento de pie de página HTML5 con un pie de página de clase. El pie de página en sí constará de dos partes. Tendremos un filtro arriba y pie de página inferior. Por lo que la parte superior incluirá dos listas diferentes. Vamos a abrir la etiqueta UL con una lista de pie de página de clase. Después voy a insertar tu etiqueta LI, seguida de la etiqueta de enlace con el conflicto de ayuda de contenido. Entonces en ambas listas, tendremos cinco ítems de lista. Así que vamos a duplicar el elemento LI cuatro veces y luego hacer algunos cambios. Para el segundo elemento de la lista va a ser tarifas que tendremos características de seguridad. Y el último va a ser fusilado. ¿Bien? Voy a duplicar todos los elementos de la lista y luego hacer algunos cambios nuevamente. La segunda lista va a ser de cuatro idiomas. Vamos a insertar tu inglés. Entonces. El siguiente va a ser español, francés, italiano, S4. El último elemento va a ser la imagen. Entonces, en lugar del texto, instituyamos un elemento IMG Seleccionemos FLAC punto PNG de la carpeta de imágenes. Va a ser la bandera nacional georgiana. Bien, eso es lo de la fruta o la parte superior. Ahora necesitamos Footer Bottom, que incluirá sólo un solo párrafo, será copyright de clase. Y con los siguientes textos, necesitamos derechos de autor, seguidos de la entidad HTML5, que será el signo de copyright. Y también vamos a insertarte. Todos los derechos reservados. Bien, entonces finalmente se prepara el marcado HTML y ya estamos listos para personalizar esta sección Sigamos adelante y creamos nuevos comentarios y archivo CSS. Necesitamos la Sección Cinco. De la Sección Cinco. Después seleccione los elementos de sección y defina con hacer 100%. Después de eso, voy a seleccionar la parte superior de los elementos de esta sección. Definamos su ancho, hazlo al 100%. Y también voy a cambiar el color de fondo. Vamos a usar tu color. F3, F7, F8. Bien, después de eso, voy a colocar los elementos en el centro. Y también quiero crear algo de espacio en la parte superior e inferior en lugar del elemento. Vamos a usar el centro de alineación de texto. En cuanto a este ritmo, voy a hacerlo usando relleno. Vamos a ponerla en siete rem. Y luego cero. Después de eso, voy a encargarme del rumbo. Vamos a seleccionarlo. En primer lugar, vamos a aumentar el tamaño de la fuente, que sea 3.5 gramos. Después haz que la fuente sea un poco más clara. Establezca el peso de la fuente en 400. Y también crea algo de espacio en la parte inferior usando margen inferior con un valor para R1. Bien, así que eso es todo sobre el rumbo. Según el botón azul. Está por todos estos azulejos. Tendremos un par de botones azules en el proyecto. Entonces voy a agarrar el código CSS del párroco y ponerlo en los estilos comunes Además, quiero añadir aquí un estilo más. Cambiemos el tipo del más grueso. Haz que apunte a Así con la primera parte, la parte superior, ya terminamos. Sigamos adelante y empecemos a trabajar en el pie de página. En primer lugar, definamos su anchura y altura. Voy a establecer el ancho al 100%. En cuanto a la altura, hagámoslo 15 corrieron. A continuación, voy a alinear los elementos usando Flexbox. Usemos display flex. Voy a colocar los elementos verticalmente en una columna, y también quiero alinearlos en el centro. Entonces sigamos adelante y cambiemos la dirección. Hazlo columna. A continuación, voy a crear espacio entre los elementos flex. Uso justificar contenidos, espacio entre. Después, para colocar los elementos en el centro, utilice alinear elementos al centro. Y por último, crear algo de espacio dentro del pie de página. Usa acolchado. Voy a configurarlo en cuatro carreras en la parte superior que cero en el lado derecho, tres RAM en la parte inferior y cero en el lado izquierdo. Bien, entonces antes de continuar, quiero cambiar el tamaño de la imagen. Es demasiado grande ahora mismo. Hagamos su ancho 3.8 RAM. Y también voy a disminuir la opacidad, hacerla 0.6. Bien, ahora, es mucho mejor. Sigamos adelante y cuidemos el pie de página arriba. Vamos a establecer su ancho en 70%. A continuación, voy a colocar ambas pistas lado a lado. Así que vamos a establecer display a flex y también crear espacio entre las listas usando justificar el espacio de contenido entre. Bien, después de eso, voy a crear un borde en la parte inferior del pie o arriba. Vamos a facilitar los valores inferiores del borde 0.1 RAM que este mosaico va a ser punteado. En cuanto al color, vamos a usar 262626 y también crear algo de espacio en la parte inferior usando relleno En la parte inferior una carrera. Bien, ahora podemos personalizar los enlaces. Quiero colocar los elementos de la lista horizontalmente en una fila. Seleccionemos una etiqueta UL. Voy a usar Flexbox. Vamos a configurar la pantalla para que se flexione y luego coloquemos los elementos en el centro usando alinear elementos en el centro. Siguiente Voy a darle estilo a los elementos de la lista de ambas listas. Y usar derecho de margen? Con el valor 2.5. Corre. Después de eso, seleccionemos los enlaces. En primer lugar, vamos a cambiar el tamaño de fuente, que sea 1.5 RAM. Entonces haz que el teléfono sea más audaz. Peso de la fuente a 600, y también cambiar el color. Hazlo al 62626. Bien, así que finalmente, tenemos que personalizar el párrafo de copyright. Vamos a seleccionarlo. Haga que su tamaño de fuente sea un punto para la RAM. Luego establece el peso de la fuente en 600. Y también crear algo de espacio entre las letras usando espaciado entre letras, rampa 0.1. Bien, así que con la quinta sección ya terminamos y en realidad hemos terminado de trabajar en la portada Ahora está abajo para tomar tienes que iniciar sesión página. Entonces, sigamos adelante. 96. Proyecto 10 - Página de inicio de sesión de creación y estilo: Bien, así que hemos terminado trabajar en la portada del proyecto, y ahora es el momento de encargarnos de esta segunda página, que va a ser la página de inicio de sesión Echemos un vistazo al proyecto terminado. Entonces aquí tenemos la página de inicio de sesión. No tenemos tanto contenido. Crearemos el logo seguido los campos de entrada y dos botones. Antes de comenzar a construir el marcado HTML página de inicio de sesión En primer lugar, voy a ocultar en absoluto la portada. Vamos a seleccionarlo y asignado a él, mostrar ninguno. Bien, ahora, abajo, justo después de la portada y voy a insertar nuevos comentarios para la página de inicio de sesión. Luego abre una etiqueta div con una página de inicio de sesión de clase. Va a ser el envoltorio. A continuación, voy a abrir otra etiqueta div que envolverá el contenido. Llamémoslo contenido de la página de inicio de sesión. El contenido constará de dos partes principales. Tendremos el logo y un formulario de elementos. En realidad, el logo será similar al nulo para logo. Solo necesitamos cambiar los colores de las letras. Además de eso, también crearemos un logotipo similar en la página de registro Entonces para evitar usar el mismo código una y otra vez, voy a hacer lo siguiente. Vamos a asignar al logotipo de la barra de navegación otra clase, quiero decir logo Va a ser el nombre de clase común para los tres logotipos que usaremos a lo largo de este proyecto. Que voy a agarrar el código, pegarlo hacia abajo, y hacer algunos cambios. No necesitamos el nombre de la clase, logotipo de la barra de navegación en lugar de él. Agreguemos aquí el logotipo de la página de inicio de sesión. A continuación, voy a envolver media parte de la palabra paypal con un elemento span. Y también envolver la segunda parte con un elemento span también. En realidad, lo estoy haciendo porque ambas partes tendrán diferentes colores. Además de eso, también voy a cambiar el nombre de la clase en el archivo CSS. Vamos a llamarlo logo y también poner este código en las acciones comunes. Entonces como puedes ver, el logo ya tiene los estilos. En realidad no es visible en este momento porque sí tiene el color blanco. Bien, sigamos adelante y creamos el resto de los elementos. El siguiente va a ser el formado con un formulario de página de inicio de sesión de clase. Entonces dentro del elemento form, tendremos un par de elementos diferentes. En primer lugar, necesitamos introducir elementos y es la clase de científico, formar entrada de inicio de sesión. También necesitamos atributo placeholder, correo electrónico o número de móvil Duplicemos los elementos de entrada y cambiemos el tipo va a ser contraseña. Y también deshazte del atributo placeholder. Después de eso, voy a crear el botón para iniciar sesión. Vamos a abrir la etiqueta de entrada con una clase de formulario Login btn. El tipo va a ser Barton. En cuanto al valor va a ser log n. Así se crea el Buxton A continuación necesitamos un enlace elementos que se asignen a su formulario de colapso enlace de inicio de sesión. Y como el contenido, te voy a insertar teniendo problemas para iniciar sesión. Después de eso, voy a crear un elemento span como el contenido. Vamos a insertarte a ti. O finalmente vamos a crear un segundo botón para registrarse. En realidad voy a copiarlo. El primer botón, cambiar el nombre de la clase se va a formar, regístrate btn En cuanto al valor, vamos a insertarte, regístrate. Bien, así que eso es todo con respecto al marcado HTML. Ahora tenemos que darle estilo a la página de inicio de sesión. Pero primero, insertemos nuevos comentarios en la página de inicio de sesión del archivo CSS. Entonces y fuera de la página de inicio de sesión. Además de eso, voy a agregar comentarios para la portada. En realidad, lo olvidé al principio. Luego seleccione los desarrollos rápidos y defina la anchura y la altura. Voy a establecer el ancho al 100%. Eso es lo que va a ser la altura al 100% de la vista. Bien, Siguiente vamos a seleccionar el contenido y definir su posición Voy a ponerla en valor absoluto. Necesitamos posicionar relativo para el elemento padre. Después de eso, definamos las propiedades superior e izquierda. Voy a establecer la propiedad superior al 12%. En cuanto a la propiedad dejada, va a ser del 50 por ciento. Entonces voy a centrar el elemento perfectamente. Para eso necesitamos transformar que la función traducir con dirección x y con valor -50 por ciento. Después de eso, voy a alinear el logo y el formulario usando Flexbox Vamos a configurar la pantalla para flexionar. Entonces necesitamos colocar los elementos verticalmente en una columna así que necesitamos cambiar la dirección, hacerla columna, y también usar align items center. Bien, a continuación vamos a crear el borde alrededor de los contenidos Vamos a establecerlo en 0.1 rem sólido, y como el color, vamos a usar CF, CF, CF. Por último, voy a crear algo de espacio dentro de la caja. Hagámoslo usando relleno. Que sea tres RAM en los cuatro lados. ¿Verdad? Esa es la sílaba los contenidos. Ahora tenemos que personalizar el logo. En primer lugar, vamos a crear algo de espacio en la parte inferior, voy a seleccionar el logotipo de la página de inicio de sesión. Definamos margen inferior. Que sea un punto para correr. A continuación, voy a cambiar los colores de las letras. Empecemos con letras P. Necesitamos aquí página de inicio de sesión, logo, seguido de la clase P1. Hagamos el color oh, 64699. Entonces duplica este código y cambia el nombre de clase que necesitamos aquí, P2, porque va a ser la segunda letra P. En cuanto al color, vamos a usar aquí tres a cuatro f 0. Bien, entonces las letras p son de color. Sigamos adelante y nos ocupemos del resto de las letras. Como recuerdas, hemos separado la palabra PayPal en dos partes. Seleccionemos la primera parte. Voy a usar el logotipo de la página de inicio de sesión de clase que necesitamos span seguido del enésimo selector secundario Va a ser el tercer elemento. Cambiemos el color, hazlo 064699. Después duplique este código. Cambia el número que necesitamos aquí. Cuarto hijo también. El color va a ser de tres a cuatro f. bien, así que con el logo, terminamos Sigamos adelante y cuidemos los elementos formados. Selecciónelo. Primero. Voy a alinear los elementos verticalmente en una columna para eso, vamos a usar flexbox Necesitamos mostrar flex, luego flexionar la dirección de la columna, y alinear los artículos en el centro. Bien, sigamos adelante y comencemos a darle estilo a los elementos de entrada. Como saben, tenemos dos campos de entrada y dos botones, los cuales se crean usando las etiquetas de entrada. Los cuatro elementos tendrán algunos estilos comunes. Así que vamos a seleccionarlos usando un nombre de etiqueta. En primer lugar, necesitamos iniciar sesión formulario de página seguido de la entrada. Entonces al principio definamos ancho y alto. Voy a establecer el ancho a 37. Corre. Pongamos la altura va a ser de 4.5 gramos. Luego crea espacio alrededor de las entradas usando el margen. Que sea una sola carrera. Y también hacer las entradas redondeadas usando border-radius. La rampa de 0.5 vino después de eso. Seleccionemos los dos primeros campos de entrada usando la entrada de inicio de sesión del formulario ClassName Vamos a crear algo de espacio dentro de las entradas en los lados izquierdo y derecho usando padding, hazlo 0.1, 0.5 g Entonces voy a cambiar el borde, hacerlo 0.1, correr sólido, y el color 777. Y por último, aumentar el tamaño de la fuente, hacerla 1.6 corrió. ¿Verdad? Entonces eso es todo con respecto a los campos de entrada, sigamos adelante y personalicemos el botón de inicio de sesión. Vamos a seleccionarlo. Primero. Voy a definir el color de fondo. Te permite ver tu color. Juramento nosotros 6P1 Luego cambia el color del texto y hazlo blanco. Además, necesitamos frontera con los valores 0.1 habitación sólida. Y como el color, vamos a usar de nuevo o36, B0, B1. Entonces voy a encargarme de la fuente. Vamos a aumentar el tamaño, que sea 1.8 Ran. También hazlo más audaz, establece el peso de la fuente en 600, y finalmente cambia el tipo del más grueso. hazlo puntero Bien, entonces el botón Iniciar sesión está personalizado. A continuación, voy a personalizar el elemento link. Vamos a seleccionarlo, aumentar su tamaño de fuente, hacerlo 1.6 RAM, luego cambiar el color. Usemos tu color o dos a nueve FC7. Y luego crear algo de espacio en la parte superior e inferior usando margin, lo voy a establecer en 1.2 rem en la parte superior que cero en el lado derecho, una habitación en la parte inferior, y cero en el lado izquierdo. Bien, entonces el elemento link se ve bien. Y ahora tenemos que encargarnos de estos elementos span. Estoy en la palabra o que tenemos aquí. En realidad, además de esta palabra, necesitamos crear dos líneas en los lados izquierdo y derecho como las tenemos en el proyecto terminado. Así que sigamos adelante y seleccionemos elementos span. Al principio, voy a definir su ancho. Hagámoslo correr. Luego establece el tamaño de fuente en 1.8. Ran, cambia el color. Ves tu color 888, y luego creas algo de espacio en la parte superior e inferior usando el margen que se le asigna. Una carrera y luego cero. Bien, y así este elemento span está estilizado y ahora tenemos que crear tus líneas Voy a crearlos usando pseudo elementos antes y después Empecemos con los pseudo elementos antes. Se va a colocar en el lado izquierdo de los elementos span. En primer lugar, definamos el contenido, lo hagamos vacío. Entonces voy a establecer el ancho a 16 RAM. En cuanto a la altura, va a ser 0.1 RAM. Y también cambiar el color de fondo, hacerlo C, C, C. Así que en este momento la línea no es visible. Tenemos que definir esta posición. Hagámoslo absoluto. Entonces necesitamos posicionar relativo para los elementos padre, que es el span. Después de eso, definamos la posición superior. Va a ser del 50 por ciento. Entonces necesitamos, bien, hagamos que sea 3.5 RAM. Entonces para centrar los elementos verticalmente, vamos a usar Transformar. Traducir Y con valor -50 por ciento. Bien, así que eso es pecado respecto a la primera línea. Necesitamos lo mismo del lado derecho. Así que vamos a duplicar este código. Cambio antes y después. Entonces en lugar de la posición derecha, use left. Bien, así que con las líneas terminamos, sigamos adelante y personalicemos el último elemento de la página de inicio de sesión, que es un párroco Yo hice este registro BTN. Cambiemos el color de fondo. Vamos a usar tu color, D, B, E, D, C. A continuación voy a cambiar el borde. Vamos a asignar dos a 0.1 RAM, sólida y del mismo color, DBE ATC Entonces voy a aumentar el tamaño de fuente, que sea 1.8 RAM. Después cambia el peso de la fuente. Hazlo más audaz. Use 600. Por último, cambia el tipo de cursor, hazlo puntiagudo. Bien, así que eso es todo. Hemos terminado de trabajar en la página de inicio de sesión. Ahora, es el momento de seguir adelante y llevarte de esta página de registro 97. Proyecto 10 - Página de inscripción de creación y estilo: Bien, entonces hemos creado la página de inicio de sesión, y ahora es el momento de construir la última página de nuestro proyecto, que va a ser la página de registro Echemos un vistazo al proyecto terminado. Entonces, como puedes ver, la página de registro consta de un par de partes diferentes Tenemos la parte superior, que incluye el logo y el botón Iniciar sesión. Entonces abajo, tenemos dos partes distintas del contenido. En el lado izquierdo tenemos un par de imágenes de los clientes. En cuanto al lado derecho, consta de dos opciones y una caja. Bien. Entonces eso es todo sobre la página de registro. Sigamos adelante y comencemos a crear el marcado HTML. Vamos a insertar tus nuevos comentarios. Después de la página de inicio de sesión. Necesitamos página de registro y página de registro. Después abre una etiqueta div con la página de registro de clase. Entonces como ya dijimos, tendremos dos partes principales, la parte superior y el contenido. Entonces es la etiqueta div abierta con la parte superior de la página de registro de clase. Necesitamos instituir el logo y el botón Iniciar sesión. Al igual que la página anterior, estoy en la página de inicio de sesión, necesitaremos el mismo logotipo que usamos en la portada. Así que vamos a agarrarlo de la primera sección y pegarlo aquí abajo. Voy a cambiar el nombre de la clase. Necesitamos usar el logotipo de la página de registro. Además de eso, necesitamos crear un botón como el contenido. Vamos a iniciar sesión en el Instituto. Bien, así que veamos sobre el lado superior. Sigamos adelante y creamos el resto del contenido. Voy a abrir la etiqueta div, que va a ser el contenido de la página de registro El contenido constará de dos partes. Tendremos el lado izquierdo y el lado derecho. Vamos a abrir la etiqueta div con un contenido de página de registro de clase a la izquierda El lado izquierdo incluirá tres imágenes y el encabezado, Let's open div tag, que será el envoltorio de las imágenes. Voy a asignar a la clase contenido imágenes dejadas. Después inserta aquí elementos IMG y selecciona persona un punto JPEG de la carpeta de imágenes Entonces voy a duplicar un elemento de imagen dos veces y cambiar los nombres de la imagen. Bien, a continuación necesitamos el rumbo. Vamos a abrir la etiqueta de encabezado H1 con un contenido. Ve por ti mismo por qué millones de personas se ríen del papel. Bien, así que eso es todo sobre el lado izquierdo. Ahora necesitamos crear el lado derecho. Voy a abrir la etiqueta div con el contenido de la página de registro de clase . ¿Verdad? Por lo que esta parte incluirá dos elementos de encabezado y una forma que está abierta. Etiqueta de encabezado H3 con el contenido. Regístrate en paypal. Es gratis. En cuanto al segundo encabezado, va a ser la etiqueta de encabezado H4 donde el contenido elija entre dos tipos de cuentas Bien, así que a continuación voy a crear un formulario de elementos. Vamos a asignarle formulario de página de registro de clase. Dentro de los elementos del formulario, tendremos que introducir grupos y un botón. Así que vamos a abrir la etiqueta div con la clase input-group. El grupo de entrada consistirá en un botón de radio y algunos elementos de texto como encabezado y párrafo. Vamos a abrir la etiqueta de entrada, un tipo de radio. También necesitamos usar atributo llamado nombre con casilla de verificación devalue Y además de eso, voy a usar otro atributo llamado checado. Significa que el primer botón de radio se comprobará por defecto. Bien, a continuación voy a abrir la etiqueta div con una opción de clase. Incluirá encabezamiento y párrafo. Eso es h3 abierto, etiqueta de encabezado con el contenido, cuenta personal Entonces voy a abrir una etiqueta p con algún texto ficticio. Sigamos adelante y dupliquemos este código. Una vez. Voy a deshacerme del atributo marcado y también cambiar la cuenta personal a cuenta comercial. Por último, voy a crear un botón que va a ser similar a los botones azules que creamos en la portada. Abramos la etiqueta de botón con una clase btn azul. Y luego como el contenido aquí mismo, continúe. Bien, entonces antes de que empecemos a darle estilo a la página de registro, voy a ocultar la página de inicio de sesión Vamos a asignarle, mostrar ninguno por un tiempo Bien, Así que ahora estamos listos para comenzar a iniciar la página de registro Vamos a insertar nuevos comentarios en el archivo CSS. Es la página de registro. Y fuera de la página de registro. A continuación, seleccione los elementos div envoltorio. Voy a establecer su ancho al 100%. En cuanto a la altura, hagámosla al 100% de la ventanilla. En realidad, creo que sería mejor si hacemos esas imágenes más pequeñas porque en este momento son demasiado grandes. Así que seleccionemos imágenes y hagamos su renta de ancho 18. Bien, entonces ahora es mucho mejor. Volvamos a los rápidos desarrollos. A continuación, voy a cambiar el fondo de la página. Echemos un vistazo al proyecto terminado. Entonces como puedes ver, la parte superior tiene un fondo diferente. Crearemos este tipo de fondo con una función de degradado lineal. Así que definamos fondo con el gradiente lineal. La dirección de la transición va a ser de arriba a abajo. En cuanto a los colores, voy a usar valores RGBA. El primero va a ser 1123 veces. Y también aquí opacidad 0.9. En cuanto al segundo valor RGBA va a ser el color blanco, la opacidad, 0.8 Entonces quiero que el color blanco empiece a aparecer después del diez por ciento de la transición. Entonces necesitamos entrevistar al diez por ciento. Entonces como puedes ver, tenemos aquí un color de fondo más oscuro para la parte superior. Bien, Siguiente, vamos a encargarnos del diseño. Para eso. Voy a usar otra vez Flexbox. Vamos a configurar la pantalla para flexionar. Entonces voy a alinear los elementos flex verticalmente en la columna, así que necesitamos cambiar la dirección. Vamos a configurarlo en columna y también alinear los elementos en el centro. Bien, así que ahora voy a encargarme de la parte superior de la página Seleccionemos el desarrollo. En primer lugar, voy a definir ancho y alto. Vamos a establecer el ancho en 120 RAM. En cuanto a la altura, hagamos que sea diez rampa. Además de eso, voy a utilizar de nuevo Flexbox. Vamos a configurar la pantalla para flexionar. A continuación, voy a crear espacio entre los elementos flexibles usando justificar el espacio de contenido entre y también alinear los elementos verticalmente en el centro. Y finalmente, vamos a crear algo de espacio en la parte inferior usando la rampa de margen inferior cinco. Bien, así que los elementos están muy bien alineados. En realidad el logo se ve bien. Sólo tenemos que cambiar una cosa. Tenemos que cambiar el color de la segunda letra P. Entonces, seleccionemos el logotipo de la página de registro, seguido de la clase P2 Vamos a establecer el color a E9. E9, E9. Bien, veamos, respecto al logo, sigamos adelante y personalicemos el botón Vamos a seleccionarlo. Al principio. Vamos a definir este ancho, que sea ocho rampa. Entonces voy a crear algo de espacio dentro del botón usando relleno. Hagámoslo 0.7 rem en los cuatro lados. Entonces voy a cambiar el color de fondo. Hagámoslo transparente. Crea el borde, hazlo 0.1 rem sólido. Y como el color, usemos el blanco. Y también voy a hacer redondear el botón usando border-radius con rampa de valor tres Bien, después de eso, vamos a encargarnos del texto. Vamos a establecer el tamaño de fuente en 1.3 RAM. Entonces voy a hacer que el teléfono sea más audaz. Pongamos el font-weight a 600, cambiemos el color del texto para que sea blanco. Y por último, voy a cambiar el tipo de lo más grueso, hazlo Bien, así que finalmente, con el lado superior, ya terminamos. Sigamos adelante y cuidemos el contenido. Seleccione los desarrollos. Y al principio definamos el ancho, hazlo 120 corrió. A continuación voy a alinear los elementos usando de nuevo Flexbox, establecer display a flex, y luego crear algo de espacio entre los elementos flex usando justify content Espacio entre, bien, así que ambos lados, quiero decir, los lados izquierdo y derecho se colocan lado a lado Y ahora tenemos que personalizarlos. Empecemos por el lado izquierdo. Seleccione el desarrollo de envoltorio. Por lo que el lado izquierdo ocupará el 60% del contenido. Así que pongamos el ancho en 60%. Entonces voy a crear un borde en el lado derecho con valor es 0.1 RAM sólido Como el color, vamos a usar B1, B1, B1. Y además de eso, voy a crear algún espacio dentro de los elementos. Vamos a poner el relleno a tres rem, en la parte superior, a la derecha y en la parte inferior. En cuanto al lado izquierdo, hagamos que sea cero. Bien, después de eso, voy a encargarme de las imágenes. Voy a seleccionar un envoltorio de las imágenes. Vamos a usar de nuevo Flexbox. Y luego crear algo de espacio en la parte inferior usando margen inferior cinco rampa. Bien, a continuación voy a personalizar la propia imagen. En primer lugar, hagamos que sean redondeados usando el radio fronterizo 50 por ciento También crear borde. Vamos a insertarte 1.5 gramos de sólido. Y como el color, vamos a usar C, C, C, y luego crear algo de espacio en el lado derecho usando margin-right five rem Bien, Entonces las imágenes se ven bien. Sigamos adelante y comencemos los elementos de rumbo. Vamos a seleccionarlo. Primero. Voy a aumentar el tamaño de la fuente. Hagámoslo para RAM. Después haz que la fuente sea más ligera, establece la forma de fuente a 300. También. Cambia el color, hazlo 333. Por último, voy a disminuir la altura de línea del rumbo. Hagámoslo 1.1. Bien, así que eso es todo sobre el lado izquierdo Sigamos adelante y personalicemos el correcto. Seleccionemos el desarrollo. En realidad ocupará hasta el 40% del ancho del contenido. Entonces voy a definir el relleno. Vamos a ponerla a tres rem en la parte superior. Después cero en el lado derecho. En cuanto a los lados inferior e izquierdo, vamos a hacerlos rampa 3D, luego cambiar el color, hacerlo 555. En realidad, veo aquí que los encabezados y los grupos de entrada se colocan uno al lado Deben estar alineados verticalmente uno encima del otro. Entonces podríamos tener un error en el archivo HTML. Vamos a comprobarlo. Como ve, el formulario se coloca fuera del envoltorio. Entonces tenemos que arreglarlo. Vamos a moverlo dentro del rapero. Bien, a continuación voy a empezar. Los rubros en general tendrán dos rubros diferentes. Seleccionemos el primero, que son los elementos de encabezado h3 Vamos a establecer el tamaño de fuente en 2.4 RAM. Después hacer el peso de la fuente 300. Entonces voy a duplicar este código. Cambiemos H3 y H4. También como tamaño de fuente, voy a usar 1.6 RAM. En cuanto al peso de la fuente, hagámoslo 500. Bien, Entonces los encabezamientos están personalizados. Tenemos aquí un tema minúsculo, en realidad no realmente el tema. Los encabezados en los grupos de entrada son etiquetas h3 y su tamaño también se cambia. Vamos a arreglar eso. Voy a seleccionar la opción H tres, luego establecer el tamaño de fuente en 1.7. Corre. En cuanto al peso de la fuente, voy a hacer 600. Bien, entonces ahora el problema está arreglado. Sigamos adelante y seleccionemos el grupo de entrada. Voy a colocar los elementos uno al lado del otro. Entonces usemos display flex. Entonces. Voy a crear algo de espacio alrededor del envoltorio usando margen con valor 1.5 round. A continuación, vamos a personalizar los párrafos. Seleccionar opción P. Voy a establecer el tamaño de fuente a 1.5 g. Bien, así que finalmente tenemos que encargarnos de los botones de radio Vamos a seleccionarlos usando type attribute. En primer lugar, aumentemos su tamaño. Voy a establecer el ancho en 30%. En cuanto a la altura, hagamos que corra. Entonces ahora son más grandes, pero tenemos que ajustar ligeramente su posición. Hagámoslo usando el margen. Voy a establecer el margen en 0.5 rem en la parte superior que un rem en el lado derecho. En la parte inferior, va a ser cero. En cuanto al lado izquierdo, hagámoslo -1.5 rampa Bien, así como pueden ver, finalmente, ya terminamos Se crea y personaliza la página de registro. Y en realidad se construye todo el proyecto. Ahora tenemos que hacerlo sensible a diferentes tamaños de pantalla. Antes de irnos, quiero hacer un par de cosas. Por defecto, tenemos que mostrar la portada. Y luego una vez que hacemos clic en los botones de inicio de sesión y registro, tenemos que navegar a las páginas adecuadas. Además, una vez que hacemos clic en los logotipos de las personas, tenemos que ir a la primera página. Para eso. Voy a usar un poco de JavaScript. Antes de eso, voy a asignar a los botones de inicio de sesión y registro, algunas clases comunes que se usarán en el JavaScript para seleccionar los elementos simultáneamente. Los tres logotipos tienen el logotipo de clase común, por lo que no necesitamos tocarlos. Asignemos a los botones de inicio de sesión y registro. En el Napa, las siguientes clases. Necesitamos iniciar sesión para el botón de inicio de sesión y registrarse para el botón de registro A continuación tenemos un botón abajo en la quinta sección. Vamos a asignarle, inscríbase. Entonces, en realidad, eso es todo sobre la portada. En la página de inicio de sesión, tenemos un botón de registro. En cuanto a la página de registro, tenemos un botón para iniciar sesión Bien, entonces el HTML está listo. Antes de usar eso para escribir el JavaScript, voy a ocultar tanto las páginas de inicio de sesión como las de registro. En realidad la página de inicio de sesión ya está oculta. Vamos a asignar a la página de registro mostrar ninguno. En cuanto a la portada, vamos a deshacernos de mostrar ninguno. Bien, así que creo que estamos listos para comenzar a escribir algo de JavaScript. Voy a insertar nuevos comentarios, páginas de páginas. A continuación, voy a seleccionar todos los logotipos. Utilice aquí, query, selector, all method, y luego especifique aquí el logotipo del nombre de la clase. Ahora necesitamos mirar a través de la lista que fue devuelta por el método query selector all. Y tenemos que agregar un oyente de eventos de este tipo a cada logotipo. Haga clic en eventos. Vamos a usar uno de los métodos de ayuda de matriz llamados for-each Nos ayudará a recorrer la lista. Entonces el método forEach toma un argumento es la función de devolución de llamada, que se ejecutará para cada elemento de la lista La función callback en sí toma un argumento y es el elemento actual, la lista, durante el bucle Entonces ahora tenemos que adjuntar un oyente de eventos al logo con eventos click y con una función de flecha, que se ejecutará en la camarilla Entonces onclick tenemos que mostrar la portada y la altura, las páginas de inicio de sesión y registro Seleccionemos front-page usando el método QuerySelector. Así que necesitamos entonces la propiedad de estilo seguido de la pantalla. Debe ser igual a bloquear. Duplicemos esta línea de código dos veces. La segunda página va a ser login. Tenemos que ocultarlo. Entonces la exhibición va a ser ninguna. En cuanto a la tercera página, va a ser Regístrate. Y nuevamente, necesitamos exhibir ninguno. Bien, a continuación necesitamos lo mismo para los botones de inicio de sesión y registro. Duplicemos este código dos veces y luego hagamos algunos cambios. Entonces necesitamos aquí el inicio de sesión de clase. Entonces voy a cambiar aquí el argumento. Hagámoslo Iniciar sesión btn. Entonces, en caso de botones de inicio de sesión, necesitamos ocultar las páginas frontales y registrarse. Asfaltar la página de inicio de sesión. Tenemos que hacerlo visible. Entonces necesitamos aquí bloquear. ¿Bien? En cuanto al signo de botones, cambiemos aquí el nombre de la clase. También. Necesitamos aquí registrarse btn Entonces, en caso del seno de botones, tenemos que ocultar frontpage y página de inicio de sesión En cuanto a la página de registro, necesitas hacerla flex porque por defecto tiene display flex Bien, sigamos adelante y probemos si todo funciona bien Entonces como puedes ver, todo funciona bien. Lo último que quiero hacer es hacer que el cursor apunte una vez que pasemos el cursor sobre los logotipos Así que vamos a asignarle punto más grueso. Bien, así que finalmente terminamos con el proyecto. Lo único que tenemos que hacer para que sea sensible a diferentes tamaños de pantalla. Entonces, sigamos adelante. 98. Proyecto 10 - Hacer que sea sensible al proyecto - Parte 1: Bien, así que hemos terminado de construir nuestros proyectos. Es decir, todas estas secciones y páginas están creadas. Lo único que tenemos que hacer es hacer el proyecto responda a diferentes tamaños de pantalla. este momento el proyecto está construido para un tamaño de pantalla extra grande. Estoy dentro. Esto coincide con 1920 píxeles de ancho y alto. Utilizamos un enfoque de fuerza de escritorio. Inspeccionemos la página y cambiemos al modo responsive. Entonces, como puede ver, el ancho y el alto están establecidos en 90, 20 píxeles y 1080 píxeles. Ahora tenemos que encontrar los puntos de quiebre sobre los que necesitamos hacer algunos cambios. En realidad, no voy a empezar a encontrarte los puntos de interrupción porque ya los he preparado, así que no voy a perder el tiempo en eso El primer punto de interrupción va a ser de mil 500 piezas. Porque como puedes ver, el menú desplegable está en mal estado. Y también tenemos que personalizar ligeramente la tercera sección. Así que sigamos adelante e insertemos nuevos comentarios y el archivo CSS para el Código Responsivo. Entonces voy a crear una nueva consulta de medios CSS. Tenemos que especificar aquí el max-width. Vamos a establecerlo en 1,500 píxeles. Entonces como dije, tenemos que encargarnos de los desplegables. Entonces seleccionemos el desplegable y disminuyamos el relleno en los lados izquierdo y derecho. Hagámoslo 25 corrieron. Después de eso, voy a seleccionar el elemento desplegable. Definamos margen. Voy a ponerlo en dos rem en la parte superior e inferior y seis rem en los lados izquierdo y derecho. Bien, así que consideremos los menús desplegables. Luce bien. Pasemos a la tercera sección. Seleccionemos envoltorio con las entidades de clase. Voy a cambiar su ancho. Hagámoslo 80%. Y luego seleccione la característica en sí. Cambiemos el relleno. Voy a hacer que sea cero en la parte superior e inferior, y luego tres rem, en los lados izquierdo y derecho. Bien, entonces la tercera sección, se ve bien. Y en realidad todas las demás secciones son buenas. Verifiquemos las páginas de inicio de sesión y registro. Como puedes ver, no necesitan tocar por ahora. Bien, entonces veamos sobre este punto de ruptura. Sigamos adelante y nos ocupemos del siguiente. Por lo que el siguiente punto de interrupción va a ser de 1,400 píxeles. Vamos a crear una nueva consulta de medios CSS con un ancho máximo, 1.400 Entonces, antes que nada, voy a disminuir el tamaño de fuente del elemento HTML. Vamos a establecerlo en 55%. Hará que los elementos sean relativamente más pequeños. Entonces, como pueden ver, tenemos resultados mucho mejores. Pero aún así tenemos que hacer algunos cambios. Voy a cambiar el ancho de la Navbar. Vamos a hacer que cien corriera. Después de eso, creo que necesitamos aumentar un poco la altura de la primera sección. Así que vamos a seleccionarlo y establecer la altura en 70 altura de ventana gráfica A continuación, voy a aumentar el ancho del párrafo del banner. Vamos a seleccionarlo y establecer su ancho en 70%. Entonces creo que es una tontería lo de la primera sección. Sigamos adelante y personalicemos la sección Servicios. Seleccionemos un rápido desarrollo y barrido definitorio, que sea 90%. Por lo que la sección de Servicios se ve bien. A continuación tenemos la sección de características. En realidad, se ve bien, pero creo que sería mejor si aumentamos el ancho de la envoltura. Así que vamos a seleccionar características y establecer el ancho en 90%. Bien, pasemos a la cuarta sección. Voy a cambiar el ancho del contenido. Seleccionemos la sección para el contenido y fijemos su ancho en 80%. Además, voy a disminuir el tamaño de la imagen. Seleccionemos el desarrollo de envoltorios. Definir su ancho como 40 por ciento. Y también cambiar la cantidad de espacio en el lado derecho usando margen derecho, con un valor de seis corridas. Bien, así que eso es todo sobre la cuarta sección. Y en realidad con la portada, ya terminamos. Sigamos adelante y revisemos otras páginas. La página de inicio de sesión se ve bien. En cuanto a la página de registro, necesita algunos cambios. Voy a aumentar el tamaño del color de fondo en la parte superior. Así que vamos a seleccionar la página de registro. Entonces. Para evitar escribir la función de degradado lineal, voy a copiar desde arriba. Vamos a pegarlo hacia abajo y cambiar el valor porcentual que necesitamos aquí, 12%. Bien, entonces creo que con este punto de ruptura, ya terminamos. Las tres páginas se ven bien hasta que el tamaño de la pantalla se convierte en 1,200 píxeles porque la página de registro necesita algunos cambios. Para el resto de las dos páginas. No necesitamos tocarlos en 1,200 píxeles. Así que vamos a seguir adelante y crear una nueva consulta de medios CSS y especificar el ancho máximo como 1,200 píxeles. En el punto de ruptura, voy a cambiar el diseño de la página de registro. En primer lugar, vamos a disminuir el ancho del lado superior. Voy a hacer 90 corrieron. Siguiente. Voy a cambiar la alineación de los contenidos. este momento se colocan uno al lado del otro, y voy a colocarlos verticalmente uno encima del otro Entonces, seleccionemos el contenido de la página de registro. En primer lugar, definamos su ancho, que sea noche Ram. Entonces necesitamos cambiar la dirección del diseño del flujo. Hagamos una columna. Y por último, alinea los elementos en el centro. Bien, así como puedes ver, el diseño se cambia, pero el contenido en sí no se ve bien Entonces, vamos a encargarnos de eso. Voy a seleccionar la parte izquierda. Necesitamos que quede el contenido de la página de registro. Vamos a establecer su ancho al 100%. Y también me voy a deshacer de la frontera por el lado derecho. Vamos a poner azul-blanco a ninguno. Bien, a continuación, voy a colocar los elementos en el centro para eso. Usemos Flexbox. Cuando se muestra flex. Entonces tenemos que cambiar la dirección de la maquetación. Hagámoslo una columna y luego coloquemos los elementos flex en el centro. Necesitamos alinear los elementos en el centro y también alinear el texto en el centro. Bien, entonces ahora tenemos un resultado mucho mejor. A continuación, voy a crear el borde en la parte inferior. Vamos a usar border bottom con los valores 0.1 RAM solid. Y como el color, vamos a usar B1, B1, B1. Bien, así que eso es todo sobre el lado izquierdo. Pasemos al EQ del lado derecho. Seleccione el contenido de la página de registro, ¿verdad? Voy a definirlo con, hagámoslo al 100% y también cambiemos la cantidad de relleno. Voy a hacer tres rem en los cuatro lados. ¿Correcto? Después de eso, voy a encargarme de los botones de radio. Voy a disminuir como ancho nuclear y también cambiar sus posiciones. Seleccionemos entradas con el atributo type. Va a ser una radio. Vamos a establecer con 210 por ciento. Después cambia ligeramente el margen. Necesitamos 0.5 rem en la parte superior que cero en el lado derecho, abajo va a ser cero también. En cuanto al lado izquierdo. Voy a hacer que sea menos tres corridas. Bien, así que finalmente voy a encargarme del botón. Quiero aumentar su ancho 200 por ciento. En realidad, como saben, el botón tiene un nombre de clase común, btn azul Entonces, si seleccionamos este elemento usando solo el nombre de la clase blue btn, afectaremos a todos los botones azules Para poder seleccionar este botón en particular, necesitamos, en un principio, su elemento padre, el contenido de la página de registro, ¿verdad? Seguido de la clase blueback t n. Vamos a establecer con 200 por ciento Y también cambiar margen en la parte superior e inferior. Voy a ponerla a tres corridas y luego a cero en los lados izquierdo y derecho. Bien, así que todo queda bien. Y con este punto de quiebre, ya terminamos. Sigamos adelante y encontremos el siguiente. El siguiente punto de ruptura van a ser 1,100 pizzas. Porque como puedes ver, los menús desplegables están en mal estado. En realidad en el punto de interrupción, tenemos que solucionar ese problema sólo porque el resto de las páginas de las secciones se ven bien Así que vamos a seguir adelante y crear nueva consulta de medios CSS. Con ellos, max-width, 1,100 pixeles. Luego selecciona el elemento desplegable y cambia el margen. Voy a ponerlo en dos rem en la parte superior e inferior y 3.4 rem en los lados izquierdo y derecho. Bien, así que eso es todo. Sigamos adelante y hagamos que el proyecto responda al siguiente punto de interrupción 99. Proyecto 10 - Hacer que sea sensible al proyecto - Parte 2: Bien, así que hemos hecho que nuestro proyecto receptivo en un par de puntos de quiebre diferentes El último fue de 1,100 píxeles. Sigamos adelante y continuemos. El siguiente punto de ruptura en el que tenemos que hacer algunos cambios va a ser de mil píxeles Este punto de ruptura va a ser complejo porque tenemos que hacer algunos cambios importantes En el punto de ruptura. Modificaremos el menú de navegación. este momento los elementos de navegación se colocan en la parte superior de la página. Si pasamos el cursor sobre ellos, entonces aparecerán los menús desplegables Después de mil píxeles, ya no tendremos dicho menú, lo colocaremos y ocultaremos en el lado izquierdo de la página. Además, crearemos un icono de menú. Y una vez que hagamos clic en el icono de menú se mostrará el menú desde el lado izquierdo. Además de eso, también tendremos menús altamente desplegables. Y se mostrarán una vez que hagamos clic en los elementos de navegación adecuados. Entonces eso es lo que vamos a hacer en mil píxeles. Sigamos adelante y creamos una nueva consulta de medios CSS y especifiquemos el ancho máximo como mil Entonces lo primero que voy a hacer es disminuir el tamaño de fuente del elemento HTML. Ahora mismo, es del 55 por ciento, y lo voy a disminuir al 50 por ciento. Entonces los elementos se hicieron más pequeños y ahora tenemos un mejor resultado. A continuación, voy a esconder la novela al menos por un tiempo porque tenemos que crear el icono de menú y también tenemos que cambiar la alineación en la parte superior de la página web Vamos a asignar dos novelistas mostrar ninguno. Bien, entonces los elementos de navegación están ocultos. Tenemos aquí solo el logo y los botones. Sigamos adelante y creamos un icono de menú en el documento HTML. Voy a abrir la etiqueta div con el menú de clases. Entonces necesitamos otro div con el icono de menú de clase. Incluirá tres líneas. Así que vamos a abrir la etiqueta div con una clase esta línea y la línea uno. El primero va a ser un nombre de clase común. En cuanto al segundo, lo usaremos para estilos individuales. Duplicemos esta línea de código dos veces y cambiemos los nombres de las clases. Además de eso, te voy a abrir span tag porque necesitamos menú de recompensa. Se crea el icono del menú y ahora tenemos que personalizarlo como primero, vamos a crear algo de espacio en los lados izquierdo y derecho de la barra de uñas. Vamos a seleccionarlo. Define su ancho, hágalo al 100% y luego cree espacio usando relleno. Voy a configurarlo en 0.5 en lugar de seleccionar el icono de menú. Definir su anchura y altura. Voy a establecer con 211 carreras. En cuanto a la altura, va a ser para RAM. Además de eso, definamos el color de fondo. Va a ser un color de fondo temporal. Vamos a usar aquí e. después de eso, Hagamos que el Icono sea redondeado usando border-radius con valor tres RAM Después cambiar la frontera. Ves tu 0.1 RAM sólida y el color blanco. Entonces también, voy a cambiar el tipo de curso voy a hacer que se apunte. Bien, así que como ya saben, el icono Menú consta de dos partes Tenemos las líneas y abarcamos elemento. Deben colocarse uno al lado del otro. Y también deben estar alineados en el centro verticalmente. Para eso como de costumbre, voy a usar Flexbox. Vamos a configurar la pantalla para flexionar. Entonces necesitamos alinear los elementos al centro y justificar el espacio de contenido de manera uniforme. Entonces en este momento la primera parte no es visible, pero una vez que la mostremos, se colocará en el lado izquierdo. Sigamos adelante y mostremos las líneas. Selecciónelos usando la línea de nombre de clase común. Al principio, definir su ancho. Voy a llegar a RAM. Entonces la altura va a ser 0.1 RAM. Y también cambiar el color de fondo. Hazlo también. Entonces aquí tenemos las líneas, pero ahora mismo se colocan una encima de la otra. Tenemos que separarlos. Así que sigamos adelante y seleccionemos icono de menú y definamos su altura. Voy a hacer 1.5 RAM. A continuación, utilice de nuevo flexbox. Necesitamos display flex. Entonces tenemos que cambiar la dirección porque las líneas deben colocarse verticalmente en una columna Finalmente, para crear espacio entre las líneas necesitamos justificar el espacio de contenido entre ellas. Bien, así que ahora las líneas se ven bien. Cuidemos este elemento span. Vamos a aumentar el tamaño de la fuente. Hagámoslo 1.8 Ran. Bien, en realidad con el ícono de Menú, ya terminamos. Yo sólo quiero cambiar esos colores temporales. Vamos a deshacernos del color de fondo del menú. Luego cambia los colores para la línea y el elemento span. Necesitamos que tu color de fondo sea blanco para el color de este panel, y luego va a ser blanco también. Bien, así que finalmente, el icono del menú está listo, y ahora tenemos que empezar a trabajar en la navegación Echemos un vistazo al proyecto terminado. Lo primero que voy a hacer es hacer que se vean los elementos de navegación. Entonces quiero decir, vamos a alinear los ítems, particularmente en una columna. Cambiaremos el fondo y también moveremos el icono del menú hacia el lado derecho. Entonces, antes que nada, movamos el icono usando función transform, translate x. Vamos a insertar 16 rampas. Entonces se mueve el icono. A continuación voy a mostrar la navegación hacia atrás, pero sin los menús desplegables. Así que vamos a deshacernos de mostrar ninguno de aquí. En cuanto a los desplegables, los voy a hacer ocultos usando display none Por lo que los elementos de navegación son factibles, pero sin desplegables este momento, el diseño de navbar está completamente desordenado, pero nos encargaremos de eso en un minuto Ahora, es el momento de mover la navegación al lado izquierdo de la página. Voy a fijar su posición a fija. Después definir las propiedades superiores y carecer. Voy a hacer que ambos sean cero. También definir el ancho y la altura. El ancho va a ser 20 RAM. En cuanto a la altura, voy a hacer que sea 100% de la ventana gráfica Eso, eso. Vamos a llevarte el fondo. Voy a usar la función de gradiente lineal. La dirección de la transición de color va a ser de arriba a abajo. Y luego voy a insertar aquí tres colores diferentes. El primero va a ser 032181, que tendremos Eso es para el tercer color. Va a ser 04207. ¿Ves? La navegación se mueve hacia el lado izquierdo, pero los elementos de navegación no se colocan correctamente. Vamos a arreglar eso. Voy a cambiar la dirección del layout flex. Hagámoslo una columna. Y también crea algo de espacio en la parte superior usando relleno. Hagámoslo correr. Ahora tenemos un mejor resultado. Como pueden ver, la pancarta cubre un poco la navegación. Eso habla que usando la propiedad del índice Z, voy a hacer el índice 200. Bien, entonces el problema está arreglado. Vamos a encargarnos de los elementos de navegación. Voy a seleccionar el elemento de la lista de navegación. Vamos a establecer su ancho al 100%. En cuanto a la altura, voy a hacerla automática. También crea algo de espacio usando relleno. Vamos a asignar a 0.1 ejecutar. Y también voy a crear espacio en la parte superior e inferior usando margen. Vamos a establecerlo en el punto 4.0. Bien, entonces a continuación, voy a disminuir el tamaño de fuente de los elementos de enlace Seleccionemos el enlace de la lista de navegación y establecemos su tamaño de fuente en un punto. En Renta. Llegó después de eso, voy a disminuir el tamaño de las flechas, y también voy a rotarlas. Seleccionemos el elemento de la lista de navegación, seguido del elemento I. Definamos su tamaño de fuente, que sea un punto para carnero. En cuanto a la rotación, voy a usar Transformar con la función rotate como el valor que voy a insertar aquí -90 grados Bien, entonces la navegación se ve bien. En realidad, si pasamos el cursor sobre los artículos, entonces ellos obtendrán el borde en la parte inferior Y también la novela cambiará el color de fondo. Esos son los efectos predeterminados que definimos para el tamaño de pantalla extra grande. Ahora mismo me voy a deshacer del efecto frontera. En cuanto a la navbar, nos encargaremos de eso un poco más tarde. Así que vamos a seleccionar nav, list item con el hover y establecer el borde en la parte inferior para saber Bien, esa sílaba, la principal menos. Por ahora Siguiente voy a encargarme de los menús desplegables. Al principio. Echemos un vistazo al proyecto terminado y mostremos el menú desplegable. Entonces, como puedes ver, el menú desplegable se ve un poco diferente al predeterminado. Tenemos aquí un artículo adicional como el encabezado. Y además los segundos enlaces desplegables ya no son visibles. Entonces tenemos que hacer algunos cambios en el documento HTML. En primer lugar, quiero agregar nombres de clase individuales a las listas desplegables porque tenemos que darles estilo y también necesitamos esas clases para JavaScript también. Entonces el primer ítem va a ser NEF desplegable personal. En cuanto al segundo, va a ser suficiente negocio desplegable. Después de eso, voy a personalizar los desplegables. Creo que sería mejor si ocultamos uno de los desplegables, hará que nuestro trabajo en proceso sea más conveniente Ahora mismo tenemos aquí naff desplegable con display none. Cambiemos el nombre de la clase y hagamos que no se haya caído. Digamos negocios. este momento, aquí no se cambia nada porque por defecto el menú desplegable está tan oculto. Y aparecen sólo al flotar. Voy a mostrar y personalizar el primer menú desplegable como lo tenemos en el proyecto terminado. En realidad, necesitamos algunos estilos similares que hemos usado para la lista de navegación en sí. Entonces voy a agregar otro nombre de clase. Ahora, desplegable personal. Después seleccionarlo por separado y asignarle opacidad uno y visibilidad visible. Entonces aquí tenemos el menú desplegable, pero no se ve bien. Tenemos que personalizarlo. En primer lugar, voy a disminuir el relleno. Estoy en el espacio del lado izquierdo. Así que vamos a establecer el relleno en una RAM. Después de eso, voy a ocultar los segundos elementos de enlace. Así que vamos a seleccionar naff enlace desplegable a un asignado para mostrar ninguno Bien, a continuación, voy a subir el contenido. Para eso. Sólo voy a cambiar el valor de la propiedad justify content. Vamos a configurarlo para flexionar. Inicio. Bien, así que ahora el menú desplegable se coloca en la parte superior de la navegación Como dijimos, vamos a agregar un elemento a los menús desplegables. Serán un poco encabezamientos para ellos. Entonces agreguemos la etiqueta LI a la lista. Voy a asignar a las clases lo suficiente, desplegable, ítem, encabezado desplegable Después inserta tu etiqueta de enlace, que incluirá el ícono Font Awesome con la clase es FAS, FA, Chevron abajo, seguido del personal de texto Copiemos los elementos LI y peguémoslos para la segunda lista desplegable también Voy a cambiar los contenidos. Hagámoslo negocio. Bien, sigamos adelante y personalicemos el elemento de la lista recién editado En primer lugar, voy a seleccionar el elemento desplegable naff. Vamos a establecer su ancho al 100%. Y también definir margen. Voy a hacer que el margen uno corra en los cuatro lados excepto el de abajo. El fondo va a ser cero. Después de eso, voy a seleccionar etiqueta de enlace. Entonces necesitamos escuchar el encabezado desplegable a. definamos el tamaño de fuente, hazlo 1.6 RAM. También transforma texto en mayúsculas. Cambia el color, hazlo blanco. Entonces, como puedes ver, el elemento link se ve bien. Tenemos que encargarnos del ícono. Seleccionemos encabezado desplegable, I, tamaño de fuente definido, hazlo 1.5 gramo Además, necesitamos transformarnos con la función rotate. El valor va a ser de 90 grados. Y luego crea algo de espacio en el lado derecho usando una rampa margin-right one Bien, así que finalmente, vamos a disminuir el tamaño de fuente de esos elementos de enlace Seleccionemos lo suficiente para vincular uno de la parte alta de la ciudad y establecer el tamaño de fuente en 1.4 redondo Bien, entonces el menú desplegable está personalizado ahora mismo en el primer estilo desplegable. Pero puedes asumir que ambos desplegables están listos. Simplemente agregaremos a la actriz soul para el menú desplegable. Y todos estos estilos se aplicarán también a la segunda lista. Bien, entonces ahora tenemos que hacer que el dinero funcione. Para eso. Usaremos JavaScript 100. Proyecto 10 - Hacer que sea sensible al proyecto - Parte 3: Bien, así que ahora es el momento de que la navegación funcione. En primer lugar, voy a ocultar toda la navegación. Me refiero al novelista con desplegables. Y también voy a aplicar los estilos al segundo menú desplegable también Como saben, hasta ahora se ha ocultado. Entonces para ocultar la navegación, voy a cambiar la posición de la izquierda. Vamos a configurarlo a -20 RAM. Además, agreguemos aquí el nombre de la clase para el segundo menú desplegable. Me refiero al negocio de la zona alta del nafta. Entonces haz lo mismo abajo. Y también deshazte de este código desde aquí. Bien, entonces la navegación está oculta. Necesitamos mover las piezas y volver a su posición predeterminada también. Entonces, deshagámonos de esta línea de código desde aquí. Bien, así que todo queda bien. Ahora podemos agregar un evento click al botón y mostrar la navegación. Volvamos a echar un vistazo al proyecto terminado. Entonces además de mostrar la navegación, tenemos que mover el icono hacia el lado derecho rápido, cambiar su estilo y tenemos que arreglarlo. Si nos desplazamos hacia abajo por la página, el icono del menú debe tener una posición fija. Al principio, vamos a encargarnos del botón. Necesitamos adjuntarle un oyente de eventos con un evento click Después una vez que le damos clic, tenemos que asignarle algunos estilos. O sea, tenemos que transformar las líneas en x. Además, vamos a cambiar los colores. Y además de eso, tenemos que moverlo hacia el lado derecho. Déjame explicarte cómo vamos a manejar todas esas cosas. Definiremos los estilos CSS mencionados con la ayuda de una nueva clase. Vamos a agregar esta clase a la barra de navegación. Y luego en CSS, usaremos las combinaciones de los selectores para que los nuevos estilos se apliquen a los elementos Vamos al archivo JavaScript. Voy a crear nuevas variables. Llamemos al primer icono de menú variable y seleccionémoslo usando el método selector de consultas. Especificemos aquí el menú del nombre de la clase. Entonces voy a duplicar este código, cambiar el nombre de la variable. Va a ser barra de navegación. Y también voy a cambiar el nombre de clase que necesitamos aquí. Ahora bien, después de eso, voy a asignar al ícono Menú y oyente de eventos Con eventos de clic y con una función de flecha Entonces como dijimos, tenemos que agregar una nueva clase para hacer ahora para deshacer clic En realidad, necesitamos agregar una nueva clase a la novela deshacer clic, pero luego tenemos que eliminarla en la siguiente, ya que al hacer clic primero en el icono, mostraremos la navegación Pero entonces en la siguiente liga deberíamos ocultarlo. Entonces tenemos que usar un método toggle. En general, el método toggle agrega una clase al elemento si no la tiene, y la elimina si el elemento la tiene. Así que tenemos que seleccionar suficiente barra. Entonces tenemos que usar una de las propiedades llamadas class list, que incluye todas las clases que tiene la isla. Y entonces necesitamos el método toggle. Tenemos que especificar aquí el nombre de la clase, llamarlo cambio. Bien, así que eso es todo sobre el JavaScript. Volvamos al archivo CSS. Ahora, podemos aplicar los nuevos estilos al click. Lo primero que voy a hacer es mover el icono del menú hacia el lado derecho. Así que tenemos que seleccionar el cambio seguido del menú. Y para poder mover el icono, voy a utilizar de nuevo transform con función Translate X como valor. Vamos a insertar aquí 16 rampa. Entonces, como puedes ver, el ícono se mueve hacia el lado derecho en la primera camarilla Vuelve a su lugar predeterminado en el siguiente clic. Bien, entonces antes de pasar a la navegación, quiero terminar de trabajar con el botón. Tenemos que asignar a diferentes estilos y hacer clic. Como decíamos, tenemos que arreglarlo una vez que se muestre la navegación. Entonces necesitamos aquí posición fija. Además, necesitamos definir propiedades superiores e izquierdas. La máxima posición va a ser correr hasta la izquierda. Va a ser seis corridas. Ahora, una vez que hagamos clic en el icono, éste quedará fijo. Pero tenemos aquí el tema. Como recuerdas, el ícono del menú es un elemento flexible. Una vez que se fija, luego salta del contenedor flex y el logo, el segundo elemento flex toma su lugar. Tenemos que arreglarlo. Necesitamos definir la posición para el logotipo manualmente. Así que vamos a seleccionar el logotipo de la barra de navegación. Voy a definir esta posición como absoluta. Entonces necesitamos la posición superior. Hagámoslo para RAM. Y entonces tenemos que centrarlo perfectamente. Entonces voy a establecer la posición izquierda en el 50 por ciento. Y también necesitamos transformar, traducir con los valores -50 por ciento Y nuevamente -50 por ciento. Bien, entonces el logo se ve bien, pero tenemos el mismo problema que hemos estado ahora para Batson's. Así que sigamos adelante y arreglemos eso. Seleccionemos los botones de la barra de navegación y se les asignó el margen izquierdo, Bien, así que ahora todo se ve bien. Volvamos al icono del menú y personalízalo. Necesitamos transformar líneas en x Así que tenemos que seleccionar cada línea con un cambio de clase. Sigamos adelante y comencemos con el primero. Entonces como cambio, seguido de la línea uno. Entonces voy a rotar la primera línea. Aquí necesitamos transformar, rotar con el valor 45 grados. Entonces vamos a duplicar este código. Cambia el nombre de la clase que necesitamos aquí, línea tres. En cuanto al valor de la función rotate, necesitamos -45 grados. Y además de eso, tenemos que ocultar la segunda línea. Así que vamos a seleccionar la línea dos con cambio y se le asignó opacidad cero y factibilidad oculta ¿Bien? Entonces ahora mismo, no tenemos aquí la x. La razón es que por defecto las líneas se transforman desde el centro porque el origen de la transformación está centrado por defecto, tenemos que cambiarlo y hacer a la izquierda. Entonces necesitamos transformar el origen el valor de eso. Bien, entonces ahora el problema son los geeks . Y tenemos aquí la x. A continuación tenemos que cambiar los colores, los colores de fondo de las líneas. Hagámoslo 444. Además, tenemos que cambiar el color de fondo del propio icono del menú. Hagámoslo e, e. Y por último, cambiemos el color de los elementos span. Tenemos que seleccionar menú span con cambio. Vamos a establecer el color a 555. Bien, así que lo último que voy a hacer es a una transición al icono Entonces necesitamos transformar la transición con una duración de 0.6 s. y además de eso, voy a usar una función llamada Bezier cúbico Nos permite crear una transición personalizada. Entonces en nuestro caso, quiero hacer la transición más lenta al principio y luego rápida al final. Para lograrlo, voy a pasar aquí los siguientes valores. Necesitamos 100. Y otra vez uno. En realidad, se puede jugar con diferentes valores, pero creo que esta transición se ve muy bien. Bien, así que finalmente, con el ícono de Menú, ya terminamos. Ahora tenemos que encargarnos de la navegación. Entonces necesitamos volver a usar el cambio de clase, seguido del novelista Y para mostrar la navegación, tenemos que establecer la posición izquierda en cero. Además de eso, vamos a utilizar de nuevo la transición con el mismo hecho. En este caso necesitamos izquierda 0.6 s y la misma función Bezier cúbica con los valores 1001 Bien, así que todo funciona bien. Ahora tenemos que mostrar los menús desplegables. Una vez que hacemos clic en los enlaces, me refiero a lo personal y comercial. Antes de hacer eso, quiero encargarme de una cosa. este momento, el efecto hover, acerías o los elementos de navegación después de mil píxeles, ya no necesitamos el efecto hover porque modificamos toda la Entonces para cancelar el efecto hover, voy a hacer lo siguiente Necesitamos usar una sentencia if else donde definiremos el tamaño de la pantalla. Si el tamaño de la pantalla es inferior a 1,000 píxeles, entonces necesitamos aplicar este código aquí. Y si no, entonces deberíamos ejecutar este código, las grasas enteras. Así que vamos a crear sentencia if en la que tenemos que definir el ancho del tamaño de la pantalla. Entonces necesitamos un punto de ventana de ancho interior. Debe ser inferior a mil píxeles. Entonces, si esta condición es cierta, entonces necesitamos agarrar este código e insertarlo aquí. Y si es falso, entonces necesitamos una sentencia else donde deberíamos poner todo este código Así que ahora el color de fondo de la Napa ya no cambia. Pero tenemos aquí un pequeño tema. Como ves la flecha está girando. No necesitamos eso también. Hemos creado ese efecto hover a partir de CSS. Así podremos eliminarlo en el archivo CSS y crear el mismo efecto en el JavaScript. Como saben, todos ya tenemos un efecto hover aquí en la declaración else Entonces solo necesitamos agregar el código para las flechas. Pero primero, vamos a deshacernos de él de CSS. Entonces voy a acceder a las flechas desde el elemento de la lista que necesitamos aquí, elemento desplegable A continuación, tenemos que acceder a los elementos de enlace, que es el primer elemento hijo del elemento de la lista. Entonces, cuando escuchas la propiedad llamada primer elemento hijo, la flecha se representa con el icono Font Awesome, que es el hijo del elemento link. Así que de nuevo, necesitamos u primer elemento hijo. Después de eso, necesitamos la propiedad de estilo, seguida de la transformación. Como el valor que necesitamos aquí, rotar 180 grados. Vamos a copiar este código y pegarlo abajo. Una vez que salimos el mouse, tenemos que hacer cero el valor de la función rotate. ¿Bien? Entonces, como pueden ver, ya no tenemos aquí el efecto hover Ahora podemos seguir adelante y sacarte de los menús desplegables. Una vez que hacemos clic en los enlaces, tuvimos que mostrar el menú desplegable adecuado. Entonces, en lugar de agregar los oyentes de eventos para construir por separado, voy a usar nuevamente el método forEach Pero antes de eso, necesitamos asignar a ambos elementos de enlace los nombres de clase comunes. Vamos a llamarlos, mostrar desplegable. Después selecciónelos usando el método selector de consultas all. Vamos a especificar aquí el desplegable show de nombre de clase. Después de eso, tenemos que recorrer los enlaces y adjuntarlos y el oyente de eventos Entonces necesitamos para cada uno que sea más fácil para ti y la función de flecha con el parámetro, llamémoslo link. Y luego adjuntar a él oyente de eventos con el evento click y con una función de flecha Entonces ahora tenemos que mostrar los menús desplegables. En realidad, son los hermanos de los elementos de enlace. Por lo que necesitamos escuchar link seguido la propiedad llamada next elements hermano De lo que tenemos que definir la propiedad de estilo con posición izquierda. Vamos a ponerla a cero. Entonces, si muestro la navegación y luego hago clic en el enlace, se mostrará el menú desplegable adecuado. Bien, estamos avanzando, pero tenemos aquí un pequeño tema. Si hacemos clic en el icono de menú entonces el icono se irá, pero el menú desplegable no se cerrará. Tenemos que arreglarlo. Entonces tenemos que ocultar los menús desplegables. Quiere que el cambio de clase sea removido del Polo Norte. Entonces voy a usar una sentencia if donde definiremos si la barra de navegación tiene el cambio de clase o no Así que vamos a crear una sentencia if con la siguiente condición. Primero tenemos que colocar aquí operador lógico NO. Entonces necesitamos lista de clases navbar. Y tenemos que usar un método llamado contains. Este método nos muestra si el elemento contiene la clase específica no están dentro del paréntesis, necesitamos colocar el cambio Entonces si esta condición es verdadera, significa que el cambio de clase se elimina de la barra de navegación Y así tenemos que ocultar los menús desplegables. Vamos a seleccionarlos usando el método QuerySelector all. Después especifique aquí el nombre de la clase nafta uptown. Ahora necesitamos usar para cada método. Vamos a insertar aquí el parámetro que voy a llamarlo caído. Entonces, para ocultar los menús desplegables, necesitamos el estilo desplegable, seguido de la propiedad left Y tenemos que fijarlo a -20 run. Entonces ahora todo funciona a la perfección. Lo último que voy a hacer con respecto al menú es ocultar los desplegables y una vez que hagamos clic en los encabezamientos desplegables, antes que nada, voy a asignar clases comunes a los enlaces Vamos a llamarlo enlace de encabezado caído. Necesitamos esta clase para ambos elementos de enlace. Después vuelve al archivo JavaScript y selecciónalos usando el método QuerySelector all Necesitamos especificar aquí el nombre de la clase, desplegable, enlace de encabezado que tenemos que recorrer esos enlaces. Entonces necesitamos, para cada método. Insertemos aquí una función de devolución de llamada con un parámetro. Voy a llamarlo enlace de rumbo. Después tenemos que adjuntar a elementos de enlace, oyentes de eventos con eventos click Y también necesitamos aquí una función de flecha. Así que tenemos que ocultar los menús desplegables. Y tenemos que acceder a esos menús desplegables desde los elementos de enlace. Entonces necesitamos usar el enlace de encabezado. Entonces tenemos que acceder a los elementos padre. Y para eso, tenemos que usar una de las propiedades llamada elementos padre. Entonces ahora mismo tenemos acceso al ítem de la lista. Y a continuación tenemos que tener acceso al elemento menos en sí mismo. Así que de nuevo, necesitamos elemento padre seguido de estas propiedades de mosaico. Entonces necesitamos la izquierda. Y el valor va a ser -20 corrida. Bien, así que si hacemos clic en el elemento de navegación y luego clic en el enlace del encabezado desplegable, el desplegable se ocultará. En realidad, tenemos aquí algún problema con el segundo desplegable porque tenemos dos encabezamientos Entonces podríamos tener algún error en el archivo HTML. Sigamos adelante y compruébalo. Entonces como pueden ver, por alguna razón, he insertado aquí dos rubros. A lo mejor no tienes este problema en tu propio archivo HTML. Entonces, deshagámonos de ella desde aquí. Bien, así como puedes ver, todo funciona a la perfección. Y en realidad cuál es el menú, ya casi terminamos. Dije casi porque si volvemos a aumentar el tamaño de la pantalla a extra grande, vamos a tener algunos problemas. Como puedes ver, tenemos el icono de menú en la esquina superior izquierda. Y también si pasamos el cursor sobre los elementos de navegación, entonces veremos los dos encabezamientos de la zona alta que agregamos a la lista Así que tenemos que ocultarlos por defecto. Seleccionemos menú y asignemos a él. Mostrar ninguno. Entonces necesitamos encabezado desplegable. Nuevamente, necesitamos mostrar ninguno. Y luego abajo, quiero decir, en el Responsive Code, necesitamos seleccionar el encabezado desplegable Tenemos que asignar al bloque de visualización para poder hacer el trabajo hecho teniendo espacios. ¿Correcto? Entonces, finalmente, con amoníaco, terminamos. Continuemos y hagamos que el proyecto sea receptivo 101. Proyecto 10 - Hacer que sea sensible al proyecto - Parte 4: Bien, sigamos adelante y sigamos haciendo que nuestro proyecto sea receptivo Ahora mismo, estamos trabajando en la pantalla con un ancho máximo de mil picos Hemos modificado la navegación y ahora voy a personalizar un poco las otras secciones. La primera sección se ve bien. Pasemos a la siguiente sección. También se ve bien, pero creo que podemos disminuir ligeramente el tamaño de fuente del encabezado. Seleccionemos el encabezado de la Sección dos y establecemos el tamaño de fuente para que caiga alrededor. Bien, a continuación voy a personalizar la sección de características Seleccione el desarrollo rápido con características cruzadas y establezca su ancho en 95%. Además, voy a seleccionar la característica en sí. Cambiemos el relleno, hagamos que sea cero en la parte superior e inferior y 1.5 rem en los lados izquierdo y derecho. Llegó esa sílaba, la sección característica. Se ve bien. Después de eso, voy a encargarme de la siguiente sección. Quiero cambiar la dirección de la alineación de los contenidos. este momento la imagen y las listas se colocan una al lado de la otra, y quiero colocarlas una encima de la otra Así que vamos a seleccionar la sección para contenido y cambiar la dirección, hacer cada columna, y también alinear los elementos en el centro. A continuación, voy a centrar la imagen perfectamente. Seleccionemos su envoltorio. Entonces para centrar la imagen, voy a usar margin donde el valor auto. Bien, vamos a personalizar la lista. Seleccionemos sección para al menos voy a establecer su ancho al 100%. Y también voy a colocar los elementos de la lista en el centro para eso. Usemos Flexbox. Tenemos que ajustar la pantalla a flex. Entonces tenemos que cambiar la dirección. Hagámoslo columna. Y por último, necesitamos alinear los artículos al centro. Entonces eso es todo sobre la cuarta sección. Sigamos adelante y cuidemos el pie de página. Voy a alinear los elementos verticalmente en una columna. Así que sigamos adelante y seleccionemos la parte superior del filtro. Cambia de dirección, haz que los llame. Y también alinear los elementos en el centro. Bien, vamos a crear algo de espacio al final de la lista. Seleccionemos la lista de pie de página y establecemos el margen inferior en una RAM. También, voy a seleccionar el párrafo de copyright. Cambiemos la cantidad de espacio en la parte superior e inferior. Vamos a establecer el margen a 1.5 RAM y luego a cero. Bien, así que eso es todo sobre la portada. Vamos a revisar el resto de las páginas. Entonces como pueden ver, todo se ve bien y podemos seguir adelante y encontrar el siguiente punto de quiebre. Por lo que el siguiente punto de interrupción va a ser de 800 píxeles. Sigamos adelante y creamos una nueva consulta de medios CSS y especifiquemos el ancho máximo como 800 Entonces, antes que nada, voy a disminuir el tamaño de fuente de los elementos HTML. Vamos a establecerlo en 45%. A continuación, voy a encargarme de la segunda sección. Vamos a establecer el relleno en la parte superior e inferior a diez RAM y luego cero en los lados izquierdo y derecho. También, voy a seleccionar la rúbrica de la Sección dos. Vamos a personalizarlo un poco. Voy a establecer con 280 por ciento. Además, necesitamos alinear el texto en el centro. Y además de eso, voy a definir la altura de la línea. Hagámoslo 1.2. Bien, a continuación, voy a personalizar los servicios. Así que vamos a seleccionar el elemento div contenedor con una clase de servicios y definir el ancho, que sea 95%. Entonces voy a seleccionar el servicio en sí. Definamos su ancho y lo hagamos a través de la RAM. Y también cambiar la cantidad de espacio en los lados izquierdo y derecho. Sentarse margen a cero y luego correr. Bien, entonces ahora tenemos un resultado mucho mejor. A continuación, quiero disminuir el tamaño de fuente de la Fuente. Iconos impresionantes. Seleccionemos el servicio. Cambio el tamaño de fuente, lo hago por RAM. Y también voy a personalizar los botones. Selecciona servicio btn, cambia el ancho y hazlo 15 RAM. Y también establece el relleno en una RAM en los cuatro lados. Bien, así que eso es sobre la segunda sección. A continuación, voy a personalizar la sección de características. Quiero colocar las características en tres líneas. Así que vamos a seleccionar características y establecer su ancho en 100% Entonces voy a seleccionar la característica en sí. Vamos a establecer su ancho 50 por ciento y también cambiar el relleno, hacerlo cero. Y para corrió. Bien, entonces creo que eso es todo sobre la portada. Todas las demás secciones se ven bien. Comprobemos la página de inicio de sesión. También se ve bien. En cuanto a la página de registro, tenemos que hacer algunos cambios aquí Así que sigamos adelante y seleccionemos la parte superior. Necesitamos registrarse en la parte superior de la página y establecer su ancho en 50. Rem. A continuación te voy a quitar de los contenidos. Seleccione el contenido de la página de registro, establezca su ancho en 85% Y también definir acolchado. Es cero en la parte superior e inferior y tres rem en los lados izquierdo y derecho. Después de eso, voy a seleccionar la parte izquierda del contenido. Así que tenemos que inscribirnos en el contenido de la página izquierda. Vamos a establecer su ancho 200 por ciento. También cambia el relleno, hazlo a tres RAM. Después voy a seleccionar las imágenes. Vamos a definir el ancho y convertirlo en 14 RAM. También se cambió el margen. Voy a fijarlo en 0.1, 0.5 g, y también disminuir el ancho del borde. Voy a fijarlo en 1 g sólido. Entró el CCC de color. Después de eso, voy a seleccionar los elementos de encabezado H1. Cambiemos su tamaño de fuente, hagámoslo tres corrieron. Bien, entonces la parte izquierda se ve bien. Pasemos a la derecha. Seleccione el contenido de la página de registro, ¿verdad? Entonces antes que nada, voy a alinear elementos usando Flexbox Vamos a establecer display a flex, luego cambiar la columna de dirección de flexión. A continuación voy a alinear elementos en el centro. Y por último, cambia el relleno, hazlo tres rondas. Bien, finalmente, voy a personalizar los botones de radio. Vamos a seleccionarlos usando el atributo type o radio. Voy a cambiar su ancho. Hagámoslo 20 por ciento. Entonces. Margen de cambio. Voy a fijarlo en 0.5 rem en la parte superior que 1.5 rem en el lado derecho. En cuanto a los lados inferior e izquierdo, ambos serán cero. Bien, así que digamos respecto a este punto de ruptura, sigamos adelante y trabajemos en el siguiente El siguiente punto de interrupción va a ser de 550 píxeles. Vamos a crear una nueva consulta de medios CSS con un ancho máximo de 550 píxeles. En el punto de ruptura, voy a ocultar el logo de la barra de navegación en absoluto Seleccionemos perilla o logotipo y asignemos para mostrar ninguno. A continuación, voy a encargarme de los elementos del banner. Seleccionemos el encabezado del panel, cambiemos su tamaño de fuente, 4.5 rima. Después seleccione banda o párrafo y definiendo la altura de línea, hágala 1.2 Eso es todo sobre la primera sección. Pasemos al segundo. Voy a colocar los servicios verticalmente en la columna. Entonces, seleccionemos el desarrollo rápido y cambiemos la columna de dirección flexible. Y también voy a alinear los elementos en el centro. A continuación, tomemos aquí del servicio en sí. Vamos a establecer su ancho en 60%. Y también, voy a definir margen en la parte inferior. Hagámoslo cuatro n. Bien, eso es todo. En cuanto a la segunda sección, Pasemos a la tercera. Voy a cambiar el tamaño de fuente del elemento heading. Entonces, seleccionemos el encabezado de la Sección tres y fijemos su tamaño de fuente dos. Para RAM. Además, voy a colocar las entidades verticalmente en una columna. Así que vamos a seleccionar el envoltorio y la dirección de flexión científica con la columna de valor. Y también necesitamos alinear los artículos al centro. Bien, así que vamos a seleccionar característica. Definamos este ancho, hazlo 80 por ciento. Bien, pasemos a la siguiente sección. Me refiero a la cuarta sección. Voy a seleccionar los elementos de encabezado. Cambiemos el tamaño de la fuente, hagamos que caiga alrededor. Entonces voy a seleccionar los contenidos. Vamos a establecer el ancho al 100%. También cambia el relleno, hazlo cero en la parte superior e inferior y tres rampas en los lados izquierdo y derecho cuanto a la imagen, voy a esconderla en absoluto. Así que vamos a seleccionar el envoltorio y establecer la visualización en ninguno. Bien, por último, voy a alinear los elementos al lado izquierdo. Así que vamos a seleccionar menos asignar a los elementos de alineación con un flex de valor. Comienza con esta sección. Ya terminamos. Sigamos adelante y personalicemos el pie de página. Seleccionemos pie de página superior y definiendo dulce, hazlo 90%. Bien, así que eso es todo sobre la portada. Vamos a revisar el resto de las páginas. Por lo que la página de inicio de sesión no necesita los cambios. En cuanto a la página de registro, tenemos que personalizarla. Vamos a sacarte de la parte superior. Voy a establecer su ancho en cuatro para correr. Después de eso, vamos a seleccionar el contenido de la página de registro y establecer su ancho al 100%. Bien, Siguiente Voy a ocultar la parte izquierda del contenido en absoluto Así que vamos a seleccionar izquierda y asignado para mostrar ninguno. Por último, aumentemos el ancho de la parte ancha. Voy a configurarlo para que maneje el presente. Bien, así que eso es todo sobre estos puntos de interrupción. Y ahora hay que personalizar el proyecto sobre el último punto de interrupción, que va a ser de 400 píxeles Vamos a crear una nueva consulta de medios CSS y especificar el ancho máximo como 400 píxeles. Entonces, antes que nada, voy a disminuir el tamaño de fuente del elemento HTML. Hagámoslo 40 por ciento. Entonces todo se ve bien. Pero voy a personalizar el ícono de Menú y lo mostramos en alfa. Entonces el icono cubrirá el botón de inicio de sesión y en realidad no se ve bien. Entonces voy a ocultar el menú de Word del icono. Seleccionemos el rango de menú y configurémoslo para que no muestre ninguno. Entonces voy a disminuir el ancho del menú que puedo resolver. Vamos a seleccionarlo y establecer su ancho en cinco marca. Ahora, podemos ver que tenemos un resultado mucho mejor. Lo único que no me gusta aquí es el segundo ítem de la lista en la cuarta sección. Porque el número es una especie de encogido. Así que voy a arreglar eso. Seleccionemos el número y definamos su ancho mínimo. Que sea 3.5 g. bien, así que finalmente, el proyecto responde a diferentes tamaños de pantalla. Antes de terminar el proyecto, quiero hacer una última cosa. En realidad, si hacemos que el tamaño de la pantalla sea más grande y luego colocamos el cursor sobre los elementos de navegación, entonces los desplegables no se mostrarán Necesitamos refrescar la página para eso. Así que para evitar refrescar la página manualmente, voy a hacer una automática una vez que redimensionemos el tamaño de la pantalla Entonces para eso, voy a adjuntar el oyente de eventos al objeto window con el evento re-size Además, necesitamos aquí la función arrow, que se ejecutará una vez que cambiemos el tamaño de la ventana Entonces para recargar la página, necesitamos la siguiente ventana, ubicación de punto, recarga de puntos Entonces, si probamos, entonces verás que todo funciona a la perfección. Bien, así que hemos terminado de trabajar en nuestros décimo proyectos, clon de Paypal Fue el clon de la UI de este sitio web. Espero que te haya gustado el proyecto y aprendas algunas cosas nuevas. terminar de trabajar en este proyecto, nuestro curso también ha terminado. Ojalá fuera interesante y útil. Hemos construido diez sitios web diferentes modernos y receptivos desde cero. Así que espero que tengas una gran práctica y desarrollo web front-end y aprendas muchas cosas diferentes en HTML, CSS y JavaScript. Esas son tres tecnologías centrales de desarrollo web front-end. Por lo que es muy importante aprenderlos y practicarlos hoy. Bien, así que me gustaría agradecerle por estar con nosotros. Te deseo todo lo mejor. Estamos planeando lanzar pronto un nuevo curso, nuevamente con proyectos. Así que estén atentos. Buena suerte. Adiós.