Crea un sitio web adaptable: HTML, CSS, JavaScript (2024)

1. Introducción: Hola y bienvenidos a nuestro curso práctico construido mega sitio web receptivo con HTML, CSS y Javascript. Quiero agradecerles por elegir inscribirse en este curso. Si te entusiasma sumergirte directamente en la creación de un sitio web de varias páginas del mundo real, entonces has venido al lugar correcto. A lo largo de este curso, seré su guía ya que construimos un sitio web completo, moderno y adaptable desde cero usando HTML, CSS y chavscript Aquí no encontrarás largas discusiones teóricas. En su lugar recibirás instrucciones prácticas paso a paso para equiparte con las habilidades necesarias para desarrollar sitios web impresionantes. En este video introductorio, proporcionaré una visión general de nuestro proyecto y detallaré lo que vamos a lograr. Nuestro proyecto está diseñado para ser un sitio web de varias páginas y se adaptará a diferentes tamaños de pantalla y dispositivos. Comenzaremos creando un encabezado de sitio web seguido la barra de navegación completa con menús desplegables fáciles de usar para cada elemento de navegación. A continuación, profundizaremos en la sección Servicios, que le seguirá la sección de proyectos con un filtro dinámico para categorías de proyectos Al hacer clic en cualquiera de los enlaces se mostrarán los proyectos correspondientes. el futuro, desarrollaremos una sección de plantilla que consta de dos partes. La primera parte es visible aquí, y la segunda parte cobra vida con el clic de un botón Reproducir. El reproductor de video es completamente funcional. Ofrece control sobre la reproducción de volumen. Puedes saltar hacia atrás y hacia adelante. También, podemos elegir la velocidad. Además, puedes encontrar aquí imagen en modo imagen y reproducción a pantalla completa. Después de la sección de plantilla, construiremos una sección de contacto, que le seguirá un pie de página para concluir el sitio web. Como dije, nuestro sitio web es de varias páginas y puedes navegar a diferentes páginas haciendo clic en los enlaces en la barra de navegación, Descubrirás la página de un cliente con testimonios de clientes. Entonces tendremos una página de proyecto con un atractivo wat. Entonces la siguiente página va a ser una página de contacto la cual está equipada con formularios y opciones de chat. Además, tenemos aquí una página de cuenta para iniciar sesión, y finalmente, una página de precios. Como mencioné anteriormente, el sitio web responde a varios tamaños de pantalla. Si inspecciona la página, cambia al modo de respuesta y la previsualiza en diferentes tamaños de pantalla y dispositivos, entonces encontrarás que es adaptable y se ve bastante bien. Bien, me gustaría señalar que este proyecto está diseñado para pantallas extra grandes con una resolución de 1920 píxeles con y 1080 píxeles de altura. Si estás usando una pantalla más pequeña, recomiendo cambiar al modo de respuesta durante las conferencias y especificar el ancho y la altura en consecuencia. Esto asegurará que el proyecto se vea lo mejor posible en pantallas más pequeñas hasta que lo hagamos totalmente receptivo. Bien, espero que disfrutes trabajando en este proyecto tanto como yo. Sin más preámbulos, comencemos. 2. Configuración: Hola y bienvenidos al curso. Estamos encantados de tenerte aquí, y estamos seguros de que encontrarás este curso agradable. Antes de comenzar a sumergirnos en nuestro proyecto, primero preparemos nuestro entorno de trabajo. Si ya estás configurado y listo para escribir código, puedes saltarte este video y saltar directamente al proyecto. No obstante, si aún no estás preparado , eso está perfectamente bien. Te guiaremos a través de la configuración algunas herramientas esenciales a lo largo de este curso. Hay dos herramientas principales que necesitarás, Un navegador web moderno y un editor de texto. Para nuestro navegador web, estaré usando Google Chrome, pero también recomiendo Mozilla, Firefox. Probablemente ya tengas estos navegadores, pero repasemos rápidamente cómo descargarlos, si acaso para obtener Google Chrome, simplemente visita esta URL y descarga el navegador. El proceso de instalación es sencillo, por lo que no dedicaremos mucho tiempo a ello. Para Mozilla, Firefox, puedes obtenerlo desde esta URL. Ambos enlaces serán incluidos con esta conferencia para su conveniencia. Bien, ahora hablemos del editor de texto. Utilizaremos el código de Visual Studio que es uno de los mejores editores de texto disponibles en la actualidad. Sin embargo, puedes usar tu editor de texto preferido si tienes uno. Aún depende totalmente de ti. Te recomiendo dar código a Visual Studio a. Intenta descargar el código de Visual Studio, Visita este sitio web y selecciona la versión para tu sistema operativo, Windows, Mac o Linux. El proceso de instalación para el código de Visual Studio también es sencillo. No deberías encontrar ningún problema. Una vez que hayas instalado ambas herramientas, estarás listo para comenzar con el curso. Vamos a sumergirnos directamente. 3. Para comenzar: Hola y bienvenidos a nuestra nueva sección en que vamos a empezar a construir nuestro proyecto. He creado una nueva carpeta en el escritorio. Se llama sitio web receptivo. Si lo abro, aquí encontrarás dos carpetas diferentes. La primera son las imágenes en las que tengo todas las diferentes imágenes que vamos a utilizar a lo largo del proyecto. En cuanto a la segunda carpeta, se llama videos. Tengo aquí un solo video. Bien, sigamos adelante y abramos esta carpeta en código VS. Además de esas dos carpetas, también voy a crear otras carpetas Como ya saben, nuestro proyecto es un sitio web de varias páginas, así que tendremos un par de archivos HTM y CSS diferentes, y Jas. Voy a guardarlos en carpetas separadas. La primera carpeta va a ser, en realidad necesitamos aquí carpeta y el archivo. La primera carpeta va a ser HTML, en la que voy a crear el archivo HTML de punto índice. Entonces la siguiente carpeta va a ser, en realidad necesitamos crearla fuera de la carpeta HTML. La segunda carpeta va a ser CSS. Voy a crear aquí archivo estilo SS. A continuación tenemos que crear carpeta para v script, que voy a insertar archivo script. Bien, vamos a abrir e archivo HTML y crear el documento HTML básico. Para eso, voy a usar un paquete incorporado del código VS. Se llama Amet. Si inserto un signo de exclamación y golpeo Enter, entonces obtendremos aquí el impuesto básico HTML Lo primero que voy a hacer aquí es cambiar el título en lugar de documento. Voy a insertar sitio web responsive. Lo siguiente que voy a hacer es vincular archivos CSS y Jovscp Para eso, tenemos que abrir la etiqueta de enlace en el elemento head. Después en el atributo de referencia H, tenemos que especificar la ruta del archivo. En primer lugar, tenemos que salir la carpeta actual, que es HTML. Para eso, voy a instituir dos puntos. Después adelante ahora podemos elegir la carpeta necesaria. Va a ser CSS y luego necesitamos estilo SS. Bien, de la misma manera voy a vincular el archivo Jovsc En primer lugar, tenemos que abrir la etiqueta script justo encima de la etiqueta del cuerpo de cierre. Entonces voy a insertar tu atributo source en el que tenemos que especificar la parte del archivo. Nuevamente, necesitamos salir de la carpeta actual. Aquí necesitamos dos puntos seguidos del delantero. Después tenemos que elegir la carpeta JS y seleccionar script o archivo JS. Bien, los tres archivos están conectados. Ahora voy a abrir la carpeta en navegador usando Live Server. Como puedes ver, el proyecto se está ejecutando en el navegador. En realidad, si no estás familiarizado con el paquete de servidor en vivo, lo puedes encontrar en código VS. Cerremos esos mensajes. Puedes buscar servidor en vivo aquí en los paquetes. Puede instalar este paquete y ejecutar el proyecto en el navegador. Cuando estás usando el paquete de servidor en vivo y estás haciendo algunos cambios y actualizaciones en el proyecto, entonces no tienes que actualizar la página cada vez que vuelve a cargar automáticamente la página y ejecuta los cambios y actualizaciones de tu proyecto Bien, lo siguiente que voy a hacer es colocar el editor y el navegador uno al lado del otro, así. Para que nuestro proceso de trabajo sea más cómodo y sencillo, puede cambiar de navegador y el editor como. Entonces, lo siguiente que voy a hacer es traer algunos otros enlaces de CDN también a lo largo del proyecto Vamos a usar el teléfono, algunos íconos. Para poder utilizarlos tenemos que seguir adelante y buscar teléfonos CDN JS Entonces tenemos que copiar el primer enlace desde aquí. A continuación, necesitamos abrir etiqueta de enlace en el elemento head y pegar el enlace CDN aquí en el atributo de referencia H. Además de eso, voy a usar los teléfonos de Google durante todo el proyecto. Sigamos adelante y visitemos el sitio web de Google Phones. Voy a buscar teléfonos aquí. El primer teléfono que voy a usar a lo largo del proyecto va a ser Croson One Sigamos adelante y seleccionemos este estilo. A continuación, voy a buscar el teléfono llamado Uli. No sé si lo estoy pronunciando correctamente, ese phon, Seleccionemos este estilo El último teléfono que use va a ser Ta. Sigamos adelante y seleccionemos un par de estilos diferentes. A continuación, voy a agarrar este enlace desde aquí y pegarlo en el elemento head. Bien, así que eso es todo. Nuestro ambiente de trabajo está preparado y ahora tenemos que seguir adelante y comenzar a crear la marca HT para eso. Pasemos a la siguiente conferencia. 4. HTML de encabezado: crea la estructura de marcado: Muy bien, en la conferencia anterior hemos preparado nuestro ambiente de trabajo. Hemos creado diferentes archivos y carpetas. Además, hemos creado el documento básico Html en el que tenemos los enlaces para la fonosómica, también para los teléfonos de Google Ahora es el momento de comenzar a crear el marcado Html de nuestra primera sección Si echamos un vistazo al proyecto terminado, verás aquí el encabezado del sitio web con la navegación. En esta conferencia, vamos a crear el marcado HTML. Marcado para el banner y también para los fondos. En cuanto a la navegación, nos encargaremos de ello un poco más tarde. Sigamos adelante y comencemos a crear la marca HTM. En realidad, voy a acercar un poco el código. Lo primero que voy a hacer es crear los comentarios para el contenedor que necesitamos aquí, fin de contenedor, voy a separar todas las secciones y partes entre sí con los comentarios. Vamos a abrir la etiqueta con el contenedor de clase. A continuación vamos a crear el encabezado. Pero antes de eso voy a insertar aquí de nuevo los comentarios para el encabezado. Vamos a insertar aquí la etiqueta de encabezado HTML cinco. A continuación, necesitamos crear el banner. Pero nuevamente, insertemos aquí el comentario para el banner que necesitamos aquí. Fin de pancarta. Abramos la etiqueta p con el banner del nombre de la clase. El banner incluirá tres archivos diferentes. Tendremos dos encabezados y también el inferior, el primero va a ser H uno elementos de encabezado con el texto Crear A continuación necesitamos tres elementos de encabezamiento. El texto va a ser temas modernos y hermosos. Ahora la parte inferior, voy a envolver botón con el elemento link porque al final del día, una vez que hacemos clic en el botón, tenemos que pasar a la página diferente. Necesitamos unos elementos. Ahora mismo voy a en signo de libra. Entonces vamos a crear el tipo de botón que va a ser botón. Entonces me voy a unir hoy. Cierto, eso es, se trata de la pancarta. A continuación tenemos que cuidar los antecedentes. Voy a insertar tus comentarios para los fondos. Entonces voy a abrir etiqueta con los fondos del nombre de la clase. En general, tendremos tres orígenes diferentes. El primero va a ser trasfondo principal. Voy a abrir la etiqueta del BG main. Duplicemos esta línea de código dos veces. Cambia los nombres de clase que necesitamos aquí, G uno y luego G dos. Muy bien, creo que eso es todo sobre el marcado de mesa del encabezado. Echemos un vistazo. Tenemos aquí solo tres elementos que son visibles, los encabezados y el botón Esos fondos no son visibles porque tenemos aquí solo los elementos vacíos, profundos. Muy bien, ahora es el momento de darle estilo a esos elementos. Y para eso, pasemos a la siguiente conferencia. 5. Creación de estilos CSS predeterminados: Bien, en la última conferencia, hemos creado la marca HTM para nuestra primera sección, que va a ser el encabezado del sitio web, esta parte del sitio web. Ahora tenemos que empezar a escribir algunos CSS. Voy a abrir el archivo CSS de estilo. En realidad, voy a colocar el archivo en el lado derecho del editor de código. En este caso, ambos archivos son visibles y es más conveniente para nosotros. En esta conferencia, vamos a crear algunos estilos predeterminados que se utilizarán para cada elemento que necesitamos aquí. Fin de estilos predeterminados, Entonces voy a seleccionar cada elemento, y para eso tenemos que usar un asterisco En este caso, se seleccionan todos los elementos. Lo primero que voy a hacer es deshacerme del margen predeterminado y el relleno de los elementos. Si revisamos el navegador, puedes ver aquí el espacio entre los elementos. Entonces significa que los elementos tienen algún margen predeterminado. Vamos a establecer el margen a cero. Además, también voy a poner el relleno a cero. Ahora si revisamos los elementos, se puede ver que se elimina el espacio. Bien, Siguiente voy a establecer el tamaño de la caja a la caja de borde. En realidad, border box es una forma decirle al navegador web para facilitar el dimensionamiento de los elementos en una página web cuando se establece la altura interna de un elemento. cuadro de borde hace que el navegador incluya el borde y el relleno en esas medidas. Si dices que un elemento debe tener 100 píxeles de ancho, esos 100 píxeles incluyen el borde y el relleno, y el contenido real dentro la caja se ajusta para que quepa dentro de ese espacio. Esto le ayuda a controlar el tamaño de un elemento de manera más conveniente. Bien, a continuación voy a poner decoración a N. En este caso quitamos subrayado de los enlaces Siguiente Voy a usar y configurarlo en non también. Con este código eliminamos los contornos predeterminados de los elementos como entradas o botones. Por último, voy a configurar la familia telefónica para cada elemento. Como saben, agarramos un par de teléfonos diferentes del sitio web de Google phones. Voy a usar uno de los teléfonos, llamémoslo Ut. Todo bien. Entonces, como puedes ver, la fuente se cambia para cada elemento. Después de eso, voy a establecer el tamaño de fuente del elemento H mal 62.5% Lo que hace este código es que establece el tamaño de fuente para todo el documento HTML 62.5% del tamaño predeterminado Por defecto, la mayoría de los navegadores tienen un tamaño de fuente estándar para el texto, que suele rondar los 16 píxeles. Cuando estableces el tamaño del teléfono en 62.5% significa que todo el texto en tu página web será 62.5% del tamaño predeterminado Esto se usa a menudo como un tweak en el diseño web. 62.5% de 16 píxeles es de diez píxeles, lo que es un bonito número redondo Facilita el trabajo con las unidades relativas como M. Vamos a usar Ram como unidad de medida a lo largo del proyecto. Por eso configuro el tamaño de fuente del HTML en 62.5% Por ejemplo, si estableces algo para que tenga dos Ram de ancho, será de 20 píxeles de ancho porque cada Ram tiene diez píxeles Esto hace que sea más conveniente y sencillo trabajar con los tamaños en su diseño web. Si verificamos los resultados, se puede ver que los elementos se hicieron más pequeños. Eso es por el tamaño de fuente del elemento HTML, que ahora se establece 62.5% Eso es todo sobre los estilos predeterminados Pasemos a la siguiente conferencia. 6. Fondos de estilo en el encabezado: Bien, en la última conferencia empezamos a escribir algunos CSS. Creamos algunos estilos predeterminados, y ahora tenemos que seguir adelante y cuidar el encabezado. En primer lugar, voy a comentarios inseguros para el contenedor, después voy a seleccionar el contenedor Sigamos adelante y definamos dentro de la altura. Ancho va a ser 100% En cuanto a la altura va a ser 100% también. Además, voy a cambiar el color de fondo. Vamos a establecer el color de fondo en blanco. Ahora mismo, aquí no se cambia nada. A continuación, sigamos adelante y cuidemos el encabezado. Voy a instituir comentarios para el encabezado. Entonces sigamos adelante y seleccionemos Encabezado con un nombre de etiqueta. Voy a definir con altura. El ancho va a ser 100% En cuanto la altura voy a estudiar a 100 altura de ventana gráfica Significa que el encabezado ocupará 100% del puerto de visión como la altura. Bien, ahora voy a darle estilo a los fondos y luego seguiremos adelante y nos encargaremos de la pancarta. Sigamos adelante e insertemos aquí nuevos comentarios para los fondos. Entonces voy a seleccionar desarrollos dentro los fondos yo esos tres desarrollos que necesitamos aquí, antecedentes, seguido del selector y voy a fijar la posición para los tres desarrollos a absoluto. En primer lugar, necesitamos posicionar elementos, en este caso voy a posicionar elementos de acuerdo a los elementos padre, que en este caso es header. Para posicionar el elemento acuerdo con su elemento padre, tenemos que asignar al elemento padre posición pero con un valor relativo. Después de eso voy a seleccionar el primer fondo que en nuestro caso es fondo principal suelo, que ven aquí, éste. Sigamos adelante y seleccionemos la media de fondo. En primer lugar, como se define dentro de las alturas, voy a establecer con 150% para las alturas, va a ser 150% también En este caso, el elemento ocupará 150% de con la altura de su elemento padre En este caso, el elemento padre son fondos. Pero como puedes ver, los fondos no tienen ninguno dentro de la altura. El fondo principal ocupará 150% de la w y la altura del elemento header Ahora mismo tenemos aquí los mismos resultados. Nada es visible, me refiero al fondo. Ahora voy a establecer el fondo con función de degradado lineal. La dirección va a ser a la derecha. Entonces necesitamos tres colores diferentes. El primero es en realidad necesitamos aquí dos a la izquierda y no dos derechos. El primer color va a ser transparente. Entonces necesitamos segundos colores que van a ser de color púrpura. El oscuro, necesitamos aquí 4400 pi. También, necesitamos aquí el segundo color, volverá a ser morado. Pero el más ligero, voy a usar aquí 4400b Déjame explicarte lo que hace este código aquí. Como puedes ver, este código crea un fondo para encabezado. Utiliza un degradado que comienza en el lado izquierdo y va de transparente a púrpura oscuro a un púrpura ligeramente más claro. Le da al fondo una transición de color suave de izquierda a derecha, pasando del púrpura oscuro al púrpura más claro y luego transparente. Bien, a continuación voy a establecer la posición de los elementos a posición va a ser -95% También voy a definir posición izquierda, va a ser -10% Vamos a revisar el navegador El elemento se posiciona y ahora tenemos que rotar este elemento usando la propiedad transform. Voy a usar aquí dos funciones, rotar z y sesgar x. Voy a explicar cada una de ellas por separado La función rotar Z tendrá el valor -15 grados. Además, necesitamos aquí sesgar x con el valor 30 grados. La primera función, me refiero a la función rotar Z, hace que un elemento de la página web gire o incline en sentido antihorario 15 grados. Le da al elemento una ligera inclinación hacia la izquierda como si estuvieras girando un marco ligeramente hacia un lado cuanto a la segunda función sesgo, x, hace que un elemento en una página web se incline o sesgue hacia la derecha 30 grados Es como inclinar el elemento hacia un lado, haciendo que parezca un terreno paralelo Como puede ver, tenemos aquí dichos resultados. Ahora tenemos que hacer redondeada la esquina del fondo, y para eso voy a usar propiedad llamada para el radio, tendrá cuatro valores diferentes. Los tres primeros valores también son cero. El último valor que indica la esquina inferior izquierda del elemento, va a ser diez m. Ahora, como puede ver, se redondea la esquina del elemento. Por último, voy a disminuir ligeramente la opacidad. Digamos 2.9 Bien. Como puedes ver, tenemos aquí una barra de desplazamiento. En realidad no lo necesitamos. Para deshacerme de la barra de desplazamiento, voy a asignar a la propiedad contenedor llamada overflow hidden, lo que nos permite ocultar la barra de desplazamiento. Bien, así que todo se ve bien. A continuación voy a encargarme del segundo fondo, me refiero al fondo uno. Este que se coloca bajo el fondo principal. Sigamos adelante y seleccionemos uno de fondo. Definir dentro de las alturas. En este caso voy a establecer con 50% entonces la altura va a ser 100% Otra vez, voy a usar fondo con función de degradado lineal. En este caso, necesitamos aquí dirección predeterminada. No voy a insertar aquí dos a la izquierda o dos a la derecha ni nada. El primer color va a ser transparente. Entonces voy a sumar aquí el valor porcentual que voy a explicar muy pronto. Insertemos aquí el segundo color. Va a ser F 26 C. Entonces necesitamos aquí el tercer color. Va a ser F724b. Aquí, el valor porcentual, quiero decir 60% especifica la posición donde se produce la transición de color dentro del gradiente lineal. Términos simples, significa que el fondo comenzará como transparente, luego cambiará al primer color cuando el 60% del degradado esté completo y continuará la transición al segundo color para el 40% restante del degradado En este código, el 60% del degradado será transparente y luego cambiará suavemente al primer color, creando una transición de color suave en el fondo. Bien, vamos a encargarnos del puesto. Voy a establecer a posición -40% También necesitamos la posición correcta Va a ser -10% el elemento se posiciona. Ahora como suposición, necesitamos girarlo como el primer fondo que voy a usar. En realidad, necesitamos aquí las mismas propiedades y valores. Vamos a copiar este código, pegar aquí. El fondo se gira y se ve bien. Hagamos redondear la esquina del fondo usando un radio de borde en este caso. Necesitamos aquí 000.5 corrió. El fondo se ve bastante bien, pero tenemos aquí un pequeño problema. Tenemos que colocar este trasfondo bajo el trasfondo principal. Para eso, voy a usar la propiedad índice Z. Por defecto, cada elemento tiene una propiedad de índice Z con el valor cero. Pero si agregamos aquí índice con el valor, digamos uno que es mayor que cero, entonces el fondo terminará detrás de mí bajo el fondo en. Bien, sobre el segundo antecedente, ahora tenemos que cuidar el tercer antecedente, que en nuestro caso es fondo dos. En realidad, creo que será mejor si duplicamos este código aquí. Cambiemos el nombre de la clase. El ancho y alto serán similares, 50% y 100% En cuanto al gradiente lineal, voy a cambiarlo ligeramente. Necesitamos aquí 70% Además, necesitamos aquí diferentes colores. El segundo color va a ser un 5995. En cuanto al tercer color, voy a instituir E. Entonces necesitamos aquí 9458 En cuanto a las posiciones, voy a establecer dos posiciones al 60% La posición correcta será del 10% Necesitamos la misma propiedad de transformar aquí. El radio fronterizo volverá a ser el mismo. Comprobaremos ahora los resultados. Como se puede ver, el fondo terminó detrás del fondo principal. Para arreglar eso, necesitamos, nuevamente, la propiedad del índice Z. Pero en este caso, el valor de la propiedad del índice z debe ser mayor que el índice z uno. Vamos a ponerla en dos. Ahora el fondo debería ser visible, y sí, es visible. Lo único que voy a hacer es agregar opacidad. Me refiero a disminuir la opacidad 2.4 Además, voy a agregar al fondo algunos efectos de sombra que necesitamos aquí Sombra de caja con los valores siete y cuatro Ram. El seis Ram, y el color va a ser RGBA 000 y la opacidad 0.9 Este código agrega una sombra a un elemento en la página web Déjame explicarte qué hacen esos valores. El primer número siete Ram, determina qué tan lejos está la sombra horizontalmente del elemento. El segundo valor, cuatro Ram, determina qué tan lejos está la sombra verticalmente del elemento. El tercer número seis Ram, controla el tamaño o barra de la sombra. En cuanto al color, especifica el color de la sombra. En este caso, es una sombra muy oscura, casi negra porque aquí tenemos tres ceros, lo que indica el color negro Pero tenemos aquí la opacidad 0.9 lo que hace que el color negro oscuro sea ligeramente más claro Finalmente, tenemos aquí este bonito y fresco efecto de sombra. Muy bien, en realidad eso se asienta sobre los antecedentes. Voy a parar aquí y pasar a la siguiente conferencia, en la que vamos a darle estilo al banner de la cabecera. 7. Diseño de banner en el encabezado: Bien, en la última conferencia hemos estilizado los fondos de la cabecera Como pueden ver, tenemos aquí tres orígenes diferentes los cuales se posicionan y se ven bastante bien. Ahora tenemos que encargarnos del banner, que ahora mismo se coloca en la esquina superior izquierda de la página. En realidad, se coloca detrás del fondo. Maine. Sigamos adelante e insertemos nuevos comunes para la pancarta. Entonces voy a seleccionar Banner y definir su posición, que va a ser absoluta. Como saben, cuando usamos position absolute, necesitamos position relative para el elemento padre. Como se puede ver, cabecera señora tiene posición relativa. A continuación voy a establecer la posición de dos 18% Entonces ya tendremos aquí la posición izquierda. Va a ser 20% Como pueden ver, el banner cambió su posición. Se coloca bajo el fondo principal. Entonces tenemos que arreglar eso usando la propiedad index. Voy a establecer el índice 24. Ahora como puede ver, el problema está arreglado. Bien, ahora es el momento de personalizar cada uno de los elementos por separado. Voy a comenzar con el primer elemento de encabezado, que es H uno. Entonces sigamos adelante y seleccionemos Banner, seguido del elemento H one heading. En primer lugar, voy a cambiar la familia telefónica. En este caso, usemos el teléfono llamado mull. Va a ser cursiva. Entonces voy a aumentar el tamaño del teléfono, que sea 13 Ram. Vamos a revisar el navegador. Se cambia el tamaño del teléfono, y además tenemos aquí diferente familia telefónica. A continuación voy a cambiar el color, va a ser blanco. Voy a añadir aquí algún efecto de sombra. En este caso, usemos sombra de texto. Funciona de manera similar a como lo hace la sombra de caja. Voy a interferir valores 01 Ram, entonces tendremos tres Ram. cuanto al color que voy a usar van a ser de color negro, pero en este caso con una menor opacidad, o va a ser 0.3 Como pueden ver, el encabezado se ve bastante bien A continuación, te voy a llevar del segundo elemento encabezado, que es tres. Sigamos adelante y seleccionemos Bender, seguido de los H tres elementos de encabezamiento Voy a cambiar el tamaño de fuente, en este caso van a ser tres Ram. Entonces voy a cambiar el peso de la fuente. Hagamos que los pesos de las fuentes sean más ligeros y pongámoslo en 300. Entonces voy a transformar texto en mayúsculas. Ahora voy a cambiar el color del encabezado. Va a ser blanco. Nuevamente, usa la sombra tecnológica. Vamos a agarrar esta línea de código. Lo único que voy a hacer aquí es disminuir la opacidad Va a ser 0.1 Finalmente, voy a crear algún espacio usando margen. El margen en la parte superior va a ser cero. Entonces tendremos cero en el lado derecho. A continuación tenemos fondo , van a ser tres Ram. En cuanto al lado izquierdo, lo voy a poner en un Ram. Bien, eso es todo, sobre el segundo rumbo. Ahora es el momento de personalizar el fondo. Sigamos adelante y seleccionemos Banner seguido de botón. En primer lugar, voy a establecer con en altura. Vamos a establecer con 215 Ram. Entonces la altura va a ser de cinco fram. También voy a cambiar el fondo. Vamos a usar nuevamente gradientes lineales. La dirección de la transición de color va a ser dos, ¿verdad? Entonces necesitamos aquí el primer color que va a ser A tres EC, es un color púrpura. Entonces necesitamos otro color púrpura, que va a ser 84, luego 30. De nuevo es de color morado, pero el más oscuro. Vamos a revisar el botón que tenemos aquí. Fondo agradable y fresco con degradado. Siguiente Voy a deshacerme de la frontera por defecto. Vamos a ponerla en ninguna, ya que voy a hacer redondear el botón usando radio de borde. Vamos a enviarlo a la Ram y revisar el navegador paso a paso o botón. Se ve genial. A continuación voy a establecer el tamaño del teléfono en 1.6 Ram. Además, voy a hacer el perno de peso del teléfono. Entonces transformemos el texto en mayúsculas. El texto se ve bastante bien, pero necesitamos agregarle un poco más de estilo. Necesitamos crear algo de espacio entre las letras usando el espaciado entre letras. Va a ser un 0.1 Ram y también cambiar el color. Necesitamos un color más claro. Voy a poner el color en blanco. Ahora el botón se ve bastante bonito y genial. A continuación, voy a agregar efecto sombra al elemento usando pox shadow con el valor de 01 Ram, tres Ram. Y el color va a ser RTB A con la menor opacidad 0.1 Como puedes ver, el botón tiene el efecto de sombra Entonces voy a crear algo de espacio en el lado izquierdo usando el margen izquierdo. Va a ser una rampa. Y también cambia el tipo del cursor, hazlo puntero. Bien, Antes de terminar esta conferencia, quiero agregar una cosa más a nuestro botón. Voy a crear efecto hover. Una vez que pasamos el cursor sobre el botón, necesitamos moverlo hacia arriba usando la función transform translate Sigamos adelante y seleccionemos Banner, seguido de botón. Y necesitamos aquí pseudoclase hover. Usemos la función transform translate y. Nos permite mover los elementos según eje y. Quiero decir verticalmente. Voy a añadir aquí valor negativo. Va a ser -0.2 Ram. Si reviso el navegador, como pueden ver, una vez que coloquemos el cursor sobre el botón, entonces se moverá ligeramente hacia arriba Hagamos que este efecto sea más suave usando la transición. Voy a añadir aquí transformar. Y la duración del efecto va a ser de 0.3 segundos. Ahora bien, si pongo el cursor sobre el botón, entonces obtendremos este bonito y genial efecto Muy bien, en realidad eso se sienta sobre la pancarta. A continuación vamos a encargarnos de la navegación, el logo y el de barra, esos elementos de navegación con sus menús desplegables Sigamos adelante y nos ocupemos de eso. 8. Creación del marcado HTML de la navegación: Hola y bienvenidos a tu nueva sección, en la que vamos a estar creando una barra de navegación para nuestro proyecto. En la última sección, hemos creado el encabezado del sitio web, que consiste en un banner. Se coloca en el lado izquierdo de la página. Y también tenemos aquí tres orígenes diferentes los cuales creo que se ven bastante bien. Echemos un vistazo al proyecto terminado. La barra de navegación constará de un logotipo. Se coloca en la esquina superior izquierda de la página. Y también, tendremos aquellos elementos de navegación que se colocan horizontalmente en fila. Cada elemento de navegación tiene un menú desplegable, excepto el botón. En esta conferencia, vamos a estar creando marcas HTML para el logotipo y también los elementos de navegación En cuanto a los menús, los atenderemos un poco más tarde Bien, sigamos adelante y abramos el código VS y comencemos a crear el marcado HTML En primer lugar, voy a insertar aquí comentarios para la navegación. Entonces voy a abrir HTML Five Novelment con la oferta de nombre de clase A continuación, necesitamos crear el logo. Al principio, voy a insertar los comentarios para el logo. Entonces voy a abrir enlace Elementos. Usamos aquí Elemento Link, pues cuando hacemos clic en el logo, tenemos que movernos a la página principal, el índice HTML. Si voy a alguna de las páginas aquí y luego hago clic en el logotipo, debemos volver a la página principal I, el índice del archivo HTM. En el atributo de referencia H, voy a indicar índice HTML. Entonces necesitamos aquí desarrollo con el logo de la clase. El logotipo constará de un par de elementos de span diferentes. Vamos a abrir la etiqueta span e insertar código. Y luego necesitamos de nuevo, span elementos con el texto Create. A continuación, voy a abrir otra etiqueta span. Voy a insertar tus plantillas. Bien, eso es todo, sobre el logo. A continuación necesitamos crear los elementos de navegación. Voy a insertar sus comentarios para los artículos. Y luego voy a abrir lista I ll elementos con el nombre de la clase, sin ítems. La lista constará de seis elementos diferentes de la lista. Aquí necesitamos elementos LI y va a tener la clase no item. Entonces dentro del elemento LI, voy a abrir link como el logo, necesitamos especificar aquí los nombres de las páginas. Al principio estoy ins aquí clase, va a ser sin enlace y luego el primer ítem va a ser casa. Una vez que hagamos clic en el primer elemento, debemos volver a la página principal. Me refiero al índice del archivo HTML. Echemos un vistazo a la versión terminada. Si voy a alguna de las páginas y luego hago clic en Inicio, entonces volveremos a la página principal. Voy a instituir de nuevo, indexar HTML en general. Tendremos seis elementos diferentes de la lista. Por lo tanto, voy a duplicar el elemento LI cinco veces, luego cambiar los ítems. El segundo ítem va a ser clientes. Necesitamos cambiar el nombre del archivo HTML. En realidad, esos archivos aún no se han creado. Nosotros nos encargaremos de ellos en las próximas secciones. En este caso, sólo estoy especificando los nombres de los archivos HTML. Los crearemos más tarde. Bien, el tercer artículo va a ser productos. Cambiar el archivo HTML, tenemos que escuchar los productos a continuación. Vamos a tener contacto, entonces voy a insite sus cuentas Por último, necesitamos escuchar los precios. Como dije, va a ser botón y no el enlace. Voy a cambiar el nombre de clase que necesitamos aquí ahora, PTN. También cambie el nombre del archivo HL. Va a ser el precio del HTML. Todo bien. Creo que eso es todo sobre el marcado HTML Echemos un vistazo a los proyectos. Como puede ver, los elementos de navegación y también el logotipo se colocan detrás del fondo. Y también se cambia ligeramente la disposición de los fondos. Tenemos que encargarnos de ellos y solucionar esos problemas. Sigamos adelante y pasemos a la siguiente conferencia. 9. Diseño del logotipo del sitio web: Bien, en la última conferencia hemos creado el marcado HDML para la barra de navegación de nuestro proyecto Y ahora es el momento de darle estilo a este elemento. En esta conferencia, vamos a estar estilizando el logo. Volvamos al archivo CSS y comencemos a escribir el código CSS. Necesitamos agregar aquí nuevos comentarios para la navegación. Voy a seleccionar elementos nav, que tiene nombre de clase. No, antes que nada, voy a definir su posición. Se va a arreglar. Además, necesitamos definir las propiedades superior e izquierda. Ambos van a ser cero ahora mismo, aquí no se cambia nada. Como puedes ver, los elementos de la navegación se colocan detrás del fondo y tenemos que arreglarlo. Para solucionar ese problema, necesitamos usar la propiedad z index y voy a asignarle un valor mayor. Digamos diez. Ahora como puedes ver, los elementos ya no se colocan detrás del fondo. A continuación voy a establecer ancho y alto de la navegación que se define con, va a ser 100% En cuanto a la altura, voy a ponerla en 12 Ram. Además, voy a agregar aquí un color de fondo temporal para poder ver mejor dónde está la barra de navegación. Vamos a establecer el color. Digamos gris claro. Va a ser CC Aquí tenemos nuestra siesta. Se coloca en la parte superior de la página web. A continuación, voy a crear algo de espacio usando relleno. El relleno en la parte superior e inferior va a ser cero. En cuanto a los lados izquierdos derecho, voy a ponerla a 15 rápidos. Como pueden ver, tenemos aquí algo de espacio en los lados izquierdos derechos. A continuación, voy a usar flex box para alinear los elementos. Como ya sabéis, parte consta de dos partes distintas. Tenemos logo y los elementos de navegación. Necesitamos colocar ambos elementos en una fila horizontalmente en los lados izquierdo y derecho. Para eso, necesitamos usar Display Flex. Como puede ver, el logotipo y los elementos de navegación se colocan uno al lado del otro. Para colocarlos en los lados izquierdo y derecho, voy a usar justificar contenido con el espacio de valor entre. Ahora, como puedes ver, el logo se coloca en el lado izquierdo. En cuanto a los elementos de navegación, se colocan en el lado derecho del No. Bien. A continuación voy a colocar artículos, quiero decir, los elementos de la barra de navegación en el centro verticalmente. Y para eso voy a usar otra propiedad de CSS, Flexbox, y se llama Align Items Y voy a ponerla al centro. Ahora los elementos se colocan en el centro verticalmente. Bien, eso es todo sobre el bar ahora mismo Ahora. A continuación voy a encargarme del logo. Necesitamos insitu nuevos comentarios para el logo. Después voy a seleccionar Desarrollos que tiene el logotipo del nombre de la clase. De nuevo, voy a usar libros Flex para alinear los elementos. Vamos a configurar la pantalla para flexionar. En este caso, voy a colocar los artículos verticalmente uno encima del otro. Para eso, tenemos que cambiar la dirección del libro flex y va a ser columna. Ahora como puedes ver, los elementos se colocan verticalmente. A continuación voy a seleccionar el primer elemento span en el logo. Me refiero a esta. Para eso necesitamos aquí logo. Luego span elementos. Ahora tenemos que usar una de las pseudo clases llamadas n-th child selector Aquí tenemos que especificar el número. Como dije, necesitamos seleccionar el primer elemento span. Por lo tanto, voy a sentarte uno. En primer lugar, voy a cambiar la familia telefónica. Vamos a usar aquí el teléfono llamado los topos. Además, aumentemos el tamaño del teléfono. Voy a ponerla en tres Ram. Echemos un vistazo aquí tenemos los primeros elementos span. Cambiemos el peso de la fuente. Voy a hacerlo audaz. Transformemos el texto en mayúsculas y cambiemos el color. Voy a usar el color blanco. Aquí tenemos el primer elemento span del logo. En realidad, sigamos adelante y deshagamos de este trasfondo temporal. Creo que ya no lo necesitamos ahora. El logo se ve mucho mejor. A continuación, voy a seleccionar el elemento span que se coloca dentro del primer elemento panel, este el texto crea. Para eso necesitamos logo seguido del elemento span con selector de gráfico primero. Y entonces nuevamente necesitamos elemento span. Cambiemos el tamaño del teléfono. Va a ser 1.8 Ram. El tamaño de esta parte, este elemento pan, se cambia ahora el texto se vuelve más pequeño. Tenemos que mover el elemento hacia arriba como el texto aquí. Para eso, voy a usar transform. Con la función translate y, mueve el elemento según el eje y. Quiero decir que mueve el elemento verticalmente. Para mover el elemento hacia arriba, necesitamos usar valor negativo. En este caso va a ser 0.8 Como puedes ver, el elemento no se ha movido hacia arriba. El problema es que Spanelon es un elemento inline. Y una vez que se tiene el elemento inline, entonces transform propiedad no se aplica. Por lo tanto, necesitamos transformar elementos de en línea a bloque en línea para aplicar la propiedad transform. Ahora bien, el problema debería ser arreglado. Bien, como puedes ver, el elemento se coloca hacia arriba y la propiedad transform funciona bien. A continuación voy a seleccionar el segundo elemento span. Me refiero a esta plantillas en realidad vamos a copiar este selector desde aquí. Y cambiar el selector ni. Necesitamos dos. Vamos a cambiar la familia de fuentes. Va a ser croson uno Cosi. Entonces necesitamos tamaño de fuente, va a ser 1.5 Rams Voy a cambiar el color. Vamos a agregarlo al DDT, que es de un color gris claro Aquí tenemos el segundo spanlement. A continuación, voy a crear algo de espacio entre las letras usando espaciado entre letras, y va a ser 0.1 Ram. Además, voy a colocar los elementos del lado derecho. Y para eso usemos propiedad de línea con el valor, derecho, el texto se coloca en el lado derecho. Pero en realidad eso no es lo que necesitamos aquí. Si echamos un vistazo a la versión terminada, ve que el segundo elemento de giro se coloca muy bien en el lado derecho. Tenemos que moverlo ligeramente hacia el lado derecho y también hacia arriba otra vez, voy a usar transform property. Necesitamos aquí traducir la función como los valores a los que voy a pasar aquí. 0.2 Ram, también línea aquí, menos uno Ram. El primer valor, 2.2 Ram, mueve el elemento hacia la derecha horizontalmente 22 píxeles. En cuanto al segundo valor, menos uno Ram, mueve el elemento verticalmente hacia arriba en diez píxeles. El signo negativo en el caso la dirección, es hacia arriba. En cuanto a los valores positivos, lo moverían a la baja. Ahora tenemos el mismo problema aquí. Vamos a asignar el bloque en línea de visualización al segundo elemento también. Ahora como puede ver, el problema está arreglado. Tenemos aquí buenos y geniales resultados. Por último, quiero agregar un poco de efecto de sombra al logo. Me refiero a los elementos span. adelante y seleccionemos todos los elementos span en la propiedad de sombra de texto del logotipo con los valores 0.5 Ram, uno Ram. Entonces el color va a ser RGBA, color negro con menor opacidad, y va a ser 0.2 Bien, entonces aquí tenemos el logo Se ve bastante bien con el logo. Ya terminamos, es el momento de seguir adelante y personalizar los elementos de navegación. Sigamos adelante y hagamos eso en la próxima conferencia. 10. Elementos de navegación para estilizar: Bien, en la última conferencia hemos diseñado el logo del sitio web. Ahora es el momento de seguir adelante y seguir estilizando la barra de navegación. En esta conferencia, voy a darle estilo a los elementos de navegación. Vamos al código VS. En primer lugar, antes de comenzar a darle estilo a los elementos de navegación, quiero mover la navegación hacia arriba. Quiero decir fuera de la cabecera. Cortemos el código de aquí y lo peguemos aquí. Bien, después del logo, voy a ser nuevos comentarios para los elementos de navegación. Entonces voy a seleccionar el elemento UL que tiene el nombre de clase Now items. En primer lugar, voy a definir el ancho. Va a ser 50% Entonces voy a colocar los elementos de navegación uno al lado del otro, horizontalmente en fila. Porque ahora mismo se colocan verticalmente. Para hacer eso, voy a usar Flex box. Necesitamos Display Flex. Ahora si comprobamos los resultados, verás que los ítems se colocan horizontalmente en fila. A continuación, voy a crear algo de espacio entre los elementos y para eso voy a usar una de las propiedades de flex box llamadas justify content. Y voy a asignarle valor llamado espacio incluso. Creará un espacio uniforme entre los artículos. Bien, después de eso, sigamos adelante y seleccionemos los elementos LI que tiene el nombre de clase del ítem. Voy a deshacerme de las balas predeterminadas para eso. Vamos a usar el estilo de lista y se le asigna el valor none. Como puede ver, las balas se han ido. A continuación voy a seleccionar los elementos de enlace que necesitamos aquí. Sin enlace. Aumentemos el tamaño del teléfono. Voy a llegar a Ram, luego voy a transformar texto en mayúsculas. En realidad necesitamos aquí transformación de texto y el valor appl case Y también cambiar el color. El color va a ser blanco. Vamos a comprobar el resultado. Como puedes ver, los elementos de navegación se ven bastante bien. A continuación, voy a crear algún espacio entre las letras. Hagámoslo 0.1 Ram. Después de eso, voy a agregar un poco de efecto de sombra a los elementos de enlace usando tech shadow. Los valores serán 0.5 gramo uno Ram. Y el RGBA color negro con la opacidad 0.2 Bien, así que creo que los artículos de la perilla se ven bastante bien Ahora tenemos que encargarnos del último artículo que va a ser el botón, me refiero al botón de precios. Sigamos adelante y seleccionemos este elemento usando el nombre de clase ahora, PTN Definamos dentro de la altura. Voy a poner ancho a 13 Ram. En cuanto a la altura, voy a hacer cinco Ram. También cambia el color de fondo. Vamos a ponerlo en blanco. Como puedes ver, los con alturas no se aplican a los elementos y tenemos aquí el mismo problema. Quiero decir que el elemento link por defecto es un elemento inline y por lo tanto dentro de las alturas no se aplican al elemento, tenemos que cambiarlo. En este caso voy a usar Display Flex porque también necesitaremos otras propiedades de flex box. Por eso uso aquí lino y no bloque en línea o bloque. Ahora si compruebo el resultado, verás que los dentro de la altura se aplican al elemento que va a colocar el contenido en el centro de la caja. Y para eso voy a usar justificar contenido con el centro de valor. Y también necesitamos el centro de líneas de pedido, justificar el centro de contenido. Alinee el elemento en el centro horizontalmente. En cuanto al centro de líneas de pedido, coloca el elemento en el centro verticalmente. Ahora tenemos aquí el centrado perfecto. En realidad. Va a colocar elementos de enlace y también la parte inferior en el centro verticalmente. Para eso, podemos agregar aquí centro de líneas de pedido y se solucionará el problema. Ahora los elementos de enlace y el botón se colocan muy bien en el centro. Sigamos adelante y agreguemos aquí un par de estilos más. A continuación, voy a hacer redondear el botón usando para el radio, va a ser forma, ahora el botón está redondeado. Además, voy a agregar al fondo pequeño efecto de sombra usando box shadow con valores 01 Ram. Entonces tendremos aquí tres Ram. El color va a ser RTP A con la opacidad 0.1 Tenemos aquí bonito efecto de sombra Después de eso voy a tomar del teléfono. Aumentemos el tamaño del teléfono. Van a ser dos carneros. Voy a usar el espaciado entre letras. Va a ser un 0.1 Ram. Cambiemos el color. Voy a usar el color F88 344. Va a ser un color naranja como los artículos de perilla. Voy a hacer que el texto sea mayúscula. Usemos los tejanos en mayúsculas. Bien, los elementos de la perilla con el botón se ven bastante bien. Voy a agregar un efecto hover al botón. En realidad, voy a usar el efecto hover similar. Seleccionemos la perilla PTN. Con hover, necesitamos transformarnos. Traducir Y valor va a ser -0.2 n. Si coloco el cursor sobre el botón, se moverá hacia arriba Pero como ve, necesitamos una transición suave. Utilice la propiedad de transición que necesitamos aquí para transformar. La duración del efecto va a ser de 0.3 segundos. Ahora tenemos aquí bonito y fresco efecto hover. Bien, en realidad eso es sobre los n artículos. Ahora tenemos que agregar a cada elemento de navegación el menú desplegable, como el que tenemos en el proyecto terminado. Para eso, sigamos adelante y pasemos a la siguiente conferencia. 11. Cómo crear el marcado de HTML en el primer desplegable: Bien, en la última conferencia hemos personalizado los elementos de navegación y también el botón. Y ahora es el momento de seguir adelante y comenzar a crear el menú desplegable. Me refiero al menú desplegable para el primer elemento de navegación. Echemos un vistazo al proyecto terminado. Si coloco el cursor sobre el primer elemento de navegación, entonces aparecerá el menú desplegable Como puedes ver, el primer menú desplegable consta de dos partes principales. Tenemos el lado izquierdo y también tenemos el lado derecho. En el lado izquierdo, tenemos la lista de las características. Como puede ver, una vez que pasamos el cursor sobre los elementos de la lista, poco efecto de desplazamiento El lado derecho es más complejo. Tenemos aquí los iconos de los teléfonos con efecto hover. Además, tenemos algunos elementos textuales con diferentes colores. Y abajo se puede ver el botón. Muy bien, eso es todo. Lo que vamos a crear en esta conferencia. Voy a crear el marcado HTML y luego diseñaremos el menú top town Bien, vamos al código VS y comencemos a crear el marcado HTML Tenemos que insertar los comentarios justo después del elemento link, dentro del elemento LI. Insertemos tus comentarios para el menú desplegable. Va a ser el primer desplegable que necesitamos aquí, desplegable uno. Después de desplegable uno, voy a abrir elementos profundos los cuales tendrán dos clases distintas. El primero va a ser un nombre de clase común, desplegable. Además de eso, necesitamos aquí, desplegable uno. A continuación voy a insertar aquí otro elemento profundo que va a ser el lado izquierdo del desplegable que necesitamos aquí. Desplázate uno a la izquierda. Además, vamos a crear el lado derecho. Duplicemos esta línea de código y cambiemos el nombre de la clase. Necesitamos que bajes uno, bien. Bien, Al principio, cuidemos el lado izquierdo. Voy a insertar aquí H, tres elementos de encabezado con las características de texto. Entonces después de encabezar, necesitamos otro desarrollo que va a ser el mínimo, me refiero al envoltorio dentro del desarrollo. Voy a crear otro que va a ser el elemento de características. Entonces voy a agregar aquí el nombre de la clase, el elemento de características. Cada elemento de la lista constará de dos elementos. El primero va a ser un fonosomíconos. Para el segundo, tendremos aquí sanelement si echamos un vistazo al proyecto terminado y verificamos el lado izquierdo Entonces como puedes ver tenemos los fonosomíconos y también el panelement Vamos a inasegurar I elementos con las clases FA sólido A sólido A estrella y luego en su lugar aquí elemento span, el texto va a ser todas las características Muy bien, en general tendremos 11 elementos diferentes de la lista. Por lo tanto voy a duplicar elemento de la lista de características diez veces. Entonces tenemos que cambiar los nombres de clase de los phons y también el contenido de los elementos span El segundo elemento va a ser un sólido, A cajas apiladas. En cuanto a este elemento fan, va a ser más de 100 elementos. Entonces el tercer fonosomicón va a ser un sólido, un archivo A. En cuanto a este elemento fan, voy a insertar 1,000 maquetaciones plus. El siguiente fonosomicón será un sólido, una punta de pluma. También, necesitamos cambiar este panel. Voy a insertar tu diseño sin código. Entonces después de eso los teléfonos micon va a ser una llave sólida En cuanto a este panel, voy a insertar tu creador de temas Entonces el siguiente ícono va a ser un sólido, un carro de compras. Como necesitamos cambiar este panel que va a ser Comercio Electrónico Entonces tendremos una red cableada también cambiar este panelments. Aquí tendremos flujo de trabajo. Entonces el siguiente va a ser un sólido, una bombilla. En cuanto a este panel, insertemos aquí el marketing A continuación vamos a tener aquí una fase sólida desarrolladores de código. El siguiente icono va a ser un escritorio sólido. En cuanto a este panelmentvoy a insertar ejemplos laterales. Por último, necesitamos aquí último icono qué sólidos será la integración del spanelment Bien, vamos a hablar de la primera parte, me refiero al lado izquierdo del menú desplegable. Aquí tenemos todos los fonomíconos y los spanlments. A continuación tenemos que tomar aquí del lado derecho. En primer lugar, necesitamos aquí el rubro tres que van a ser servicios. Entonces después de encabezar voy a abrir esto va a ser servicios desplegables. Entonces dentro del desarrollo, voy a abrir otra D que va a ser desplegable el servicio en sí mismo. Incluirá elementos y también desarrollo que se incluirá a sí mismo, dos elementos span. Vamos a insertar aquí el elemento I, que va a ser una llave Aa solida Entonces como dije, necesitamos aquí desarrollo con el servicio desplegable de nombre de clase. Voy a instituir dos elementos span. El primero va a ser constructor delgado. Duplicemos esta línea de código. El segundo elemento span será el constructor delgado número uno. Ahora voy a duplicar el servicio desplegable. En general, tendremos siete servicios desplegables. Duplicemos este código seis veces. Ahora necesitamos cambiar la fonética y también el contenido de los elementos span El segundo fonsomión va a ser un sólido. En realidad, necesitamos aquí para eliminar esta T, lo contrario el icono no se mostrará. Vamos a deshacernos de él. Como dije, el fonoomicón va a ser un sólido, una bombilla En cuanto al mercado panelmentse. En cuanto al segundo panelement, voy a insertar aquí módulos, layouts y temas Entonces el siguiente fonosomicón será un sólido, una nube. En cuanto a estos panelementos, vamos dentro de la nube. Y entonces el segundo va a ser el almacenamiento en la nube para diseñadores. El próximo fosmicon será un sólido, un cerebro. Cambiaremos el panelmentse. Ai Spanel va a ser construir sitios web con IA Entonces el siguiente ícono va a ser un grupo de personas sólido. En cuanto a los panelements, necesitamos equipos. Entonces el segundo va a ser la colaboración para las agencias. Entonces necesitamos un sólido un globo. En cuanto al hosting panelmentseed, el segundo va a ser alojamiento rápido de los Ahora tenemos que cambiar el último servicio de arriba hacia abajo. Necesitamos un sólido una corona. En cuanto a los elementos span, vamos a interferir IP y el segundo va a ser soporte 2047 y estos recuentos Bien, todos los servicios desplegables están preparados. Lo último que tenemos que hacer es crear el botón que se debe colocar aquí. Vamos a abrir el tipo de botón va a ser botón. En cuanto al contenido, hoy me voy a unir ins. Todo bien. Espero que todo sea correcto. Eso lo veremos en las próximas conferencias. Vamos a revisar los resultados que tenemos aquí. Servicios, se muestran todos los iconos. Ahora tenemos que seguir adelante y diseñar el primer desplegable para eso Pasemos a la siguiente conferencia. 12. Características de estilo en el primer desplegable: Bien, entonces en la última conferencia hemos creado el marcado HTML para nuestro primer menú desplegable Me refiero al menú desplegable del enlace de inicio. Ahora es el momento de comenzar a personalizar el menú desplegable. Vamos al archivo CSS y justo después de navlink, insertemos nuevos comentarios para el menú desplegable Va a ser el primer menú desplegable que necesitamos aquí. Desplázate uno, luego de desplegable uno. Bien, sigamos adelante y seleccionemos el desplegable uno. En primer lugar, voy a fijar su posición a absoluta. Vamos a posicionar este elemento de acuerdo con el elemento padre, que no es ningún elemento. Voy a asignar a ningún ítem, posición relativa. Lo necesitamos para posicionar elementos hijos. En este caso, desplázate uno según el elemento padre, que no es ningún elemento. Bien, definamos top y vamos propiedades. La posición superior va a ser 4.9 m. En cuanto a la posición izquierda, voy a hacerla -24 m. Vamos a comprobar el resultado Como puede ver, se posiciona el menú desplegable. Ahora voy a definir el color de fondo y va a ser blanco. Bien, aquí tenemos el menú desplegable. Ahora necesitamos definir el, con altura del elemento. Voy a establecer con 96 Ram. En cuanto a la altura, va a ser 60 Ram. A continuación voy a colocar características y servicios lado a lado, horizontalmente. Y para eso voy a usar Flex box, necesitamos exhibir Flex. Si comprobamos el resultado, verás que las características y servicios, me refiero al lado izquierdo y derecho del menú de arriba hacia abajo se colocan lado a lado horizontalmente. Bien, después de eso, voy a hacer que el menú de arriba hacia abajo un poco redondeado usando radio de borde. Voy a ponérselo a un Ram. Además, voy a crear un pequeño efecto de sombra usando Po shadow. Los valores van a ser 01 Ram, luego tres Ram como color. Voy a usar el valor RGBA. El color va a ser negro con menor opacidad, 0.2 como puedes ver las esquinas del menú desplegable a su alrededor Y también tenemos aquí bonitos y geniales efectos de sombra. A continuación, voy a crear algo de espacio dentro del menú desplegable para eso. Vamos a usar el pudín. Voy a ponerla en dos carnero. Bien, eso es todo. Sobre el drop one, me refiero al elemento wrapper. A continuación voy a encargarme de los lados izquierdo y derecho. Voy a seleccionar para bajar uno a la izquierda y definir su ancho. Va a ser 30% Además, voy a crear algo de espacio en el lado derecho del elemento usando padding, ¿verdad? El valor va a ser de cuatro m. Ahora la primera parte en la que estoy, el lado izquierdo tiene el ancho, y además tenemos algo de espacio después del lado izquierdo. A continuación, voy a duplicar este código y hacer lo mismo para el lado derecho también. El ancho del lado derecho va a ser del 70% Además, necesitamos aquí relleno a la izquierda. Y va a ser para correr. Bien, a continuación voy a encargarme de los rubros de ambos lados Necesitamos los mismos estilos para ambos encabezados. Voy a seleccionar a los dos. Tenemos que bajar uno a la izquierda, H tres. Duplicemos el código y cambiemos la izquierda a la derecha. Agreguemos aquí estilos para el encabezado. En primer lugar, voy a cambiar la familia telefónica. Va a ser Molly cursiva. Entonces voy a establecer el tamaño del teléfono en 1.8 Ram. Necesitamos color. Va a ser el color 86987 Entonces, como pueden ver, los encabezamientos se ven bien. A continuación voy a crear algo de espacio en la parte inferior usando relleno. Abajo va a ser uno Ram. También, necesitamos margen. En la parte inferior, van a ser tres Ram y crear borde en la parte inferior. Necesitamos aquí abajo, el ancho va a ser 0.2 Ram. Entonces necesitamos sólido como el color que voy a usar aquí, RGBA, 134-15-2167 y la opacidad va a ser 0.5 Vamos a revisar. Como pueden ver, tenemos aquí bonito y fresco borde en la parte inferior. Y en realidad los encabezamientos de los lados izquierdo y derecho se ven bastante bien Todo bien. A continuación, sigamos adelante y seleccionemos el elemento de la lista de características. Esta parte esos dos elementos que se colocan dentro del elemento de la lista de entidades. Voy a seleccionar el elemento de la lista de características, vamos a establecer el margen. Necesitamos 1.5 fram en la parte superior e inferior y cero en los lados izquierdo y derecho Entonces voy a colocar los elementos horizontalmente, uno al lado del otro usando flex box. También necesitamos una línea de pedido. Alineará los elementos en el centro verticalmente y luego cambiará el tipo del cursor, lo hará puntero. Bien, ahora tenemos algo de espacio entre los ítems y también se cambia el cursor. Después de eso, voy a personalizar íconos y luego los elementos span. Empecemos con los íconos. Voy a seleccionar elementos de características seguido de los elementos. El tamaño de la fuente de Let's va a ser dos Rams. Voy a establecer el ancho a cuatro Ram y luego cambiar el color. El color va a ser el color gris, que utilizamos recientemente. Vamos a revisar. Como puedes ver, los íconos se ven bastante bien. Sigamos adelante y personalicemos los elementos del ventilador. Voy a seleccionar de nuevo, elemento de la lista de características seguido de los elementos del ventilador. Voy a aumentar el tamaño del teléfono, va a ser 1.8 Ram. En cuanto al color, voy a usar el mismo color. Me refiero al color gris. Como puedes ver, los panelements se ven bastante bien. Lo único que tenemos que hacer en esta conferencia es crear poco efecto hover Una vez que colocamos el cursor sobre el icono o el elemento span, deberían cambiar su color Sigamos adelante y hagamos eso. Voy a seleccionar Características, un elemento de lista con hover También necesitamos sus elementos. Tenemos que seleccionar elementos span. Una vez que pasamos el cursor sobre los elementos, necesitamos cambiar el color El color va a ser de dos a dos. Es de color gris oscuro. Ahora bien, si pongo el cursor sobre el, ya ves que se cambia el color Pero necesitamos una transición suave. Vamos a agregar a ambos elementos la propiedad de transición. Necesitamos tu color. Y la duración va a ser de 0.3 segundos. Ahora bien, si pongo el cursor sobre los artículos, van a cambiar su color sin problemas Creo que se ve bastante bien. A continuación, tenemos que cuidar el lado derecho. Y para eso, voy a pasar a la siguiente conferencia. 13. Servicios de peinado en el primer desplegable: Bien, en la última conferencia hemos estilizado el lado izquierdo del menú desplegable, me refiero a la lista de características Y ahora tenemos que encargarnos de la segunda parte de nuestro menú desplegable. Quiero decir, la parte de servicios, el lado derecho. Vamos al código VS y seleccionemos Servicios desplegables. Voy a definir la altura, va a ser el carrito de 45 Además, voy a alinear los elementos usando nuevamente S libro de lino Necesitamos display flex. Tenemos que cambiar la dirección porque tenemos que alinear los elementos verticalmente. Entonces necesitamos dirección flex para ser columna. Bien, ahora voy a seleccionar de nuevo el servicio desplegable en sí mismo. Usemos flex box. Necesitamos display flex. Entonces tenemos que crear un espacio en la parte inferior del elemento usando margin bottom. Va a ser un 3.5 Ram. A continuación, voy a cambiar el cursor y hacerlo señalar. Bien, ahora voy a alinear elementos en el centro verticalmente. Voy a agregar aquí un centro de líneas de artículos. Como puede ver, los iconos y los elementos textuales se colocan en el centro Después de eso, voy a personalizar los íconos. Sigamos adelante y seleccionemos el servicio desplegable, seguido del elemento. Voy a aumentar dentro de la altura. Voy a ponerlos a los dos a 5.5 Ram. Eso es lo mismo para la altura también. Entonces cambiemos el fondo. Cambiemos el fondo. Va a usar la función de gradiente lineal. La dirección de la transición de color va a ser dos, ¿verdad? En cuanto a los colores, el primer color va a ser B1501. En cuanto al segundo color, voy a usar 723 Esos son los colores morados. El más claro y los más oscuros pueden ver la fonética. Quiero decir, esas cajas tienen el gradiente lineal. A continuación voy a los artículos flex. Tenemos que colocarlos en dos columnas. Voy a usar flex wrap el valor p. ahora los ítems se colocan en dos columnas. Aquí tenemos resultados mucho mejores. Después de eso, voy a agregar aquí un par de estilos más. Tenemos que hacer las cajas redondeadas, y para eso usemos radio de borde con el valor de 50% Ahora los elementos están redondeados y tenemos que colocar los iconos en el centro de esos círculos. Para eso voy a usar X libro. Necesitamos exhibir lino, luego justificar centro de conferencias y un centro de líneas de artículos Ahora como puedes ver, los íconos están perfectamente centrados. Después de eso, vamos a personalizar los iconos. Necesitamos aumentar el tamaño del teléfono. Va a ser 2.5 Ram. Entonces voy a cambiar el color. Hagámoslo blanco. Además, voy a poner a Po Shadow a 0.5 m, dos Ram. En realidad necesitamos aquí m. en cuanto al color, voy a usar el valor RGBA, pero en este caso necesitamos usar el color púrpura El primer valor va a ser de uno a seis. Entonces tendremos aquí 35. Entonces el siguiente va a ser 218 como la opacidad. Voy a decir 2.3 Bien, los íconos se ven bastante bien. Siguiente Estoy agregando un poco de espacio en el lado derecho de cada icono. Agreguemos aquí margen. Derecha y hazlo a rampa. Bien, después de eso, voy a crear un pequeño efecto hover Una vez que pasemos el cursor sobre los servicios, debemos aumentar el tamaño de los iconos Voy a seleccionar el servicio desplegable Con hover. Entonces necesitamos elementos. Para aumentar el tamaño del elemento, voy a usar la función scale. Necesitamos transformar, necesitamos transformar la escala. Y voy a insertar aquí 1.1 Ahora bien, si pongo el cursor sobre los iconos, van a aumentar, me refiero al tamaño del icono Hagamos que este efecto sea más suave. Utilice la transición. Aquí necesitamos transformar. Y la duración va a ser 0.3 segundos. Ahora tenemos aquí resultados mucho mejores. El tamaño del icono aumenta con efecto suave. Bien, a continuación voy a encargarme del elemento de servicio desplegable. Me refiero a esos elementos textuales tenemos aquí dos elementos diferentes y tenemos que colocarlos verticalmente. Sigamos adelante y seleccionemos el elemento de servicio desplegable. Utilice la caja Flex. Necesitamos exhibición de lino. Entonces tenemos que cambiar la dirección. Va a ser columna. Ahora como puedes ver los elementos textuales, los elementos span se colocan verticalmente Como puedes ver ahora mismo, todos los iconos tienen el mismo color de fondo. Si echamos un vistazo al proyecto terminado, verás que cada artículo tiene un color de fondo diferente. Tenemos que encargarnos de eso. Voy a seleccionar el primer servicio desplegable que necesitamos aquí, selector infantil. Y tenemos que especificar aquí el número uno. Entonces necesitamos elementos. Vamos a corra el fondo también, necesitamos agarrar sombra de caja de aquí Ahora como puedes ver en el primer phomicon tiene el color de fondo morado En realidad, voy a duplicar este código seis veces porque en general tenemos siete iconos. Aquí tenemos siete elementos. Cambiemos los selectores de gráficos. Necesitamos escuchar los números 1-7 Ahora tenemos que cambiar los colores de fondo. El segundo icono van a ser los colores de fondo. 31 DCA. Uno. En cuanto al segundo color, voy a instituir 23683 y también cambiar la sombra de caja que necesitamos aquí 35214131. Vamos a revisar el navegador. Entonces, como pueden ver, el segundo fónico tiene ahora un color verde Me refiero al color de fondo. Vamos a encargarnos del tercer ítem. Aquí necesitamos, colores, 351, EC. Para la segunda persona que llama, van a ser 22 DCF. También cambia la sombra de caja que necesitamos aquí, 45, luego otra vez, 45207 El tercer fonémico está listo. Sigamos adelante y nos ocupemos del cuarto ítem. El color va a ser 0030. Ese es el segundo que necesitamos aquí, 03. 48. A continuación, voy a cambiar la sombra de caja que necesitamos aquí. 3180216. Vamos a revisar el navegador. El cuarto teléfono, Atomican está personalizado. Pasemos a la quinta. Necesitamos aquí F9625. En cuanto a la segunda persona que llama, va a ser FA 751 Y luego cambiar la sombra de caja que necesitamos aquí, 250, luego 11728 Tenemos aquí el color de fondo naranja. Pasemos al siguiente micrófono telefónico, que es el sexto aquí. Tres a 93f. Entonces el segundo color va a ser 2371f, ya que la sombra va a ser 35, luego Aquí tenemos el sexto icono, y ahora tenemos que encargarnos del último icono de las fuentes. El primer color va a ser el 28235. En cuanto al segundo color que necesitamos aquí, 202, 52c, una sombra de caja Insertemos aquí 32, luego 3744. Bien, así que todos los ómicos telefónicos están preparados. Se ven bastante bien. Y ahora tenemos que encargarnos de los elementos span. Quiero decir, esos elementos textuales. En primer lugar, voy a encargarme del primer elemento span. Vamos a seleccionar el elemento de servicio desplegable, entonces necesitamos que abarque el niño seleccione. Necesitamos el primer elemento span. Cambiemos la familia telefónica. Va a ser Molly Cursive. Entonces voy a establecer la fuente. Manera de negrita. El color va a ser 150f1. Entonces voy a establecer el espaciado entre letras a 0.1 m. Transformemos el texto a mayúsculas. Aquí necesitamos transformar texto y no renderizar el valor va a ser mayúscula. Como puede ver, los estilos se aplican al primer elemento de pan. Ahora mismo tienen el mismo color, tenemos que cambiar eso. Y también necesitamos aumentar el tamaño de los elementos de la sartén. Seleccionemos aquí, desplegemos el elemento de servicio, sigamos el panelement Establezca el tamaño del teléfono en 1.6 Ram. Ahora la fuente se incrementa de ambos elementos de giro. En cuanto a los colores, voy a seleccionar el primer servicio. Luego tenemos que desplegar el elemento de servicio seguido de los elementos de giro. Nuevamente, necesitamos aquí y chi selector. Necesitamos el primer elemento spin. Vamos a agarrar el color de aquí y lo insertamos abajo. Ahora solo el primer elemento span tiene el color púrpura. A continuación, tenemos que hacer lo mismo para el resto de los elementos. Voy a duplicar este código seis veces. Cambiemos los selectores. Necesitamos números del uno al siete como lo hicimos para los micrófonos fonográficos, el segundo color Va a ser 31c1. Es de color verde. Entonces la tercera franqueza va a ser 3f51c. Cambiemos todos los colores y luego revisemos el navegador. A continuación, necesitamos 0030. Entonces el quinto ítem va a ser f9625. Entonces necesitamos 3293 FF. En cuanto a los últimos elementos span que necesitamos aquí, 28 a 35. Bien, vamos a revisar el navegador. Como puede ver, todos los elementos span tienen las llamadas adecuadas. Ahora tenemos que personalizar los elementos del segundo span. Para eso, vamos a seleccionar desplegable Service Item Span, y necesitamos aquí y el selector de chat con el número dos. Voy a poner la forma del teléfono a 300 y también cambiar el color. Vamos a usar aquí 66, necesitamos aquí signo de libra, luego 6672 Es de color gris. Como puede ver, los colores se cambian para los segundos elementos span. Por último, tenemos que personalizar el botón. Sigamos adelante y seleccionemos desplegable un botón derecho. En primer lugar, definamos el ancho. Va a ser del 100% y la altura será de cuatro Ram. Y también cambiar el color de fondo. Vamos a usar aquí el color 3776. Aquí tenemos el fondo. Tenemos que deshacernos del borde del pliegue. Vamos a establecerlo en nueve y también hacer las esquinas redondeadas usando el radio del borde. Van a ser dos Ram. Ahora el fondo se ve mucho mejor. Vamos a encargarnos de la fuente. Voy a establecer el tamaño de fuente en un foro de punto. Entonces el peso de la fuente va a ser negrita. Como voy a transformar texto a mayúsculas, cambiar los colores, el color va a ser blanco Entonces voy a agregar algo de espacio entre las letras. Y finalmente cambia el cursor, hazlo señalar. Bien, así que la segunda parte del menú desplegable está preparada y estilizada Se ve bastante bien. Ahora tenemos que hacer que el menú desplegable funcione. O sea, tenemos que ocultarlo por defecto y luego mostrarlo una vez que pasamos el cursor sobre el noveling, quiero decir, el primer hogar noveling, también necesitamos crear este Para eso. Pasemos a la siguiente conferencia. 14. Cómo hacer que el menú desplegable funcione: Bien, en la última conferencia, hemos terminado de diseñar el menú desplegable. Y ahora tenemos que hacerlo funcionar. Por defecto, el menú desplegable debe estar oculto, y una vez que pasamos el cursor sobre el elemento de navegación, entonces debería aparecer con una transición suave Echemos un vistazo al proyecto terminado. Como puede ver, el menú desplegable está oculto por defecto. Una vez que pase el cursor sobre el elemento de navegación, aparecerá Puedes ver aquí este triángulo que necesitamos crear también en esta conferencia. Sigamos adelante y volvamos al código VS. En primer lugar, voy a crear el triángulo para eso voy a usar después de pseudo elemento El triángulo será parte del elemento de navegación, por lo tanto no necesitamos aquí ningún elemento seguido del selector hijo. Necesitamos el primer elemento de navegación. Y entonces voy a usar después de pseudo elemento, el contenido va a estar vacío Entonces voy a definir la posición. Va a ser absoluto. Voy a posicionar el elemento según el elemento padre. En este caso, el elemento padre no es ningún elemento. Pero ahora mismo como pueden ver, ya tiene la posición relativa. A continuación voy a definir propiedades superiores e izquierdas. La posición de dos va a ser 2.9 Ram. En cuanto a la posición izquierda, voy a hacerla 50% El triángulo debe colocarse en el centro del elemento de navegación. Para centrar el elemento, voy a usar la función transform translate x con el valor -50% El triángulo se creará con un pequeño truco usando bordes Voy a usar border left con los valores sólidos y el color va a ser transparente. Entonces voy a duplicar este código dos veces. Cambiemos por la izquierda al borde derecho, los valores serán los mismos. Entonces necesitamos fondo fronterizo. En lugar de transparente, voy a usar el color blanco. Como puedes ver, se crea el triángulo y se coloca en el centro de la luz de navegación. Ahora voy a ocultar este elemento y también el menú desplegable. Para ocultar el elemento, voy a usar opacidad cero y visibilidad oculta. También necesitamos lo mismo para el desplegable. Ahora como puedes ver, ambos elementos están ocultos. Y ahora tenemos que apelarlos. Una vez que pasamos el cursor sobre el no item I aquí, ningún ítem con hover seguido de la F para ver los elementos, necesitamos esas dos propiedades para mostrar el Necesitamos opacidad para ser uno y visibilidad visible. También, voy a agregar aquí para el menú desplegable también. Coloquemos aquí opacidad uno y visibilidad factible. Ahora bien, si pongo el cursor sobre el no item en el triángulo es sí, necesitamos aquí para bajar uno Ahora ambos elementos están mostrando. Lo único que tengo que hacer es hacer esta apariencia un poco más suave. Y para eso voy a usar transición. Los valores serán todos 0.3 segundos. Ahora bien, si pongo el cursor sobre el elemento de la perilla, entonces obtendremos esta apariencia agradable y fresca, más suave del menú desplegable y el triángulo Bien, eso es todo sobre el primer menú desplegable. Ahora tenemos que encargarnos del segundo. Y para eso, pasemos a la siguiente conferencia. 15. Cómo crear el marcado de HTML para el segundo desplegable: Bien, en la última conferencia, hemos terminado de trabajar en el primer menú desplegable, que funciona bien y se ve bastante bonito y genial. Ahora es el momento de pasar a encargarse del segundo menú desplegable. Sigamos adelante y echemos un vistazo al proyecto terminado. Si pasamos el cursor sobre el segundo elemento, que es clientes, entonces aparecerá el segundo menú desplegable Como puede ver, consta de cuatro partes distintas. Cada uno de ellos tiene un color de fondo agradable y fresco con algunos efectos de degradado lineal. Además, cada parte consiste en una P. Entonces tenemos aquí el encabezamiento y algún texto. Bien, así que eso es todo sobre el segundo menú desplegable. Como de costumbre, vamos a crear el marcado HTM, y luego nos encargaremos del estilismo Necesitamos encontrar el segundo elemento de navegación que son los clientes. Justo después de los elementos del enlace, voy a insertar comentarios para el segundo menú desplegable. Entonces voy a abrir desarrollos con clases. Desplázate también, necesitamos desplegable dos. Entonces me voy a Desarrollo Abierto el cual tendrá el nombre de la clase clientes item. Como dije, cada artículo consistirá en un teléfono asomicon. Entonces tendremos encabezamiento y el párrafo. Abramos elementos I, los cuales tendrán clases un regular, luego un sobre A. Después de eso, necesitamos aquí H, tres elementos de encabezamiento. El texto va a ser agencias de diseño web. También, necesitamos aquí párrafo con algún damit para poder poner aquí alguna dame, voy a escribir marga Entonces tenemos que especificar aquí el número de palabras. En este caso, voy a insertar tus 15 palabras ficticias. Ahora voy a darle a Enter. Como pueden ver, tenemos aquí algún texto ficticio con 15 palabras Bien, sentémonos sobre el primer artículo. Como ustedes saben, tendremos en general cuatro ítems. Voy a duplicar este desarrollo tres veces. Y luego tenemos que cambiar aquí los íconos y también los encabezamientos. El segundo ítem, quiero decir que el segundo icono va a ser un sólido. Entonces necesitamos FA Earth America. En cuanto al rubro, voy a insertar aquí, dueños de tiendas en línea. Entonces tenemos que cambiar el tercer ítem. En realidad, aquí tenemos un pequeño error aquí, regular. Cambiemos las clases del tercer icono. Va a ser marcas FA, luego A sketch. En cuanto al elemento rumbo, voy a instituir diseño web, lanceros libres Ahora tenemos que encargarnos del último ítem. Necesitamos cambiar las clases del icono necesitamos FA solid FA store. En cuanto al elemento de rumbo, voy a insertar a los dueños de tu pequeña empresa. Bien, entonces creo que eso se sienta sobre el marcado H tel. Echemos un vistazo. Como puedes ver tenemos aquí el segundo menú desplegable. Es decir, el marcado H Tl. Y ahora es el momento de darle estilo a esos elementos. Y para eso, pasemos a la siguiente conferencia. 16. Estilos del segundo desplegable: Bien, en la conferencia anterior hemos creado el marcado HTML para nuestro segundo menú desplegable. Y ahora es el momento de darle estilo y luego hacer que funcione. Volvamos al código VS y voy a adaptarme a los nuevos comunes para el segundo menú desplegable que necesitamos aquí. Desplegar dos y luego final del desplegable dos. Como sabes, tendremos cinco desplegables diferentes y todos ellos tendrán los estilos comunes. En lugar de escribir los mismos estilos una y otra vez, voy a seleccionarlos todos usando el nombre de clase común, que asignamos a los menús desplegables. Este nombre de clase aquí, desplegable. Voy a seleccionarlos a todos. Coge algunos de estos estilos de aquí en los estilos comunes. Bueno, esas dos líneas de código, yo posición, absoluta y posición superior. También tendremos aquí color de fondo. Entonces esas tres líneas de código, radio de borde, lanzadera de caja y relleno. Además, voy a agarrar esos estilos y agregarlos aquí también. Siguiente voy a cambiar aquí vino en vez de desplegable, uno que necesitamos aquí, desplegable. En realidad voy a agarrar este código y pegarlo aquí. Además de eso, voy a quitar el niño seleccione de aquí porque necesitamos triángulo para cada elemento de navegación. En realidad, yo que todo está listo. Vamos al navegador y comprobemos si todo funciona bien. Como puedes ver, algunos de estos estilos se aplican al desplegable, el segundo desplegable ya. Vamos al código VS y seleccionemos el segundo desplegable y agreguemos algunos estilos también. Aquí necesitamos definir el ancho como 90 Ram. Entonces necesitamos altura, van a ser 37 Carneros Voy a definir la posición izquierda, va a ser -27 Ram Y luego necesitamos usar libros flex. Vamos a configurar la pantalla para flexionar y verificar los resultados. Como pueden ver, ahora tenemos resultados mucho mejores. Los artículos se colocan horizontalmente en una fila muy bien. Ahora tenemos que seleccionarlos. Personaliza. Seleccionemos el artículo de los clientes que voy a establecer con al 100% Entonces necesitamos aquí margen para ser cero. Y luego 0.5 Ram. Necesitamos aquí 0.5 Ram. También, voy a definir padding, vamos a ponerla en 0.7 Ram. Ahora tenemos algo de espacio entre los artículos. A continuación, vuelvo a estar flex books, el fin de alinear los elementos dentro del ítem del cliente. Vamos a configurar la pantalla para flexionar. Entonces necesitamos cambiar la dirección porque tenemos que alinear los elementos verticalmente. Y para eso tenemos que establecer flex direction a columna. Además, voy a usar el centro Align Items. ¿Bien? Como puedes ver, los elementos dentro los artículos se colocan en el centro usando libros flexibles. Vamos a poner el cursor a puntero. Bien, lo siguiente que voy a hacer es cambiar el color de fondo para cada artículo del cliente. Como recuerdas, cada elemento tiene un color de fondo diferente con degradado lineal. Entonces sigamos adelante y hagamos eso por cada ítem. Voy a seleccionar el primero usando selector hijo. Voy a especificar aquí el número uno. En cuanto al fondo, como dije, necesitamos usar gradiente lineal. Lo primero que tenemos que hacer aquí es definir la dirección. Voy a ponerla a 135 grados. A continuación, voy a definir el primer color, que va a ser un siete. En cuanto al segundo color, va a ser un siete. Vamos a revisar los resultados. Como puedes ver, el primer ítem tiene color de fondo. Voy a hacer redondeadas las esquinas del artículo. Para eso, usemos aquí radio de borde con el valor una rampa. Ahora tenemos un bonito radio fronterizo aquí. Cambiemos el color para el resto de los artículos también. Voy a duplicar este código tres veces, después voy a cambiar los números. Necesitamos números del uno al cuatro. En cuanto a los colores, los voy a cambiar. El primer color para el segundo artículo va a ser F 2f6ff cuanto al segundo, va a ser CAD nueve F. Vamos a revisar el segundo artículo que tenemos aquí en color celeste. A continuación tenemos que cambiar los colores para el tercer artículo. El primer color va a ser F1fd, F siete. En cuanto al segundo color, hagámoslo F, F, F. Es de color verde. Y ahora tenemos que cambiar los colores para el último ítem, vamos a insertar aquí FFF cuatro ED. Para el segundo color, agreguemos aquí 87c5. Bien, así que los cuatro artículos tienen un color de fondo agradable y fresco con efecto de degradado lineal. Ahora tenemos que cuidar los elementos dentro de los artículos. Sigamos adelante y comencemos con los átomos telefónicos. En primer lugar, voy a aumentar el tamaño de los artículos. Seleccionemos aquí los elementos y fijemos el tamaño del teléfono a diez Ram. Como puedes ver, el tamaño de los iconos es mayor. Ahora tenemos que cambiar los colores para cada artículo por separado. Tenemos que seleccionar el primer elemento seguido del icono del teléfono. Vamos a establecer el color a AC 63 A. Como considere que el primer icono del teléfono ha cambiado su color, hagamos lo mismo con el resto de los iconos. Voy a duplicar este código tres veces y cambiar los números de selector de gráfico y también cambiar los colores. El segundo color va a ser 15f3. Entonces tendremos aquí una F C F 77. En cuanto al último icono que voy a usar aquí, color FF 8645 Como puedes ver, los íconos se ven bastante bien, tienen diferentes colores. Ahora tenemos que encargarnos de los rubros, así que sigamos adelante y seleccionemos encabezamientos Necesitamos el artículo de su cliente seguido de H tres elemento de encabezado. Voy a aumentar el tamaño del teléfono. Va a ser 2.5 fram. Entonces tendremos aquí peso telefónico. Voy a fijarlo en 300. A continuación, necesitamos transformar el texto a mayúsculas. Además, voy a poner una línea al centro. Lo siguiente que voy a hacer es cambiar la altura de la línea. Vamos a establecerlo en 3.5 Ram. Y también crear algo de espacio en la parte inferior está en margen inferior con el valor 0.7 Ram. Ahora los encabezamientos se ven mucho mejor. Como invitado, tenemos que cambiar los colores de los encabezados, y los colores deben coincidir con los colores de los iconos Voy a hacer eso de una manera sencilla. Voy a agregar aquí selector para el encabezado, necesitamos el artículo de su cliente. Entonces necesitamos selector de gráficos. Tenemos que especificar aquí uno. Tenemos que añadir aquí H tres elementos de encabezamiento. Vamos a copiar el selector y agregarlo para el resto de los elementos. Voy a cambiar los números de selector de gráfico. Aquí necesitamos números del uno al cuatro. Vamos al navegador. Como puedes ver, los encabezamientos tienen los colores adecuados y se ven bastante bien Lo único que tengo que hacer es personalizar el power graph. Sigamos adelante y seleccionemos el artículo del cliente, seguido de los elementos. Vamos a establecer el tamaño de la fuente en 1.6 Ram. Entonces el peso de la fuente va a ser de 300. Y también voy a centrar el uso del centro de línea de texto. Ahora todo se ve bastante bien en realidad. Con el segundo menú desplegable, ya terminamos. Ahora es el momento de seguir adelante y encargarse del tercer menú desplegable. 17. Cómo crear el marcado de HTML para el tercer desplegable: Bien, en la conferencia anterior hemos terminado de diseñar el segundo menú desplegable. Es decir, el menú desplegable del cliente. Ahora es el momento de seguir adelante y crear el tercer menú desplegable. Echemos un vistazo al proyecto terminado. Si pasamos el cursor sobre el artículo del producto, entonces veremos aquí el tercer menú desplegable, que creo que se ve bastante bien Tenemos aquí un par de iconos diferentes y también algunos detalles sobre los productos. Y abajo puedes sentarte. Lo primero que tenemos que hacer es crear el marcado HTML, necesitamos encontrar el tercer elemento de navegación que es productos y después del elemento link, me refiero a la etiqueta de enlace de cierre, tenemos que insertar nuevos comentarios para el desplegable tres Entonces voy a abrir etiqueta con el menú desplegable de clases y desplegable tres. A continuación, voy a abrir otra etiqueta dip, que serán productos. Va a ser el envoltorio del contenido. A continuación, voy a insertar aquí el producto en sí. Este elemento incluirá phonosomicu y Si echamos un vistazo al menú desplegable, verás aquí el fonosomicu y también los y también Vamos a insertar aquí I elementos con las clases solidas, una llave que necesitamos aquí. Entonces voy a abrir T. voy a insertar aquí dos elementos span. El primero va a ser Theme y Page Builder. Entonces necesitamos el segundo elemento span en el que voy a insertar el siguiente texto, el tema número uno y Visual Page Builder. Sentémonos sobre los productos en general, vamos a tener cinco productos, por lo tanto voy a duplicar este artículo cuatro veces. Y entonces tenemos que hacer aquí ligeros cambios. Voy a cambiar los fonosomíconos y también el contenido del elemento span El segundo fonosomicon será un archivo sólido, entonces el primer elemento span va a ser el complemento Page Builder En cuanto al segundo elemento span, voy a insitu themes y layouts Entonces el tercer fonosomicón va a ser un libro de fase sólida abierta En cuanto a los elementos de la sartén, voy a insertar tu tema extra de revista. En cuanto al segundo sanelement, vamos a insertar el mejor tema para blogger entonces El 04:00 P.M. va a ser un sobre sólido como los panlements El primero va a ser Mal Bloom E mail opt ins. En cuanto al segundo, panelment va a ser lo último en complementos de email opt Para el último artículo del producto, el teléfono va a ser un sólido. En cuanto a los panelesSoy, inserta tu compartición social En cuanto a los segundos teléfonos, Micon va a ser promueve el intercambio social Bien, y lo último que tengo que hacer es crear el botón que necesitamos para inst abajo Vamos a abrir el botón. El tipo va a ser botón. En cuanto al contenido, voy a insjoin para descargar Ok. Eso se sienta sobre el tercer menú desplegable. Me refiero a la marca H t. Vamos a revisar los resultados. Si coloco el cursor sobre el artículo del producto, verá aquí el menú desplegable. Ya tiene algunos estilos, porque definimos algunos estilos comunes en la última conferencia para los menús desplegable Por lo tanto, ya cuenta con algunos estilos. Ahora tenemos que hacer que parezca la versión terminada para eso, Pasemos a la siguiente conferencia. 18. Estila el tercer desplegable: En la última conferencia, hemos creado la marca HTML para el tercer menú desplegable. Como puedes ver, el menú desplegable ya tiene algunos estilos porque ya hemos definido algunos estilos comunes para cada desplegable. Ahora tenemos que continuar y terminar el estilo del tercer menú desplegable. Vamos al código VS e insertemos nuevos comentarios para el desplegable tres. Sigamos adelante y seleccionemos el desplegable tres. Voy a definir ancho y alto. El ancho va a ser 40. En cuanto a la altura, la voy a establecer 47 corrió siguiente, defino posición izquierda, va a ser 50% Además, necesitamos censurar el elemento usando transform translate x -50% El elemento se ha posicionado en el centro perfectamente Por último, estoy agregando, en realidad el menú desplegable tiene relleno, pero voy a sobrescribir el estilo predeterminado Usemos ahora mismo el relleno. Por defecto, cada menú desplegable tiene pad dos. Y voy a cambiar el relleno en la parte superior y voy a convertirlo en un Ram. En cuanto al resto de los lados, voy a dejarlo como dos M. Bien, después de eso, voy a personalizar los productos. Este elemento en realidad, como dije, los productos serán similares a los servicios en el primer desplegable, el teléfono, los atómicos, y también esos elementos span serán similares Si le echo un vistazo a la versión terminada, verá que son bastante similares. Voy a usar estos mosaicos del primer menú desplegable. Vamos a desplazarnos hacia arriba y encontrar los servicios desplegables. Aquí los tenemos. Voy a añadir aquí productos. Veamos qué tenemos ahora mismo. Como puede ver, los iconos y los paneles se colocan horizontalmente en fila adelante y agreguemos aquí productos I. Ahora los fonosomíconos no son visibles porque tenemos que definir sus Para eso, en realidad estoy, vamos a deshacernos de esos espacios a partir de aquí. Voy a agregar aquí productos niño uno. Entonces yo si comprobamos el resultado, verás que el primer fonosomicón tiene su color de fondo y se ve bastante bien Tenemos que hacer lo mismo para el resto de los íconos. Voy a copiar este selector y editar aquí. Cambiemos el selector de anchit. Necesitamos aquí dos, luego hacer lo mismo para el tercer ítem, también para el cuarto, y necesitamos lo mismo para el quinto icono también. En general, tendremos cinco productos. Vamos a comprobar, como puedes ver el teléfono, iconos impresionantes se ven bastante bien. Necesitamos el mismo efecto hover aquí también. Quiero decir, este efecto hover, agreguemos aquí también el selector para productos Necesitamos hover, luego elementos. Ahora tenemos el mismo efecto hover. Bien, lo siguiente que tengo que hacer es cuidar los elementos de la columna vertebral. Voy a añadir aquí producto que es el envoltorio de los elementos span. Ahora estos elementos espinosos están alineados verticalmente. Lo siguiente que voy a hacer es agregar aquí producto y luego elemento span. Cambiará el tamaño del teléfono de los elementos span. Como puede ver, se cambia el tamaño del teléfono. Ahora tenemos que personalizar cada elemento span. Voy a empezar con el primero. Vamos a añadir aquí los productos, luego elemento span. Con el selector de gráficos, necesitamos el primer elemento span. Si verifico, entonces dirás que el primer elemento span está personalizado. Ahora tenemos que cambiar los colores del primer elemento fan. Necesitamos los colores adecuados. Lo tenemos en el primer menú desplegable. Voy a un aquí nuevo selector para los productos. Necesitamos producto hijo uno. Entonces necesitamos desarrollo seguido de los elementos span, nuevamente con selector child. Ahora tenemos que adherir uno. Sigamos adelante y verifiquemos. Como puedes ver, el primer elemento pan tiene un color diferente. El mismo color que tenemos para el icono. Hagamos lo mismo para el resto de los elementos span. Voy a copiar aquí este selector. Necesitamos cambiar el número del producto. Va a ser el segundo. Entonces hagamos lo mismo para el tercer producto. A continuación tenemos el producto número cuatro, y luego necesitamos lo mismo para el producto número cinco. Como puedes ver, todos los elementos span, los primeros elementos span han cambiado sus colores y se ven bastante bien. Ahora tenemos que encargarnos de los elementos del segundo span. Voy a agregar aquí selector para los productos que necesitamos aquí, el span con selector infantil, necesitamos aquí el segundo phanlementow Como puedes ver, el segundo fenomento se ve bastante bien. Bien, lo siguiente que voy a hacer es definir el espacio entre los productos. Estoy volviendo a la tercera lista desplegable. Seleccionemos productos y definamos margen. Necesitamos margen en la parte superior e inferior, 1.7 Ram. En cuanto al lado izquierdo y derecho, va a ser cero. Ahora tenemos que cuidar el fondo. Vamos a darle estilo. Seleccione el menú desplegable tres seguido de la parte inferior. Voy a definir el ancho, va a ser del 100% entonces la altura será de cuatro m. Vamos a cambiar el color de fondo. Va a ser el color púrpura que necesitamos aquí, 9544c. A continuación, me voy a deshacer de la frontera de falla. También voy a hacer redondear el botón usando radio de borde, van a ser dos Ram. Después de eso, voy a encargarme del teléfono. Cambiemos el tamaño del teléfono. Va a ser 1.4 entonces voy a hacer los pernos del teléfono. Transformemos el texto a mayúsculas y cambiemos el color. Necesitamos que el color sea blanco. El botón se ve bastante bien. A continuación, voy a aumentar el espacio entre las letras. Hagámoslo 0.1 También cambie el puntero del cursor. Por último, voy a colocar el botón ligeramente hacia abajo. Hagámoslo usando transform. Traducir y con el valor uno r. Bien, así que eso es todo. El tercer menú desplegable se ve bastante bien. Y ahora tenemos que seguir adelante y encargarnos del siguiente. 19. Cómo crear el marcado de HTML para el cuarto desplegable: Bien, en la conferencia anterior terminamos de diseñar el tercer menú desplegable, que creo que se ve bastante bien. Y ahora tenemos que seguir adelante y empezar a crear el siguiente menú desplegable. Me refiero al desplegable para el enlace de contacto. Echemos un vistazo al proyecto terminado. Aquí tenemos el cuarto menú desplegable. Consiste en fonones y algunos enlaces. Y también tenemos aquí abajo el botón. Bien, sigamos adelante y comencemos a crear el marcado HTM. Tenemos que encontrar el cuarto no ítem que es contacto. Y voy a insertar aquí comentarios para el desplegable cuatro. A continuación, voy a abrir deep tag, que tendrá dos clases distintas. El primero va a ser el menú desplegable de nombre de clase común. En cuanto al segundo, va a ser un nombre de clase individual desplegable cuatro. Entonces necesitamos abrir otro elemento profundo y va a ser opciones de Contacto. A continuación, voy a insertar otra etiqueta. Consiste en elementos ph y span. Voy a abrir un sobre las clases sólido A. A continuación voy a instituir panel, que va a estar poniéndose en contacto en general Tendremos seis desarrollos diferentes. Vamos a duplicarlo cinco veces, luego cambiemos los pontones y también los El segundo icono va a ser un bien común sólido. En cuanto al elemento span, voy a interferir en el chat con las ventas. Entonces el siguiente fonosomicón va a ser un sólido, un usuario estoy interfiriendo cuentas Entonces el siguiente fonosomicón va a ser un sólido. Una llave. En cuanto a los elementos span, estoy interfiriendo soporte técnico, entonces tendremos aquí un grupo de personas sólido. También, voy a cambiar el contenido de este panel. Va a ser como la comunidad. Por último, tenemos que cambiar el último ítem. El teléfono va a ser un archivo de líneas sólidas. En cuanto a los paneles, voy a hacerlo en documentación Bien, lo último que tenemos que hacer es crear el fondo. Insertemos aquí etiqueta de botón con botón tipo. En cuanto al contenido del botón voy a compartir con nosotros. Bien, eso se asienta sobre el marcado H tl del cuarto menú desplegable. Como puedes ver, tenemos aquí el marcado H Tl, que ya tiene algunos estilos porque definimos algunos estilos comunes para los dropdowns Por lo tanto, esos estilos también se aplican al cuarto desplegable Tenemos que seguir estilizando el menú desplegable. Y para eso, pasemos a la siguiente conferencia. 20. Estilos del cuarto desplegable: En la conferencia anterior, hemos preparado el marcado HTML para nuestro cuarto menú desplegable Y ahora tenemos que darle estilo. Pasemos al código VS e insertemos nuevos comentarios. Cuatro. Desplázate cuatro, luego voy a seleccionar Menú desplegable con su nombre de clase individual. Desplegable cuatro, necesitamos definir con altura. El ancho va a ser 28 Ram. En cuanto a la altura, voy a poner 233 Ram. Como puedes ver, el tamaño del menú desplegable es más grande. A continuación voy a cambiar la posición. Quiero colocarlo en el centro. Para eso tenemos que definir la posición izquierda y hacerla 50% Entonces para centrar el elemento perfectamente, necesitamos usar transform, translate x para el valor -50% Ahora como puedes ver, el menú desplegable está perfectamente centrado Por último, voy a definir el relleno. Pongamos el relleno a un Ram en la parte superior, luego a Ram en el resto de los sitios. Necesitamos m tres veces el relleno se aplica al elemento. Bien, a continuación voy a personalizar el desarrollo. Me refiero al desarrollo que incluye el fonemicón y este elemento pan Sigamos adelante y seleccionemos Opciones de Contacto. Seguido de un profundo, voy a definir margen, que va a ser 1.4 m en la parte superior e inferior y cero en los lados izquierdo y derecho. Además, voy a poner a puntero. Como puede ver, se aplica el margen. Tenemos cierto espacio entre los desarrollos. A continuación, voy a tomar del fontosomicón. Sigamos adelante y seleccionemos Opciones de contacto, seguido del elemento. Voy a establecer ancho 24m. Entonces el tamaño de fuente del fontosomicón va a ser dos Y también necesitamos cambiar el color. Voy a usar el color 3293. Vamos a comprobar el resultado. Como puedes ver, los osomíconos telefónicos se ven bastante bien. A continuación, tenemos que personalizar los elementos span. Voy a seleccionar Opciones de contacto, seguido del elemento span. Lo primero que voy a hacer es cambiar el tamaño del teléfono. Va a ser 1.6 Ram. Entonces voy a transformar texto a mayúsculas. También cambia el color. Voy a usar el mismo color que usamos para el fonesomicon Además, crea algo de espacio entre las letras usando espaciado entre letras con el valor 0.1 Ram. Vamos al navegador. Como puedes ver, los elementos del panel se ven bastante bien. Y lo único que hay que hacer es darle estilo al butttom, que se coloca abajo Vamos a seguir adelante y seleccionar desplegable cuatro abajo. En primer lugar voy a definir con en altura. El ancho va a ser del 100% En cuanto a la altura, voy a configurarlo para que se forme. También necesitamos cambiar el color de fondo. Vamos a usar aquí el color 2371. Aquí tenemos el botón siguiente necesitamos para llegar a él fuera del orden predeterminado. Además, voy a hacer redondear el botón. Sigamos adelante y pongamos frontera a non. cuanto al radio fronterizo, voy a hacerlo correr ahora. Nuestro botón es mucho más agradable. A continuación tenemos que encargarnos de la fuente. En primer lugar, definamos el tamaño de fuente. Va a ser 1.4 Ram. Entonces voy a hacer que el teléfono sea más audaz usando el peso de la fuente negrita También transforma el texto a por caso y cambia el color. El color va a ser blanco. La fuente se ve bastante bien. Lo único que tengo que hacer es crear algún espacio entre las letras usando el ritmo de letras, 0.1 ram Y también, voy a volver a hacer el puntero del cursor. Eso es. El cuarto menú desplegable se ve bastante bien. Hemos terminado de trabajar en ello. A continuación tenemos que encargarnos del siguiente menú desplegable, que va a ser el quinto menú desplegable y el último. Pasemos a la siguiente conferencia. 21. Cómo crear un marcado HTML para el quinto desplegable: Bien, en la conferencia anterior, hemos terminado de trabajar en nuestro cuarto menú desplegable Realicé el menú desplegable del enlace de contacto. Creo que se ve bastante bien. Y ahora tenemos que seguir adelante y encargarnos del último menú desplegable, que va a ser para enlace de cuenta Sigamos adelante y echemos un vistazo al proyecto terminado. Aquí tenemos nuestro último menú desplegable. Como puedes ver, consta de un par de elementos diferentes. Tenemos dos entradas diferentes para nombre de usuario y contraseña. Entonces puedes ver aquí la casilla de verificación a la que le sigue el botón. Y abajo, puedes ver algunos enlaces. Si olvidas tu nombre de usuario o contraseña, esos enlaces te ayudarán a recuperar tu cuenta. Eso es sobre el último menú desplegable. Como de costumbre, voy a crear el marcado HTML y luego vamos a darle estilo al mark up. Sigamos adelante y busquemos el enlace para cuentas y creamos nuevos comentarios para el desplegable cinco. Entonces voy a abrir el desarrollo, que tendrá dos clases distintas, desplegable y desplegable cinco. Entonces voy a abrir la etiqueta de formulario. Vamos a deshacernos del atributo action, no lo necesitamos. Voy a agregar aquí el nombre de la clase, que va a ser formulario de cuenta. Dentro de los elementos de formulario que voy a crear, que va a ser grupo de entrada de conteo, incluirá dos campos de entrada. Voy a abrir la etiqueta de entrada con el tipo de texto, y también necesitamos aquí un atributo placeholder como el valor Voy a insertar aquí, nombre de usuario. Duplicemos esta línea de código. El segundo campo de entrada será para contraseña. Voy a cambiar el tipo. Va a ser contraseña también. Cambiemos el atributo placeholder que necesitamos aquí, contraseña Bien, veamos sobre el grupo de entrada. A continuación voy a crear un desarrollo que incluirá input y label. Me refiero a entrada para casilla de verificación. Vamos a agregar un nombre de clase al desarrollo y va a ser chequeado. Entonces voy a instituir elementos de entrada. El tipo va a ser casilla de verificación. Además, necesitamos tu atributo ID con la comprobación de valor. A continuación, voy a abrir etiqueta y en los cuatro atributos voy a colocar check también como el texto, voy a insertar tu, recuérdame, usamos tu atributo ID y también cuatro atributos con los mismos valores. Echemos un vistazo al navegador. Si hago clic en la etiqueta, entonces se marcará la casilla de verificación. Por eso usamos esos dos atributos con los mismos valores. Bien, a continuación estoy inserte tu buttoon con botón tipo Voy a insertar su bloqueo de miembro de texto. Después de eso, voy a crear un párrafo en el que vamos a insertar el siguiente texto olvidado. Entonces necesitamos sus elementos span, username. A continuación necesitamos, y nuevamente, span elementos con el pase de texto. Por último, necesitamos aquí un signo de interrogación. Bien, eso se asienta sobre el marcado HTML para el desplegable cinco. Aquí tenemos el marcado HTML. A continuación tenemos que darle estilo a esos elementos. Y para eso, pasemos a la siguiente conferencia. 22. Estilos del quinto desplegable: En la conferencia anterior, hemos preparado la marca HTM para nuestro último menú desplegable. Quiero decir, el menú desplegable para la cuenta de enlace. Ahora tenemos que personalizarlo. En realidad, terminaremos la navegación en esta conferencia. Echemos un vistazo al proyecto terminado, el menú desplegable. El último menú desplegable debería verse así. Vamos al código VS e insertemos nuevos comentarios para el desplegable cinco. Entonces voy a bajar cinco, el rapero elemento profundo y definir su dentro de la altura. El ancho va a ser de 30 ram. En cuanto a la altura, voy a hacerla 32 Ram. Como puedes ver, el tamaño ha cambiado del menú de arriba hacia abajo. A continuación voy a censurar el elemento. Voy a hacer eso usando posición izquierda 50% Y también necesitamos transformar traducir x con el valor -50% Nos permite censurar el elemento perfectamente Como puedes ver, el menú desplegable está centrado. Lo siguiente que voy a hacer es definir el relleno. Voy a hacer relleno 2.5 Ram en los cuatro lados. Se crea el relleno, el espacio dentro del menú desplegable. Eso es todo sobre el desarrollo del envoltorio. Siguiente Voy a seleccionar Grupo de entrada. Voy a alinear entradas usando caja de lino. Necesitamos display flex. Entonces necesitamos alinear las entradas verticalmente. Y para eso tenemos que cambiar la dirección de flex box y tenemos que hacerla columna. Bien, eso es todo sobre el grupo de entrada. A continuación necesitamos personalizar la entrada en sí. Sigamos adelante y seleccionemos grupo de entrada, seguido de la etiqueta de entrada. En primer lugar, voy a definir la altura escrita. El ancho va a ser del 100% En cuanto a la altura, voy a hacer cinco. Además, cambiemos el color de fondo. En este caso voy a usar color RGBA. El primer valor va a ser 191, luego el siguiente va a ser 213. Para el tercer valor va a ser 240. Entonces necesitamos definir la opacidad, y voy a establecer opacidad 2.4 Como pueden ver, el tamaño de las entradas Y también tenemos aquí diferentes colores de fondo. Lo siguiente que voy a hacer es crear algún espacio dentro de las entradas, y también necesitamos algo de espacio entre los campos de entrada. Voy a poner acolchado 2.5 Ram en parte superior e inferior y una Ram en los lados izquierdo y derecho. Entonces voy a separar entradas usando margin bottom. Va a ser tres carreras. Como puedes ver, se crea el espacio dentro de las entradas y además tenemos entradas separadas entre sí. Lo siguiente que voy a hacer es deshacerme del borde predeterminado usando border none. Voy a hacer las entradas ligeramente redondeadas. Tenemos que hacer eso usando radio de borde y el valor va a ser 0.5 Ahora las entradas se ven mucho mejor. Lo siguiente que voy a hacer es encargarme del incumplimiento. Voy a cambiar el tamaño de la fuente. Vamos a establecer el tamaño de fuente en 1.6 Ram. Y también voy a cambiar el color. Usemos el color 444, que es de color gris oscuro. Ahora la fuente y el color se cambia realmente con el campo de entrada, ya terminamos. Lo siguiente que voy a hacer es cambiar el color del atributo placeholder Para ello, tenemos que seleccionar grupo de entrada, luego input, que será seguido por el pseudo marcador de posición, pseudo elemento placeholder Este es pseudo elemento, necesitamos aquí color Voy a usar el color 888, que es de color gris más claro. Bien, así como puedes ver, el color del atributo placeholder se cambia, en realidad, con las entradas. Ya terminamos. Lo siguiente que voy a hacer es encargarme de la casilla de verificación y la etiqueta. Voy a seleccionar desarrollo de envoltorio que tiene verificación de nombre de clase. Voy a mover la casilla de verificación y la etiqueta ligeramente hacia arriba para eso. Usemos margen superior con el valor menos dos. Como se puede ver, los elementos se movieron hacia arriba. A continuación voy a encargarme de la etiqueta, vamos a comprobar, seguido de etiqueta, voy a establecer el tamaño de fuente en 1.6 ram. Entonces necesitamos estanque. Van a ser 300, 300. También voy a cambiar el color. Usemos el color 777. Bien, La casilla de verificación y la etiqueta se ven bien. Ahora voy a encargarme del fondo. Sigamos adelante y seleccionemos el formulario de cuenta. Seguido de fondo voy a establecer con 100% entonces la altura va a estar llena Ram. Voy a cambiar el color de la parte de atrás. Vamos a usar aquí el color dos, D dos DCF, el tamaño de la parte inferior y también se cambia el color de la parte posterior A continuación, me voy a deshacer de la frontera por defecto. Voy a hacer redondear el botón. Necesitamos aquí frontera ninguno. Además, necesitamos radio fronterizo con el valorado Ram. Ahora deberíamos tener resultados mucho mejores. El botón se ve bastante bien. Ahora tenemos que encargarnos del teléfono. Cambiemos el tamaño del teléfono. Vamos a establecerlo en 1.4 Ram. Entonces necesitamos pesos de fuente para ser más audaces. Además, voy a transformar texto en mayúsculas y cambiar de color, hacerlo blanco. Tenemos mucho más mejor resultado. Button se ve bien, pero tenemos que agregar algunos estilos Mos a este elemento. Voy a aumentar el espacio entre las letras. Hagámoslo un 0.1 Ram. También cambia el cursor, hazlo puntero. Necesitamos algo de espacio en la parte superior e inferior de la parte inferior. Voy a poner margen a tres Ram en la parte superior. Entonces necesitamos cero en el lado derecho, 1.5 Ram en la parte inferior, y cero en el lado izquierdo. Ahora tenemos resultados mucho más agradables. Tenemos algo de espacio en la parte superior e inferior del botón. Y en realidad eso es todo sobre el botón. A continuación tenemos que personalizar el párrafo abajo. Seleccionemos Formulario de cuenta. Vamos a establecer el tamaño del teléfono en 1.5 Fram. Entonces necesitamos texto, una línea para ser centro. Además, voy a agregar aquí el peso telefónico 300. Aquí tenemos el párrafo. Recuerda que tenemos aquí dos enlaces. Me refiero a nombre de usuario y contraseña, tenemos que personalizar esas dos palabras. Son elementos span. Tenemos aquí dos elementos span. Voy a seleccionar formulario de cuenta y luego span. Cambiemos el color del elemento. Va a ser el 2371. Entonces necesitamos cursor para ser puntero. Además, voy a cambiar por ocho, digamos 2400, ¿de acuerdo? Así que en realidad todo se ve bastante bien. Con el menú desplegable, ya terminamos. También, podemos decir que con la navegación, ya terminamos. A continuación, tenemos que encargarnos de la siguiente sección de la landing page, que es esta. Es bastante agradable. Pasemos a la siguiente conferencia y comencemos a construir esta sección. 23. Cómo crear la sección de marcado HTML para servicios: Bien, en la última conferencia hemos terminado de trabajar en la navegación. Hemos creado todos los menús desplegables. Y ahora tenemos que seguir adelante y comenzar a crear la siguiente sección de nuestra landing page. Echemos un vistazo al proyecto terminado. El siguiente apartado va a ser sección sobre los servicios. El tramo consistirá en un rubro, entonces contaremos con nueve servicios diferentes. Cada servicio consistirá en encabezado ponsomicon y algún texto Y además de eso, aquí tendremos fondos bonitos y geniales. Esas diferentes formas que creo que se ven bonitas y geniales. Bien, como de costumbre, comenzaremos a crear esta sección creando el marcado HTML Volvamos al código VS y después del encabezado, creamos nuevos comentarios para los servicios. Entonces voy a abrir etiqueta de sección con los servicios de clase. A continuación voy a abrir la etiqueta que va a ser el wrapper del contenido y voy a asignar a su envoltorio de servicios de nombre. Dentro del envoltorio, voy a abrir H una etiqueta de encabezado y voy a insertar tu contenido, lo que ofrecemos. Entonces después de encabezar, voy a abrir etiqueta dip y va a ser la lista de servicios. Vamos a agregar a este elemento la lista de servicios de nombre de clase. Dentro de la lista, voy a crear los servicios. Vamos a abrir la etiqueta con el servicio de nombres de clase. Como dije, cada servicio incluirá encabezado de fonosomicon y también párrafo con algún Voy a instituir elementos I con la clase. Un portátil FA sólido. Entonces después de PhonomIconVoy a abrir H tres etiqueta de encabezado, va a ser la creación del sitio web después Voy a abrir etiqueta, voy a insertarte algún texto ficticio con digamos 20 palabras Aquí está. Bien, eso es. Acerca del primer servicio, vamos a tener nueve servicios en general. Voy a duplicar este elemento ocho veces. Entonces voy a cambiar la fonética y los encabezamientos. El segundo fonomicón va a ser FA sólido FA flechas a círculos Para los elementos de encabezado, va a ser la gestión de contenidos. Entonces el tercer ícono va a ser las marcas FA, el registrador A. En cuanto al elemento heading, voy a bloguear con información privilegiada Entonces el siguiente fonomicón va a ser un sólido, un globo. En cuanto al elemento encabezado, va a ser el comercio. Entonces tendremos aquí una marca, un buscador. Entonces tenemos que cambiar el elemento de encabezado, va a ser CEO. Entonces voy a cambiar el fonosomicón, va a ser un sólido En cuanto al elemento heading, eso es la gestión de usuarios. El siguiente fonomicón va a ser un boleto FA sólido. Cambiemos el elemento de encabezado H tres, va a ser soporte multi lingual. A continuación vamos a tener aquí un sólido hashtags de FA para el rubro va a ser la integración en redes sociales. Y el último ícono en el servicio va a ser padres FA, rocket chat. Eso es todo, sobre los servicios. Echemos un vistazo como resultado. Aquí tenemos todos los servicios y se muestran todos los iconos. Lo único que hay que hacer es crear dos fondos. Esas dos formas, necesitamos dos elementos profundos justo encima de la sección de cierre. Necesitamos aquí servicios de nombre de clase G uno y luego servicios PG dos. Bien. Se crea el marcado HTML de la sección de servicios Los dos últimos elementos, quiero decir, esos fondos aún no son visibles porque son solo elementos vacíos. Ahora es el momento de personalizar esta sección. Y para eso, pasemos a la siguiente conferencia. 24. Sección de servicios de estilo: Muy bien, entonces en la conferencia anterior hemos creado el marcado HTML para nuestra nueva sección, me refiero a la sección de servicios Ahora es el momento de seguir adelante y empezar a darle estilo a esta sección. Volvamos al código VS e insertemos nuevos comentarios después del encabezado, Necesitamos aquí comentarios para servicios. Después de servicios, voy a seleccionar el elemento de sección. En primer lugar, voy a definir dentro de la altura. Ancho va a ser 100% En cuanto a la altura, voy a hacer altura 170, altura de ventana gráfica Significa que la altura ocupará 170% de la maceta de vista Si revisamos el navegador, verá que la sección tendrá altura 170% de la vista puesta Bien, vamos sobre el elemento sección por ahora. Siguiente Voy a seleccionar envoltorio de servicios. Voy a definir con como 60% Entonces voy a cambiar el color de fondo. Va a ser blanco. Además, voy a añadir aquí box shadow para que el elemento sea visible. La sombra de caja tendrá los siguientes valores, 02 Ram, luego tendremos seis Ram. En cuanto al color, voy a usar el valor RGBA. Voy a insertar aquí 130, luego 162235. Y entonces necesitamos opacidad, y va a ser un 0.3 Ahora como puedes ver, el elemento tiene sombra de caja y es visible en la página Después de eso, voy a encargarme de la posición del envoltorio. Fijemos la posición a absoluta. Voy a posicionar el wrapper de servicios de acuerdo a sus elementos padre, que en este caso son los servicios. Necesitamos posición relativa para el elemento padre. Voy a establecer la posición al 50% entonces la posición izquierda va a ser del 50% estoy tratando de censurar el elemento perfectamente en la página para eso Como ya sabrás, tenemos que usar transform con función translate. Y tenemos que sumar aquí -50% y -50% Necesitamos aquí dos -50% porque estamos tratando de censurar el elemento Ahora si reviso el navegador, encontrarás que el elemento está perfectamente centrado en ambas direcciones. Quiero decir vertical y horizontalmente. Bien, después de eso, voy a crear algo de espacio usando padding. Vamos a poner el relleno en la parte superior e inferior a seis Ram. En cuanto a los lados izquierdo y derecho, voy a hacer que el relleno sea cero. Tenemos algo de espacio en la parte superior e inferior. A continuación, voy a hacer el elemento ligeramente redondeado usando radio de borde con valor uno Ram. Además, voy a alinear elementos usando caja de lino que necesitamos aquí mostrar lino Entonces voy a colocar los artículos flex verticalmente. Necesitamos cambiar la dirección de la caja flexible. Va a ser columna. Además, voy a alinear elementos en el centro. Como puedes ver, los elementos se colocan verticalmente en la columna y también el contenido se coloca en el centro. Bien, sentémonos sobre el envoltorio de servicios. Siguiente Yo soy estilo de los elementos de encabezamiento. Sigamos adelante y seleccionemos envoltorio de servicios con H un elemento de encabezado. Voy a cambiar la familia telefónica. En este caso voy a usar teléfonos llamados Mull cursive. Entonces voy a aumentar el tamaño del teléfono , van a ser tres Ram. Además, transformemos el texto a mayúsculas. Entonces el teléfono es, el teléfono va a estar en negrita y también cambiar la persona que llama. Voy a usar el llamador 39. 4353. Es de color gris oscuro. Vamos a revisar el rumbo. Como pueden ver, el rumbo se ve bastante bien. Voy a aumentar el espacio entre las letras usando el espaciado entre letras. Va a ser 0.1 Ram. Y además, voy a crear algo de espacio en la parte inferior del elemento usando marchando fondo con valor ocho Ram Bien, eso es todo, sobre el rumbo. A continuación voy a cuidar menos los servicios. Sigamos adelante y seleccionemos la lista de servicios. Voy a usar de nuevo, flex box. Vamos a configurar la pantalla para flexionar. Entonces para envolver los elementos flex, para colocar los elementos en un par de filas diferentes, tenemos que usar wrap con el valor p. Además, estoy justify content center para centrar los elementos flex horizontalmente. Ahora mismo, aquí no se cambia nada porque necesitamos asignar con altura a los servicios, me refiero a los propios artículos. Una vez que hagamos eso, entonces los artículos se colocarán en un par de roles diferentes como lo tenemos en la versión terminada. Bien, como invitado, tenemos que seleccionar el servicio en sí y definir con altura. El ancho va a ser 28 Ram. En cuanto a la altura, voy a hacerla 35 Ram. Ahora como puedes ver, tenemos tres filas distintas, y en cada fila puedes ver los tres ítems. Bien, el diseño está listo. Ahora tenemos que personalizar los artículos. Voy a crear espacio entre los artículos en los lados izquierdo y derecho. Voy a usar margen. Necesitamos aquí cero en la parte superior e inferior y 2.5 fram en los lados izquierdo y derecho Ahora tenemos espacio entre los servicios. Lo siguiente que voy a hacer es volver a usar, flex box. Vamos a configurar la pantalla para flexionar. Entonces voy a cambiar la dirección porque los elementos dentro los servicios necesitan ser colocados verticalmente. Para eso, tenemos que establecer la dirección de flexión a columna. Entonces voy a centrar los artículos usando una línea. Los elementos se centran y justifican el contenido que necesitamos aquí centro de contenido. Como puede ver, los elementos dentro de los servicios se colocan en el centro. Lo siguiente que voy a hacer es cuidar de los fonoíconos Seleccionemos servicio, seguido del elemento que voy a establecer dentro de la altura, ambos a diez. Entonces voy a cambiar el color de fondo. Va a ser blanco. También necesitamos sombra de caja, va a ser 01 Ram Ram. Entonces necesitamos color RGBA. Los valores serán 75, luego 1192 a uno, y la opacidad va a ser 0.15 Aquí tenemos los iconos del teléfono Voy a hacer esas cajas alrededor usando radio de borde, va a ser 50% Ahora tenemos los círculos. Lo siguiente que voy a hacer es colocar los íconos en el centro de esos círculos. Para eso voy a usar de nuevo, Caja Flex. Necesitamos Display Flex y luego un centro de líneas de artículos y Justify content center. Ahora los iconos se colocan en el centro de los círculos. Vamos a hacerlos más grandes usando, voy a establecer el tamaño de fuente para formar. También voy a crear algo de espacio en la parte inferior de los iconos. Vamos a establecer margen abajo dos M. Bien, aquí tenemos los iconos del teléfono. Ahora como invitado tenemos que cambiar los colores para cada icono. Voy a empezar con el primer icono, pero antes de que hagamos eso, voy a mirar la versión terminada. Como puedes ver, cada icono tiene un color diferente. Pero si miras los colores, notarás que tenemos aquí el efecto de degradado lineal. Voy a crear este efecto. En primer lugar, voy a seleccionar el primer servicio usando el selector de chat. Entonces necesitamos elemento. Para crear un efecto de degradado lineal con el elemento text, voy a utilizar la siguiente técnica. En primer lugar, necesitamos fondo con función de gradiente lineal. Estoy inserte aquí. El primer color va a ser el blanco. En cuanto al segundo color, voy a insertar uno a 59. Además, voy a agregar aquí 60% Significa que transición de color comenzará después del 60% de los elementos. Si revisamos el navegador, entonces verás que el fonosomicon todavía tiene el color negro, pero se cambia el fondo del círculo En realidad, no necesitamos eso. Tenemos que cambiar el color del icono en sí. Para ello, voy a agregar aquí dos propiedades diferentes. El primero va a ser un clip de fondo web ket. El valor va a ser texto. En cuanto a la segunda propiedad va a ser web ket texto campo color. Voy a añadir aquí transparente como el valor. Ahora como puedes ver, tenemos aquí un resultado agradable y genial, El ícono ponme tiene efecto degradado lineal Hagamos lo mismo para el resto de los íconos. Voy a duplicar este código ocho veces, porque en general tendremos nueve iconos. Cambiemos los números del selector. Y también necesitamos cambiar los colores. El segundo color va a ser FA 751c. El segundo icono se ve bastante bien. adelante y cambiemos todos los íconos cuando estés aquí tres, el color es de tres a 93. Entonces tendremos aquí cuatro. El color va a ser 31 DCA uno. Entonces tendremos el quinto icono. En cuanto al color, voy a añadir aquí 4400b. Entonces tendremos el sexto ítem. Agreguemos aquí f4800. Entonces tendremos el séptimo ícono. En cuanto al color, voy a insertar aquí F26 AC. Entonces necesitamos aquí el icono número ocho. En cuanto a la persona que llama, usemos 0010. Tenemos que cambiar el último icono. Va a ser b6004. Entonces, como puedes ver, todos los iconos tienen diferentes colores de fondo de degradado lineal. Y se ven bastante bien. Bien, ahora tenemos que encargarnos de los rubros en los servicios Sigamos adelante y seleccionemos el servicio tres. Voy a cambiar la familia telefónica. Va a ser croson uno, cursiva, entonces el tamaño del teléfono va a ser Tom Voy a cambiar el color. Vamos a establecer el color a 5728. Necesitamos aquí el signo de la libra. Por último voy a añadir aquí margen. Pongamos el margen a dos Ram en la parte superior e inferior y a cero en los lados izquierdo y derecho. Se puede ver que los encabezamientos se ven bastante bien. Ahora tenemos que encargarnos de los párrafos. Sigamos adelante y seleccionemos el servicio. Voy a establecer el tamaño de la libra a 1.6 Ram, pero luego necesitamos alinear el texto en el centro. Por último, cambia el color. Voy a usar aquí, 889b9. Todo bien. Como puedes ver, los servicios se ven bastante bien. Ya casi terminamos con la sección. Lo único que tengo que hacer es cuidar los antecedentes. Me refiero a esas formas aquí. Sigamos adelante y hagamos eso. Voy a empezar con el círculo. Seleccionemos el servicio PG uno. Voy a establecer ancho y alto a tranvía. Entonces voy a cambiar el fondo. Necesitamos usar gradientes lineales. El rumbo va a ser dos derechos. Entonces necesitamos transparente como primer color. El segundo color va a ser transparente así como para el tercer color, voy a agregar aquí f437 Aquí tenemos los elementos en el fondo. Como dije, va a ser círculo, así que voy a usar radio de caldera con el valor del 50% Además, voy a cambiar la posición del elemento. Fijemos la posición a absoluta. Entonces necesitamos posicionarnos para ser cero. En cuanto a la posición correcta, va a ser 10% Como puedes ver el círculo es posición. En realidad cubre los servicios. No necesitamos eso. Para arreglarlo, voy a agregar la propiedad de índice z a la envoltura de servicios con valor mayor que cero. Vamos a establecerlo en uno. Como puede ver, el problema está arreglado, ¿de acuerdo? Lo único que tiene que ver con el círculo es disminuir la opacidad Para que se vea mucho mejor, voy a establecer opacidad 2.3 Como pueden ver, ahora tenemos resultados mucho mejores Eso es todo, sobre el círculo. Ahora voy a encargarme del segundo fondo que es rectángulo. En realidad, voy a duplicar este código. Cambiemos el nombre de la clase. Van a ser los servicios G dos. Necesitamos lo mismo dentro de las alturas que para el fondo. Voy a cambiar el color que necesitamos aquí, 74b5. Entonces estoy cambiando el radio fronterizo. En este caso necesitamos 15 Ram. Además, voy a cambiar la posición superior a la inferior. Va a ser 5% En cuanto a la posición correcta, necesitamos cambiarla a izquierda. La posición izquierda va a ser 12. 12% Vamos a comprobar los resultados que tenemos aquí, el rectángulo y lo voy a rotar ligeramente. Usemos transform rotate Z y el valor va a ser menos diez grados. En realidad, algo anda mal aquí porque en la versión terminada tenemos un resultado diferente. Vamos a revisar el código. Es raro porque todo parece estar correcto. Oh sí, tenemos que cambiar la dirección. En este caso, la dirección debe ser hacia la izquierda y no hacia la derecha. Creo que soluciona el problema. El problema está arreglado y todo parece perfecto. Bien, eso es todo sobre esta sección, creo que se ve bastante bien y a ti te gusta. Lo siguiente que tengo que hacer es encargarme de la navegación, porque una vez que nos desplazamos hacia abajo, tenemos que hacer que la navegación sea pegajosa, fija en la parte superior. Este efecto aquí, una vez que nos desplazamos, entonces la navegación cambia su fondo. Se fija en el borde superior de la página. Para crear este efecto, pasemos a la siguiente conferencia. 25. Crea una barra de navegación adhesiva en Scroll: Bien, en la conferencia anterior hemos terminado de diseñar la sección de servicios. Se ve bastante bien. Como decíamos, vamos a encargarnos de la navegación. No tenemos que hacer nada pegajoso. Una vez que nos desplazamos hacia abajo en la página, echemos un vistazo al proyecto terminado. Una vez que nos desplazamos hacia abajo en la página, entonces tenemos que cambiar un par de cosas. Necesitamos cambiar el color de fondo de la navegación. Además, necesitamos cambiar los colores del logotipo y los elementos de navegación. Tenemos que personalizar el fondo. Y también tenemos que cambiar las posiciones de los menús desplegables. Bien, entonces eso es todo, lo que vamos a hacer en esta conferencia. Ahora es el momento de usar un poco de Javascript. Vamos a abrir el archivo JS script. Lo primero que voy a hacer es seleccionar la navegación. Voy a crear nueva variable. Voy a llamarlo par. Tenemos que seleccionar navegación, y para eso voy a usar el método query select. Tenemos que especificar aquí el nombre de la clase, que va a ser ninguna parte. Bien. Se selecciona la navegación. Y ahora necesitamos verificar si la posición de desplazamiento vertical de una página web es mayor que cero. Voy a usar un objeto de ventana. En realidad, ventana se refiere a la ventana del navegador web o la tina actual que estás viendo. Necesitamos usar el objeto window y tenemos que agregarle un oyente de eventos El tipo de evento va a ser scroll. Además, voy a colocar aquí una función de devolución de llamada que se ejecutará una vez que nos desplazemos hacia abajo en la página Ahora tenemos que verificar si ventana está desplazada o no. Para eso, voy a usar sentencia if como la condición que voy a insertar aquí. Desplazamiento de ventana Y. En realidad scroll Y es una propiedad que le indica cuántos píxeles se ha desplazado verticalmente la página desde la parte superior Si es mayor que cero, entonces significa que te desplazas hacia abajo desde la parte superior de la página. Tenemos que verificar si el scroll de ventana y es mayor que cero. Si es cierto, entonces voy a agregar nueva clase a la barra de navegación Y luego definiremos nuevos estilos en el archivo CSS. Para esa clase recién creada, voy a usar navbar Entonces voy a acceder a la lista de clases de la siesta tenemos que agregar aquí nueva clase y voy a llamarla pegajosa. Nuevamente, si la página se desplaza hacia abajo, el naber obtendrá nueva clase A continuación, necesitamos declaraciones. Si la propiedad window scroll y no es mayor que cero, entonces tenemos que eliminar back class sticky del napper Necesitamos lista de clases de puntos napper. Entonces tenemos que usar el método remove. Y tenemos que especificar aquí de nuevo, pegajoso. Bien, eso es todo sobre el script Java. Ahora voy a volver al archivo CSS. Tenemos que seleccionar Napper con una clase pegajosa. Voy a insertar Napper Sticky, Y tenemos que definir nuevos estilos Voy a disminuir la altura, va a ser un Ram. Y también voy a cambiar el color de fondo. Vamos a ponerla en blanco. Ahora si nos desplazamos hacia abajo, entonces los nuevos estilos se aplicarán al napper Como puedes ver, el color de fondo es blanco y también la altura del napper disminuyó Bien, lo siguiente que voy a hacer es suavizar este efecto. Y para eso tenemos que usar transición los valores, toda la duración va a ser 0.3 segundos. Una vez que nos desplazamos, entonces el efecto será más suave. Bien, a continuación voy a añadir poco efecto de sombra a la barra Of. Vamos a usar aquí box shadow con los valores 01 Ram, diez Ram, y el color va a ser RGB, A 130-16-2235, A 130-16-2235, y la opacidad va a ser Verás aquí bonito y fresco efecto de sombra. Bien, lo siguiente que voy a hacer es cambiar el color del logo. Sigamos adelante y seleccionemos elementos span. Usando de nuevo, pegajoso, necesitamos aquí pegajoso, luego logo, seguido por el elemento span. Voy a cambiar el color. Va a ser de 0926 a siete. Además, voy a deshacerme de la sombra tecnológica del logo. Digamos que ninguno en realidad, el color no se cambia. Hay algo mal. Tenemos que agregar este código abajo después del código donde diseñamos estos panelementoshacer que este código funcione Si nos desplazamos hacia abajo, verá que se cambia el color del logotipo. Bien, Ahora necesitamos lo mismo para el no items. encontremos ningún enlace que necesitamos aquí pegajoso. Entonces no hay enlace, tenemos que cambiar el color. Va a ser del mismo color, 092627. Además, tenemos que deshacernos de la sombra tecnológica. Vamos a ponerla en ninguna. Como puede ver, se cambia el color de los artículos O. A continuación tenemos que cambiar la posición del triángulo, que es el elemento after del ítem nav. Además, voy a cambiar la posición del menú desplegable. Agreguemos aquí Sticky, seguido de los elementos del anuncio. Pongámonos a la posición dos. Necesitamos aquí los corchetes. Tenemos que posicionarnos para ser seis Ram. En cuanto al menú desplegable, usemos pegajoso seguido de desplegable. Voy a poner a posición a tranvía, y también voy a cambiar la sombra de caja. Hagámoslo 0110 Ram. Y el color va a ser éste con menor opacidad, 0.4 Ahora como puedes ver, las posiciones del triángulo cambian las posiciones del triángulo y los menús de arriba hacia abajo Y también tenemos aquí una bonita y fresca sombra de caja. Lo único que hay que hacer es personalizar el botón. En realidad, aquí tenemos poco problema. Aquí no necesitamos este triángulo. Voy a arreglarlo. Encontremos el pseudo elemento, que es un triángulo Tenemos que excluir aquí el botón. Y eso lo podemos hacer de la siguiente manera. Puedes ver aquí que seleccionamos artículo. Y luego después de pseudo elementos, para poder ex elemento de aquí, tenemos que usar una de las pseudoclases llamadas Tenemos que especificar aquí el fondo en realidad es el último ítem arriba, así podemos inferir pseudoclase llamada el último hijo Excluirá el fondo de aquí. Ahora si comprobamos, como pueden ver, ya no tenemos aquí el triángulo. El problema está arreglado. Bien, lo último que tengo que hacer es personalizar el fondo una vez que nos desplazemos hacia abajo. Así que sigamos adelante y busquemos botón. Debería ser después de los descensos. Aquí está. Seleccionemos el botón con la clase Sticky. Voy a cambiar el fondo. Usemos gradientes lineales. Necesitamos dirección para ser dos derechos. En cuanto a los colores, el primer color va a ser F459. En cuanto al segundo color, voy a insertar aquí F3598 Entonces tenemos que atravesar la sombra fuera de caja, va a ser ninguna. Además, voy a cambiar el color del botón. Va a ser blanco como puedes ver. Botón se ve bastante bien en realidad. Eso es todo sobre el par sobresaliendo, todo se ve y funciona a la perfección. Podemos pasar a la siguiente conferencia y comenzar a encargarnos de la siguiente sección. 26. Creación del marcado HTML para proyectos: En la conferencia anterior, hemos creado un pegajoso de barra. Una vez que nos desplazemos hacia abajo por la página, entonces verás que tenemos aquí una barra fija sin barra en el borde superior de la página web. Creo que se ve bastante bien y genial. Lo siguiente que tenemos que hacer es crear otra sección que se llama proyecto. Si echamos un vistazo al proyecto terminado, entonces veremos aquí la sección del proyecto, que creo que es muy impresionante y genial. El apartado consiste en rubro párrafo, entonces tenemos aquí poca navegación con diferentes categorías de los sitios web. Puedes ver aquí negocios, comida, salud, viajes. Otros si hago clic en alguna de las categorías, entonces obtendremos aquí los paquetes de sitios web adecuados. La navegación funciona perfectamente. Tenemos aquí botón ver todos, y si hacemos clic en él, entonces todos los proyectos se mostrarán. Creo que esta sección va a ser muy interesante. Usaremos HTML CSS y también script Java. Ahora es el momento de comenzar a crear la sección. Como de costumbre, voy a comenzar con el marcado HTML. Insertemos nuevos comentarios aquí. Voy a abrir etiqueta de sección con los proyectos de clase. Entonces como dije, comenzaremos con encabezamiento y párrafo. Voy a abrir H, un elemento de encabezado con el texto 100 más sitios web completos. Entonces tendremos párrafo que incluirá algún texto ficticio como ya sabes Para crear algún texto ficticio, tenemos que escribir un Lom y luego tenemos que especificar el número de palabras En nuestro caso, voy a crear 30 palabras. Aquí tenemos nuestro maniquí párrafo tras párrafo. Necesitamos crear navegación. Vamos a abrir etiqueta con el filtro de clase de general, tendremos seis enlaces diferentes. Cinco de ellos serán categorías diferentes. En cuanto al sexto enlace, va a ser el botón Ver todo. Voy a abrir enlace con el enlace de filtro de clase. Entonces como texto voy a insertar su negocio. Además de eso, necesitamos que insertes el atributo llamado data type en el que tenemos que especificar el tipo, me refiero a la categoría del proyecto. En este caso, necesitamos negocios. Duplicemos el elemento link cinco veces, luego cambiemos las categorías. El segundo va a ser la comida. También necesitamos cambiar el tipo de datos. Entonces el siguiente va a ser la salud. Entonces tendremos aquí viajes. Entonces el siguiente va a ser otro. Por último, necesitamos aquí vista. Todo en cuanto al tipo de datos, voy a insertar aquí todos. Bien, así que vamos a hablar de la navegación del filtro. A continuación tenemos que crear los proyectos. Voy a abrir etiqueta profunda con la lista de proyectos de nombre de clase en la que voy a crear el proyecto. Cada proyecto constará de tres imágenes diferentes, como lo tenemos aquí en el proyecto terminado. Como puedes ver, cada proyecto consta de tres imágenes diferentes. Necesitamos insertar aquí tres imágenes diferentes. Pero antes de eso, tenemos que agregar aquí atributo de tipo de datos para especificar aquí también la categoría. La primera categoría va a ser de negocios. Voy a insertar tres imágenes distintas. Vamos a abrir la imagen. Voy a especificar aquí el camino de la imagen. En primer lugar, necesitamos como la carpeta actual. Después selecciona la carpeta de imágenes y encuentra la primera imagen que va a ser web one, imagen uno. Duplicemos este código dos veces y cambiemos los nombres de las imágenes que necesitamos aquí. Web una imagen dos, y luego web una imagen tres. Bien, eso es todo. Acerca del primer proyecto, como pueden ver, tenemos aquí el párrafo del encabezado, luego vemos aquí la navegación. Y también tres imágenes distintas que en este momento son demasiado grandes. Pero eso lo arreglaremos. Sigamos adelante y duplicemos proyectos 11 veces, porque en general tendremos 12 proyectos diferentes. Sigamos adelante y hagamos algunos cambios. El segundo tipo de datos va a ser otro. También necesitamos aquí para cambiar el nombre de las imágenes que necesitamos aquí, Web dos. Entonces el tercer proyecto va a ser para la comida. Necesitamos aquí tres. Entonces el próximo proyecto será Health Web cuatro. A continuación tendremos otro, cambiemos los nombres de las imágenes que necesitamos. Web cinco. Entonces el siguiente tipo de fecha va a ser la salud. En cuanto a las imágenes, necesitamos web six. Entonces tendremos tu web siete. El próximo proyecto será en categoría viajes, va a ser web ocho. Entonces el siguiente es pie web nueve. Entonces vamos a tener negocios. Dejemos el valor agregado aquí cero. Necesitamos web diez. Entonces vamos a tener pie web 11. Y el último tipo va a ser el negocio. No voy a cambiarlo en cuanto los nombres de las imágenes que necesitamos aquí, Web 12. Bien. Eso se sienta el marcado HTML para la sección del proyecto está listo Echemos un vistazo al navegador. Como pueden ver, tenemos aquí los 12 proyectos. Todo está listo. Y ahora es el momento de comenzar a darle estilo a esta sección para eso. Pasemos a la siguiente conferencia. 27. Estilo de encabezado de proyectos y filtro de navegación: En la conferencia anterior, hemos preparado el marcado HTML para nuestra sección de proyectos Como puedes ver, todas las imágenes están aquí para la web. Es hora de darle estilo a esta sección. En esta conferencia, vamos a estar estilizando la primera parte de la sección, me refiero al párrafo del encabezado y a la navegación del filtro. Y luego seguiremos adelante y diseñaremos los packs del sitio web también. Bien, vayamos al código V justo después sección de servicios en establecer nuevos comentarios para proyectos. Después voy a seleccionar la sección de proyectos. En primer lugar, voy a definir ancho y alto. El ancho va a ser del 100% En cuanto a la altura, voy a hacerlo al 100% también. A continuación, voy a crear algo de espacio en la parte superior e inferior del relleno de la sección. Voy a poner relleno a 25 Ram, luego 015 Ram, y cero Además, voy a alinear elementos usando flex book en la pantalla Flex. Entonces para alinear los elementos verticalmente, tenemos que cambiar la dirección. La dirección del flex va a ser columna. Voy a alinear elementos en el centro. Como puedes ver el contenido, los elementos flex se colocan en el centro. Además, tenemos algo de espacio en la parte superior e inferior de la sección. Lo siguiente que voy a hacer es seleccionar H un elemento de encabezado. Necesitamos aquí proyectos H uno. Voy a cambiar la familia telefónica. Va a ser mull cursive. También necesitamos el tamaño del teléfono para ser más grandes. Vamos a ponerla en seis Ram. Entonces voy a crear algo de espacio en la parte inferior usando margen inferior. Vamos a establecer margen inferior a también voy a cambiar el color del encabezado. El color va a ser f4800. Echemos un vistazo al encabezamiento. Entonces, como pueden ver, el rumbo se ve bastante bien. A continuación voy a encargarme del párrafo. Voy a seleccionar proyectos P. Vamos a establecer con a 90 Ram. Entonces voy a una línea de texto en el centro. Lo siguiente que quiero hacer es aumentar el tamaño del teléfono. Vamos a ponerla en dos Ram. Además, necesitamos cambiar el color. Pongamos el color a 57 a ocho. Además, crea algo de espacio en la parte inferior. Vamos a establecer el margen inferior en cuatro Ram. Como pueden ver, el párrafo se ve bastante bien. A continuación voy a encargarme de la navegación. Sigamos adelante y seleccionemos Filtro desactivado. Lo primero que voy a hacer es definir el ancho. Va a ser 80% entonces voy a establecer la altura a diez Ram. También cambia el color de fondo. Va a ser blanco. Entonces voy a box shadow para hacer visible la navegación. Voy a poner sombra de caja a 02 Ram. Ocho Ram como el color. Voy a usar TBA. Los valores serán 130, luego 162. Seleccionemos estos valores. Voy a configurar Opacidad 2.2 Bien, aquí tenemos el filtro de navegación A continuación voy a hacerlo ligeramente redondeado, usando radio de borde. Vamos a configurarlo en un Ram. Entonces voy a usar flex box. Vamos a configurar la pantalla para flexionar. Voy a alinear los elementos en el centro verticalmente. Como puede ver, los artículos se colocan verticalmente en el centro. Ahora voy a crear un espacio entre los elementos usando justificar el espacio de contenido. Sobre este valor nos permite crear un espacio uniforme entre los elementos flex. Por último, necesitamos algo de espacio entre la navegación y las imágenes. Voy a hacer eso usando margen, fondo con el valor seis. Bien, ahora la navegación está separada de las imágenes. A continuación, voy a personalizar el enlace. En la navegación del filtro, voy a seleccionar el enlace de navegación del filtro. Vamos a establecer ancho y alto. El ancho va a ser 14 Ram. El voy a establecer altura a cuatro Ram. Cambiemos el color de fondo. Va a ser F245. Como puedes ver, Ancho y Alto y también atrás un color se aplican a los elementos de enlace. A continuación, voy a hacer los elementos alrededor usando radio de borde. Van a ser cuatro, así que tenemos que colocar los enlaces en el centro. Para eso, voy a usar de nuevo, CSS Flexbox. Necesitamos Display Flex, luego Justify Content Center y un centro de líneas de artículos. Como puede ver, los enlaces se colocan en el centro. Sigamos adelante y establecemos el tamaño de fuente en forma de un punto. Entonces necesitamos el peso de la fuente, va a ser negrita. Además, necesitamos transformar el texto a mayúsculas, luego cambiar de color. Va a ser 919 AA. Echemos un vistazo. La navegación se ve bastante bien. Voy a crear un espacio entre las letras usando el espaciado entre letras. Vamos a establecerlo en 0.1 run. Bien, ahora voy a crear unos pequeños efectos hover Una vez que pasemos el cursor sobre los enlaces, deberían cambiar su color de fondo Y también quiero moverlos un poco hacia arriba. Seleccionemos el enlace de filtro con hover. Voy a cambiar el color de fondo. Va a ser un D F dos. También necesitamos mover el elemento un poco hacia arriba. Necesitamos transformar, traducir Y y el valor va a ser -0.1 El efecto ho funciona bien, pero necesitamos un efecto más suave Agreguemos la transición A 0.3 segundos. Ahora todo funciona bien. En realidad, creo que la altura de los eslabones es un poco menor. Comprobaremos la versión terminada. Sí, definitivamente es más pequeño. Vamos a aumentar la altura, que sea cinco. Ahora tenemos mejores resultados. Lo siguiente que voy a hacer es hacer que el botón de vista esté activo por defecto. Como puedes ver, la vista toda la parte inferior tiene diferente color de fondo y además el color del teléfono es blanco. Para hacer eso, voy a agregar nueva clase al último enlace que veo enlace. Agreguemos aquí Activo. Después voy a seleccionar Clase activa y cambiar el color de fondo. Va a ser f401 Y también necesitamos color del texto, blanco Tenemos que agregar a las clases y no al atributo de tipo de datos. Eso fue un pequeño error. Ahora se debe aplicar el estilo. Lo único que tengo que hacer es cambiar el color de fondo. Voy a seleccionar activo con hover. Cambiemos el color de fondo. Va a ser C611. Ahora, todo funciona bien. Hemos terminado de trabajar en la primera parte de nuestra sección. A continuación tenemos que personalizar esos packs de sitios web. Ahora mismo tenemos aquí imágenes más grandes. Tenemos que encargarnos más de ello. Pasemos a la siguiente conferencia. 28. Paquetes de sitios web de estilo: Bien, en la conferencia anterior tenemos estilo, la primera parte de la sección del proyecto, me refiero al párrafo del encabezado y a la navegación del filtro. Y ahora tenemos que encargarnos de los packs del sitio web. En general, tenemos aquí 12 paquetes de sitios web. Están alineados en diferentes líneas. Tenemos cuatro filas. En cada fila tenemos tres sitios web. Pasemos al código VS y comencemos a darle estilo. En la segunda parte de la sección de proyectos, tenemos que seleccionar proyectos y voy a definir ancho y alto. El ancho va a ser 33 Ram. En cuanto a la altura, voy a establecer la altura 233 Ram también. Siguiente Voy a seleccionar y darle estilo a las imágenes. Ahora mismo son demasiado grandes, así que tenemos que encargarnos de eso y hacerlos más pequeños. Voy a seleccionar la primera imagen que necesitamos, imagen de proyecto, luego selector hijo. Necesitamos aquí primera imagen. Voy a establecer el ancho a 22. Corre en cuanto a la altura, voy a hacerla 100% La primera imagen es más pequeña ahora, pero en realidad se estira y no se ve bien. Para solucionar ese problema, voy a seleccionar imagen y usar propiedad llamada object feet con el valor cover. Ahora como puedes ver, las imágenes se ven realmente bonitas. A continuación, voy a duplicar este código dos veces. Cambiemos los números aquí. Necesitamos enésimo hijo dos y enésimo hijo tres. La segunda imagen va a ser 20 Ram. En cuanto a la altura, voy a ponerla en 30 Ram. Entonces tenemos la imagen número tres. El ancho va a ser 100% En cuanto a la altura, voy a hacerla 70% Bien, lo siguiente que voy a hacer es seleccionar lista de proyectos. Voy a definir con y altura. El ancho va a ser 70% En cuanto a la altura, voy a hacerla 100% Entonces voy a usar Flex Box para alinear los elementos. Necesitamos Display Flex. Entonces necesitamos Justify Content Center para centrar los elementos flexibles horizontalmente. Entonces necesitamos wrap con el valor p para alinear los paquetes de sitios web en diferentes filas. Como puedes ver ahora tenemos imágenes alineadas en diferentes filas. Ahora mismo no se ven muy bien, pero lo arreglaremos pronto. Lo siguiente que voy a hacer es fijar la posición de la imagen a absoluta. Entonces necesitamos posición relativa para el elemento padre, que en este caso es project. Necesitamos tu posición relativa porque vamos a posicionar las imágenes según el elemento padre. Ahora todas las imágenes tienen posición absoluta. Lo siguiente que voy a hacer es establecer posición para cada imagen al 50% Siguiente necesitamos posiciones para la primera imagen. Voy a establecer la posición izquierda en 50% Para poder colocar la imagen en el centro perfectamente, necesitamos usar transform translate con los valores -50% nuevamente -50% Las primeras imágenes se colocan perfectamente en el centro en el proyecto Siguiente Voy a agregar efecto de sombra a la primera imagen. Usemos sombra de caja. Voy a añadir aquí los siguientes valores. Necesitamos 01 Ram, y luego Ram lleno, y RTB A. Voy a usar color negro con la opacidad 0.4 Como puedes ver, las primeras imágenes tienen el efecto sombra. No son completamente visibles. Para arreglarlo, voy a usar la propiedad index. Vamos a establecer el índice 22. Ahora, deberían ser completamente visibles. Sí, son visibles. A continuación, voy a encargarme de la segunda imagen. Pongamos la posición izquierda a -5% También, necesitamos traducir, en realidad, no traducir, transformar, y luego necesitamos traducir Y -50% Las segundas imágenes se posicionan aquí Nuevamente, la propiedad de índice z, porque no son completamente visibles. Vamos a establecer el índice z en uno. Ahora son visibles, pero se colocan detrás de las primeras imágenes, y eso es lo que necesitamos. Voy a añadir aquí sombra de caja. Los valores serán 03 Ram, ocho Ram. El color va a ser RGBA, 130162. Seleccionemos este valor y cambiemos la opacidad. Va a ser 0.9 Ahora las segundas imágenes tienen este bonito y genial efecto de sombra. En realidad, voy a hacer redondeadas las esquinas de las imágenes. Vamos a usar para el radio. Vamos a configurarlo en un Ram. Ahora las imágenes se ven mucho mejor. Lo siguiente que voy a hacer es cuidar la tercera imagen. Voy a establecer la posición correcta para la tercera imagen en -10% De nuevo, necesitamos transformar, traducir Y -50% las terceras imágenes están Agreguemos aquí sombra de caja. En realidad necesitamos los mismos valores. Vamos a copiarlos de aquí y pegarlos abajo. Ahora las terceras imágenes están posicionadas y tienen sombra de caja. Lo único que tengo que hacer es separar los packs de sitios web entre sí. Añado aquí el margen cinco. Además, voy a hacer punto del cursor, ¿de acuerdo? Entonces todo se ve a la perfección y donde los proyectos estamos hechos, estoy en los packs del sitio web. Todo está estilizado y se ve bastante bien. Ahora tenemos que hacer que esta navegación funcione. Una vez que hacemos clic en cualquiera de las categorías, entonces se deben mostrar las imágenes adecuadas. Para ello, voy a pasar a la siguiente conferencia. 29. Cómo hacer que la navegación de filtros funcione: Bien, en la conferencia anterior hemos terminado de diseñar la sección del proyecto. Como puedes ver, todo se ve bastante bien. Y ahora tenemos que hacer que la navegación funcione. Quiero decir, una vez que hagamos clic en alguna de las categorías, entonces se mostrarán los paquetes de sitios web adecuados. Echemos un vistazo al proyecto terminado. Si hago clic en alguno de los enlaces, entonces se mostrarán los sitios web adecuados. Si hago clic en el botón Ver todo, entonces se mostrarán todos los sitios web. Bien, eso es lo que vamos a hacer en esta conferencia. Vamos al archivo JS script. En realidad, lo primero que voy a hacer aquí es agregar comentarios para Napper, porque lo olvidé Necesitamos aquí ahora de un. y luego voy a insertar nuevos comentarios para la sección del proyecto. En primer lugar, voy a seleccionar todos los elementos de enlace y almacenarlos en la variable. Vamos a crear una nueva variable. Voy a llamarlo enlaces de filtro. Después tenemos que seleccionar todos los enlaces usando el selector de consultas método all. Este método nos permite seleccionar múltiples elementos con el mismo nombre de clase. En este caso, necesitamos aquí filtro de nombre de clase, sin enlace. Este método devuelve una lista de nodos que es una colección. Es un objeto similar a una matriz. Ahora tenemos que mirar a través de la lista de nodos. Me refiero a filtrar enlaces y agregar un oyente de eventos a cada enlace Necesitamos enlaces filtrantes seguidos de un método de forraje. En realidad, para cada método es un método de ayuda de matriz. En el script Go, se utiliza para mirar a través de los elementos de una matriz o lista de nodos y realizar una acción u operación específica en cada elemento. Tenemos que asegurar una función de devolución de llamada. Esta función se ejecutará para cada elemento de la lista de nodos. Voy a asegurar una discusión. Será enlace de filtro. Representa el elemento actual que se está procesando en la lista de nodos. Ahora podemos agregar un oyente de eventos al enlace de filtro. El tipo del evento va a ser clic también, voy a asegurar una función de devolución de llamada que se ejecutará una vez que hagamos clic en el enlace Si echamos un vistazo al navegador y hacemos clic en cualquiera de los enlaces aquí, entonces navegaremos hasta la parte superior del sitio web. En realidad, es un comportamiento predeterminado del elemento link. Y tenemos que evitar este comportamiento predeterminado para eso necesitamos pasar aquí e incluso los objetos, entonces podemos usar el método llamado prevent default. Ahora bien, si hago clic en los enlaces, ya no navegaremos hasta la parte superior de la página. Bien, como saben, el último enlace, me refiero a ver todo el botón tiene una clase predeterminada activa. Una vez que hacemos clic en cualquiera de los enlaces, debemos eliminar esta clase, me refiero a la clase activa del elemento actual y tenemos que agregarla al elemento clicado Para ello, voy a seleccionar elementos usando el método selector de consultas. Voy a especificar aquí el nombre de la clase. Necesitamos enlace de filtro y tenemos que agregar aquí clase activa. Una vez que el activo, se selecciona el elemento link. Ahora podemos eliminar la clase activa de este elemento. Necesitamos propiedad de lista de clases. Entonces necesitamos el método remove. Y tenemos que especificar aquí el nombre de la clase activa. Una vez que hagamos clic en los elementos de enlace, entonces la clase activa se eliminará del elemento y se agregará al elemento clicked Ahora para agregar la clase activa al elemento clicked, necesitamos aquí filtrar link, class, list, add, y tenemos que Acta de clase del instituto. Bien, así que vamos a revisar el navegador. Si hacemos clic en alguno de los enlaces, entonces verá que se cambia el fondo. En realidad, funciona bien. Bien, entonces ahora tenemos que encargarnos de los proyectos. adelante y seleccionemos todos los proyectos usando de nuevo, selector de consultas, todo método que necesitamos especificar aquí, el nombre de la clase, proyecto. Ahora, voy a esconder todos los proyectos. Una vez que hacemos clic en el enlace del filtro, necesitamos mirar a través de los proyectos, que es un nodo, menos una colección, y tenemos que ocultar cada proyecto. Para ello, voy a seleccionar proyectos seguidos de un método forrajero Voy a pasar aquí la función de devolución de llamada. El argumento va a ser proyecto. Ahora, para ocultar los proyectos, voy a agregar nueva clase al proyecto. Y luego usaremos esta clase en CSS. Para ocultar el elemento, necesitamos lista de clases de proyecto. Y tenemos que especificar aquí el nombre de la clase. En este caso, voy a llamarlo ocultar. Ahora vamos al archivo CSS y seleccionemos proyecto con ocultación de clase. Para ocultar el elemento, voy a usar display none. Ahora si hacemos clic en alguno de los enlaces, entonces todos los proyectos se calentarán. Bien, Ahora necesitamos ocultar y exhibir proyectos de acuerdo a las categorías. Y para eso necesitamos usar aquí una declaración condicional. Quiero decir si declaración. Vamos a crear declaración if como la condición voy a pasar aquí lo siguiente. Necesitamos el atributo filter link dot get. Voy a pasar aquí atributo llamado tipo de datos. Como recuerdas, agregamos atributos de tipo de datos a los enlaces y también a los proyectos. Si esta expresión es igual a project get atributos, entonces tipo de datos. Esta condición si el tipo de datos del enlace de filtro en el que se hace clic coincide con el tipo de datos del proyecto En otras palabras, es verificar si el enlace de filtro y el proyecto pertenecen a la categoría o tipo. Si esta condición es cierta, entonces tenemos que mantener los proyectos coincidentes mostrando. Pero eso no es todo lo que tenemos que agregar aquí o declaración, tenemos que verificar otra condición que va a ser filter link get attribute. Tenemos que especificar aquí el atributo de tipo de datos. Si esto es igual a toda esta parte de la condición verifica si el tipo de datos del enlace de filtro en el que se hizo clic está configurado en all Esta condición se utiliza para indicar que todos los proyectos deben mostrarse independientemente de su tipo o categoría. Bien, la condición de la declaración está lista. Si es cierto, entonces tenemos que exhibir el proyecto. Por lo tanto, tenemos que eliminar altura de clase del proyecto. Necesitamos lista de clases de proyecto, eliminar. Tenemos que especificar aquí la altura del nombre de la clase. Bien, entonces creo que eso es todo ahora la navegación debería funcionar. Vamos a dar click, tenemos aquí algún problema. Inspeccionemos la página y verifiquemos la pestaña de la consola. Aquí tenemos un error que dice que el proyecto no está definido. Necesitamos la línea 29. En realidad tenemos que pasar las declaraciones if dentro de aquí. Por eso no se reconoce el proyecto. Ahora el problema debería ser arreglado. Vamos a revisar. Si volvemos a hacer clic, tenemos algún problema. No se pueden leer las propiedades de lectura indefinida eliminar. Comprobemos esta línea de código aquí, Lista de clase con la L. mayúscula Ahora si reviso, entonces todo va a funcionar perfectamente. Por último, la navegación funciona bien, en realidad con la sección del proyecto, ya terminamos. Ojalá fuera interesante y aprendas algunas cosas nuevas. Pasemos a la siguiente conferencia. 30. Cómo crear la sección de marcado HTML para plantillas: Bien, en la conferencia anterior hemos terminado de trabajar en la sección de proyectos. Se ve bastante bien y además funciona bien. Me refiero a este filtro de navegación. Ahora es el momento de seguir adelante y comenzar a construir la siguiente sección. Echemos un vistazo al proyecto terminado. La siguiente sección va a ser la sección llamada plantillas. Esta sección consta de dos partes diferentes. La primera parte es lo que ves aquí ahora mismo. En cuanto a la segunda parte, va a ser el video. Sigamos adelante y describamos la sección. La primera parte incluirá los lados izquierdo y derecho. En el lado izquierdo, se puede ver el párrafo del encabezado y la parte inferior. En cuanto al lado derecho, puedes ver aquí tres imágenes diferentes. Y también la parte inferior abajo abajo, se puede ver el efecto parcial de las imágenes. Empezaremos con la primera parte y luego pasaremos al video. En primer lugar, necesitamos crear el marcado HTML. Vamos al código VS e insertemos nuevos comentarios justo después de los proyectos necesitamos comentarios para las plantillas. Entonces voy a abrir elementos de sección con las plantillas de nombre de clase. Como dije, la primera parte de nuestra sección constará de dos partes distintas. Me refiero al lado izquierdo y al lado derecho. Voy a abrir la etiqueta p que va a ser plantillas a la izquierda. Consistirá en encabezamiento párrafo y el botón. Voy a abrir H uno elementos de encabezado que van a ser plantillas. A continuación necesitamos párrafo. El párrafo consistirá en algún texto ficticio. Voy a insertar aquí, Lorem, y entonces el número de palabras va a ser 30 Aquí tenemos el texto ficticio. Entonces necesitamos el tipo de la parte inferior va a ser, pero también vamos a tener aquí nombre de clase, donde va a ser plantillas, PTN En cuanto al texto voy a insertar sobre plantilla, bien, Eso es todo. Sobre el lado derecho. Eso es todo sobre el lado izquierdo, no el lado derecho. Ahora tenemos que cuidar el lado derecho. Voy a abrir deep tag que van a ser plantillas. ¿Correcto? Tendremos aquí tres imágenes distintas y un tope de juego. Vamos a insertar elementos de imagen. Voy a especificar la ruta de la imagen que necesitamos para salir de la carpeta del auto, luego seleccionar imágenes. Voy a seleccionar web ocho, imagen uno. Entonces imagen web dos, necesitamos web ocho imagen tres. Bien, sentémonos sobre las imágenes. A continuación necesitamos el botón de reproducción. Voy a abrir la etiqueta con el botón de nombre de clase. Crearemos esta batuta usando teléfonos encendidos. Estoy abierto una etiqueta de primer botón con el nombre de la clase Play PTN Entonces voy a insertar tus elementos con las clases FA solid FA play que sienta el marcado HTML está listo para la sección de plantilla Estoy en la primera parte de la sección. Aquí tenemos los elementos. Ahora es el momento de seguir adelante y personalizar esos elementos. Y para eso, pasemos a la siguiente conferencia. 31. Sección de plantillas de estilo: Bien, entonces en la conferencia anterior hemos creado el marcado HTML para la sección de plantillas, y ahora tenemos que darle estilo a esta sección Vamos al código VS e insertemos nuevos comentarios en el archivo CSS. Necesitamos comunes para las plantillas. Después voy a seleccionar la sección de plantilla. En primer lugar, voy a definir con y altura. El ancho va a ser 100% En cuanto a la altura, voy a hacer que sea 100 altura de ventana gráfica Será el 100% de la ventana gráfica. A continuación, voy a cambiar el fondo. Vamos a usar la función de gradiente lineal. La dirección de la transición de color va a ser dos a la izquierda. Entonces voy a insertar tu primera persona que llama. Va a ser 8430. Entonces tendremos el segundo color. Va a ser 8430. En realidad es del mismo color que para la tercera persona que llama. Va a ser 409. Echemos un vistazo al navegador. Entonces, como pueden ver, tenemos aquí la clasificación lineal en grasa. A continuación, voy a esconder el lado derecho por un tiempo. Seleccionemos plantillas, derecho. Agregar aquí, mostrar ninguno. Como pueden ver, la parte derecha está oculta y tenemos aquí solo el lado izquierdo. En primer lugar, voy a personalizar el lado izquierdo y luego también nos encargaremos del lado derecho. Sigamos adelante y seleccionemos las plantillas a la izquierda. Voy a establecer el ancho al 50% va a ocupar la mitad de la sección. Entonces voy a poner posición en absoluto. Voy a posicionar las plantillas dejadas de acuerdo a los elementos padre. Necesitamos posición relativa para las plantillas. A continuación voy a definir propiedades superiores e izquierdas. Ambos van a ser cero. Además, vamos a crear algo de espacio dentro del elemento usando padding. Voy a poner relleno a 25 Ram en la parte superior. Entonces tendremos diez Ram en el lado derecho, cero en la parte inferior, y diez Ram en el lado izquierdo. Nuevamente, aquí tenemos los elementos, también el espacio dentro del lado izquierdo. A continuación voy a encargarme del rumbo. Sigamos adelante y seleccionemos plantillas. Dejó uno elementos de rumbo. En primer lugar, voy a definir la familia telefónica. Vamos a configurar el teléfono a Molly Cursive. A continuación voy a establecer el tamaño del teléfono, van a ser siete Rams Transformemos el texto en un caso de ópera. Entonces necesitamos algo de espacio entre las letras. Vamos a configurarlo 2.5 Ram. Entonces voy a cambiar el color. Va a ser blanco. Como pueden ver, el rumbo se ve bastante bien. Vamos a agregarle algunos estilos más. Voy a crear algunos efectos de sombra usando sombra. Aquí necesitamos, 0.5 Ram. Entonces dos, el color va a ser RGBA, color negro con la opacidad 0.3 Por último, voy a crear algún espacio en la parte inferior del encabezado usando margen inferior, el valor va a ser tres Ram Bien, entonces sentémonos sobre el rumbo siguiente. Yo voy a encargarme del párrafo. Sigamos adelante y seleccionemos las plantillas a la izquierda. En primer lugar, voy a definir el ancho del párrafo. Va a ser 60 Ram. Entonces pongamos el tamaño de fuente a 1.6 Rams. Voy a establecer el peso de la fuente que necesitamos aquí. Peso, van a ser 300 para crear un espacio entre las letras. Vamos a configurarlo 2.1 Ram y cambiar el color. El color va a ser 222. Aquí tenemos el párrafo. Siguiente Voy a usar de nuevo Tech shadow. Vamos a copiar esta línea de código y agregarla aquí. Voy a disminuir la opacidad. Hagámoslo 0.1 Ram. En realidad, no Ram sino solo 0.1 Finalmente, cuando escuches fondo más grande para crear el espacio en la parte inferior, vamos a agregarlo a siete. Bien, veamos sobre el párrafo siguiente. Necesitamos personalizar el fondo. Sigamos adelante y seleccionemos plantillas. En realidad, no necesitamos aquí las plantillas que quedan. Necesitamos plantillas BTN tiene su nombre de clase individual. En primer lugar, pongámonos con 213 Ram. Entonces la altura del fondo va a ser seis Ram. A continuación necesitamos color de fondo. Voy a ponerla en blanco. Echemos un vistazo al fondo. Tenemos que deshacernos del borde predeterminado y también tenemos que hacer el fondo redondeado. Necesitamos aquí frontera ninguno y luego radio fronterizo. Van a ser tres Ram. Bien, después de eso tenemos que encargarnos de las fuentes. El tamaño de la fuente va a ser 1.8 Ram. Entonces voy a hacer que el pont sea atrevido. Además, transformemos el texto a mayúsculas. Entonces necesitamos espaciado entre letras para crear algo de espacio entre las letras. Va a ser un 0.1 Ram y también cambiar el color de los teléfonos. El color va a ser A, A tres EC. Echemos un vistazo ahora. El botón se ve bastante bien. Lo único que tenemos que hacer es crear algún efecto de sombra usando sombra de caja. Aquí necesitamos, 01 Ram, tres Ram, y el color va a ser RGBA con la opacidad 0.1 también Además de eso, necesitamos aquí para señalar. Bien, así que eso es todo, sobre el lado izquierdo, ahora tenemos que cuidar el lado derecho. Como ya sabéis en estos momentos el lado derecho está oculto. Voy a deshacerme de mostrar ninguno Desde aquí. Voy a establecer ancho y alto del lado derecho. El ancho va a ser del 50% Entonces necesitamos la altura, voy a poner al 100% voy a poner la posición a absoluta. Entonces la posición dos va a ser cero. Tenemos que definir la posición correcta, que va a ser cero también. Como puede ver, los elementos se colocan en el lado derecho de la sección. Siguiente Te voy a sacar de las imágenes. En primer lugar, voy a seleccionar todas las imágenes que necesitamos aquí, plantillas, derecha, seguidas de la tachueta de imagen Las imágenes tendrán dos estilos comunes. El primero va a ser posición absoluta. Además, vamos a tener aquí radio fronterizo y va a ser uno Ram. A continuación, necesitamos personalizar cada imagen por separado. Sigamos adelante y comencemos con el primero que necesitamos aquí, plantilla imagen derecha, seguido por el enésimo selector hijo Seleccione la primera imagen, tenemos que definir el ancho. Va a ser 40 Ram. También, voy a definir la posición de la primera imagen. La posición superior va a ser del 50% Entonces necesitamos la posición correcta, va a ser 25% Necesitamos centrar la imagen verticalmente. Y para eso voy a usar transformar traducir Y con el valor de -50% aquí Tener la primera imagen, ésta. Hagámoslo visible usando propiedad index porque terminó detrás de las otras imágenes. Vamos a establecer el índice en uno. Ahora puedes ver aquí que la primera imagen es completamente visible. A continuación, voy a crear algún efecto de sombra usando sombra Po. Los valores serán 027 Ram, y el color será RGBA con la opacidad 0.4 Además, voy a disminuir ligeramente la opacidad de la imagen Vamos a configurarlo 2.8 De nuevo, aquí tenemos la primera imagen. Se ve bastante bien. Sigamos adelante y personalicemos la segunda imagen. En realidad, voy a duplicar este código, luego cambiar el selector de chat enésimo Van a ser dos, el ancho va a ser 20 Ram. Entonces necesitamos aquí posicionar el 20% en lugar de la posición correcta. Voy a usar aquí la posición izquierda. Y el valor será del 18% No necesitamos aquí transformar, traducir. Vamos a deshacernos de él. La sombra de caja tendrá diferentes valores. Aquí necesitamos 18 gramos. En cuanto a la opacidad, va a ser 0.6 También se deshace de la opacidad de aquí. Entonces echa un vistazo al navegador. Aquí tenemos la segunda imagen. Se ve bastante bien y se posiciona correctamente. A continuación tenemos que cuidar la tercera imagen. Voy a duplicar este código, cambiar el selector de chat enésimo. Van a ser tres. El ancho de la imagen será de siete. Entonces a la posición va a ser 22% Siguiente necesitamos posición correcta, es 5% También tenemos que cambiar la opacidad de la sombra de caja, va a ser 0.5 Luego agrega aquí opacidad, va a ser 0.5 me voy a deshacer de la propiedad index porque aquí no la necesitamos Creo que eso es todo sobre la tercera imagen. Echemos un vistazo. Como puedes ver, las tres imágenes están alineadas y se ven bastante bonitas. Bien, ahora tenemos que encargarnos del botón de reproducción. Sigamos adelante y seleccionemos el botón de reproducción de desarrollo. Voy a poner posición a absoluta, Entonces a posición va a quedar 57%. La posición va a ser 23% Echemos un vistazo. El botón no es visible. Terminó detrás de las imágenes que necesitamos aquí, la propiedad indexada. Vamos a establecer el índice en tres. Ahora el botón debería estar visible aquí. Botón. A continuación tenemos que seleccionar Play BTN y definir dentro de la altura Va a ser 20 Ram. Me refiero a las dos propiedades. A continuación voy a cambiar el color de fondo. Vamos a ponerla en blanco. También, voy a hacer que el elemento redondeado usando radio de borde con el valor del 50% Aquí juega BTN I, el círculo A continuación tenemos que deshacernos del borde predeterminado de la parte inferior. Digamos frontera a ninguno. Entonces necesitamos sombra de caja. Los valores serán 01 Ram. Diez Carnero. Necesitamos RGBA, color negro con la opacidad 0.6 Finalmente, necesitamos aquí cursor para ser El círculo, el fondo se ve bastante bien. A continuación tenemos que crear la parte posterior de la parte inferior. Esta parte de aquí, este círculo transparente. Y voy a crear este elemento usando cuatro pseudo elemento Voy a seleccionar play BTN seguido de los cuatro pseudo elementos Definamos el contenido, va a estar vacío. A continuación necesitamos peso y estatura. Vamos a ponerlos a los dos a 26 Ram. Entonces voy a establecer el color de fondo a RGBA. Aquí necesitamos color blanco, que es 25053 veces, pero necesitamos menor opacidad, 0.1 que es 25053 veces, pero necesitamos menor opacidad, 0.1 Derecha. Ahora el, antes el elemento no es visible porque tenemos que definir su posición. Fijemos la posición a absoluta. La posición superior va a ser del 50% entonces la posición izquierda va a ser del 50% también. Estoy tratando de centrar el elemento para eso. Como ya sabrás, necesitamos aquí transformar traducir con los valores -50% otra vez -50% Ahora el elemento debería ser visible Aquí tenemos los elementos. Hagámoslo redondeado usando radio de borde. Va a ser 50% Además, necesitamos sombra de caja. En realidad, voy a agarrar sombra de caja de aquí. Me refiero a los valores que solo necesitamos para cambiar la opacidad. Va a ser 0.3 Ahora podemos ver claramente el círculo siguiente, tenemos que encargarnos de lo fásico Es demasiado pequeño ahora mismo vamos a seleccionar elementos. Necesitamos Play BTN. El tamaño del teléfono va a ser siete Ram. En cuanto al color del icono, voy a fijarlo en 2025. Para, como se puede ver el teléfono como icono se hizo más grande y se ve bastante bien. A continuación tenemos que crear los efectos hover. Los efectos. En primer lugar, voy a encargarme de la obra BTN, vamos a seleccionarla con hover, voy a aumentar la escala del elemento Para ello, necesitamos transformar la escala. Y va a ser 1.2 Necesitamos su transición, todos 0.3 segundos. Ahora como puedes ver, la escala aumenta una vez que colocamos el cursor sobre el botón Ahora tenemos que hacer los cuatro elementos un poco más pequeños. Al pasar el cursor, tenemos que seleccionar Jugar. Btn con hover seguido de los elementos de fuerza. Necesitamos disminuir la escala de los elementos. Tomemos este código de aquí. Y hacer la escala 0.9 que necesitamos aquí la transición todo 0.3 segundo. Una vez que pasemos el cursor sobre la parte inferior, la escala del elemento disminuirá Pero como se puede ver, el elemento se mueve hacia abajo. Sucede porque ser forzado al elemento por defecto tiene transform translate aquí. Necesitamos copiar traducir y editar aquí también. Vamos a copiar la función de traducción y editar aquí. Ahora bien, el problema debería ser arreglado. Como puedes ver, todo funciona bastante bien. Ahora tenemos que crear el efecto polar. Es decir, tenemos que crear elementos que cubrirán parcialmente las imágenes con algún efecto de desenfoque. Voy a crear antes elementos de la sección. Aquí necesitamos plantillas seguidas de los cuatro elementos. Definamos el contenido, va a estar vacío. Entonces necesitamos dentro de la altura, voy a ponerlos a ambos en tranvía. Entonces necesitamos antecedentes. Voy a usar la función de gradiente lineal. La dirección de la transición de color va a ser dos inferiores. Entonces el primer color será transparente. Entonces necesitamos el segundo color, y va a ser ocho para 30, éste. En cuanto al tercer color, necesitamos usar el mismo 84430 A ahora mismo antes de que el elemento no sea visible Porque terminó detrás de otros elementos, detrás del elemento de sección. Para que el elemento sea visible, necesitamos el índice con valor cuatro. El elemento no es visible. En realidad, sucede porque tenemos que definir la posición. Se me olvidó. Necesitamos posición absoluta. Entonces la posición inferior va a ser -5% En cuanto a la posición correcta, voy a decirlo dos, 10% Ahora el elemento debería ser visible Sí, es visible. A continuación, necesitamos usar la propiedad llamada filter, que nos permitirá crear un efecto polar. Voy a usar filtro con función polar y el valor va a ser siete. Como pueden ver, tenemos aquí un efecto bastante bonito y genial. Ahora tenemos un pequeño problema. El botón y la parte superior detrás del elemento antes. Para solucionarlo, tenemos que incrementar el valor de la propiedad indexada. En este momento son tres. Hagámoslo cinco, que es superior a cuatro. Ahora bien, el problema debería ser arreglado. ¿Bien? Todo se ve bastante bien. Y en realidad, con el estilo de la primera parte de la sección plantilla, ya terminamos a continuación. Tenemos que incrustar el video a esta sección. Para eso, pasemos a la siguiente conferencia. 32. Cómo crear el marcado de HTML para el reproductor de video: En la conferencia anterior hemos estilizado la sección plantilla, decir, la primera parte de la sección Ahora es el momento de seguir adelante y tomar de la segunda parte. O sea, tenemos que deambular el video a la sección. Echemos un vistazo al proyecto terminado. Si hago clic en el botón de reproducción, entonces el video lo hará. Si hago clic en el botón de reproducción, entonces comenzará a jugar. En realidad, todos los controles funcionan bien. Aquí tenemos aquí opciones de velocidad. Ahora mismo, el video se está reproduciendo en modo normal. Si hago clic, digamos dos X, entonces comenzará a jugar rápido. A continuación tenemos aquí imagen. En modo imagen, puedes arrastrar y soltar esta pequeña ventana. También tenemos aquí modo de pantalla completa. Si hago clic en él, entonces el video se reproducirá en modo de pantalla completa. Eso es todo, lo que vamos a hacer, si hago clic en el botón X, entonces el video se cerrará. Sigamos adelante y comencemos a crear el marcado HTML. En el marcado HTML, tendremos muchos elementos diferentes enfocados y seguiremos la conferencia Voy a insertar nuevos comentarios justo encima la etiqueta de sección de cierre que necesitamos para video. Después abre de elemento, va a ser contenedor de video en el que voy a insertar otro profundo y va a ser video. Voy a crear x patrón de cierre. Eso es etiqueta abierta con la clase PTN. Después inserte elemento con las clases una marca sólida FA x. Después de eso voy a abrir otro y va a ser envoltorio de controles. A continuación necesitamos otra etiqueta dip y va a ser tiempo de video en la que tendremos área de progreso. Este elemento incluirá etiqueta span con cero. También, vamos a tener aquí otro dip y va a ser parte de progreso. Este elemento estará vacío. A continuación, necesitamos crear controles de video en los que contaremos con diferentes opciones. Me refiero a opciones en el lado izquierdo, en el centro, y en el lado derecho, necesitamos elementos profundos con las opciones de clases a la izquierda. Voy a duplicar esta línea de código dos veces. Como dije, necesitamos opciones en el centro, también en el lado derecho. Vamos a encargarnos de las opciones. En realidad necesitamos tus opciones y no opción. Vamos a encargarnos de las opciones del lado izquierdo aquí botón que va a ser de cuatro volúmenes. Voy a inasegurar elemento I con las clases un volumen sólido alto A continuación voy a crear la etiqueta de entrada. El tipo va a ser rango. Además, voy a agregar aquí un par de atributos diferentes. El primero va a ser mínimo. Voy a ponerla a cero. Entonces vamos a tener el máximo y va a ser uno. Y también necesitamos otro atributo llamado step. El valor va a ser un Todo bien, eso es todo sobre el rango. A continuación voy a crear otro desarrollo y va a ser video timer. En el interior. El temporizador de video tendrá tres elementos de span diferentes. El primero va a ser el tiempo actual. Voy a ins cero. Vamos a duplicar el elemento span dos veces. El segundo va a ser separador. Voy a insertar. Adelante. En cuanto al tercer elemento span, va a ser la duración del video. A continuación, voy a encargarme de las opciones en el centro. Tendremos aquí tres botones diferentes. Vamos a crear Button con la clase saltar hacia atrás. Voy a insertar tus elementos. Va a ser FAS FA al revés. Duplicemos el botón dos veces. El segundo elemento de botón va a ser para pose de juego. Cambiemos el nombre de la clase. Para el elemento, va a ser la jugada de FASFA. En cuanto a los elementos del tercer botón que necesitamos aquí, hacia adelante en lugar de hacia atrás. Sentémonos sobre las opciones en el centro. A continuación tenemos opciones en el lado derecho. Voy a insertar tu Desarrollo. Va a ser contenido de Play Back. Voy a insertar tu botón, que va a ser la velocidad de reproducción. Aquí voy a usar Google Material símbolo en lugar de elemento. Vamos al navegador y busquemos símbolos de Google Material. Necesitamos visitar el sitio web de Google Fonts, donde hemos agarrado las fuentes de Seleccione aquí Este estilo, va a ser redondeado. Entonces voy a buscar video en cámara lenta. Ese es el icono que necesitamos. Vamos a hacer clic en este icono. Y luego voy a copiar este enlace desde aquí. Tenemos que pegar el enlace en el elemento head. Entonces tenemos que copiar este elemento span de aquí. Vamos a insertar elemento span dentro del botón. Después comprueba si se muestra el icono. Como puedes ver, tenemos aquí el icono, se muestra. A continuación, necesitamos agregar aquí las opciones de velocidad. En general, tendremos cinco opciones de velocidad diferentes que necesitamos. La primera opción va a ser dos x. Duplicemos el desarrollo cuatro veces y cambiemos las opciones. El segundo va a ser 1.5 entonces tendremos aquí normal. El siguiente va a ser 0.75 En cuanto a la última opción de velocidad, va a ser 0.5 Además de eso, necesitamos agregar también los atributos a los desarrollos. El atributo va a ser velocidad de datos, y necesitamos insertar aquí los valores similares que necesitamos aquí dos. Entonces 1.5 como lo normal, voy a usar aquí uno. Entonces tendremos aquí 0.75 y finalmente 0.5 Eso es todo, sobre las opciones de velocidad. A continuación tenemos que agregar aquí icono para imagen. En modo imagen, necesitamos botón con la clase Pick in Peak. Significa que en realidad necesitamos aquí pico en pico. Significa imagen en modo imagen. Nuevamente, tenemos que agarrar el icono desde aquí. Busquemos imagen en imagen. Ese es el icono. Voy a agarrar el elemento span y pegarlo aquí dentro del botón. Si revisamos el navegador, entonces verá que se muestra el icono. Muy bien, a continuación necesitamos otro botón para el modo de pantalla completa. Agreguemos aquí la pantalla de clúster. Voy a usar elemento con las clases FA solid, FA, expand. Por último, necesitamos incrustar el video. Tenemos que insertar aquí el video en sí. Necesitamos abrir la etiqueta de video en el atributo source. Tenemos que especificar la ruta del archivo. En primer lugar, tenemos que salir de la carpeta actual. Entonces tenemos que seleccionar carpeta llamada videos. Y tenemos que seleccionar este archivo aquí. Muy bien, entonces creo que eso se asienta sobre el marcado HTML. Espero que aquí todo esté correcto. Tenemos todos los elementos ahora mismo, todo está en mal estado. Puedes ver aquí los elementos de la cabecera. Y sucede porque el video es sobre nuestro proyecto. Es la vista previa de nuestro proyecto. Por eso se ven aquí los elementos de la cabecera. Arreglaremos esos temas, personalizaremos esos elementos en las próximas conferencias. Sigamos adelante. 33. Reproductor de video para estilar: En la conferencia anterior, hemos preparado el marcado HDML para el video, quiero decir para la segunda parte de la sección plantilla Ahora es el momento de darle estilo a esos elementos. Ahora mismo, todo está mal aquí, pero lo arreglaremos pronto Lo primero que voy a hacer entonces antes de empezar a darle estilo a esos elementos es arreglar un pequeño problema. Como puede ver, este icono no se muestra aquí. Si revisamos el código HTML, encontrarás que nos falta aquí D. quiero decir, necesitamos una cara sólida. Ahora bien, el problema debería ser arreglado. Como puede ver, se muestra el icono. Bien, ahora vamos al archivo CSS y creamos nuevos comunes para el video. Voy a seleccionar contenedor de video. En primer lugar, voy a definir la posición del video. Se va a arreglar. Entonces voy a definir propiedades superiores e izquierdas. Voy a poner la cima a cero. Entonces la posición izquierda va a ser cero. Voy a definir dentro de la altura. Vamos a ponerlos a ambos al 100% Entonces voy a cambiar el color de fondo. Vamos a establecer el color de fondo en un valor RGBA. Los valores serán de dos a siete, luego dos para dos, luego tendremos 253. En cuanto a la opacidad, voy a configurarlo 2.9 Aquí tenemos el contenedor de video Pero aquí tenemos el problema. Terminó detrás de algunos elementos. Para solucionar ese problema, necesitamos definir la propiedad index. Vamos a establecerlo a algún valor más alto. Digamos 100. Ahora el problema está arreglado. Se crea el contenedor de video, está estilizado Siguiente, voy a seleccionar video I, este elemento aquí Seleccionemos Video y definamos su ancho. Va a ser de 90 m. En cuanto a la altura, voy a establecer la altura en O. Además de eso, necesitamos seleccionar el video en sí. Me refiero a este elemento aquí, vamos a seleccionarlo usando nombre de etiqueta y fijémoslo con altura al 100% En este caso, con altura al 100% En este caso, ocupará el 100% del con height de su elemento padre. Ahora aquí tenemos el video. Lo siguiente que voy a hacer es colocarlo en el centro del contenedor. Para hacer eso, voy a usar libros de lino. Necesitamos Display Flex, luego Justify Content center y el centro de líneas de pedido. Ahora como puedes ver, el video se coloca en el centro de la página. A continuación, voy a agregar poca sombra al video. Usemos sombra de caja. Voy a insertar aquí los siguientes valores. Necesitamos cero, luego uno Ram. Diez Ram como el color. Voy a usar RGBA. Los valores serán 2052, luego uno a nueve también, la opacidad Voy a 32.7 Como pueden ver, el video tiene bonito y genial efecto de sombra Después de eso, voy a tomar de la envoltura de controles. Vamos a establecer con el 100% entonces voy a poner la posición a absoluta. A continuación voy a definir la posición izquierda, va a ser cero. En cuanto a la posición inferior, voy a ponerla dos -5.5 m, el envoltorio de controles y el dup abajo abajo Ocurre porque necesitamos posición relativa para el video. Ahora como puedes ver, el envoltorio de controles se posiciona correctamente. Para poder ver mejor, voy a añadir aquí algún color de fondo temporal. Digamos que lees aquí, tenemos el envoltorio de controles. Muy bien, vamos a deshacernos de este color de fondo. Lo siguiente que voy a hacer es encargarme de la línea de tiempo del video. Seleccionemos este elemento. Voy a establecer la posición absoluta. Entonces voy a establecer con 100% En cuanto a la altura, va a ser 0.7 Ram. Entonces voy a poner cursor a puntero. También, para poder mostrar este elemento, voy a utilizar de nuevo, algún color de fondo temporal. Vamos a ponerlo en rojo. Aquí tenemos la línea de tiempo del video. A continuación tenemos que tomar del área de avance. Voy a deshacerme de este color desde aquí. Y después voy a seleccionar área de progreso. Necesitamos altura, va a ser 0.3 Ram. Entonces necesitamos su color de fondo. Voy a usar color RGBA. Va a ser de color blanco, pero con menor opacidad, 0.6 Aquí tenemos el área de progreso A continuación voy a encargarme de los elementos span. Me refiero a este elemento span aquí, que se coloca dentro del área de progreso, voy a seleccionar área de progreso, seguido de la T. Vamos a establecer posición en absoluto. Entonces necesitamos posición relativa para el elemento padre, que es el área de progreso. Después de eso, voy a definir propiedades en la parte superior izquierda. este momento voy a un tramo de línea en el centro del área de progreso. Para eso voy a poner en posición a -2.5 frame. Entonces necesitamos posición izquierda, va a ser 50% Para poder centrar el elemento perfectamente, necesitamos transformar la función translate x con el valor -50% Siguiente Voy a cambiar el color Va a ser 333 y además definir el tamaño de la fuente. Voy a ponerla en 1.3 Ram. Aquí tenemos el elemento Pan. A continuación, voy a encargarme de la barra de progreso. Sigamos adelante y seleccionemos Barra de progreso. Voy a definir un ancho. Vamos a establecerlo en 50% por un tiempo. Entonces la altura va a ser del 100% voy a cambiar el color de fondo. Va a ser 2289. Es de color azul. Aquí tenemos la barra de Progreso. Siguiente Voy a del círculo de la barra de progreso. Voy a crear este círculo usando antes el elemento que necesitamos aquí, barra de progreso, seguido de los cuatro, el elemento voy a establecer contenido en vacío. A continuación voy a establecer dentro de la altura, ambos a 1.3 m. entonces necesitamos radio de borde 50% Porque vamos a crear el círculo y también cambiar el color de fondo, voy a usar el mismo color azul. A continuación, necesitamos posición para poder mostrar el elemento. La posición va a ser absoluta. Necesitamos posición relativa para el elemento power. Entonces la posición de dos va a ser del 50% Entonces necesitamos la posición correcta. Voy a ponerla a cero. Entonces para centrar el elemento verticalmente, necesitamos transformar traducir Y -50% Ahora el círculo debería ser visible Aquí lo tenemos. Muy bien, Siguiente voy a encargarme de los controles de video. Sigamos adelante y seleccionemos los controles de video. Necesitamos controles en el contenedor. En primer lugar, definamos el ancho. Va a ser 100% Entonces voy a alinear elementos. Me refiero a artículos flexibles usando libros flexibles. Necesitamos Display flex. A continuación, necesitamos el centro de líneas de pedido para centrar los artículos flexibles verticalmente. Y además, voy a crear espacio entre los elementos flex. Usando el espacio entre, me refiero justificar el espacio de contenido entre. Vamos a comprobar el resultado. Como puede ver, los controles están alineados. A continuación, voy a crear algo de espacio dentro del elemento usando padding. El acolchado va a ser un Ram en la parte superior e inferior y dos Ram en los lados izquierdo y derecho. Además, voy a cambiar el color de fondo. Va a ser RGBA, color negro con la opacidad 0.5 Bien, así que aquí tenemos controles de video A continuación voy a encargarme de las opciones aquí. Tenemos tres opciones, me refiero a opciones del lado izquierdo. Entonces tenemos opciones en el centro y opciones en el lado derecho. Espero que los recuerdes desde aquí. Opciones a la izquierda. Entonces tenemos centro de opciones y opciones correctas. Sigamos adelante y seleccionemos Opciones. Voy a configurar display a flex. Entonces voy a definir el ancho para cada opción. Voy a dividir 100% por tres para asignar a cada elemento el ancho par. Para eso luego calculamos la función, nos permite hacer algunos cálculos Como dije, necesitamos dividir al 100% por tres. Entonces voy a alinear elementos en el centro, particularmente usando align items center. Muy bien, después de eso voy a seleccionar segundo elemento de opciones y el tercer elemento porque necesitamos alguna alineación individual para esas opciones, voy a seleccionar opciones hijo dos. Necesitamos aquí justificar el centro de contenido. Entonces dupliquemos este código, cambiemos el selector hijo. Necesitamos tres. En cuanto al valor de la propiedad justify content, va a ser flex. Ahora como puedes ver, las opciones están perfectamente alineadas. Ahora tenemos que encargarnos de los botones. Vamos a seleccionar el botón, me refiero al botón Opciones, voy a establecer dentro de la altura a, entonces tenemos que deshacernos del borde predeterminado desde la parte inferior. Pongamos frontera a ninguno. Siguiente Voy a deshacerme del color de fondo predeterminado. Voy a establecer el color de fondo en transparente. Y luego cambiar el color del texto. Va a ser blanco. Por último, necesitamos cursor para ser puntero. Bien, ahora como puedes ver los botones, los íconos se ven bastante bien. A continuación voy a seleccionar elementos. Necesitamos opciones. Voy a aumentar el tamaño del teléfono, digamos que a 1.9 m. Muy bien, vamos. Pero a continuación voy a encargarme del elemento input, que es un rango del volumen. Voy a seleccionar Opciones de entrada. Voy a definir la altura. Va a ser 0.4 Ram, entonces el ancho va a ser 7.5 Además, necesitamos algo de espacio en el lado derecho usando margen, ¿verdad? Digámoslo a un Ram. Creo que el elemento input, el rango del volumen. Bastante agradable. A continuación, tenemos que encargarnos de los elementos de lapso de temporizador de video. Sigamos adelante y seleccionemos Línea de tiempo de video. Necesitamos elemento span. Vamos a establecer el color en blanco. Como puede ver, los elementos span se volvieron blancos. Necesitamos, de las opciones de velocidad, voy a opciones de velocidad, definamos ancho. Va a ser 9.5 Ram. Entonces necesitamos posición para ser absolutos. Posición relativa para los elementos padre. En este caso, el padre es un contenido de reproducción, necesitamos aquí la posición relativa. Entonces necesitamos definir la posición inferior para las opciones de velocidad. Va a ser en cuanto a la posición izquierda, voy a ponerla en menos cuatro Ram. Entonces voy a cambiar el color de fondo. Va a ser blanco aquí tenemos las opciones de velocidad. Lo siguiente que voy a hacer es hacerlo ligeramente redondeado. Vamos a establecer el radio de borde 2.4 ejecutar. Bien, eso es todo. Sobre las opciones de velocidad, el desarrollo siguiente, necesitamos cuidar esos elementos de texto, me refiero a los deeps Voy a seleccionar Opciones de Velocidad, seguido del desarrollo. Vamos a establecer el tamaño del teléfono en 1.4 Ram. Entonces voy a crear algún espacio dentro del desarrollo. Digamos pudín, 2.5 Ram encima. Entonces necesitamos cero en el lado derecho, 0.5 en la parte inferior y 1.5 Ram en el lado izquierdo. Entonces usa de nuevo, más cerca 0.2 Bien, Ahora las opciones de velocidad se ven mucho mejor. A continuación tenemos que activar una de las opciones de velocidad. En realidad, voy a hacer que este activo sea normal. La opción de velocidad predeterminada que voy a agregar al tercer desarrollo que es normal va a ser opción activa. Entonces voy a seleccionar aquí opción activa. Cambiemos el color de fondo. Va a ser el color azul que usamos recientemente. Entonces necesitamos que el color sea blanco. Bien, así como pueden ver tenemos aquí opción de velocidad por defecto agradable y genial, que es normal. Bien, Lo último que voy a hacer con los controles es colocar esos íconos perfectamente en el centro. Me refiero al centrado vertical como ves, no están perfectamente centrados Para ello, voy a seleccionar aquí Opciones y luego Opciones Girar. Voy a establecer W y altura 100% Entonces voy a usar la altura de línea. Voy a configurarlo para que se pliegue. Ahora como puede ver, el problema está arreglado. Bien, así que lo único que voy a hacer en este video es encargarme del botón X de cierre. Se debe colocar aquí. Sigamos adelante y seleccionemos PTM. En realidad, necesitamos aquí elemento, me refiero al icono. Voy a poner posición a absoluta. Entonces necesitamos posicionarnos para ser -6% La posición correcta va a ser cero Además, voy a aumentar el tamaño de la fuente en 3,022.2 Ram Y luego hacer punto del cursor. Bien, así que eso es todo. Hemos terminado de peinar el video, se ve bastante bien. A continuación tenemos que hacer que funcione para eso. Pasemos a la siguiente conferencia. 34. Hacer el juego / pausar el trabajo de Button: En la conferencia anterior hemos terminado de diseñar el reproductor de video y ahora tenemos que hacerlo funcionar. Para eso, voy a usar Javascript. Pasemos al código VS y abramos script o archivo JS. Voy a insertar nuevos comentarios para el video. Entonces voy a seleccionar un par de elementos diferentes. El primero va a ser contenedor de video. Voy a seleccionar este elemento usando el método selector de consultas. Necesitamos especificar aquí el nombre de la clase, contenedor de video. A continuación, voy a seleccionar el propio video. Me refiero al archivo de video. Llamemos a video principal variable. Y seleccione este elemento usando el nombre de la etiqueta. Hemos seleccionado este elemento aquí, Video también, voy a crear otra variable y va a ser play BTN Seleccionemos este elemento que necesitamos aquí, nombre de clase, pose, y también tenemos que elemento insider porque es un teléfono, también micrófono. Bien, hemos seleccionado tres elementos diferentes, el contenedor de video, el video en sí, y también el botón de reproducción. Ahora tenemos que agregar un oyente de eventos al botón de reproducción con evento de clic Una vez que hagamos clic en el botón de reproducción, el video debería reproducirse. Entonces en el siguiente clic debería. Voy a agregar oyente de eventos a la obra BTN. Especificemos aquí el evento click. Además, voy a instituir una función de devolución de llamada. Esta función se ejecutará una vez que hagamos clic en el botón. Tenemos que verificar si el video es post o no. Si lo es, significa que el video no se está reproduciendo. Si el video es post, debería comenzar a reproducirse. Necesitamos si declaración en que voy a insertar la siguiente condición. Necesitamos post de video principal. Es una propiedad incorporada en el script Java. Si es cierto, entonces deberíamos reproducir el video. Para eso, voy a usar la función incorporada que se llama arcilla. Bien, Siguiente necesitamos L declaración en la que tenemos que publicar el video. Necesitamos método llamado post. Bien, vayamos al navegador y verifiquemos. Haga clic en el botón. Como puedes ver, el video se está reproduciendo. Ahora, una vez que haga clic en el botón, entonces se detendrá. Bien, así que todo funciona bien. A continuación tenemos que cambiar el icono. O sea, si se está reproduciendo el video, entonces deberíamos mostrar aquí el botón de pose. Y una vez que publiquemos el video, entonces deberíamos volver aquí el botón de reproducción. Tenemos que reemplazar los botones, me refiero a los íconos. Para eso, voy a agregar incluso oyente al video principal El evento se va a jugar. Además, voy a agregar aquí la función de devolución de llamada. Se ejecutará una vez que se reproduzca el video. Si se está reproduciendo el video, entonces tenemos que reemplazar la clase del ícono del teléfono. Necesitamos lista de platina, entonces necesitamos usar el método replace Tenemos que sustituir a la clase actual que es una obra de teatro. Tenemos que reemplazarlo con poste FA. Cambiará el icono. Necesitamos lo mismo para el evento pose que necesitamos aquí. Entonces voy a agregar aquí la obra de la FAA Bien, vamos a comprobar si funciona. Una vez que hagamos clic, entonces se reproducirá el video y también se cambia el icono. Entonces como puedes ver, todo funciona a la perfección. Bien, eso es todo por ahora. Pasemos a la siguiente conferencia. 35. Actualización de la barra de progreso: Bien, en la conferencia anterior, hemos programado el botón de reproducción. Una vez que haga clic en él, entonces el video comenzará a reproducirse. También cambiará el icono. Entonces si hago clic en el botón Publicar, entonces el video se detendrá. Todo funciona perfectamente hasta ahora. A continuación, tenemos que encargarnos de la barra de progreso. En este momento tiene default con el 50% tenemos que cambiarlo, y tenemos que actualizar el ancho de la barra de progreso de acuerdo al progreso del video. Volvamos al expediente de Javas. En primer lugar, voy a seleccionar barra de progreso. Vamos a crear una nueva variable. Va a ser barra de progreso. Voy a seleccionar este elemento usando, nuevamente, el método selector de consultas. Voy a especificar aquí el nombre de la clase, barra de progreso. A continuación, voy a cambiar el ancho de la barra de progreso. Como dije ahora mismo tiene 50% y voy a hacer que sea cero. Como puede ver, el ancho de la parte de progreso es cero. En realidad, antes de que el elemento terminara fuera del reproductor de video, voy a cambiar la posición. este momento tiene la posición correcta puesta a cero y voy a hacerla -1.3 m. Ahora el problema está arreglado A continuación, voy a agregar un oyente de eventos al video principal Y el evento va a ser actualización de tiempo. El evento de actualización de tiempo se activa periódicamente a medida que avanza el tiempo de reproducción de los videos Voy a agregar oyente de eventos al video principal. Como dije, el evento va a ser actualización de tiempo. Necesitamos aquí la función de devolución de llamada. Se va a ejecutar una vez que avance el tiempo de reproducción de los videos Voy a usar la estructuración y agarrar dos propiedades, tiempo actual y duración del objeto de evento. Aquí necesitamos objetivos. Y voy a colocar aquí objeto evento como argumento. Esta línea de código extrae dos propiedades, tiempo actual y duración del objeto objetivo de pensamiento. En este contexto, target representa el elemento video, en este caso video principal. hora actual representa el tiempo de reproducción actual del video en segundos. Y duración representa la duración total del video, también en segundos. Voy a mostrar esas dos propiedades en consola. Insertemos aquí la hora actual y la duración. Entonces voy a ir al navegador inspeccionar la página, comprobar ficha consola. Una vez que haga clic en el botón de reproducción, entonces verá aquí la hora actual que se muestra en segundos. Y también tenemos aquí la duración total, tiempo total del video. Bien, volvamos al expediente de Charles. Voy a deshacerme de esta línea de código. Lo siguiente que voy a hacer es definir el valor porcentual de la parte de progreso. Para ello, necesitamos crear nueva variable. Voy a llamarlo persona. Será igual al tiempo actual dividido por duración. Tenemos que multiplicarlo por 100. Esta línea calcula el porcentaje del video que se ha reproducido. Divide el tiempo actual por la duración y multiplica el resultado por 100 para convertirlo en un valor porcentual Este valor representa hasta qué punto ha progresado la reproducción de video Ahora tenemos que agregar este valor al estilo de la barra de progreso. Para eso, tenemos que seleccionar Barra de progreso. Entonces necesitamos propiedad de estilo seguido por el ancho. Entonces voy a abrir, luego voy a abrir cadenas de plantilla. Tenemos que pasar aquí valor porcentual que acabamos de definir. Necesitamos calibraceisn seguido del signo porcentual. Esta línea actualiza el ancho de un elemento de barra de progreso para representar visualmente el progreso del video. Establece la propiedad width del estilo CSS de barras de progreso al valor calculado de la persona, seguido del signo de porcentaje. Esto hará que la barra de progreso crezca o se encoja. A medida que se reproduce el video, o seis, todo está listo para funcionar. La barra de progreso. Si hago clic en el botón Reproducir, entonces la barra de progreso se actualizará en consecuencia, así que todo funciona bien. Bien, vamos a hablar de este video, pasemos al siguiente. 36. Saltar videos hacia atrás y hacia adelante: En la conferencia anterior, hemos programado la barra de progreso. Una vez que comencemos a reproducir el video, la barra de progreso se actualizará la barra de progreso se actualizará automáticamente a medida que avance el video Lo siguiente que voy a hacer es programar esos botones de saltar hacia adelante y hacia atrás. Si echamos un vistazo al proyecto terminado y hacemos clic en los botones hacia atrás y hacia adelante, como puedes ver, funcionan. El video se vuelve a unir. Vamos al archivo geos y seleccionemos dos elementos, el fonomiconsan Los botones saltan hacia adelante y saltan hacia atrás. Entonces voy a crear variable y voy a llamarla saltar hacia atrás. Voy a seleccionar el elemento usando el método selector de consultas. Necesitamos aquí saltar hacia atrás seguido de los elementos. Duplicemos este código y cambiemos de atrás a adelante. Necesitamos, bien, ahora tenemos que agregar un oyente de eventos a ambos botones con click event Y luego tenemos que definir saltarse el video sumando y restando cierta cantidad de tiempo a la hora actual del Vamos a agregar un oyente de eventos hacia atrás. Necesitamos clic en el evento. Entonces tenemos que pasar aquí una función de devolución de llamada que se ejecutará una vez que hagamos clic en la parte inferior Como dije, tenemos que restar cierta cantidad de tiempo a la hora actual del video Por lo tanto, necesitamos su video principal, la hora actual. Necesitamos su tiempo actual entonces menos iguales, voy a restar 5 segundos. Ahora si empiezo a reproducir el video, entonces si hago clic en el botón hacia atrás, se saltará el video por 5 segundos. El botón de saltar hacia atrás funciona bien. A continuación tenemos que hacer lo mismo con el botón de saltar hacia adelante. Voy a duplicar este código. Tenemos que cambiar variable, va a ser saltar hacia adelante. Tenemos que agregar aquí 5 segundos nuevamente. Aquí restamos 5 segundos del tiempo de reproducción actual del video Reenrolla el video 5 segundos cuando se hace clic en el botón saltar hacia atrás De la misma manera, agregamos 5 segundos al tiempo de reproducción recurrente del video, y avanza rápidamente el video 5 segundos cuando se hace clic en este botón de mantener adelante Si comprobamos los resultados y hacemos clic en los botones de salto, entonces verás que todo funciona perfectamente bien. Veamos acerca de los botones mantener atrás y adelante. Pasemos a la siguiente conferencia. 37. Trabajando en Volume Button: En la conferencia anterior, tenemos programa los botones saltar hacia atrás y saltar hacia adelante. Si retomamos el video y luego hacemos clic en esos botones, ellos se saltarán el video. Funcionan bien. A continuación tenemos que encargarnos del botón de volumen. Si echamos un vistazo al proyecto terminado y retomamos el video, escucharás el sonido del video. Si hago clic en el botón de volumen, entonces silenciará el sonido del video. Y también se puede ver que se cambia el icono. Programaremos este botón en esta conferencia, y luego nos encargaremos del control deslizante. Bien, vamos al código VS. En primer lugar, voy a añadir aquí comentarios porque el código es cada vez más grande. Y para evitar confusiones, agreguemos los comentarios. Voy a agregar aquí barra de progreso, el final de la barra de progreso. Entonces tenemos aquí el botón Play Pose. En realidad tenemos que agregar esta línea aquí. Y luego tenemos los botones Skip. Bien, así que ahora es el momento de encargarse del botón de volumen. Voy a seleccionar volumen. Batson. Cambiemos el nombre. Entonces tenemos que cambiar el nombre de la clase va a ser volumen yo el teléfono, así icono. Entonces voy a agregar aquí nuevos comentarios. Voy a agregar un oyente de eventos al botón de volumen. Con evento click, necesitamos volumen BTN, agregar oyente de eventos. Voy a insertar tu evento click. Y también necesitamos la función callback, que se ejecutará una vez que hagamos clic en el botón de volumen Ahora tenemos que usar sentencia en la que voy a verificar el estado actual del botón de volumen. Dentro de la condición dentro del enunciado y luego lo explicaré. No necesitamos operador seguido de lista de clases PCN de volumen. Entonces voy a usar el método llamado contains. Voy a especificar aquí el nombre de la clase que es un volumen alto. Esta condición comprueba si el botón de volumen no tiene el volumen FA alto. La clase contiene método se utiliza para determinar si una clase está presente en el elemento. Si el botón no tiene la clase alta de volumen FA, significa que actualmente el volumen no está configurado al nivel más alto. Si esta condición es verdadera, entonces tenemos que establecer volume 2.5 Significa que establecemos la propiedad volume del elemento principal de video en 50% Next, necesitamos reemplazar el icono. Si esta condición es cierta, entonces tenemos que reemplazar el teléfono. Entonces icono necesitamos volumen lista de clases PTN reemplazar. Tenemos que pasar aquí FA volumen x marca. Este icono nos muestra que el sonido está silenciado. Ahora necesitamos este nombre de clase. Vamos a copiarlo y pegarlo aquí. Bien, después de eso, tenemos que usar la sentencia L en la que tenemos que poner el volumen del video a cero. Tenemos que silenciar el sonido. Necesitamos volumen principal de video. Debe ser igual a cero. Además, necesitamos reemplazar el icono que necesitamos aquí, volumen FA alto, luego una marca de volumen X. Déjame explicarte una vez más. Esta línea reemplaza la marca X de volumen de clase FA, que representa un icono de silencio, con volumen FA alto, que representa un icono de alto volumen. Esto actualiza visualmente el icono del bosón de volumen para indicar que el volumen se encuentra ahora en un nivel superior En cuanto a esta línea aquí, reemplaza la clase FA volumen alto FA volumen X marca. Actualizando visualmente el icono del botón de volumen para indicar que el volumen está silenciado. Vamos al navegador y comprobemos si funciona bien. Voy a reproducir el video, el sonido. Si hago clic en el botón volar, entonces silenciará el sonido y el icono cambiará. Como puedes ver, todo funciona bien. El botón de volumen está programado. A continuación, tenemos que encargarnos de este slider aquí para eso. Pasemos a la siguiente conferencia. 38. Trabajando en el regulador/control deslizante de volúmenes: En la conferencia anterior, hemos programado el botón de volumen. Ahora como dije, tenemos que encargarnos del control deslizante de volumen, este elemento de entrada aquí. Echemos un vistazo al proyecto terminado y reproduzca el video. Puede interactuar con el control deslizante y cambiar el volumen en consecuencia. Si arrastro este círculo hacia el lado izquierdo, entonces silenciará el video y el icono cambiará en consecuencia. Eso es lo que vamos a hacer en esta conferencia. Volvamos al código VS, seleccionamos los elementos de entrada, pero antes que nada, voy a cambiar los comentarios. Dejemos aquí volumen porque vamos a agregar el código del slider aquí también. Voy a dejar aquí solo volumen. Después voy a seleccionar elementos de entrada. Necesitamos deslizador de volumen. Voy a cambiar el nombre de la clase. Necesitamos que se vaya. Es la parte de las opciones en el lado izquierdo. Necesitamos left y luego input right, se selecciona el elemento. A continuación tenemos que agregar un oyente de eventos al elemento que necesitamos aquí deslizador de volumen, tenemos que agregar un oyente de eventos El evento va a ser entrada. Este evento se activa cada vez que cambia el valor del elemento de entrada. En este caso cuando el usuario interactúa con el control deslizante de volumen Voy a pasar tu entrada y luego necesitamos una función de error que se ejecutará una vez que ocurra el evento. Ahora voy a definir el volumen del video. Necesitamos volumen principal de video. Tenemos que agarrar el valor del objeto objetivo. Aquí necesitamos valor objetivo. Tenemos que multiplicarlo por uno. Y voy a explicarle por qué hacemos eso. Esta línea establece la propiedad volume del elemento principal de video al valor actual del control deslizante de volumen, que en este caso es apuntar para valorar la multiplicación por uno Esta conversión asegura que el valor se trate como un número, no como la cadena. A continuación, tenemos que usar la declaración if. Necesitamos si declaración con la siguiente condición. El video principal es igual a cero. Esta condición verifica si el volumen de videos está establecido en cero. Es decir, si está silenciado o no. Si el volumen está silenciado, entonces tenemos que actualizar el icono del botón de volumen para indicar silencio Si no está silenciado, necesitamos actualizar el icono para indicar volumen alto Necesitamos de nuevo, usar esas líneas. Necesitamos aquí esta línea de código. Y luego en la declaración L, necesitamos reemplazar la marca x con el icono de volumen alto. Voy a pasar esta línea de código aquí. Bien, finalmente voy a agregar aquí valor del control deslizante de volumen igual al volumen principal del video. Esta línea de código establece el valor del control deslizante de volumen para que coincida con el nivel de volumen actual del elemento principal de video. Esto asegura que la posición del control deslizante refleje visualmente la configuración de volumen actual cuando se carga la página o cuando se muestra el control deslizante por primera vez. Bien, vamos al navegador y comprobemos si todo funciona bien. Voy a reproducir el video. Entonces vamos a rastrear el control deslizante. En realidad, el control deslizante no funciona. Comprobemos el código. Podríamos tener un error en alguna parte de aquí. Necesitamos volumen principal de video. Olvidé escribir esta propiedad aquí. Ahora creo que el código debería funcionar. Vamos a revisar. Ahora, todavía tenemos algún problema. Volvamos al código VS. El problema es que nos falta aquí objeto de evento. Ahora creo que debería funcionar. Sí. Ahora bien, este deslizador funciona bien. Y podemos interactuar con él y cambiar el volumen en consecuencia. Bien, así que eso es todo sobre el volumen. Pasemos a la siguiente conferencia. 39. Control de opciones de velocidad: En la conferencia anterior hemos logrado controlar el volumen. Es decir, hemos programado el botón de volumen y también el control deslizante de volumen. Y ahora es el momento de seguir adelante y encargarse de las opciones de velocidad. Si echamos un vistazo al proyecto terminado y retomamos el video, podemos elegir desde aquí, cualquiera de la velocidad. Juguemos Dos X. Como puedes ver, el video se está reproduciendo más rápido. Lo mismo que tenemos con menor velocidad de tasa. El video se está reproduciendo en menor tasa. ¿Bien? Eso es, lo que vamos a hacer en esta conferencia. Vayamos al código VS. Voy a seleccionar dos elementos diferentes. El primero va a ser el botón de velocidad. Voy a seleccionar elemento es método de electrones de indagación. Especificemos aquí el nombre de la clase. Va a ser la velocidad de reproducción. Necesitamos aquí elemento span porque el Batson es un elemento spin Además de eso, voy a seleccionar opciones de velocidad. Aquí necesitamos opciones de velocidad. O sea, el desarrollo envoltorio este elemento aquí, necesitamos especificar el nombre de la clase y va a ser opciones de velocidad. ¿Bien? Entonces lo primero que voy a hacer es gestionar mostrar y ocultar las opciones de velocidad. Una vez que hacemos clic en el botón de velocidad, ahora mismo, las opciones de velocidad son visibles por defecto. En este momento las opciones de velocidad son visibles por defecto. Tenemos que cambiarlo. Voy a agregar click Eventos al botón de velocidad. En realidad, necesitamos aquí nuevos comentarios para las opciones de velocidad. Después voy a agregar un oyente de eventos al botón de velocidad con click event Además, necesitamos aquí una función de devolución de llamada que se ejecutará una vez que haga clic en el botón de velocidad Voy a agregar a Opciones de velocidad nueva clase con un método togal Voy a usar este nombre de clase en el archivo CSS y vamos a definir nuevos estilos para este nuevo nombre de clase. Voy a usar opciones de velocidad seguidas de la propiedad de lista de clases. Entonces como dije, necesitamos el método togal, necesitamos especificar aquí el nombre de la clase Voy a llamarlo show. A continuación, tenemos que ir al archivo CSS y seleccionar Opciones de velocidad con show de clase recién creado. En primer lugar, necesitamos ocultar las opciones de velocidad. Voy a poner la opacidad a cero y la visibilidad a oculta Entonces necesitamos esas dos propiedades con valores diferentes. opacidad va a ser una, pues la visibilidad va a ser visible también Para que el efecto sea más suave, solo hagamos la transición. Aquí necesitamos la opacidad. Entonces la duración va a ser de 0.15 segundos. Además, voy a añadir aquí está bien. Como puedes ver, las opciones de velocidad están ocultas. Ahora, una vez que haga clic en el botón, entonces se mostrarán. Bien, todo funciona bien. Lo siguiente que voy a hacer es ocultar las opciones de velocidad cuando hacemos clic en cualquier parte de la página, en el documento. Para ello, voy a agregar un oyente de eventos al documento Necesitamos un oyente de eventos con eventos de clic. Además, voy a insertar aquí una función de devolución de llamada. Voy a usar declaraciones al principio. Voy a insertar aquí la condición, y después la voy a explicar. Necesitamos objetivo no es igual a span. Entonces necesitamos la segunda condición con u operador. Va a ser para apuntar el nombre de la clase. No es igual al nombre de clase del elemento span. Me refiero a éste, símbolos materiales redondeados. Déjame explicarte lo que significa esta condición. Esta condición comprueba si el objetivo de elementos en los que se hace clic no es un elemento span o no tiene el nombre de clase Material symbols redondeado, en otras palabras Comprueba si el elemento clicado es algo distinto de un elemento span específico Con esa clase me refiero a nombre de clase, símbolos materiales redondos. Si esta condición es verdadera, entonces tenemos que eliminar class Show de las opciones de velocidad. Voy a agarrar este código y cambiar el método togal en remove Ahora si vamos al navegador mostramos las opciones de velocidad y luego hacemos clic en cualquier parte de la página, algo anda mal aquí. Verifiquemos la pestaña de la consola. El error dice que no se define como supongo que nos olvidamos de insertar aquí incluso objeto como parámetro Ahora el código debería funcionar. Vamos a mostrar las opciones de velocidad y luego hacer clic en cualquier parte de la página. Ahora todo funciona bien. Bien, lo siguiente que voy a hacer es lograr seleccionar esas opciones. Necesitamos seleccionar desarrollos que se coloquen dentro de las opciones de velocidad I wrapper, necesitamos seleccionar esas opciones aquí. Para eso, voy a crear nueva variable. Duplicemos este código. Voy a cambiar el nombre. Va a ser opciones de velocidad, artículos que necesitamos agregar aquí de tu. Siguiente Voy a mirar a través las opciones de velocidad, los desarrollos. Usemos aquí elementos de opciones de velocidad variable recién creados. Entonces necesitamos para cada método que nos permita iterar a través de la colección Voy a agregar aquí función de devolución de llamada que necesita un parámetro Va a ser opción, es un ítem actual a través del bucle. Voy a agregar un oyente par a la opción con evento click Entonces necesitamos aquí de nuevo una función de devolución de llamada. Este código itera a través de cada uno de los desarrollos seleccionados utilizando el método de forraje Para cada desarrollo, que representa una opción de velocidad de reproducción, configura un oyente de eventos de clic A continuación, tenemos que definir la velocidad de la reproducción. Según las opciones de velocidad clicadas. Necesitamos tu velocidad principal de reproducción de video. Se trata de una propiedad incorporada, en script Java. Debe ser igual a Dataset de opciones Do Speed. Definimos la velocidad de reproducción que es igual a la velocidad Option Dataset. Aquí estamos agarrando los valores de esos atributos. Como recuerdas, agregamos atributo de velocidad de datos a cada opción de velocidad con los valores adecuados, estamos accediendo a esos valores aquí. Nuevamente, dice esta línea, la propiedad de tasa de reproducción del elemento principal de video al valor almacenado en el atributo de velocidad de datos del elemento clicado La propiedad dataset le permite acceder a atributos de datos personalizados en elementos HTML. En este caso, se utiliza para almacenar los valores de velocidad de reproducción asociados a cada opción. Estoy hablando de esos valores aquí. Bien, lo siguiente que voy a hacer es cambiar la opción activa. Como sabes por defecto, la opción activa es normal. Agregamos clase al elemento HTML. Este elemento aquí. Puedes ver aquí la opción activa de clase. Tenemos que cambiar esta clase. Tenemos que eliminar esta clase de este elemento y agregarla al elemento clicked Para ello, necesitamos opciones de velocidad. Después tenemos que seleccionar elementos con opción de clase activa. Necesitamos aquí opción activa. Y tenemos que eliminar de la propiedad de clase, la opción activa de nombre de clase, y tenemos que agregarla a la opción click. Necesitamos lista de clases. La clase va a ser opción activa. Bien, creo que eso es todo ahora el código debería funcionar. Seleccionemos Opción. Juguemos el video. Y luego seleccione la opción Velocidad. Algo anda mal aquí. Comprobemos las opciones de velocidad de la pestaña de la consola, artículos. Ese forraje no es una función. Comprobemos esta línea de código Opciones de velocidad, artículos, forraje En realidad, aquí, todo parece correcto. Vamos a revisar las variables. Sí, necesitamos aquí selector de consultas, método All, porque estamos seleccionando cinco elementos diferentes. Ahora vamos a revisar los resultados. Vamos a reproducir el video Seleccione la opción de velocidad. Aún así no funciona. Ahora voy a revisar de nuevo el código. Creo que aquí todo parece estar correcto. Lo malo es que no estamos llegando hasta aquí. Cualquier error. Voy a verificar si el evento click funciona correctamente. Voy a correr a la consola, este elemento de aquí. Voy a hacer clic en la opción de velocidad y luego marcar Consola. No estamos consiguiendo aquí los resultados. Significa que el evento click no funciona aquí. A lo mejor las opciones de velocidad están acabando detrás de algunos elementos, por eso el evento click no funciona. Voy a intentar aquí sumando propiedad de índice z con algún valor más alto. Digamos diez. Vamos a comprobar si funciona. Ese era el problema. Ahora todo funciona bien. Podemos cambiar las opciones de velocidad sin ningún problema. Bien, así que eso es sobre las opciones de velocidad. Siento los últimos malentendidos, pero en realidad creo que no está Es bueno para ti, para los estudiantes, porque cuando escribas el código, te encontrarás con este tipo de situaciones. Muchas veces deberías saber cómo solucionar el problema, encontrar la caja, y así sucesivamente. Bien, eso es. Pasemos a la siguiente conferencia. 40. Modos de imagen en imagen y pantalla completa: En la última conferencia hemos programado las opciones de velocidad. Ahora tenemos que seguir adelante y encargarnos de esos dos botones. El primero es imagen en modo imagen. En cuanto al segundo, se trata de un modo de pantalla completa. Echemos un vistazo al proyecto terminado. Una vez que hagamos clic en la imagen en modo imagen, entonces llegaremos aquí esta pequeña ventana, podrás rastrear y soltar la ventana. Así es como funciona el modo imagen en imagen. En cuanto al modo de pantalla completa, si hacemos clic en el ciclo aquí, entonces se reproducirá el video. En modo de pantalla completa, puedes minimizar la ventana desde aquí, ¿de acuerdo? Entonces programaremos esos dos botones en esta conferencia. Pasemos al código VS. En primer lugar, voy a crear una nueva variable. Vamos a llamarlo imagen elijo pick PTN. Tenemos que seleccionarlo usando el método selector de consultas. Especificemos aquí el nombre de la clase. Pick in pick, seguido del panelment que necesitamos aquí. Pensamientos. A continuación, voy a crear aquí nuevos comentarios. En realidad, vamos a deshacernos de esta línea de código desde aquí. Necesitamos comentarios para imagen en modo imagen, voy a agregar un oyente de eventos a la imagen en imagen BTN la variable que acabamos Agreguemos aquí el oyente de imágenes con el evento click. Además, necesitamos aquí una función de devolución para poder reproducir el video en imagen En modo imagen, tenemos que usar una de las funciones integradas de Javas Se llama solicitar imagen en imagen. Tenemos que adjuntar este método al video principal. Como dije, necesitamos solicitar foto en imagen. Bien, vayamos al navegador y hagamos clic en este icono aquí. Como puedes ver, tenemos aquí pequeña ventana que puedes arrastrar. Y la imagen de ventana en modo imagen funciona perfectamente. Bien. Ahora es modo de pantalla completa. Gire, vayamos al código VS y creamos nueva variable. Voy a duplicar esta línea de código. Necesitamos BTN a pantalla completa y voy a cambiar aquí el nombre de la clase Necesitamos el elemento I de pantalla completa. Entonces voy a instituir nuevos comentarios para el modo de pantalla completa. En realidad, voy a agarrar este código. Vamos a pegarlo aquí y cambiar el botón que necesitamos aquí, Pantalla completa BTN cuanto al método en lugar del método request, necesitamos solicitar el método de pantalla completa. Ahora vamos al navegador y hagamos clic en el botón Pantalla completa. No funciona. aquí un error no se pueden leer las propiedades de. Ahora vamos a revisar el código. Pantalla completa, BTN, Comprobemos la variable que tenemos aquí un tipo Todo lo que necesitamos aquí, doble ls. Ahora debería funcionar. Vamos a hacer clic en el icono de pantalla completa. Y si, tenemos aquí el modo de pantalla completa. Funciona bien. Bien, eso es todo sobre los modos de imagen de imagen y pantalla completa, Ambos funcionan bien A continuación tenemos que encargarnos de la línea de tiempo del video. Pasemos a la siguiente conferencia. 41. Trabaja en la línea de tiempo de video: En la conferencia anterior, hemos programado los botones de imagen picturing y pantalla completa Ambos modos funcionan bien. Ahora tenemos que seguir adelante y encargarnos de la línea de tiempo del video. O sea, tenemos que hacer que el progreso sea parte dinámico. Y también tenemos que mostrar la hora actual del video y también la duración del video. Echemos un vistazo al proyecto terminado. Como pueden ver, aquí tenemos la duración del video. Si empezamos a reproducir el video, entonces la hora actual se mostrará como si haga clic aquí en cualquier parte. Después la barra de progreso, actualizaremos. Bien, eso es. Lo que vamos a hacer en esta conferencia. Vamos al código VS. Voy a seleccionar elemento llamado línea de tiempo de video. Vamos a crear variable y llamarlo línea de tiempo de video. Voy a seleccionar este elemento usando el método selector de consultas. Necesitamos especificar aquí el nombre de la clase. Va a ser la línea de tiempo de video. A continuación, voy a insertar los comentarios para la línea de tiempo de video. Después voy a agregar un oyente de eventos a la línea de tiempo del video con un evento click Quiero recordarles donde este elemento que tenemos en el archivo HTML aquí está la línea de tiempo del video. Envuelve área de progreso. Voy a agregar el oyente de eventos a la línea de tiempo del video. Usemos ese método de escucha de eventos y luego especificemos aquí el evento click A continuación necesitamos la función de devolución que se ejecutará una vez que haga clic en la línea de tiempo Voy a definir nueva variable que va a ser timeline con. Voy a hacer que sea igual al ancho del cliente de la línea de tiempo de video. Esta línea calcula el ancho del elemento de línea de tiempo de video y lo almacena en una variable. Este ancho representa el ancho total de la línea de tiempo, que es necesario para determinar dónde hizo clic el usuario en relación con la línea de tiempo Para que quede claro, voy a ejecutar a la consola esta variable de ancho de línea de tiempo. Inspeccionemos la página. En realidad, voy a adjuntar esta ventana a la parte superior actual. Si hago clic en la línea de tiempo del video, entonces obtendremos 900, son píxeles. Todo el ancho de la línea de tiempo del video es de 900 píxeles. Nuevamente, la propiedad width del cliente calcula el ancho del elemento. Bien, vamos a deshacernos de esta línea de código A continuación, voy a definir la hora actual del video. Necesitamos video principal tiempo actual. Debería ser igual a la siguiente expresión que voy a usar aquí, offset x. Voy a explicar esas cosas en un momento. Necesitamos su línea de tiempo con la variable que aquí definimos. A continuación tenemos que multiplicarlo a la duración del video principal. Déjame explicarte lo que pasa aquí. Esta línea calcula y establece el tiempo de reproducción actual del elemento principal de video en función de dónde hizo clic el usuario en la línea de tiempo Así es como funciona. Hacer desplazamiento X representa la posición horizontal del evento click dentro del elemento de línea de tiempo de video. Indica dónde hizo clic el usuario a lo largo de la línea de tiempo. Voy a correr al punto de la consola. Offset X. En realidad tenemos que pasar su parámetro. Si hago clic en la línea de tiempo del video, entonces obtendremos la posición donde el usuario haga clic a lo largo de la línea de tiempo. Estamos llegando hasta aquí, las posiciones exactas en píxeles. Bien, a continuación tenemos aquí offset x dividido por línea de tiempo. Con esto se calcula la posición relativa del clic dentro de la línea de tiempo como una fracción del ancho total de la línea de tiempo. Esta fracción oscila 0-1 A continuación tenemos multiplicación por duración principal del video Representa la duración total del video en segundos. El resultado del cálculo determina la posición exacta de reproducción en el video. Establece la propiedad de tiempo actual del video principal a esa posición, permitiendo efectivamente al usuario buscar el punto de clic en el video. Si corro al video principal de la consola, hago la hora actual, entonces si vamos al navegador y damos click a lo largo de la línea de tiempo, obtendremos la hora actual del video en segundos. Bien. A continuación voy a crear nueva variable. Voy a llamarlo tiempo de video. Vamos a seleccionar elemento usando el método selector de consultas. Voy a especificar aquí el nombre de la clase, hora actual. Te voy a recordar dónde está este elemento. Tenemos aquí la hora actual. Es un elemento span. Por defecto tenemos ceros aquí. Ahora tenemos que mostrar la hora actual del video en este elemento. Tenemos que mostrar la hora actual aquí. Para eso, necesitamos insertar la hora actual del video, el texto interno es igual a la hora actual. Vamos al navegador y comencemos a reproducir el video. Como pueden ver, estamos llegando aquí segundos. Pero tenemos que formatear este valor. No lo necesitamos. Necesitamos mostrar la hora actual en el formato como lo tenemos aquí en la versión terminada. Necesitamos este formato aquí. Para hacer eso, voy a volver al código VS. Voy a crear una nueva función. En realidad voy a insertar esta función aquí. Llamemos a la función de formato de tiempo. Va a ser una función de flecha. Voy a insertar aquí un parámetro. Va a ser el momento. Lo primero que voy a hacer es definir segundos. Necesitamos nueva variable llamada segundos. Va a ser igual a t piso y tenemos que insertar aquí módulo de tiempo 60. Esta línea calcula los segundos restantes tomando el módulo del valor de tiempo. Con 60, asegura que segundos contenga un valor 0-59 De la misma manera necesitamos definir los segundos, vamos a duplicar esta línea de código que necesitamos aquí Minutos, tenemos que dividir el tiempo por 60, entonces necesitamos el módulo 60. Esta línea calcula el número de minutos dividiendo el valor de tiempo por 60 y tomando el valor de piso. El funcionamiento del módulo se utiliza nuevamente para asegurar que minutos sean 0-59 A continuación, tenemos que definir las horas. Voy a duplicar esta línea de código. Necesitamos horas, luego matemáticas para el tiempo dividido por 3,600 Ya no necesitamos aquí Módulo 60, esta línea calcula el número de horas dividiendo el valor de tiempo por 3,630 600 significa que 60 segundos se multiplican por 60 minutos. Da el número total de horas y el valor de tiempo. A continuación, debemos asegurarnos que los segundos, minutos y horas de un solo dígito estén formateados con un cero inicial para obtener consistencia en la pantalla. Por ejemplo, si los segundos son menos de diez, deberíamos agregarle un cero inicial. Para hacer eso, voy a segundos iguales a 2 segundos, entonces la condición es menor a diez. Necesitamos su signo de interrogación. Si esta condición es verdadera, entonces necesitamos aquí las cadenas de plantilla cero seguidas de los segundos. Si es falso, entonces solo necesitamos segundos. Necesitamos lo mismo para los minutos y horas también. Duplicemos esta línea de código dos veces aquí, minutos y luego horas. Bien, lo siguiente que voy a hacer es usar sentencia if, donde tenemos que verificar si las horas son iguales a cero. Necesitamos estado de cuenta y tenemos que revisar horarios. Necesitamos horas iguales a cero. Si esta condición es cierta, entonces tenemos que devolver el siguiente resultado que necesitamos aquí, minutos y segundos. Entonces tenemos que regresar. Tomemos este código de aquí. Pégalo aquí. Y voy a agregar aquí horas con columna, ¿de acuerdo? La siguiente sentencia condicional comprueba si el valor de horas es igual a cero. Si lo es, significa que el tiempo es menor a 1 hora. Y la función devuelve una cadena en el formato minutos y segundos. Si las horas son mayores a cero, significa que hay horas en el valor de tiempo. Y la función devuelve una cadena en el formato horas, minutos y segundos. Ahora una vez que la función esté lista, podemos formatear la hora actual. Voy a llamar a la función aquí como argumento voy a insertar aquí, hora actual. Entonces ahora el tiempo actual debería ser visible. Juguemos el video. Vaya, tenemos aquí error. El nuestro no está definido. Vamos a revisar el estado de cuenta. Sí, tenemos aquí un error tipográfico. Necesitamos horas sin. Cometí este error varias veces. Ahora, vamos a comprobar. Sí, tenemos aquí la hora actual de actualización. Bien, sentémonos sobre la hora actual. A continuación tenemos que encargarnos de la duración del video. Volvamos al código VS. Voy a crear nueva variable. Vamos a llamarlo duración del video. Voy a seleccionar este elemento usando, nuevamente, el método selector de consultas. Especificemos aquí el nombre de la clase, la duración del video. Tenemos este elemento al lado de la hora actual, y el separador aquí es la duración del video. Voy a agregar un oyente de eventos a la duración del video. Lo siento, al video principal. El evento va a ser cargado de datos. El evento de datos cargados se dispara cuando el video ha cargado suficientes datos para comenzar la reproducción. A continuación, necesitamos interferir en una función de devolución de llamada. Esta función se ejecutará una vez que se carguen los datos suficientes para comenzar la reproducción. Aquí tenemos que definir el contenido de la duración del video que necesitamos. Aquí en nuestra propiedad de texto, va a ser la duración del video principal. Bien, vamos a revisar los resultados. Como pueden ver, tenemos aquí los segundos totales. Tenemos que transformarlo al mismo formato que usamos para el momento actual. Para ello, solo necesitamos llamar a la función format time. Y tenemos que pasar como argumento la duración del video principal. Si verificamos los resultados, entonces verá que tenemos aquí la hora actual mostrada en el mismo formato que usamos para la hora actual. Bien, eso es todo por ahora. Pasemos a la siguiente conferencia. 42. Crea una barra de progreso arrastrable: En la conferencia anterior, hemos trabajado en la línea de tiempo del video. Es decir, la hora actual del video y también la duración del video. Ambos funcionan bien y se están actualizando una vez que reprodujimos el video. A continuación tenemos que encargarnos de la barra Progreso. Tenemos que crear la barra de progreso arrastrable. También, tenemos que encargarnos de este tiempo. Aquí, tenemos que actualizar la hora actual. Una vez que arrastramos la barra Progreso, veamos los proyectos terminados. Como pueden ver, puedo arrastrar la barra de Progreso y también la hora actual se está actualizando en consecuencia. Tenemos que crear esto. De hecho, en este video, vayamos al código VS. Lo primero que voy a hacer es agregar un oyente de eventos a la línea de tiempo del video El evento va a ser un hito. El evento hito se activa el momento en que se presiona el botón del mouse sobre un elemento. Es más específico a la acción de presionar el botón del mouse sin requerir que se suelte el botón. Este evento se utiliza a menudo para detectar el inicio de una interacción del usuario, como comenzar a arrastrar un final. Además, este evento ocurre antes del evento click si el mouse no se aleja del final. La diferencia entre el evento click y el evento mousedown es la siguiente El evento click se activa después de una acción de clic completa, que implica presionar y luego soltar el botón del mouse sobre un elemento. Requiere que se produzca tanto el evento mouse down como mouse up en el mismo elemento. Además, el evento click se usa generalmente para acciones que deben ocurrir una vez que un usuario ha seleccionado o activado un elemento como presionar el botón para enviar formulario y así sucesivamente. Ahora voy a pasar aquí una función de devolución de llamada. Entonces necesitamos de nuevo la línea de tiempo de video con el oyente de eventos. En este caso el evento va a ser el movimiento del ratón. Ahora estamos agregando un oyente de imágenes para el evento de movimiento del mouse Ahora tenemos que llamar a la función que se llama Dale barra de progreso. En este momento esta función aún no está creada, pero la crearemos en un momento. Estamos agregando un oyente de eventos para el evento mouse move. Cuando el usuario mueve el mouse, se llama a la función de barra de progreso arrastrable Actualizará la barra de progreso y el tiempo del video a medida que el usuario arrastre Voy a crear esta función. Vamos a crear una nueva variable y luego usar este nombre aquí. Necesitamos aquí un objeto de evento, luego la función de flecha. Lo primero que voy a hacer es agarrar esas dos líneas de aquí. Como recuerdas, esta línea de código almacena el ancho del elemento de línea de tiempo de video. cuanto a la segunda línea de código, calcula y actualiza la hora actual del video en función de dónde hace clic el usuario en la línea de tiempo. Además de esas dos líneas de código, voy a pasar aquí, ancho del estilo de barra de progreso igual a offset x. y necesitamos aquí píxeles. Ahora encontramos el ancho de la barra de progreso. Desplazamiento x proporciona el desplazamiento horizontal del puntero del mouse entre el evento y el borde de colocación del nodo de destino. Establecer efectivamente la barra de progreso hasta el punto en el que el usuario haga clic o arrastre Ahora si vamos al navegador y a la barra de progreso, funcionará. Como puedes ver, ahora mismo somos capaces de arrastrar la barra de progreso. Estoy presionando el botón del mouse, pero si solo vuelo el cursor sobre la línea de tiempo del video, entonces podré arrastrar la barra de progreso No necesitamos eso. No necesitamos arrastrar la barra de progreso al pasar el mouse, necesitamos arrastrar la barra de progreso una vez que hagamos clic en la línea de tiempo del video Para solucionar ese problema, voy a duplicar este código. Necesitamos cambiar la línea de tiempo de video en contenedor de video. Este elemento envuelve todo el contenido del video. Ahora voy a eliminar el oyente de eventos de la línea de tiempo del video Bien, ahora el problema debería ser arreglado. En realidad, necesitamos el mouse arriba y el mouse abajo. Bien, ahora vamos al navegador y verifiquemos los resultados. Ahora, estoy presionando el botón del mouse, pero una vez que suelte el botón y simplemente pase el cursor sobre la línea de tiempo del video, entonces no podremos rastrear la barra de progreso Bien, entonces el problema está arreglado. A continuación, tenemos que actualizar la hora actual del video. Para eso, voy a usar esta línea de código. Vamos a insertarlo aquí. Tenemos que agregar aquí video principal. Ahora bien, si hago un seguimiento de la barra de progreso, verás que la hora actual se está actualizando en consecuencia. Funciona bien. Bien, continuación tenemos que encargarnos de la hora actual. Una vez que rastreamos la barra de progreso, quiero decir, tenemos que trabajar en este elemento aquí. Como recuerdas, es un elemento span Dentro del área de progreso, tenemos que cuidar este elemento. Voy a agregar un oyente de eventos a la línea de tiempo del video. El evento va a ser el movimiento del ratón. Entonces necesitamos objetos de evento seguidos de la función de devolución Voy a seleccionar este elemento. Tenemos que crear la variable, va a ser tiempo de progreso. Necesitamos aquí seleccionar documento. Especificemos aquí el elemento llamado área de progreso. Entonces necesitamos elemento span. Después de eso, voy a definir offset x del elemento. Vamos a crear offset x. Y debería ser igual a offset X. Obtenemos aquí el desplazamiento horizontal del puntero del mouse entre el evento y el borde pudín del elemento objetivo, que es la línea de tiempo de video A continuación tenemos que definir la posición izquierda del tiempo de progreso. Necesitamos aquí el estilo de tiempo de progreso a la izquierda. Va a ser offset X, y necesitamos pixeles. Ahora establecemos la propiedad CSS izquierda del elemento progress in al valor de desplazamiento X. Mover la vista previa de tiempo para alinearla con el cursor del mouse en la línea de tiempo. Si voy al navegador y vuelo el cursor sobre la línea de tiempo del video, puedes ver que el elemento span se mueve a lo largo de la línea de tiempo del video A continuación, tenemos que definir el ancho de la línea de tiempo. Voy a copiar esta línea de código. Ahora tenemos que definir la hora actual del elemento span. Vamos a crear una variable. Va a ser el tiempo de la barra de progreso. Voy a corrab este valor aquí. Ahora calculamos el tiempo correspondiente a la posición actual del mouse de la línea de tiempo. Esto lo hace dividiendo el mouse de posición x set por el ancho total de la línea de tiempo, dando una fracción que representa dónde está el mouse en la línea de tiempo. Esta fracción se multiplica entonces por la duración total del video principal para obtener el tiempo correspondiente en el video. Ahora tenemos que formatear el tiempo y mostrarlo. Voy a adjuntar a la propiedad de texto interno de tiempo de progreso. Entonces necesitamos formato de tiempo. Voy a pasar por aquí progreso a tiempo parcial. Bien, vamos al navegador. Como pueden ver, una vez que pase el cursor sobre la línea de tiempo del video, el tiempo se está actualizando Pero aquí tenemos poco problema. Por defecto, necesitamos ocultar el tiempo aquí y también el círculo. Entonces, una vez que pasemos el cursor sobre la línea de tiempo del video, deberían aparecer Necesitamos CSS. Voy a seleccionar ambos elementos. Área de progreso, span. También, necesitamos barra de progreso con antes del elemento. Voy a ocultarlos usando display. Luego al pasar el cursor, la línea de tiempo de video pasa el cursor sobre la línea. Después, el área de progreso abarca. Entonces necesitamos aquí barra de progreso. Antes de ahora necesitamos volver a mostrar los elementos usando el bloque de visualización. Como puedes ver ahora mismo, el círculo y el elemento span, ambos están ocultos. Una vez que pase el cursor sobre la línea de tiempo del video, luego se mostrarán de nuevo. Bien, así que todo funciona bien. Hemos creado la barra Gable Progress. Pasemos a la siguiente conferencia. 43. Ocultar y mostrar los controles: Bien, en la conferencia anterior hemos creado una barra de progreso rastreable Y ahora tenemos que gestionar ocultar y mostrar los controles de video. Además, tenemos que programar el botón de cierre X y el botón de reproducción en la página de destino. Echemos un vistazo a los proyectos terminados. Si reproducido el video y luego detengo el mouse, los controles de video se ocultarán después de 3 segundos. Si muevo el ratón, entonces volverán a aparecer. Como dije, vamos a manejar esta cosa en este video. Y también tenemos que programar X botón de cierre, que cierra el video, y también programará el botón de reproducción. Si hago clic en él, aparecerá el video. Bien, vamos al código VS. Lo primero que voy a hacer es encontrar el wrapper de control y hacerlos ocultos usando capacidad cero visibilidad oculta. Como puedes ver, los controles de video están ocultos. A continuación tenemos que ir al archivo JS script y crea, en realidad voy a y aquí, nuevos comentarios para los controles. Necesitamos crear una función. Voy a llamarlo de controles, eso va a ser una función de flecha. Entonces voy a usar uno de los métodos Javascri incorporados llamados La función de tiempo Motet es un método scot Java incorporado que establece un temporizador y ejecuta una función o pieza de código especificada Una vez que expire el temporizador, voy a pasar aquí una función de devolución Este es el primer argumento. Entonces tenemos que colocar aquí el segundo argumento, que es la cantidad de tiempo, y se expresa en milisegundos. Voy a colocar aquí tres mil más. El primer argumento de tiempo de espera establecido es otra función de error. Esta función interna define lo que sucederá una vez que el temporizador esté arriba. En cuanto al segundo argumento es el retardo de tiempo en milisegundos. Aquí se establece en 3,000 milisegundos, lo que equivale a 3 segundos. Bien, ahora como el bloque de código voy a demandar video container class remove, voy a especificar aquí el nombre de la clase. Llamémoslo mostrar controles. La clase show controls agregará estilos en CSS que harán visibles los controles del reproductor de video. Al eliminar esta clase, los controles se ocultan de la vista. A continuación, voy a llamar a esta función. Ahora tenemos que ir al archivo CSS y usar los controles de show de clase. En primer lugar, voy a encontrar el wrapper de controles. A continuación, voy a seleccionar contenedor de video, seguido de los controles de show de clase. Después tenemos que seleccionar el envoltorio de controles. Tenemos que hacer visibles los controles. En primer lugar, voy a definir la posición va a ser cero, me refiero a la posición inferior. Entonces necesitamos capacidad uno y visibilidad visible. Además, voy a usar la transición para un efecto más suave. Aquí necesitamos todos, entonces la duración va a ser de 0.08 segundos Y necesitamos aquí es. Después voy a agregar la clase show controls al contenedor de video en archivo HTM. Vamos a insertar aquí mostrar controles, luego ir al navegador. Si espero 3 segundos, entonces los controles desaparecerán. Ahora tenemos que mostrarlos una vez que se mueve el ratón. Para eso, voy a agregar aquí el contenedor de video con oyente de eventos El evento va a ser movido. Tenemos que colocar aquí llamar a la función. Ahora tenemos que agregar a la clase de contenedor de video show controles. Ahora si dejo de mover el mouse por 3 segundos, entonces los controles de video se esconderán y una vez que mueva el mouse, entonces aparecerán. Bien, necesitamos mostrar los controles mientras se plantea el video. Para eso, voy a volver al archivo hijo y crear una declaración aquí justo encima de la función de tiempo de espera establecido. Necesitamos si declaración, en la que tenemos que comprobar si el video principal se plantea o no. Entonces necesitamos declaración de retorno. Déjame explicarte. ¿Qué estoy haciendo aquí? Esta declaración comprueba una condición. Y en base a los resultados de la condición, o bien continúa ejecutando el resto de la función, o excede los retornos de la función temprano. El post es una propiedad que devuelve un valor de bullying. Verdadero o falso. La sentencia if, si la condición es verdadera, si el video es post, entonces se cumple la condición dentro de la declaración if. Si se cumple la condición, entonces se ejecuta la sentencia return. La sentencia return excede inmediatamente la función de altura controlada. Significa que ninguno de los códigos que siguen a la sentencia return dentro de la función de control se ejecuta. En términos simples, si se plantea el video, la función no hace nada y deja de correr ahí mismo. Si la condición es falsa, es decir, que el video se está reproduciendo, no se cumple la condición de sentencia if y no se ejecuta la sentencia return. La función luego procede a ejecutar el bloque de tiempo de espera establecido, que espera 3 segundos y luego ejecuta el código dentro de su función de devolución de llamada, eliminando la clase show controls del contenedor de video Esto da como resultado que los controles de video se oculten después del retraso. Ojalá entiendas lo que hace esta línea de código. Vamos al navegador. Si reproducido el video y luego lo hago una pausa, los controles no desaparecerán. El código funciona bien. Lo siguiente que voy a hacer es dejar de ejecutar la función set timeout. Una vez que movemos el ratón para eso, voy a crear una nueva variable. Va a ser temporizador. Voy a decle la variable sin asignarle ningún valor A continuación, voy a asignar la función set timeout a esa variable, el temporizador Después de eso, voy a usar uno de los métodos Java Sc integrados llamados clear time out. Voy a pasar aquí el temporizador variable. Dejará de ejecutar la función de tiempo de espera establecido. Y también necesitamos aquí para llamar a la función de controles de altura. Bien, vayamos al navegador y comprobemos si todo funciona bien. Voy a reproducir el video y esperar 3 segundos. Los controles están ocultos. Si muevo el ratón, entonces se mostrarán de nuevo. Si publico el video, entonces los controles serán visibles. Creo que todo funciona perfectamente. Y ahora tenemos que encargarnos del botón de cierre X y también del botón de reproducción en la sección de plantilla. Volvamos al archivo chavs y creamos nuevas variables. Voy a duplicar este código necesitamos Play Button. Voy a seleccionar este elemento con el nombre de la clase. Jugar. Patrón Btn x PTN X. Vamos a insertar aquí. X PTN seguido por el terreno. Bien, ahora necesitamos agregar eventos click a ambos patrones. Insertemos aquí, botón Reproducir, Agregar oyente de eventos. Y voy a especificar aquí el evento click. Entonces necesitamos aquí una función de devolución de llamada. Voy a agregar al contenedor de video nueva clase, que vamos a utilizar. Entonces en el archivo CSS necesitamos lista de clases de contenedor de video. Voy a insertar el nombre de la clase. Llamémoslo show video. Entonces voy a duplicar este botón de cambio de código. Va a ser X porra. Entonces voy a cambiar método a remover. Además, voy a publicar el video una vez que cerremos el contenedor de video que necesitamos aquí mainvideook Todo está listo en jovscript. Vamos al archivo CSS. Y antes que nada, voy a ocultar el contenedor de video que necesitamos aquí, capacidad cero y visibilidad diez. A continuación, voy a seleccionar contenedor de video con video show de clase. Voy a mostrar el video. Necesitamos opacidad uno y visibilidad visible. Y también, voy a usar la transición para efectos más suaves. Necesitamos transición luego opacidad 0.3 segundos, ¿de acuerdo? Como puedes ver, por defecto, el video está oculto. Si hago clic en el botón de reproducción, entonces se mostrará el reproductor de video. Si hago clic en X botón de cierre, se ocultará. Bien, creo que todo lo que ex, bien y en realidad con el reproductor de video ya terminamos. Ojalá fuera interesante. Usamos mucho Javascript y creo que aprendiste algunas cosas nuevas. Bien, ahora es el momento de pasar a crear la siguiente sección de nuestro proyecto. Para eso, pasemos a la siguiente conferencia. 44. Cómo crear la sección de marcado HTML para suscribirse: Bien, en la conferencia anterior hemos terminado de trabajar en la sección de plantillas. O sea, hemos terminado de trabajar en la segunda parte de la sección de plantillas, que era un reproductor de video. Hemos creado el reproductor de video y lo hemos hecho funcionar con éxito. Y ahora tenemos que seguir adelante y comenzar a crear la siguiente sección de nuestro proyecto. Echemos un vistazo a la versión terminada. La siguiente sección es una sección de suscripción. Es una sección agradable y fresca, pero pequeña. Tenemos aquí una caja oscura en el centro de la página. Incluye un par de elementos diferentes. Tenemos aquí el icono de Google Material, seguido del párrafo del encabezado, y también tenemos aquí un elemento de entrada con un botón. La caja tiene un efecto de sombra agradable y fresco. Bien, eso es todo sobre la sección de suscripción. Vamos al código VS. Y antes que nada voy a crear el marcado HTML justo después de la sección de plantilla, voy a insertar nuevos comentarios Va a ser suscribirse, entonces necesitamos fin de suscripción. A continuación, voy a abrir la etiqueta de sección con la suscripción. El primer elemento que voy a insertar dentro del elemento section va a ser el wrapper. Vamos a abrir con el envoltorio de suscripción entonces voy a crear el icono que necesitamos desarrollo con la clase subscribe. Va a ser el símbolo de Google Material. Voy a visitar el sitio web Google Material Symbols. Vamos a hacer clic en este enlace aquí. Voy a buscar el icono llamado Mark. Leer. Aquí tenemos el ícono. Voy a corp este panel de aquí y lo voy a pegar en el desarrollo, voy a cambiar contorno a redondeado Vamos a revisar el navegador. Como puedes ver, tenemos aquí el ícono de Google Material. A continuación, voy a crear los elementos de encabezado H one con el texto suscribirse. Ahora a continuación tenemos párrafo. El texto va a ser ingresa tu correo electrónico para recibir actualizaciones. Después del párrafo estoy etiqueta abierta con el grupo de entrada de suscripción de clase. Dentro del desarrollo, tendremos etiqueta de entrada con el tipo email. Además, voy a agregar aquí atributo placeholder y va a ser tu correo electrónico A continuación, necesitamos fondo. El tipo va a estar abajo como el texto. Voy a suscribirme ins. Bien. El último elemento que voy a crear va a ser la sombra. Quiero decir, necesitamos tuck con el nombre de la clase, suscríbete sombra Esto va a ser un elemento vacío. Eso es todo sobre el marcado HD. Echemos un vistazo al navegador Tenemos aquí todos los elementos. Ahora es el momento de seguir adelante y empezar a darle estilo a esos elementos. Sigamos adelante. 45. Sección de suscripción para estilismo: En la última conferencia, hemos creado marcado HTML para la sección de suscripción Ahora, como dije, tenemos que darle estilo a esos elementos. Echemos un vistazo, una vez más al proyecto terminado. Aquí tenemos la sección de suscripción. Tenemos que darle estilo a esos elementos, y también tenemos que crear este bonito y fresco efecto de sombra. Bien, vamos al código VS en archivo CSS. Voy a insertar nuevos comentarios justo después de la sección de plantilla que necesitamos aquí, suscríbase. Después voy a seleccionar los elementos de sección con el nombre de la clase Suscribirse. Lo primero que voy a hacer es definir con altura. Voy a establecer con 100% En cuanto a la altura, va a ser de 100 altura de ventana gráfica Me refiero al 100% de la ventana gráfica. Además, cambiemos el color de fondo. Voy a usar gradiente lineal. El color de fondo será similar al las secciones de plantilla fondo voy a definir la dirección va a ser dos a la izquierda. Entonces tenemos que pasar aquí tres colores. El primero va a ser 8430. Voy a usar de nuevo este color, 8430. En cuanto al tercer color, va a ser 409, ¿de acuerdo? Se cambia el color de fondo y también se aplica el ancho y alto al elemento de sección. Volvamos al código VS y nos ocupemos de la alineación de los elementos. Voy a usar la caja Flex de CS. Necesitamos Display Flex. Entonces voy a colocar el contenido en el centro de la sección. Para eso necesitamos justificar el contenido y luego un centro de líneas de artículos. Como puede ver, los elementos se colocan en el centro de la sección. A continuación me voy a llevar equipo del envoltorio de suscripción, que es esta caja oscura. Sigamos adelante y seleccionemos el envoltorio de suscripción. Definamos dentro de las alturas. El ancho va a ser 80, eso es por la altura. Voy a hacer 50. Y luego cambiar el color de fondo, va a ser 231, D34 Aquí tenemos el envoltorio. A continuación voy a hacer las esquinas redondeadas. Para eso tenemos que usar para el radio. El valor va a ser uno Ram. Además, voy a alinear los elementos usando de nuevo, flex box. Necesitamos display flex. Entonces voy a cambiar la dirección porque necesitamos alinear los elementos flex verticalmente. Necesitamos dirección flex para ser columna. A continuación, voy a crear un espacio parejo entre los elementos flex. Para ello, necesitamos justificar contenido no el centro sino el espacio de manera uniforme. Por último, voy a una línea de pedido en el centro horizontalmente. Para eso necesitamos una línea de artículos centros necesitamos aquí centro, bien. Entonces como puedes ver, los elementos se colocan verticalmente en el centro. A continuación, voy a encargarme del icono. Seleccionemos el icono Suscribir, seguido del elemento span. Voy a aumentar el tamaño del teléfono. Va a ser diez gramos. Además, voy a cambiar el color del icono. El color va a ser 035. Tenemos aquí un icono agradable y genial. A continuación voy a encargarme del rumbo. Sigamos adelante y seleccionemos Subscribe wrapper, seguido del elemento H one heading. Voy a aumentar el tamaño del teléfono , van a ser cuatro Ram. Entonces voy a cambiar el peso de la fuente. Vamos a hacerlo más ligero. Establezca el peso de la fuente en 300. A continuación voy a cambiar el color. Voy a usar color AA. Es de color gris. Entonces voy a mover el elemento un poco hacia arriba usando margin top. Necesitamos valor negativo y va a ser menos cinco frame. Bien, el rumbo se ve bastante bien. A continuación, voy a tomar aquí del párrafo, en realidad vamos a duplicar este código, luego cambiar el selector que necesitamos aquí. El tamaño del teléfono va a ser 1.8 Ram. Entonces necesitamos el mismo valor del peso del teléfono. El color será 999. Es de color gris ligeramente más oscuro. En cuanto al margen superior, voy a salir de aquí menos cinco Ram. Eso es. Sobre el párrafo siguiente, tenemos que encargarnos del insumo y del fondo. En primer lugar, voy a seleccionar wrapper, me refiero al grupo de entrada Suscribir. Definamos el ancho. Va a ser 50 Ram. Entonces voy a cambiar la altura. Vamos a establecerlo en 5.5 frame. En realidad, para que este elemento sea visible, voy a agregar aquí color de tocino temporal. Vamos a ponerla en rojo. Aquí tenemos el wrapper, Subscribe input group. A continuación, voy a encargarme de los elementos de entrada. Así que necesitamos de nuevo, suscribirse grupo de entrada, seguido de los elementos de entrada. En primer lugar, voy a poner posición en absoluto. Entonces necesitamos posición relativa para el elemento padre, que es grupo de entrada. A continuación, voy a establecer con altura a 100% En este caso, elemento de entrada ocupará con la altura de su elemento padre. Quiero decir 50 Ram y 5.5 Ram. Echemos un vistazo al navegador. Aquí tenemos los elementos. Vamos a deshacernos de este color de fondo. Ya no lo necesitamos. Bien. Después de eso, voy a cambiar el color de fondo. Vamos a establecerlo en 1b16 a nueve. Además, voy a deshacerme del borde de falla, luego hacer que las esquinas de la entrada sean redondas usando el radio del borde con el valor de cinco Ram, el elemento de entrada se ve mucho más bonito A continuación, voy a crear algo de espacio dentro de la entrada usando pudín. Entonces el relleno va a ser un Ram en la parte superior, luego uno Ram en el lado derecho, uno Ram en la parte inferior y dos Ram en el lado izquierdo. Ahora tenemos algo de espacio dentro de la entrada. A continuación tenemos que cuidar el teléfono. Vamos a establecer el tamaño del teléfono en 1.6 Ram. Entonces la tarifa telefónica va a ser de 300. Además, voy a cambiar el color. Usemos un 05 FD. Bien, así que todo se ve bastante bien. A continuación, voy a encargarme del atributo placeholder Sigamos adelante y seleccionemos el grupo Subscribe Input, seguido del elemento input. Y entonces necesitamos placeholder pseudo elemento. Voy a cambiar el tamaño del teléfono. Va a ser 1.6 Además, voy a cambiar el color. Usemos el mismo color. Los vendedores pueden ver que se ha cambiado el marcador de posición. Bien, sentémonos sobre los elementos de entrada. A continuación, tenemos que cuidar el fondo, que en este momento se coloca detrás del elemento de entrada. Sigamos adelante y seleccionamos, necesitamos aquí suscribirse grupo de entrada, seguido del elemento inferior. Definamos dentro de la altura. El ancho va a ser de 16 Ram. Entonces la altura será del 100% Ocupará la altura del elemento padre, 5.5 Ram. En realidad, puedes escribir aquí al 100% o heredar. Funcionará de la misma manera, pero prefiero 100% no sé por qué. A continuación voy a definir el color de fondo. Vamos a establecer fondo a 644 EF. Lo siguiente que voy a hacer es cambiar la posición del botón para ver cómo se ve. Fijemos la posición a absoluta. Entonces necesitamos posicionarnos para ser cero. Y también necesitamos establecer la posición correcta en cero también. Ahora el botón es visible. Eliminemos el borde de falla y también hagamos que el botón sea redondeado. Necesitamos el border non, entonces el radio del borde va a ser cinco fram, el botón se ve mucho más bonito A continuación te voy a sacar los teléfonos. El lado del teléfono va a ser 1.5 fram, necesitamos ponmallas, va a ser Además, voy a transformar texto a mayúsculas, luego cambiar de color, hacerlo blanco. Vamos a comprobar el resultado. Como puedes ver, el botón se ve bastante bien. Lo único que tenemos que hacer es crear algún espacio entre las letras. Y también voy a agregar al botón poco efecto de sombra. Voy a establecer el espaciado entre letras a 0.2 m. En cuanto a la sombra de caja, va a ser 01, luego cinco como color. Voy a usar RGBA con la opacidad 0.2 este es el color negro Por último, fijemos el punto del cursor. Bien, eso es. El botón está listo y en realidad todos los elementos están estilizados Lo único que tengo que hacer es crear efecto sombra. Me refiero a este efecto aquí. Como recuerdo creamos los elementos llamados Subscribe Shadow, el desarrollo que está vacío. Entonces voy a seleccionar este elemento. En primer lugar, definido dentro de las alturas, el ancho va a ser del 80% Eso es por la altura. Voy a ponerla en 12 Ram. Entonces necesitamos color de fondo. Voy a ponerla en 116 a nueve. Aquí tenemos la sombra. Cambiemos la posición. Voy a poner posición a absoluta. Necesitamos posicionar este elemento acuerdo con los elementos de sección. Necesitamos posición relativa para los elementos de sección que voy a establecer la posición inferior a menos siete Ram. En cuanto a la posición izquierda va a ser del 50% Necesitamos centrar el elemento horizontalmente. Para eso tenemos que usar transform con función translate. En este caso, necesitamos traducir x y el valor va a ser -50% Como puedes ver, el elemento está centrado Ahora voy a rotar los elementos por eje x verticalmente. Para eso, necesitamos usar la función rotate x. Y el valor va a ser grados siento. Ahora el elemento se gira a continuación, voy a hacerlo redondeado. Usando radio de borde, va a ser 30% el elemento es redondeado. Y ahora tenemos que hacerlo borroso como lo tenemos en el proyecto terminado Para hacer eso, voy a usar propiedad filter con la función llamada polar y el valor va a ser tres Ram. También, voy a establecer opacidad 2.7 Ahora tenemos aquí el efecto sombra, pero tenemos que transformarlo a tres efecto D como lo tenemos en el proyecto terminado Para crear un entorno de tres D, voy a asignar a la propiedad del elemento sección llamada perspectiva. Nos permite crear el entorno de tres D, el valor va a ser 50 Ram. Además, necesitamos la propiedad llamada transform style para el elemento padre de la sombra, que es subscribe wrapper. Necesitamos aquí transformar el estilo con el valor preservado, tres D. Ahora se aplicará el efecto tres D. Echemos un vistazo. Como pueden ver, tenemos aquí bonito y fresco efecto de sombra. Es el efecto tres D que se sienta sobre la sección de suscripción. Creo que se ve bastante bonito y moderno. Pasemos a la siguiente conferencia. 46. Creación de marcado HTML para pie de página: Bien, en la última conferencia hemos terminado de diseñar la sección de suscripción. Se ve bastante bonito y moderno. Y ahora tenemos que seguir adelante y crear la última sección de la primera página, la página de inicio. Va a ser pie de página. Aquí tenemos el pie de página. Es sencillo, pero creo que se ve bastante bien. Tenemos aquí diferentes enlaces, también los iconos de los teléfonos. Abajo, puedes ver los elementos de navegación que funcionan. Si hacemos clic en alguno de los elementos de navegación, entonces navegaremos a la página adecuada. Como puedes ver, todos los enlaces funcionan bien. Bien, sigamos adelante y, antes que nada, como siempre, creamos el marcado HTML Voy a insertar tus nuevos comentarios para el pie de página. Entonces voy a abrir H cinco pies. Incluirá dos partes distintas. Tendremos para mí esta parte aquí y pie de página abajo. Los elementos de navegación que necesitamos aquí. Tirón profundo con la parte superior del pie de página de la clase. También, voy a crear footer bottom también. Para la parte superior se incluirán iconos de redes sociales. Voy a abrir deta con la clase social media. Es que necesitamos aquí los medios de comunicación. Va a ser un nombre de clase individual. Pero además de eso voy a agregar aquí nombre de clase común. Y va a ser ítem de pie de página, voy a encabezar tres, el texto va a ser seguirnos. Entonces necesitamos aquí desarrollo que envolverá los íconos. Voy a llamarlo íconos, voy a insertar los íconos de tu teléfono. El primero va a ser una Fase A de Marcas. En general, tendremos siete iconos diferentes, por lo tanto, voy a duplicar esta línea de código seis veces, luego cambiar los nombres de las clases. El segundo va a ser FA Instagram. Entonces tendremos aquí un vinculado. Entonces el siguiente será un Twitter. Ahora mismo, Twitter tiene otro nombre, pero de todas formas, voy a insertarlo aquí. A continuación tendremos Pinterest. Entonces el siguiente ícono va a ser un tribble. Por último, tendremos que, bien, así que también se crean todos los iconos del teléfono. Verifiquemos si todos ellos están visibles y mostrados. Aquí tenemos siete iconos diferentes y se muestran todos ellos. Bien, a continuación voy a encargarme del siguiente elemento filtrante y van a ser algunos enlaces. Primero voy a insertar tus H tres elementos de encabezado , van a ser características. Entonces necesitamos elementos de enlace. El primero va a ser 1,000 maquetaciones plus. Voy a duplicar esta línea de código cinco veces porque vamos a tener seis enlaces diferentes. O sea, el segundo elemento de enlace será de 100 elementos más. Entonces el siguiente será sin diseño de código. Entonces el siguiente va a ser E-Commerce. En realidad, los enlaces son algunos enlaces de barriga que puedes insertar aquí cualquier cosa que quieras Depende absolutamente de usted. Entonces el siguiente elemento, ser flujo de trabajo. Por último, soy inseguro de marketing. Bien, eso es. Acerca del segundo elemento de pie de página, en realidad, voy a duplicar este elemento dos veces. Entonces voy a cambiar el rumbo. Cambiemos aquí la primera letra, debería ser mayúscula. El segundo rubro va a ser los servicios. En este ítem de pie de página, tendremos cinco. Enlace. Entonces voy a eliminar uno de ellos y luego cambiar el contenido de los elementos del enlace. El primero va a ser Marketplace. Entonces tendremos Theme Builder. El siguiente va a ser Cloud. Entonces vamos a tener aquí por fin voy a Intro Themes Bien, eso es todo sobre el segundo Fem, en realidad es el tercer elemento de pie de página y el segundo, el último elemento de pie de página será para compañía. Tendremos aquí cuatro enlaces. Voy a insertar aquí sobre nosotros. Entonces bloquearemos, el siguiente serán los transportistas. El último elemento de enlace va a ser el contacto. Bien, eso es sobre los elementos del pie de página. En realidad, eso es todo, sobre la parte superior del pie de página. Voy a tomar la oreja de la parte inferior del pie de página. Aquí tendremos seis elementos de enlace diferentes y serán elementos de navegación. Voy a abrir elementos de enlace en el atributo de referencia H. Voy a insertar índice HTML porque este elemento link nos va a navegar a la página principal. Entonces dupliquemos esta línea de código cinco veces, porque en general tenemos seis elementos de navegación diferentes. El segundo va a ser para clientes. Entonces vamos a tener productos ahora mismo, esos enlaces, quiero decir que esas páginas no están creadas. Los crearemos en las próximas conferencias. Pero en fin, voy a especificar aquí los nombres de los expedientes. El siguiente va a ser el contacto. Entonces tendremos cuenta. Por último, voy a, en la fijación de precios, creo que se trata del marcado extremo Se crean todos los elementos. Vamos a revisar el navegador. Como puedes ver, tenemos aquí todos los enlaces y también el teléfono asomicons Ahora es el momento de darle estilo a esos elementos. Y para eso, pasemos a la siguiente conferencia. 47. Pie de página de estilo: En la conferencia anterior, hemos creado el marcado HDML para el pie de página, y ahora es el momento de darle estilo a esos elementos Echemos un vistazo una vez más al proyecto terminado. Aquí tenemos el pie de página, que es sencillo, pero creo que se ve bastante bonito y moderno. Vamos al código VS y comencemos a escribir CSS. En realidad, antes de hacer eso, voy a añadir aquí un elemento porque me olvidé de crearlo en la última conferencia. Necesitamos aquí contenido de pie que envolverá el contenido del pie de página. Cortemos este cierre, Charla profunda, y péguelo abajo. Bien, eso es. La H en el marcado está lista. Voy a instituir tus nuevos comentarios para el pie de página. A continuación, voy a seleccionar el elemento footer. En primer lugar, voy a definir la anchura y la altura. El ancho va a ser del 100% En cuanto a la altura, voy a hacerla 60 ver altura de la olla. Me refiero al 60% de la vista. Y también, vamos a crear algo de espacio dentro del pie de página usando relleno. El pudín va a ser diez carnero en la parte superior, luego cero en el lado derecho, tres carnero en el extremo inferior, cero en el lado izquierdo ¿Bien? Como puedes ver, se aplica a los elementos el ancho, alto, y también el pudín A continuación, voy a encargarme de los contenidos del pie de página. Seleccionemos estos elementos. En primer lugar, definir la anchura y la altura. El ancho va a ser del 100% En cuanto a la altura, voy a hacerlo al 100% también. A continuación, voy a alinear los elementos usando CSS Flex box, necesitamos mostrar flex. Entonces voy a colocar los elementos, me refiero a los elementos flex, verticalmente en una columna. Tenemos que cambiar la dirección del flex y va a ser columna. Entonces voy a crear espacio entre los elementos flex usando justificar un espacio concreto entre. Y también, alineemos los elementos en el centro. Nuevamente, como pueden ver los elementos, quiero decir que los lados superior e inferior están alineados. A continuación, voy a encargarme del lado superior. Sigamos adelante y seleccionemos pie hacia arriba. Voy a establecer con al 100% Entonces voy a alinear los elementos horizontalmente en fila. Y para eso, usemos de nuevo los libros flex. Para crear espacio entre los elementos flex, voy a usar justificar contenido con el espacio de valor de manera uniforme. ¿Bien? Los elementos, la primera parte en la parte superior del pie de página están muy bien alineados. Bien. A continuación me voy a encargar de las redes sociales. Voy a seleccionar pie de página en redes sociales. Y voy a definir el ancho. Va a ser 30% Como puede ver, el ancho del primer elemento de pie incrementa el ancho del primer elemento de pie de página en los íconos de redes sociales. Es el 30% del pie de página. Siguiente Voy a seleccionar elemento de pie de página. Es un nombre de clase común para los cuatro elementos de pie de página, necesitamos usar CSS, libros flexibles. Voy a alinear elementos flex verticalmente en una columna. Como invitado, tenemos que cambiar la dirección y va a ser columna. Como puede ver, los elementos flexibles se colocan en una columna. A continuación, vamos a encargarnos de los encabezamientos. Voy a seleccionar elemento de pie de página página tres. Necesitamos los mismos estilos para todos los elementos de rumbo. Voy a cambiar la familia telefónica, va a ser cursiva, entonces el tamaño del teléfono va a ser 2.5 Rams Voy a cambiar el color, vamos a usar el color 007. Además, voy a crear algo de espacio en la parte inferior usando margen. Dos inferiores Ram. Como se puede ver, los encabezamientos se ven bastante bien A continuación tenemos que encargarnos de los íconos. Seleccionemos íconos, seguidos del elemento. Voy a aumentar el tamaño del teléfono, va a ser 2.5 Ram. Entonces necesitamos espacio en el lado derecho de cada icono. Voy a usar marchando bien con valor dos Ram. Y también cambiar el puntero de Coursermate. Bien, ahora tenemos íconos más grandes. Como invitado, tenemos que cambiar el color de cada artículo. Sigamos adelante y comencemos con el primero. Voy a seleccionar íconos I, seguido del enésimo selector hijo Necesitamos primer elemento en realidad icono, el color va a ser 187. 72. Vamos a comprobar el resultado. Como puedes ver, se cambia el color del primer artículo. Hagamos lo mismo para el resto de los íconos. Voy a duplicar este código seis veces porque general tenemos siete iconos. En realidad necesitamos siete íconos y ocho. Voy a cambiar los números de los selectores de gráficos. Necesitamos números, necesitamos números del uno al siete. Además, necesitamos cambiar los colores. El segundo color va a ser C323. Entonces tendremos un 662. El siguiente va a ser el 112. Entonces tendremos aquí D081. El sexto ítem es el color 4c89. También necesitamos aquí color rojo, que es F0000. Bien, así como puedes ver, los colores de los íconos se cambian y se ven bastante bonitos. A continuación tenemos que encargarnos de los enlaces aquí, voy a seleccionar el artículo del pie. Cambiemos el tamaño del teléfono. Va a ser 1.8 Ram. Entonces necesitamos espacio en la parte inferior usando margen inferior. Y va a ser 1.5 Ram. Y también cambiar el color del enlace. Va a ser 394353. Es de color gris oscuro. Aquí tenemos los enlaces. En realidad creo que tenemos demasiado espacio entre ellos. Vamos a disminuir el margen. Potson, hazlo a 1.4 Ram. Hagámoslo 1.3 Ram. Creo que ahora tenemos mejores resultados. A continuación, tuvimos que cuidar el lado inferior. Seleccionemos pie de página Inferior. Voy a establecer el ancho al 100% Entonces necesitamos alinear elementos usando Flexbox Necesitamos exhibir Flex. Entonces voy a crear espacio entre los elementos flex usando justify content space. Incluso también, voy a usar align items center para centrar los elementos flex horizontalmente. Como se puede ver, los elementos de enlace se colocan fila horizontal muy bien, están alineados. Ahora voy a crear frontera en la parte superior, la frontera que tenemos aquí. Vamos a usar borde superior y los valores serán 0.2 Ram sólido como el color. Voy a usar valor RGBA, necesitamos cero, luego 122, entonces el siguiente valor va a ser 170 En cuanto a la opacidad, voy a hacerla 0.2 Además, necesitamos algo de espacio en la parte superior aquí, en la parte superior entre los elementos de navegación y el borde Vamos a crear ese espacio Está en relleno, arriba un carnero. Bien, finalmente tenemos que personalizar los elementos del enlace. Voy a seleccionar pie inferior seguido del elemento link. Necesitamos familia de fuentes. Va a ser croissant one curs, entonces voy a establecer el tamaño de fuente dos Y también cambiar el color del elemento link. Va a ser 007 AA, ¿de acuerdo? Como puedes ver, los elementos de enlace se ven bastante bien. En realidad, con el pie de página ya terminamos. Podemos decir que hemos terminado trabajar en la página principal, la página principal. Todo se ve bastante bien. A continuación tenemos que encargarnos de las páginas, clientes, productos, contacto, precios de cuenta. Tenemos que crear cinco páginas diferentes. Y además, tenemos que hacer que todo el proyecto sensible a diferentes tamaños de pantalla y dispositivos. Aún así, tenemos que hacer muchas cosas. Pasemos a la siguiente conferencia. 48. Creación de barra de desplazamiento personalizada: En la conferencia anterior, hemos terminado de trabajar en el pie de página. Se ve bastante bien. Como dije, tenemos que seguir adelante y empezar a crear las páginas porque la página de inicio ya está estilizada y personalizada Antes de seguir adelante y empezar a crear las páginas, quiero hacer una cosa más. Si echamos un vistazo al proyecto terminado, encontrarás aquí que tenemos aquí una barra de desplazamiento personalizada. Es diferente de la barra de desplazamiento estándar predeterminada. Quiero decir a partir de esta de aquí. En esta conferencia voy a cambiar la barra de desplazamiento. Vamos al código VS y desplázate hacia arriba justo después de los estilos predeterminados, voy a insertar nuevos comunes para la barra de desplazamiento personalizada. Después voy a seleccionar elementos del cuerpo seguidos de uno de los elementos del CD. Se llama Webkit Scroll Bar. Ahora voy a definir el ancho de la barra de desplazamiento. Vamos a establecerlo en 1.5 Ram. A continuación, necesitamos definir otro pseudo elemento y se llama kit web, barra de desplazamiento, pulgar, que es esta parte aquí Ahora voy a definir el fondo y vamos a usar aquí gradiente lineal. El primer color va a ser 830. Para el segundo, voy a usar B55. Ahora si comprobamos, verás que se cambia el pulgar. Tenemos aquí pulgar con diferente color de fondo. Ahora tenemos que encargarnos de la pista. En realidad, ahora mismo se puede ver que la pista es blanca. Pero de todos modos, lo voy a definir porque es posible que necesites una pista diferente con diferente color. En el futuro, debes saber cómo cambiarlo. Voy a seleccionar Cuerpo, luego webkit, scroll, bar, track Hagamos el color de fondo blanco. La pista es blanca. Si cambiamos el color y lo hacemos, digamos verde, entonces la pista cambiará su color de fondo. Así es como puedes cambiar el color de fondo de la pista de la barra de desplazamiento Volvamos aquí. De nuevo en color blanco. Eso es. Hemos cambiado la barra de desplazamiento predeterminada y la hacemos lucir moderna y agradable. Ahora es el momento de pasar a la siguiente conferencia, en la que tenemos que empezar a crear las páginas. 49. Personalización de Navbar: Bien, así que en la conferencia anterior hemos creado una barra de desplazamiento personalizada que se ve bastante bien y es diferente de las barras de desplazamiento predeterminadas y estándar. Ahora como dije, tenemos que empezar a crear las páginas. En esta conferencia, voy a empezar a crear la página del cliente. Pasemos al proyecto terminado y revisemos una vez más la página del cliente. Aquí tenemos la página del cliente que consiste en encabezado. Entonces tenemos aquí algunos testimonios de diferentes clientes. Y abajo tenemos el mismo pie de página que hemos creado para la página principal, me refiero a la página de inicio también. Aquí tenemos la navegación. Es similar a la navegación principal. Lo único que tiene que ver con la navegación es cambiar el color del logotipo y también los elementos de navegación. Y también tenemos que cambiar el fondo, color y el color del botón. Bien, sigamos adelante y empecemos a trabajar en la página del cliente. Lo primero que voy a hacer es crear un nuevo archivo aquí en la carpeta HTML. El archivo va a ser clientes, hacer HTML. Vamos a abrir este archivo. Voy a moverlo aquí. La página de clientes. Es decir, se crea el archivo HTML. Ahora, voy a agarrar todo el contenido. Vamos a copiar todo el código y pegarlo aquí. Entonces voy a eliminar todas las secciones excepto la navegación. Eliminemos todo excepto la navegación que tenemos aquí. Toda la navegación desde la página principal. También, todos los enlaces que estamos utilizando a lo largo de este proyecto. Vamos a revisar el navegador. Ir a la página del cliente. Aquí tenemos la navegación, y toda la página está vacía. Como dije, tenemos que cambiar ligeramente la navegación. Es decir, tenemos que cambiar los colores del logotipo y los elementos de navegación. Voy a agregar un nuevo nombre de clase a la barra n y va a ser multipágina Entonces voy a ir al archivo CSS y necesitamos encontrar el elemento span del logo. Aquí lo tenemos. Voy a seleccionar esa clase recién agregada, lo suficientemente multipágina, seguida del logo Entonces necesitamos elemento span. Cambiemos el color del texto. Va a ser de 0926 a siete. Además, me voy a deshacer del efecto sombra porque cuando tenemos el fondo blanco, entonces la sombra no se ve del todo bien. Voy a establecer la sombra de texto en non. Vamos a revisar el navegador. Como puedes ver, se cambia el color del logo y ahora se ve mucho mejor. Tomemos aquí los elementos de navegación. Voy a encontrar elementos de enlace aquí no tenemos enlace. Y voy a aquí multipágina no seguido de ningún enlace. Entonces voy a cambiar el color. El color va a ser del 0926 al siete. Y también me voy a deshacer de la sombra tecnológica. Vamos a ponerla en ninguna. Como puede ver, cambia el color de los artículos entumecidos Bien, ahora tenemos que cuidar el trasero. Encontremos el fondo que se coloca después de las gotas. Como yo a través de arriba abajo cinco. Entonces deberíamos encontrar aquí sí, PTN. Voy a seleccionar varias páginas hacia arriba, seguido de ningún elemento. Entonces tenemos que seleccionar, en realidad necesitamos aquí artículo y artículos. A continuación no necesitamos PTN. Voy a cambiar los antecedentes que necesitamos aquí. Gradientes lineales La dirección de la transición de color va a ser dos, ¿verdad? Entonces el primer color va a ser F459. En cuanto al segundo color, voy a usar F3598 Entonces, como puede ver, se cambia el color del suelo. A continuación, voy a cambiar el color del texto y va a ser blanco. Además, me voy a deshacer de la sombra de caja. Vamos a ponerlo en ninguno, ¿de acuerdo? Como puedes ver, la navegación se ve bastante bien. Lo único que hay que hacer con respecto a la navegación, voy a cambiar la sombra de caja de los menús desplegables. Voy a cambiarlo un poco. Busquemos el desplegable entonces. Voy a agregar aquí, en realidad necesitamos colocar el código aquí. Voy a seleccionar multipágina no, seguido de O ítems Entonces tenemos que bajar. La sombra de caja va a ser 0110. Entonces necesitamos RGP color 130. Entonces el siguiente va a ser el 162. Entonces necesitamos 235, y la opacidad va a ser 0.4 Bien. Ahora como pueden ver, tenemos aquí diferente efecto de sombra y creo que es mucho mejor que el anterior para el fondo blanco. Bien, así que con la navegación ya terminamos. Vamos a comprobar si el Tiki no bar funciona bien. Para eso, voy a aumentar la altura del contenedor por un tiempo. Voy a usar atributos de estilo. Entonces necesitamos alturas. Vamos a ponerlo a 150, poner altura. Y ahora revisa los resultados. Como se puede ver, el pegado el bar funciona bien. Tenemos aquí barra de desplazamiento personalizada, pero la vamos a cambiar. Aquí no necesitamos la barra de desplazamiento púrpura. Como recuerdo. Tenemos aquí barra de desplazamiento verde. Lo cambiaremos un poco más tarde. Bien, todo funciona bien. La navegación se ve bastante bien. A continuación, tenemos que agregar el contenido a la página del cliente. Para eso, pasemos a la siguiente conferencia. 50. Cómo crear la sección de marcado HTML para testimonios: En la conferencia anterior, hemos comenzado a trabajar en la página del cliente. Hemos personalizado la navegación y ahora es el momento de agregar el contenido a la página. Echemos un vistazo al proyecto terminado. La página del cliente incluirá los testimonios de los clientes. Vamos a crear el marcado HTML para el contenido de la página del cliente Pasemos al código VS, y justo después de la navegación, insertemos nuevos comentarios para los testimonios. Entonces voy a abrir sección con los testimonios del nombre de la clase. El primer elemento que voy a insertar aquí va a ser encabezado. Necesitamos desarrollos con el encabezado de testimonios de nombre de clase. Entonces voy a abrir H una etiqueta de encabezado con el texto lo que dicen los clientes de nosotros. Entonces necesitamos porque vamos a agregar piloto de confianza Después del elemento heading, voy a abrir etiqueta profunda con el nombre de la clase stars. Aquí vamos a tener estrellas. Voy a insertar aquí un símbolo de Google Material. Vamos al navegador y busquemos símbolos de material de Google. Entonces necesitamos encontrar el icono llamado clase de hotel. Este es el icono que necesitamos. En realidad, voy a hacerlo redondeado, luego agarra el elemento span y pégalo aquí. Si revisamos el navegador, entonces verá aquí la estrella que se muestra en la página. A continuación, voy a agregar Tug con el nombre de la clase Trust Pilot Entonces necesitamos elemento Span, Poner el texto Trust Pilot. Después de eso, voy a agregar aquí cinco estrellas. Vamos a abrir el tirón profundo. Después ve al navegador y busca el ícono llamado estrella. Necesitamos este icono. Vamos a agarrar el elemento span y pegarlo dentro del desarrollo. En general, tendremos cinco estrellas. Por lo tanto, voy a duplicar esta línea de código cuatro veces. Vamos a revisar el navegador. Como pueden ver, aquí tenemos cinco estrellas. Bien, lo siguiente que voy a hacer es crear otro desarrollo, y va a ser el envoltorio de testimonios. En general, contaremos con 12 testimonios diferentes. Abramos el tirón profundo con el testimonio del nombre de la clase. Vamos a crear el primero y luego duplicaremos el testimonio y haremos algunos cambios El testimonio incluirá dos elementos diferentes. Tendremos cuerpo testimonial superior y testimonial. Vamos a abrir de tu con el nombre de la clase testimonial al mismo incluirá la imagen del cliente y también el nombre Voy a insertar etiqueta de imagen, entonces necesitamos especificar la ruta de la imagen. Antes de eso, tenemos que salir de la carpeta actual. Ahora mismo estamos en la carpeta Htiml. Tenemos que salir de la carpeta, necesitamos puntos y s. luego tenemos que ingresar a la carpeta de imágenes y seleccionar cliente uno. Necesito nombre, voy a abrir la etiqueta span. El nombre va a ser John Smith. Aquí tenemos la imagen del cliente y también el nombre. Bien, hablemos del elemento principal testimonial. A continuación necesitamos cuerpo testimonial. Los elementos incluirán esas estrellas encabezamiento y el párrafo En realidad, es encabezado, también es párrafo. Vamos a insertar aquí estrellas. Voy a agarrar estos elementos con cinco estrellas, entonces vamos a pegarlo aquí. A continuación, necesitamos párrafo con texto ficticio. Necesitamos cinco palabras. Voy a insertar su Lorin cinco, luego insertar otro párrafo En realidad, si echamos un vistazo al proyecto terminado, encontrarás que tenemos aquí diferentes párrafos. La longitud de los párrafos es diferente. Ahora mismo, voy a dejar vacío este elemento, y luego nos encargaremos de ello un poco más tarde. Bien, así que sentémonos sobre el marcado HTML para el primer testimonio Como dije, tendremos 12 testimonios diferentes. Voy a duplicar este código 11 veces, después voy a hacer algunos cambios. Tenemos que cambiar en realidad, antes que nada, voy a insertar aquí el número de palabras. Quiero decir, necesitamos a Lauren 30. Entonces tenemos que encargarnos del segundo testimonio que necesitamos aquí, cliente dos Entonces el nombre va a ser Jack Brown. Estoy usando algunos nombres domin, puedes usar lo que quieras A continuación, voy a inerre Lauren 40. Entonces tendremos aquí al cliente tres. El nombre va a ser Smith. En cuanto al párrafo, voy a interferir Lauren 50. Entonces tenemos aquí cliente cuatro, y el nombre va a ser Nick Peters. En cuanto al párrafo, aquí tendremos 30 palabras. Necesitamos a Lauren 30. Bien. A continuación necesitamos cliente cinco con el nombre Philip Dust. En cuanto al párrafo, va a ser Laura 13. En realidad, necesitamos aquí 12 artículos. Es el primer 112345. Se trata de seis rubro, así que voy a duplicarlo seis veces. Ahora espero que tengamos 12 testimonios. Es quinto testimonial. Ahora necesitamos aquí cliente seis. Entonces el nombre va a ser Jane Smith. En cuanto al párrafo, va a ser Lauren 40. Entonces el siguiente cliente es el cliente siete con el nombre Jessica Mendes, y el párrafo será Lauren 40 Fue séptimo testimonial. Necesitamos aquí cliente ocho con el nombre de Steve Thompson. El párrafo será Lauren 50. Necesitamos aquí nueve y será María Verde. Y el párrafo será, um, 60. Entonces tenemos aquí el cliente diez. Se trata de Alexis, Alexis Smith, y necesitamos a Lorem 40 Después cliente 11, Bob Brown, Lum 20. Por último necesitamos cliente 12. Va a ser Rose Hanson. En cuanto al párrafo, voy a insertar aquí, Laurum 40 Bien, entonces creo que el marcado de tiempo H está listo, y espero que aquí todo esté correcto Vamos al navegador y verifiquemos. Aquí tenemos imágenes con diferentes nombres y párrafos. Creo que todo lo que no tenemos aquí, la imagen para el undécimo cliente. Podríamos tener un error. Se trata del cliente 11. Ahora el problema está arreglado. Creo que todo parece estar correcto. Ahora tenemos que personalizar esta sección. Pasemos a la siguiente conferencia. 51. Sección de testimonios de estilo: En la conferencia anterior, hemos creado el marcado HTML para la página del cliente Hemos creado la sección testimonial. Puedes ver aquí todos los elementos. Ahora tenemos que empezar a darle estilo a esos elementos. Pero antes de hacer eso, voy a hacer una cosa. Como puedes ver, tenemos aquí barra de desplazamiento que tiene el color de fondo púrpura Pero si echamos un vistazo al proyecto terminado, verás que la barra de desplazamiento tiene diferente color verde Voy a encargarme de eso como lo primero. Vamos al código VS y antes que nada, creamos nuevo archivo en la carpeta CSS. Van a ser clientes. Entonces voy a mover este archivo aquí. Necesitamos vincular el archivo CSS de los clientes al archivo HTML. Es decir, los clientes puntean HTML. Voy a duplicar este código. Y tenemos que cambiar aquí el nombre del archivo va a ser clientes. Bien, una vez que los archivos estén conectados. A continuación, voy a ir al archivo CSS de mosaico y agarrar este código. Es decir, el código donde cambiamos el color de fondo de la barra de desplazamiento Golpe. Vamos a copiar este código, después vamos a los clientes de archivo CS. En primer lugar, voy a insertar tus comentarios para barra de desplazamiento personalizada y luego pegar el código Aquí tenemos que cambiar esos dos colores. El primer color va a ser 0067 A. En cuanto al segundo color, voy a usar 34 DC 87 Como puedes ver, el color, me refiero al color de fondo de la barra de desplazamiento se cambia. Y se ve bastante bien. Bien, así que veamos sobre la barra de desplazamiento. A continuación tenemos que llevarte de la sección testimonial. Voy a insertar sus nuevos comentarios para testimonios. Luego tenemos que seleccionar el elemento de sección que tiene testimonios de nombre de clase. En primer lugar, voy a definir la altura con mano de los elementos de sección. Voy a ponerlos a ambos al 100% Entonces voy a mover la sección hacia abajo usando margen superior. Voy a establecer top, en realidad estamos creando el espacio entre el borde superior de la página y la sección. A continuación, voy a usar CSS Flexbox para alinear los elementos flex Voy a configurar display a flex. Entonces voy a cambiar la dirección porque vamos a alinear elementos verticalmente. Necesitamos dirección flex para ser columna. Y también necesitamos alinear los elementos en el centro, como se puede ver, los contenidos colocados en el centro. En realidad, necesitamos cambiar el tamaño de las imágenes porque en este momento son demasiado grandes. Voy a seleccionar testimonial top seguido de la pila de imágenes Vamos a poner dentro de la altura de la imagen, ambos a seis Ram. Entonces voy a poner pies de objeto para cubrir con el fin de evitar encoger las imágenes y perder la calidad de imagen Entonces voy a hacer redondeadas las imágenes. Para eso, necesitamos para el radio con un valor de 50% chem. Como pueden ver, aquí tenemos un resultado mucho mejor porque las imágenes se hicieron más pequeñas. A continuación, voy a encargarme de la cabecera. Estoy aquí, cabecera testimonial. Necesitamos alinear el texto en el centro. A continuación voy a encargarme del elemento de encabezado H one. Sigamos adelante y seleccionemos encabezado testimonial seguido del elemento H one heading Antes que nada, cambiemos la familia telefónica. Va a ser Molly Cursive. Entonces voy a establecer el tamaño del teléfono en pi. Además, necesitamos cambiar el color que se usa aquí, color 0926 a siete Vamos a revisar el navegador. Tenemos aquí el rubro. Ahora, voy a aumentar el espacio entre las letras. Vamos a establecerlo en 0.2 Ram. Además, voy a disminuir el ancho de la cabecera. Vamos a establecerlo en 70% Como puedes ver, el encabezado se coloca en el lado izquierdo de la página. Tenemos que colocarlo en el centro, y para eso voy a usar margen, aunque nos permite colocar el elemento en el centro. Si quieres centrar el elemento, necesitas usar ancho y margen juntos. Recuerda esto. Ahora, como puede ver, el rumbo se coloca en el centro. A continuación, voy a cambiar la altura de la línea. Vamos a establecer la altura de la línea a ocho. Bien, Siguiente voy a cuidar de las estrellas. Seleccionemos el desarrollo envoltorio que tiene nombres de clase Estrellas. Voy a usar flex box para alinear los elementos. Como puede ver, los elementos se colocan horizontalmente en fila. A continuación, voy a encargarme de la posición del elemento. Fijemos la posición a absoluta. Necesitamos posicionar los elementos de acuerdo con su elemento padre. Necesitamos posición relativa para el padre que es cabecera testimonial. Ahora voy a definir las dos posiciones, va a ser 50% En cuanto a la posición correcta, voy a hacerla 15% Bien, vamos a comprobar los resultados. Los elementos se colocan de manera agradable y correcta. A continuación, voy a encargarme del piloto de confianza, pero como veo, se perfilan las estrellas. Si echamos un vistazo al proyecto de acabado, puedes ver que las estrellas no están delineadas, están llenas. Vamos a visitar los símbolos de Google Material. Vamos a revisar el sitio web. Como puedes ver en la sección de filtros, tenemos aquí la opción llamada campo y tenemos que encenderla. Ahora si busco el icono, entonces verás que es campo. Si hago clic en el icono, entonces puedes ver que tenemos aquí exactamente el mismo elemento span, exactamente el mismo nombre de clase, y la estrella de contenido. La única diferencia que tenemos aquí es que en este caso, cuando estamos usando los iconos de campo, el valor de la propiedad de campo es igual a uno. Pero si comprobamos el enlace en nuestro archivo H Neal, verá que tenemos aquí propiedad de campo Su valor apropiado es cero. Si cambio cero a uno y reviso el navegador, verás que todas las estrellas están llenas. ¿Bien? El problema está arreglado. Sigamos adelante y cuidemos el siguiente elemento, que es el piloto de confianza. Voy a seleccionar piloto de confianza y definir margen en la parte superior, porque necesitamos algo de espacio en la parte superior, pongamos el margen superior a un m. Bien, lo siguiente que voy a hacer es cuidar este elemento de texto aquí. Me refiero a piloto de confianza. Vamos al código VS y al piloto de confianza seguido de los panelements, si echamos un vistazo al marcado HTML Puedes ver aquí que este elemento, el elemento trustpilot, incluye diferentes elementos span Tenemos aquí el texto span trustpilot, y también tenemos aquí los símbolos con elementos span En nuestro caso, necesitamos seleccionar solo este elemento span. Para eso, voy a usar uno de los combinadores CSS, Este signo aquí Nos permite seleccionar aquí solo el primer elemento span hijo. Si agrego aquí estilos como tamaño de fuente 2.5 Ram, luego color 0926 a siete Además, voy a usar el espaciado entre letras. Digámoslo, 2.3 Ram. Entonces si revisamos el navegador, verás que solo se estiliza este elemento span, estas estrellas no se cambian Si me deshago de por favor firme desde aquí y luego cambie el color obtendrá diferentes resultados. Como puedes ver, ahora se cambian todos estos elementos de pan. Pero si agregamos aquí el combinador, entonces en el panelement cambiará Bien, espero que te quede claro, voy a recuperar estas fichas. Bien, a continuación tenemos que encargarnos de las estrellas. Voy a seleccionar Trust Pilot, seguido del desarrollo. Y entonces necesitamos a Span. Cambiemos el color. Van a ser las 00. Entonces necesitamos el tamaño de fuente tres, Ram. También, voy a usar margen. El margen será cero en la parte superior e inferior -0.25 Ram. Está en los lados izquierdo y derecho. Bien, las estrellas se ven bastante bien. A continuación voy a cuidar de esta estrella aquí. Voy a seleccionar estrellas seguidas del elemento span. Ahora necesitamos usar la misma técnica. Necesitamos el primer elemento hijo. Voy a usar de nuevo, el combinador CSS. Cambiemos el tamaño de la fuente. Van a ser cinco Ram. Entonces necesitamos color. Voy a poner color a 00b 67. Y también necesitamos marchar por el lado derecho. Vamos a configurarlo en un Ram. Creo que ya terminamos con el encabezado. Todo se ve bastante bien. A continuación tenemos que encargarnos de los testimonios. Voy a ir al código VS y seleccionar testimonial. Voy a definir el ancho y la altura del testimonio. El ancho va a ser 33 Ram. En cuanto a la altura, la voy a poner al 100% Siguiente, voy a colocar los testimonios en diferentes líneas. Para eso, voy a seleccionar envoltorio de testimonios, vamos a establecer con 80% entonces voy a usar Flex box. Necesitamos Display Flex para colocar los artículos flex en diferentes líneas. Tenemos que usar envoltura flexible. Además, voy a justificar el contenido y ponerlo al centro. Ahora como puedes ver, los testimonios están alineados. A continuación, voy a crear algún espacio dentro del envoltorio de testimonios que voy a usar, padding. Necesitamos relleno para ser diez Ram en la parte superior e inferior y cero en los lados izquierdo y derecho. Bien. Todo se ve bastante bien. A continuación tenemos que volver al testimonial, y voy a añadir aquí un par de estilos diferentes Necesitamos margen para crear espacio entre los testimonios. Vamos a agregarlo a dos Ram en los cuatro lados. Entonces voy a poner sombra de caja a 01 Ram, diez Ram. El color va a ser un 113. Cero, entonces necesitamos 162. El siguiente será 235, y como la opacidad voy a usar 0.4 Ahora los testimonios se ven mucho mejor A continuación voy a hacerlos redondeados. Para eso necesitamos radio de borde con el valor uno Ram. Además, voy a crear algún espacio dentro del testimonio usando padding. Pongámoslo a dos m en los cuatro lados. Todo bien. Siguiente Voy a encargarme del top testimonial. Me refiero a la imagen y al nombre. En primer lugar, voy a seleccionar el envoltorio que es testimonial top. En realidad es testimonial top y no testimonial top. Vamos a usar Flex Books, vamos a exhibir Flex. Entonces voy a alinear elementos en el centro. Además, vamos a crear espacio en la parte inferior usando el margen. Abajo, 1.5 Ram. Bien, después de eso voy a seleccionar elementos span, me refiero al nombre del cliente. Escribamos este código tras imagen, voy a seleccionar testimonial top, seguido del elemento span Voy a aumentar el tamaño del teléfono. Digámoslo a 1.8 Ram. El texto va a ser mayúscula. Necesitamos transformar texto en mayúsculas. Entonces voy a poner margen izquierdo a dos Ram. A continuación necesitamos color, y va a ser 588. Finalmente necesitamos que el espaciado entre letras sea 0.1 run. Bien, así que todos los nombres se ven bastante bien. A continuación tenemos que cuidar los elementos profundos dentro del cuerpo testimonial. Me refiero al envoltorio de las estrellas. Seleccionemos cuerpo testimonial seguido del desarrollo Voy a poner margen a un Ram en la parte superior e inferior y cero en los lados izquierdo y derecho. Ahora tenemos algo de espacio. A continuación voy a cuidar de las estrellas. Seleccionemos Cuerpo Testimonial, seguido del desarrollo. Y entonces necesitamos span. Voy a aumentar el tamaño del teléfono, van a ser tres M. Luego cambia el color. Voy a usar aquí, este color verde. Las estrellas se ven bastante bien. Lo único que tenemos que hacer es encargarnos de esos párrafos aquí. Empecemos por el primer párrafo. Voy a seleccionar cuerpo testimonial, seguido de los elementos Y entonces necesitamos N selector hijo. Necesitamos selector infantil. Se podría pensar que aquí escribo uno. Pero si echamos un vistazo al archivo de correo HT, verá que el párrafo es el segundo miembro del desarrollo. En lugar de uno, necesitamos aquí dos. Aumentemos el tamaño del teléfono. Va a ser 1.8 Ram. Entonces necesitamos familia telefónica. Voy a ponérselo a Molly cursiva. Vamos a mover esta fila a continuación. Voy a poner el peso del teléfono en negrita. Y voy a cambiar el color. Va a ser de 0926 a siete. Por último, voy a usar aquí, margin, Bottom one, Ram. Bien, vamos a revisar los resultados. El primer párrafo se ve bastante bien. A continuación tenemos que tomar aquí del segundo párrafo. En realidad, voy a duplicar este código, luego cambiar el selector de gráficos. Van a ser tres. Voy a deshacerme de la familia telefónica, entonces el tamaño del teléfono va a ser 1.6 Ram. Entonces necesitamos que el peso del teléfono sea 300, el color será 466. Por último necesitamos margen. Abajo uno Ram. Bien, eso es. Los testimonios son estilizados y se ven bastante bien. Con la sección testimonial, ya terminamos. Pero antes de terminar la conferencia, voy a hacer una cosa más. Si echamos un vistazo al proyecto terminado, verás que tenemos aquí la I en el pie que creamos para la página principal. Lo único que voy a hacer es simplemente copiar el marcado HTM del pie de página de la página principal Vamos a copiarlo y pegarlo en la página del cliente. Si copio y pego aquí el pie de página y luego reviso el navegador, verás que tenemos aquí exactamente el mismo pie de página que teníamos en la página de inicio. Bien, eso es, La página del cliente está lista. A continuación, tenemos que encargarnos de la página de productos. Y para eso, pasemos a la siguiente conferencia. 52. Cómo crear la página de marcado HTML para productos: En el apartado anterior, hemos creado la página del cliente. Se ve bastante bonito y genial. Ahora es el momento de seguir adelante y comenzar a crear nuestra siguiente página, que va a ser la página del producto. Pasemos a la versión terminada de nuestro proyecto y vayamos a la página del producto. La página de productos consta de un par de partes diferentes. Tendremos aquí el encabezado, que incluye dos encabezamientos. Entonces tenemos aquí esta parte que incluye dos lados, izquierdo y derecho. En el lado izquierdo tenemos algunos elementos textuales. Y el botón en el lado derecho, se pueden ver imágenes bonitas y geniales del proyecto. Entonces tenemos aquí una sección que es algo así como sección de promoción. Tenemos aquí bonito y genial efecto de terror. Abajo, se puede ver el pie de página que hemos utilizado en las páginas anteriores I, en la página de inicio y en la página de clientes. Eso es todo sobre. La página del producto, creo que se ve bastante bonita y genial y también moderna. Es hora de comenzar a construir esta página. Voy a ir al código VS. Voy a crear nueva página, me refiero a archivo HTML y voy a llamarlo productos HTML. Además, vamos a crear el archivo CSS y llamarlo productos SS. Voy a cerrar dos expedientes entonces en realidad, necesitamos clientes. Vamos a abrirla. Voy a copiar todo el contenido y pegarlo en. Los productos del archivo HTML, necesitamos mantener aquí esos elementos HTML predeterminados. Sólo tenemos que cambiar el nombre del archivo CS. Va a ser productos que necesitamos aquí productos. A continuación, voy a dejar aquí navegación. Voy a eliminar la sección testimonial. Eliminemos la sección testimonial. Creo que ya está. El archivo HTML está listo. Echemos un vistazo a la página de productos. Como puedes ver, tenemos aquí la navegación y el pie de página. Voy a esconder pie de página por un tiempo. Para que nuestro proceso de trabajo sea más conveniente. Tenemos diferentes formas de ocultar los elementos. En este caso, voy a usar atributo llamado. Como puedes ver, el pie de página está oculto. ¿Bien? Entonces como dije, vamos a empezar a crear página de productos. Y lo primero que tenemos que hacer es preparar el marcado HTML como costumbre nuevos comentarios inseguros para la sección de productos Entonces voy a abrir elementos de sección con los productos de nombre de clase. A continuación, necesitamos desarrollos, que va a ser el envoltorio del contenido Voy a llamarlo envoltorio de productos. Como dije, la página del producto incluirá tres partes diferentes. El primero va a ser el encabezado que necesitamos aquí, encabezado Productos, incluirá dos elementos de encabezado. El primero va a ser H uno encabezando elementos. Voy a insertar aquí, temas y plugins. Entonces necesitamos H tres elementos de encabezamiento. El texto va a ser facturado los temas más populares y, y plug ins en el mundo Bien, sentémonos sobre el encabezado. A continuación tenemos que crear la segunda parte. Voy a llamarlo contenido de productos. Vamos a crear desarrollos con el nombre de la clase, Contenido de Productos. No sé si es un buen nombre, pero de todas formas voy a llamarlo. Dentro del contenido de los productos. Tendremos dos lados. Es decir, el lado izquierdo y el lado derecho. Necesitamos desarrollos que van a ser el contenido del producto dejado. Yo también voy a crear el lado derecho. Necesitamos productos de contenido ¿verdad? Bien, vamos a encargarnos del lado izquierdo. En el lado izquierdo tendremos H uno elementos de encabezado con el texto construido. Entonces voy a insertar aquí párrafo con algún texto ficticio de ipsum franco El número de palabras va a ser 13. También necesitamos botón. El tipo va a ser, necesitamos aquí type attribute y va a ser botón. Voy a adherir el nombre de la clase. La clase será productos, PTN. Como el texto del botón, voy a aquí mismo, aprende sobre nosotros que se sienta sobre el lado izquierdo. Ahora vamos a encargarnos del lado derecho. Y el lado derecho tendrá cinco imágenes distintas. Necesitamos tu etiqueta de imagen. Entonces tenemos que especificar la ruta del archivo. En primer lugar, tenemos que salir de la carpeta actual. Entonces tenemos que ingresar a la carpeta de imágenes. Y voy a seleccionar web dos, imagen uno. Duplicemos esta línea de código cuatro veces porque necesitaremos cinco imágenes. La segunda imagen va a ser web dos, imagen dos. Entonces tendremos web dos, imagen tres. siguiente va a ser la web cinco, imagen uno, y la web cinco, la imagen dos. Eso es todo sobre el contenido de los productos. Aquí tenemos las imágenes ahora mismo, son mucho más grandes, pero nosotros nos encargaremos de eso. Lo siguiente que voy a hacer es crear la tercera parte de la sección. La tercera parte va a ser, como dije, promo de productos. Tendremos dos partes. La primera parte van a ser formas. Aqui esas formas. Tenemos aquí círculo, dos círculos y el rectángulo voy a insertar aquí Desarrollos y va a ser productos promo formas. Vamos a tener aquí rectángulo, entonces voy a crear círculo pequeño y luego necesitamos círculo grande. Después de eso, voy a insertar otro desarrollo y va a ser contenido promocional. Dentro del contenido promocional, necesitamos H one heading elementos. El texto va a ser 100,000 Necesitamos aquí 100.000 más clientes ya están construyendo sitios web increíbles y modernos con código y crear. Entonces necesitamos unirnos a la comunidad más empoderada. Bien, eso es sobre el elemento encabezado. A continuación necesitamos aquí Batson. El tipo va a ser Patson. En cuanto al texto que necesitamos aquí, inscríbase hoy además, pero voy a interferir párrafo con el texto. Ofrecemos una garantía de devolución de dinero de 30 días. Únete a nosotros. Bien. Y finalmente te voy a insertar desarrollo. Va a ser promo shadow. Crearemos este bonito y fresco efecto de sombra. Por eso creamos este desarrollo aquí. Bien, creo que eso es que se crean todos los elementos y el marcado HTML está listo Ahora tenemos que darle estilo a esos elementos. Y para eso, pasemos a la siguiente conferencia. 53. Sección de contenido de productos de estilo: Bien, en la conferencia anterior, hemos creado el marcado HTML para la página de productos Ahora es el momento de darle estilo a esos elementos. En realidad, antes de empezar a estilizar esta sección, voy a cambiar algo en el archivo HTML. He añadido aquí cinco imágenes distintas, pero en realidad sólo necesitamos tres de ellas. Las tres primeras imágenes, fue mi error, y lo siento, voy a borrar esas dos imágenes porque no las necesitamos. Entonces voy a encargarme del CSS como, recuerden que hemos creado nuevo archivo CSS en la conferencia anterior. Se llama producto CSS. Voy a abrirlo, vamos a mover este archivo del lado derecho. Entonces voy a cerrar clientes archivo CSS. Lo primero que voy a hacer es adherir comentarios para productos. Después voy a seleccionar el elemento de sección. Se trata de productos. En primer lugar, voy a definir dentro de la altura. El ancho va a ser del 100% En cuanto a la altura, voy a hacerlo al 100% también. Y también voy a crear espacio en la parte superior de la sección usando marchando arriba a través para correr Bien, Así se aplican ancho y alto a la sección. Y también tenemos aquí el espacio entre la navegación y la sección. También se muestra la barra de desplazamiento. Si echamos un vistazo al proyecto terminado, verás que tenemos aquí la barra de desplazamiento con un color de fondo diferente. Voy a cambiarlo. Volvamos al código VS. Voy a abrir archivo CSS estilo. Tenemos que corregir todo este código y pegarlo aquí. Entonces estoy borrando este código. No lo necesitamos. Además, necesitamos eliminar la pista de la barra de desplazamiento. A continuación, cambiemos los colores aquí. El primer color va a ser 14b3. Eso es para el segundo color que voy a usar aquí, 538 FT vende. Se puede ver que se cambia el color de fondo de la barra de desplazamiento. Y se ve bastante bien y es apropiado a los colores de esta página. Siguiente Voy a encargarme del envoltorio de productos. Seleccionemos este elemento, la anchura y la altura. Ambos van a estar al 100% Entonces voy a usar Flex box para alinear los elementos. Necesitamos Display Flex. Entonces voy a cambiar la dirección porque vamos a alinear los elementos verticalmente. Necesitamos dirección flex para ser columna. Y también voy a alinear los elementos en el centro horizontalmente. Como puedes ver, el contenido se coloca en el centro. A continuación, voy a encargarme del encabezado. Seleccionemos la cabecera de productos. Necesitamos alinear texto en el centro usando texto. Alinear el centro. El texto del encabezado se coloca en el centro. A continuación, tenemos que encargarnos de los rubros. Voy a comenzar con el primer rubro, que es H uno. Necesitamos el encabezado del producto seguido del elemento H one heading. En primer lugar, voy a definir la familia telefónica. Va a ser, no necesitamos, necesitamos familia telefónica. Va a ser Molly cursiva. Entonces voy a cambiar el tamaño de fuente. El tamaño de la fuente va a ser de seis rondas. Como necesitamos espaciado entre letras para crear espacio entre las letras, va a ser 0.2 Ram. Y por último, voy a cambiar el color del encabezado. El color será 26353. Bien, la primera partida se ve bastante bien. A continuación tenemos que encargarnos del segundo rubro, que es tres. Vamos a seleccionar. Encabezado del producto seguido de los H tres elementos de partida. En primer lugar, voy a definir el tamaño de fuente. Van a ser tres Ram. Entonces necesitamos peso. Voy a hacer 300. También cambia el color. El color será 567599, luego creará margen. Estoy en el espacio, el margen va a ser dos Ram en la parte superior, luego cero en el lado derecho, luego 15 Ram en la parte inferior, cero en el lado izquierdo. Entonces aquí tenemos el encabezado. Ambos encabezados se ven bastante bien y ahora tenemos que encargarnos del contenido del producto Es decir, esta parte de aquí, como dije, y como ves las imágenes son más grandes. Voy a cambiar el tamaño de las imágenes y luego vamos a darle estilo al resto de los elementos. Voy a seleccionar productos, contenido. En ese momento necesitamos tu imagen con el selector de nésimo hijo. Voy a seleccionar la primera imagen. Necesitamos definir el ancho. Va a ser 35 Ram. Entonces dupliquemos este código dos veces, cambiemos los números de los selectores secundarios enésimo Necesitamos 2.3 La segunda imagen tendrá con igual a 20 Ram. En cuanto a la tercera imagen, va a ser 30 Ram. Ahora las imágenes se hacen más pequeñas y podemos darle estilo al resto de los elementos. Voy a seleccionar envoltorio, que es el contenido del producto. En primer lugar, voy a definir dentro de la altura. El ancho va a ser del 80% En cuanto a la altura, voy a hacerla 90 Ram. Entonces para que este elemento sea visible, necesitamos agregar sombra de caja para el valor 01 Ram, diez Ram, y el color va a ser valor RGBA, El primer valor va a ser 130, entonces tendremos 162, luego necesitamos 235 Y finalmente la opacidad va a ser 0.4 Ahora como se puede ver, el elemento, me refiero al contenido de los productos, el elemento wrapper es visible A continuación, voy a adherir relleno para crear algo de espacio dentro del elemento. El acolchado va a ser cinco Ram en los cuatro lados. Además, hagamos que las esquinas del elemento sean redondeadas usando el radio del borde. Y el valor va a ser uno Ram. Tenemos aquí acolchado y también las esquinas a su alrededor. A continuación, voy a alinear elementos dentro del contenido de los productos usando CSS, caja de lino Voy a agregar aquí bandera de exhibición y también necesitamos alinear elementos en el centro. En realidad, tenemos aquí un pequeño problema. Esta parte debe colocarse fuera del contenido de los productos. Ese podría ser el problema. Por error, he agregado contenido de baile dentro del contenido del producto. Cortemos este código y lo agreguemos fuera de los desarrollos. Ahora el problema debería ser arreglado. Bueno, aquí tenemos el mismo problema. Busquemos el contenido de los productos. Este es el cierre, la etiqueta del contenido de los productos. Por lo tanto, como dije, tenemos que agarrar el código del contenido de chromo y pegarlo fuera del contenido de los productos Ahora bien, el problema debería ser arreglado seguro. Y sí, como puedes ver, el contenido del contenido de Romo se coloca fuera del contenido de los productos. Ahora una vez que se soluciona este problema, tenemos que personalizar los elementos dentro del contenido del producto. Tenemos que comenzar con el contenido de los productos a la izquierda. Vamos a definir el ancho va a ser 40% del contenido de los productos. En cuanto a la altura, voy a hacerla al 100% entonces voy a crear padding. Me refiero a algo de espacio dentro del elemento. El relleno será de 15 gramos en la parte superior e inferior y cero en los lados izquierdo y derecho. A continuación, tenemos que alinear los elementos usando flex box. Voy a usar Display Flex. Entonces tenemos que colocar los elementos flex verticalmente en una columna. Por lo tanto, tenemos que cambiar la dirección en la que va a ser columna. Y también voy a crear espacio entre los elementos flex usando justificar el espacio de contenido de manera uniforme. Agregará espacio uniforme entre los elementos flex. Como puedes ver, los elementos del lado izquierdo están alineados. A continuación, tenemos que personalizar cada uno de los elementos. Tenemos que empezar por el rumbo. Voy a seleccionar H un elemento de encabezado. Necesitamos que quede contenido de productos, seguido del elemento H one heading. En primer lugar, cambiemos la familia telefónica. Va a ser croissant one Co . Entonces tenemos que cambiar el tamaño del teléfono. Serán diez carnero. Aquí tenemos el rubro. Si le echo un vistazo al proyecto terminado y miro el encabezado, verá que el encabezado tiene efecto de degradado lineal. Tenemos aquí color azul. Como puedes ver, el color tiene efecto de degradado lineal. Vayamos al código VS y establecemos el fondo en gradiente lineal. Necesitamos cambiar la dirección del color. La transición va a ser dos, ¿verdad? Entonces el primer color será 35730. Eso es para el segundo color, va a ser de dos a 509. Y también me voy a adherir 80% para poder cambiar la transición de color. A continuación tenemos que utilizar la siguiente propiedad. Se llama Web kit clip de fondo, Se debe establecer en texto. Por último, necesitamos color transparente. Ahora el encabezado debería tener efecto de degradado lineal. Tenemos aquí. Creo que es diferente al proyecto terminado. Vamos a comprobar los colores que necesitamos. 357.3 debería ser 730 y luego 22509. Bien, ahora tenemos aquí exactamente el mismo color de fondo. Es decir, el grado lineal infecta que tenemos en el proyecto terminado. Bien, sentémonos por encima de la cabecera. A continuación tenemos que cuidar el párrafo, seleccionar productos, contenido dejado, seguido de los elementos. En primer lugar, cambiemos la familia telefónica. Voy a usar tu teléfono llamado Mull per, entonces el tamaño del teléfono será 1.6 Ram También, voy a cambiar el color del texto. El color será 537983. Entonces voy a disminuir el espacio entre el encabezado y el párrafo usando margen superior. En este caso, necesitamos un valor negativo menos cinco Ram. Como puede ver, el párrafo está alicatado. En realidad, voy a cambiar la altura de la línea, va a ser 2.5 Ram. Ahora tenemos aquí un dato un poco mejor. Bien, eso es todo sobre el párrafo Siguiente, voy a encargarme del fondo. Sigamos adelante y seleccionemos Productos, Contenido a la izquierda, seguido de los elementos inferiores. El ancho de la parte inferior va a ser del 50% del lado izquierdo. La altura será de seis carnero. Voy a cambiar el fondo y voy a usar gradiente lineal. El gradiente lineal será el mismo que usamos para el encabezado. Voy a copiar el valor. Como puedes ver tenemos aquí el mismo efecto de gradiente lineal. A continuación tenemos que deshacernos del borde predeterminado de la parte inferior. Establezcamos el borde en ninguno y también hagamos las esquinas redondeadas usando el radio del borde. El valor va a ser cinco Ram. Ahora el botón se ve bastante bien, tenemos que cuidar el teléfono. Vamos a establecer el tamaño del teléfono. A 1.6 Ram. Entonces tenemos que transformar el texto en mayúsculas. Vamos a establecer el color a blancos, pero luego necesitamos espaciado entre letras. El espacio entre las letras será 0.2 Ram. Y por último, pongámonos más cerca de 0.0 Como puedes ver, el botón se ve bastante bien. En realidad, con el lado izquierdo, terminamos. Todo se ve bastante bien. A continuación tenemos que cuidar el lado derecho. Voy a seleccionar el lado derecho. Me refiero a elementos con el nombre de la clase contenido del producto. Derecha, vamos a definir el ancho. Va a ser el 60% de los elementos padres. Después voy a seleccionar Imagen. Vamos a usar este selector aquí. Vamos a agregar aquí algunos estilos comunes. El primero va a ser posición. Voy a poner posición a absoluta. Y entonces necesitamos posición relativa para los elementos padre, me refiero a los contenidos de los productos. Porque vamos a alinear las imágenes de acuerdo con los elementos del contenido de los productos. Voy a añadir aquí posición relativa. Entonces voy a hacer que las esquinas de las imágenes lo redondeen usando radio de borde. Va a ser un Ram. Además, necesitamos sombra de caja para todas las imágenes con los valores 02 Ram, ocho Ram, y el color será negro. En cuanto a la opacidad, voy a hacerla 0.5 Bien, así que aquí tenemos las imágenes con sombra de caja A continuación tenemos que posicionar las imágenes para eso. Agreguemos algunos estilos a las imágenes individuales. Voy a agregar aquí altura , van a ser 70. Entonces para mantener la calidad de la imagen, para evitar encogerla, voy a usar la cubierta de pies de objeto Necesitamos aquí cubrir y contener. Bien, a continuación tenemos que encargarnos de las posiciones. La posición de dos va a ser del 50% entonces necesitamos la posición correcta. Voy a establecerlo en 15% A continuación, necesitamos centrar el verticalmente dentro del elemento de contenido de productos. Para eso tenemos que usar transform con función translate y y el valor va a ser -50% Como puedes ver, la primera imagen está alineada y se coloca en el centro de los elementos I verticalmente A continuación, tenemos que cuidar la segunda imagen. Voy a añadir aquí. Posición va a ser 20% para la posición correcta, yendo 30 a 33% La segunda imagen está alineada y ahora tenemos que cuidar la tercera imagen, la posición. En realidad no necesitamos posicionarnos, necesitamos la posición inferior. La posición inferior va a ser del 20% entonces necesitamos posición correcta, 3% Eso es todo. Las imágenes están alineadas y en realidad con el elemento de contenido de los productos, ya terminamos. A continuación, tenemos que tomar del contenido para eso. Pasemos a la siguiente conferencia. 54. Sección de promoción de productos de peinado: En la conferencia anterior, hemos estilizado la primera parte de la página del producto Me refiero al contenido de los productos. Ahora tenemos que encargarnos de la segunda parte, que es la promoción de productos. Todos los elementos son creados y preparados y tenemos que estilizarlos una vez más. Echemos un vistazo al proyecto terminado. Vamos a personalizar esta sección aquí. Y tenemos que crear este bonito y genial efecto hover. Bien, vayamos al código VS y seleccionemos la promoción de productos. Voy a definir ancho y alto. El ancho va a ser del 100% Eso es por la altura. Va a ser 150 de altura de ventana gráfica, me refiero a una 50% de la vista Vamos a revisar el navegador. Como puedes ver, la altura no se aplica al elemento promo products. Podríamos tener algún error en el archivo HTML. Aquí tenemos productos promo. promoción de productos debe incluir el contenido de esta sección. En realidad, vamos a revisar la etiqueta de cierre. Bien, aquí tenemos algunos errores. Tenemos que cortar este código de aquí porque no forma parte del contenido de los productos. Vamos a pegarlo aquí. Además, tenemos que incluir contenido promocional en la promoción de productos. Tenemos que incluir aquí este elemento. Ahora pienso, y espero que todo esté correcto y el código funcione aquí. Tenemos la altura que es igual a un 50% de la ventana gráfica También se aplica el ancho 100% Bien. Después de eso, voy a encargarme de las formas, esas tres formas de aquí. Voy a comenzar con el rectángulo Romo. Sigamos adelante y seleccionemos estos elementos. En primer lugar, necesitamos definir el ancho y la altura. Ambos serán de 60 m. Entonces voy a cambiar el color de fondo. En realidad voy a usar gradiente lineal. Voy a definir la dirección de la transición de color, y la voy a establecer en 135 grados. En este caso, la dirección será en diagonal. El primer color va a ser 184b. En cuanto al segundo color, voy a hacerlo transparente. Y también voy a definir el valor porcentual. Va a ser 8% Aquí tenemos el rectángulo y el fondo degradado lineal. A continuación, voy a encargarme de la posición de este elemento. La posición va a ser absoluta. Para posicionar este elemento de acuerdo con los elementos padre, que es promo de productos, voy a usar position relative. A continuación, definamos las posiciones izquierda y superior. Voy a comenzar con la primera posición. Va a ser 25% Entonces la posición izquierda será 10% Vamos a revisar el navegador. Como puede ver, el rectángulo se posiciona a continuación. Voy a hacerlo redondeado porque si echamos un vistazo al proyecto terminado, verás que está redondeado. Voy a usar radio de borde con el valor diez Ram como puedes ver las esquinas del rectángulo a su alrededor. A continuación, voy a rotar este elemento. Para eso necesitamos transformar rotar la función Z. Necesitamos rotar el elemento por dirección z al valor que voy a insertar 45 grados. Como puede ver, se gira el rectángulo. Y por último, voy a disminuir la opacidad del rectángulo Hagámoslo 0.2 Bien, Eso es todo. Acerca del rectángulo promocional. A continuación te voy a llevar del círculo. Me refiero al pequeño. Sigamos adelante y seleccionemos círculo pequeño, definamos dentro de la altura. El ancho va a ser de forma. En cuanto a la altura, voy a hacer que se forme también. Entonces necesitamos color de fondo, que va a ser A D00 Entonces necesitamos hacer los elementos redondeados usando radio de borde con valor de 50% Let's. Consulta el navegador. Aquí tenemos el círculo. Después de eso, voy a encargarme del puesto. Fijemos su posición a absoluta. Entonces necesitamos posicionar para ser 20% En cuanto a la posición correcta, voy a hacerla 40% Como pueden ver, se posiciona el círculo. Y lo último que voy a hacer es disminuir ligeramente la opacidad Pongamos la opacidad a 0.7 Bien, veamos, en el círculo pequeño A continuación tenemos que encargarnos del círculo grande. Sigamos adelante y en realidad voy a duplicar este código, cambiar el nombre de la clase. Necesitamos aquí un círculo grande con y las alturas serán 50 Ram. Entonces tenemos que cambiar el color de fondo. Voy a usar color 34 DC, luego 87. Es de color verde. Entonces necesitamos radio fronterizo, 50% También posición absoluta. A continuación tenemos que poner alguna posición y va a ser 25% En cuanto a la posición correcta, voy a decirlo al 12% Vamos a deshacernos de la opacidad No lo necesitamos en caso del círculo grande. Bien, entonces aquí tenemos el gran círculo verde y todas las formas ya. A continuación tenemos que encargarnos del contenido promocional. Me refiero a este elemento aquí. Seleccionemos contenido promocional. Voy a establecer el ancho al 60% Entonces la altura será de 45 fram Además, voy a cambiar el fondo usando gradiente lineal. Vamos a usar la función de gradiente lineal. En primer lugar, definamos la dirección de la transición de color. En este caso, voy a usar dos, ¿no? Entonces el primer color será de 184 PB. En cuanto al segundo color, voy a usar 13036 Aquí tenemos el contenido promocional. Voy a colocarlo aquí en el centro. Para eso, necesitamos cambiar la posición. Voy a poner posición a absoluta. Entonces para centrar el elemento perfectamente, necesitamos la misma técnica. Necesitamos usar arriba a la izquierda y transformar propiedades. Voy a establecer la posición superior al 50% entonces la posición izquierda será 50% Además, necesitamos transformar con función translate y los valores serán -50% y otra vez -50% Ahora en este caso, el elemento está perfectamente centro dentro de la sección A continuación, voy a hacer la caja ligeramente redondeada. Para eso necesitamos radio de borde con el valor 1.5 de. Voy a crear algo de espacio dentro de la caja, pero solo necesitamos espacio en los lados izquierdo y derecho. Necesitamos poner con valor 0.5 frame. Bien, después de eso, voy a alinear el contenido del contenido promocional, me refiero a este elemento. Para alinear los elementos, voy a usar la caja S Flex. Necesitamos Display Flex. Entonces voy a cambiar la dirección porque vamos a colocar los elementos flex verticalmente. Por lo tanto, tenemos que cambiar la dirección y va a ser columna. Entonces voy a centrar el contenido en ambas direcciones. Estoy horizontal y verticalmente. Y para eso necesitamos justificar el centro de contenido y también un centro de líneas de artículos. Vamos a revisar el navegador. Entonces como puedes ver, el contenido se coloca en el centro. A continuación, voy a cambiar el puntero de registro del cursor para que todo esté listo. A continuación, tenemos que personalizar el cada elemento aquí dentro del contenido promocional. Voy a empezar por el rubro. Seleccionemos contenidos promocionales, seguido del elemento H one heading. Voy a configurar el teléfono de la familia para reflexionar cursiva. Entonces el tamaño del teléfono va a ser cuatro Ram. Además, voy a incrementar el espacio entre las letras. Digamos 2.2 Ram. Voy a capitalizar el texto. Por lo tanto, tenemos que utilizar la transformación de texto con el valor de capitalizar Por último, cambia el color, hazlo blanco. El encabezado es personalizado, pero como puedes ver, tenemos que alinear el texto en el centro. Para eso, voy a agregar aquí centro de texto. Ahora el texto se coloca en el centro. Bien, eso es todo sobre el rumbo. A continuación tenemos que tomar del botón. Sigamos adelante y seleccionemos Contenido promocional, seguido del elemento botón. En primer lugar, definamos dentro de las alturas. El ancho va a ser 25 Ram. Entonces necesitamos alturas que van a ser seis Ram. Cambiemos el color de fondo. Voy a usar 34 DC. Me refiero a este color aquí, que usamos en caso del círculo grande. Bien, vamos a revisar el navegador. Entonces aquí tenemos el botón, en realidad necesitamos algo de espacio entre esos tres elementos. Voy a crear ese espacio usando margen. Pongamos el margen a siete Ram en la parte superior, luego cero en el lado derecho. Cinco cuadros en la parte inferior y cero en el lado izquierdo. Ahora tenemos espacio. A continuación tenemos que deshacernos del borde predeterminado y también tenemos que hacer redondeado el botón. Necesitamos border none, luego border radius con el valor cinco botón Ram. Se ve bien, pero tenemos que encargarnos de la fuente. Cambiemos el tamaño de la fuente. Van a ser dos Ram. Entonces necesitamos que el peso de la fuente sea negrita. Además, voy a transformar texto en mayúsculas, luego cambiar el color, hacerlo blanco. Por último, necesitamos algo de espacio entre las letras. Vamos a establecerlo en 0.2 Ram. Y también cambia el cos, hazlo puntero. Eso es todo, sobre el botón, se ve bastante bien. Por último, tenemos que cuidar el párrafo. Así que sigamos adelante y seleccionemos contenido promocional. Vamos a establecer el tamaño de fuente en 2.5 Ram. Entonces el peso del teléfono va a ser de 300. Además, necesitamos que el color sea blanco. Entonces voy a capitalizar el texto. Necesitamos que el texto se transforme con el valor para capitalizar. Y finalmente crear espacio entre las letras en 32.1 Ram. Bien, el párrafo también se ve bastante bien, y en realidad los tres elementos dentro del contenido promocional están personalizados. A continuación tenemos que crear la sombra. Me refiero a esta sombra de aquí. Como recuerdas, hemos creado un elemento vacío llamado promo shadow. Voy a seleccionar este elemento. Necesitamos sombra promocional. Tengamos dentro de los cueros, el ancho va a ser del 90% entonces los cueros serán diez carnero. Cambiemos el color de fondo. Voy a usar color 0525c. Aquí tenemos la sombra. A continuación tenemos que encargarnos de su posición. Vamos a establecer la posición absoluta. Entonces necesitamos que la posición inferior sea -20% la posición de la sombra se cambia A continuación tenemos que hacerlo redondeado al radio. Vamos a ponerla en diez Ram. Pero entonces voy a rotar los elementos usando la función transform rotate x. Y el valor va a ser de 20 grados. El elemento está ligeramente girado. A continuación tenemos que crear el efecto de desenfoque. Para eso, necesitamos filtrar con función blar y el valor va a ser tres ram, el elemento está borroso y ahora tenemos que disminuir ligeramente la Vamos a poner opacidad 2.7 Bien, la sombra está casi lista A continuación tenemos que crear el entorno de tres D. Y el efecto de la sombra será mucho más fresco. Voy a volver al código VS. Para crear el entorno de tres D, tenemos que usar la propiedad llamada Perspectiva. Y voy a agregarlo al envoltorio que es promo de producto que fijó Perspective en 50 Ram. Entonces para aplicar esta propiedad a la sombra, tenemos que agregar otra propiedad al padre del elemento promo shadow. En este caso el padre es contenido promocional y tenemos que agregar aquí transformar estilo. Con el valor preservado, tres D. Ahora como pueden ver, tenemos aquí un resultado mucho mejor y fresco. Bien, ahora es el momento de crear el efecto hover. Al flotar. Voy a trasladar el contenido promocional al usuario. Este efecto aquí, se acerca más al usuario. Tenemos que hacer eso usando la propiedad transform. En primer lugar, voy a agregar aquí, hover a los contenidos de Romo Entonces necesitamos transformarnos. Si utilizo aquí solo traduzco la función Z, entonces vamos a sobrescribir este código aquí Tenemos que agarrar esta función, agregarla aquí. Y tenemos que añadir aquí traducir la función Z con el valor diez. Hacer el hoffect funciona bien como invitado, tenemos que hacer este efecto más suave Para ello, necesitamos transición con los valores a y 0.5 segundos. Ahora tenemos buenos y chulos que hechos. A continuación tenemos que cambiar el fondo de la promoción del producto. También, necesitamos mover esas formas también. Para hacer eso, voy a usar el script Java. Se puede pensar que podemos hacer eso usando CSS. Pero una vez que seleccionamos los elementos, necesitamos cambiar el estilo del elemento padre, que es la promoción del producto. No podemos hacer eso usando CSS. Por eso vamos a usar Javascript. En realidad, vamos a crear un nuevo archivo Javascript dentro de la carpeta JS. Voy a llamarlo productos JS. Entonces necesitamos vincular este elemento al archivo HTML. Duplicemos este código aquí y cambiemos el nombre del archivo. Va a ser productos S. Voy a mover este archivo aquí. En primer lugar, necesitamos seleccionar dos elementos diferentes. El primero es el envoltorio. Vamos a crear una nueva variable y llamarla productos. Voy a seleccionar este elemento usando el método selector de consultas. Especificemos aquí el nombre de clase que es. Duplicemos esta línea. La segunda variable va a ser el contenido promocional. Cambiemos el nombre de la clase. Necesitamos aquí contenido promocional. Después de eso, voy a agregar el oyente de eventos al contenido promocional No necesitamos puntos, necesitamos contenido promocional. En realidad, necesitamos aquí contenido. Como dije, voy a agregar a estos elementos en oyente de eventos y el evento va a ser el mouse sobre Es lo mismo que el efecto hover. A continuación, tenemos que pasar aquí la función abc, que se ejecutará una vez que pasemos el cursor sobre los elementos, me refiero al contenido promocional Voy a agregar nueva clase al elemento de promoción de productos. Entonces usaremos esta nueva clase en el archivo CSS y definiremos el nuevo estilo. Voy a agregar aquí, productos promo class list property y luego agregar método. Voy a llamar al nombre de la clase animate. Tenemos que agregar a la promoción de productos en hover. Pero una vez que salimos del mouse, entonces tenemos que eliminar este nombre de clase del elemento promo products. Por lo tanto, voy a duplicar este código aquí. En los eventos de mouse out tenemos que eliminar la clase animate de los productos que la promoción puede vender Eso es todo sobre el guión del gobernador. A continuación, tenemos que volver al archivo CSS y encontrar productos promocionales. Voy a seleccionar este elemento usando class animate. Necesitamos animar seguido de promoción de producto pro Tenemos que cambiar el color de fondo. Voy a usar el valor RGBA y van a ser diez. 59, luego 156, y la opacidad será 0.7. Además, usa la transición para efectos más suaves, necesitamos aquí todos 0.3 segundos. Si coloco el cursor sobre el contenido de la promoción, entonces se cambiará el fondo Todo funciona bien. A continuación tenemos que encargarnos de las formas. Voy a seleccionar Rectángulo Promo. Con la clase animada, necesitamos animadas seguidas del rectángulo promocional al pasar el Voy a incrementar la opacidad de los elementos. Digamos que 2.8 Además, necesitamos aumentar el tamaño del rectángulo usando la función scale. Pero además de la función scale, tenemos que agregar aquí rotar la función Z también. Para evitar sobrescribir el código, voy a agarrar este código de aquí También agregue aquí la función de escala. Voy a aumentar la escala del rectángulo. Hagámoslo 1.4 También necesitamos transición. Va a ser todo 0.3 segundos. Bien, pasemos el cursor sobre el contenido de Romo. Como puede ver, la escala del rectángulo aumenta al flotar Y también la opacidad del elemento aumenta también. Bien, pasemos a las siguientes formas. Es decir, tenemos que encargarnos del círculo pequeño. Selecciónelo usando class animate. En caso del círculo pequeño, voy a aumentar la opacidad a uno Además, voy a aumentar la escala. Hagámoslo 1.4 también. Agreguemos aquí sondeo de transición 0.3 segundo. Como puedes ver, también tenemos un efecto agradable y genial con el círculo pequeño. A continuación tenemos que tomar de la tercera forma, que es este círculo grande aquí. Seleccionemos círculo grande con animación de clase. En el caso del círculo grande, solo necesitamos aumentar la escala. Vamos a establecerlo en 1.4 y también agregar la llamada de transición 0.3 segundo. Bien, así que todo se ve bastante bien. Lo único que tenemos que hacer es tomar de la sombra. También tenemos que cambiar la sombra al flotar. Busquemos la sombra y luego la seleccionemos. Con clase animada en hover, voy a aumentar la altura Va a ser 13 Ram. Voy a cambiar la posición inferior. Digamos que dos -15% entonces voy a cambiar, también efecto polar que necesitamos aquí, 2.5 Ram Por último, vamos a cambiar la opacidad, hacerla 0.9 voy a agregar aquí transición p 0.3 segundo Si vuelo el cursor sobre el contenido, entonces la sombra cambiará En realidad, tenemos aquí un efecto agradable y genial. Bien, con la sección de promoción de productos, ya terminamos. Lo único que tenemos que hacer en caso de la página de productos es agregar aquí el pie de página. Me refiero al pie que lo agregamos a la página del cliente como recuerden para poder hacer eso solo necesitamos copiar footer de aquí y pegarlo. En realidad ya tenemos aquí pie de página. No necesitábamos copiar y pegar, solo necesitamos deshacernos de este atributo desde aquí. Simplemente se me olvidó que aquí tenemos pie de página. Ahora, todo debería funcionar bien. Podemos decir que con la página del producto ya terminamos. Todo se ve y funciona bien. Bien, sentémonos sobre la página del producto. A continuación, tenemos que encargarnos de la página de contacto. Pasemos a la siguiente conferencia. 55. Cómo crear el marcado HTML para la página de contacto: En la conferencia anterior, hemos terminado de trabajar en la página del producto. Se ve bastante bonito y genial. Ahora tenemos que seguir adelante y empezar a cuidar la siguiente página, que es la página de contacto. Echemos un vistazo al proyecto terminado. Aquí tenemos la página de contacto. Consiste en un encabezado donde tenemos dos rubros diferentes Además, puedes ver aquí dos partes distintas. En el lado izquierdo, puedes ver un par de campos de entrada diferentes. Podemos contactar con el equipo de soporte. En cuanto al lado derecho, puedes ver aquí un soporte técnico, Podemos platicar con soporte. Y también puedes ver aquí un par de opciones diferentes. También tenemos aquí un círculo agradable y genial detrás de la sección del equipo de soporte. Bien, eso se sienta sobre la sección de contacto. Vamos al código VS y organicemos los archivos de trabajo para una nueva página. Voy a cerrar esos archivos. Entonces voy a crear nuevo archivo en la carpeta HTML. Va a ser contacto Html. Además, voy a crear archivo de contactos. A continuación, voy a mover este archivo aquí del lado izquierdo. Entonces copiemos todo el contenido en archivo HTM del producto y lo peguemos aquí. Entonces voy a cerrar este archivo. Tenemos que cambiar el nombre del archivo CSS. Va a ser Contact CSS. Entonces tenemos que quitar la sección del producto. Esta sección aquí. Vamos a deshacernos de él. Además, voy a esconder el pie de página por un tiempo y deshacerme de este enlace desde aquí, así que todo está listo. Vamos a la página de contacto. Aquí tenemos la página vacía con solo la navegación. En esta conferencia, voy a crear el HTM Male Markup para la sección de contacto Vamos a instituir tus comentarios para el contacto. Entonces voy a abrir elementos de sección con el nombre de clase contact dentro del elemento section que necesitamos, que será contact wrapper. Envolverá todo el contenido de esta sección. A continuación, voy a insertar aquí vacíos Desarrollos, que será círculo de contacto, me refiero a este círculo aquí. Después de eso, necesitamos crear el encabezado. Entonces voy a abrir la etiqueta p con el encabezado de contacto de nombre de clase en el que voy a insertar dos encabezados diferentes El primero será H un elemento de encabezado con el contacto de texto. En cuanto al segundo encabezamiento, va a ser H tres elemento encabezado. Voy a asegurar. Si tiene alguna pregunta, no dude en ponerse en contacto. Eso es todo sobre el encabezado. A continuación necesitamos asegurar de tu, que será el lado del contenido de contacto, ese elemento Tendremos dos partes, me pongo en contacto con envoltorio de formulario y contacto con envoltorio de soporte. Esas dos partes aquí vamos a abrir etiqueta profunda, que va a ser envoltorio de formulario de contacto. Voy a insertar el símbolo de Google Material. Vamos al navegador y busquemos símbolos de Google Material. Voy a buscar el icono llamado grupo. Aquí lo tenemos en realidad, voy a seleccionar redondeado. Vamos a copiar el elemento span de aquí y pegarlo aquí. Voy a comprobar si se muestra el icono. Entonces como pueden ver, tenemos aquí icono. Bien, a continuación necesitamos cuatro elementos de rumbo y va a ser contacto. El equipo de soporte. Después de eso, voy a entrar a tu párrafo con el texto, si tienes alguna duda, envíanos un correo electrónico. Después del párrafo, voy a abrir elementos de formulario. Dentro de los elementos del formulario, tendremos un par de entradas diferentes. Voy a abrir entrada con el texto tipo, y también necesitamos aquí un atributo placeholder Poner el nombre del texto. Voy a duplicar este código dos veces. La siguiente entrada será para correo electrónico, necesitamos cambiar el tipo y también el atributo placeholder, va a ser la dirección de correo electrónico En cuanto al tercer elemento de entrada, voy a saltarme aquí, escriba texto. En cuanto al atributo placeholder, voy a insertar tu asunto Entonces después de los elementos de entrada, necesitamos área de texto, tendrá el atributo placeholder, el texto va a ser tu mensaje Entonces finalmente necesitamos aquí botón con botón tipo como el texto del botón. Voy a insite que envíes mensaje. Bien, eso es. Acerca del envoltorio de formulario de contacto. A continuación voy a crear la segunda parte que va a ser envoltura de soporte de contacto. Voy a insertar aquí de nuevo, símbolo de Google Material. Vayamos al sitio web y busquemos icono llamado construcción. Bueno, tenemos que agarrar este icono. Vamos a copiar esto. Panelmentlose, esta ficha Insertemos aquí panelment, y luego revisemos el navegador Aquí tenemos el segundo icono después del elemento span. Voy a insertar sus cuatro encabezamientos con el texto, Soporte técnico. Entonces tendremos aquí párrafo con el texto. Si necesitas ayuda, puedes chatear directamente con nuestro equipo de soporte. Después de eso, voy a insertar tu botón con botón tipo. Voy a añadir aquí el nombre de la clase. Va a ser chat BTN. En cuanto al texto, voy a insertar Chat con soporte. A continuación voy a insertar la etiqueta p, que será lista de soporte. Voy a insertar aquí un par de patrones diferentes. Vamos a abrir la etiqueta de botón con los tipos. También voy a agregar aquí el nombre de la clase. Va a ser soporte menos PTN. El primer PTN. El primer patrón será antes como comunidad tendremos cuatro patrones diferentes. Entonces voy a duplicarlo tres veces. Entonces voy a cambiar el contenido de cada patrón. El segundo es Browse Documentation. Entonces tenemos aquí, únete al grupo de Facebook. Por último, necesitamos aquí, explorar, explorar el bloque. Creo que eso es todo sobre el marcado nulo de nuestra sección de contacto Espero que todo sea correcto. Veremos que cuando empecemos a darle estilo a esta sección, tenemos aquí todos los elementos. Están preparados y ahora tenemos que darle estilo a esta sección Para eso, pasemos a la siguiente conferencia. 56. Sección de contacto de estilo: En la conferencia anterior, hemos creado el marcado HTML para la sección de contacto Ahora como dije, tenemos que darle estilo una vez más a esta sección. Echemos un vistazo al proyecto de acabado. Así es como se ve la página de contacto. Tenemos aquí cabecera y dos partes diferentes. Vamos a personalizar todos los elementos. Vamos al código VS e insertemos nuevos comentarios en el archivo CSS. Va a ser contacto. Después voy a seleccionar elemento de sección que tiene nombre de clase contacto. Y voy a definir con en altura, el ancho va a ser 100% En cuanto a la altura, voy a hacerla 150 altura de ventana gráfica Me refiero a un 50% de la ventana gráfica. Y además voy a crear algún espacio en la parte superior usando margen, top 30 m. Como puedes ver, se aplican estos mosaicos. En realidad vamos a cambiar la barra de desplazamiento. Si echamos un vistazo al proyecto terminado, verás que tenemos aquí una barra de desplazamiento azul. Voy a copiar el código del archivo de productos. Necesitamos este código. Voy a agarrarlo y pegarlo aquí en la parte superior. Ahora como puede ver, se cambia la barra de desplazamiento. Bien, a continuación voy a encargarme del envoltorio de contenido. Voy a definir dentro de alturas, ambas serán 100% Además, voy a alinear el contenido usando caja de lino Necesitamos exhibición de lino. Tenemos que cambiar la dirección porque vamos a alinear los elementos flex verticalmente. Necesitamos dirección para ser columna. Además, voy a alinear elementos en el centro. Bien, así como pueden ver, el contenido de la sección de contacto está alineado. A continuación, voy a encargarme del círculo. Estoy en este círculo aquí. Sigamos adelante y seleccionemos círculo de contacto. Voy a definir con alturas. Vamos a poner con 290 m. entonces la altura va a ser 90 Ram también. Estamos haciendo este elemento a su alrededor, así que necesitamos bordear el radio con el valor del 50% Siguiente Voy a cambiar el fondo. Voy a usar gradiente lineal. En primer lugar, como se define, la dirección, va a ser dos, ¿verdad? En cuanto a los colores, el primero será 651f. En cuanto al segundo color, voy a hacerlo transparente. Y también necesitamos aquí el valor porcentual transparente será del 30% Aquí tenemos el círculo con un efecto de gradiente lineal. Voy a cambiar la posición del elemento. Fijemos la posición a absoluta. Entonces necesitamos la posición relativa, o el elemento padre, que es el envoltorio de contacto. Vamos a posicionar el elemento de acuerdo con el elemento padre de acuerdo con el envoltorio de contacto. Entonces necesitamos aquí posición relativa. A continuación, voy a definir la posición inferior, y va a ser 12% En cuanto a la posición izquierda, voy a ponerla en 20% Finalmente, voy a disminuir la opacidad del círculo Hagámoslo 0.2 El círculo está muy bien posicionado. A continuación voy a encargarme de los rubros. Sigamos adelante y seleccionemos el encabezado de contacto. Voy a alinear texto en el centro usando texto Alinear Centro. Como puede ver, el texto se coloca en el centro de ambos encabezados. Voy a empezar a peinar el primer rubro. Sigamos adelante y seleccionemos el encabezado de contacto H uno. Cambiemos la familia de teléfonos. Va a ser Lee cursiva. Entonces voy a definir el tamaño del teléfono. Vamos a ponerla en seis Ram. Además, necesitamos espaciado entre letras. Voy a hacer espacio entre las letras 0.2 Ram y también cambiar el color del encabezado, y va a ser 26353 Bien, Como pueden ver, la primera partida se ve bastante bien. A continuación tenemos que encargarnos del segundo rubro. Seleccionemos el encabezado de contacto seguido de los H tres elementos de encabezado. Aumentemos el tamaño del teléfono. Va a ser de tres asaltos. Entonces voy a cambiar el peso del teléfono. Vamos a establecerlo en 300. Voy a cambiar el color del rumbo y va a ser 567599 Entonces necesitamos crear algo de espacio en la parte superior y también en la parte inferior. Voy a usar margen y van a ser dos Ram en la parte superior. El cero en el lado derecho, 15 Ram en el lado inferior, y luego cero en el lado izquierdo. Bien, aquí tenemos el segundo rumbo. Ambos se ven bastante bien. A continuación tenemos que encargarnos del contenido de contacto. Quiero decir, esta parte de aquí. Sigamos adelante y seleccionemos Contact Content. Voy a colocar ambas partes del contenido de contacto una al lado de la otra, horizontalmente. Y para eso voy a usar flex book. Como puede ver, ambos lados se colocan horizontalmente. A continuación voy a seleccionar la primera parte que es el envoltorio de formulario de contacto. Definamos dentro de las alturas. El ancho va a ser 45 Ram. Entonces necesitamos altura, va a ser 78 Ram. Y luego voy a cambiar el color de fondo. Va a ser blanco. Para que el elemento sea claramente visible, vamos a definir la sombra de caja. Necesitamos 01 Ram, diez Ram, y el color RGBA Los valores serán 130162, luego 235, y la opacidad va a ser 0.4 Aquí tenemos la primera parte, el lado izquierdo del contenido del contacto En realidad necesitamos colocar el círculo detrás de estos elementos. Para eso, voy a usar la propiedad índice z. Establezcamos el índice en diez y luego revisemos el navegador. Ahora como puedes ver, el círculo terminó detrás del elemento. A continuación, voy a crear algo de espacio dentro de la caja usando relleno. El acolchado será de cuatro en los lados superior e inferior, y luego dos Ram en los lados izquierdo y derecho. Bien, después de eso voy a hacer redondeadas las esquinas de la caja. Para eso necesitamos radio fronterizo uno Ram. Entonces voy a crear espacio en los lados izquierdo y derecho del elemento usando margin. Necesitamos aquí 0.3 Ram. Además, voy a alinear texto en el centro que está sentado alrededor del envoltorio. En realidad, como pueden ver, tenemos aquí un pequeño problema. La navegación está terminando detrás de este elemento. Voy a arreglar ese problema. Vamos a abrir estilo. Vamos a archivar y encontrar la barra de navegación que tenemos aquí es la propiedad index, y voy a aumentar el valor. Vamos a establecerlo en 100. Ahora tenemos aquí el mismo problema. Vamos a establecer el índice a 1,000 Bueno, ahora el problema está arreglado. Bien, sigamos adelante y continuemos estilizando la sección de contexto. Ahora mismo, voy a cuidar el icono, que es un símbolo material de Google. Sigamos adelante y seleccionemos Contact Form wrapper, seguido del elemento Pan. Entonces aumenta el tamaño del teléfono. Va a ser un gramo. Además, voy a cambiar el color del icono, y voy a decir 2842 Como puede ver, el icono se ve bastante bien. A continuación tenemos que encargarnos del rumbo. Seleccionemos Contact Form wrapper seguido del elemento four heading. Voy a configurar la familia de teléfonos para reflexionar cursiva, entonces voy a establecer el tamaño del teléfono en 1.6 run Entonces necesitamos el peso del teléfono , van a ser 300. Entonces voy a transformar texto en mayúsculas. A continuación, cambiemos el color del texto. Voy a usar el mismo color aquí, vamos a agarrarlo de aquí. Y agrega aquí un signo de libra. Entonces voy a aumentar el espacio entre las letras. Vamos a configurarlo 2.1 Ram. Por último, voy a crear algo de espacio usando margen. Necesitamos margen, tres Ram en la parte superior. Entonces tenemos cero en el lado derecho, un Ram en el lado inferior y cero en el lado izquierdo. Aquí tenemos el rubro, se ve bastante bien. A continuación tenemos que encargarnos del párrafo aquí. Voy a seleccionar envoltorio de formulario de contacto. En primer lugar, definamos por tamaño, va a ser 1.8 Ram. Entonces voy a cambiar el color. Hagámoslo 5646. Cambiar el peso de la fuente. Vamos a mover esta línea hacia arriba entonces necesitamos marchar por el lado inferior Vamos a ponerla a siete corridas cam saw que se sienta encima del párrafo. El lado superior de la envoltura se ve bastante bien. A continuación tenemos que encargarnos del formulario, me refiero a esos campos de entrada. Así que sigamos adelante y seleccionemos el envoltorio de formulario seguido de los elementos del formulario. Voy a usar Flex box para alinear los campos de entrada, necesitamos Display Flex. Entonces para colocar los elementos de entrada verticalmente en una columna, tenemos que cambiar la dirección del cuadro flex y tenemos que configurarlo en columna. Como puede ver, los campos de entrada se colocan en una columna verticalmente. A continuación, los voy a personalizar. Voy a establecer para wrapper seguido la entrada t. Luego seleccionamos el área de texto también. En primer lugar, definamos un poco. Va a ser 100% Entonces voy a cambiar el espacio I, luego voy a crear algún espacio entre las entradas. Pongamos el margen a dos Ram. Y luego cero, cambia el color de fondo de las entradas y ponlo en 024 Vamos a revisar el navegador. Bien, a continuación voy a aumentar el espacio dentro de las entradas. Para eso, voy a usar pudín. Va a ser un Ram en todos los lados excepto en el lado izquierdo. Van a ser dos Ram, quiero decir dos Ram del lado izquierdo. Como puede ver, tenemos espacio dentro de las entradas. A continuación, me voy a deshacer de este borde predeterminado. Pongamos frontera a ninguno. Voy a hacer las esquinas un poco redondeadas usando radio de borde con el valor 0.5 fram Entonces establecemos el tamaño de fuente a 1.5 fram y también cambiemos el peso de la fuente Voy a llegar a 300, ¿de acuerdo? Entonces, como puedes ver, los campos de entrada se ven bastante bien. A continuación, tenemos que definir la altura por separado para las entradas y para el texto Aa, porque necesitamos diferentes alturas para esos elementos. Seleccionemos el envoltorio de formulario de contacto, luego las entradas y establecemos la altura en cinco. Entonces voy a duplicar este código y cambiar entrada a texto Aa. Necesitamos altura para ser diez Ram. Además, voy a agregar aquí una propiedad más. Se llama Re size y voy a hacerla ninguna. Ya no podemos cambiar el tamaño del área de texto. Bien, entonces creo que esos campos de entrada se ven bastante bien. A continuación tenemos que encargarnos de los atributos de marcador de posición. Voy a cambiar el color del atributo placeholder para las entradas y también para el área de texto Voy a agarrar este selector desde aquí. Después pasado, copiemos y peguemos. Voy a agregar aquí placeholder pseudo class, me refiero a pseudo Entonces voy a agregar aquí propiedad de color. Y el color, va a ser 0335. Como puedes ver, los atributos de marcador han cambiado sus colores y se ven bastante bien A continuación tenemos que encargarnos del botón. Sigamos adelante y seleccionemos Contact Form Wrapper, seguido del elemento Boson Voy a cambiar la altura, van a ser cinco Ram. Entonces voy a cambiar el fondo usando gradiente lineal. El rumbo va a ser dos derechos. Entonces tenemos que insertar aquí dos colores diferentes. El primero será C40c. En cuanto al segundo color, voy a hacerlo 85, en realidad 852 A. El color ha cambiado Quiero decir, el color de fondo, ahora es gradiente lineal. Voy a deshacerme del borde predeterminado, vamos a establecerlo en non, y también hacer que el botón sea redondeado usando radio de borde. Van a ser cinco Ram. Ahora tenemos aquí resultados mucho mejores. Voy a cambiar la fuente. Voy a personalizar la fuente y no cambiar, establecer el tamaño del teléfono en 1.4 Ram. Entonces el peso del teléfono va a ser audaz. A continuación, voy a transformar texto a por caso. También aumenta el espacio entre letras. Que sea 0.1 Ram. Cambia el color, va a ser blanco. Y por último, necesitamos punto cursor que se asiente sobre la primera parte del contenido de contacto ya que tenemos que tomar aquí de la segunda parte. Sigamos adelante y seleccionemos el envoltorio de soporte de contacto. Voy a definir ancho y alto. El ancho lo va a balancear aquí con va a ser 45 Ram. Entonces necesitamos altura, voy a hacerla 67 Ram. Después cambia el color de fondo, hazlo blanco. Además, necesitamos sombra de caja para que el elemento sea visible. La sombra de caja será 0110 Ram como color. Voy a insertar este color aquí. Aquí tenemos la segunda parte que voy a agregar aquí para el radio, va a ser uno Ram. Entonces necesitamos margen en el lado izquierdo y derecho , van a ser tres Ram. Además, es un texto de línea en el centro. Bien, después de eso, voy a tomar aquí del ícono. Seleccionemos el envoltorio de soporte de contacto, seguido de este panelement que necesitamos aquí, tamaño del teléfono, va a ser ocho Ram Entonces voy a añadir aquí color. El color será 6797 FF. En realidad, tenemos aquí algún problema que necesitamos aquí. Póngase en contacto con el envoltorio de soporte. Ahora el problema está arreglado. En realidad, creo que aquí nos falta algo porque aquí no tenemos espacio. Necesitamos espacio y tuvimos que hacerlo usando relleno. Aquí falta. Relleno con valores cuatro Ram y luego dos Ram. Ahora bien, el problema debería ser arreglado. Sí, ahora tenemos aquí el mismo resultado. Yo voy a encargarme del rumbo. Sigamos adelante y seleccionemos envoltorio de soporte de contacto seguido del elemento H four heading. Voy a configurar el teléfono de la familia para reflexionar cursiva. Entonces el tamaño del teléfono va a ser de 1.6 mm. Cambia los pesos del teléfono , van a ser 300. Entonces voy a transformar texto a mayúsculas. Entonces cambiemos el color. Voy a hacerlo 6797f. Comprobemos el navegador, el encabezado se ve bien. A continuación, voy a aumentar el espacio entre las letras. Hagámoslo 0.1 Ram. Y también, necesitamos espacio usando margen. El margen será de tres Ram en el lado superior, cero en el lado derecho, uno Ram en el lado inferior y luego cero en el lado izquierdo. Bien, el rumbo se ve bastante bien. A continuación, tenemos que tomar aquí del párrafo. Sigamos adelante y seleccionemos Contact support wrapper seguido del elemento. El tamaño de la fuente será 1.8 Ram. Entonces tendremos aquí el peso de la fuente. Van a ser 300. Vamos a darle la vuelta al color. Voy a hacer que sea 56460. Entonces necesitamos margen en la parte inferior. Vamos a ponerla en cuatro Ram. Eso es sobre el párrafo. A continuación tenemos que encargarnos de la cabaña BTN. Me refiero a este botón de aquí. Sigamos adelante y seleccionemos choza BTN. Voy a establecer el ancho al 100% entonces la altura será de cinco. Voy a cambiar el fondo. Vamos a usar de nuevo, gradientes lineales. El rumbo será de dos derechos para los colores. Voy a usar 651f. El segundo color, va a ser 48 FF. Vamos a revisar el fondo aquí. Tenemos el fondo. Voy a deshacerme de la frontera por defecto. También necesitamos aquí radio de borde con valor de cinco M. Vamos a revisar el fondo. Se ve bastante bien. Tomemos aquí del PontSoy, va a establecer el tamaño del teléfono 1.4 M. Entonces va a ser audaz También, lo voy a hacer por caso, entonces voy a aumentar el espacio entre las letras. Vamos a configurarlo 2.1 Ram. Cambia el color, hazlo blanco. Entonces como puedes ver, el fondo se ve bastante bien. Lo único que tengo que hacer es aumentar el espacio en la parte inferior. Y también tenemos que hacer el puntero del cursor. Así que pongamos margen abajo cinco Ram. Y luego puntero del cursor. ¡Uy! Bien. En realidad, sí, cursor. Bueno, tenemos aquí un pequeño tema. Creo que también necesitamos la propiedad del índice Z para esta parte, porque como supongo el círculo se superpone a esta parte. Voy a añadir aquí, no aquí, sino aquí. Índice con el valor diez. Ahora vamos a comprobarlo. Como puede ver, el problema está arreglado. Bien, a continuación tenemos que encargarnos de esos patrones aquí, vamos a estilizarlos de esta manera. adelante y seleccionemos el envoltorio, que tiene lista de soporte de nombre de clase. Voy a usar Display Flex, porque vamos a alinear esos botones usando Flexbox Voy a alinearlos verticalmente en la columna. Necesitamos dirección flex para ser columna. Bien, ahora los vamos a personalizar. Sigamos adelante y seleccionemos Lista de soporte, seguido del elemento botón. Vamos a establecer la altura, que sea 4.5 Ram. Además, necesitamos espacio entre esos botones. Necesitamos margen para ser uno Ram en el lado superior e inferior y cero en los lados izquierdo y derecho. También cambia el color de fondo. Usa aquí, color F245. Veamos los resultados a continuación. Voy a deshacerme de la frontera por defecto. Pongamos frontera a ninguno. Necesitamos radio de borde para hacer las esquinas redondeadas. El radio fronterizo será de cuatro Ram. Entonces voy a encargarme de los teléfonos. Vamos a establecer el tamaño del teléfono en 1.4 Ram. Voy a transformar texto a mayúsculas. Entonces el color será cuatro A, no una sino ocho A F. Entonces necesitamos dejar espaciado, vamos a ponerle 2.1 Ram. Y finalmente necesitamos puntero curser, ¿de acuerdo? Como puedes ver, todo se ve bastante bien. Y en realidad con esta página, casi terminamos. Lo único que tenemos que hacer es agregar aquí el pie de página. Para eso, solo necesitamos deshacernos de los atributos que agregamos aquí. Es decir, el atributo aquí, vamos a eliminarlo. Aquí tenemos el pie de página en realidad con la página de contacto. Ya terminamos. A continuación, tenemos que crear la siguiente página de nuestro proyecto. Es la página de la cuenta. Para eso, pasemos a la siguiente conferencia. 57. Creación de la página de marcado HTML para la cuenta: En la conferencia anterior, hemos terminado de trabajar en la página de contacto. Como pueden ver, se ve bastante bien. Y ahora tenemos que pasar a trabajar en la página siguiente, que es la página de la cuenta. Echemos un vistazo al proyecto terminado. Aquí tenemos la página de Cuenta. Como puedes ver, consiste en encabezado y tenemos aquí los campos de entrada. Me refiero al formulario con icono y también con botón Enviar. Abajo puedes ver otro fondo. Podemos ver aquí el círculo que es bonito y fresco fondo de la forma. Abajo puedes ver el pie de página estándar. Bien, así que eso es todo sobre la página de la cuenta. Vamos al código VS y voy a organizar los archivos de trabajo. Necesitamos crear nuevo archivo HTML en la carpeta HTML, cuenta HTML. Entonces voy a crear nuevo archivo CSS en la carpeta CSS. Vamos al archivo HTML de contacto y copiemos todo el código. Voy a pegarlo aquí. Cerremos este archivo. Voy a hacer aquí algunos cambios. Tenemos que cambiar el nombre del archivo CSS , van a ser cuentas. Además, me voy a deshacer de la sección de contacto, así que necesitamos ocultar el pie de página. Vamos a ocultarlo. Bien, creo que voy a mover este archivo del lado derecho. Vamos a comprobar que el navegador va a la página de la cuenta. Aquí tenemos la página de la cuenta, que ahora mismo está vacía. Sólo tenemos aquí la navegación. Voy a crear el marcado HTML. Vamos a insertar tus nuevos comentarios para la cuenta. Voy a abrir etiqueta de sección con una cuenta de nombre de clase. A continuación necesitamos desarrollos, que serán envoltorios de cuentas. Entonces lo primero que voy a insertar aquí es círculo de cuentas. Estoy en el fondo del formulario. A continuación voy a insertar tu encabezado. Consistirá en dos elementos de encabezamiento. El primero será H uno encabezado con el espacio de miembros de texto. cuanto al segundo rubro, me refiero a los H tres elementos de encabezado, necesitamos aquí para administrar tu cuenta, descargar productos y chatear con nosotros. También necesitamos aquí 2047 vino que se sientan sobre el encabezado de la cuenta A continuación, voy a abrir otro elemento profundo con el envoltorio de formulario de cuenta de nombre de clase. Lo primero que voy a insertar aquí serán elementos span, me refiero al símbolo de Google Material. Vamos al navegador y después visitemos el sitio web. Voy a buscar icono llamado cheque de persona. En realidad, ese es el icono. Voy a seleccionar redondeado. Entonces agarra el elemento span y pegarlo aquí. Voy a revisar el navegador. Si se muestra el icono, tenemos aquí el icono. A continuación, voy a añadir aquí cuatro elementos en los que tendremos con el nombre de la clase. Entradas de cuenta. Voy a insertar tu etiqueta de entrada con el texto tipo y con el atributo placeholder, va a ser username Entonces necesitamos otra entrada para contraseña. Voy a cambiar el tipo, va a ser contraseña. Y también necesitamos cambiar el atributo placeholder. Voy a insertar tu contraseña. Después de eso, voy a abrir otra etiqueta profunda y va a ser cheque de cuenta. Entonces voy a insertar aquí etiqueta de entrada con la casilla de verificación tipo. Además, voy a agregar aquí el atributo ID. Va a ser cheque de cuenta. A continuación, necesitamos una etiqueta dentro de cuatro atributos. Voy a insertar el mismo valor, quiero decir cuenta verificar el valor que usamos para atributo ID. Vamos a insertar aquí, recuérdame aquí. Los mismos valores para ID y cuatro atributos porque una vez que hacemos clic en la etiqueta, se debe verificar la entrada. Por eso empleamos aquí los mismos valores. A continuación, voy a interferir botón con el tipo botón como el texto. Voy a interferir login. Entonces después botón voy a en párrafo con el texto olvidé tu. Entonces necesitamos abrir elemento span, Nombre de usuario o de nuevo, girar Pasaporte. Envolvimos esas palabras con elementos span porque serán enlaces. Voy a añadir aquí signo de interrogación. Bien, eso es todo sobre los elementos del formulario. A continuación tenemos que agregar un botón más después de ese desarrollo. Eso es botón abierto con los tipos. Además, voy a agregar aquí el nombre de la clase. Vamos a llamarlo PTN porque debe colocarse fuera del formulario. El texto. Voy a presentar todavía no a un miembro. Únete hoy. Bien, entonces creo que eso es todo sobre el marcado HTML. Todo está listo. Vamos a revisar el navegador. Tenemos aquí todos los elementos para la página de la cuenta. A continuación, tenemos que personalizar esos elementos para eso. Pasemos a la siguiente conferencia. 58. Sección de cuenta de estilo: En la conferencia anterior, hemos creado el marcado HTML para la página de cuenta Ahora se adivina que tenemos que darle estilo a esos elementos. Una vez más, les voy a mostrar la versión terminada de nuestro proyecto. Aquí tenemos la página de la cuenta. Consiste en encabezado y luego tenemos forma con este círculo de fondo y abajo puedes ver el pie de página. Vamos al código VS e insertemos aquí nuevos comentarios para cuenta. Después voy a seleccionar elemento de sección con una cuenta de nombre de clase. En primer lugar, como se define con y altura, el ancho va a ser del 100% En cuanto a la altura, voy a hacerla 120. Altura de la ventana gráfica. También necesitamos espacio en la parte superior usando margen. Top 30, ¿de acuerdo? El ancho y la altura se aplican al elemento. En realidad, puedes ver aquí la barra de desplazamiento. Si echamos un vistazo al proyecto terminado, verás que tenemos aquí barra desplazamiento azul. Vamos a cambiarlo. Voy a ir al archivo CSS de contacto y agarrar este código de aquí, la página de contacto. Tenemos barra de desplazamiento azul. Voy a copiar este código y pegarlo aquí. ¿Bien? Como puede ver, la barra de desplazamiento ha cambiado su color de fondo. Siguiente Voy a seleccionar envoltorio de cuenta. Tenemos que definir dentro de la altura. Vamos a ponerlos a ambos al 100% Y además voy a usar Flex box para alinear los elementos. Necesitamos display Flex. Entonces tenemos que cambiar la dirección porque tenemos dos elementos aline verticalmente. Así que necesitamos flexión dirección columna y luego un centro de línea de artículo. Bien, ahora voy a encargarme del círculo. Me refiero a este círculo de aquí. Volvamos al código VS y seleccionemos un círculo de conteo. Definamos dentro de las alturas. El ancho va a ser 70. En cuanto a la altura, voy a hacerla 70 m también. Entonces cambiemos el fondo. Voy a usar gradiente lineal. El sentido va a ser dos a la izquierda. En cuanto a los colores, el primer color será 651f. En cuanto al segundo color, voy a hacerlo transparente. Aquí tenemos el elemento que ahora mismo no es círculo. Necesitamos establecer el radio del borde al 50% Ahora el elemento tiene forma del círculo. A continuación, voy a encargarme de su posición. Necesitamos posición absoluta. Entonces voy a agregar aquí la posición relativa. Porque vamos a posicionar el elemento de acuerdo a su elemento padre. En nuestro caso, el elemento padre es un envoltorio de conteo. La posición inferior va a ser 20% En cuanto a la posición izquierda, voy a hacerla 33% Finalmente, vamos a disminuir la opacidad, hacerla 0.2 Aquí tenemos el círculo A continuación voy a encargarme de la cabecera. En realidad, el encabezado será similar al encabezado de la página anterior, me refiero a la página de contacto. Para evitar escribir el mismo código, voy a abrir archivo CSS de contacto y agarrar el código de encabezado. Vamos a pegarlo aquí. Y cambiar los nombres de las clases. Necesitamos tu cuenta. Comprobemos el navegador. Como puedes ver, el encabezado se ve bastante bien. Yo ambos encabezamientos, Lo único que voy a hacer es disminuir el margen en la parte inferior Vamos a establecerlo en 12 Ram. Bien, eso es todo, sobre el encabezado. A continuación voy a encargarme de la forma. Seleccionemos el envoltorio. Me refiero a una envoltura de formulario de conteo en primer lugar, definir su ancho. Va a ser de 50 gramos. Entonces necesitamos la altura. Yo también lo voy a poner en 50 Ram. Entonces voy a establecer el color de fondo en blanco para que este Almón sea visible con claridad Voy a poner sombra de caja a 01 Ram. Ocho Carnero. En cuanto al color que voy a usar, necesitamos aquí cero, luego uno Ram. Y RGBA valor 130-16-2235 y la opacidad 0.3 Aquí tenemos el wrapper ahora mismo, y la opacidad 0.3 Aquí tenemos el wrapper ahora mismo, terminó detrás del círculo. Voy a arreglar eso usando la propiedad del índice Z. Vamos a ponerla en diez. Ahora el problema está arreglado. A continuación, voy a hacer redondeadas las esquinas del envoltorio. Vamos a establecer el radio del borde en un Ram. Voy a alinear elementos dentro del envoltorio usando flex box. Necesitamos exhibición de lino. Entonces para alinear elementos verticalmente, voy a establecer dirección flex a columna. Además, necesitamos un centro de líneas de artículos. Bien, los elementos están alineados. A continuación, voy a encargarme del elemento spin I en el icono. Así que sigamos adelante y seleccionemos Cuenta del envoltorio seguido de los elementos de pan. En realidad, si echamos un vistazo al código HTML, encontrarás que tenemos aquí un par de elementos span diferentes. Tenemos que seleccionar este elemento span aquí, sólo éste. Por lo tanto, voy a usar uno de los combinadores CSS. En este caso, estamos seleccionando únicamente este elemento span. Voy a poner dentro de la altura a nueve Ram. Entonces cambiemos el color de fondo. Va a ser FC8f. Entonces voy a hacer los elementos redondeados, el epod, el radio 50% Después de eso, voy a colocar el icono en el centro del círculo Para eso, voy a usar la caja Flex. Necesitamos mostrar lino, justificar el centro de contenido y un centro de líneas de artículos Como puede ver, el icono se coloca en el centro del círculo. A continuación, voy a aumentar el tamaño del teléfono. Vamos a poner 26. Voy a cambiar el color. Vamos a establecer el color a 3776. Ahora necesitamos espacio en la parte inferior, pero en realidad creo que nos faltó el acolchado del año. O sea, en el envoltorio porque no tenemos espacio dentro del envoltorio, pongamos relleno a tres Ram en los lados superior e inferior y dos Ram en los lados izquierdo y derecho. Bien, ahora tenemos espacio dentro del envoltorio y voy a agregar aquí marchando abajo para crear espacio en la parte inferior del icono Vamos a ponerlo a tres m. Bien, eso es todo sobre el icono. A continuación tenemos que encargarnos de los elementos de entrada. Voy a seleccionar las entradas de wrapper con. Voy a usar flex box. Necesitamos display flex y luego flex dirección columna Porque vamos a alinear entradas verticalmente. Vamos a establecer la dirección de flexión a la columna. Ahora como puede ver, las entradas se colocan verticalmente. A continuación, los voy a personalizar. Así que sigamos adelante y seleccionemos entradas de cuenta seguidas del elemento input. Voy a poner ancho a 40 Ram, entonces la altura será cinco Ram. Voy a cambiar el color de fondo. Vamos a establecer el color de fondo en F cero a cuatro. A continuación necesitamos un poco de espacio entre la entrada, así que voy a establecer margen para realmente margen inferior a tres Ram. Entonces me voy a deshacer de la frontera de falla, digamos a ninguna. Y también hacer que la entrada sea redondeada usando radio de borde 0.5 Ram. Ahora las entradas se ven bastante bien. A continuación, tenemos que crear algo de espacio dentro de las entradas usando padding. Voy a poner acolchado a 0.5 Ram en los lados superior e inferior y uno Ram en los lados izquierdo y derecho. A continuación, tenemos que cambiar el tamaño de fuente que soy. Ajusta el tamaño del teléfono a 1.6 Ram y también cambia el color. Va a ser 444, que es de color gris, gris oscuro. Bien, así que eso es sobre los insumos. A continuación tenemos que tomar aquí del marcador de posición. Voy a seleccionar entradas de cuenta. Entonces necesitamos elemento de entrada, seguido de la pseudo clase placeholder Me refiero a pseudo elemento. El color va a ser 888. Bien, después de eso, voy a encargarme de la casilla de verificación. Sigamos adelante y seleccionemos una verificación de conteo. Se trata de un desarrollo de envoltorio. Voy a definir margen. Voy a mover el elemento ligeramente hacia arriba. Voy a establecer margen en la parte superior, menos dos Ram. Entonces necesitamos cero en el lado derecho, tres Ram en la parte inferior y cero en el lado izquierdo. Bien, después de eso, voy a cambiar el cursor a punteros Seleccione la comprobación de cuenta seguida del elemento de entrada y establezca courser en puntero Ahora tenemos aquí un puntero. Después de eso, voy a encargarme de la etiqueta. Sigamos adelante y seleccionemos cheque de cuenta, seguido de la etiqueta. Voy a aumentar el tamaño del teléfono. Vamos a establecerlo en 1.6 entonces el peso del teléfono será de 300. Voy a cambiar el color. Vamos a establecerlo en 777. Y también cambiar el puntero del curser. Bien, eso es todo sobre la casilla de verificación. A continuación tenemos que encargarnos del botón. Voy a seleccionar el envoltorio de formulario de cuenta, seguido del elemento button. Voy a establecer el ancho al 100% entonces la altura será de cinco Ram. A continuación, voy a cambiar el color de fondo. El color será 3776. Entonces me voy a deshacer de la frontera de falla. Hagamos que no cambie el radio del borde. Hagamos que el botón sea redondeado. Voy a ponerla en cuatro. Aquí tenemos el botón que se ve bien, pero tenemos que encargarnos de la fuente. Sigamos adelante y establecemos el tamaño de fuente en 1.5 Ram. Entonces necesitamos que la fuente esté en negrita, ya que voy a transformar texto a mayúsculas. Entonces necesitamos color, va a ser blanco. A continuación, voy a establecer el espaciado entre letras a 0.1 Ram. Y también, vamos a cambiar el cursor, hacerlo puntero. Bien, el botón se ve bastante bien. Lo único que hay que hacer es crear algún espacio. Voy a establecer el margen a 1.5 fram en el lado superior, y luego necesito aquí 1.5 fram en el lado superior e inferior En realidad, entonces voy a poner cero en los lados izquierdo y derecho. Bien, eso es todo sobre el botón. Sigamos adelante y cuidemos el párrafo. Voy a seleccionar Act form wrapper, seguido del elemento. Voy a aumentar el tamaño del teléfono. Va a ser 1.8 Ram. Entonces tendremos aquí el centro de línea de texto. Tenemos que centrar el texto. Y también voy a cambiar el peso del teléfono. Digámoslo a 300. Bien. El párrafo se ve bien. Como recuerdas, tenemos dos elementos span dentro del párrafo. Estoy en, el nombre de usuario y la contraseña. Voy a personalizar. Entonces vamos a seleccionar la envoltura de espuma cuenta seguida de los elementos. Y entonces necesitamos span. Voy a cambiar el color. Va a ser el 2371. Entonces necesitamos que el peso de la espuma sea de 400. Y también voy a poner punto más claro, Eso es todo sobre el párrafo Todo se ve bastante bien. Lo único que tenemos que hacer es personalizar este botón aquí. Voy a seleccionar botón con un nombre de clase, BT y fuera. En realidad voy a copiar este código de aquí porque necesitamos estilos similares. El ancho va a ser 35 fram, entonces necesitamos la misma altura que para el fondo Voy a usar la función de gradientes lineales. La dirección va a ser a la derecha. Necesitamos colores. El primero será f48f. En cuanto al segundo color, voy a usar F3393 A continuación, necesitamos radio fronterizo no fronterizo. Para Am, todos esos azulejos serán iguales. Lo único que voy a cambiar aquí es el margen. Necesitamos margen superior. El valor va a ser desde el segundo botón. Se ve bastante bien. En realidad, casi terminamos con esta página. Lo único que tenemos que hacer es volver a mostrar el pie de página. Para eso, solo necesitamos eliminar el atributo llamado hidden de aquí. Ahora todo se ve bastante bien y ya terminamos con la página de la cuenta. Lo siguiente que tenemos que hacer es encargarnos de la última página que es una página de precios. Para eso, pasemos a la siguiente conferencia. 59. Cómo crear la página de precios de HTML Markup: En la conferencia anterior, hemos terminado trabajar en la página de cuenta. Se ve bastante bien. Ahora tenemos que seguir adelante y encargarnos de la última página de nuestro proyecto, y va a ser la página de precios. Pasemos a la versión terminada de nuestro proyecto y veamos la página de precios. Consiste en un encabezado. Tenemos aquí algunos símbolos materiales. Entonces puedes ver aquí dos opciones diferentes de los precios, el Acceso Anual y el Acceso de por Vida. Además, tenemos aquí un par de formas diferentes como fondo de esas opciones. Abajo, puedes ver el pie de página estándar que hemos utilizado en las páginas anteriores. Eso es todo sobre la página de precios. En esta conferencia, voy a crear el marcado HTML. Vayamos al código VS. Entonces voy a crear nuevos archivos en las carpetas HTML y CSS que necesitamos aquí, tasando HTML. Entonces voy a crear archivos CSS de precios. Vamos a mover este archivo del lado derecho. Entonces voy a ir a la cuenta en HTM de archivo y copiar todo el código. Vamos a pegarlo aquí. Voy a hacer algunos cambios. Necesitamos cambiar el nombre del archivo CSS. Va a ser el precio de CSS. Voy a deshacerme de la sección de cuentas. Además, voy a ocultar el pie de página. Vamos a revisar el navegador. Tenemos aquí la página de precios. Ahora mismo está vacío. Tenemos aquí solo la navegación. Entonces sigamos adelante y respondamos. Para crear el marcado HDM, voy a insertar tus comentarios para los precios Entonces voy a abrir etiqueta de sección con el nombre de clase Pricing, el primer elemento dentro del elemento section, voy a crear envoltorio de precios en el que voy a insertar otro elemento deep. Y van a ser formas de precios. Tendremos tres formas distintas. El primero será el rectángulo de precios. Entonces voy a crear un círculo pequeño de precios. Entonces necesitamos círculo grande. Voy a duplicar esta línea de código y simplemente cambiar el nombre de la clase. Necesitamos precios de círculo grande. Bien, Después de las formas, voy a crear encabezado de precios en el que tendremos tres encabezados diferentes El primero será H uno elementos de encabezado con el texto Precios simples. Entonces voy a abrir de nuevo H uno elementos de encabezado y debería estar completo como sitios web ilimitados. Y luego después de este encabezamiento elementos voy a abrir H tres encabezamiento con el texto Unirse. Más de 100.000 clientes obtienen acceso a sitios web ilimitados. Los modernos. En realidad necesitamos aquí temas y plugins modernos. Y también necesitamos el creador de sitios web definitivo. Bien, Siguiente voy a abrir y van a ser reseñas que necesitamos en párrafo. Con el texto. Excelente. Entonces voy a abrir etiqueta p, va a ser estrellas de precios. Tenemos que ir al sitio web de Google Material Symbols y buscar estrella. Necesitamos iconos de campo, y también voy a seleccionar redondeados. Vamos a copiar los elementos span. Necesitamos cinco sanelements diferentes. Voy a duplicar esta línea de código cuatro veces. Entonces sigamos adelante y revisemos el navegador si se muestran los iconos. Como pueden ver, aquí tenemos cinco estrellas. Después de eso, necesitamos de nuevo párrafo con el texto revisado. Entonces después del párrafo, voy a abrir etiqueta con el nombre de la clase, Precios, Confianza, Piloto. Dentro de ese elemento, voy a insertar de nuevo Google Symbol. Sigamos adelante y busquemos símbolo llamado hotel. Aquí necesitamos este símbolo. Vamos a copiar este elemento span y pegarlo aquí. Después revisa el navegador. Aquí tenemos el icono. Después de eso, voy a insertar aquí otro elemento span con el texto Trust Pilot. Con ese elemento span, terminamos con el encabezado. Siguiente Yo aquí, elementos profundos con las tarjetas de precios de nombre de clase. Tendremos dos tarjetas distintas. Vamos a crear el primero. En realidad, voy a agregar aquí otra tarjeta de precios de nombre de clase que me queda. Este será el nombre de la clase individual. En cuanto a la tarjeta de precios, la voy a usar como nombre de clase común. Dentro de la tarjeta, tendremos elementos profundos con el nombre de la clase pricing top, en el que voy a insertar H tres elemento encabezado con el texto anual Xs. Entonces necesitamos H un elemento de rumbo para el precio. El precio será de 99.90 $9 Luego después del rubro, necesitamos de nuevo estrellas. Voy a abrir la etiqueta P con el nombre de la clase pricing stars. Entonces copiemos aquí este panel. Necesitamos cinco estrellas. Entonces voy a duplicar este panel cuatro veces. Vamos a revisar el navegador. Aquí tenemos las estrellas. A continuación, voy a abrir elementos con la lista de nombres de clase, en la que tendremos un par de elementos de lista diferentes. Vamos a abrir los elementos LI. El primero serán cientos de packs de sitios web. En general, tendremos seis ítems de lista. Por lo tanto, voy a duplicar este ítem cinco veces y luego cambiar el contenido. El segundo va a ser actualizaciones de productos, luego tenemos soporte premium. Entonces el siguiente será el uso ilimitado del sitio web. Entonces el siguiente será garantía libre de riesgos. Por último, voy a interferir una sola vez, ¿de acuerdo? Entonces aquí tenemos los elementos de la lista. A continuación voy a abrir botón con el botón tipo. Además, voy a agregar aquí el nombre de la clase y va a ser tarjeta de precios BTN como el texto que voy a insertar inscríbase hoy Bien. En realidad creo que eso es todo sobre la primera tarjeta. Se crean todos los elementos. A continuación, voy a duplicar estos elementos porque también necesitamos una segunda tarjeta. Yo lo duplico. Tenemos que hacer algunos cambios. Cambiemos el nombre de la clase. Necesitamos tarjeta de precios, en ese momento voy a cambiar el contenido de los encabezamientos. En este caso, necesitamos eje de tiempo. En cuanto al precio, va a ser 249.90 $9 Entonces necesitamos estrellas como lista de Voy a hacer ligeros cambios. Necesitamos actualizaciones de productos de por vida, el soporte premium de por vida. En cuanto al resto de los artículos, no los voy a cambiar. Creo que todo está listo. Ojalá no tengamos aquí ningún error y todo sea correcto. Eso lo veremos en la próxima conferencia, donde vamos a dar estilo a esos elementos. Ahora mismo, vamos a revisar el navegador. Todos los elementos están preparados. Sigamos adelante y pasemos a la siguiente conferencia, donde vamos a darle estilo a la página de precios. 60. Estilización de formas: En la conferencia anterior, hemos creado el marcado HTML para la sección de precios Todos los elementos son creados y preparados. Ahora tenemos que empezar a darle estilo a esos elementos. Vamos al código VS en el archivo Css de precios. Voy a insertar nuevos comentarios para la sección de precios. Entonces voy a seleccionar elementos de sección, el precio del nombre de la clase, en realidad necesitamos aquí precios. Lo primero que tenemos que hacer es definir la w y la altura. El ancho va a ser 100% En cuanto a la altura, voy a hacer que sea 150 altura de ventana gráfica Me refiero a un 50% de la vista. Entonces necesitamos margen top 30 para crear espacio en la parte superior de la sección. Bien, con altura se aplican a los elementos. A continuación tenemos que cambiar el color de fondo para la barra de desplazamiento. Voy a ir a la cuenta ese archivo. Agarra este código que tenemos aquí, barra de desplazamiento azul. Voy a pegar este código aquí. Como puede ver, se cambia el color de fondo de la barra de desplazamiento. A continuación, voy a seleccionar envoltorio de precios. Voy a definir dentro de las alturas. Vamos a establecer ambas propiedades al 100% Entonces voy a alinear elementos usando flex box. Necesitamos exhibición de lino. Entonces voy a cambiar la dirección y hacerla columna. Debido a que vamos a alinear los elementos flexibles verticalmente, necesitamos que la dirección del texto sea columna. Además, voy a establecer una línea de pedido al centro. Bien, puedo ver que el contenido se coloca en el centro. A continuación, voy a encargarme de las formas de esta sección. Me refiero a esas tres formas, el rectángulo y esos dos círculos. Sigamos adelante y comencemos con el rectángulo. Voy a seleccionar rectángulo de precios. En primer lugar, definamos alturas escritas. Voy a ponerlos a ambos a 50 m. Entonces voy a cambiar el color de fondo. En realidad voy a usar gradiente lineal. La dirección de la transición de color va a ser de 135 grados. Entonces voy a seleccionar el primer color, va a ser 184 BB. cuanto al segundo color, va a ser transparente con un valor porcentual 8% Aquí tenemos el rectángulo con efecto de degradado lineal. A continuación, voy a hacerlo redondeado usando radio de borde diez. Entonces tenemos que cambiar la posición. Voy a poner posición a absoluta. Entonces para posicionar elemento de acuerdo con el padre, que es el envoltorio de precios, necesitamos posición relativa para el elemento padre. Entonces voy a establecer la propiedad superior al 30% En cuanto a la propiedad de laboratorio, voy a establecer en 15% Vamos a revisar el navegador. Aquí tenemos el rectángulo que necesitamos para girarlo. Voy a usar transfer con función rotate Z, y el valor va a ser de 45 grados. Como puede ver, se gira el rectángulo. Lo último con respecto a esta forma es disminuir la opacidad Vamos a establecer la opacidad 2.2 Bien, sentémonos sobre la primera forma Estoy dentro, el rectángulo. A continuación voy a encargarme de la segunda forma, que es este pequeño círculo de aquí. Voy a seleccionar precios círculo pequeño. En primer lugar, como se define dentro de las alturas, voy a ponerlos a ambos en ocho gramos, pero luego voy a cambiar el color de fondo. Vamos a usar aquí color 34d, d87. Es de color verde. A continuación, para que el elemento sea redondeado, necesitamos radio de borde 50% Entonces voy a cambiar la posición de los elementos. Vamos a establecerlo en absoluto. Luego se definieron las propiedades superior y derecha. La posición superior va a ser del 25% En cuanto a la posición correcta, voy a poner en 15% Aquí tenemos el círculo pequeño. A continuación tenemos que encargarnos de la tercera forma, quiero decir, este gran círculo aquí. Vayamos al código VS y seleccionemos el círculo grande de precios. En primer lugar, definamos dentro de la altura. Voy a ponerlos a los dos a Fort a Ram. Entonces tenemos que cambiar el fondo. Voy a usar de nuevo gradiente lineal. La dirección de la transición de color va a ser de dos derechos. Entonces necesitamos el primer color, que será transparente. En cuanto al segundo color, va a ser 71186 Y también necesitamos valor porcentual 9% Tenemos aquí error necesitamos 71186 Ahora bien, todo parece estar correcto. Aquí tenemos el elemento, que ahora mismo está en círculo. Vamos a encargarnos de eso. Necesitamos radio de borde 50% Ahora puedes ver aquí el círculo con interfectos de grado lineal A continuación, tenemos que encargarnos de la posición de este elemento. Necesitamos posición absoluta. Entonces voy a definir la posición inferior. Va a ser el 15% Entonces voy a definir la posición correcta. Estudiemos al 15% Y finalmente, voy a cambiar la opacidad Comencemos 2.2 Las tres formas están personalizadas y posicionadas. A continuación, tenemos que encargarnos del encabezado de la página. Para eso, pasemos a la siguiente conferencia. 61. Cabecera de estilo: Bien, en la última conferencia hemos estilizado esas formas aquí Ahora como dije, tenemos que seguir adelante y personalizar el encabezado de la página de precios. Vamos al código VS y luego seleccionemos el encabezado de precios. Estoy centrando el texto, quiero decir que necesitamos centro de línea de texto. Además de eso, voy a crear espacio en la parte inferior usando margen. Inferior 20 Ram. Como puedes ver, el texto se coloca en el centro y también tenemos aquí el espacio. A continuación, voy a encargarme de los rubros de manera individual. Voy a comenzar con la primera partida. En realidad, voy a personalizar ambos encabezados simultáneamente porque tenemos aquí dos elementos de encabezado H uno Voy a seleccionarlos. Necesitamos encabezado de precios seguido del elemento H one heading. En primer lugar, voy a cambiar la familia telefónica. Va a ser Mode Coursin'm, voy a encontrar el tamaño de fuente, van a ser cinco Ram También, necesitamos espacio entre las letras. Vamos a establecer el espaciado entre letras 2.2 Ram y encontrar un liquen. El color vamos a usar aquí, color 26353. ¿Bien? Como puede ver, los dos primeros encabezamientos están personalizados, ven bastante bien A continuación tenemos que encargarnos del elemento de encabezado H tres. Voy a realmente, vamos a duplicar este código, cambiar el selector que necesitamos aquí, H tres. Entonces me voy a deshacer de la familia telefónica. Además, voy a establecer el tamaño del teléfono en dos Ram. Entonces tenemos que deshacernos del espaciado entre letras. El color del rubro será 567599. Además de eso, voy a agregar aquí el peso telefónico 300. Vamos a revisar el navegador. Voy a disminuir el ancho de la rúbrica. Vamos a poner un dos Ram. Y luego el navegador, se disminuye el ancho. Pero como pueden ver, tenemos que colocar el rumbo en el centro. Por lo tanto, voy a usar la marcha. Necesitamos marchar, van a ser dos Ram en la parte superior Entonces necesitamos auto en el lado derecho, luego dos Ram. En realidad, vamos a deshacernos de dos porque necesitamos los mismos valores para el lado inferior y también para el lado izquierdo. Entonces podemos dejar aquí solo dos Ram y auto. Vamos a revisar. Como puedes ver el rumbo se coloca en el centro y además tenemos algo de espacio en los lados superior e inferior. Bien, sentémonos sobre los encabezamientos Siguiente. Yo voy a encargarme de esta parte aquí. Voy a seleccionar párrafo. Vamos a establecer el tamaño de fuente en dos Ram. Entonces necesitamos el peso de la fuente. Van a ser 300. Además, voy a crear algo de espacio en el lado derecho usando margen, ¿verdad? El valor será uno Ram. Bien, entonces los párrafos están personalizados. A continuación voy a cuidar de las estrellas. Seleccionemos el desarrollo de envoltorio que es revisiones. Voy a usar Flex box para alinear los elementos. Vamos a configurar la pantalla para flexionar. Entonces necesitamos justificar el contenido del Centro. Como puede ver, los elementos se colocan horizontalmente en una fila. A continuación, voy a seleccionar Pricing stars, que es el envoltorio de los iconos. Seleccionemos estrellas de precios y creemos espacio en el lado derecho usando marchar a la derecha, un Ram Bien, ahora tenemos que personalizar las estrellas. Voy a seleccionar elemento span. Me refiero a esos elementos span aquí necesitamos estrellas de precios seguidas de los elementos span, vamos a establecer el tamaño del teléfono en 2.5 Ram. Y también voy a cambiar el color de las estrellas. El color será 03b 57. Es de color verde. Como puedes ver, las estrellas se ven bastante bonitas. A continuación, voy a encargarme de esta parte aquí. Seleccionemos Pricing Trust Pilot. Voy a usar la caja Flex. Vamos a configurar la pantalla en banderas. Entonces necesitamos alinear los elementos en el centro. Además, necesitamos mover los elementos ligeramente hacia arriba usando margen superior con un valor negativo -0.5 Ram Bien, ahora se ve bastante bien. A continuación tenemos que personalizar esos dos elementos aquí. Sigamos adelante y comencemos con el primer elemento span, que es un icono. Voy a seleccionar el piloto de confianza de precios, seguido del elemento span con selector. Como dije, tenemos encargarnos del primer elemento span, que es un icono que necesitamos aquí uno, voy a establecer el tamaño del teléfono en 3.5 En cuanto al color, voy a usar el mismo color. Vamos a agarrarlo y pegar aquí. Bien, así como pueden ver, el icono se ve bastante bien. Lo último que tenemos que hacer es encargarnos de este elemento aquí. Voy a duplicar este código. Necesitamos elemento span al segundo elemento span. Deshagámonos del color y cambiemos el tamaño del teléfono que necesitamos para correr. Bien, ese es el encabezado. Se ve bastante bien. A continuación tenemos que encargarnos de las tarjetas. Y para eso, pasemos a la siguiente conferencia. 62. Tarjetas de precios para estilizar: Bien, así que después de peinar el encabezado, a continuación tenemos que encargarnos de las tarjetas. Tenemos que estilizar los dos. Entonces volvamos al código VS y comencemos a peinar las tarjetas. Voy a seleccionar el desarrollo de envoltorio que es tarjetas de precios. Y voy a usar flex book para poder colocar las tarjetas horizontalmente en fila. Quiero decir lado a lado. Entonces necesitamos exhibir Flex. Si echamos un vistazo al proyecto, entonces verás que las cartas se colocan una al lado de la otra. A continuación, voy a personalizar las tarjetas. Como recuerdas, cada tarjeta tiene una tarjeta de precios de clase común y también una tarjeta de precios con nombre de clase individual. En primer lugar, voy a añadir a ambas tarjetas algunos estilos comunes. Por lo tanto voy a seleccionarlos usando tarjeta de precios de nombre de clase común. Voy a definir las alturas ensanchadas. El ancho va a ser 45 Ram. En cuanto a la altura, voy a hacerla 70 Ram. Entonces voy a cambiar el color de fondo. Va a ser blanco. Y también para poder ver claramente las cartas, voy a definir la sombra de caja con los valores. 01 Ram, diez Ram, y el color será RGB, A 130-16-2235, y la opacidad Como pueden ver, tenemos aquí dos tarjetas. En realidad las formas, quiero decir, esos elementos se superponen en las cartas Voy a colocarlos detrás de las tarjetas, y para eso podemos definir la propiedad indexada. Vamos a ponerla en diez, ¿de acuerdo? Ahora, como puede ver, el problema está arreglado. ¿Bien? Después de eso, voy a crear algo de espacio entre las cartas. Hagámoslo usando el margen. El margen será cero en los lados superior e inferior. En cuanto a los lados izquierdo y derecho, voy a poner margen a 1.5 m. Ahora tenemos espacio entre las cartas. A continuación, también voy a crear espacio dentro de la tarjeta. Para eso necesitamos acolchado. El acolchado será de cuatro Ram en los lados superior e inferior y luego seis rampas en los lados izquierdo y derecho. Todo bien. Después de eso, voy a hacer redondeadas las esquinas de las cartas. Además, tenemos que alinear los elementos dentro de la tarjeta usando libros de lino Vamos a establecer el radio del borde en, en realidad necesitamos aquí radio fronterizo. El radio fronterizo será uno Ram. Entonces como dije, necesitamos libros flex. Voy a configurar display a flex. Entonces voy a cambiar la dirección porque vamos a alinear los elementos dentro de la tarjeta verticalmente. Entonces voy a establecer flex direction a columna, vamos a colocarlo abajo. A continuación, voy a poner artículos en el centro. Necesitamos alinear los artículos al centro. Y también necesitamos detectar el texto usando texto. Alinear el centro. Bien, eso es. Acerca de los estilos comunes de las tarjetas. A continuación, voy a personalizar los elementos H por separado. Vamos a comenzar con los encabezamientos, me refiero a H tres elementos de encabezamiento adelante y seleccionemos el precio del automóvil, seguido de, en realidad necesitamos su tarjeta de precios superior. Y luego H tres elemento de encabezamiento. En primer lugar, voy a definir la familia telefónica. Va a ser mull cursive. Entonces necesitamos el tamaño del teléfono, voy a establecer el tamaño del teléfono en 1.8 Ram. Entonces necesitamos transformar el texto a mayúsculas. Voy a crear espacio entre las letras. Vamos a configurarlo 2.2 Ram. Por último, voy a crear algo de espacio en la parte inferior usando el margen inferior, el valor será de dos carreras, ¿de acuerdo? Entonces, como puedes ver, los encabezamientos están personalizados. Pero si echamos un vistazo al proyecto terminado, verás que los encabezamientos tienen diferentes colores Y también vemos aquí el efecto de gradiente lineal. Voy a definir el color por separado. Sigamos adelante y seleccionamos la tarjeta de precios a la izquierda, entonces voy a agarrar el selector aquí. Voy a usar. Degradado lineal, La dirección de la transición de color será de dos derechos. Entonces tenemos que definir los colores. El primer color será 441d. En cuanto al segundo color, voy a usar 0b38 Además, me voy a adherir 90% Siguiente necesitamos propiedad llamada Webkit clip de fondo, va a ser texto Además, tenemos que establecer el color a transparente. Bien, así como pueden ver, el encabezamiento de la primera tarjeta se ve bastante bien. Tenemos aquí un efecto de gradiente lineal. Hagamos lo mismo para el segundo encabezamiento también. Voy a duplicar este código. Entonces tenemos que cambiar el nombre de la clase. Necesitamos aquí tarjeta de precios, ¿verdad? Y también tenemos que cambiar los colores. El primer color va a ser C, A seis EFF. Para el segundo color, voy a fijarlo en 71186. Bien, vamos a revisar los resultados. Como se puede ver, el segundo encabezamiento se ve bastante bien también. A continuación tenemos que encargarnos de los precios. Voy a seleccionar precios top H uno. Voy a ponerle la familia telefónica a Molly. En realidad, tomemos este código de aquí y luego hagamos algunos cambios. El tamaño del teléfono será de seis Ram. Entonces necesitamos, en realidad no necesitamos aquí mayúsculas. Creo que en realidad eso es todo. Vamos a revisar el navegador, los encabezamientos, los precios se ven bien Tenemos que cambiar los colores, y tenemos que hacer lo mismo que hemos hecho para los rubros anteriores Simplemente podemos agregar aquí seleccionar. Duplicemos el selector. Deshazte de la Calibra entonces necesitamos aquí. Y también H uno elementos de encabezamiento. Vamos a comprobar que el precio del navegador tiene el mismo color con efecto degradado. Hagamos lo mismo para la segunda tarjeta también. En realidad, vamos a copiar este selector desde aquí. Y luego solo cambia el nombre de la clase que necesitamos aquí, ¿verdad? Bien, eso es todo. Los encabezamientos se ven bastante bien y a continuación tenemos que cuidar de las estrellas Volvamos al código VS. Voy a seleccionar envoltorio con una tarjeta de precios de nombre de clase estrellas. Voy a crear algo de espacio en la parte inferior usando margen inferior para Ram. Entonces tenemos que seleccionar el panelement que necesitamos, nuevamente, estrellas de la tarjeta de precios seguidas de este panelement Voy a cambiar el color de la estrella. Vamos a usar aquí 0357. Entonces como puedes ver, las estrellas se ven bastante bonitas. A continuación tenemos que encargarnos de esas listas. Aquí voy a seleccionar elementos UL con la lista de precios de nombre de clase. Lo primero que voy a hacer es deshacerme de las balas por defecto. Necesitamos el estilo de lista ninguno. También voy a crear algo de espacio en la parte inferior usando margen inferior para. Bien. Como pueden ver, se retiran las balas y además tenemos algo de espacio en la parte inferior. A continuación, tenemos que encargarnos de los elementos de la lista. Voy a seleccionar la lista de precios, seguida de los elementos LI. En realidad necesitamos aquí. Tarjeta de precios menor y izquierda. Entonces debería ser seguido por el elemento LI. Voy a aumentar el tamaño del teléfono , van a ser dos Ram. Entonces necesitamos el peso del teléfono, digamos, a 300 ya que voy a cambiar el color. Vamos a establecerlo en 567599. Entonces necesitamos margen, 1.5 Ram en el lado superior e inferior, y luego cero en los lados izquierdo y derecho. Como puedes ver, los menos artículos se ven bastante bien. A continuación tenemos que cambiar el color del quinto elemento menos en el menos. Quiero decir, tenemos que hacer que este artículo menos sea verde. Para eso, voy a seleccionar elementos LI, seguidos del enésimo selector hijo Tenemos que seleccionar el quinto artículo. El color va a ser 0357. Como puedes ver, el quinto artículo ahora tiene el color diferente. Ahora tenemos que encargarnos del último ítem. Necesitamos que el último ítem esté sobrealineado. Un hecho aquí, sigamos adelante y seleccionemos el elemento de la lista de la primera tarjeta. Necesitamos la tarjeta de precios a la izquierda, seguida de la lista de precios. Y entonces necesitamos un elemento li seguido del último selector hijo. Necesitamos a tu último hijo. Voy a usar la propiedad llamada decoración de texto con la línea de valor a través. Entonces necesitamos opacidad 0.5 Bien. Eso es lo menos. A continuación tenemos que encargarnos de los botones. Voy a seleccionar la tarjeta de precios BTN. Voy a establecer el ancho al 100% entonces la altura va a ser de seis Carneros Voy a cambiar la frontera. Quiero decir, tenemos que deshacernos del borde predeterminado, pongámoslo en ninguno, entonces necesitamos que el radio del borde sea cinco Ram. Entonces pongamos el tamaño de fuente en 1.6 Rams. Voy a transformar texto a mayúsculas, cambiar el color, va a ser blanco. Entonces necesitamos crear algún espacio entre las letras. Vamos a configurarlo 2.2 Ram. Por último, voy a poner cursor a puntero. este momento los botones no se ven del todo bien porque tenemos que cambiar los colores de fondo para cada botón. Necesitamos gradientes lineales para ambos patrones, tienen diferentes colores. Voy a seleccionar la tarjeta de precios a la izquierda, seguida de la PTN de precios Entonces voy a cambiar el fondo. Usemos gradientes lineales. En realidad, necesitamos los valores similares que usamos para el encabezado. Entonces voy a agarrar este código de aquí. Vamos a revisar el navegador. El primer patrón se ve bastante bien. Hagamos lo mismo para el segundo también. Voy a duplicar este código, luego cambiar de izquierda a derecha, y también agarrar los valores de aquí. Vamos a pegar el valor aquí. Como puedes ver, los dos botones se ven bastante bien. En realidad, con las tarjetas, casi terminamos. Tengo que hacer una cosa más. Si echamos un vistazo al proyecto de acabado, verás que la tarjeta del lado derecho se ve un poco más grande que la tarjeta izquierda. En realidad, se puede pensar que vamos a aumentar la altura interna, pero eso no es lo que vamos a hacer. Voy a crear a través del entorno y luego voy a mover esta tarjeta cerca del usuario. Para crear a través del entorno, tenemos que usar la propiedad llamada Perspectiva. Tenemos que agregarlo a las tarjetas de precios. El valor será de 50 Ram. Y después voy a seleccionar la tarjeta de precios, ¿verdad? Voy a usar transform, luego traducir la función z con el valor cinco Ram. Ahora como pueden ver, la segunda tarjeta, me refiero a la tarjeta del lado derecho se acercó más al usuario. Creo que se ve bastante bien. Bien, con la página de precios, estamos casi abajo. Lo único que tenemos que hacer es mostrar el pie de página. Voy a deshacerme del atributo llamado y ya está. Bien. La página de precios se ve bastante bonita y moderna en realidad, con las páginas que terminamos. Lo siguiente que tenemos que hacer es hacer que el proyecto receptivo a diferentes tamaños de pantalla y dispositivos. Pasemos a la siguiente conferencia. 63. Cómo hacer que los proyectos sean receptivos para pantallas más grandes: Hola y bienvenidos a nuestra nueva sección en la que vamos a hacer que nuestro proyecto sea receptivo a diferentes tamaños de pantalla y dispositivos. En la última sección, hemos terminado de trabajar en el proyecto. Es decir, hemos creado y labrado todas las páginas. Todo se ve bastante bonito y moderno, pero ahora tenemos que hacer que el proyecto sea receptivo. Quiero hablar un poco sobre la importancia del diseño web responsive en el desarrollo web. En realidad, es súper importante en el desarrollo web porque se asegura de que los sitios web funcionen bien en todo tipo de dispositivos y tamaños de pantalla. Con tantos gadgets diferentes como teléfonos inteligentes y tabletas, diseño web responsive ayuda a sitios web se vean bien y sean fáciles de usar en todas partes. También ahorra tiempo y esfuerzo al evitar la necesidad de diseños separados para cada dispositivo. Además, los motores de búsqueda como Google prefieren sitios web que sean compatibles con dispositivos móviles. El diseño web responsivo también puede aumentar la visibilidad de un sitio. En términos simples, el diseño web responsive es imprescindible en el desarrollo web para asegurarse de que los sitios web se mantengan fáciles de usar y efectivos en la amplia gama de dispositivos que la gente usa hoy en día en mi proyecto web, he hecho que sea una prioridad hacer que el sitio web se vea increíble en varios dispositivos. Estamos hablando de grandes pantallas de escritorio como 1920 píxeles y también 1,600 píxeles Así como los ligeramente más pequeños como 14 40 píxeles, 1960, 6.12 80 píxeles Cuatro tabletas. Tengo 820 pixeles y 768 pixeles. Por supuesto, para los amantes de navegar en sus teléfonos, he optimizado para 43,393.3 75 pixeles Al hacer esto, me estoy asegurando de que no importa cómo alguien acceda al sitio, ya sea en una computadora, tableta o teléfono móvil, la experiencia es fluida y se ve genial. Este enfoque es esencial hoy en día porque la gente usa todo tipo de dispositivos, y quiero que todos tengan un tiempo positivo y fácil de usar en mi sitio web. El diseño web responsivo no es solo un término elegante. Se trata de hacer las cosas fáciles y agradables para todos, sin importar qué gadget estén usando. ¿Bien? Como saben, hemos construido nuestro proyecto sobre este tamaño de pantalla extra grande, y ahora tenemos que hacerlo receptivo en esos puntos de quiebre. El primer punto de ruptura será este de aquí. Voy a hacer que el proyecto sea receptivo con todas sus páginas y luego pasaremos a otro punto de interrupción Bien, inspeccionemos la página, cambiemos al modo responsive. Entonces como pueden ver, aquí tenemos esas dimensiones. Es decir, 1920 píxeles de ancho y 1080 píxeles de alto. Como dije, el primer punto de ruptura será 1,600 píxeles y 900 píxeles Voy a insertar aquí esas dimensiones. Entonces voy a ir al código VS. Cerremos este archivo aquí. Entonces voy a insertar aquí nuevos comunes para responsive. Entonces voy a usar CSS media query para definir el ancho máximo de la pantalla. Necesitamos una señal seguida por los medios de comunicación. Entonces necesitamos especificar el ancho máximo de la pantalla. Va a ser de 1,600 pixeles. Ahora podemos insertar aquí estos mosaicos que necesitamos. Lo primero que voy a hacer es cambiar el tamaño de fuente del elemento HTML. Como recuerdas, hemos establecido el tamaño de fuente del HTML en 62.5% para poder usar Ram, la unidad de medida Y voy a disminuir el tamaño de la fuente del elemento H mal. Disminuirá el tamaño de todos los elementos de todo el proyecto. Voy a hacer el tamaño de fuente del elemento H mal 60% Ahora todos los elementos del proyecto se hicieron más pequeños. A continuación, voy a encargarme de la barra de navegación. Voy a disminuir el acolchado en el. Laterales izquierdo y derecho. Voy a seleccionar no y establecer putting a 0.10 Ejecutar siguiente voy a cambiar el ancho de los no items Yo, el elemento envoltorio profundo. Voy a seleccionar ningún elemento y establecer su ancho en 55% Como puede ver, el ancho de los elementos de navegación, se incrementa el elemento wrapper. A continuación, voy a tomar del desplegable. Como pueden ver, tenemos aquí poco hueco entre el menú desplegable y el triángulo. Voy a arreglar ese problema. Seleccionemos el menú desplegable. Cambiarlo tomó posición, voy a ponerlo en 4.5 Ram. Ahora como puedes ver, ya no tenemos aquí la brecha entre el triángulo y el menú desplegable. A continuación, voy a encargarme de la sección de servicios. Seleccionemos el envoltorio de servicios y fijemos el ancho en 70% Bien, ahora tenemos un mejor resultado. A continuación, voy a encargarme de la lista de proyectos. Sigamos adelante y seleccionemos la lista de proyectos. Voy a establecer con al 80% Bien, entonces esta sección se ve bien también. Siguiente Yo soy de la sección de plantillas. Voy a personalizar las imágenes. Vamos a la plantilla a la derecha seguida de la imagen. Entonces necesitamos child select. Seleccionemos la primera imagen. Voy a cambiar las dos posiciones, va a ser 45% Entonces pongamos el ancho a 35 Ram. Voy a duplicar este código que necesitamos aquí. Tercera imagen, luego voy a deshacerme de la posición superior y cambiar el ancho. Hagámoslo 55 Ram. Bien, ahora todo se ve bien. A continuación tenemos que encargarnos de esta pequeña brecha aquí. En realidad, creo que es una falla de navegadores que vemos aquí. Esta pequeña brecha. En fin, voy a arreglar ese problema. Seleccionemos la sección de suscripción. Voy a establecer marching top a menos una M. Ahora no tenemos ninguna brecha y todo se ve bastante bien Bien. Entonces creo que eso es sobre la página de inicio. A continuación tenemos que encargarnos de la página restante. Vamos a la página del cliente. Necesitamos aumentar el ancho de los testimonios, me refiero al envoltorio. Volvamos al código VS y abramos clientes del archivo CSS. Voy a insertar sus comentarios para que respondan. Entonces necesitamos CSS media query max width va a ser de 1,600 pixeles Voy a seleccionar envoltorio de testimonios. Vamos a establecer su ancho en 90% Bien, ahora la sección se ve bastante bien. Creo que no necesitamos cambiar nada aquí en ese punto de quiebre. Pasemos a la página siguiente, que es la página del producto. Voy a hacer aquí cambios de diapositivas. Sigamos adelante y abramos la página de productos. Entonces necesitamos sus comentarios para que respondan. Voy a definir medios X con 1,600 pixeles. Necesitamos año 1,600 pixeles. Voy a seleccionar contenido del producto cambiar el ancho va a ser del 90% Siguiente Voy a encargarme del contenido promocional. Yo soy el elemento de encabezado. Sigamos adelante y seleccionemos el contenido promocional, seguido del elemento H one heading. Voy a cambiar el tamaño del teléfono. Vamos a ponerlo a 3.5 m. Bien, ahora el contenido promocional se ve bien. En realidad, con la página del producto ya terminamos. Sigamos adelante y revisemos la página de contenido. Creo que todo se ve bien. A continuación, revisemos la página de la cuenta. Aquí no necesitamos ningún cambio. En cuanto a la página de precios, voy a hacer tus cambios de diapositivas. Volvamos al código VS y abra el archivo SS de precios. Vamos a insertar comentarios. Voy a crear Caesars Media query con Xw de Sigamos adelante y seleccionemos círculo pequeño. Y cambiar su posición correcta va a ser del 10% Además, voy a cuidar la posición del círculo grande. Duplicemos entonces este código. Voy a cambiar el nombre de la clase. Va a ser grande. Voy a poner la posición correcta al 10% Y también voy a cambiar la posición boxim Va a ser 12% bien. Todo se ve bastante bien. Y de hecho en ese punto de interrupción, me refiero a 1,600 píxeles de ancho y 900 píxeles de alto Ya terminamos. Para que podamos comprobar este punto de interrupción a continuación, tenemos que encargarnos de este punto de interrupción aquí Para eso, pasemos a la siguiente conferencia. 64. Cómo hacer que los proyectos sean receptivos para pantallas más pequeñas - Parte 1: En la conferencia anterior, hemos hecho que el proyecto sea receptivo. En el punto de interrupción, me refiero a 1,600 píxeles de ancho y 900 píxeles de alto Ahora es el momento de seguir adelante y hacer que el proyecto sea receptivo en diferentes tamaños de pantalla. El siguiente punto de ruptura va a ser éste. Quiero decir, 14, 40 pixeles y 900 pixeles de altura. Volvamos al navegador y cambiemos las dimensiones en el modo responsive. Aquí necesitamos 14, 40 píxeles y luego 900 píxeles. Después vuelve al código VS, abre el archivo CSS de estilo y crea una nueva consulta de medios CSS. El ancho máximo va a ser de 14, 40 píxeles. Lo primero que voy a hacer es cambiar el tamaño de fuente del elemento H Timel Voy a disminuirla otra vez. El tamaño de la fuente va a ser de 48 píxeles. Quiero decir, por ciento, no los píxeles. Ahora los elementos volvieron a ser, más pequeños. A continuación, voy a encargarme de los artículos, el desarrollo del envoltorio. No seleccionemos ningún artículo. Nuevamente, aumentar el ancho. Voy a fijarlo al 60% Bien, creo que no necesitamos ningún cambio con el encabezado. A continuación tenemos que encargarnos de la sección de servicios. Voy a seleccionar envoltorio de servicios. Define el ancho. El ancho va a ser del 75% Bien, la sección de servicios se ve bien. A continuación voy a encargarme de la sección de proyectos. Voy a aumentar el ancho de la navegación. Me refiero a esta navegación aquí. Y también voy a aumentar el ancho del proyecto en, sigamos adelante y seleccionemos Filtrar y establecer su ancho 85% Entonces voy a seleccionar Lista de proyectos aquí. Lista de proyectos, y voy a establecer con al 85% también. ¿Bien? Entonces la sección de proyectos se ve bastante bien. A continuación voy a encargarme de la sección de plantillas. Lo único que voy a hacer es hacer este párrafo esté en el ancho de este párrafo un poco más pequeño. Sigamos adelante y seleccionamos las plantillas a la izquierda, seguidas de los elementos que voy a establecer con 250. Bien, entonces creo que eso es sentarse sobre la página principal. Todo se ve bastante bien. A continuación tenemos que cuidar la página del cliente. Sigamos adelante y abramos el archivo CSS de los clientes y creamos una nueva consulta de medios CSS con un ancho máximo de 40.40 píxeles Voy a aumentar el ancho del envoltorio testimonial, me refiero a este elemento wrapper adelante y seleccionemos envoltorio testimonial y fijemos su ancho al 95% Entonces voy a cambiar el ancho del propio testimonio. Seleccionemos testimonial y fijemos su ancho a 32. Nuevamente, la sección testimonial se ve bien con esta página. Ya terminamos. A continuación, echemos un vistazo a la página del producto. Tenemos que hacer tus ligeros cambios. Voy a abrir productos de archivo CSS y luego tenemos que crear nuevos medios CSS. Consulta máx. El ancho va a ser de 14, 40 píxeles. Entonces voy a seleccionar contenido promocional y establecer el ancho 70% Entonces voy a cuidar las formas. Seleccionemos rectángulo promocional. Voy a poner la posición izquierda 8% También voy a cambiarla a posición también. Vamos a ponerla en 25% A continuación, voy a encargarme del círculo grande. Yo también voy a cambiar su posición. Seleccionemos el círculo grande. Establecer posición inferior a 25% Además, voy a cambiar la posición correcta va a ser 8% Eso es todo. La sección de promoción se ve bien. En realidad, con esta página, terminamos. Vamos a revisar la página de contacto. Se ve bien. Además, la página de la cuenta también se ve bien. Vamos a revisar la sección de precios. Entonces voy a cambiar ligeramente la posición del círculo. Voy a abrir el precio del archivo. Y luego vamos a crear media query de noticias con el ancho máximo de 14, 40 píxeles. Voy a seleccionar precios círculo pequeño. Voy a cambiar su posición correcta. Hagamos que sea 7% ¿bien? Eso es todo se ve bastante bien en los puntos de interrupción. Y voy a comprobar este punto de quiebre aquí. A continuación, tenemos que hacer que el proyecto sea receptivo sobre ese punto de interrupción Y para eso, pasemos a la siguiente conferencia. 65. Cómo hacer que los proyectos sean receptivos para pantallas más pequeñas - Parte 2: En la conferencia anterior, hemos hecho proyecto sea receptivo sobre ese punto de ruptura Aquí estoy en el tamaño de pantalla con las siguientes dimensiones. 14, 40 pixeles de ancho y 900 pixeles de alto. A continuación, tenemos que encargarnos del siguiente punto de ruptura. Estoy en esta de aquí. Volvamos al navegador y cambiemos las dimensiones que necesitamos aquí, 13, 66, y luego 768. Voy a volver al código VS. Vamos al archivo CSS de estilo y creamos una nueva consulta de medios CSS. El ancho máximo va a ser de 13, 66 píxeles. Lo primero que voy a hacer es cambiar el tamaño del teléfono del elemento HTML. Voy a establecer el tamaño del teléfono 56% disminuirá el tamaño de los elementos. A continuación, voy a encargarme de los proyectos porque las dos primeras secciones se ven bien. Vamos a encargarnos de los proyectos. Voy a seleccionar Proyecto. Voy a cambiar el ancho, van a ser los dos Ram. Además, necesitamos cambiar el tamaño de las imágenes. Voy a seleccionar la primera imagen con el enésimo selector child insider one El ancho de la primera imagen va a ser 19 Ram. Entonces voy a duplicar este código dos veces porque también necesitamos personalizar las dos imágenes restantes. La segunda imagen, el ancho de la segunda imagen va a ser 17 Ram. Entonces voy a definir la posición izquierda y la voy a poner a cero. cuanto a la tercera imagen, pongámosla con 90% Y además voy a poner la posición correcta a cero, ¿de acuerdo? Como puedes ver, se cambia el ancho de las imágenes y se ven bastante bonitas. Bien, a continuación tenemos que encargarnos de la sección de plantillas. Voy a tomar de las imágenes. Vamos al código VS y seleccionemos plantilla, derecha, seguido de los elementos de imagen. Nuevamente, seleccione, necesitamos la primera imagen. Voy a definir, hagámoslo 30 Ram. Además, voy a cambiar las dos posiciones va a ser 45% Siguiente voy a duplicar este código, cambiar el selector. Necesitamos tu segunda imagen. Estoy definiendo ancho de la segunda imagen. Va a ser 17 Ram. Bien, vamos a revisar el navegador. Creo que todo se ve bastante bien. A continuación tenemos que cuidar la sombra. Es decir, este efecto de desenfoque aquí, como lo recuerdas, es un cuatro elementos de la sección de plantilla. Voy a seleccionar plantillas seguidas de los cuatro elementos. Voy a cambiar el interior de la altura. Vamos a establecer con 270 m. en cuanto a la altura va a ser de 70 m también. También voy a cambiar la posición del elemento que necesitamos. La posición inferior va a ser cero. Y también necesitamos la posición correcta, que va a ser 8% Ahora tenemos mejores resultados en realidad con la página principal. Ya terminamos. Todas estas secciones se ven bien. Vamos a revisar el resto de las páginas. Creo que la página del cliente se ve bien también. Vamos a revisar la página de productos. Voy a hacer aquí algunos cambios. Vamos al código VS y abramos productos del archivo CSS. Voy a crear un nuevo mediario C. Especificar el max con que va a ser de 13, 66 pixeles. En primer lugar, voy a encargarme de las imágenes. Seleccionemos el contenido de los productos. En ese momento necesitamos imagen con selector infantil. Voy a seleccionar la primera imagen. Cambiemos las alturas interiores. Voy a establecer el ancho a 30 Ram. Entonces la altura será de 60 Ram. También voy a cambiar la posición de la imagen. Vamos a establecer la posición superior al 45% En cuanto a la derecha, posición va a ser 13% La primera imagen está personalizada. A continuación tenemos que cuidar la segunda imagen. Voy a duplicar este código aquí. Entonces voy a cambiar el selector, necesitamos su segunda imagen. El ancho va a ser 17 Ram. Entonces me voy a deshacer de la altura, cambiar a posición, va a ser 20% En cuanto a la posición correcta, voy a hacerla 29% Bien, la segunda imagen se ve bien. A continuación tenemos que cuidar la tercera imagen. Sigamos adelante y volvamos a duplicar este código que necesitamos. Tercera imagen, voy a establecer con 226 Ram. Entonces necesitamos aquí posición inferior, va a ser 28% Entonces voy a poner posición correcta al 3% Las imágenes se ven bien. En realidad, con esta parte aquí estamos, hecho. Sigamos adelante y nos ocupemos del contenido promocional. Selecciono contenido promocional, cambiemos dentro de la altura. El ancho va a ser del 60% En cuanto a la altura, voy a hacerla 40 Ram. Entonces voy a personalizar círculo grande. Una vez que pasamos el cursor sobre el contenido promocional, selecciono círculo grande con la clase animada Voy a cambiar la escala. Va a ser 1.3 Ahora tenemos mejores resultados. En realidad, creo que necesitamos personalizar el rubro porque creo que es más grande de lo que necesitamos aquí. Voy a seleccionar contenido promocional con H one heading elementos. Vamos a establecer el tamaño en tres ahora. Se ve bastante bien. A continuación me ocupo de la sombra. Sigamos adelante y seleccionemos Promo Shadow. Voy a cambiar la posición inferior. Va a ser -14% Entonces voy a cambiar la sombra, me refiero a la posición inferior de la sombra Una vez que pasemos el cursor sobre el contenido promocional, voy a duplicar este código Entonces tenemos que agregar aquí la clase animate. Voy a poner la posición de fondo al 17% Bien, ahora todo se ve bien. Y en realidad con esta sección, ya terminamos. Vamos a revisar otras páginas. La página de contacto se ve bien. Creo que la página de la cuenta se ve bien también. A continuación tenemos aquí la sección de precios. También se ve bien. Creo que ya está. Acerca de los puntos de interrupción, el proyecto se ve bien Voy a comprobar este punto de ruptura. El siguiente punto de interrupción es este de aquí, el tamaño de pantalla con las dimensiones 12, 80 píxeles de ancho y 780 píxeles de alto En el punto de interrupción, necesitamos cambiar el tamaño de fuente del elemento H mel Eso es todo sobre este punto de ruptura. No voy a dedicarle una nueva videoconferencia sobre este punto de ruptura Voy a personalizar el proyecto en el punto de interrupción. En esta conferencia, vayamos al código VS y abramos el archivo Css con estilo Vamos a crear una nueva consulta de medios Css con ancho máximo de 12, 80 píxeles. Después selecciona el elemento Htimil y cambia el tamaño del teléfono. Va a ser 52% Entonces voy a cambiar aquí las dimensiones. Así que vamos a revisar el proyecto. Como puedes ver, todo se ve bien. No necesitamos cambiar nada en ese punto de interrupción. En realidad, olvidé una cosa en la página principal. Aún no he comprobado el reproductor de video. Ese es mi error. Pero como pueden ver, se ve bien. No necesitamos cambiar nada aquí Bien, eso se asienta sobre esos puntos de interrupción Voy a revisar esta también. A continuación, tenemos que encargarnos de este punto de ruptura aquí. Para eso, pasemos a la siguiente conferencia. 66. Cómo hacer que los proyectos sean receptivos para pantallas más pequeñas - Parte 3: En la conferencia anterior, hemos hecho que el proyecto respondiera a esos dos puntos de quiebre aquí Ahora tenemos que seguir adelante y encargarnos del siguiente punto de interrupción, que va a ser 1024 píxeles de ancho y 768 píxeles de alto Volvamos al navegador y cambiemos las dimensiones. Aquí necesitamos 1,024.7 68. Volvamos al código VS y creamos una nueva consulta de medios CS. En el archivo de estilos, voy a definir ancho máximo como 1024 píxeles. Lo primero que voy a hacer es encargarme de la navegación. Sigamos adelante y seleccionemos ninguna parte y cambiemos el relleno. Voy a establecer padding a 0.5 frame. Entonces voy a encargarme del envoltorio de los artículos Nova. Voy a seleccionar elementos Nova, voy a establecer el ancho en 65% Como pueden ver, los elementos de navegación se ven bien. A continuación voy a encargarme del logo. Voy a seleccionar Logo seguido de los Panlements. Pero en este caso voy a seleccionar el primer elemento pan que necesitamos aquí, selección hijo con el valor uno. Voy a establecer la fuente 2.5 Ram. Entonces voy a duplicar este código. Voy a añadir aquí elementos span. Vamos a establecer el tamaño de la fuente en 1.5 Ram. Entonces voy a seleccionar segundo elemento span. Voy a copiar este código aquí. Cambiemos el enésimo selector hijo. Necesitamos aquí dos. En cuanto al tamaño del teléfono, voy a hacer que funcione 1.2. Eso es todo, sobre el logo. A continuación voy a encargarme de la pancarta. Voy a seleccionar banner. Voy a cambiar la posición de la pancarta. Pongamos la posición al 16% En cuanto a la posición izquierda, voy a hacerla 18%. A continuación, voy a encargarme de los rubros. Seleccionemos Banner con H, un elemento de encabezado. Voy a establecer el tamaño de fuente a nueve Ram. En cuanto al segundo encabezamiento, voy a duplicar este código que necesitamos aquí, bandera tres. En cuanto al tamaño de la fuente, van a ser dos. Bien, la pancarta se ve bien. A continuación voy a cuidar los antecedentes. Tenemos que hacer pequeños cambios. Voy a seleccionar VG uno y voy a establecer la posición correcta en -5% En realidad, antes de eso necesitamos cuidar los antecedentes principales Voy a seleccionar G principal. Vamos a establecer la posición izquierda -25% En cuanto al tercer fondo, voy a seleccionar fondo dos Vamos a establecer con 60% Bien, creo que los fondos se ven bien Y en realidad con el encabezado, ya terminamos. A continuación, tenemos que encargarnos de la sección de servicios. Soy Servicios selectos. Voy a establecer la altura de los servicios a 190 altura de vista. Entonces cambiemos el margen. Voy a poner margen a 15 Ram en los lados superior e inferior. En cuanto a los lados izquierdo y derecho, voy a volver a poner el margen a cero. A continuación voy a encargarme de las formas, los fondos, el círculo, y este rectángulo. Voy a seleccionar servicios G uno. Voy a cambiar la posición. La posición superior va a ser -15% Entonces voy a establecer la posición correcta en 3% También voy a establecer diez altura a 60 Ram Voy a hacer que los elementos sean motores. Ajustemos la altura a 60 Ram también. Bien, aquí tenemos el círculo, y creo que tenemos resultados mucho mejores. Cuidemos el rectángulo. En realidad, vamos a duplicar este código. Cambia el nombre de la clase que necesitamos aquí. En cuanto a las posiciones, voy a establecer la posición inferior. -12% entonces voy a usar una posición izquierda y el valor será del 5% En cuanto a la altura cuando, voy a dejar esas dos líneas de código aquí Vamos al navegador. Como pueden ver, tenemos aquí rectángulo y en realidad esta sección se ve bien. Solo necesitamos hacer tu único cambio leve. Necesitamos aumentar el espacio entre esos artículos. Voy a seleccionar lista de servicios ahora mismo. Lista de servicios tiene justificar contenido propiedad con el centro de valor en nuestro caso en ese tamaño de pantalla. Voy a cambiar el valor de la propiedad justify content y voy a establecerla en el espacio de manera uniforme. Ahora el espacio es mucho más grande y creo que se ve mucho mejor. Bien, entonces con la sección de servicios, ya terminamos. A continuación, tenemos que encargarnos de la sección de plantillas porque la sección del proyecto se ve bien. Vamos a encargarnos de la sección de plantillas. Voy a despegar del lado izquierdo. Dejemos plantillas. Voy a cambiar el relleno. Digamos relleno a 25 fram en el lado superior, luego diez Ram en el lado derecho, cero en el lado inferior y cinco fram en el lado izquierdo A continuación te voy a sacar del rumbo. Sigamos adelante y seleccionemos las plantillas izquierda H, uno de los elementos de encabezado. Voy a cambiar el tamaño del teléfono , van a ser cinco Ram. Entonces voy a duplicar este código que necesitamos aquí. Párrafo, voy a cambiar el ancho del párrafo. Va a ser 45 Ram. En cuanto al tamaño del teléfono, voy a configurarlo en 1.5 Ram. El encabezamiento y el párrafo se ven bien. A continuación tenemos que encargarnos del fondo. Voy a seleccionar diez placas, PTN. En primer lugar, voy a disminuir el ancho. Vamos a establecerlo en 27 Ram. Entonces tenemos que cambiar la altura. Va a ser 5.5 Ram. Y luego cambiar el tamaño del teléfono. Voy a poner a 1.6 Ram. Bien, eso se sienta por el lado izquierdo. Cuidemos el lado derecho. Voy a personalizar las imágenes. Seleccionemos las plantillas a la derecha, seguidas de la imagen. En este caso, necesitamos la primera imagen. Vamos a usar el selector de gráficos y seleccionar la primera imagen. Voy a cambiar la posición superior, va a ser 45% También, cambiemos el ancho. Voy a hacer que sea 25 fotograma. Entonces vamos a duplicar este código. Necesitamos su segunda imagen. La posición superior va a ser del 25% Entonces necesitamos la posición izquierda va a ser del 20% En cuanto al ancho, voy a decir 214 Ram. Por último, tenemos que cuidar la tercera imagen. Duplicemos este código, cambiemos el valor del selector de gráfico que necesitamos aquí tres. En caso de la tercera imagen, necesitamos dos posiciones para ser 27% Entonces me voy a deshacer de la posición izquierda y pongamos con 240 Ram. Bien, las imágenes se ven bastante bonitas. A continuación voy a encargarme del botón, me refiero al botón de reproducción. Sigamos adelante y seleccionemos el botón de reproducción. Voy a poner dentro de la altura, ambos, a 17 Ram. Además de eso, voy a personalizar los elementos antes de sentarse del botón de reproducción. Agreguemos aquí antes y pongamos dentro de alturas, ambas a 23 Ram. Bien, entonces el botón está personalizado. Y finalmente voy a encargarme del efecto blar aquí Necesitamos seleccionar plantillas con cuatro pseudo elementos. Voy a poner dentro de alturas, ambas a 60 Ram, y luego cambiar la posición inferior va a ser 10% Bien. Creo que eso se sienta sobre la página de inicio en el punto de ruptura. Todo se ve bien. Comprobemos el reproductor de video, se ve bien. Sigamos adelante y revisemos otras páginas. La página de clientes se ve bien. En cuanto a la página de productos, voy a hacer aquí algunos cambios. Pasemos al código VS y abramos el archivo CSS del producto. Voy a crear una nueva consulta de medios CSS con el ancho mux de 1024 piezas En primer lugar, voy a encargarme del encabezamiento en el párrafo del lado izquierdo de la primera sección. Aquí. Voy a seleccionar los contenidos de los productos. Necesitamos el contenido de los productos, entonces necesitamos H uno elementos de encabezado. Voy a cambiar el tamaño de la fuente. Va a ser Ram. Duplicemos este código y seleccionemos párrafo. El tamaño de fuente en caso del párrafo va a ser 1.5 redondo. Eso es todo, sobre el lado izquierdo. A continuación voy a encargarme de las imágenes del lado derecho. Sigamos adelante y seleccionemos Productos Contenido Derecho, seguido de los elementos de imagen. Y luego necesitamos carta seleccionada. Debido a que tenemos que seleccionar la primera imagen, voy a poner 228 Ram. En cuanto a la altura, va a ser 55 Ram. Entonces voy a duplicar este código dos veces porque tenemos que encargarnos también de las dos imágenes restantes. Necesitamos aquí la imagen dos. Deshagámonos de la altura y cambiemos el ancho. Va a ser 15 Ram. En cuanto a la tercera imagen, voy a establecer con 224 Ram. Necesita imagen tres. Bien, creo que la primera sección se ve bien. A continuación tenemos que encargarnos del contenido promocional. Entonces sigamos adelante y seleccionemos este elemento. Vamos a establecer con 70% entonces yo voy a encargarme del rubro. Seleccionemos el contenido promocional, seguido del elemento H one heading. Voy a establecer el tamaño del teléfono en 2.5 Ram. Ahora el rumbo se ve bien. A continuación tenemos que encargarnos de las formas, me refiero al rectángulo y esos círculos. Sigamos adelante y comencemos con el rectángulo promocional. Voy a establecer dentro de altura a 50 m. quiero decir ambas propiedades, entonces voy a seleccionar el círculo pequeño. Cambiemos la posición del círculo. Voy a establecer la posición superior al 25% En cuanto a la posición correcta va a ser del 40% A continuación, voy a cuidar los círculos grandes. Seleccione círculo grande, entonces voy a agarrar la altura interior de aquí. Vamos a establecer dentro de la altura, ambos a 40 gramos. Bien, el contenido de Romo se ve bien. Voy a cambiar aquí la posición del círculo grande. Una vez que pasemos el cursor sobre el elemento, voy a seleccionar círculo grande Con la clase animada, voy a establecer la posición amplia en -2% ¿bien Entonces ahora creo que tenemos resultados mucho mejores en realidad con esta página. Ya terminamos. Vamos a revisar la página de contenido. Se ve bien. La página de la cuenta se ve bien. Así como para la página de precios. Voy a hacer aquí algunos cambios. Vamos a abrir el precio es archivo y Crear nueva consulta de medios CSS. Especificemos aquí el ancho máximo. Va a ser 1024 pixeles. Voy a seleccionar el precio del auto. Voy a establecer ancho 24 a. Entonces te voy a llevar del rectángulo. Seleccionemos rectángulo. Voy a cambiar la posición. Top position va a ser 28% entonces la posición izquierda será 5% Además, voy a cambiar con la altura. Vamos a ponerlos a los dos en 40 gramos. Vamos a revisar el navegador. Aquí tenemos el rectángulo. A continuación, cuidemos el círculo grande. Voy a duplicar este código. Cambiemos el nombre de la clase. Necesitamos círculo grande en lugar de arriba y dejar propiedades. Necesitamos posiciones abajo y derecha. La posición inferior va a ser 10% Entonces voy a cambiar de izquierda a derecha, y la posición derecha será 5% En cuanto a la altura dentro, voy a ponerlos a ambos en 30 Ram. En realidad, el código no se aplica a los elementos porque necesitamos aquí precios círculo grande y no solo círculo grande. Ahora vamos a revisar el navegador, se aplica el código. El círculo grande es bueno. Vamos a llevarte del círculo pequeño. Duplicemos este código. Estoy de uso, tu posición superior va a ser del 30% entonces necesitamos posición correcta va a ser 5% Probablemente esté dentro de la altura. Voy a ponerles a los dos seis rap que necesitamos aquí. Círculo pequeño. Bien, en realidad creo que podemos mover el círculo un poco hacia arriba. Así que vamos a disminuir la posición superior. Vamos a ponerla en 28% voy a cambiar de nuevo el valor. Digamos 25% Hagamos la primera posición 26% Bien, creo que eso es sobre estos puntos de quiebre. Todas las páginas se ven bien. A continuación, tenemos que hacer que nuestro proyecto sea receptivo en tabletas. Veamos aquí este punto de quiebre y pasemos a la siguiente conferencia, donde comenzaremos a hacer que el proyecto sea receptivo en tabletas. 67. Cómo crear un menú de hamburguesa - Parte 1: Bien, en la conferencia anterior hemos terminado de trabajar en el punto de ruptura Como dije, tenemos que avanzar en respuesta para hacer que el proyecto sea receptivo en tabletas. O sea, en esos puntos de interrupción aquí, vayamos al navegador y cambiemos las dimensiones de la pantalla Necesitamos aquí 820 pixeles y luego 11 80 pixeles. Este es el tamaño de pantalla de la tableta. Vamos al código VS y al archivo CSS de estilo abierto. Voy a crear una nueva consulta de medios CS. Vamos a especificar el ancho máximo. Va a ser 820 pixeles. Bien. Entonces antes de empezar a escribir el código, voy a revisar la versión terminada de nuestro proyecto sobre ese punto de ruptura. Como puede ver, ya no tenemos aquí los elementos de navegación. Puedes ver aquí el ícono del menú. Si le hago clic, entonces llegaremos aquí el menú de hamburguesas. Tenemos aquí los elementos de navegación. Abajo, puedes ver la parte inferior de los precios. Si hago clic en alguno de los elementos de navegación, entonces llegaremos aquí los menús desplegables. Tenemos que cambiar la navegación. Es decir, tenemos que transformar la navegación para que se vea así. Vayamos al código VS. Lo primero que voy a hacer es ocultar los elementos de navegación. Voy a seleccionar artículos Nova. Entonces voy a agregar aquí display N. Como puede ver, los elementos de navegación están ocultos. A continuación, voy a crear el icono del menú. Para eso, voy a ir al índice del HTM de archivo justo después del logotipo. Voy a insertar nuevos comentarios para el icono del menú. Entonces voy a abrir Deep tug, va a ser icono de menú El icono del menú constará de dos líneas. Voy a abrir tirón profundo con la línea de clases. Y entonces necesitamos la línea uno. El primero es el nombre común de la clase. En cuanto al segundo, es un nombre de clase individual. Voy a duplicar este código porque necesitamos dos líneas. Cambiemos el nombre de la clase. Va a ser la línea dos. Bien, se crea el icono del menú. A continuación, voy a personalizar este elemento. Voy a seleccionar el icono de menú. Vamos a poner, podemos esconderlos a los dos a cuatro Ram. Voy a añadir aquí algún color backund temporal con el fin de mostrar el icono Vamos al navegador. Como puedes ver, tenemos aquí el ícono del menú. Bien, definamos la posición del icono del menú. Voy a ponerla en posición amino absoluta cinco ram. ¿Correcto? El puesto va a ser cinco Ram también. Bien, después de eso, voy a mostrar las líneas. Ahora mismo, solo son desarrollos vacíos. Por eso no podemos ver las líneas en la página. Voy a seleccionar la línea, pongamos con al 100% entonces la altura será 0.4 Ram. En cuanto al color de fondo, lo voy a poner en blanco. Ahora me voy a deshacer del color de fondo rojo temporal. Tenemos aquí dos líneas. Ahora como puedes ver, necesitamos separar esas líneas, y para eso podemos usar flex box. Voy a agregar flex box al icono del menú. Cuando se muestra flex, entonces tenemos que cambiar la dirección ya que las líneas deben colocarse verticalmente en una columna. La dirección de flexión va a ser columna. Entonces necesitamos espacio entre líneas. Y para eso voy a justificar el espacio de contenido entre. Aquí no necesitamos ese espacio. En realidad, la altura del icono del menú debe ser de dos m y no de cuatro m. Ahora el icono del menú se ve bien. A continuación, voy a transformar la navegación y hacer que se vea de esta manera. Tenemos que cambiar el color de fondo de la navegación, y también tenemos que cambiar el color del texto y el icono. Vayamos al código VS. Voy a seleccionar a Nuer. Cambiemos el color de fondo. Va a ser blanco. Entonces voy a cambiar el color del logo. Sigamos adelante y seleccionemos Nuer seguido del logo. Y entonces necesitamos el elemento Span. Voy a establecer color a F40. Entonces te voy a atrapar sombra de texto, digamos a None. Como puedes ver el color del texto, quiero decir que el color del logo se cambia y se ve bien. A continuación voy a personalizar el icono del menú. Voy a cambiar el color de fondo. Usemos aquí el mismo color que usamos hace un minuto. Necesitamos aquí 40. Como puedes ver, las líneas tienen un color de fondo diferente. Siguiente Voy a transformar icono en X botón de cierre. Para eso, voy a seleccionar la línea uno. Voy a usar la propiedad transform Con la función rotate, el valor será de 45 grados. Además, voy a moverme ligeramente la línea usando la función traducida y. El valor será 1.2 Duplicemos este código y personalicemos la segunda línea que necesitamos aquí, rotemos con 45 grados negativos. En cuanto a la función traducida y, necesitamos aquí negativo 1.2 Vamos a revisar el navegador. Como pueden ver, tenemos aquí x. Ahora tenemos que encargarnos de los elementos de navegación. En este momento están escondidos. Voy a deshacerme de display none En vez de display none, voy a agregar aquí display flex. Necesitamos colocar los elementos de navegación verticalmente en una columna. Por lo tanto, necesitamos dirección flex para ser columna. A continuación, voy a flexionar elementos usando justify content. Flexionar, iniciar y alinear artículos. Propiedades y valores de inicio flexible. Vamos a revisar el navegador. Tenemos aquí los elementos de navegación. Necesitamos cambiar la posición del elemento. Vamos a establecerlo en absoluto. Entonces voy a poner dos posiciones a 12 Ram, porque la altura de la superior es de 12 Ram. En cuanto a la posición izquierda, voy a ponerla a cero. Entonces voy a definir con altura, el ancho de los elementos de navegación será 100% En cuanto a la altura, voy a hacer aquí poco cálculo necesitamos cortar función altura será 100, altura viewpot -12 gramo, que es la altura de la Nper Si agrego aquí color akron con valor 245, entonces obtendremos este resultado aquí Bien, ahora tenemos que personalizar los elementos de navegación. Voy a seleccionar el elemento de navegación pero necesito excluir el último elemento. Me refiero al fondo que necesitamos aquí no pseudo clase, tenemos que agregar aquí el último hijo Ahora el código me refiero a los mosaicos se aplicarán para todos los artículos de Nov excepto el último hijo. El fondo, voy a establecer el ancho al 100% entonces la altura será de 12 gramos. Además, voy a usar flex box. Necesitamos alinear los elementos en el centro. Entonces voy a crear algo de espacio en el lado izquierdo usando padding. Izquierda tres Ram. Los elementos de navegación están muy bien alineados. Ahora tenemos que personalizar los enlaces. Voy a seleccionar ningún artículo que necesitamos aquí. Ningún ítem seguido de los elementos de enlace. Nuevamente, tenemos que excluir el fondo. Voy a insertar aquí. Sin BTN Cambiemos el color del enlace. El color será del 0926 al siete. Y también vamos a deshacernos de la sombra. Pongamos la sombra tecnológica a no. Como puedes ver, los enlaces se ven bien. Después de eso, voy a crear esos signos más aquí. Y lo voy a hacer usando cuatro elementos. Sigamos adelante y seleccionamos Sin ítem, seguido de los cuatro elementos como el contenido que voy a insertar aquí, más seno. Entonces necesitamos el tamaño de la fuente. Va a ser forma También, voy a cambiar el color. Vamos a usar aquí color F4a0. Aquí tenemos los senos más. En realidad no necesitamos más seno con el botón, voy a excluir botón aquí. Para eso necesitamos volver a usar. Entonces tenemos que agregar aquí último hijo. Ahora como pueden ver, ya no tenemos aquí el signo más. Todo bien. Ahora tenemos que encargarnos de la posición del signo más. Para eso, voy a poner posición en absoluto. Entonces necesitamos posicionarnos para ser 50% En cuanto a la posición correcta va a ser cero. Entonces necesitamos centrar el elemento verticalmente. Para eso, voy a transformar, traducir Y -50% Como pueden ver, tenemos aquí el seno más A continuación voy a definir ancho y alto. El ancho va a ser diez. En cuanto a la altura, voy a decir seis corrieron. Tenemos que centrar los elementos. Para eso, voy a usar Display Flex con justify content center y un centro de línea de pedido. Bien, eso es todo, sobre el signo más. A continuación tenemos que encargarnos del último elemento de navegación, que es este botón de aquí. Me refiero al fondo de precios. Voy a seleccionar Novem seguido del último. Ver la clase, pongamos la posición absoluta. Entonces necesitamos que la posición inferior sea cero. También necesitamos posición izquierda, va a ser cero también. Entonces tenemos que definir ancho y alto. El ancho va a ser del 100% En cuanto a la altura, voy a hacer que sea 12 Ram. Entonces voy a definir el color de fondo. Va a ser blanco. Comprobemos el navegador que tenemos aquí la parte inferior. Usemos flex box para alinear el elemento. Vamos a configurar la pantalla para flexionar. Entonces necesitamos justificar centro de contenido y alinear los elementos al centro con el fin de centrar la parte inferior. Como puedes ver, la parte inferior está centrada. Agreguemos aquí sombra usando sombra de caja. Los valores serán 01 Ram, diez Ram como color, voy a usar R GPA Los valores serán 130-16-2235, y la Opacidad 0.2 Eso es todo sobre los elementos padre. Ahora tenemos que personalizar el botón en sí. Sigamos adelante y seleccionemos PTN. Voy a establecer con 290, 5% entonces la altura será de seis Ram. Vamos a cualquier color de fondo, voy a usar 40. Entonces necesitamos que el color sea blanco. Por último, voy a establecer el tamaño del punto a 2.2 m. ¿Bien? Entonces como puedes ver, el fondo se ve bastante bien. En realidad, tenemos aquí el mismo resultado que necesitábamos a continuación. Tenemos que hacer que el menú de hamburguesas funcione, y también tenemos que encargarnos de los desplegables para eso Pasemos a la siguiente conferencia. 68. Cómo crear un menú de hamburguesa - Parte 2: Por lo que en la conferencia anterior, hemos comenzado a hacer proyecto responsive para tablets. Puedes ver aquí las dimensiones para tabletas. Estamos creando el menú de hamburguesas. Ahora en esta conferencia, voy a personalizar los menús desplegables porque en estos momentos no se ven muy bien Voy a darle estilo a los cinco menús desplegables. Volvamos al código DS. Lo primero que voy a hacer es esconder esos triángulos aquí, porque ya no los necesitamos. Es decir, no los necesitamos para las tabletas. Seleccionemos novem seguido del elemento after que necesitamos aquí Para ocultar el elemento after, voy a usar display none. Como puedes ver, los triángulos están ocultos. A continuación, voy a seleccionar el primer desplegable. Voy a definir con, va a ser 100% Entonces necesitamos cambiar la posición superior. Va a ser de 12 gramos. En cuanto a la posición de la pierna, voy a ponerla a cero. Vamos a revisar el navegador. Como puede ver, se cambia la posición. En realidad, vemos aquí los artículos nava. Significa que el menú desplegable terminó detrás de los elementos de navegación. Para solucionar ese problema, voy a usar la propiedad index. Vamos a establecerlo a 100. Ahora el problema está arreglado. A continuación, me voy a deshacer de las ideas fronterizas desde aquí. Voy a poner el radio del borde a cero ya que voy a deshacerme de la sombra de caja, pongámosla en ninguna. Entonces voy a cambiar la dirección del flex. Quiero decir, voy a colocar características y servicios uno encima del otro verticalmente. Y por lo tanto voy a establecer dirección flex a columna, luego deshacerme del pudín. Voy a ponerla a cero eso es sentarse sobre el de arriba hacia abajo, me refiero al envoltorio siguiente, voy a cuidar los lados izquierdo y derecho porque en este momento, el menú de lados izquierdo y derecho porque en este momento, el arriba hacia abajo se ve horrible. Voy a seleccionar Arriba Abajo, uno a la izquierda. Vamos a establecer con 100% entonces la altura va a ser 50% A continuación, voy a crear espacio en la parte inferior usando fondo marchando Vamos a ponerla a cinco Ram. Por último, necesitamos relleno. Vamos a ponerla en dos Ram. Bien, después de eso, voy a seleccionar la lista de características. Seleccionemos la lista de características. Voy a establecer dentro de alturas al 100% entonces voy a usar la caja Flex. Vamos a configurar la pantalla para flexionar. Entonces tenemos que cambiar la dirección. Vamos a establecer la dirección de flexión a la columna. Y por último, tenemos que envolver los artículos flex. Quiero decir, tenemos que colocar los artículos flex en un par de líneas diferentes. Necesitamos flex wrap para envolver el lado izquierdo del menú desplegable. Se ve bien. A continuación voy a cuidar del lado derecho. Sigamos adelante y seleccionemos desplegable uno a la derecha. Voy a establecer el ancho al 100% Entonces la altura va a ser 75 Ram. En realidad no Ram sino por ciento. Entonces voy a poner el relleno a cero en el lado superior, luego dos Ram en el lado derecho, 13 Ram en el lado inferior y dos Ram en el lado izquierdo. Bien, a continuación voy a seleccionar servicios desplegables. Vamos a establecer el ancho al 100% entonces la altura va a ser del 100% Entonces necesitamos su Display Flex. Además, voy a cambiar la dirección que va a ser columna. Y al igual que la lista de características en realidad estoy usando aquí los mismos valores. Solo agreguemos aquí el nombre de la clase. Y deshazte de este código desde aquí. Como puede ver, el lado derecho se ve bien. Voy a cambiar el color de fondo. Agreguemos aquí el color de fondo, blanco. Bien, creo que el primer menú desplegable se ve bien. A continuación tenemos que encargarnos del segundo menú desplegable. Voy a seleccionar el desplegable dos. En primer lugar, definamos dentro de la altura. El ancho va a ser del 100% En cuanto a la altura, voy a ponerla en 75 Ram. Entonces voy a cambiar la posición. La posición máxima va a ser 12 Ram. En cuanto a la posición izquierda, pongámosla a cero y luego revisemos el navegador. Aquí tenemos el segundo desplegable. Al igual que el primero, tenemos que usar la propiedad index porque terminó detrás de los elementos nub Voy a poner el índice a 100. Ahora el problema está arreglado. A continuación, como adivina tenemos que cambiar la dirección de la caja flex. Voy a cambiar, voy a establecer dirección flex a columna que necesitamos aquí, columna. Bien. A continuación me deshago para el radio, pongámoslo a cero. Además no necesitamos sombra de caja, va a ser ninguna. Y luego voy a poner relleno a dos Ram en el lado superior, a Ram en el lado derecho, cero en la parte inferior, y dos Ram en el lado izquierdo. A continuación, voy a crear algo de espacio entre los artículos. Voy a seleccionar desplegable dos con desarrollo, pongamos margen a cero en el lado superior, 0.5 Ram en el lado derecho, dos Ram en el lado inferior y 0.5 Ram en el lado izquierdo. Tenemos aquí algo de espacio. A continuación voy a seleccionar los elementos y disminuir su tamaño. Sigamos adelante y seleccionemos Desplegable a, entonces necesitamos desarrollos. Y luego pongamos el tamaño de la fuente a cinco Ram. Bueno ahora tenemos aquí el problema con la altura del desplegable. Tengo aquí, altura 75 Ram. Deshagámonos de este valor desde aquí y solo fijemos la altura en auto. Vamos a revisar los resultados. Bien, el desplegable se ve bastante bien en realidad, con el segundo menú desplegable, ya terminamos Sigamos adelante y nos ocupemos del resto de los menús desplegables. En realidad, vamos a usar algunos valores y propiedades similares para escribir el mismo código una y otra vez. Voy a seleccionar todos los desplegables simultáneamente. Empecemos por el primero, luego lo voy a duplicar cinco veces, cambiar los números que necesitamos. Desplegar dos, luego bajar tres. A continuación tenemos desplegable cuatro, y finalmente desplegable cinco. Voy a agarrar desde aquí algunas propiedades como estas dos propiedades aquí. Vamos a cortarlos. Además, necesitamos sombra de caja y radio de borde y la propiedad índice. Vamos a agregarlos aquí. Voy a eliminar esas propiedades del segundo menú desplegable. Bien, ahora creo que los cinco menús desplegables deberían verse bien. Vamos a comprobar, los productos se ven bien. A continuación tenemos Contacto. También se ve bien. Y el menú desplegable para cuenta se ve bien también. Bien, los cinco menús desplegables están personalizados. A continuación, tenemos que hacer que el menú de hamburguesas funcione para eso. Pasemos a la siguiente conferencia. 69. Haz que el menú de hamburguesas funcione: En la conferencia anterior, hemos personalizado los menús desplegables para todos los elementos de navegación. Ahora en esta conferencia, voy a hacer que el menú de hamburguesas funcione Sigamos adelante y echemos un vistazo al proyecto terminado. Por defecto, tenemos aquí el icono del menú y los elementos de navegación están ocultos. Si hago clic en el icono, entonces aparecerá la navegación. Elementos de navegación con los menús desplegables. Voy a encargarme de esas cosas en esta conferencia. Vamos al código VS. Lo primero que voy a hacer antes empezar a hacer funcionar la navegación, tengo un pequeño error de la conferencia anterior. Si echamos un vistazo al desplegable dos, verá que nos falta aquí flex direction con la columna de valor. Lo hemos quitado. En lugar de esta línea, necesitamos quitar el cobertizo de caja en ninguno. Ese fue mi error. Bien, ahora estamos listos para comenzar a hacer que el menú de hamburguesas funcione Lo primero que voy a hacer es ir al archivo Javascript y seleccionar el icono de menú. Voy a crear nueva variable, vamos a llamarla icono de menú, Y luego seleccionarla usando el método selector de consultas. Voy a especificar aquí el nombre de la clase, icono de menú. Se selecciona el icono de menú y ahora tenemos que agregar un oyente de eventos al icono con click event Voy a agregar el oyente de eventos al icono del menú. Como dije, necesitamos aquí clic evento seguido de la función Calbeck que se ejecutará una vez que hagamos clic en el icono de menú dentro de la función de Calbeck Voy a agregar un nuevo nombre de clase al knapper usando el método togal Una vez que damos clic en el icono de menú, tenemos que agregar nueva clase a la knapp Y una vez volvemos a hacer clic, entonces tenemos que quitar este nombre de clase de la siesta. Para eso tenemos que usar el método que necesitamos aquí lista de clase alta, seguido del método togal Voy a agregar aquí nueva clase, llamémoslo hamburguesa Vamos al archivo CSS. Voy a ocultar los artículos de Nov usando display none. Después tenemos que agregar la hamburguesa de clase recién creada a los siguientes elementos El primero son artículos de Nov, necesitamos agregar aquí hamburguesa A continuación, voy a agregar hamburguesa de clase a la También necesitamos agregar hamburguesa aquí. Entonces voy a agregar hamburguesa al Novem. Entonces necesitamos Novem para los elementos de enlace. Por último, voy a agregar hamburguesa a las líneas. Me refiero a la línea uno y la línea dos como una hamburguesa aquí C. Bien, vayamos al código VS, luego verifiquemos el resultado. Una vez que haga clic en el icono del menú, aparecerán los elementos de navegación. Entonces cuando hagamos clic en el botón X de cierre, la navegación estará bien en altura. Todo funciona bien. A continuación tenemos que cambiar el color del icono del menú porque debe ser blanco. Voy a encontrar línea y cambiar el color va a ser blanco ya que voy a adherir transición para un efecto más suave necesitamos aquí transformar. Entonces la duración va a ser de 0.3 segundos. También voy a usar la función de temporización de transición llamada. Ahora como pueden ver, aquí tenemos líneas blancas. Si hago clic en el icono del menú, entonces las líneas se transformarán con un efecto más suave. Pero una vez que mostramos la navegación, entonces ya no vemos el icono del menú porque las líneas son blancas. Tenemos que encargarnos de eso. Voy a seleccionar Línea con la clase de hamburguesa tenemos que cambiar, necesitamos aquí la línea de nombre de clase Tenemos que cambiar el color de fondo y va a ser f40 Bien, ahora todo funciona bien. Todo bien. Lo siguiente que voy a hacer es arreglar algunos pequeños problemas aquí. Quiero decir, una vez que mostramos la navegación y luego nos desplazamos hacia abajo, ve que la siesta se volvió pegajosa. Y en realidad no necesitamos eso. Tenemos que impedir esta acción. Volvamos al archivo Vs y busquemos ventana con evento scroll. Ahora tenemos que usar sentencia donde tenemos que si el ancho de la ventana es menor o igual a 820 píxeles, si el de bar tiene la clase hamburguesa, necesitamos verificar esas dos condiciones simultáneamente Voy a usar sentencia if y la condición será ventana interior ancho es menor o igual a 820 píxeles. Tenemos que verificar si de la lista de clase de barra contiene la hamburguesa de clase Si esta condición es verdadera, necesitamos eliminar la clase sticky de la parte superior. Necesitamos aquí ninguna lista de clases eliminar. Tenemos que especificar aquí el nombre de la clase sticky. Además de eso, necesitamos usar la declaración L. Si la condición es falsa, entonces tenemos que alternar la clase sticky en función de la posición de desplazamiento. Si la posición de desplazamiento, me refiero a la ventana scroll Y es mayor que cero, entonces tenemos que agregar clase sticky. De lo contrario, tenemos que eliminarlo. Tenemos que pasar aquí lista de clases Togo. Tenemos que especificar aquí dos cosas. Necesitamos nombres de clase pegajosos, entonces necesitamos scroll de ventana. Y es mayor que cero. Bien, entonces creo que ya está. Ahora el código debería funcionar. Vamos a revisar los resultados. Voy a mostrar la navegación. Entonces si nos desplazamos hacia abajo, tendremos aquí el mismo resultado. Algo anda mal aquí. Vamos a revisar el código. La condición es correcta. Tenemos que quitar la clase ticky de la no parte. Y luego tenemos que agregarlo usando la clase togal. Sí, ya no necesitamos esta declaración si aquí. Tenemos que eliminarlo porque estamos agregando class sticky a la parte now usando el método togal Ya no necesitamos la declaración if anterior. Ahora el código debería funcionar. Vamos a mostrar la navegación, luego desplazarnos hacia abajo. Y sí, ya no tenemos aquí el pegajoso no hay parte. Bien. Si cierro la navegación y luego me desplazo hacia abajo, verás que el icono ya no es visible. O sea, las líneas son blancas y también la posición es diferente. No necesitamos esta posición para el icono. Vamos a encargarnos de eso. Voy a volver al expediente aves. Tenemos que crear sentencia if dentro del evento scroll. Tenemos que verificar si la propiedad de desplazamiento de ventana Y es mayor que cero. Si esta condición es verdadera, entonces voy a agregar nueva clase al icono del menú, que luego se utilizará en el archivo CSS. Para crear nuevos estilos, te necesitamos icono de menú, lista de clases. Voy a llamar a la nueva posición de clase porque estamos cambiando la posición del icono del menú. De lo contrario, si la condición es falsa, entonces necesitamos la declaración L donde tenemos que eliminar clase. Posición desde el menú. Además de eso, necesitamos otra declaración if donde tenemos que comprobar si la siesta contiene hamburguesa clase o no Necesitamos si declaración con la siguiente condición. Necesitamos que la clase contenga. Tenemos que especificar aquí el nombre de la clase hamburguesa. Si esta condición es verdadera, entonces tenemos que eliminar la posición de clase del menú. Necesitamos la misma declaración. A continuación, tenemos que usar la posición de clase y definir nuevos estilos. Voy a encontrar el icono del menú. Aquí lo tenemos. Usemos la posición de clase seguida del menú. Voy a establecer en posición a cuatro m. Entonces necesitamos transformar traducir Y -50% Vamos a agregar aquí transición para un efecto más suave, necesitamos aquí un 0.3 segundo Además de eso, necesitamos cambiar el color de las líneas. Voy a agregar aquí no pegajoso seguido de la línea. Tenemos que cambiar el color de la línea cuando tenemos el alper adherente, por eso uso nob color pegajoso El color de fondo va a ser de 0926 a siete. Bien, vamos a comprobarlo. Si me desplace hacia abajo, entonces se cambiará la posición del icono. Y también tenemos aquí líneas oscuras. Bien, todo funciona bien. A continuación tenemos que encargarnos de los menús desplegables. Una vez que hagamos clic en el elemento de navegación, entonces debería aparecer el menú desplegable adecuado Entonces, una vez que hagamos clic nuevo al elemento de navegación, debería ocultarse. En este momento, puede pensar que ya tenemos aquí clic evento, pero eso no está bien. Es un efecto hover. Cuando tiene un tamaño de pantalla más pequeño, entonces el efecto de desplazamiento funciona como evento clic nuevamente, eso no es evento de clic Tenemos que crearlo. mostrar el menú desplegable y hacer clic. Y también tenemos que transformar este signo aquí. Necesitamos signo menos en lugar de signo más. Sigamos adelante y hagamos esos. Voy a crear nueva variable y va a ser sin ítems. Necesitamos seleccionar todos los artículos de Nov. Vamos a seleccionarlos usando query select o all método. Voy a especificar aquí el nombre de la clase. Va a ser elemento nav. A continuación, voy a revisar los artículos nov. Vamos a usar para cada método que necesitamos aquí parámetro n item, necesitamos agregar click event a cada ítem nav. Aquí no necesitamos ningún ítem seguido del método add event listener Necesitamos especificar aquí el evento click. Además, voy a ins aquí una función de devolución de llamada. Ahora tenemos que comprobar si el elemento de navegación clicado tiene una nueva clase, que luego se utilizará en el archivo CSS para crear nuevos estilos Me refiero a la misma técnica que hemos estado usando a lo largo de este proyecto. Nuevamente, tenemos que verificar si el elemento de navegación clicado tiene la nueva clase Voy a usar declaraciones if donde tenemos que pasar la siguiente condición. Novem lista de clases contiene y tenemos que especificar aquí el nombre de la clase Voy a llamarlo show. Si esta condición es cierta, entonces tenemos que eliminarla. Quiero decir, tenemos que desactivar la visibilidad. Voy a agregar aquí elemento de navegación, lista de clases eliminar. Tenemos que especificar aquí el nombre de la clase show. Entonces necesitamos la declaración L si la condición es falsa. Si el elemento nav no tiene el show de clase, entonces tenemos que iterar a través de todos los elementos de navegación Tenemos que eliminar el show de clase de todos los artículos. Después de eso, tenemos que agregar el show de clase al elemento de navegación clicado Significa que tenemos que tener una visibilidad total sobre. De nuevo, voy a adherir nov artículos forrajeros. Tenemos que mirar a través de los artículos ov. Adheramos el elemento de parámetro. Voy a eliminar class show del item item class list dot remove. Voy a pasar aquí espectáculo de clase. Y luego tenemos que agregar show de clase al elemento nob. Necesitamos aquí nob item class list. Do add, tenemos que especificar aquí nombre de clase, show. Nuevamente, cuando se hace clic en un elemento de navegación, se ejecuta la función de devolución Si el elemento de navegación en el que se hizo clic ya tiene la clase show, significa que el elemento está actualmente visible En este caso, el código elimina la clase show del elemento en el que se hace clic, ocultándola efectivamente Entonces, si el elemento de navegación en el que se hizo clic no tiene la clase show, significa que el elemento está actualmente oculto En este caso, el código primero elimina la clase show de todos los elementos de navegación. Y luego agrega la clase show solo al elemento de navegación clicado, haciéndola visible mientras oculta todos los demás Bien, ojalá entiendas esas cosas. A continuación, tenemos que ir al archivo CSS y buscar desplegable. Voy a seleccionar Desplegable. Me refiero al nombre de clase común que necesitamos aquí, Opacidad cero y visibilidad oculta. Entonces voy a seleccionar elemento nav con dato de hover. Entonces tenemos que usar, de nuevo, desplegable. Necesitamos el mismo código aquí. Me refiero a las mismas propiedades y valores. Entonces voy a seleccionar novem seguido de la clase. Entonces entonces necesitamos de nuevo desplegable. Voy a establecer opacidad a uno y visibilidad visible. De nuevo, creo que todo es correcto. Vamos al navegador y verifiquemos el resultado. Si hago clic en el elemento de navegación, aparecerá el menú desplegable. Una vez que haga clic de nuevo al elemento de navegación, entonces se calentará. Como puedes ver, todo funciona bien. A continuación tenemos que transformar el signo más en menos. Vamos al código VS y busquemos nov item con cuatro elementos. Aquí lo tenemos. Sigamos adelante y seleccionemos ningún elemento con espectáculo de clase, seguido de los cuatro. Ver el elemento. Tenemos que cambiar el contenido y tenemos que hacerlo menos. Bien, revisemos el navegador. Haga clic en el elemento de navegación. Entonces, como pueden ver, ahora tenemos aquí signo menos en lugar de más, ¿de acuerdo? Todo o expine. Pero tenemos que hacer una cosa más. Si cierro la navegación, entonces desplácese hacia abajo y haga clic en el icono de menú. Se mostrará la navegación. Pero como pueden ver, la parte de ahora sigue pegajosa. Y también el color de fondo de las líneas es oscuro. Tenemos que arreglar esos problemas. Voy a volver al archivo script Java. Voy a agregar aquí donde tenemos el evento click con icono de menú. Tenemos que eliminar la clase sticky de la parte ahora. Voy a agregar aquí no por lista de clases toggle. Tenemos que especificar aquí el nombre de la clase, hamburguesa. Entonces tenemos que verificar si la clase hamburguesa no está presente y también si la ventana está desplazada Voy a agregar aquí si declaración donde tenemos que pasar la siguiente condición. No necesitamos operador, entonces la lista de clases contiene la hamburguesa de clase Entonces necesitamos aquí y operador. Y tenemos que comprobar si la ventana scroll y no es igual a cero. Si esta condición es verdadera, si ambas condiciones son ciertas, significa que la clase hamburguesa no está presente y la ventana está garabateada En este caso, la clase sticky se agregará a la lista Napper here Necesitamos aquí pegajoso. Además, necesitamos agregar posición de clase al ícono de menú aquí. Vamos a agarrar este código pas aquí. A continuación necesitamos la declaración L, donde tenemos que eliminar la posición de clase del icono del menú que eliminamos. Bien, creo que ya está. Finalmente terminamos con el menú de hamburguesas. Vamos a revisar el navegador y hacer clic en el icono de menú. Bueno, no funciona. Significa que tenemos un error. Vamos a revisar el código. La condición dentro de la declaración es correcta. Entonces tenemos que añadir pegajoso a, ahora necesitamos a la posición de clase para el icono del menú. Y luego tenemos que eliminar la posición de clase del icono del menú. Bueno, tenemos aquí un error. No sé por qué agregué aquí esta línea. En realidad, necesitamos aquí ahora. Lista de clases de parte, eliminar la clase pegajosa. Ahora es mi error. Creo que debería funcionar. Vamos a hacer clic. Y si, todo funciona bien. Vamos a desplazarnos y luego hacer clic. Entonces como puedes ver, todo funciona a la perfección. Bien, sentémonos sobre el menú de hamburguesas. A continuación tenemos que personalizar el resto de las secciones de la página principal. Y también tenemos que personalizar las otras páginas también. Para eso, pasemos a la siguiente conferencia. 70. Cómo hacer que los proyectos sean receptivos para tabletas: En la conferencia anterior hemos terminado trabajar en el menú de hamburguesas Funciona bien. Y ahora tenemos que seguir adelante y personalizar el resto de las secciones de la página principal. Y también tenemos que personalizar las páginas restantes. Vamos al código VS y seleccionemos encabezado. Voy a cambiar la altura de la cabecera. Va a ser 70 de altura de vista. A continuación, voy a cuidar esos antecedentes aquí estoy en esos tres elementos. Sigamos adelante y seleccionemos PG Main. Voy a aumentar el ancho, va a ser al 50% Y también voy a cambiar la posición del elemento. La posición superior va a ser -105% En cuanto a la posición izquierda, voy a establecer en -50% Eso es todo, sobre el primer fondo A continuación tenemos que encargarnos de esos dos antecedentes Aquí, voy a seleccionar G uno. Cambiemos la posición correcta. Va a ser -10% Duplicemos este código y personalicemos la segunda vuelta atrás, necesitamos cambiar el nombre de la clase Va a ser G dos en caso del segundo fondo voy a deshacerme del signo menos. Vamos a salir de aquí solo 10% Bien, sentémonos sobre el encabezado, todo se ve bien. A continuación tenemos que encargarnos de la sección de servicios. Sigamos adelante y seleccionemos Servicios. Voy a cambiar la altura. Va a ser de 120 put de altura. Entonces voy a cuidar los antecedentes. Aquí estoy en esas formas. Sigamos adelante y seleccionemos los servicios G uno. Cambiemos la posición. Dos posiciones va a ser -20% En cuanto a la posición correcta, voy a ponerla en -5% Entonces dupliquemos este código y cambiemos el nombre de la clase Necesitamos aquí servicios g dos. En caso del segundo elemento, voy a llegar a la posición correcta. Entonces necesitamos aquí la posición izquierda. Voy a ponerla a cero. Bien, eso es lo de la sección de servicios. A continuación tenemos que encargarnos de la sección del proyecto. Voy a personalizar la navegación. Sigamos adelante y seleccionemos Filtro de. Voy a cambiar el ancho. Va a ser 90% Entonces voy a seleccionar elemento de enlace que necesitamos aquí llenar, pongamos ancho a 12. En cuanto a la altura, voy a hacerla 4.5 Ram. Como puedes ver, la navegación se ve bien. A continuación tenemos que encargarnos de la lista de proyectos. Voy a seleccionar Lista de proyectos, y voy a establecer con 90% Siguiente, voy a encargarme de la sección de plantillas porque creo que hemos terminado con la sección de proyectos. Sigamos adelante y seleccionemos elemento de sección con las plantillas de nombre de clase. Voy a establecer la altura a 90 Ram. En realidad no M, sino poner altura, entonces voy a establecer margen inferior a menos uno Ram. Entonces voy a cuidar del lado izquierdo. Seleccionemos las plantillas a la izquierda. Voy a establecer la posición izquierda en 5% También, voy a cambiar el padding. El relleno será 12 en el lado superior, luego diez Ram en el lado derecho, cero en el lado inferior, y luego diez Ram en el lado izquierdo. Bien, después de eso, voy a encargarme de las imágenes del lado derecho. Sigamos adelante y seleccionemos plantillas. Justo entonces necesitamos imagen con enésimo selector hijo. Voy a seleccionar la primera imagen. Cambiemos el ancho. Va a ser 30 carreras. Entonces voy a cambiar a posición, voy a establecer en 70% Duplicemos este código dos veces porque también tenemos que personalizar las dos imágenes restantes. Cambiemos el selector hijo, necesitamos aquí 2.3 en caso de la segunda imagen. Va a establecer el ancho a 18 Ram. Entonces la posición superior va a ser 2% Además de eso, necesitamos posición izquierda, vamos a ponerla en -15% Bien, A continuación tenemos aquí el tercer ancho de imagen para ser 48 Ram En cuanto a la primera posición, voy a hacer a la posición 57% Bien, hemos cambiado las posiciones de las imágenes. A continuación tenemos que tomar aquí de este elemento. Aquí, me refiero al efecto de desenfoque, el cuatro elemento. Entonces voy a seleccionar plantillas seguidas del elemento cuatro su. Vamos a establecer con y altura a 60 Ram. A continuación voy a establecer la posición inferior a -5% Entonces la posición correcta va a ser del 5% También voy a cambiar el fondo Quiero decir gradiente lineal, voy a cambiar la dirección, va a ser dos abajo. Entonces el primer color será transparente. Para la segunda persona que llama, va a ser 8430 Aquí tendremos a la tercera persona que llama y va a ser 863c0 Entonces eso es todo sobre el efecto de desenfoque. A continuación tenemos que cuidar el fondo. Voy a seleccionar play bottom. Voy a establecer dos posiciones a 60% En cuanto a la posición izquierda, va a ser -8% Bien, así que eso se sienta sobre la sección de plantilla El reproductor de video se ve bien. A continuación voy a encargarme del pie de página. Sigamos adelante y seleccionemos el pie de página. Cambiar altura, va a ser 40 altura de la ventanilla. Entonces tenemos que cambiar el relleno. Voy al 3026 en la parte superior. El cero en el lado derecho, tres Ram en el lado inferior y cero en el lado izquierdo. Bien, yo voy a encargarme de las redes sociales. Seleccionemos las redes sociales y voy a establecer el ancho en 35% Bien. Creo que eso se sienta sobre la página de inicio. Todo se ve bastante bien. Sigamos adelante y revisemos la página de clientes. Tenemos que personalizar esta página. Lo primero que voy a hacer es mostrar el icono del menú. Voy a abrir el archivo HTM de los clientes, después voy a agarrar icono del menú del archivo antiguo indexado H tim Vamos a copiar este elemento y pegarlo justo después del logo. Vamos a revisar el navegador. Como puedes ver, el icono del menú es blanco. Hasta que nos desplazemos hacia abajo. Tenemos que cambiarlo. En realidad, voy a agregar aquí el nombre común de la clase. Vamos a llamarlo yo, voy a llamarlo en las páginas, tienes algún nombre mejor. A continuación, voy a encontrar el icono de menú aquí, y voy a seleccionar las páginas de iconos. Cambiemos el color de fondo. En realidad, necesitamos su línea. Cambiemos el color de fondo y hagamos que sea 0926 a siete. Bien, vamos a revisar el navegador. Ahora tenemos aquí el icono del menú con líneas oscuras. Y no necesitamos desplazarnos hacia abajo para mostrarlo. Bien, entonces voy a encargarme del jefe de la página del cliente. Vamos a abrir la página de clientes y crear una nueva consulta de medios CSS. Va a ser 820 pixeles. Voy a seleccionar encabezado testimonial seguido del elemento encabezado H Vamos a establecer con 80% En cuanto al tamaño de fuente del encabezado, voy a fijarlo en 4.7 Bien, continuación voy a tomar de las estrellas. Seleccionemos Estrellas Y fijemos la posición correcta en 12% Bien, así que todo queda bien. Podemos seguir adelante y consultar la página siguiente, que es la página del producto. Tenemos que hacer lo mismo con el icono de menú. Y también tenemos que hacer aquí algunos cambios. Sigamos adelante y abramos productos HTML. Entonces voy a agarrar este código de aquí. Vamos a pegar el icono del menú después del logotipo. Ahora puedes ver aquí el ícono del menú con líneas oscuras. A continuación, voy a crear nuevos medios CSS query los productos del archivo CSS. Necesitamos medios CSS seguidos del maxwidth, que va a ser de ocho píxeles de turno Voy a seleccionar los contenidos de los productos. Voy a cambiar de altura, va a ser 115 Ram. Entonces voy a cambiar la dirección de la caja flex. Tenemos que colocar los artículos flex verticalmente. Por lo tanto, necesitamos aquí flexionar la dirección de la columna. Además, voy a alinear elementos en el centro y luego cambiar el relleno. El relleno será cinco Ram en el lado superior, cero en el lado derecho, cinco Ram en el lado inferior y luego diez Ram en el lado izquierdo. Bien, aquí tenemos el contenido de los productos. Sigamos adelante y personalicemos el lado izquierdo. Voy a seleccionar productos Contenido left. Vamos a establecer con a 60% entonces voy a establecer la altura a auto. También necesitamos acolchado. Va a ser cinco fram en el lado superior e inferior y luego cero en el lado derecho e izquierdo Bien, después de eso, voy a seleccionar párrafo. Sigamos adelante y seleccionemos productos. Contenido a la izquierda, seguido del elemento P. Voy a poner margen a tres Ram en el lado superior, luego cero en el lado derecho. A continuación, necesitamos cinco Ram en la parte inferior y cero en el lado izquierdo. Bien, creo que terminamos con el lado izquierdo. A continuación tenemos que encargarnos de las imágenes. Voy a seleccionar productos, Contenido derecho, Seguido de los elementos de imagen. Y tenemos que seleccionar la primera imagen usando N selector de chat. Voy a cambiar el tamaño de la primera imagen. Tenemos que definir ancho, va a ser 22 Ram. Entonces voy a establecer la altura a 44 Ram. Entonces voy a cambiar la posición de la imagen. La posición superior va a ser 65% En cuanto a la posición correcta, voy a establecer en 24% Como pueden ver, se cambia la posición y el tamaño para la primera imagen. A continuación, tenemos que encargarnos del resto de las imágenes. Voy a duplicar este código dos veces necesitamos aquí Segunda imagen, voy a establecer el ancho a 12 Ram. Entonces voy a llegar a la altura. El primer puesto va a ser del 50% En cuanto a la posición correcta, voy a ponerla en 43 Ram Ram. A continuación tenemos aquí la tercera imagen que voy a establecer con 220 gramos. Entonces necesitamos la posición inferior, va a ser 21% En cuanto a la posición correcta, voy a ponerla en 11% Bien, creo que eso es todo sobre las imágenes. Como puedes ver, se ven bien con esta sección, ya terminamos. A continuación tenemos que encargarnos del contenido promocional. Voy a seleccionar productos promo. Vamos a establecer la altura a 120. Altura de la ventana gráfica. A continuación voy a encargarme de las formas. Voy a seleccionar Rectángulo Promo. Vamos a colocarnos dentro de las alturas, ambas a 42. A continuación voy a cambiar la posición del elemento. La posición superior va a ser 32% En cuanto a la posición izquierda, voy a ponerla en 6% Bien, A continuación tenemos que sacar del círculo pequeño. Aquí voy a seleccionar círculo pequeño. Vamos a establecer la posición del círculo pequeño en 30% En cuanto a la posición correcta va a ser 40% Bien. Después de eso, voy a tomar del círculo grande. Seleccionemos un círculo grande. Voy a poner ambas posiciones al 30% En cuanto a la posición correcta va a ser del 5% Bien, finalmente voy a encargarme del rubro del contenido promocional. Así que sigamos adelante y seleccionemos Contenido promocional, seguido del elemento H one heading. Voy a cambiar el tamaño de la fuente. Va a ser para correr. Bien. Creo que eso se sienta sobre esta sección. Todo se ve bien. A continuación tenemos que encargarnos de la sección de contacto. Como pueden ver, tenemos que hacer algunos cambios. Vamos a abrir el archivo HTML de contacto. En primer lugar, voy a encargarme del icono del menú. Busquemos el logotipo y peguemos aquí el icono del menú. Puedes ver aquí el ícono del menú. Después de eso, voy a crear una nueva consulta de medios CSS en el archivo de contactos. En primer lugar, voy a interferir en los comentarios para que respondan. Entonces voy a crear media query CSS con maxwidth 820 pixeles A continuación, voy a seleccionar el elemento de sección. Voy a cambiar la altura. Va a ser vista 110, poner altura. A continuación voy a seleccionar tres elementos de encabezamiento. Necesitamos aquí cabecera de contacto seguido del elemento H three heading. Vamos a establecer el ancho a 70% Entonces necesitamos cambiar el margen. Voy a poner margen a dos Ram en la parte superior. Entonces necesitamos Auto en el lado derecho, 15 Ram en el lado inferior, y Auto en el lado izquierdo. Nos permite centrar los elementos. Bien, a continuación voy a encargarme del círculo, este trasfondo aquí. Seleccionemos círculo de contacto. Voy a cambiar con y alturas. Vamos a ponerlos a los dos a 70 Ram. Entonces necesitamos cambiar la posición del círculo. Vamos a poner la posición inferior a 25% En cuanto a la posición izquierda, voy a hacerla 2% Vamos a revisar el navegador. El círculo se coloca aquí, no es del todo visible. Pero si cambio el color Bacon y lo pongo a rojo, entonces encontrarás la posición del círculo. Vamos a cambiar el tamaño de esos dos elementos. Voy a seleccionar envoltorio de formulario de contacto, vamos a establecer con 235 Ram. En cuanto a la altura, voy a ponerla en 78 Ram. A continuación, voy a duplicar este código y cambiar el nombre de la clase. Necesitamos tu apoyo. La altura será de 67, bien. Eso se sienta sobre la página de contacto. Puedes ver aquí el círculo. Creo que todo se ve bastante bien. A continuación tenemos que encargarnos de la siguiente página, que es una página de conteo. Así que volvamos al código VS y abramos la cuenta HTML. Voy a agarrar el icono del menú desde aquí, y vamos a pegarlo. El archivo HTML de la cuenta, el icono es visible. Estoy abierto cuenta archivo CS, entonces voy a insite comentarios para responsive A continuación necesitamos crear media query CSS para el ancho máximo de 820 píxeles. Voy a seleccionar los elementos de sección. Vamos a establecer su altura a 100 pies de altura. Entonces voy a cambiar el tamaño del círculo. Y también tenemos que cambiar la posición del círculo. Vamos a poner con y altura ambos a 65 m. Para la posición, la posición inferior va a ser 39% En cuanto a la posición izquierda, voy a ponerla en 23% Bien. Creo que ya está. Acerca de la página de la cuenta, todo se ve bien. A continuación tenemos que encargarnos de la última página del punto de interrupción, y va a ser la página de precios Vamos a abrir aquí precios archivo HTML. Entonces voy a agarrar menú. Vamos a pegarlo después del logotipo y comprobar si se muestra el icono. Como puede ver, se muestra el icono. Voy a ir al precio del archivo CS y crear nueva consulta de medios CSS con el ancho máximo de 820 píxeles. Lo primero que voy a hacer es seleccionar la sección de precios. Voy a cambiar la piel. Va a ser el escondite de 120 vehículos. A continuación voy a encargarme de las formas. Seleccionemos el rectángulo de precios. Voy a cambiar de posición izquierda va a ser -3% Entonces tenemos que encargarnos del círculo pequeño, que en este momento no es visible Voy a seleccionar círculo pequeño. En realidad necesitamos precios. Cambiemos con, en altura , van a ser seis Ram. A continuación tenemos que posicionarnos. Voy a fijarlo en 25% En cuanto a la posición correcta va a ser 1% en realidad voy a mover el círculo arriba de la posición superior al 20% creo que es mejor en realidad. Creo que tenemos que mover el rectángulo hacia arriba también, porque no me gusta del todo este resultado aquí. Vamos a establecer a, digamos 25% Podemos mover el rectángulo ligeramente hacia arriba. Vamos a poner en posición a 20% Ahora el rectángulo se ve mejor, pero creo que el 20% es demasiado. Pongámonos a posicionar a 22% Bien, Ahora creo que es mucho mejor. Bien, a continuación tenemos que encargarnos del círculo grande. Voy a seleccionar un círculo grande. Tomemos esas cuatro líneas de aquí. Voy a poner dentro de la altura a 40 Ram. Entonces necesitamos aquí. Posición inferior, Va a ser 25% En cuanto a la posición correcta, voy a establecer en -5% Bien, creo que se ve bien A continuación voy a encargarme de la cabecera. Seleccionemos el encabezado de precios. Vamos a establecer con 28m. Entonces voy a encargarme de las tarjetas. Ya no necesitamos el efecto tres D aquí. Voy a seleccionar tarjetas de precios y luego voy a establecer perspectiva a ninguna. Bien, por fin voy a encargarme de la tarjeta del lado derecho. Como recuerdas, utilizamos función traducir Z para la tarjeta correcta, por lo tanto voy a seleccionar la tarjeta de precios, ¿verdad? Entonces necesitamos transformar con función translate Z y voy a ponerla a cero. Bien, eso se sienta. Ahora una vez que eliminemos el espacio de tres D, creo que tenemos que cambiar la posición para el círculo pequeño, para el rectángulo también. Coloquemos círculo pequeño, un poco abajo. Vamos a posicionarnos en 25% Bien, es bueno. Voy a aumentar el valor de la posición superior para el rectángulo también. Vamos a establecerlo en 25% Bien. Creo que eso se sienta sobre la página de precios y creo que con este punto de interrupción hemos terminado Me refiero al punto de interrupción para mesa, vamos a comprobar este punto de interrupción Tenemos que hacer que el sitio web sea receptivo en el punto de interrupción. Y para eso, pasemos a la siguiente conferencia. 71. Cómo hacer que los proyectos sean receptivos para teléfonos móviles: Bien, en la conferencia anterior, hemos hecho que el proyecto sea sensible sobre ese punto de ruptura aquí Me refiero al punto de ruptura para tablet. A continuación tenemos que encargarnos de este punto de ruptura aquí. Este es el segundo punto de interrupción para la tableta. Volvamos al navegador y cambiemos las dimensiones que necesitamos aquí. 768, luego 1024. Si revisamos la página de inicio, verás que todo queda bien. Voy a revisar las páginas. Vamos a revisar la página de clientes. Creo que aquí no necesitamos cambiarnos. Vamos a la página siguiente, son productos. La página de productos también se ve bien. A continuación tenemos página de contacto. Se ve bien. Pero entonces tenemos página de cuenta. Creo que tenemos que cambiar la posición del círculo. Vamos al código VS y abramos el archivo CSS de cuenta. Voy a crear una nueva consulta de medios CSS. Maxwth va a ser de 768 pixeles. Después voy a seleccionar círculo de cuentas. Voy a definir la posición inferior. Ahora va a ser 30%, todo se ve bien. Siguiente Voy a consultar la página de precios. Voy a personalizar esta página. Estoy en las formas fondos de las tarjetas. Vamos al código VS y abramos el precio del archivo CSS. Voy a crear una nueva consulta de medios CSS. Vamos a especificar el ancho máximo. Necesitamos 768 pixeles. Voy a seleccionar rectángulo de precios. Cambiemos la posición superior va a ser 30% En cuanto a la posición izquierda, voy a establecer en -6% Entonces voy a seleccionar precios círculo grande Vamos a establecer la posición inferior 12% Bien. Creo que ya está. Todo se ve bien en el punto de ruptura. Y podemos decir que para las tabletas el sitio web se ve bien. Voy a comprobar este punto de ruptura aquí. Ahora como puedes ver, tenemos que seguir adelante y empezar a hacer que el proyecto sea receptivo para teléfonos móviles. El primer punto de interrupción es 430 píxeles de ancho y 32 píxeles de alto Voy a establecer las dimensiones en 43932. Como pueden ver, todo está mal aquí arriba. Sigamos adelante y personalicemos el proyecto. Voy a abrir estilo el archivo CSS. Vamos a crear una nueva consulta de medios CC. El Wi max va a ser de 430 pixeles. Lo primero que voy a hacer es seleccionar elementos HTML. Tenemos que disminuir el tamaño de la fuente. Vamos a establecer el tamaño de fuente en 45% Disminuirá los tamaños de todos los elementos. A continuación, voy a encargarme de la sección de servicios, y después volveremos a la cabecera. Voy a seleccionar servicios. Aumentemos la altura de la sección. Voy a ponerla a 40 de altura de maceta. Entonces ahora tenemos mejor resultado, pero tenemos que encargarnos de las formas que estoy en el fondo. Sigamos adelante y seleccionemos los servicios G uno. Voy a cambiar la posición. El primer puesto va a ser -10% En cuanto a la posición correcta, voy a ponerla en -10% también Vamos a revisar el navegador. La primera forma se ve bien. Cuidemos el rectángulo. Voy a duplicar este código. Cambiemos el nombre de la clase que necesitamos aquí. G dos, estoy. Define la posición inferior y va a ser -8% Bien. Eso es todo sobre la sección de servicios. A continuación voy a encargarme de la pancarta. Sigamos adelante y seleccionemos pancarta. Voy a definir la posición izquierda, va a ser 8% Siguiente, voy a cuidar los antecedentes. Voy a comenzar con los antecedentes principales. Seleccionemos G principal. Voy a definir posiciones. La posición superior va a ser -75% En cuanto a la posición izquierda, voy a establecer en menos uno, 20% Entonces voy a cambiar el fondo, el gradiente lineal Vamos a definir la función de gradiente lineal. La transición de los colores, quiero decir la dirección de la transición va a ser a la izquierda. Entonces necesitamos el primer color, va a ser 44005 En cuanto al segundo color, voy a usar de nuevo 4400b A continuación tenemos que cuidar el segundo trasfondo. Quiero decir, tenemos que seleccionar G dos. Voy a poner la posición izquierda al 20% Bien, creo que ya está. Sobre el encabezado, todo se ve bien. A continuación tenemos que encargarnos de la sección del proyecto. Voy a empezar con los encabezamientos. Sigamos adelante y seleccionemos proyectos H uno elementos de encabezado. Voy a poner una talla a cuatro Ram. A continuación, voy a encargarme del párrafo. En realidad dije que se dirigía, así que ese es mi error. Se trata de un párrafo. Voy a seleccionar proyectos. Voy a establecer ancho 250. Bien. Lo siguiente que voy a hacer es encargarme de la navegación. Voy a colocar los enlaces en dos líneas. Tenemos que seleccionar filtrar hacia arriba, voy a definir la altura. Va a ser 15 Ram. Entonces para colocar los enlaces en dos líneas, tenemos que usar Flex con el valor p. Bien, ahora los enlaces se colocan en dos líneas, pero necesitamos aquí el mismo número de enlaces en cada línea. Estoy aumentando el espacio entre los enlaces de navegación. Seleccionemos el enlace de filtro y establecemos el margen en una sola ejecución. Ahora el problema está arreglado y con esta sección ya terminamos. Todo se ve bien. A continuación tenemos que encargarnos de la sección de plantillas. Voy a encargarme del lado izquierdo. Sigamos adelante y seleccionemos plantilla a la izquierda. Voy a poner la posición let a cero. A continuación, necesitamos que el ancho sea 100% Además, voy a cambiar el relleno. Pongamos el relleno a 12 Ram en la parte superior, luego cinco Ram en el lado derecho, cero en el lado inferior y cinco Ram en el lado izquierdo. Después de eso, voy a colocar los artículos flex en el centro de la sección. Para eso, voy a usar flex box. Vamos a poner esta placa a flex. Entonces tenemos que cambiar la dirección porque vamos a colocar los elementos flex verticalmente en una columna. Necesitamos dirección flexible para ser columna, entonces necesitamos justificar centro de conferencias y también un centro de líneas de artículos. Bien. Así que eso es se sienta sobre el lado izquierdo. En realidad voy a una línea el texto del párrafo en el centro. Voy a seleccionar plantillas a la izquierda, y voy a usar el centro de línea de texto. Bien, ahora todo se ve bien. A continuación tenemos que tomar de las imágenes y también de la parte inferior. Empecemos con las imágenes. Voy a seleccionar plantilla, derecho. Seguido de los elementos de imagen y voy a seleccionar la primera imagen usando el enésimo selector hijo Voy a cambiar de ancho, va a ser 23 Ram. Entonces voy a cambiar de posición. La posición superior va a ser 65% En cuanto a la posición correcta, voy a ponerla en 40% Entonces voy a duplicar este código dos veces porque tenemos que encargarnos del resto de las imágenes que necesitamos aquí, imagen dos y luego imagen tres. El ancho de la segunda imagen va a ser 14 Ram. Entonces la posición será 51% como la posición izquierda que necesitamos aquí. Posición izquierda va a ser -55% A continuación tenemos que cuidar la tercera imagen Vamos a establecer con 38 Ram. Entonces la posición dos va a ser 55% En cuanto a la posición correcta, voy a ponerla en 10% Bien, así que sentémonos sobre las imágenes a continuación. Yo voy a encargarme de esta sombra aquí. O sea, tenemos que seleccionar plantillas con elementos libres. Definamos la posición correcta. Va a ser -7% pero luego necesitamos la posición inferior, va a ser -10% Además, voy a cambiar el Usemos un gradiente lineal. El sentido va a ser dos a la izquierda. En cuanto a los colores, el primero será transparente. Entonces voy a usar la segunda persona que llama, 8430. En cuanto a la tercera persona que llama, va a ser 409b ¿Bien? Todo se ve bien. Tenemos que encargarnos del botón de reproducción. Seleccionemos envoltorio. Definir posición izquierda va a ser -25% Entonces voy a seleccionar Play BTN, voy a disminuir el tamaño del elemento Vamos a establecer ancho y alto, ambos a 15 Ram. Además, voy a cambiar el tamaño de antes del elemento. Duplicemos este código y agreguemos aquí antes el con height for before elemento va a ser 19.5% No por ciento sino Ram Todo bien. Creo que todo se ve bien. Lo único que tenemos que hacer es cambiar el tamaño del ícono de Phm Voy a jugar BTN, seguido del elemento Voy a establecer el tamaño de la fuente a cinco Ram. Bien, eso es todo. Acerca del botón de reproducción, voy a revisar el reproductor de video. Entonces como puedes ver, es momento de cuidar el reproductor de video porque no se ve del todo bien. Voy a seguir adelante y seleccionar Video. Quiero decir, el envoltorio, pongamos el ancho a 50. Eso es por la altura. Va a ser auto. Ahora tenemos que encargarnos de los controles. Seleccionemos los controles de video. Aquí necesitamos controles. Voy a cambiar el relleno. Va a ser una rampa en los lados superior e inferior y cero en los lados izquierdo y derecho. A continuación tenemos que encargarnos de las opciones del lado izquierdo. Voy a seleccionar Opciones con la clase izquierda. Vamos a establecer con 40% Ahora todo se ve bien. Voy a cambiar la posición del botón x Cierre. Seleccionemos X PTN, seguido del elemento Voy a poner en posición a -8% Ken, el reproductor de video. Se ve bastante bien. Vamos a cerrarlo y pasar a la siguiente sección. Se trata de una sección de suscripción. También tenemos que personalizar esta sección. Estoy suscribir envoltorio, pongamos el ancho a 50. Entonces voy a encargarme del insumo. Y al fondo voy a suscribir entrada, necesitamos que suscribas grupo de entrada, vamos a establecer con 240 Ram. Siguiente voy a de las entradas, vamos a usar el selector que tenemos para agregar aquí entrada voy a establecer con en altura a 100% Bien, Eso es todo sobre la sección suscrita A continuación tenemos que encargarnos del pie de página porque los elementos, especialmente los íconos de las redes sociales, están desordenados. Voy a seleccionar pie de página. Vamos a establecer la altura 245, poner la altura. Voy a cambiar la posición de los íconos de las redes sociales. Voy a colocarlos aquí. Abajo seleccione redes sociales. Fijemos la posición a absoluta. Entonces necesitamos posición relativa para el elemento padre, que es footer. A continuación necesitamos la posición inferior. Va a ser seis Ram. También, vamos a establecer con al 100% Entonces voy a colocar los elementos horizontalmente en un rol. Por lo tanto, tenemos que cambiar la dirección de la caja flex y en este caso va a ser papel. Por último, necesitamos justificar el centro de contenido. Bien, como pueden ver, el encabezado y los íconos de las redes sociales se colocan aquí muy bien. Necesitamos algo de espacio entre el encabezado y los íconos. Por lo que voy a seleccionar pie social media seguido de los H tres elementos de encabezamiento. Y voy a poner margen en el lado derecho a cinco m. Bien, ahora todo se ve bien. A continuación voy a encargarme de esos enlaces aquí. Voy a cambiar el tamaño de la fuente. Sigamos adelante y seleccionemos pie inferior, seguido de los elementos. Yo soy el enlace. El tamaño del teléfono va a ser 1.8 Ram. Bien, entonces creo que eso es todo sobre la página de inicio. A continuación tenemos que encargarnos de la navegación. Voy a revisar los desplegables. Como pueden ver, tenemos que hacer aquí algunos cambios. Voy a ocultar esos paneles Panelementsioecond Vamos al código VS y seleccionemos el servicio desplegable. Entonces necesitamos desarrollos seguidos del lapso. Y tenemos que seleccionar segundo panelement usando selector child Vamos a poner la pantalla a ninguna. Como puedes ver, estos panelementos están ocultos. A continuación, voy a cambiar el tamaño del lado derecho del primer desplegable. Seleccionemos desplegable uno derecha y fijemos el ancho al 100% En cuanto a la altura, voy a establecer en 75% En realidad, todos los demás menús se ven bien Por lo tanto, podemos decir eso con la página de inicio y con la navegación. Ya terminamos. A continuación, voy a revisar otras páginas. Vamos a revisar la página de clientes. Tenemos dos, personaliza esta página. Vamos a seguir adelante y abrir archivo CSS de los clientes y crear nueva consulta de medios CSS. Entonces especifica xw, va a ser 430 pixeles. Voy a seleccionar encabezado testimonial seguido del elemento H one heading Voy a definir el tamaño del teléfono. Va a ser forma también. Voy a esconder las estrellas. Seleccionemos estrellas y utilicemos Mostrar No. Bien, ahora todo se ve bien y con la página del cliente, ya terminamos. A continuación, voy a seleccionar la página Productos. Como puedes ver, tenemos que personalizar esta página. Vamos a abrir productos de archivo CCS y crear nueva consulta de medios de comunicación Ss Voy a especificar que Mawi va a ser. 430 pixeles. Después voy a seleccionar el encabezado de productos seguido del elemento H one heading. Vamos a establecer el tamaño del teléfono en cuatro Ram. Bien, a continuación voy a encargarme del segundo rumbo. Sigamos adelante y dupliquemos este código. Voy a cambiar el selector. Necesitamos H tres, entonces el tamaño del teléfono va a ser 2.5 También, cambio el ancho, digamos a 80% Entonces tenemos que centrar el rumbo para eso. Voy a definir margen, va a ser dos carreras en la parte superior. Después en el lado derecho, 15 Ram en el lado inferior y O en el lado izquierdo. Como puede ver el rumbo se coloca en el centro. Bien, eso es cable, el encabezado. A continuación tenemos que encargarnos de la sección de contenido del producto. Voy a seleccionar Wrapper Product Content. Vamos a definir el relleno. Va a ser cinco Ram en los lados superior e inferior y cero en los lados izquierdo y derecho. A continuación, voy a encargarme de esta parte aquí. Seleccionar Productos Contenido Izquierdo. Voy a establecer con al 100% pero luego usemos Flex box. Necesitamos Display Flex. Además, tenemos que cambiar la dirección porque los elementos flex deben colocarse verticalmente en la columna. Por lo tanto, necesitamos dirección flex para ser columna. Además, voy a establecer, alinear los elementos al centro. Bien, Siguiente voy a cambiar la alineación del párrafo. Me refiero al texto del párrafo. Sigamos adelante y seleccionemos productos. Contenido a la izquierda, seguido de los elementos. En primer lugar, voy a cambiar el ancho. Va a ser 8% Entonces coloquemos texto en el centro usando texto. Un centro de línea. En realidad, tenemos aquí algún problema porque este contenido debe colocarse en el centro de la sección. Volvamos al código VS. Y en realidad necesitamos aquí productos contenido y no mo contenido. Como puede ver, el problema está arreglado. Bien, después de eso, voy a encargarme de esas imágenes aquí. Seleccionemos productos Contenido derecho seguido de los elementos de imagen. Y necesitamos primera imagen usando selector de gráficos. Voy a definir con y altura. El ancho va a ser 18 Ram. Entonces necesitamos altura, va a ser 36 Ram. También, voy a cambiar la posición de la imagen. La posición superior va a ser 75% En cuanto a la posición correcta, voy a decir a 30% Duplicemos este código dos veces y cambiemos los selectores de gráfico Necesitamos la imagen número dos y la imagen número tres. Entonces voy a establecer el ancho de la segunda imagen a diez Ram. Voy a deshacerme de altura ya que para la posición superior va a ser 63% Entonces necesitamos la posición correcta, que va a ser 57% En cuanto a la tercera imagen, voy a poner el ancho a 18 Ram. Dejemos aquí este valor. No necesitamos altura. En cuanto a las posiciones que necesitamos aquí, posición inferior. Voy a fijarlo en 13% Para la posición correcta va a ser 7% Bien, creo que ese cable las imágenes. Vamos a revisar los resultados ahora. Creo que todo se ve bien con esta sección. Ya terminamos. Sigamos adelante y nos ocupemos de la segunda sección. Yo, el contenido promocional. Voy a seleccionar productos promo y establecer altura a 100 H. Siguiente Voy a seleccionar contenido promocional y definir anchuras van a ser 8% Ahora tenemos que personalizar el contenido promocional en hover Vamos al código VS y seleccionemos contenido promocional con Hover Hover, voy a cambiar transformar propiedad. Vamos a usar aquí traducir. Los valores serán -50% otra vez -50% Entonces necesitamos cambiar el valor de la función translate Z. Va a ser seis. Bien, ahora todo se ve bien. A continuación tenemos que encargarnos de las formas detrás del contenido promocional. Voy a empezar con el rectángulo. Seleccionemos rectángulo promocional. Voy a poner dentro de la altura, ambos, a 35 Ram. A continuación, voy a cambiar la posición del rectángulo que necesitamos aquí. Top position va a ser 28% En cuanto a la posición izquierda, voy a ponerla en -3% Bien. Después de eso, voy a encargarme del círculo grande. Seleccionemos un círculo grande. En realidad, voy a agarrar este código de aquí. Necesitamos con en altura, con los mismos valores la posición va a estar abajo y el valor será 27% En cuanto a la posición izquierda, voy a cambiarla con posición derecha y el valor va a ser -8% Bien, finalmente tenemos que personalizar el círculo pequeño Seleccione círculo pequeño y cambie la posición. Top position va a ser 26% En cuanto a la posición correcta, voy a decir a 30% Bien, eso es todo sobre las formas. A continuación tenemos que cuidar el encabezado y el párrafo dentro del contenido promocional. Voy a seleccionar Contenido un elemento de encabezado. Voy a cambiar el tamaño del teléfono. Va a ser 1.8 Entonces voy a encargarme del párrafo. Necesitamos contenido promocional seguido del elemento P. Y el tamaño del teléfono va a ser 1.8 Ram también. Bien, creo que eso es sobre la página de productos, todo se ve bien. A continuación tenemos que encargarnos de la siguiente página y va a ser la página de contacto. Como puedes ver, tenemos que personalizar esta página. Vamos a seguir adelante y abrir el archivo CSS de contacto y crear nuevos medios CSS curry necesitamos especificar la x con. En primer lugar voy a seleccionar los elementos de sección con el nombre de la clase contacto y voy a establecer la altura a 180 altura del punto de vista. Entonces voy a encargarme de la cabecera. Seleccionemos el encabezado de contacto seguido del elemento H one heading. Voy a cambiar el tamaño de fuente , van a ser cuatro Ram. A continuación, voy a duplicar este código y encargarme del segundo encabezamiento que es H tres, voy a establecer el tamaño de fuente en 2.5 Ram. Entonces voy a agregar aquí con él va a ser del 80% Y luego tenemos que detectar el rumbo. Voy a usar margin con los valores dos Ram Alto 15 y luego auto también. Entonces eso es sentarse sobre el encabezado. A continuación voy a encargarme de esas dos partes aquí. Voy a seleccionar contenidos de contacto. Tenemos que cambiar la dirección de la caja flexible porque vamos a colocar esos dos elementos uno encima del otro verticalmente. Voy a establecer dirección flex a columna. Entonces necesitamos un centro de líneas de artículos. Ahora como puedes ver, se colocan verticalmente. Tenemos que crear un espacio entre esos elementos. Voy a seleccionar envoltorio de formulario de contacto y después voy a definir margen. Va a ser cero en el lado superior, tres Ram en el lado derecho, diez Ram en el lado inferior y tres Ram en el lado izquierdo. Ahora tenemos aquí algo de espacio. A continuación voy a encargarme de la posición del círculo. Sigamos adelante y seleccionemos círculo de contacto. Tenemos que cambiar la posición inferior va a ser 30% En cuanto a la posición izquierda, voy a ponerla en 5% Bien, creo que todo se ve bien y tenemos que pasar a la siguiente página. Va a ser la página de la cuenta. Voy a ir al código BS y abrir cuenta de archivo CSS. Vamos a crear una nueva consulta de medios CSS. Necesitamos aquí, mawi, 430 pixeles. Voy a seleccionar círculo de cuentas. Cambiemos el tamaño del círculo. Voy a establecer con 260 carreras. También, necesitamos alturas con el mismo valor. Entonces voy a cambiar la posición del círculo. Vamos a sumar la posición inferior al 34% En cuanto a la posición izquierda, va a ser 10% Bien, continuación voy a encargarme del cabezazo. Vamos a agregar encabezado aquí. Necesitamos H uno elementos de encabezamiento. Voy a cambiar el tamaño del teléfono, va a ser de forma, entonces voy a duplicar este código. Seleccione H tres elementos de encabezado. Entonces necesitamos que el tamaño de fuente sea 2.5 Ram. Entonces necesitamos ancho, va a ser 80% Entonces tenemos que centrar el elemento usando margin. Tenemos que correr 15 y otra vez. O bien, eso se sienta sobre la página de la cuenta. Siguiente Te voy a llevar de la página de precios. Vamos al código VS y abramos los precios al archivo CSS. Voy a agregar aquí nueva consulta de medios CSS con el ancho máximo, 430 píxeles. Voy a cambiar la altura de la sección. Seleccionemos precios y fijemos la altura a 18 alturas de vista. A continuación voy a tomar de la cabecera. Seleccionemos el encabezado de precios, seguido de los elementos de encabezado tron. Voy a establecer el tamaño de la fuente en cuatro Ram. Entonces necesitamos cambiar el ancho del encabezado. Va a ser 50 Ram. Entonces necesitamos centrar el elemento usando el margen general. Bien, después de eso, voy a tomar de la segunda cabecera. Voy a duplicar este código, cambiar el selector. Necesitamos H tres, voy a establecer el tamaño del teléfono en dos Ram. Entonces necesitamos lo mismo con, como para el margen. Van a ser dos M, luego dos Ram. Nuevamente, en realidad podemos dejar aquí solo dos M y O. Será exactamente lo mismo. Bien, eso es lo de la H, tres elementos de encabezamiento. A continuación voy a encargarme de las tarjetas. Tenemos que colocarlos verticalmente. Y para eso necesitamos seleccionar tarjetas de precios. Para cambiar la dirección de la caja flex, va a ser columna, ahora se colocan verticalmente en una columna. Voy a crear espacio entre las cartas. Voy a seleccionar tarjeta de precios, voy a poner margen a cero, luego 1.5, luego diez run, y otra vez 1.5 r. ahora tenemos el espacio entre las tarjetas, y lo siguiente que voy a hacer es cuidar las formas. Sigamos adelante y comencemos con el rectángulo promocional. Voy a añadir aquí el código para rectángulo. Necesitamos rectángulo de precios y no rectángulo promocional. Voy a cambiar las dos posiciones va a ser 20% Aquí tenemos el rectángulo. A continuación voy a encargarme del círculo pequeño. Sigamos adelante y seleccionemos círculo pequeño. Necesitamos precios círculo pequeño. Voy a poner posición al 17% En cuanto a la posición correcta va a ser del 5% Por último, voy a cuidar el círculo grande. Tenemos que cambiar la posición. Necesitamos precios círculo grande y la posición inferior va a ser del 8% Bien, creo que así es a ser del 8% Bien, Everton se ve bien en el punto de interrupción Podemos decir que con los primeros puntos de interrupción de los teléfonos móviles se hace Podemos comprobar este punto de interrupción aquí y podemos encargarnos del siguiente punto de interrupción Voy a revisar el sitio web en el punto de interrupción. Sigamos adelante y cambiemos las dimensiones que necesitamos aquí, 393 y 893 pixeles Vamos a revisar los proyectos. Si todo se ve bien, la página de inicio se ve bien, vamos a revisar otras páginas. La página de clientes se ve bien. A continuación tenemos página de productos, se ve bien también. Entonces voy a revisar la página de contacto. A continuación tenemos página de cuenta, finalmente página de precios. Como puedes ver, todo se ve bien. No necesitamos cambiar nada en ese punto de interrupción. Ahora, voy a comprobar aquí este punto de quiebre y sacarte del último punto de interrupción para teléfonos móviles, va a ser 375 pixeles de ancho y 667 pixeles de alto Entonces sigamos adelante y cambiemos las dimensiones que necesitamos aquí, 375.6 67 Entonces, como se puede ver, todo está en mal estado. De nuevo en ese punto de interrupción, sigamos adelante y abramos el estilo del archivo CS y creemos una nueva consulta de medios CSS Va a ser 375 pixeles. Voy a encargarme primero de la sección de servicios, seleccionemos los servicios y aumentemos la altura. Va a ser 350 de altura de ventana gráfica. Bien. Siguiente Voy a encargarme de los servicios G uno. Vamos a establecer la posición superior a -7% Entonces voy a cuidar los antecedentes hasta aquí en la cabecera Sigamos adelante y seleccionemos BG dos. Voy a poner la posición izquierda al 30% Bien, continuación voy a comprobar la navegación Tenemos que hacer aquí algunos cambios. Voy a disminuir la altura del elemento de navegación. Sigamos adelante y seleccionemos ningún artículo pero necesitamos excluir nuevo el novem que está abajo Voy a agregar aquí último hijo a la clase. Además de eso, necesitamos aquí para agregar clase Hamblger, necesitamos disminuir la altura. Van a ser ocho. Entonces voy a cambiar el relleno en el lado izquierdo, digamos que a tres m. Como puede ver, se cambia la altura de los elementos de navegación. A continuación voy a cambiar las posiciones de los desplegables. Tenemos que seleccionar desplegable y luego establecer en oposición a ocho carreras. Bien, lo siguiente que voy a hacer es agregar la barra de desplazamiento al primer menú desplegable. Sigamos adelante y seleccionemos Desplegable uno. Y luego usar la propiedad Desbordamiento Y que necesitamos aquí Desplazarse Ahora como puede ver, somos capaces de desplazarnos hacia abajo en el menú desplegable. Vamos a encargarnos del segundo desplegable. Voy a seleccionar el desplegable dos. Vamos a establecer la altura a 32.5 Ram. Además de eso, voy a seleccionar el desplegable dos con los desarrollos y voy a fijar la altura a una siguiente. Voy a ocultar los íconos y también los párrafos. Desplegemos dos seguidos de los desarrollos, y luego pongamos la exhibición a ninguno. También necesitamos lo mismo para el párrafo. Cambiemos a, bien, así que eso es todo sobre el segundo menú desplegable. Pasemos a la tercera. Voy a personalizar el tercer desplegable. Seleccionemos el menú desplegable tres para cambiar la altura del tercer desplegable. Va a ser 45. Entonces voy a ocultar los segundos elementos de giro dentro del menú desplegable. Seleccionemos el desplegable tres, seguido del desarrollo. Entonces necesitamos span con selector. Necesitamos seleccionar elementos de segundo tramo. Agreguemos aquí mostrar ninguno. Bien, eso es sobre el tercer menú desplegable. El cuarto desplegable se ve bien. cuanto al quinto desplegable, voy a personalizarlo. Sigamos adelante y seleccionemos el desplegable cinco. Voy a cambiar la altura. Van a ser 30. Entonces voy a poner poner a 1.5 Siguiente voy a encargarme del botón, me refiero al botón de precios. Sigamos adelante y seleccionemos Artículo con Último hijo. Entonces clase, voy a establecer la altura a diez Ram. Entonces también voy a cambiar la altura del botón. Duplicemos este código que necesitamos aquí. O BTN voy a establecer la altura a cinco Ram. Bien, vamos a revisar el navegador. Todo se ve bien, en realidad, con la navegación. Ya terminamos. Sigamos adelante y revisemos otras secciones. Todo se ve bien. Como puedes ver, el pie de página necesita algunos ajustes. Sigamos adelante y nos ocupemos de eso. Voy a seleccionar pie de página, y voy a aumentar la altura. Digamos 255 pies de altura. Ahora el pie de página se ve bien. Bien. Eso se sienta sobre la página de inicio. A continuación voy a revisar otras páginas. La página del cliente se ve bien. A continuación tenemos página de productos. Dentro de la página de productos, tenemos que encargarnos del contenido promocional. Vamos a abrir productos de archivo CSS y crear nuevos medios CSS. La consulta Maxwit va a ser de 375 pixeles. Voy a seleccionar Rectángulo promocional. Vamos a ponernos dentro de la altura, ambos a 30. Entonces voy a establecer la posición superior al 23% A continuación, voy a encargarme del círculo grande. Voy a establecer con altura. En realidad, tomemos este código de aquí. El ancho y la altura serán 30. En cuanto a las posiciones que necesitamos aquí, posición inferior. Va a ser 20% posición correcta y ir 30 -11% Vamos a comprobar el resultado Todo se ve bien. A continuación, la posición del círculo pequeño. Seleccionemos círculo pequeño y fijemos su posición superior en 20% Bien, voy a cambiar la posición del círculo pequeño al flotar Volvamos al código VS y dupliquemos este código. Voy a agregar aquí clase animate. La primera posición va a ser 13% Ahora creo que todo queda bien con la sección de productos. Me refiero a la página de productos, ya terminamos. Vamos a revisar la página de contacto. Voy a personalizar esta página. Vamos a abrir el archivo CSS de contacto y crear una nueva consulta de medios CSS. Necesitamos max con 375 pixeles. Seleccionemos la sección de contacto y establecemos la altura 220 altura del punto de vista. Bien, ahora el problema está arreglado. Sigamos adelante y verifiquemos la página de la cuenta. También tenemos que personalizar esta página. Voy a abrir cuenta de archivo CSS. En realidad, tomemos este código de aquí. Necesitamos sección de cuenta. La altura va a ser de 130 puestos de altura. Entonces voy a disminuir el ancho de la cuenta para envoltorio. Seleccionemos la cuenta para el conjunto de envoltorios con 245 Ram. Bien, ahora todo se ve bien con la página de la cuenta. Ya terminamos. Vamos a revisar la página de precios. Bueno, tenemos que aumentar la altura de la página de precios. Vamos a pegar aquí media query, seleccionar precios y establecer la altura a 250 altura del bote. Bien, eso es. Todas las páginas, incluida la página de inicio, se ven bien en este punto de ruptura O sea, el punto de interrupción para los teléfonos móviles, en realidad podemos decir que nuestro proyecto responde todos esos puntos de interrupción realmente populares También podemos comprobar el último punto de quiebre. Ha sido el video más largo del curso. Pero finalmente, terminamos con el proyecto. Lo único que tenemos que hacer es desplegar el sitio web. Es decir, tenemos que alojarlo y hacerlo en línea para eso. Pasemos a la siguiente conferencia. 72. Implementación de sitios web: Bien, en nuestra conferencia anterior, hicimos nuestro proyecto con éxito receptivo a varios tamaños de pantalla y dispositivos. Ahora es el momento de pasar al paso final, desplegando nuestro sitio web en línea. Existen numerosas formas de alojar tu sitio web, pero en este curso, prefiero usar Netlify Netlify es una plataforma en la nube que brinda una gama de servicios para el desarrollo y alojamiento web modernos Ofrece una plataforma como solución de servicio que simplifica el proceso de implementación y administración de sitios web y aplicaciones web Vamos a visitar Netlify Com. Lo primero que tienes que hacer es inscribirte. Se trata de un proceso bastante sencillo. No voy a pasar por ello. Ya me he registrado, así que sólo voy a iniciar sesión. Aquí, tenemos un dashboard del usuario. Para implementar el sitio web, puedes importar tu repositorio Git existente o simplemente puedes arrastrar y soltar tu carpeta de proyecto de trabajo. Prefiero la segunda vía. O sea, voy a arrastrar y soltar la carpeta del proyecto. Pero antes de hacer eso, voy a señalar una cosa ya que recuerda que teníamos tres carpetas diferentes para archivos HTML, CSS y Charles. Si guardé esas carpetas, entonces Atlifi no desplegará el sitio web correctamente Debemos mantener nuestros archivos juntos así. Vamos a abrir los proyectos en código VS. Una vez que eliminé las carpetas y coloqué todos los archivos de trabajo juntos, entonces debería haber cambiado las rutas de los archivos vinculados. Si reviso la ruta del archivo estilo archivo CSS, verás que ya no tenemos aquí dos puntos con barra diagonal y luego el nombre de la carpeta, CSS Yo también hice lo mismo por las imágenes. Como puedes ver tenemos aquí la carpeta de imágenes sin ningún tipo de puntos y barras ¿Bien? Asegúrese de que también cambió las rutas de los archivos e imágenes. Como si no, cuando despliegues el sitio web, no verás los mosaicos ni las imágenes. Bien, creo que estamos listos para dejar caer la carpeta aquí. Voy a salir de este camino, y después voy a dejar caer la carpeta aquí. Tomará algún tiempo. Como puede ver, despliegue el éxito. Voy a hacer clic en Comenzar y luego hacer clic aquí. Voy a hacer clic en el enlace aquí. Como puedes ver, ahora nuestro sitio web está en línea. Podemos ver que todo se ve bien y todo funciona bien. Podemos navegar a diferentes páginas, todo funciona y se ve genial. Podemos decir que nuestro sitio web está en línea. Quiero hacer una cosa más. Como puedes ver el Netlify ha generado algún nombre de dominio de barriga Y quiero cambiarlo. Vamos a hacer clic aquí. Configuración del sitio. Voy a cambiar el nombre del sitio. Usas los nombres que quieras. Depende de ti. Voy a borrar esos caracteres. Y voy a llamar a la página web. No lo sé, Digamos llamarlos Crear sitio web. No es el nombre perfecto, pero no se me ocurre ningún otro nombre. Voy a guardar el nombre, entonces si hago clic en el enlace, verás aquí nombre de dominio con y crear sitio web, Netlify dot app Bien, ahora ya sabes cómo alojar tu sitio web en Netlify. Nuevamente, hay toneladas de formas de alojar los sitios web. Puedes comprar los nombres de dominio y así sucesivamente. Muy bien, enhorabuena. Fantástico trabajo en terminar este curso. Ahora estás equipado con las habilidades para crear sitios web increíbles. Me gustaría dar las gracias por formar parte de este curso. Sigue aprendiendo, mantente curioso y disfruta del viaje. Como desarrollador web, te deseo la mejor de las suertes con todos tus proyectos futuros. Codificación feliz, y que tus sitios web siempre impresionen. Buena suerte. Adiós, adiós.