Construye 30 proyectos web con HTML, CSS y JavaScript (2024)

1. Introducción: Hola y bienvenidos al curso. Espero que este sea tu curso adecuado y disfrutes de los proyectos que estaremos construyendo a lo largo de este curso. Como ya sabrás, vamos a crear 30 proyectos diferentes, modernos y creativos. Todos esos proyectos se construirán en base las tres tecnologías principales de desarrollo web front-end, HTML, CSS y Javascript. Quisiera mencionar una cosa. Como dije, los proyectos se crearán en base a HTML, CSS y Javascript. Debes tener un fuerte conocimiento de HTML y CSS y un conocimiento básico de Javascript para poder seguir las conferencias y no confundirte. Los proyectos estarán llenos de diferentes técnicas y trucos modernos. Podrás aprender sobre cómo crear bonitos y hermosos efectos y animaciones, que podrás utilizar como inspiración para desarrollar y personalizar tu propio portafolio. Como mencioné, estaremos construyendo 30 proyectos. Son plantillas independientes por lo que no tienes que pasar por ellas en orden. Puedes construir cualquiera de los proyectos que quieras de la lista. Depende absolutamente de ti. Algunos de los proyectos son simples, pero también conocerás algunos proyectos avanzados también. Incluimos todos los niveles que el desarrollador necesita en el curso. Estaremos construyendo proyectos como menús de navegación, presentaciones de diapositivas, encabezados de sitios web, tarjetas, aplicaciones web y otros proyectos interesantes y creativos. Estoy seguro de que los disfrutarás. Creo que obtendrás mucha práctica y experiencia en el desarrollo web front-end en el que HTML, CSS y Javascript son una necesidad. También me gustaría mencionar otra cosa. Los proyectos se crean para un tamaño de pantalla extra grande. Si está utilizando un tamaño de pantalla relativamente más pequeño, entonces le recomiendo cambiar al modo de respuesta. Establezca el ancho y la altura como 1920 píxeles y 1080 píxeles, y siga las conferencias con esta resolución. De lo contrario, los proyectos podrían no verse bien en un tamaño de pantalla más pequeño. Y tendrás problemas para seguir las conferencias, por favor tómalo en cuenta. Bien, así que sigamos adelante y 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. Proyecto - aplicación Spotify Music - Parte 1: Hola y bienvenidos a nuestro primer proyecto en este curso. En este video, vamos a comenzar a construir una aplicación de música Spotify con HTML, CSS y Javascript. Antes de saltar directamente a la construcción del proyecto, voy a describirlo. Como puedes ver, tenemos aquí una app de música Spotify, cual consta de un par de partes diferentes. En la parte superior de la aplicación, se pueden ver algunos iconos con el nombre de la aplicación. Entonces tenemos aquí un cover que nos muestra el nombre de la canción y también el artista. Abajo, puedes ver los detalles de la canción y el nombre de la canción de un artista. Entonces tenemos una barra de progreso con la hora actual de la canción y la duración de la canción. Entonces puedes ver aquí los controles del jugador. Abajo, tenemos aquí algunos íconos con algo de texto. Si hago clic en el botón de reproducción, entonces la música comenzará a reproducirse. Como puedes ver, la barra de progreso se está actualizando así como la hora actual de la canción. Entonces si vuelvo a hacer clic en el botón de reproducción, la música dejará de reproducirse. Tenemos aquí los botones siguiente y anterior. Si les hago clic, entonces pasaremos a las canciones siguientes y anteriores. Todo funciona perfectamente. Bien, así que si hago clic en alguna parte de la barra de progreso, entonces se rebobinará la música y también se actualizará la hora actual Bien, así que todo funciona a la perfección. Aquí puedes ver bonitos y geniales efectos de sombra. Se llama CSS Nuevo Morfismo. A lo largo de este tutorial, aprenderás sobre cómo crear los nuevos efectos de morfismo CSS Bien, comencemos. He creado una nueva carpeta en el escritorio llamada aplicación Spotify Music, en la que tengo otra carpeta. Música Incluye tres canciones diferentes. Sigamos adelante y abramos esta carpeta en código VS y luego creamos nuestros archivos de trabajo para HDML Entonces necesitamos archivo para CSS. Además, voy a crear archivo para script Java. Vamos a abrir el archivo HTML y crear los documentos HTML básicos. Voy a colocar aquí un signo de exclamación, luego golpear arriba o Enter. Aquí vamos. Tenemos aquí la estructura HTML básica, los elementos HTML básicos. Lo primero que voy a hacer es cambiar el título. Va a ser Spotify. Música Hasta entonces voy a vincular los archivos CSS y chavs. Voy a abrir etiqueta de enlace. Entonces voy a especificar aquí la ruta del archivo. A continuación, voy a abrir la etiqueta script. En el atributo source, voy a insertar el script de nombre final JS. Entonces necesitamos atributo llamado diferir. Este atributo le indica al navegador que ejecute el script después de que se haya pasado el contenido HTML. Esto significa que el script se cargará asincrónicamente mientras se pasa el contenido HTML, pero no interrumpirá el análisis En realidad, puedes enlazar el archivo Esk desde aquí. Quiero decir, puedes abrir la etiqueta script justo encima de la etiqueta del cuerpo de cierre y luego especificar aquí el alphibute fuente Pero en este caso voy a utilizar esta técnica. Bien, después de eso, sigamos adelante y abramos el proyecto en el navegador usando servidor en vivo, puedes hacer clic ya sea aquí o puedes hacer clic en el botón. Ve a vivir. Nuestro proyecto está en vivo en el navegador. Voy a colocar el navegador y el editor uno al lado del otro, así. Entonces voy a traer también otros enlaces. Vamos a usar iconos de som telefónicos a lo largo de este proyecto, y también voy a usar los teléfonos de Google. Sigamos adelante y busquemos el teléfono increíble CDN JS. Entonces voy a dar click aquí para poder copiar la URL. A continuación, voy a abrir la etiqueta de enlace y luego pegar el CDM copiado aquí en el atributo de referencia H. Bien, después de eso, voy a buscar los teléfonos de Google. Visitemos el sitio web. Voy a buscar teléfonos llamados deliciosos. Dron de mano. Vamos a hacer clic en el teléfono. Entonces necesitamos conseguir teléfonos. Después de eso, voy a seleccionar otros teléfonos. Va a ser signica negativa. Necesitamos aquí negativo. Hagamos clic en Obtener teléfono. Entonces necesitamos obtener el código ambit aquí. Tenemos ambos teléfonos. Voy a copiar esos enlaces y colocarlos aquí en el elemento head. Bien, así que ahora podemos empezar a escribir el marcado HTML. Voy a crear desarrollo que va a ser el contenedor, envolverá todo el contenido. A continuación, tenemos otro desarrollo con el nombre de la clase player que incluirá un par de partes diferentes. La primera parte va a ser player top, me refiero al lado superior del jugador en el que voy a insertar botón con PTN También necesitamos botón apretado. Después dentro del elemento botón, voy a insertar fuente nosomicon Necesitamos elementos I con las clases, una fila sólida a la izquierda. Después voy a insertar tus elementos de panel con la app de texto Spotify Music. A continuación necesitamos otro teléfono, algún icono. En realidad, voy a copiar este buttoon desde aquí. Vamos a pegarlo aquí. Voy a cambiar el icono. En este caso, necesitamos una elipsis sólida. Aquí tenemos dos patrones con el texto. A continuación voy a crear el cuerpo del jugador. Estoy en la siguiente parte de nuestro jugador. Voy a abrir etiqueta con el nombre de la clase cuerpo del jugador. En el que voy a abrir otro div con el nombre de la clase canción actual. Entonces necesitamos crear cobertura. Como recuerdas, la cubierta consta de dos elementos span. El primero va a ser el artista. Sentémonos aquí, King Canyon. Entonces voy a abrir otro lapso y va a ser el nombre de la canción Malland En realidad esas son algunas canciones raras al azar. Los elegí porque están libres de derechos de autor. Y lo hice para evitar cualquier reclamo de derechos de autor. Si no te gustan, eso no es problema, no pongas atención a esas canciones. Bien, a continuación voy a crear información de canción. Necesitamos desarrollos con el nombre de la clase, información de la canción. Entonces necesitamos otro, van a ser detalles de la canción. Entonces voy a insertar tus elementos espinales con el nombre de la clase. Nombre de la canción. Va a ser Holand. Duplicemos este código, cambiemos el nombre de la clase. Va a ser canción. En realidad no hay detalles sino artista. Y necesitamos aquí King Canyon. Todo bien. Después de eso, voy a insertar tu fonosomicón. Va a ser un corazón sólido. Entonces voy a encargarme del progreso de la canción. Quiero decir, voy a crear desarrollo. Va a ser la duración de la canción en la que voy a insertar otra. Va a ser la hora de la canción. Entonces tenemos progreso de la canción. Entonces me voy a Odio. Necesitamos nombre de carpeta Música En la que voy a seleccionar la primera canción, esta. Entonces voy a agregar aquí el nombre de la clase Odio. Bien. Después de eso, voy a tomar de la hora actual y la duración de la canción. Voy a insertar aquí desarrollos con el nombre de clase tiempo en el que voy a insertar dos elementos span. Por ahora, voy a insertar cero. Entonces otra vez cero. Duplicemos estos elementos. Después de eso, tenemos que encargarnos de los controles. Voy a insertar tu desarrollo con los controles de nombre de clase. Entonces voy a insertar tu botón con la clase, en realidad podemos agarrar el botón desde aquí. Voy a cambiar los nombres de las clases por el teléfono, como icono, nada shuffle Duplicemos este botón cinco veces. En realidad cuatro veces, porque general necesitamos cinco botones diferentes. El segundo va a ser botón para canción anterior. Voy a agregar aquí una nueva clase pre PTN. En cuanto a los elementos, necesitamos sólido hacia atrás. Entonces tenemos botón. Vamos a agregar aquí el nombre de la clase, jugar. Las encuestas también cambian los elementos. Va a ser un FA sólido. Jugar. A continuación tenemos bosón para la siguiente canción que necesitamos aquí A continuación, PTN. En cuanto al elemento, va a ser un sólido delantero FA. Por último, voy a cambiar aquí el elemento, va a ser un FA sólido. Repetir. Bien, así como puedes ver, aquí se muestran los cinco iconos. A continuación voy a tomar aquí de la parte inferior de la aplicación. Quiero decir, necesitamos crear esos dos iconos con el texto. Sigamos adelante e ins aquí desarrollo con el jugador de clase. Seguramente necesitamos jugador en el que voy a insertar elementos I. Va a ser un sólido A. Música Entonces voy a insertar tus elementos Span con el texto. Escucha Spotify. Música Por último, necesitamos otro elemento con las clases, una sólida lista A. Bien, sentémonos sobre el marcado HTML. Tenemos aquí muchos elementos diferentes. Ojalá todo sea correcto. Eso lo veremos a lo largo del proyecto. Bien, eso es sentarse sobre el marcado HTML. Todos los elementos están creados, y ahora tenemos que empezar a darle estilo al proyecto para eso. Pasemos a la siguiente conferencia. 4. Proyecto - aplicación Spotify Music - Parte 2: Bien, en la última conferencia hemos creado el marcado HTML para el reproductor, y ahora tenemos que escribir algunos CSS Lo primero que voy a hacer es crear algunos estilos predeterminados para cada elemento. Voy a seleccionar cada elemento usando un asterisco. Entonces voy a definir margen y relleno. Pongamos a ambos a cero. A continuación, voy a definir la propiedad de dimensionamiento de cajas. Y va a ser igual a la caja fronteriza. Significa que todos los elementos dentro de altura incluirán el relleno y el borde. Después de eso, voy a poner línea a ninguno. Además, definamos la familia telefónica. Van a ser los teléfonos que seleccionamos de los teléfonos de Google. Es sinica sensorial negativa. Todo bien. Entonces, como puedes ver, todos los mosaicos predeterminados se aplican a los elementos. A continuación, voy a definir el tamaño del teléfono del elemento HTML. A lo largo de este proyecto, voy a usar Ram como unidad de medida. este momento, una M es igual a 16 píxeles, porque por defecto, el tamaño del teléfono del elemento HTML es igual a 16 píxeles. Quiero convertir una Ram a diez pixeles. Por lo tanto, tenemos que disminuir el tamaño del teléfono del elemento HTML. Vamos a establecerlo en 62.5% En este caso, una M será igual a diez píxeles Como puede ver, el tamaño de los elementos se hizo más pequeño. Después de eso, voy a tomar del contenedor que envuelve todo el contenido de nuestro proyecto. En primer lugar, definamos con y altura. El ancho va a ser del 100% En cuanto a la altura, voy a establecer en 100 altura de viewport Significa que ocupará 100% de la altura del mirador. A continuación, voy a cambiar el color de fondo. Voy a usar gradiente lineal. Por lo tanto, necesitamos aquí vuelta redonda y no color de fondo, o puede usar imagen de fondo. Vamos a usar gradiente lineal. El primer color va a ser 313131. En cuanto al segundo color, voy a usar 151515 Bien. Entonces como pueden ver tenemos aquí el efecto de degradado. A continuación, voy a colocar los contenidos en el centro de la página. Voy a hacer eso usando CSS Flex box. Vamos a configurar la pantalla para flexionar. Entonces necesitamos Justify content center y también un centro de líneas de pedido. Como puedes ver, el contenido se coloca en el centro. Después de eso, sigamos adelante y seleccionemos Jugador que esté definido dentro de la altura. El ancho va a ser 35 Ram. Entonces voy a establecer la altura a 700 Ram. También cambio en realidad no 700 sino 70 m. entonces voy a cambiar el fondo. Vamos a utilizar de nuevo la función de gradiente lineal. La dirección de la transición de color va a ser a la derecha. Entonces voy a especificar los colores. El primero va a ser 313234. En cuanto al segundo color, lo voy a poner 223031 Bien, entonces aquí tenemos al jugador. Voy a crear algún efecto de sombra. Usemos sombra de caja. Los valores serán cero. Especifica el desplazamiento horizontal de la sombra. En este caso, es cero, es decir, no hay desplazamiento horizontal. La sombra estará directamente detrás del elemento. A continuación, voy a pasar un Ram. Este valor especifica la vertical fuera de conjunto de la sombra. Se establece en una Ram, lo que significa que la sombra se desplazará hacia abajo una distancia igual al tamaño de fuente de los elementos multiplicado por uno. El siguiente valor va a ser cinco Ram. Este valor define el radio de desenfoque de la sombra. Un valor mayor creará un efecto de sombra más borrosa. Y por último, necesitamos el color. Va a ser de color negro con la opacidad 0.4 Bien, Así que aquí tenemos el efecto de sombra, que creo que se ve bastante bien A continuación voy a hacer redondear al jugador usando radio de borde. Vamos a ponérselo al Carnero. Entonces voy a alinear el contenido usando flex box. Voy a colocar los elementos verticalmente. En primer lugar, necesitamos Display flex. Entonces tenemos que cambiar la dirección que va a ser. Columna siguiente conjunto, poniendo a tres Ram en los cuatro lados. Bien, eso es todo para el jugador ahora mismo. A continuación voy a encargarme del lado superior del jugador, por lo tanto voy a seleccionar al jugador top. Vamos a establecer el ancho al 100% Entonces voy a alinear los elementos usando flex book. Necesitamos exhibición. Entonces voy a crear algún espacio entre los elementos flex usando justify content. Espacio entre. Por último, necesitamos alinear los elementos en el centro verticalmente. Bien, entonces los elementos están alineados. A continuación, voy a encargarme de los botones. Sigamos adelante y seleccionemos Jugador BTN. Es un nombre de clase común para cada botón del proyecto. En primer lugar, definamos dentro de la altura. Voy a establecer con 24 Rams, va a ser forma también Entonces voy a poner el borde 2.2 sólido. Y el color va a ser RGBA. Necesitamos aquí color blanco, 25053 veces, y entonces la opacidad va a ser 0.1 Después de eso, voy a hacer el botón esté rodeado usando radio de borde Vamos a establecerlo al 50% Entonces voy a cambiar el color de fondo. Vamos a ponerla en dos, B a C a E. Después de eso voy a cambiar el color. Vamos a establecer el color a un 89b que necesitamos para crear el efecto de sombra Como dije al principio del tutorial, vamos a usar CSS, nuevos efectos de morfismo, y lo vamos a crear usando box shadow Voy a insertar aquí un par de valores diferentes y después voy a explicar lo que hacen. Voy a pasar aquí 0.5 Ram, luego otra vez 0.5 Ram, entonces necesitamos dos Ram, luego -0.1 Ram Entonces necesitamos color. Va a ser RGB, un color negro con la opacidad 0.5 Esta es la primera sombra A continuación necesitamos el segundo. Va a ser -0.4 Ram. Entonces otra vez -0.4 Ram. Entonces tendremos dos Ram, -0.1 Ram como color Voy a usar el color blanco. La opacidad va a ser 0.2 Bien, Como pueden ver, tenemos aquí este bonito y fresco efecto de sombra Déjame explicarte qué hacen esos valores. Esta es la primera parte de la sombra. 0.5 Ram es el desplazamiento horizontal de la sombra. Significa que la sombra se desplazará a la derecha 0.5 veces el tamaño de fuente de los elementos. A continuación tenemos de nuevo 0.5. Es un desplazamiento vertical de la sombra. Significa que la sombra se desplazará hacia abajo 0.5 veces el tamaño de fuente del elemento. A continuación tenemos dos Ram, y es un radio de desenfoque de la sombra. Indica un efecto de desenfoque relativamente grande -0.1 Ram. Es un radio extendido de la sombra. Un valor negativo hará que la sombra se contraiga. Y luego tenemos el color. Tenemos de nuevo la segunda parte de la sombra, el primer valor -0.4 Ram Es un desplazamiento horizontal de la sombra. Es un valor negativo, y significa que la sombra se desplazará a la izquierda 0.4 veces el tamaño de fuente de los elementos. A continuación tenemos el desplazamiento vertical de la sombra. De nuevo es un valor negativo. Entonces tenemos radio de desenfoque y luego radio extendido. Se establece en -0.1 Ram. Es un valor negativo y hace que la sombra se contraiga. Bien, así que al final del día, tenemos este bonito y genial efecto. Este tipo de efecto en CSS se llama CSS Nuevo Morfismo. Se implementa utilizando sombras de caja y colores claros y oscuros de fondo para crear la ilusión de que los elementos sean ligeramente extruidos del fondo. Por último, voy a añadir puntero al cursor. Todo bien. Después de eso voy a crear el efecto click para los botones. Voy a seleccionar Player PTN, seguido de los Activos con la clase Voy a usar transform translate Y con el valor 0.2 Ram. Una vez que hagamos clic en el botón, entonces obtendremos este bonito y genial efecto de clic. Después de eso, voy a encargarme de este panelment en la parte superior del jugador Sigamos adelante y seleccionemos Player Top, seguido del panel. Sigamos adelante y aumentemos el tamaño del teléfono. Va a ser 1.3 y luego cambiar el color. Voy a usar este color aquí. 89b. Bien, eso se sienta sobre el lado superior. Pasemos al cuerpo del jugador. Así que sigamos adelante y seleccionemos el cuerpo del jugador. En primer lugar, voy a definir dentro de las alturas. El ancho va a ser 100% En cuanto a la altura, voy a establecer 250, 5% Entonces voy a alinear elementos usando Flex box. Necesitamos Display Flex. Entonces voy a colocar el contenido en el centro. Necesitamos Justify Content Center y Alinear el centro de elementos. Bien, en el centro, tenemos aquí el nombre de la canción y también el artista de la canción. Vamos a crear aquí la portada. Me refiero a esta parte. Sigamos adelante y seleccionemos la canción actual. Definamos dentro de la altura. Voy a ponerlos a los dos a 18 Ram. Entonces voy a cambiar de frontera. Va a ser 0.5 Ram sólido. Y el color va a ser RGP, un color blanco con la opacidad 0.15 Entonces voy a hacer redondeado el elemento Voy a establecer el radio del borde al 50% Finalmente, vamos a crear el mismo nuevo efecto morphis usando box shadow En realidad voy a agarrar la sombra de caja de aquí y luego simplemente cambiar los valores que necesitamos aquí. 0.6 Ram, luego cuatro Ram, entonces necesitamos aquí -0.1 Ram como color Va a ser RGB, un color negro con la opacidad 0.9 En cuanto a la segunda parte que necesitamos aquí, -0.6 Ram, luego cuatro Entonces necesitamos punto -0.2 En cuanto al color, necesitamos color blanco con la opacidad 0.4 Como puedes ver, tenemos aquí este bonito y fresco efecto de sombra Después de eso, voy a seleccionar portada. Estoy en la parte interior de este elemento. Vamos a establecer dentro de la altura al 100% Entonces voy a cambiar el color de fondo. Va a ser 101112. Y también necesitamos bordear radio 50% Bien, después de eso, voy a encargarme de los elementos span. Sigamos adelante y seleccionemos color con span. Cambiemos de familia telefónica. En este caso, voy a usar el segundo teléfono, que es Delicious hand, va a ser cursivo Entonces voy a definir la posición para ambos elementos span. Va a ser absoluto. Y también necesitamos cambiar la propiedad de display. Va a ser una cuadra. Bien, después de eso, voy a personalizar cada elemento spin por separado. Así que sigamos adelante y seleccionemos el primero. Necesitamos cobertura seguida del elemento spin. Voy a usar selector infantil. Necesitamos el primer elemento spin. Cambiemos el color. Va a ser D. Entonces voy a cambiar el tamaño del teléfono. Vamos 30 a 1.6 Además, voy a cambiar la posición. La posición superior va a ser 20% En cuanto a la posición izquierda, voy a establecer en 30% En realidad, necesitamos posición relativa para el elemento padre porque necesitamos alinear los elementos de acuerdo con los elementos padre. Vamos a establecer la posición relativa a la canción actual. Ahora como puedes ver, el elemento se coloca correctamente. Sigamos adelante y dupliquemos este código. Cambiar el niño seleccione, necesitamos aquí dos, entonces el color va a ser blanco. El tamaño del teléfono será 2.5 Ram. Entonces necesitamos posicionarnos con el valor del 35%. En cuanto a la posición izquierda, voy a poner en 20% Además de eso voy a sumar con, van a ser diez Ram. Por último, necesitamos que la línea de textura sea el centro. Bien, la portada se ve bastante bien. Lo único que voy a hacer es rotar ligeramente. Este elemento lo voy a agregar aquí, transformar rotar Z con el valor -15 grados. Bien, vamos a hablar de la portada siguiente, tenemos que llevarnos aquí de la canción en otoño. Seleccionemos canción en otoño. En primer lugar, definir el ancho. Va a ser 100% Entonces necesitamos alinear elementos usando flex book. Voy a establecer display en, entonces voy a crear algún espacio entre los elementos flex, justificar espacio de contenido entre. También necesitamos alinear los elementos al centro, éste centrará el elemento verticalmente. Y luego voy a crear algo de espacio en la parte inferior usando margen. Tres inferiores. Bien, después de eso, voy a seleccionar los detalles de la canción. Cambiemos la dirección de la alineación de los elementos usando libros flexibles. Necesitamos dirección flex para ser columna. Como puedes ver ahora los detalles de la canción se colocan verticalmente uno encima del otro. A continuación, voy a seleccionar Nombre de la canción. Vamos a establecer el tamaño del teléfono en dos. Corre entonces necesitamos color. Va a ser blanco. Además, voy a hacer el teléfono más ligero. Pongamos el peso del teléfono a 300. Bien. Después de eso, te voy a llevar del cantautor. Y en realidad vamos a duplicar este código. Necesitamos a tu artista de la canción. Voy a establecer el tamaño de fuente a 1.2 Ram. Entonces el color va a ser este color aquí. En cuanto al peso de la fuente, me voy a deshacer de él. Bien, vamos a hablar de los detalles de la canción. A continuación vamos a cuidar el corazón, este teléfono también aquí. Así que sigamos adelante y seleccionemos Song Info, seguido de los elementos. Necesitamos. Tamaño de fuente para ser dos M. Entonces voy a cambiar el fondo. Vamos a usar fondo con gradiente lineal. Si echamos un vistazo al proyecto terminado, verás que tenemos aquí fondo degradado lineal. Voy a cambiar la dirección del color. La transición va a ser de dos derechos. Entonces necesitamos colores. El primero será 37. Para el segundo, voy a usar 62 BC 68. Ahora mismo, se cambia el fondo del fontosomicón, y en realidad necesitamos cambiar el color del fonosomicón mismo Para eso, voy a usar las siguientes propiedades. Necesitamos clip de fondo web ket, va a ser texto. Además de eso, voy a usar web ket texto color con valor, transparente. Bien. Ahora se cambia el fondo del icono de los teléfonos y se ve bastante bien. Después de eso, voy a encargarme del tiempo. Sigamos adelante y seleccionemos algún tiempo. Vamos a establecer con a 100% Entonces voy a establecer la altura a 0.5. El color de fondo va a ser 000d. Siguiente Voy a establecer radio de borde 2.5 Ram. Además, necesitamos crear algo de espacio en la parte inferior usando margin, bottom one Ram. Entonces necesitamos crear algunos efectos de sombra. Vamos a poner sombra 2.2 Ram, luego 0.2 Ram, luego otra vez 0.2 Ram. El color va a ser RGBA color blanco con el Opco 0.1 Finalmente cambia el puntero curtido Bien, así como puedes ver, se crea la barra de progreso. A continuación tenemos que encargarnos del progreso hundido. Seleccionemos este elemento. En primer lugar, voy a cambiar la posición. Va a ser absoluto. Entonces necesitamos posicionar relativo para los elementos padre. Entonces necesitamos propiedades superiores e izquierdas, ambas iguales a cero. Cambiar el ancho, va a ser 30% Entonces necesitamos altura que va a ser 100% Entonces necesitamos cambiar el fondo. Vamos a utilizar de nuevo la función de gradiente lineal. En realidad, necesitamos los mismos valores de esta función. Vamos a agarrarlos y pegarlos aquí. Como pueden ver, tenemos aquí el progreso de la canción. Lo único que tengo que hacer es hacerlo redondeado usando radio de borde. Vamos a configurarlo 2.5 run. Bien, vamos a esto, algunos avances. A continuación tenemos que encargarnos del tiempo. Seleccionemos este elemento. Voy a establecer el ancho al 100% Entonces voy a alinear los elementos usando libros flex. Necesitamos mostrar flex y tenemos que crear algo de espacio entre los elementos flex usando justify content. Espacio entre también. Vamos a crear algo de espacio en la parte inferior usando el margen. Abajo tres, corre bien, el tiempo y la duración de la canción están alineados. A continuación tenemos que encargarnos de esos elementos de sartén. Seleccione el tiempo seguido del pan. Voy a aumentar el tamaño del teléfono. Digamos 21 puntos Ram. En cuanto al color, voy a usar el color gris. Éste de aquí. Como puedes ver, el tiempo de la canción y la duración de la canción están personalizados. Después de eso, voy a encargarme de los controles, esos patrones aquí. Sigamos adelante y seleccionemos controles. Voy a establecer con 100% Entonces necesitamos alinearlos usando flex box. Vamos a establecer esta jugada para flexionar, crear algo de espacio usando justificar el espacio de contenido entre. Además, necesitamos alinear los elementos en el centro. Como puedes ver, los botones están alineados. Después de eso, voy a personalizar el botón Play Pose. Como puedes ver, es diferente. Sigamos adelante y seleccionemos Play Pose. Voy a establecer la altura de Witten a cinco fram porque va a ser un poco más grande que los otros botones Vamos a establecer la altura a cinco fram. Entonces voy a cambiar el fondo. En realidad necesitamos los mismos valores. Vamos a agarrar la función de gradación lineal. Como puedes ver, el botón se ve bien. Voy a cambiar el color del icono. Va a ser blanco. Por último, tenemos que cambiar el cuadro Show. En realidad, voy a agarrar la sombra de la caja de aquí. Cambiemos los valores que necesitamos 0.5 Ram, entonces voy a establecer este valor en dos Ram, 0.1 Ram. La opacidad del color va a ser 0.8 A continuación vamos a tener aquí 0.82 voy a cambiar este valor, va a ser 0.1 Ram En realidad necesitamos aquí sombra de caja y no el tamaño de la caja. Bien, para el botón de reproducción, tenemos sombra diferente porque el botón es un poco más grande. A continuación voy a encargarme del pie de página del jugador. Así que sigamos adelante y seleccionemos Player Footer set with to 100% Next I'm going to align items using Flex book. Necesitamos mostrar flex entonces necesitamos justificar el espacio de contenido entre ellos porque necesitamos crear espacio entre los elementos. Entonces voy a establecer alinear elementos al centro. Y finalmente necesitamos margen superior O. ¿Bien? ver claramente por qué necesitamos esta propiedad, comentemos esto. Como puede ver, necesitamos colocar el pie de página hacia abajo. Por eso uso aquí margin top, auto. Necesitamos este elemento porque alineamos los contenidos de todo el reproductor usando Flexbox Necesitamos margen superior para colocar el pie de página abajo. Bien, después de eso, voy a cuidar los íconos en el pie. Seleccionemos elementos, aumentemos el tamaño del teléfono. Va a ser 1.8 Ram y también cambiar el color. Vamos a usar aquí este color gris. Los íconos se ven bien. Después de eso, voy a encargarme de este panelemento. Duplicemos este código, cambiemos el selector que necesitamos aquí elementos pan. El tamaño de fuente será 1.2 e. en cuanto al color, necesitamos aquí, el mismo color. Bien, eso se sienta el jugador está personalizado, se ve bastante bien. Y ahora tenemos que hacerlo funcionar. Para eso, pasemos a la siguiente conferencia. 5. Proyecto - aplicación Spotify Music - Parte 3: Bien, una vez que el reproductor esté personalizado y estilizado, ahora tenemos que agregar algo de Javascript a nuestro proyecto Lo primero que voy a hacer es crear una matriz donde almacenaremos los datos de las canciones. Voy a crear la variable y llamarla datos de canción. Va a ser una matriz. Voy a insertar aquí tres objetos diferentes. Cada objeto incluirá el nombre de la canción, el artista, y también la fuente del archivo de audio. Voy a insertar un objeto en el que voy a crear tres propiedades distintas. El primero va a ser nombre, voy a añadir aquí Holanda. Entonces tendremos Artista, va a ser King Canyon. Entonces tendremos la propiedad fuente en la que voy a insertar la fuente del audiófilo que necesitamos aquí, Mahu Land, luego En realidad es el nombre de la canción. Si revisamos la carpeta de música, verás que tenemos aquí este nombre. Voy a adherir la extensión de la canción. Va a ser la diputada tres. Bien, veamos sobre el primer objeto. Tendremos tres de ellos. Vamos a duplicarlo dos veces. El nombre de la segunda canción va a ser algo así como por venta. Entonces el artista va a ser socio silencioso. Nuevamente, esas son algunas canciones raras. A continuación necesitamos fuente, y va a ser para o Psi socio silencioso. En cuanto a la tercera canción, va a ser la verdad, es el nombre. Entonces tendremos al artista y va a ser Domini. Por último, necesitamos el artista fuente Domini. Bien, así que sentémonos sobre los datos de nuestra canción. A continuación voy a crear un par de variables distintas. Tenemos que seleccionar muchos elementos diferentes. Voy a crear la primera variable, va a ser contenedor. Sigamos adelante y seleccionemos contenedor usando método de selección de consulta de documentos. Especificemos aquí el nombre de la clase, contenedor. En general, tendremos aquí 12 variables y elementos diferentes. Voy a duplicar esta línea de código 11 veces. Bien, así que sigamos adelante y cambiemos los nombres de las variables y también los nombres de las clases. El segundo va a ser el nombre de la canción. Necesitamos el nombre del nombre de tu clase. Entonces tendremos cambio de artista de canción. Necesitamos al artista de la canción A continuación vamos a tener cover, cambiar el nombre de la clase cover. Entonces la siguiente variable va a ser play pulse bottom. Llamemos al pulso de reproducción variable BTN. Entonces en dicho aquí, nombre de clase, obra de poeta. La variable va a ser inferior anterior. Vamos a llamarlo pre BTN. Y seleccionamos la variable, me refiero a los elementos con el nombre de la clase. Pre BTN, siguiente, siguiente, PTM. Cambiemos el nombre de la clase. Después de eso, voy a seleccionar a Odio. Tiene nombre de clase Odio. Entonces la siguiente variable va a ser el tiempo de la canción. Cambiemos la C. Necesitamos tiempo para su hijo. Entonces tendremos progreso de canción. Cambiar el progreso de la canción de clase. Entonces tendremos artista de portada y nombre de portada. Cambiemos el nombre de la variable que necesitamos nombre y va a ser portada. Entonces necesitamos seleccionar elementos span. Y voy a usar aquí seleccionar, vamos a seleccionar realmente nombre de portada es el segundo elemento span que necesitamos aquí dos. En realidad vamos a duplicar este código y deshacernos de esta línea. Cambiar el nombre, quiero decir el nombre de la variable, va a ser artista de portada. Y entonces necesitamos aquí primero lapso. Comprobemos el índice del HTM de archivo y asegurémonos de que estamos en lo correcto aquí. Tenemos portada, la primera es en realidad, la primera es artista y luego tenemos el nombre. Vamos al guión, al archivo GS. Tenemos nombre de portada. el segundo. Bien, es correcto. Sigamos adelante y creamos una variable más, y va a ser índice de canciones. Vamos a la variable borrada usando let keyword song index. Y voy a ponerla a cero. Bien, después de eso, voy a crear una función. Esta función tomará como argumento un índice. Recuperará los datos de la canción de la matriz de datos de canciones Con base en el índice, actualizará varios elementos en la interfaz de usuario con información sobre la canción actualmente cargada. También establecerá el atributo source del elemento audio en el archivo de canción correspondiente. Sigamos adelante y creamos función. Voy a llamarlo canción de carga. Como dije, necesitamos aquí parámetro, llamémoslo índice. Tenemos que actualizar la interfaz de usuario. Tenemos que definir el nombre y artista de la portada y también el nombre y artista de la canción. Y también tenemos que definir la fuente del archivo de audio. Voy a insertar aquí, nombre de portada, contenido de texto. Voy a recuperar los datos de la matriz de datos de canciones que necesitamos aquí, datos de canciones. Entonces tenemos que especificar el índice. Entonces necesitamos name, que es la primera propiedad en el objeto. Duplicemos este código tres veces aquí. Artista de portada. Voy a cambiar propiedad de nombre a artista. Entonces tenemos que definir el nombre de la canción. Por último, necesitamos cantor. Bien, otra vez, en realidad necesitamos aquí artista. Hemos definido el nombre de la portada, artista de la portada, el nombre de la canción y el artista de la canción. Ahora tenemos que definir la fuente del archivo de audio. Voy a agregar aquí audio RC. Será igual a la plantilla literal. Necesitamos carpeta llamada música. Entonces tenemos que especificar aquí la fuente de los objetos que tenemos aquí. Voy a insertar datos de canciones. Entonces tenemos que especificar el índice. Entonces necesitamos propiedad RC. Y finalmente la extensión del archivo de audio P tres. Bien, eso es todo sobre esta función, tenemos que llamar a esta función una vez que se cargará la ventana. Voy a adjuntar un oyente de eventos al objeto window con el evento llamado load Vamos a insertar aquí una función de devolución de llamada. Después llamar a la función cargar canción como los argumentos voy a interferir. Índice de canciones, que hemos creado aquí. Bien, de nuevo, esta función toma como argumento un índice. Recupera los datos de la canción de la matriz de datos de canciones en función de ese índice Y actualiza diversos elementos en la interfaz de usuario con información sobre la canción actualmente cargada. La información, me refiero al nombre de la canción, al artista de la canción, y también a la fuente del archivo de audio. Bien, después de eso, voy a crear otra función para poder tocar la canción. Vamos a seguir adelante y crear variable y llamarlo play song. Porque dije que va a ser una función. Esta función controlará la reproducción del elemento de audio. Se agregará una clase al elemento contenedor para indicar que se está reproduciendo la canción. Además, cambiará el icono del botón play post e iniciará la reproducción del audio. Necesitamos aquí lista de clases de contenedores. Voy a agregar aquí pose de nombre de clase. Entonces necesitamos acceder a la obra en este icono aquí. Es hijo de los elementos de botón. Este como puedes ver, tenemos aquí elementos de botón y luego dentro del elemento botón, puedes ver el elemento. Tenemos que acceder a ese elemento. Por lo tanto, necesitamos Play Button First Element Child. Entonces tenemos que cambiar el nombre de la clase. Va a ser un puesto de FA sólido. Por último, para poder tocar esta canción, tenemos que usar una de las funciones incorporadas en Javascript llamada play. Necesitamos reproducir audio otra vez, esta función me refiero a reproducir función Song controla la reproducción del elemento audio. Agrega una clase al elemento contenedor para indicar que se está reproduciendo la canción. Y también cambia el icono del teléfono del botón play pose. Por último, toca la canción. Bien, de la misma manera que tenemos que manejar la canción, voy a duplicar este código. Necesitamos la función de pose de canción. Entonces voy a cambiar el método d en remove. Además, necesitamos cambiar el atómico telefónico. En este caso necesitamos jugar en lugar de posar. Finalmente, necesitamos publicar el audio usando el método pose. Bien, para que esas funciones funcionen, tenemos que agregar un oyente de eventos al botón de reproducción Y tenemos que llamar a esas dos funciones. Voy a elegir play post BTN con agregar oyente de eventos. Y habíamos especificado aquí el evento clic. Entonces necesitamos la función de devolución que se ejecutará una vez que hagamos clic en el botón Una vez que hacemos clic en el botón, tenemos que verificar si el contenedor tiene la clase pose. Si lo hace, significa que la canción se está reproduciendo actualmente. Tenemos que llamar a la función ****. De lo contrario, necesitamos llamar a play song para comenzar a tocar la canción. Bien, necesitamos sentencia if en la que tenemos que verificar si el contenedor contiene clase. Si lo hace, entonces tenemos que posar la canción. Tenemos que llamar a esta función. Si esta condición es falsa, entonces necesitamos la declaración L y tenemos que función de canción. Bien, sigamos adelante y comprobemos los resultados. Si hacemos clic en el botón play put, entonces se cambiará el icono, pero como puedes escuchar, la canción no se está reproduciendo. En realidad, vamos a revisar la consola. Tenemos aquí un error diciendo que el elemento no tiene fuentes soportadas. Script JS 49 línea. Tenemos problema con la fuente. En realidad, la fuente parece correcta. Aquí tenemos el problema. Bueno, como ves, tenemos aquí la extensión MP tres en la propiedad fuente. Y por lo tanto, ya no necesitamos aquí esta extensión porque se duplicará. Vamos a deshacernos de él. Ahora creo que tocará la canción. Vamos a hacer clic en el botón. Como puedes ver, se está reproduciendo la canción y también se cambia el icono. Bien, así que todo funciona bien hasta ahora. Después de eso, voy a sacarte de la portada. Voy a rotarlo mientras se reproduce la música. Voy a agregar aquí lista de clases de portada. Voy a agregar una nueva clase a la portada. Llamémoslo rotar. Tenemos que eliminar esta clase. Una vez que posemos la canción, necesitamos adherir la misma línea con el método remove. Entonces voy a ir al archivo CSS estilo y encontrar portada aquí Voy a crear una animación. Voy a usar CSS key frames con el nombre cover rotate. Voy a definir la rotación del elemento al 0% voy a establecer transform rotate a cero. Entonces al 100% necesitamos transformar rotar Z con un valor de 360 grados. Después voy a seleccionar la rotación de clase, que agregamos a la portada. Voy a definir la animación. El nombre va a ser tapa rotar. Entonces necesitamos la duración. Van a ser 10 segundos ya que la animación va a ser lineal y necesitamos tocarla infinitamente Bien, toquemos la canción. Entonces como puedes ver, la portada gira una vez que posemos la canción, entonces se detendrá. Bien, así que todo funciona a la perfección. A continuación, voy a encargarme de lo anterior, y adelante. Siguiente botones, tenemos que hacerlos funcionar. Voy a empezar con la canción anterior. Voy a crear una nueva función. Vamos a llamarlo pre juego de canciones. Necesitamos disminuir el valor del índice de la canción. Para eso, voy a usar operador decremento menos menos siguiente Si el índice de la canción es menor que cero. Si es así, entonces tenemos que establecer el índice de la canción al índice de la última canción en la matriz de datos de canciones. Necesitamos aquí si declaración en la que voy a comprobar si el índice de canciones es menor que cero. Si es así, entonces tenemos que establecer el índice de la canción a los datos de la canción a la longitud menos uno. Si el índice de la canción es menor que cero, entonces establecemos el índice de la canción al índice de la última canción en la matriz de datos de la canción. A continuación, tenemos que cargar la función de canción con índice de canción. Entonces tenemos que tocar la función de canción también. Bien, esta función está lista. A continuación tenemos que encargarnos de la siguiente canción, BTN. Es decir, tenemos que crear la función similar para el botón siguiente canción. Duplicemos este código, Cambiar El nombre de la función va a ser la siguiente canción. En lugar de operador decremento, necesitamos operador de incremento. Entonces necesitamos cambiar la condición de la declaración if. Porque tenemos que verificar si el índice de la canción es mayor que el índice de la última canción en la matriz de datos de la canción. Si es así, necesitamos establecer el índice de canciones a cero. Voy a cambiar la condición aquí. Necesitamos que el índice de la canción sea mayor que los datos de la canción a la longitud menos uno. Si es cierto, entonces tenemos que poner el índice de canciones a cero. Entonces necesitamos esas dos funciones para que esas funciones funcionen. Tenemos que llamarlos una vez que hagamos clic en los botones que necesitamos aquí para seleccionar pre BTN con oyente de eventos, el evento va a ser Y también necesitamos aquí una función de libro. Pero en lugar de función libro, voy a insertar el nombre de la función en sí. Reproducción de canciones. Duplicemos este código y cambiemos pre a siguiente. Necesitamos aquí a continuación, Song play. Bien, entonces ahora ambos botones deberían funcionar. Toquemos la canción. Después haga clic en el botón anterior. Como puedes ver, la música se cambia a la canción anterior. Ambos botones funcionan perfectamente. Todo bien. Una vez que los controles funcionan bien. A continuación tenemos que encargarnos de la actualización de tiempo de la canción. Es decir, tenemos que actualizar la hora actual, la duración de la música. También tenemos que actualizar la barra de progreso y así sucesivamente. Bien, lo siguiente que voy a hacer es agregar un oyente de eventos al audio El evento va a ser actualización de tiempo. Este evento se dispara continuamente medida que cambia la posición de reproducción de audio. Agreguemos aquí la función de devolución de llamada. Necesitamos insertar aquí un objeto de evento. Lo siguiente que voy a hacer es extraer la hora actual y la duración. Sigamos adelante y creamos variable y llamémosla hora actual. Debe ser igual al tiempo actual objetivo. Estamos tomando la hora actual del objeto de evento, y el objeto de evento contiene información sobre el evento De la misma manera, tenemos que agarrar la duración. Duplicemos este código. La segunda variable va a ser duración. Tenemos que seleccionar duración. tiempo actual recupera la posición de reproducción actual del elemento de audio y recupera el valor en segundos La duración recupera la duración total del archivo de audio, nuevamente en segundos. Todo bien. Después de eso, tenemos que calcular el ancho del progreso. Voy a crear una nueva variable, llamémosla hora actual. Con ello debe ser igual al tiempo actual dividido por duración. Y tenemos que multiplicar este valor por 100. Bien, Esta línea de código calcula el porcentaje de la duración total que ha transcurrido en función de la posición de reproducción actual Ahora tenemos que actualizar el ancho de la barra de progreso. Necesitamos el progreso de la canción hacer el ancho del estilo. Entonces voy a usar los literales de plantilla. Vamos a insertar aquí, hora actual con. Tenemos que adherir signo porcentual. Bien, con esas dos líneas, actualizamos la interfaz de usuario. Actualizamos el ancho del elemento de progreso de la canción para reflejar la posición de reproducción actual. Esta línea dice dinámicamente el ancho del elemento de la barra de progreso en función del porcentaje del archivo de audio que se ha reproducido hasta el momento en que se reproduce el audio. Este ancho se actualiza continuamente, proporcionando una indicación visual del progreso de la reproducción de audio. este momento, el ancho del avance se establece 30% Sigamos adelante y hagámoslo cero. Entonces voy a tocar la canción. Como pueden ver, la barra de progreso en la que estoy, el ancho de la barra de progreso va aumentando a medida que el lugar Odio. Bien, así que todo funciona bien. Ahora tenemos que actualizar la hora actual de la canción y también el video. No el video sino la duración del audio. Sigamos adelante y creamos nuevas variables. Necesitamos la hora actual de la canción. Voy a seleccionar este método selector de consultas de uso de Panelementlet selector de consultas de uso Seleccionar tiempo seguido de este panelment, tenemos que usar el selector ampchild Voy a seleccionar el primer elemento spin. Entonces vamos a duplicar este código. La segunda variable va a tener cierta duración. Voy a cambiar el selector va a ser hijo dos. Bien, después de eso necesitamos adjuntar un nuevo oyente de eventos al audio que necesitamos aquí escucha de eventos de audio El evento va a ser cargado de datos. Adherimos una función cóvica. oyente de eventos escucha el evento de datos cargado, lo que indica que el navegador ha cargado los datos odio para el elemento odio A continuación, voy a crear en variable, y va a ser duración odio. Debe ser igual a la duración del odio. Ahora estamos extrayendo la duración del odio. Esta línea de código recupera la duración total del archivo de audio cargado en el elemento Odio, y nos da el valor en segundos. Bien, Siguiente voy a crear otra variable, y van a ser minutos totales. Necesitamos calcular el total de minutos y segundos. Debe ser igual al piso matemático. Voy a insertar aquí Odio duración dividida por 60. Eso duplica esta línea de código. Necesitamos segundos totales. En este caso, necesitamos el módulo de duración de audio 60. Todo bien. La primera línea calcula el número total de minutos dividiendo la duración total por 60 y redondeando al entero más cercano Por eso usamos aquí el piso. cuanto a la segunda línea, calcula los segundos restantes tomando el resto al dividir la duración total por 60 y redondear hacia abajo al entero más cercano Bien, después de eso, tenemos que formatear segundos y tenemos que usar sentencia if en la que tenemos que verificar si el total de segundos es menor a diez, entonces tenemos que sumar cero frente al dígito que necesitamos aquí, segundos totales. Entonces voy a usar plantilla literal, necesitamos cero y luego voy a insertar aquí segundos totales. Nuevamente, comprobamos si los segundos totales son menores a diez. Si es cierto, entonces prefijamos un cero a los segundos para asegurarnos de que el formato de visualización de tiempo sea en minutos y segundos. Bien, finalmente tenemos que cambiar el contenido del texto de la duración de la canción que necesitamos aquí duración de la canción seguida del contenido del texto. Voy a insertar aquí literales de plantilla seguidos minutos totales y segundos totales. Necesitamos minutos totales. En realidad necesitamos minutos. Entonces necesitamos columna tenemos dos en total segundos. Bien, como pueden ver, tenemos aquí la duración de la canción. Si pasamos a otras canciones, entonces la duración de la canción se actualizará en consecuencia. Bien, todo funciona bien. A continuación tenemos que encargarnos de la hora actual de la canción. Voy a crear nuevas variables. El primero va a ser minutos actuales. Debe ser igual al tiempo actual del piso de la boca dividido por 16. Duplicemos este código. Necesitamos segundos actuales. Tenemos que cambiar la división por módulo. La primera línea calcula el número total de minutos transcurridos dividiendo el tiempo de reproducción actual por 60 y redondeando al entero más cercano cuanto a la segunda línea, calcula los segundos restantes tomando el resto al dividir el tiempo de reproducción actual por 60 y redondeando hacia abajo al entero más cercano Esta operación asegura que la variable de segundos actual representa la segunda porción del tiempo. Ahora tenemos que revisar de nuevo si segundos actuales son menores a diez, tenemos que hacer lo mismo que hicimos aquí. Necesitamos prefijo cero al dígito necesitamos segundos actuales iguales a cero literal de plantilla, y luego nuevamente, segundos actuales. Bien, ahora tenemos que formatear los segundos. O sea, tenemos que hacer lo similar que hicimos aquí. Agreguemos aquí canción, tiempo actual contenido de texto tenemos que en minutos actuales, dos puntos, segundos actuales. Bien, de nuevo, estamos actualizando la interfaz de usuario. Actualizamos el contenido de texto del elemento some current time con los minutos actuales calculados y los segundos actuales en el formato minutos y segundos. Esta línea dice dinámicamente el contenido de texto de un elemento para mostrar el tiempo de reproducción actual del archivo de audio en minutos y segundos. Bien, sigamos adelante y toquemos la canción. Como puede ver, la hora actual no se está actualizando. Tenemos un problema por aquí. Vamos a revisar el código. En realidad, este código, me refiero al código para minutos y segundos actuales debería estar fuera de este evento. Coloquemos el código aquí y luego verifiquemos los resultados. Como puedes ver, la hora actual se está actualizando para todas las canciones a la perfección. Bien, entonces ahora tenemos que pasar a la última parte de nuestro proyecto. Es decir, tenemos que actualizar la barra de progreso una vez que damos clic en cualquier parte de aquí, como la tenemos en el proyecto terminado. Si hacemos clic en cualquier parte de la barra de progreso, entonces la música se rebobinará en consecuencia. Bien, entonces tenemos que buscar una posición de reproducción específica. Voy a agregar oyente de eventos a la hora de la canción. Con el evento click, necesitamos el evento click del oyente. Y con una función de devolución de llamada, voy a insertar aquí objeto de evento Bien, ahora tenemos que definir el progreso con, vamos a crear una nueva variable. Va a ser progreso con. Debe ser igual al cliente de tiempo de canción. Con, con esta línea de código, recuperamos el ancho del elemento tiempo de canción, que representa el ancho total de la barra de progreso. A continuación tenemos que crear otra variable, y va a ser col offset X. Voy a hacerla igual a offset X. Esta línea recupera la distancia horizontal desde el borde izquierdo del elemento tiempo de la canción hasta el punto donde el usuario hizo clic, indicando la posición donde el usuario quiere buscar Nuevamente, esta línea de código recupera la distancia horizontal desde el borde izquierdo del elemento tiempo de la canción hasta el punto en el que el usuario hizo clic Bien, después de eso, voy a definir la duración de la canción. Vamos a crear otra variable. En realidad necesitamos aquí espacio. La nueva variable va a ser la duración de la canción. Debe ser igual a la duración del odio. Después de eso, tenemos que definir el tiempo actual del Odio. Voy a agregar aquí odio hora actual. Que debe ser igual al desplazamiento de clic x dividido por ancho de progreso. Tenemos que multiplicar este valor a la duración del sol. Bien, esta línea de código calcula la posición de reproducción deseada en el archivo de audio en función la relación entre la posición ajustada clicada dentro del ancho de barra de progreso y el ancho total de la barra de progreso Entonces lo multiplicamos por la duración total del audio. Establecerá la propiedad de tiempo actual del elemento de audio buscando efectivamente la posición de reproducción deseada. Ahora tenemos que llamar a la función play song. Iniciará la reproducción del audio desde la posición de reproducción recién establecida. Bien, sigamos adelante y comprobemos el resultado. Si hago clic, entonces no pasará nada porque tenemos un error. Vamos a revisar la consola. No se puede establecer el script de propiedad de tiempo actual JS 1204124 hora actual En realidad, todo parece estar correcto. Vamos a revisar otras líneas que tenemos aquí. ¿Qué es lo que necesitamos aquí? Puntos del conjunto X, por lo que es un typoleI'm. Perdón por eso. Ahora creo que todo es correcto. Vamos a revisar los resultados. Bien, así que todo funciona a la perfección. Todo bien. Casi terminamos con nuestro proyecto. Lo único que voy a hacer es manejar fin de reproducción de audio. Una vez que termina la canción, entonces tenemos que pasar a la siguiente canción. Voy a agregar aquí oyente emo al audio. El evento va a terminar. Una vez que termina la música, entonces tenemos que llamar a la siguiente función de reproducción de canción. Vamos a insertar aquí, siguiente reproducción de la canción. Bien, cuando se produce el evento terminado, entonces activamos la siguiente función de reproducción de canción, que cargará y reproducirá la siguiente canción en la lista de reproducción. Vamos a revisar los resultados. Voy a rebobinar la canción aquí. Esperemos al final. Como puedes ver cuando terminó la canción, luego cambió a la siguiente canción. Bien, así que todo funciona bien. Y en realidad podemos decir que con el proyecto estamos hechos. Espero que disfrutes el proyecto y aprendas algunas cosas nuevas. Ahora es el momento de pasar a crear nuestro próximo proyecto. Pasemos a la siguiente conferencia. 6. Proyecto 1 - Tarjeta de producto de CSS: Bien, así que es hora de comenzar a construir el proyecto, que va a ser una tarjeta de producto bien diseñada y genial. El proyecto se creará en base a HTML y CSS. Será sencillo, pero aprenderás a diseñar la ficha del producto de una manera moderna y genial. La tarjeta se coloca en el centro de la página, cual tiene un bonito fondo. En el lado izquierdo de la tarjeta, tenemos una imagen de los auriculares. En cuanto al lado derecho, incluye un par de elementos diferentes como encabezamientos, párrafos, el precio del producto, y el botón para comprarlo Bien, sentémonos sobre el proyecto. Sigamos adelante y empecemos a crearlo. He creado una nueva carpeta en la que tenemos carpeta de imágenes. Sigamos adelante y abramos la carpeta en código VS. Entonces voy a crear nuestros archivos de trabajo para HTML que va a ser índice HTML y para CSS estilo Ss. Entonces voy a abrir el archivo índice HM y crear la estructura básica HD. Cambiemos el título. Va a ser tarjeta de producto, entonces voy a vincular el archivo CSS. Bien, sigamos adelante y abramos el proyecto y el navegador. Entonces voy a colocar el navegador y el editor uno al lado del otro, así, para que nuestro proceso de trabajo sea sencillo y más conveniente. Bien, después de eso, voy a ir al sitio web de Google Phones, porque vamos a usar uno de los teléfonos de Google a lo largo del proyecto. Visitemos el sitio web y luego busquemos Google Phone llamado, ¿puede? Voy a seleccionar un par de estilos diferentes, desde pesos telefónicos ligeros hasta audaces. Después voy a copiar el enlace y pegarlo en el elemento head. Bien, estamos listos para comenzar a escribir la marca Html. Voy a abrir la etiqueta div, que va a ser el contenedor dentro de ese elemento. Voy a abrir otro dip que será de fondo. Aquí necesitamos dos elementos. A continuación voy a abrir la tarjeta en la que tendremos envoltorio de fondo. Y luego dentro del envoltorio necesitamos otro dip que será fondo de tarjeta. Después de eso, voy a abrir él rumbo. Elementos con el encabezado de la tarjeta de clase. Juguemos aquí. Latidos. Entonces necesitamos desarrollo, que va a ser auto. Ahora voy a abrir etiqueta de imagen. Sigamos adelante y seleccionemos Imagen en la carpeta de imágenes. Va a ser un auricular. Todo bien. Después de eso, estoy etiqueta que va a ser la sombra. Primera sombra. Necesitamos tres sombras. Cambiemos los nombres de las clases. A continuación voy a insertar aquí otra etiqueta profunda. Va a ser el contenido de la tarjeta. Tendremos aquí H tres elemento de rumbo con la clase pequeña partida. Eso son los bits de inserción. A continuación necesitamos H una etiqueta de rumbo con el encabezado principal de la clase. Necesitamos auriculares. Entonces voy a abrir H cinco etiqueta de rumbo con el subtítulo de clase Voy a insertar aquí Descripción general del producto. A continuación necesitamos el párrafo con algún texto ficticio. Va a ser la visión general del producto. A continuación viene la parte del precio. Vamos a abrir H una etiqueta de rumbo con el fondo de precio que necesitamos aquí, $99 Entonces voy a abrir H tres elemento de encabezado con el nombre de la clase precio media Insertemos aquí el mismo valor. Por último, necesitamos el botón con la clase llamada BTN. El tipo va a ser de fondo. Entonces voy a intere compra. Bien, en realidad con el marcado HTML, ya terminamos. Ahora podemos pasar a ser para escribir el CSS. Voy a seleccionar cada elemento usando un asterisco. Y luego establecer el margen y el relleno de ambos a cero. A continuación, voy a establecer el tamaño de la caja a la caja de borde. También necesitamos familia divertida para ser sinceros, sans. Entonces voy a seleccionar el elemento Html y establecer el tamaño de fuente 62.5% Porque vamos a usar M como unidad de medida Necesitamos que un m sea igual a diez píxeles, así que por eso establecemos el tamaño de fuente. A continuación necesitamos contenedor, el ancho va a ser 100% Entonces necesitamos altura va a ser 100 mirador de altura. Entonces voy a cambiar el color de fondo. Vamos a usar aquí 57567. Entonces voy a seleccionar fondo, establecer su ancho como 180 Ram. Entonces la altura va a ser la misma. A continuación voy a establecer el radio del borde al 50% va a ser el círculo. También cambia el color de fondo. Voy a usar 334. A continuación voy a cambiar la posición. Hagámoslo absoluto. Y también necesitamos posición relativa para el elemento padre. Aquí tenemos el fondo, el círculo. Vamos a arreglar, sigamos adelante y seleccionemos la vuelta uno atrás y fijemos la posición izquierda en -45% En cuanto a la posición dos va a ser -10% Entonces voy a seleccionar fondo dos, establecer posición derecha en -15% En cuanto a la posición dos va a ser 35% Bien, ahora el fondo está ahora el fondo Ocultemos partes fuera del contenedor. Ahora los fondos finalmente están listos. A continuación voy a seleccionar auto. Definamos la anchura y la altura. El ancho va a ser de 120 Ram. En cuanto a la altura, la voy a poner en 70 Ram. También cambia el color de fondo. Voy a usar 5566, necesitamos mostrar la tarjeta Vamos a establecer la posición a absoluta, entonces la posición superior va a ser 50% la posición izquierda va a ser 50% Y luego para centrar el elemento, necesitamos transformar, traducir con valores -50% y otra vez -50% Aquí tenemos el auto Vamos a establecer el radio del borde en un Carnero para hacer las esquinas redondeadas. A continuación necesitamos sombra de caja con los valores 01 Ram, seis Ram, y el color RGBA en el color negro, con una menor opacidad, 0.4 Tenemos aquí bonito efecto de sombra Bien, después de eso, voy a encargarme del fondo de la tarjeta al principio, necesitamos envoltorio, Vamos a establecer el ancho al 100% La altura va a ser 100% Entonces voy a seleccionar el fondo de la tarjeta en sí. Vamos a establecer el ancho a 100% Entonces la altura va a ser 200% En cuanto al color de fondo, voy a usar llamador 52555 Bien, a continuación necesitamos posición para ser absolutos. Entonces necesitamos posición relativa para el elemento padre. Vamos a establecer la posición izquierda. Va a ser -55% En cuanto a la posición superior, voy a establecer en -50% Entonces necesitamos transformar rotar la función Z. Giremos el elemento -40 grados. Además, voy a soportar el radio a cero, 50% luego otra vez 50% y cero. Bien, aquí tenemos los antecedentes. Necesitamos usar desbordamiento oculto para ocultar la parte del fondo. Bien, entonces el fondo está listo. A continuación voy a encargarme del encabezado de la tarjeta. Fijemos la posición a absoluta. Entonces la posición superior va a ser 2% En cuanto a la posición izquierda, voy a ponerla en 50% Y nuevamente, necesitamos transformar, Y nuevamente, necesitamos transformar, traducir x para centrar el elemento. Entonces voy a establecer el tamaño del teléfono a 25 frame. Aquí tenemos el rubro. A continuación voy a crear espacio entre las letras. Vamos a 3025 Fram. Además, necesitamos transformar el texto en mayúsculas y luego cambiar el color. Va a ser 777970. Aquí tenemos el rubro, que se ve mucho mejor. A continuación voy a disminuir la opacidad. Vamos a 32.3 Bien, el rumbo se ve bastante bien A continuación voy a cuidar la imagen de los auriculares. Fijemos su posición a Absoluto. Entonces la posición dos va a ser -5% En cuanto a la posición izquierda, voy a ponerla -2% Como pueden ver, la imagen está A continuación, voy a encargarme de los efectos de sombra. Seleccionemos la primera sombra. Voy a poner su ancho a 20 Ram. Entonces la altura va a ser del 60% A continuación, voy a fijar la posición a absoluta. La posición superior va a ser 15% En cuanto a la posición izquierda, voy a establecer en 30% A continuación necesitamos fondo para ser gradiente lineal. Voy a poner la dirección a la derecha. Y luego pongamos el primer color como transparente. El siguiente va a ser RGBA color negro con opacidad 0.7 En cuanto al tercer color, también va a ser transparente Aquí tenemos los elementos. A continuación voy a usar radio fronterizo. Va a ser cero. 50% 50% y cero. Entonces voy a usar filtro con la función de desenfoque. El valor va a ser tres Ram. Además, voy a disminuir la opacidad. Vamos a establecerlo 2.5 aquí tenemos bonito efecto de sombra. Agreguemos aquí transformar rotar y con el valor 45 grados. Bien, entonces ahora tenemos un resultado golpeteo. Sigamos adelante y copiemos este código. Para la segunda sombra, necesitamos que el ancho sea 25 Ram. Entonces voy a establecer la altura a 25 Ram también. Cambiemos la posición que necesitamos aquí. Abajo para ser -2% En cuanto a la posición izquierda va a ser 28% Entonces necesitamos aquí radio de borde para ser 50% Además, deshazte de la función de rotar Aquí tenemos la segunda sombra, ahora tenemos que llevarte de la tercera Vamos a establecer con 255 Ram, y la altura va a ser 15 Ram. A continuación necesitamos color de fondo. Vamos a agarrar esta función de aquí, voy a cambiar la opacidad A continuación, necesitamos transformar con la función rotate x. Necesitamos rotar el elemento según la dirección x, y el valor va a ser de 70 grados. Y también necesitamos rotar la función con el valor -30 grados. Entonces voy a mover el elemento con el valor cinco fram Entonces necesitamos filtro con la función Blar. El valor va a ser cinco fram. Bien, entonces vamos a sentarnos sobre las sombras a continuación. Voy a encargarme del contenido de la tarjeta. Sigamos adelante y fijemos la posición en absoluto. Entonces la posición superior va a ser cero, la posición derecha también será cero. Entonces necesitamos establecer el ancho al 50% y la altura va a ser 100% Vamos a usar padding y configurarlo en cinco Ram. Bien, después de eso, voy a encargarme de la pequeña cabecera, establecer margen superior a seis Ram. A continuación necesitamos que el tamaño del teléfono sea cinco. También cambiar la transformación del texto. Hagámoslo en mayúscula. A continuación necesitamos fondo con una función de gradiente lineal. La dirección va a ser a la derecha. Usemos el primer color, 9954. Entonces el siguiente va a ser 4622 con el valor del 13%. A continuación necesitamos Webket clip de fondo con textos de valor. Necesitamos color de texto web con valor transparente. Como puedes ver, tenemos aquí texto con un efecto de degradado lineal. A continuación, usemos algún efecto de sombra con valores 0.5 Ram, uno Ram, Y el color va a ser RGBA, color negro con opacidad 0.2 Bien, eso es todo , sobre el primer encabezado A continuación voy a tomar aquí del encabezamiento principal, definir el tamaño de la fuente. Va a ser siete Ram. Entonces necesitamos que el texto sea mayúscula. También cambia el color, usemos el color blanco. A continuación, voy a usar algún efecto horario con los valores de la propiedad anterior del shuttle tecnológico. A continuación voy a establecer margen a 005 Ram y tres Ram. Aquí tenemos el segundo rubro. Siguiente Voy a encargarme de la subpartida, es decir, la visión general del producto Tomemos este código de aquí y hagamos algunos cambios. El tamaño del teléfono va a ser 1.6 Ram. Entonces necesitamos que el peso del teléfono sea de 300. Vamos a deshacernos de las marchas. El rumbo se ve bien. A continuación voy a encargarme del párrafo. Sigamos adelante y fijemos el tamaño del teléfono en 1.4 Ram. Entonces el color va a ser A. También cambia la altura de la línea, pongámosla a 1.2 A continuación necesitamos ser 300. Establecer el peso para dos, entonces necesitamos ser uno Ram, 05 Ram, y luego tres Ram. El párrafo se ve bien, sigamos adelante. Y fondo de precios, establecer la posición en absoluto. Entonces la posición inferior va a ser de cinco Fram. Entonces necesitamos que el tamaño de fuente sea 12 Ram. A continuación, voy a cambiar el color. Vamos a usar el color 77797 y disminuir la opacidad. Vamos a establecerlo 2.5 Aquí tenemos el fondo para el precio. A continuación voy a seleccionar el precio en sí. Vamos a establecer la posición en absoluto. Entonces la posición de Bosón va a ser ocho m. A continuación necesitamos la posición izquierda, que va a ser 17 Ram Cambia el tamaño del teléfono, pongámoslo en cuatro Ram. Cambia el color, hazlo blanco. También necesitamos algún efecto de sombra. Vamos a ponerla en 01 Ram, dos m, Y el RGBA con la opacidad 0.2 Siguiente Yo me ocupo de las macetas Fijemos la posición a absoluta. Entonces la posición inferior va a ser de 11 Carneros. Para la posición correcta, voy a ponerla en diez Ram. A continuación la anchura, que va a ser 20 Ram. Además, pongamos la altura a cinco Ram. Aquí tenemos el fondo colocado muy bien. A continuación voy a cuidar el radio fronterizo. Vamos a configurarlo 2.7 Ram. También cambia la frontera, hazla ninguna. A continuación voy a establecer el fondo en gradiente lineal. Voy a agarrar este valor desde aquí. Tenemos aquí, bonito efecto. Deshagámonos de este valor desde aquí. A continuación, voy a establecer el tamaño del teléfono en 1.6 Rams. Hacer que el texto en mayúsculas cambie el color, va a ser blanco Necesitamos algo de espacio entre el botón de letras, se ve bastante bien. A continuación necesitamos algún efecto de sombra. Establece la sombra de caja en 01 Ram, tres Ram. Y el RGBA color negro. También cambia el cursor, hazlo puntero. Bien. Lo último que voy a hacer es hacer clic en el botón. Necesitamos hacer clase activa. A continuación, necesitamos transformar, traducir Y. Vamos a ponerle dos -0.2 Ram Una vez que hagamos clic en el botón, se moverá muy bien. Bien, sentémonos sobre este proyecto. Espero que lo hayan disfrutado. Pasemos la respuesta a construir la siguiente. 7. Proyecto 2 - Menú de navegación de CSS con Hover: Bien, así que es hora de seguir adelante y crear nuestro próximo proyecto. En esta sección, vamos a construir un menú de navegación CSS con un bonito y genial efecto hover Como puedes ver, tenemos aquí un par de elementos de navegación diferentes. Una vez que coloquemos el cursor sobre los artículos, obtendremos este efecto agradable y genial Cada elemento de navegación tiene un color de fondo diferente y, además, el elemento aparece muy bien en el fondo. Bien, eso es todo sobre el proyecto. Ahora es el momento de construirlo. Tengo una nueva carpeta en el escritorio. Sigamos adelante y ábralo en código VS. Sigamos adelante y creamos nuestros archivos de trabajo para HTML y CSS. Tendremos sólo dos expedientes. Vamos a abrir el archivo HTML indexado y luego crear el documento HTML básico Sigamos adelante y cambiemos el título. Va a ser menú CSS. Después voy a vincular el archivo CSS y especificar aquí el nombre del archivo. Bien, sigamos adelante y abramos el proyecto y el navegador. Y luego colocar el navegador y el editor uno al lado del otro. Entonces, a lo largo del proyecto, voy a usar Google Phones. Para ello, tenemos que visitar el sitio web de Google Phones. Busquemos el teléfono de Google llamado Writs. Voy a seleccionar el estilo. Entonces voy a seleccionar otro teléfono llamado Josephine Slap Vamos a diferentes estilos entonces. Copia el enlace desde aquí y pegarlo en el elemento head. Bien, Bien, entonces estamos listos para comenzar a construir el proyecto. Voy a crear el HTM y marcar necesitamos un contenedor en el que voy a etiquetar div con la clase de navegación. Consistirá en un par de enlaces diferentes. El primero va a ser, vamos a insertar aquí atributo llamado data text. Voy a colocar tu casa. Duplicemos el enlace y cambiemos el contenido y también los atributos de texto de datos que necesitamos sobre. Entonces el siguiente va a ser proyectos. Entonces tendremos galería. El siguiente va a estar en bloque. El último ítem será conflicto. Bien, así que sentémonos sobre el HTML. A continuación tenemos que empezar a escribir el CSS. En primer lugar, voy a seleccionar cada elemento usando un asterisco y establecer margen, y ponerlos a cero a ambos Entonces voy a establecer el tamaño de la caja a la caja de borde. También necesitamos decoración de texto para que no sea ninguna. Entonces voy a establecer el tamaño del teléfono del elemento humano H en 62.5% porque vamos a usar Ram como unidad de medida uno Ram unidad de medida uno Ram debería ser igual a diez picos, los elementos se hicieron los elementos Sigamos adelante y seleccionemos el contenedor. Voy a establecer el ancho al 100% entonces la altura va a ser 100 de altura de la ventana gráfica A continuación, voy a usar el libro Flex para centrar el contenido usando el Centro de Contenido Justificado y el Centro de Alinear Elementos. Como puedes ver, los enlaces se colocan en el centro de la página. A continuación voy a seleccionar la navegación. Vamos a establecer la altura a 60 Ram. Entonces voy a usar flex box. Tenemos que cambiar la dirección, Vamos a ponerla en columna. Además, voy a alinear elementos en el centro. En cuanto a la propiedad de contenido justificada, voy a establecerla en el espacio de manera uniforme. Aquí tenemos los elementos de navegación colocados muy bien. A continuación, voy a seleccionar los elementos de enlace. Vamos a configurar la familia telefónica. Van a ser derechos. Cursiva, se cambia el teléfono. Entonces voy a aumentar el tamaño del teléfono. Va a ser seis Ram, A. Cambia el color. Voy a usar 5255 Entonces necesitamos espacio entre las letras. Vamos a establecerlo 2.2 también cambiar el ancho, Hagámoslo al 100% Y la altura va a ser 100% también. Entonces necesitamos técnica de línea de texto para ser centro. Tenemos aquí los elementos de navegación. Se ven bastante bien. Siguiente Voy a seleccionar navegación con efecto hover. Me refiero a seudoclase hover, seguida del elemento link Cambiemos el color. Va a ser 888. A continuación voy a seleccionar navegación, seguido del enlace. Y luego el hover. Voy a cambiar el color. Vamos a ponerla en blanco. Vamos a establecer la sombra de caja para el elemento link en 0.5 Ram, un Ram. Y el RGBA color negro con opacidad 0.1 A continuación necesitamos transición para un efecto suave En realidad necesitamos aquí sombra tecnológica y no la sombra de caja en hover El color del enlace está cambiando. Siguiente Voy a seleccionar Enlace de Navegación. Y luego antes del elemento, vamos a establecer el contenido en atributo. Y luego necesitamos texto de datos, que usamos en el archivo HTML. A continuación, voy a establecer posición en absoluto. Y necesitamos posición relativa para la navegación. Después de eso, voy a establecer la primera posición al 50% Entonces la posición va a ser del 50% también. Voy a censurar el elemento usando transform translate -50% y otra vez -50% Entonces voy a poner el ancho a 180 m y la altura va a ser 180 m también Necesitamos que el color de fondo sea rojo, ese es un color temporal. Y también opacidad decrety. Bien, hagamos que el elemento sea redondeado usando radio de borde 50% Entonces necesitamos que propiedad de índice z sea menos uno para que los enlaces sean visibles. Bien, ese es un resultado temporal. Necesitamos Display Flex. Entonces Justifica. El contenido será el centro. Y también necesitamos un centro de líneas de artículos también. A continuación, voy a aumentar el tamaño del teléfono. Va a ser 30 Ram. La familia telefónica será el segundo teléfono, Joseph, en bofetada serif Entonces se va a sacar el peso del teléfono. Además, voy a cambiar el color. Usemos 777. Como pueden ver, tenemos aquí los artículos, me refiero a los elementos más grandes en el fondo de la navegación que necesitamos para mostrarlos una vez que pasemos el cursor sobre los artículos A continuación voy a seleccionar la navegación. A con un con hover, seguido del pseudo elemento antes En realidad, por defecto, voy a hacer que el contenido esté vacío. Entonces el contenido con texto de fecha de atributo debe estar en el cursor Vamos a deshacernos de dentro de la altura y colocarlos aquí ya que necesitamos que la posición izquierda sea 50% Deshazte del color de fondo y además hagamos que la opacidad sea cero Aquí necesitamos opacidad 0.7 Y también voy a establecer espaciado entre letras a 50 Ram por defecto En cuanto al efecto hover, el espaciado entre letras va a ser uno Ram Finalmente, necesitamos transición para un efecto más suave. Una vez que coloquemos el cursor sobre los artículos, obtendremos los artículos adecuados en el fondo A continuación, voy a hacer que el desbordamiento oculte para poder deshacerme de esas barras de desplazamiento al flotar Además, también necesitamos desbordamiento oculto para el contenedor. Sepa que todo funciona bien. Lo único que tenemos que hacer es cambiar los colores de fondo. Una vez que pasamos el cursor sobre los elementos, necesitamos navegación seguida del enlace con selector de gráficos Y entonces necesitamos ante el elemento. El color de fondo para el primer ítem va a ser Bf94 144 Tenemos aquí el color de fondo para el primer artículo. Necesitamos lo mismo para todos los artículos. En realidad, cambiemos la posición izquierda y la hagamos 40% Ahora tenemos mejor resultado. Duplicemos este código y cambiemos los colores de fondo para el resto de los artículos. El segundo va a ser el F3722. Entonces tendremos 8961, luego tendremos 974 Entonces el siguiente va a ser nueve oh seis. Para el último ítem necesitamos 43 A, A. En realidad también necesitamos cambiar los selectores hijos Teníamos aquí uno por todas partes. Necesitamos números del uno al seis. Bien, así que ahora tenemos aquí un bonito y genial efecto. En realidad, casi todo funciona bien. Solo necesitamos hacer un pequeño cambio en la propiedad de transición. Vamos a desplazarnos hacia arriba y la transición en vez de todo voy a asegurar separadamente el espaciado entre letras y luego la posición izquierda Ahora tenemos mucho mejor resultado. Bien, eso es todo, el proyecto está terminado. Espero que lo hayan disfrutado. Sigamos adelante. 8. Proyecto 3 - Caja modal de éxito / fracaso: Bien, es momento de comenzar a crear nuestro próximo proyecto. En esta sección, vamos a construir una caja de módulo de éxito fallar. Me refiero al mensaje pop up que nos muestra el éxito o el fracaso. Te encontrarás con este mensaje en casi todos los sitios web. Muy frecuentemente tenemos aquí dos botones diferentes. Uno de ellos es verde y el otro rojo. Si hago clic en el botón verde, entonces obtendremos este bonito mensaje pop de éxito. Entonces si hago clic en el botón Seguir adelante, se cerrará como para el botón rojo. Si hago clic en él, entonces vamos a recibir un mensaje fallido, que se cerrará una vez que haga clic en el botón Intentar de nuevo. Bien, eso es todo sobre este proyecto. Va a ser sencillo, pero creo que va a ser muy útil y lo vas a disfrutar. Empecemos. He creado una nueva carpeta en el escritorio. Sigamos adelante y ábralo en código VS. Luego cree nuestros archivos de trabajo para HTML, CSS y script Gale. El primero va a ser HTML indexado. Entonces tendremos estilos y también necesitamos guiones. Después voy a abrir el archivo HMO índice y crear el documento HTML básico Sigamos adelante y cambiemos el título. Va a ser caja modelo, y luego necesitamos vincular los archivos CSS y Jovscopt Bien, Siguiente voy a ejecutar el proyecto al navegador. Y también voy a colocar el editor y el navegador uno al lado del otro. Bien, Siguiente voy a agarrar el enlace del teléfono CDN, porque vamos a usar algún teléfono así iconos a lo largo del proyecto Sigamos adelante y copiemos el enlace desde aquí. Entonces voy a abrir la etiqueta de enlace y pegar el enlace CDN aquí Bien, a continuación voy a visitar el sitio web de Google Phones, porque vamos a usar uno de los teléfonos de Google. Sigamos adelante y busquemos Google Phone, que se llama Weeks Made for Display. Voy a seleccionar esos diferentes estilos, luego copiar el enlace desde aquí y pegarlo en la cabeza Elon Bien, estamos listos para comenzar a escribir el marcado de correo HT Voy a crear desarrollo que va a ser el contenedor dentro del desarrollo. Voy a abrir otra profundidad, va a estar contenta en la que vamos a tener éxito. Entonces voy a insertar a Patson con las clases PTN, luego Success BTN El texto va a ser Enviar. A continuación necesitamos una caja modelo. Voy a crear desarrollo con la clase Éxito, modelo y modelo. Eso es Insertar aquí otra P que va a ser icono de modelo. Y también necesitamos otra clase Éxito en eso es insertar aquí un ícono de teléfono que va a ser FA solid FA check Después del icono necesitamos model top en el que tenemos H un elemento de encabezado, el texto éxito. El modelo top va a ser seguido por el modelo patson. Tendremos aquí otra clase también, Ollas, éxito. Insertemos unas macetas con un modelo de clase BTN. Voy a establecer el atributo type a pots. Vamos a insertar el texto. Adelante. Bien, ahora necesitamos lo mismo para el fracaso. Duplicemos este código y hagamos algunos cambios. Tenemos que cambiar el éxito en fracaso. En realidad, hagámoslo para cada éxito. A continuación tenemos que fallar. También cambia el texto del botón. Va a ser T otra vez. También necesitamos cambiar el icono. Bien, creo que eso busca sobre el Html mark up. Sigamos adelante y comencemos a escribir el CSS. Voy a seleccionar cada elemento, y luego establecer el margen, y el relleno de ambos a cero. A continuación, voy a establecer el tamaño de la caja a la caja de borde. Voy a cambiar la familia telefónica. Va a ser el teléfono que seleccionamos las semanas hechas para su visualización. Va a ser sansoriflws. Puede ver que los estilos por defecto se aplican a los elementos. A continuación, voy a seleccionar modelos y ocultarlos usando display none. Bien, vamos a encargarnos del contenedor. Voy a establecer su ancho al 100% y la altura va a ser de 100 ver la altura del bote. También cambia el color de fondo. Vamos a usar aquí color 264653. Es de color verde. Entonces necesitamos libro de lino. Y para centrar los artículos que necesitamos, sensor de contenido Justificar y un centro de línea de pedido. Bien, después de eso voy a seleccionar PTN. Pongamos el margen a tres Ram, entonces. El ancho va a ser de 15 Ram. Voy a establecer la altura en cuatro Ram. Los patrones se hicieron más grandes. Vamos a establecer el radio del borde en tres Ram. Entonces deshazte del Porter predeterminado, hazlo ninguno, necesitamos algún efecto de sombra. Vamos a poner caja sombra 201 Ram, tres Ram. Y usa aquí R para ser un color negro con menor opacidad. Bien, a continuación voy a establecer el tamaño de fuente en un Rame El peso de la fuente a Polde transforma para ser mayúsculas. Vamos a espaciar 2.1 Ram. Después cambia el color. Va a ser blanco. Y también establecer el cursor a puntero. Ahora necesitamos cambiar los fondos para el botón por separado. El primero va a ser el color 298. En cuanto al segundo botón, voy a usar un color rojo, que va a ser Fd575 Bien, los botones están listos. A continuación voy a crear, haga clic en el hecho usando transform translate y. vamos a configurarlo 2.2 Ram. Una vez que haga clic en el botón entonces se moverá. Lo hicimos usando pseudo clase activa. A continuación, voy a ocultar los botones y encargarme de los modelos. Vamos a poner con a 25 Ram, entonces la altura va a ser 30 Ram. A continuación voy a cambiar el color de fondo. Vamos a ponerla a E. Voy a poner posición a absoluta. Entonces necesitamos posición relativa para el elemento padre, que va a ser contenedor. Pongamos ambos modelos en el centro. Necesitamos que las propiedades superior e izquierda sean 50% y además necesitamos transformar traducir con los valores -50% y -50% Ambos modelos se colocan en el centro de la página A continuación voy a usar flex box. Cambiemos la dirección que va a ser columna. Necesitamos alinear los elementos verticalmente. Así que vamos a establecer una línea de artículos al centro. Además, voy a hacer que el elemento sea redondeado usando radio de borde. Necesitamos entonces box shadow con los valores 01 Ram, tres Ram. Y el RGBA color negro con menor opacidad. Bien, después de eso, voy a seleccionar el icono del modelo. Pongamos el ancho a seis Ram, entonces la altura va a ser seis Ram también. Necesitamos posición para ser absolutos. Entonces me voy a poner en posición dos menos tres Ram. Como voy a usar port el radio, hagamos que el elemento sea redondeado. A continuación, voy a seleccionar el icono en sí. Aumentemos el tamaño del teléfono. Voy a ponerla en 2.5 Ram. El color va a ser blanco. Aquí tenemos los iconos seleccionar Fail icon, establecer su color de fondo en rojo. Además, voy a usar shadow con los valores 0.5 Ram, dos Ram, y el color va a ser 240-96-5608, y el Opacidad 0.3 Entonces necesitamos flex box para centrar el icono Vamos a justificar el centro de contenido Y un centro de líneas de artículos. Bien, el icono está listo y se ve bastante bien. Siguiente. A continuación voy a encargarme del modelo top. Digamos que es ancho al 100% la altura va a ser 20 Ram. Entonces voy a usar Display Flex con justify content center y un centro de líneas de artículos. Sigamos adelante y seleccionemos Modal Top H, un elemento de encabezado. Voy a aumentar el tamaño del teléfono, va a ser 2.5 Ram. Después cambia el color. Voy a hacerlo 264653. Entonces te voy a sacar del lado inferior. Vamos a establecer el ancho a 100% La altura va a ser diez Ram como necesitamos. Nuevamente, flex box con Justify Content Center y Align Items center. A continuación voy a seleccionar modelo, Bottom, fallar y cambiar el color de fondo. Se ve un color rojo. En realidad necesitamos radio fronterizo hacia abajo. Vamos a establecer el radio del borde a 00. Entonces un Ram, y otra vez uno Ram. ¿Bien? El problema está arreglado. A continuación voy a seleccionar el Batson. Vamos a establecer con a diez Ram, entonces la altura va a ser tres Ram, radio del borde será dos Ram. A continuación, voy a deshacerme del borde predeterminado, hacerlo ninguno, cambiar el color de fondo. Usa aquí, color blanco. A continuación, necesitamos transformar el texto en mayúsculas. Además, el peso de la fuente va a ser negrita. Entonces voy a usar algún efecto de sombra con valores 012 y el color RGB Pondremos el cursor a puntero. Bien, después de eso, voy a cambiar el color del fondo. Vamos a ponerla en rojo. A continuación necesitamos crear un efecto click. Transformemos traducir y 0.2 m. bien, así que ahora tenemos aquí efecto click. Bien, después de eso voy a seleccionar Fail Model y esconderlo por un tiempo. Para personalizar el modelo Success, seleccionemos Icono de éxito, establecemos su color de fondo en verde. Entonces necesitamos caja sombra 0.5 m, dos Ram. Y el RGBA 421-57-1403 y el Opacidad 0.3 Bien, Siguiente voy a seleccionar Modelo Bottom Success, y cambiar el color de fondo y el Opacidad 0.3 Bien, Siguiente voy a seleccionar Modelo Bottom Success, y cambiar el color de fondo. Va a ser verde. En realidad, ambos modelos se ven bien. A continuación voy a cambiar el color del Boom, va a ser verde. Todo bien. Eso es, Todo está listo. Ahora me voy a deshacer de esta exhibición. Ninguno de aquí. Voy a ocultar modelos usando escala. Y también necesitamos propiedades de opacidad y visibilidad. A continuación, tenemos que recuperar los botones. Ahora es el momento de usar. Vamos a crear los botones variables y seleccionar botones usando curry select all método. Necesitamos su nombre de clase, BTN. A continuación necesitamos la segunda variable. Van a ser modelos. Necesitamos aquí modelo, también modelo BTN. Vamos a insertar aquí el modelo PTN. Ya podemos ver todos los elementos. Miremos a través de los botones. Usando el método de forraje, necesitamos agregar evento escuchando el botón Hacemos clic en evento, voy a insertar aquí una función de devolución Una vez que hacemos clic en el botón, necesitamos mirar a través los modelos utilizando nuevamente el método de forraje En realidad necesitamos aquí modelar el parámetro que necesitamos aquí sentencia if en la que tenemos que definir if model class list y el primer ítem en la lista de clases. Luego tenemos que dividirlo y seleccionar el primer elemento si es igual a clase de la lista de clases BTN Me refiero al segundo ítem otra vez, tenemos que dividirlo para guiarlo y luego seleccionar el primer ítem. Si esta condición es cierta, entonces necesitamos mostrar la caja del modelo. Necesitamos aquí agregar método, y en su lugar aquí clase abierta, que se utilizará en el archivo CSS. Tenemos que seleccionar open, seguido del modelo, y tenemos que hacerlo visible. Seleccionemos este código. También, aquí necesitamos opacidad y visibilidad. Necesitamos escala para ser uno y opacidad uno, y visibilidad visible. Además, voy a hacer la transición todos los 0.5 segundos. Como puedes ver, los botones funcionan bien y los modelos aparecen una vez que hacemos clic en ellos. A continuación tenemos que ocultarlos. Una vez que hacemos clic en los botones de los modelos, necesitamos mirar a través del modelo BTN's. Siguiente Voy a agregar el oyente de eventos para modelar BTN. Con el evento click, tenemos que eliminar la clase abierta del modelo. Ahora si hago clic en el botón, las cajas modelo van bien, todo funciona bien. Y con este proyecto ya terminamos. Sigamos adelante. 9. Proyecto 4 - Formulario de inicio de sesión / registro con ilustraciones: Bien, entonces es momento de seguir adelante y comenzar a construir nuestro próximo proyecto, que va a ser un formulario de registro de inicio de sesión con defectos animados e ilustraciones. Cuando construyes el sitio web, casi todas las páginas necesitan este tipo de plantilla. Creo que este proyecto te va a ser muy útil. Sigamos adelante y describamos el proyecto. Tenemos aquí una plantilla de formulario de inicio de sesión. En el lado izquierdo, se pueden ver las ilustraciones. En cuanto al lado derecho, tenemos aquí campos impo con un patrón Abajo puedes encontrar un enlace para registrarte. Si hago clic en él, entonces el formulario de inicio de sesión cambiará al signo de forma, muy bien con algunos defectos animados. Entonces podemos cambiar a las diferentes formas así. Bien, sentémonos sobre este proyecto, Empecemos. He creado una nueva carpeta en el escritorio en que tengo carpeta con imágenes de ilustración. Sigamos adelante y abramos la carpeta en código VS y luego creamos nuestros archivos de trabajo para HTML. Entonces necesitamos archivos CSS, necesitamos aquí archivo para Javascript. Luego abre el archivo HTML índice y crea un documento HTML básico. Voy a cambiar el título. Va a ser registrarse, firmar en formularios. Entonces voy a vincular los archivos. El primero va a ser el archivo CSS. También necesitamos aquí archivo Javascript. Vamos a especificar el nombre del archivo en el atributo source. Sigamos adelante y ejecutemos el proyecto al navegador usando servidor en vivo. Entonces voy a 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, voy a visitar el sitio web de las fuentes CDN, JS para poder agarrar el enlace, porque vamos a usar algunos íconos de fuentes lom Vamos a abrir la etiqueta de enlace y pegar la CDN aquí. Además de eso, voy a usar los teléfonos de Google. Visitemos el sitio web de Google Phones. Voy a buscar el teléfono llamado signa negativo. No sé si pronuncio correctamente, seleccionemos diferentes estilos, después peguemos el enlace en el elemento head. Bien, voy a empezar a crear la marca H mal. Necesitamos aquí un contenedor en el que voy a insertar de tag, que va a ser form wrapper. Después formamos envoltorio a la izquierda y también a la derecha. Vamos a insertar aquí H uno de los elementos de encabezado con el texto registrarse. Formulario con el formulario de clase inscríbase. Vamos a deshacernos del atributo action. Estoy inserte aquí grupo de entrada en el que tendremos etiqueta de entrada con el tipo text. Y necesitamos placeholder atributo en el que voy a insertar nombre de usuario A continuación, voy a insertar tu fonosomicón, que va a ser FA, FA sólido Entonces voy a duplicar el grupo de entrada dos veces. Y cambiemos el tipo aquí. Va a ser correo electrónico. Necesitamos aquí correo electrónico. Y también cambiar el icono. Va a ser sobre. Entonces necesitamos aquí teclear contraseña. El marcador de posición va a ser contraseña. Y también cambiar el icono. Va a ser de bloqueo. Bien, entonces aquí tenemos los campos de entrada y los iconos. Vamos a insertar aquí un fondo con el formulario de clase BTM que necesitamos aquí tipo, va a ser botón En cuanto al texto, voy a insertar aquí. Regístrate. Bien, después de eso necesitamos un enlace con el link de inicio de sesión de clase. Vamos a instituir el texto iniciar sesión. Bien, vamos a seguir adelante y copiar este código y pegarlo abajo en el envoltorio de formulario. Bien, voy a hacer aquí algunos cambios. Necesitamos iniciar sesión. En cuanto al elemento link, va a ser registrarse. Y también cambiar el nombre de la clase. Bien, creo que ya está. Todo está listo. Voy a empezar a escribir el CSS. Seleccionemos cada elemento usando un asterisco. En primer lugar, voy a poner margen y ponerlos a cero a ambos. A continuación tendremos el tamaño de la caja, que va a ser la caja fronteriza. Voy a poner esquema a ninguno. A continuación necesitamos que la decoración de texto no sea ninguna. Voy a cambiar la familia telefónica. Va a ser signica negativa o como puedes ver, los estilos por defecto se aplican a los elementos A continuación, voy a seleccionar el elemento Html y disminuir el tamaño de la falla porque vamos a usar M como unidad de medida. En este caso, un m será igual a diez píxeles. Bien, sigamos adelante y comencemos a personalizar el contenedor. Voy a establecer el ancho al 100% La altura va a ser de 100 puertos de altura. A continuación necesitamos color de fondo. Va a ser EC dos. A continuación, voy a seleccionar envoltorio de espuma. Fijemos su posición a absoluta. Entonces necesitamos posición relativa para el elemento padre que es un contenedor. Vamos a establecer la posición superior al 50% Entonces necesitamos que la posición izquierda sea 50% Y necesitamos centrar el elemento usando transform translate con los valores -50% y otra vez -50% Ahora el contenido se coloca en el centro de la página A continuación voy a establecer el ancho. Va a ser 100 Ram. En cuanto a la altura, voy a ponerla en 65 Ram. También cambia el color de fondo, va a ser blanco. Aquí tenemos el envoltorio de formularios, usemos libros flex. Voy a hacer los contras redondeados usando radio de borde. Digamos dos Ram. También crea algún efecto de sombra. Vamos intero 0.3 Ram, tres Ram, y entonces el color va a ser RGBA, 326-01-1207 con una Opacidad 0.3 Bien, ahora el envoltorio ahora el Sigamos adelante y seleccionemos el envoltorio de formulario a la izquierda. Y también necesitamos aquí wrapper, correcto, porque esos elementos van a tener algunos estilos similares. Vamos a establecer con dos 50% la altura va a ser 100% A continuación necesitamos libros flex. Tenemos que cambiar la dirección, va a ser columna voy a establecer justify content to center y elon items to center también Además, alineemos el texto en el centro. Bien, las formas se colocan en el centro de las envolturas. A continuación voy a seleccionar H elementos de encabezamiento. Aumentemos el tamaño del teléfono. Va a ser seis. Entonces necesitamos al Col 47f, es de color azul Vamos a establecer el margen a menos cinco Ram. Cero, luego seis Ram y cero. Los encabezamientos se ven bastante bien. Siguiente Voy a seleccionar Grupo de entrada. Juego de entrada con 225 Ram. Entonces la altura va a ser cinco Ram. Pongamos el margen a un Ram, cero. A continuación, voy a deshacerme de la frontera y luego definir frontera en la parte inferior. Va a ser 0.2 Ram sólido con un color RGBA, 641-23-2505 y la Opacidad 0.5 Bien, Después de eso voy a Cambiemos el tamaño de la fuente. Va a ser 1.4 Ram. Además, necesitamos acolchado en el lado derecho. Vamos a poner 22 Ram. Entonces voy a cambiar el color de fondo. Va a ser transparente, los campos de entrada se ven mejor. Siguiente voy a seleccionar entrada con atributo placeholder Cambiemos el color. Va a ser azul también crea algo de espacio entre las letras. Y cambiar el tamaño de fuente, 3,021.2 Ram. También necesitamos que el peso de la fuente sea 500. Por último, transformemos el texto. A mayúsculas. Bien, continuación voy a seleccionar entrada de grupo de entrada con un enfoque a la clase en foco, voy a cambiar el color del borde. Vamos a ponerla en azul. Una vez enfocamos los campos de entrada, entonces el borde en la parte inferior cambiará su color. Bien, después de eso, tomo del elemento de grupo de entrada. Estoy en el teléfono de los iconos, posición absoluta. Entonces necesitamos posición relativa. Para el elemento padre, que es grupo de entrada, definamos la posición superior. Va a ser del 50% entonces necesitamos la posición correcta. Voy a ponerle 2.5 Ram. Y también necesitamos transformar traducir Y con -50% para centrar el elemento A continuación voy a cambiar el tamaño del teléfono. Va a ser 1.3 Rams. Cambiemos el color, pongámoslo en azul. Aquí tenemos el teléfono automático colocado muy bien. A continuación, sigamos adelante y seleccione el botón, establezca el ancho en 20 Ram. Entonces la altura va a ser 4.5 Ram. Voy a establecer margen en la parte superior a dos Ram. A continuación, necesitamos frontera para ser ninguno. Voy a usar radio de borde para hacer redondear el botón, 3025 Cambiar el color de fondo. De color azul, los botones se ven bien. El siguiente color será blanco. Establezca la transformación de texto en mayúsculas. El tamaño de la fuente va a ser 1.4 Ram. Entonces necesitamos que el peso de la fuente sea negrita y también usar algo de espacio entre las letras. A continuación, voy a crear algún efecto de sombra. Digamos sombra de caja, 20.5 Ram, un Ram. Y el RTP un color, me refiero a este color azul con opacidad 0.4 los botones se ven bastante bien Voy a poner cursor a puntero. Todo bien. Después de eso voy a crear, da clic en el hecho usando transform translate Y. Vamos a configurarlo 2.2 Ram. Una vez que hagamos clic en el botón, tendremos aquí el efecto click. Bien, sigamos adelante y seleccionemos el elemento link. Voy a poner posición a absoluta, la posición inferior establecida, va a ser. En cuanto al tamaño del teléfono, voy a configurarlo en 1.6 Ram. Transformemos el texto en mayúsculas. Además, establece la forma del teléfono en negrita. A continuación, necesitamos el tamaño de fuente. Va a ser 1.6 Ram. Cambia el color, voy a usar el color azul. A continuación, sigamos adelante y seleccionemos el enlace de registro. Voy a establecer la posición derecha a cuatro m. En cuanto al seno en enlace, necesitamos la posición izquierda cuatro. Bien, en realidad ambos formularios que inicio sesión y formularios de registro están hechos. Se ven bastante bien. Siguiente voy a seleccionar el envoltorio de formulario a la izquierda, y ocultarlo usando opacidad cero y visibilidad hetum El formulario de inscripción es hedum. Ahora voy a colocar aquí para envoltorio de fondo. Seleccionemos este elemento. Definamos esta posición. Va a ser ancho minate absoluto para ser 100 m. la altura va a ser de 100 m también A continuación necesitamos color de fondo, va a ser azul. También, voy a usar radio de borde 15 m. Tenemos aquí el fondo azul. adelante y fijemos la posición izquierda en -40% En cuanto a la posición superior va a ser 90% A continuación tenemos que cambiar el origen de la transformación va a ser derecha abajo Para rotar el elemento según la dirección Z, el valor va a ser -40 grados. En realidad necesitamos posicionar para ser -90% Bien, ahora tenemos que ocultar la parte del fondo usando heatum de desbordamiento Tenemos aquí un bonito fondo. A continuación voy a insertar tu imagen que va a ser una ilustración. Seleccione la imagen uno. Vamos a adherir el nombre de la clase, va a ser imagen izquierda y deshacernos del atributo all. Sigamos adelante y seleccionemos imagen. Vamos a conformarnos con 235 fram, entonces la posición va a ser absoluta En este momento la imagen no es visible. Vamos a establecer el índice z en 100. Aquí tenemos la imagen. Voy a seleccionar imagen izquierda, posición superior va a ser 25% entonces necesitamos posición izquierda va a ser 8% Todo bien, así la imagen se coloca muy bien. Ahora tenemos que encargarnos del Javascript. Vamos a crear variable, va a ser contenedor. Voy a seleccionar este elemento es el método selector de consulta. Necesitamos especificar aquí el contenedor de nombre de clase. Vamos a duplicarlo dos veces. La segunda variable va a ser sine up link. Vamos a insertar el nombre de la clase. También necesitamos aquí seno en enlace, cambiar el nombre de la clase. Ahora necesitamos registrarse enlace con el oyente de eventos. Coloquemos aquí, haga clic en Evento y también en la función de devolución Necesitamos contenedor seguido de la propiedad class list y tenemos que agregar a la lista de clases navegar. Esto sucederá al hacer clic. Ahora tenemos que usar esta clase para agregar algunos estilos a los elementos. Me refiero al fondo del envoltorio de formulario. Transformemos rotar la función Z con el valor 130 grados. También, necesitamos traducir para poder mover el elemento. El valor va a ser 15 Ram y luego otra vez 15 Ram en ambas direcciones, I, x e y. una vez que haga clic, entonces el fondo se moverá. Tenemos que añadir aquí la transición para que el efecto sea más suave. Ahora si hacemos clic, obtendremos el movimiento agradable y genial del fondo. A continuación, tenemos que encargarnos del envoltorio de formulario que queda con otra vez navegar clase. este momento el elemento está oculto y tenemos que hacerlo visible. Vamos a usar de nuevo la transición con algún tiempo de retraso. Necesitamos de nuevo la transición por defecto sin tiempo de demora. Si hago clic, entonces el formulario de registro aparecerá muy bien. Ahora tenemos que tomar engranaje de la imagen. Vamos a usar de nuevo class navigate seguido de la imagen izquierda. Nombre de la clase. Pongamos la opacidad a cero y la visibilidad oculta. Necesitamos aquí transformar traducir y función. Tenemos que mover la imagen ligeramente y también usar transición con toda la duración 0.5 segundos. Necesitamos transición para el elemento image left por defecto con un tiempo de retardo. Una vez que haga clic, entonces la imagen se ocultará muy bien. Aparecerá el formulario. Bien, todo funciona bien. A continuación tenemos que encargarnos del enlace de firma. Para eliminar clase, navegue desde el contenedor. Ahora si hago clic en Registrarse y luego iniciar sesión en segundo plano volveremos a su posición predeterminada. Ahora tenemos que encargarnos de la forma rapero, ¿no? Necesitamos establecer la opacidad a cero, luego la visibilidad oculta para ocultar el signo en forma Eso es transición. A continuación, voy a agregar transición por defecto al elemento. Con un tiempo retrasado, va a ser de 1 segundo. Si hago clic en el enlace, entonces el formulario de inicio de sesión se ocultará muy bien, y luego aparecerá una vez que volvamos a hacer clic en el enlace. Bien, lo único que tengo que hacer es usar la segunda imagen para el formulario de inicio de sesión. Aquí tenemos la segunda imagen. Seleccionemos la imagen a la derecha, fijemos su posición superior a 17% entonces la posición correcta va a ser 7% Así que necesitamos transformar traducir Y con un valor menos cinco la imagen. Voy a poner la opacidad a cero y la visibilidad a oculta Tenemos que mostrar la imagen. Una vez que hacemos clic en el enlace que necesitamos aquí, clase navegar, seguido de la imagen, ¿verdad? Nombre de la clase. Vamos a establecer la opacidad a uno y la visibilidad a visible A continuación, necesitamos transformar la función de traducción Y. El valor va a ser cincos. Necesitamos transición para un efecto suave. Además, necesitamos tiempo de retraso. A continuación, tenemos que agregar aquí transición por defecto. Ahora bien, si hago clic en los enlaces, todo va a funcionar bien. En realidad, tenemos que deshacernos del tiempo de demora a partir de aquí. ¿Ok? Todo funciona bien. Y tenemos aquí genial firma y firma de plantilla de formulario. Vamos a seguir adelante. 10. Proyecto 5 - Cabecera de sitio web: Bien, entonces es el momento de crear nuestro próximo proyecto. En esta sección, vamos a construir un encabezado agradable y moderno del sitio web. Hoy en día, cada sitio web moderno necesita tener un encabezado genial. Entonces, en esta sección, aprenderás sobre cómo crear y personalizar el encabezado de la landing page. Sigamos adelante y describamos el proyecto. El encabezado consta de un par de partes diferentes. En la esquina superior izquierda, tenemos un código de logotipo y crear. Después en la parte superior, esquina derecha, tenemos una navegación sencilla. Solo tenemos tres elementos de navegación con efecto hover. En cuanto al centro de la página, aquí tenemos la parte más importante. Puedes ver aquí la lámpara que en realidad se crea con HTML y CSS puros. No tenemos aquí ninguna imagen. La lámpara tiene iluminación, y también se puede ver aquí abajo de la sombra. Además de eso, tenemos aquí un par de elementos textuales diferentes, y también se puede ver aquí un fondo textual, que creo que se ve muy bonito y genial Bien, así que eso es todo sobre este proyecto, sigamos adelante y empecemos a construirlo. He creado una nueva carpeta en el escritorio. Sigamos adelante y ábralo en código VS. Y luego voy a crear nuestros archivos de trabajo para HTML y para CSS. Vamos a usar esas dos tecnologías solamente. Vamos a abrir el archivo HTML Idextt y crear el documento HTML básico Voy a cambiar el título. Vamos a insertar tu página de destino. Y luego voy a vincular el archivo CSS. Sigamos adelante y abramos el proyecto y el navegador y luego coloquemos el editor en el navegador uno al lado del otro, así. Bien. Voy a visitar el sitio web de Google Fonts porque vamos a utilizar el Google Pont lo largo de este proyecto. Entonces vayamos al sitio web y luego busquemos el teléfono llamado vendido. Voy a seleccionar un par de estilos diferentes de aquí. Voy a buscar otra p, que va a ser PT Sans Narrow. Seleccionemos esos estilos. A continuación, voy a buscar la pasión uno, agarrar esos azulejos. Entonces voy a copiar el enlace desde aquí, y tenemos que pegarlo y tenemos que pegarlo en el elemento head. Todo bien. Ahora podemos empezar a escribir el marcado HTML Necesitamos contenedor en el que voy a crear aterrizaje. Vamos a insertar aquí n elementos con la clase NOFbar en la que voy a insertar un logo Va a ser elemento span, CAC, código y create A continuación, voy a crear navegación. Vamos a insertar aquí elementos de enlace. Va a ser en casa. El segundo ítem va a ser tutoriales. En cuanto al tercer ítem, voy a insertar sus cursos. Bien. Después de eso, necesitamos pancarta en la que voy a insertar desarrollo, va a ser lámpara. Entonces necesitamos aquí sombra. Esas son las partes de la lámpara. El siguiente va a ser bulbo. Entonces tendremos luz. El siguiente va a ser sombra. Todo bien. Después de eso, necesitamos H uno elementos de encabezado con el encabezado del banner de la clase. Se va a aprender el texto. A continuación, necesitamos encabezado de pancarta. En realidad, el primero fue el encabezado principal. Este es solo el encabezado con el código de texto y crear. En realidad, necesitamos aquí H dos elemento de encabezado y no la t. Entonces tendremos párrafo con el párrafo de banner de clase. Insertemos aquí desarrollo web y diseño web. Entonces, en realidad, eso es todo. El marcado HTML está listo, y tenemos que empezar a escribir el CSS Vamos a crear algunos estilos predeterminados. Necesitamos cada elemento. Vamos a establecer el margen y el relleno a cero. A continuación, necesitamos que el tamaño de la caja sea una caja de borde. Además, necesitamos deshacernos de la decoración del texto. Entonces pongamos la familia telefónica. Va a ser el teléfono llamado PT Sans Narrow Sansif A continuación, voy a cambiar el tamaño frontal del elemento H tal porque vamos a usar RM como unidad de medida En este caso, una M será igual a diez píxeles. Después de eso, cuidemos el contenedor. Voy a establecer con el 100%, la altura va a ser de 100 altura del bote. Entonces voy a cambiar el fondo. Va a ser gradiente lineal. El primer color va a ser dos C dos, tres uno. Entonces el siguiente va a ser 2b2c3 uno. Entonces aquí tenemos los antecedentes. Después de eso, voy a encargarme del aterrizaje. Vamos a establecer el ancho al 95%. La altura va a ser del 90%. Entonces voy a cambiar el color de fondo. Va a ser de 2425 a nueve. Y entonces necesitamos sombra. Digamos que dos cero, uno M cuatro RM y el color RGBA El color va a ser negro con opacidad 0.3. Entonces aquí tenemos el encabezado. Tenemos que colocarlo en el centro. Usemos la cuadrícula de visualización y luego coloquemos los artículos en el centro. Entonces el elemento se coloca en el centro de la página. A continuación, voy a encargarme del noth bar. Vamos a establecer con al 100%. Entonces la altura va a ser de 15 mls necesitamos pudín. Vamos a ponerla a cero y diez carnero en los lados izquierdo y derecho. A continuación, voy a usar libros de lino. Alineemos los elementos en el centro, y así necesitamos justificar contenido con los valores del espacio entre ellos. Entonces aquí tenemos el logo y los elementos de navegación. A continuación, voy a encargarme del logo. Estoy en este panel Vamos a cambiar la familia telefónica. Va a ser la pasión uno, cursiva. Entonces voy al tamaño del teléfono a ocho ram. Además, necesitamos que el color sea blanco. Entonces voy a aumentar el espacio entre las letras. Digamos que es 2.2 ram. También necesitamos sombra de texto. Va a ser 0.51 ram con RTB un color negro, y la opacidad va a ser Entonces aquí tenemos el logo. Después de eso, voy a seleccionar el span seguido del elemento after. Vamos a configurar el contenido para que se vacíe. Necesitamos la línea en el logotipo, y establecer la posición en absoluto, y también necesitamos posición relativa para el elemento libra. Vamos a establecer el ancho a 9.5, La altura va a ser 0.5. Además, necesitamos color de fondo, digamos que 2444 A continuación, voy a fijar a la posición al 50%. La posición izquierda va a ser cero, y necesitamos centrarnos usando transform Traducir Y -50%. Bien. Vamos sobre el logo. Vamos a encargarnos de los elementos de navegación. Seleccionemos la navegación seguida del elemento link. Voy a establecer el tamaño del teléfono en dos ram, entonces necesitamos margen en el lado derecho. Vamos a ponerla a cinco M. Además, necesitamos color. Voy a hacer cinco dos, cinco cuatro, cinco, aquí tenemos los elementos de navegación. A continuación, voy a aumentar el espacio entre las letras. A continuación, necesitamos elemento de enlace con selector de gráfico. Voy a seleccionar el primer elemento de enlace. Vamos a establecer el color a d d d. Así que el primer elemento por defecto tiene un color diferente. Después de eso, voy a crear un efecto hover. Voy a cambiar el color al pasar el cursor, digamos 2444 y luego usar transition para el efecto smooer En realidad, necesitamos cambiar el color, necesitamos aquí d d d. Muy bien, entonces, eso es todo sobre la navegación. Ahora tenemos que cuidar el centro de la página. Estoy en la lámpara. Vamos a establecer la posición en absoluto. A continuación, necesitamos posición relativa para el elemento padre. Vamos a poner la posición superior a cero, entonces la posición izquierda va a ser 50%, y necesitamos centrar el elemento usando transform, translate x -50% A continuación, necesitamos que el ancho sea 20 M voy a establecer la altura en 30. Y usa aquí el color de fondo temporal. Entonces aquí tenemos la lámpara. Ahora mismo, no parece ninguna lámpara, pero vamos a arreglar eso. Seleccionemos el cable. Voy a poner ancho 2.4 M. Entonces necesitamos altura, van a ser diez ram. A continuación, necesitamos que el color de fondo sea 1224. A continuación, voy a establecer la posición en absoluto. Entonces necesitamos que la posición superior sea cero. La posición izquierda va a ser del 50%, y también necesitamos centrar el elemento usando transform, translate x -50% Después de eso, voy a usar algún efecto de sombra. Vamos a establecerlo en 0.51 ram y el color RGBA con menor En realidad, el cable no es visible porque nos falta en absoluto este elemento. En realidad, necesitamos colocar esos elementos dentro de la lámpara y también tenemos que agregar aquí alambre. Bien. Entonces aquí tenemos el cable. Se ve bastante bien. A continuación, voy a encargarme de la sombra. Sigamos adelante y seleccionemos este elemento. Voy a establecer el ancho al 100%. La altura va a ser diez. Entonces necesitamos color de fondo. Va a ser negro por un tiempo. Fijemos la posición a absoluta. A continuación, tenemos que posicionar va a ser diez ram. Entonces aquí tenemos la sombra. Sigamos adelante y fijemos el radio del borde en 50%, 50%, luego cero y cero. Como puedes ver, ahora la sombra tiene mejor forma. Vamos a establecer el fondo en gradiente lineal. Voy a usar aquí como primer color a d16. Entonces el siguiente va a ser de 2425 a nueve. Aquí tenemos la sombra que se ve mucho mejor. Vamos a usar algún efecto de sombra. Voy a fijarlo a 0.5 ram uno RM y el color va a ser RGPA negro con menor opacidad Ahora la sombra se ve bastante bien. A continuación, voy a seleccionar sombra con after pdlement. Vamos a establecer el contenido en vacío entonces necesitamos que el ancho sea 100%. La altura va a ser Dos carnero. Entonces voy a poner la posición a absoluta. Además, definamos la posición inferior. Va a ser menos un carnero. A continuación, necesitamos posición izquierda, va a ser cero. También necesitamos radio fronterizo. Va a ser del 50%. En cuanto al color de fondo, voy a fijarlo en dos D, tres, dos, tres siete. Bien, así como pueden ver. Ahora, el elemento se ve como el 100% de la sombra. A continuación voy a encargarme de la bombilla. Digamos que es con dos tres carnero. Entonces la altura va a ser de 2.5 ram. Además, necesitamos aquí color de fondo, va a ser blanco. Entonces voy a poner la posición a absoluta. La posición inferior va a ser 8.5 ram, En cuanto a la posición izquierda, va a ser 50%, y necesitamos centrar el elemento usando transform, translate x -50% Entonces aquí tenemos la bombilla. Tenemos que hacerlo redondeado. Hagámoslo usando radio de borde con valores cero, cero, 50% y 50%. Bien. Entonces aquí tenemos la bombilla. A continuación, voy a agregar aquí, box shadow con los valores 0.5 R dos ram luego el color RGBA, 2505, 2505, tres veces Es de color blanco y lo contrario 2.3. Bien. Entonces tenemos aquí bonito efecto. Vamos sobre el bub. Sigamos adelante y cuidemos la luz. Digamos que es de ancho al 100%. Entonces la altura va a ser de 50 RM. A continuación, voy a cambiar el fondo. Vamos a usar de nuevo gradiente lineal. El primer color, va a ser RGBA, 2505, 2505, 55, y la Entonces voy a usar el color transparente, y como el tercero, volvamos a usar transparente. Todo bien. Ahora necesitamos cambiar la posición del elemento. Vamos a establecerlo en absoluto. Entonces la posición dos va a ser 19 M. Entonces necesitamos posición izquierda, va a ser 50%. Nuevamente, necesitamos centrar el elemento usando transform, translate x -50% Ahora el elemento se posiciona muy bien. A continuación, necesitamos radio de borde con los valores, 30%, 30%, cero y cero. A continuación, necesitamos usar filtro con función de desenfoque, y el valor va a ser uno RM. Entonces aquí tenemos la luz. Disminuyamos la opacidad, que sea 0.3. Ahora tenemos aquí este bonito y fresco efecto de luz. Después de eso, voy a seleccionar sombra, pongamos el ancho a 40 ram, entonces la altura va a ser ocho ram, siguiente, necesitamos fondo. Vamos a usar de nuevo gradiente lineal. Necesitamos aquí dirección para estar a la derecha, entonces el primer color va a ser transparente. Entonces tendremos color negro, y nuevamente, transparente. Entonces aquí tenemos la sombra. Tenemos que posicionarlo. Fijemos la posición a absoluta. Entonces la posición inferior va a ser -45 ram. En cuanto a la posición izquierda, voy a ponerla al 50%. Nuevamente, necesitamos centrar el elemento usando transform, traducir X -50% Todo bien. Después de eso, voy a rotar el elemento según eje x. El valor va a ser de -70 grados. Entonces como se puede ver el elemento está girado. Ahora, voy a usar radio de borde con un valor 50%, y también necesitamos filtro con función de desenfoque y el valor va a ser dos. Bien, así como pueden ver, tenemos aquí el efecto de sombra genial. Nuevamente, vamos a disminuir la opacidad, hacerla 0.3. Bien, eso es. La lámpara con su sombra está lista. Se ve genial. Ahora tenemos que tomar de la cabecera principal. Vamos a establecer la posición en absoluto. Entonces cuando tomaste posición para estar 25%, la posición izquierda va a ser 26%. Cambiemos la familia de teléfonos. Voy a usar Oswald, San Serif. El tamaño del teléfono va a ser de 20 RM. Entonces aquí tenemos el rubro principal. A continuación, voy a poner el texto en mayúscula. Entonces necesitamos color. Vamos a usar aquí 4142, siete. Entonces se cambia el color. A continuación, necesitamos espaciado entre letras. Van a ser diez RM. Después de eso, voy a disminuir la opacidad. Hagámoslo 0.5. Entonces voy a cambiar el fondo. Vamos a usar gradiente lineal. El primer color va a ser 41427. Entonces necesitamos transparente con 70%. A continuación, voy a usar la propiedad llamada webkit clip de fondo va a ser texto Y luego voy a usar webkit, color de campo de texto, que va a ser transparente Entonces, como pueden ver, tenemos aquí un hecho realmente agradable y genial. A continuación, voy a encargarme del encabezado de la pancarta. Pongamos esta posición a absoluta. La posición inferior va a ser 35, entonces necesitamos la posición correcta. Voy a fijarlo en 23%. Vamos a establecer para la familia a la pasión uno, Cursive. Además, voy a aumentar el tamaño del teléfono. Van a ser ocho RM. Entonces aquí tenemos el rubro. Transformemos el texto en mayúsculas, luego cambiemos el color. Va a ser BBB. Entonces necesitamos espaciado entre letras. Va a ser dos carnero. También usa algún efecto de sombra. Digamos sombra de texto a 0.5 ram un ram y el RGBA color negro con opacidad 0.3, en realidad El rumbo se ve bastante bien. A continuación, voy a tomar aquí. Del párrafo. Cambiemos el nombre de la clase y hagamos algunos cambios aquí. La posición de las ollas va a ser de 30 RM, entonces la posición correcta va a ser 24%. Voy a cambiar la familia telefónica. Vamos a usar aquí Oswald Sarif Entonces necesitamos cambiar el tamaño del teléfono, va a ser la R Además, cambia aquí el cambia aquí Voy a fijarlo en 300. A continuación, deshazte del Impuesto transforma la propiedad, también, cambia el color. Va a ser seis C, seis D siete. Y luego deshacerse de la sombra fiscal, también disminuir el, vamos a espaciar, que sea 0.1 RM. Todo bien. Entonces, eso es todo. El encabezado del sitio web se ve bastante bien. Espero que hayan disfrutado de este proyecto. Vamos a seguir adelante. 11. Proyecto 6 - Tarjeta de blog: Bien, es hora de seguir adelante y comenzar a crear nuestro próximo proyecto. En esta sección, vamos a estar construyendo una tarjeta de bloque bonita y moderna. Sigamos adelante y describamos el proyecto. Como puedes ver, la tarjeta consta de un par de elementos diferentes. Tenemos aquí una imagen en el lado izquierdo de la tarjeta, luego algunos elementos textuales Y también tenemos aquí el botón que nos dice leer más. Si hago clic en el botón, entonces la tarjeta se expandirá. Y llegaremos aquí otras tres tarjetas diferentes sobre algunos tours. Si vuelo el cursor sobre las cartas, entonces obtendremos este bonito y genial efecto Como puedes ver, se cambia el contenido del botón. Ahora nos dice que leer menos. Si hago clic en el botón, entonces la tarjeta se minimizará. Bien, así que sentémonos sobre este proyecto. Empecemos. creado una nueva carpeta en el escritorio. Sigamos adelante y lo abramos en código VS, luego creamos nuestros archivos de trabajo. Necesitamos tres archivos diferentes, para HTML, para CSS y para Java script. Entonces voy a abrir archivo HML indexado y tenemos que crear documento HTML básico Sigamos adelante y cambiemos el título. Va a ser un auto de cuadra. Entonces voy a vincular los archivos CSS y un script. Vamos a abrir la etiqueta script y especificar aquí el nombre del archivo jar. Bien, sigamos adelante y abramos el proyecto al navegador usando servidor en vivo. Y luego voy a colocar el editor y el navegador uno al lado del otro. Entonces a continuación voy a agarrar el enlace de CDN para teléfono, entonces íconos, porque vamos a usar esos íconos a lo largo de este proyecto Vamos a copiar el enlace, abrir etiqueta de enlace en el elemento head y pegar el CDN aquí A continuación, voy a visitar el sitio web de Google Phones. Para poder agarrar algunos teléfonos de los Google Phones, sigamos adelante y busquemos un teléfono llamado Roboto Condensado Voy a seleccionar un par de estilos diferentes, después voy a buscar otro teléfono, que va a ser End. Seleccionemos de nuevo diferentes estilos, después voy a copiar el enlace desde aquí y pegarlo solo en la cabeza. Bien, estamos listos para comenzar a escribir el marcado HTML Necesitamos crear una etiqueta abierta de contenedor que va a ser bloque. Necesitamos imagen de bloque en la que voy a abrir etiqueta de imagen. Sigamos adelante y seleccionemos la imagen de la carpeta de imágenes. Va a ser la imagen uno. Entonces después de la imagen, necesitamos crear contenido de tarjeta de bloque. Este elemento incluirá H tres elementos de encabezamiento. Va a ser la fecha 27 de enero de 2023. A continuación necesitamos H un elemento de encabezado. Va a ser explorar nuevo para. También necesitamos un párrafo con algún texto ficticio. A continuación voy a crear un botón con la tarjeta de nombre de clase BTN El tipo va a ser botón. También voy a colocar aquí leer entonces elemento span más. A continuación voy a crear en el que tengamos bloques, vamos a tener tres ítems diferentes. Desde tu imagen, voy a seleccionar la imagen de la. Carpeta de imágenes. Va a ser a uno. Entonces necesitamos elemento span con el texto explorar a uno. Y también necesitamos fónico. Va a ser FA, co de aumento sólido , ubicación Voy a duplicar este artículo dos veces porque vamos a tener tres artículos diferentes. Sigamos adelante y hagamos algunos cambios. Tenemos que rasgar dos. Necesitamos aquí cambiar los nombres de las imágenes. Bien, en realidad eso es todo. Se crea el marcado HTML. Y ahora tenemos que tomar aquí del CSS. En primer lugar, voy a seleccionar cada elemento usando un asterisco Vamos a establecer el margen y el relleno de ambos a cero. Entonces necesitamos que el tamaño de la caja sea una caja de borde. Además, voy a disminuir el tamaño del teléfono del elemento H Timal porque vamos a usar M como unidad de medida En este caso, un m será igual a diez píxeles. Sigamos adelante y seleccionemos contenedor. Voy a establecer el ancho al 100% entonces la altura va a ser de 100 ver la altura del pie. Cambiemos el fondo. Voy a usar la función de gradiente lineal. El sentido va a ser 145 grados, entonces el color va a ser 6193 Entonces necesitamos aquí 0% El segundo color va a ser 814. Aquí necesitamos el valor porcentual, 75. Bien, entonces tenemos aquí un bonito y fresco fondo. Usemos flex box. Para centrar el contenido, necesitamos justificar el centro de contenido y un centro de líneas de artículos, el contenido está centrado. En realidad, voy a disminuir el tamaño de las imágenes que establecen el ancho a 25 fotogramas. Entonces la altura va a ser 35 marco. Entonces voy a seleccionar la propia imagen que establezca el ancho al 100% y la altura va a ser 100% Y también necesitamos la cubierta de alimentación de objetos. Ahora tenemos mejores resultados. Sigamos adelante y seleccionemos Block Tours y utilicemos Libros Flex. Las imágenes se colocan horizontalmente, una al lado de la otra. Sigamos adelante y seleccionemos Bloquear imagen de tarjeta. Voy a poner a 30 Ram, entonces la altura va a ser 32 Ram también. A continuación tenemos que seleccionar la propia imagen de la tarjeta. Me refiero al elemento imagen. Vamos a establecer con 100% y la altura va a ser 100% También necesitamos de nuevo objeto pies cubierta. A continuación voy a seleccionar Bloquear tarjeta y establecer su ancho 55% Entonces la altura va a ser 80% Vamos a cambiar el color de fondo. Voy a usar RGB, 40, 40, 40. Entonces voy a usar radio de borde para hacer que las esquinas lo redondeen. 3,022.5 Ram. Tenemos aquí la tarjeta con un fondo oscuro. Después de eso voy a usar un poco de relleno. 3,022.5 Carneros crean algún efecto de sombra. Vamos a poner sombra, 201.4 Ram, ocho Ram, y el color va a ser RGB, 40, 40, 40 En cuanto a la opacidad, voy a decir 2.8 y también necesitamos aquí RGB ocho Bien, Ahora tenemos mucho mejor resultado. Ahora voy a usar fondo con esta función de gradación lineal para la imagen. Además, voy a hacerlo redondeado usando radio de borde. A continuación vamos a establecer la posición en absoluto. También necesitamos posición relativa para el elemento padre. Pongamos la posición al 15% entonces la posición izquierda va a ser menos diez Ram. Necesitamos transformar traducir Y -50% También voy a establecer la escala de la imagen 2.6 Tenemos aquí la imagen siguiente. Tomemos del radio del borde para la imagen misma. Y también necesitamos disminuir la opacidad. Hagámoslo un 0.5 Ahora la imagen se ve bastante bonita. Sigamos adelante y nos encarguemos de los recorridos de cuadra. Voy a establecer el peso al 100% entonces voy a usar justificar contenido con espacio de valor incluso. Necesitamos incluso espacio entre los artículos. Aquí tenemos los artículos colocados muy bien. Entonces voy a establecer la posición absoluta. La posición inferior va a ser seis Ram Para la posición, voy a ponerla a cero. Los recorridos se colocan abajo. Sigamos adelante y seleccionemos Bloquear contenido de tarjeta. Voy a poner su posición a absoluta. Entonces voy a establecer las dos posiciones a 1% posición va a ser 15% Entonces necesitamos transformar con una función de escala. Voy a establecer el valor 0.8 Siguiente Voy a encargarme de los rubros. Me refiero al primer rumbo, H tres. Vamos a configurar la familia telefónica a Roboto condensado san Serif. Entonces el tamaño del teléfono va a ser dos Ram. También necesitamos color, va a ser 999. Entonces voy a poner algo de espacio en la parte inferior aquí tenemos el primer rumbo. A continuación, voy a duplicar este código y cambiar aquí familia telefónica ya que necesitamos cambiar el tamaño del teléfono, va a ser 3.5 Ram. Entonces necesitamos que el peso del teléfono sea de 300 y también cambiar el color, va a ser blanco. Sentémonos sobre los elementos del segundo encabezamiento. A continuación voy a tomar año del párrafo. Copiemos este código, cambiemos el selector. Va a ser, voy a establecer el tamaño del teléfono en 1.6 Ram y también cambiar el color. Va a ser 777. A continuación necesitamos ancho para ser 35 Ram. También cambia el margen en la parte inferior, hazlo tres Ram. Eso es sobre el párrafo. A continuación voy a tomar del patón. Vamos a establecer con 216 Ram. Entonces la altura va a ser cuatro Ram. En realidad necesitamos agarrar este fondo con función de gradiente lineal. Necesitamos el mismo color de fondo aquí. Siguiente Voy a poner la frontera a non. También cambia el color, hazlo blanco. Entonces voy a cambiar la familia telefónica. Va a ser, ¿puede sansorif? El botón se ve bastante bien. Estoy configurado el tamaño del teléfono en 1.4 Ram. También transforma texto en mayúsculas. Entonces voy a crear algún espacio entre las letras, que sea 0.1 Ram. Además, voy a hacer que el botón sea redondeado usando radio de borde con el valor dos Ram. Bien, el botón se ve bastante bien. Voy a usar algún efecto de sombra. Pongamos la sombra de caja a 01 M1m. Y el color RGBA, me refiero al color negro con opacidad 0.1 Además, voy a cambiar el cursor, hacerlo señalar El botón se ve bastante bien. Ahora voy a encargarme del artículo de Block Tours. Quiero decir, los autos abajo. Vamos a establecer el radio del borde en un Ram. Entonces voy a usar algún efecto de sombra. Pongamos la sombra de bloque a 01 Ram, cinco Ram. Y nuevamente, RGB, un color negro con opacidad 0.3 A continuación voy a poner el cursor a puntero A continuación voy a encargarme de las imágenes. Retrocedamos la vuelta con la función de degradado lineal. El sentido va a ser 135 grados y el color será 6193 Entonces el siguiente va a ser de 1356 a siete, el radio fronterizo a un Ram Necesitamos el mismo radio de borde para la imagen misma. Además, voy a disminuir la opacidad. Hagámoslo 0.5 Ahora las imágenes se ven bastante geniales. Después de eso, voy a encargarme de los elementos span en el ítem. Fijemos la posición a absoluta. Necesitamos posición relativa para el elemento padre. Entonces la posición superior va a ser 50% la posición izquierda va a ser -35% Necesitamos centrar el elemento usando transformar traducir Y -50% Entonces voy a cambiar la familia de teléfonos Usemos Candi. Aquí tenemos los panelementosvamos a aumentar el tamaño del teléfono Va a ser 1.8 Ram. Cambia el peso del teléfono, pongámoslo en 500. Además, necesitamos transformar el texto en mayúsculas. Entonces voy a crear algún espacio entre las letras y cambiar el color. Que sea blanco. En realidad, algo anda mal aquí. Nos perdimos mi. Ahora todo se ve bien. Tenemos que rotar el texto dirección Z con el valor -90 grados. Ahora todo se ve bastante bien. Bien, copiemos este selector y utilicemos tu elemento. Vamos a establecer con 26 Ram, entonces la altura va a ser seis Ram también. Voy a cambiar el color de fondo. Va a ser 1683d. Necesito aquí el letrero de tactografía. A continuación tenemos que encargarnos del puesto. Tenemos que colocar el icono en el centro. Entonces necesitamos posicionar para ser 50% posición izquierda 50% Y transformar traducir con los valores -50% y otra vez -50% Los iconos se colocan en el centro del ítem Voy a hacer los elementos redondeados usando radio de borde 50% Entonces necesitamos colocar el icono en el centro usando Flexbox Cuando justificas el centro de contenido y una línea de artículos. Además, vamos a aumentar el tamaño del teléfono, que sea 2.5 Ram. Cambiar el color It. Nosotros. Bien, aquí tenemos los íconos. Vamos a usar algún efecto de sombra con valores 01 Ram, tres Ram, y el color va a ser negro con opacidad 0.1 Bien, ahora voy a crear el efecto hover en hover Disminuiremos la opacidad. Pongamos la opacidad a cero y la visibilidad oculta. Una vez que colocamos el cursor sobre los elementos, entonces el icono debería mostrarse Vamos a pasar los efectos seguidos de la imagen a. En realidad, tenemos que agarrar este selector de aquí y pegarlo. Arriba después de la imagen. ¿De cómo vamos a cambiar la opacidad? Va a ser 0.05 También necesitamos aquí la transición. Vamos a agarrar este selector. Ahora cuida el ícono de puntos. Cambiemos la opacidad, hagámosla una. Y también necesitamos visibilidad visible. Luego transita 0.3 segundos, y también necesitamos tiempo de retardo punto 1 segundo. Ahora como puedes ver, tenemos aquí un efecto hover realmente genial y agradable Bien, después de eso, necesitamos aquí capacidad para ser cero y visibilidad oculta. Tenemos que ocultar los artículos. Como necesitamos cambiar, el tamaño de la tarjeta va a ser 45% En cuanto a la altura va a ser 40% A continuación, tenemos que deshacernos de la función de escala de aquí y también cambiar la posición de la imagen. Va a ser 50% la primera posición. En cuanto a la posición izquierda, va a ser menos cinco Ram. La imagen está muy bien posicionada. A continuación tenemos que encargarnos del cambio de contenido. El primer puesto va a ser del 15% En cuanto a la posición izquierda, voy a hacerla 40% Tenemos que deshacernos de la escala, todo se ve bien. Cuidemos a los Batson. Necesitamos su posición relativa. Y luego el índice 100, debido a que el botón estaba deshabilitado, Ahora está habilitado de nuevo. Bien, creo que todo está listo. Y ahora podemos empezar a escribir Javascript. Vamos a crear el botón variable y seleccionar este elemento utilizando el método selector de consultas. Necesitamos especificar aquí el nombre de clase de la parte inferior. Entonces tenemos que seleccionar auto de bloque. Especificemos aquí el nombre de la clase. Ahora necesitamos agregar el oyente de eventos al botón con un evento click Además, necesitamos aquí la función de devolución de llamada. Una vez que hacemos clic en el botón, tenemos que agregar nueva clase a la tarjeta de bloque. Necesitamos aquí clase arrendada propiedad, entonces el método togl, la nueva clase va a ser cambio Bien, ahora tenemos que seleccionar tarjeta de bloque con cambio de clase. Tenemos que añadir aquí nuevos estilos. Tenemos que cambiar el ancho, va a ser 55% También necesitamos cambiar la altura, va a ser 80% Vamos a usar la transición para un efecto más suave. Una vez que recojamos el botón, entonces la tarjeta se expandirá muy bien. A continuación voy a cuidar la imagen. Utilizar de nuevo Cl cambiar. Tenemos que mover el elemento usando transform translate y función con el valor -50% Y también necesitamos escalar a 0.6 A continuación tenemos que cambiar la posición va a ser 15% La posición dos como para la posición izquierda va a ser menos diez Ram También, necesitamos aquí la transición. Una vez que hagamos clic, entonces la imagen se moverá hacia arriba, se cambiará el tamaño. A continuación tenemos que encargarnos del contenido. Cambiemos la posición superior. Va a ser el 1% eso es para la posición izquierda. Voy a establecerlo en 15% Luego usa transform con la función scale va a ser 0.8 También necesitamos transición para un efecto más suave, el contenido está listo. A continuación, voy a encargarme de los artículos tors. Seleccionemos el elemento Block Tours y hagámoslo visible usando opacidad uno y visibilidad visible. A continuación, necesitamos la transición. Una vez que hagamos clic, entonces aparecerán los artículos. Pero como pueden ver, necesitamos aquí algún tiempo de retraso. Voy a agregar tiempo de retraso a cada artículo del tour por separado. Seleccionemos el primero y establecemos la transición a todos 0.3 segundos y el tiempo de retardo 0.3 segundos. Duplicemos este código para el segundo ítem. El tiempo de retardo va a ser de 0.5 segundos. En cuanto al último ítem, va a ser 0.7 segundos. Ahora como pueden ver tenemos aquí realmente nen efecto cool. Lo único que tenemos que hacer es cambiar el contenido del botón. Necesitamos usar un operador ternario. Es condición verdadera. Luego tenemos que seleccionar los elementos span y cambiar el contenido del texto. Va a ser menos. De lo contrario, es más. Necesitamos la declaración con el valor más. Ahora si hago clic, entonces el contenido cambiará. Ahora todo funciona bien con este proyecto. Ya terminamos. Espero que lo hayan disfrutado. Fue interesante y útil. Sigamos adelante Responde para construir el siguiente. 12. Proyecto 7 - Menú de navegación con círculos: Bien, así que es hora de seguir adelante y crear nuestro próximo proyecto. En esta sección, vamos a estar construyendo un menú de navegación con HTML, CSS y Javascript. Como puedes ver, tenemos aquí un botón en el centro de la página. Si hago clic en este botón, entonces se mostrarán un par de elementos de navegación diferentes con un efecto agradable y genial. Como puedes ver, se cambia el contenido del botón. Ahora dice cerrar. Si vuelvo a hacer clic en el botón, los elementos de navegación se ocultarán. Creo que el proyecto va a ser interesante y útil. Sigamos adelante y comencemos. He creado una nueva carpeta en el escritorio, que ahora mismo está vacía. Sigamos adelante y abramos esta carpeta en código VS. Entonces nuestros archivos de trabajo, el primero va a ser el índice HTML. Entonces tendremos estilo CSS. Además, necesitamos archivo para Javcript, van a ser scripts Vamos a seguir adelante y abrir el archivo Html índice y crear el documento básico Html. Voy a cambiar el título. Vamos a insertar tu menú CSS. Entonces voy a vincular archivos CSS y Charles Grit fueron script tag y tenemos que especificar aquí el nombre del archivo de Chiles. Bien, sigamos adelante y abramos el proyecto al navegador usando servidor en vivo. Y luego voy a colocar el editor en el navegador lado a lado. Bien, ahora voy a agarrar una fuente de Google. Visitemos el sitio web de Google Fonts y luego busquemos una fuente llamada Mukta Voy a agarrar diferentes estilos de aquí. Vamos a copiar el enlace y luego pegarlo en el elemento head. Bien, estamos listos para comenzar a escribir la marca HDML. Necesitamos aquí un contenedor en el que voy a insertar menú. Necesitamos aquí botón con un botón tipo, y luego necesitamos aquí clase. Va a ser menú BTM. También necesitamos dos lugar aquí, Span, elemento, menú, y también en otro lapso. Para un cierre, tenemos aquí el fondo. A continuación necesitamos los elementos de navegación. Voy a abrir elemento con una navegación de clase. Vamos a insertar aquí elementos de enlace. El primero va a estar en casa, después voy a duplicarlo un par de veces. El segundo va a ser sobre. Entonces tendremos proyectos. El siguiente va a ser cuadra, y el último será galería. Bien, entonces creo que todo está listo y ahora podemos empezar a escribir el CSS. Seleccionemos cada elemento y establecemos el margen, y pondremos ambos a cero. A continuación, necesitamos que la decoración de texto no sea ninguna. Necesitamos que el tamaño de la caja sea una caja de borde. Voy a poner la familia telefónica para cada elemento a muta Bien, a continuación voy a establecer el tamaño del teléfono del elemento HTML en 62.5% para que un m sea igual a diez píxeles Porque vamos a usar m como unidades de medida el ancho para el contenedor al 100% También necesitamos altura, va a ser 100 ver altura de maceta. Entonces voy a cambiar el color de fondo. Usemos F 1f1f1. A continuación necesitamos menú. Voy a establecer el ancho a 70 Ram. La altura también va a ser de 70 m. Voy a poner la posición a absoluta. Entonces necesitamos posición relativa para el elemento padre, que es un contenedor. Para centrar el elemento, necesitamos que la posición superior sea 50% esa posición 50% Y necesitamos la transformación traducir ancho -50% y otra vez -50% Ahora el menú está centrado A continuación necesitamos botón de menú elemento span. Me refiero al segundo, tenemos que ocultarlo por un tiempo. Entonces sigamos adelante y seleccionemos menú PTN. El ancho va a ser de 15 Ram. Entonces la altura va a ser 15 Ram también. A continuación, color de fondo, va a ser verde I. Quiero decir 238. Sigamos adelante y fijemos la posición absoluto Y entonces necesitamos posicionar para ser 50% esa posición va a ser 50% Otra vez, necesitamos centrar el elemento usando transform translate. -50% otra vez -50% También me voy a deshacer de la frontera. Entonces como veis que el botón está centrado, hagámoslo redondeado usando radio de borde. Entonces voy a establecer el tamaño del teléfono en 2.5 fram. Cambiar el estanque va a ser audaz. También, necesitamos transformar texto en mayúsculas, luego cambiar el color va a ser blanco. Voy a usar una caja flexible. Usemos el centro de contenido Justificar y un centro de líneas de artículos. Además de eso, voy a usar un poco de efecto de sombra. Vamos a establecerlo en 0.5 Ram. Entonces necesitamos dos Ram. El color va a ser 351-90-2140, Y la opacidad, 0.4 También Bien, después de eso, necesitamos seleccionar elementos de enlace. Fijemos la posición a absoluta. Entonces el ancho va a ser 12. La altura también va a ser 12. A continuación necesitamos color de fondo para controlar, que usamos. El color va a ser blanco. Vamos a hacer los artículos redondeados, luego establecer el tamaño del teléfono en 1.8 Ram y usar Flex box. Necesitamos centrar el contenido usando el centro de contenido justificado y el centro de líneas de artículos. Bien, a continuación voy a usar Shadow. Voy a agarrar este valor de aquí y pegarlo para el elemento link. Bien, después de eso, voy a seleccionar los primeros elementos de enlace usando selector hijo. Vamos a establecer la posición superior a 15% entonces la posición izquierda va a ser 75% Además, necesitamos transformar traducir -50% otra vez -50% Vamos a copiar este código un par de veces, cambiar los números de los seleccionados En general tenemos cinco artículos diferentes. El segundo ítem la posición va a ser 20% y 20% Siguiente, vamos a tener aquí 60% Para la posición izquierda va a ser 20% Entonces el cuarto ítem, vamos a tener 85.65% En cuanto al último ítem, tenemos aquí, 45% luego 85% Como puedes ver, los artículos están muy alineados. Ahora tenemos que escribir algo de Javascript. Vamos a crear el menú variable BTN. Voy a seleccionar este elemento usando el método selector de consultas. Especificemos aquí el nombre de la clase, menú BTN. Entonces voy a crear otra variable, que va a ser menu. Necesitamos agregar un oyente de eventos al menú BTN Con un evento click, tenemos que crear el evento click . Ese es el lugar aquí. Función de espalda. Una vez que damos clic en el menú BTN, tenemos que agregar una nueva clase al menú usando el método togal Esta clase va a ser cambiada y tenemos que usar esta clase en archivo CSS que es copiar el selector que necesitamos aquí. El primer elemento span, necesitamos usar display none para el primer ítem y tenemos que pasar aquí el cambio close. En cuanto al segundo ítem, tenemos que mostrarlo, necesitamos display flex. Una vez que hagamos clic en el menú, entonces el contenido cambiará de menú a cerrar. A continuación, necesitamos que aquí posicionemos para ser 50% y posición izquierda para ser 50% también. Tenemos que censurar los elementos. Terminarán detrás del botón de menú. Después los mostraremos usando el nombre de la clase de cambio. Tenemos que agregar cambio a los cinco artículos. En realidad, los artículos no se colocan del todo bien porque tenemos que deshacernos de este texto de aquí. Bien, ahora necesitamos mostrar la parte inferior del menú usando la propiedad index. Al 30 al 100, tenemos aquí la parte inferior como puedes ver, una vez que hacemos clic en el botón de menú, luego los elementos de navegación se colocan a sus posiciones. Ahora necesitamos usar la transición para suavizar el efecto. Aquí necesitamos a todos. Entonces la duración va a ser de 0.2 segundos. Además, voy a usar la función Si cúbica para hacer que el efecto sea más agradable. Una vez que hagamos clic en el icono del menú, entonces los elementos se mostrarán muy bien. En realidad, voy a agregar diferentes tiempos de retraso para los artículos con el fin de hacer que el efecto sea más fresco. Ahora si hago clic, entonces vamos a conseguir esto agradable y genial. El hecho en realidad voy a agregar transición por defecto también. Ahora todo funciona a la perfección, y con este proyecto ya terminamos. Sigamos adelante. 13. Proyecto 8 - Cabecera de sitio web con degradados: Bien, es hora de seguir adelante y comenzar a crear nuestro próximo proyecto. En esta sección, vamos a estar construyendo un encabezado de la landing page con gradientes CSS Como puedes ver, tenemos aquí un encabezado de sitio web con bonitos y geniales colores de degradado CSS. En el lado izquierdo, se pueden encontrar diferentes capas con degradados. También se puede ver el encabezado seguido del botón. En cuanto al lado derecho, puedes ver aquí una simple barra de navegación con tres elementos de navegación que le sigue el banner. Puedes ver aquí los elementos del encabezado. Uno de los encabezados tiene estos bonitos y geniales gradientes CSS Abajo, puedes encontrar tres fonosomíconos. Representan los enlaces de las redes sociales. Bien, sentémonos sobre este proyecto. Sigamos adelante y empecemos a construirlo. He creado una nueva carpeta en el escritorio. Sigamos adelante y ábralo en código VS. Voy a crear nuestros archivos de trabajo. El primero va a ser el índice HTML y luego tendremos archivo para CSS estilo CSS. Vamos a abrir el archivo Html de índice y crear la estructura HTML básica. Voy a cambiar el título. Va a ser landing page, y después voy a enlazar el archivo ESS aquí. Sigamos adelante y abramos el proyecto en el navegador usando servidor en vivo. Y luego voy a colocar el navegador y el editor uno al lado del otro para que nuestro proceso de trabajo sea más cómodo y sencillo. A continuación, voy a agarrar el enlace de CDN phono, porque vamos a usar los iconos phono Vamos a copiar el enlace desde aquí. Luego abre la etiqueta de enlace en el elemento head y pega el enlace aquí. A continuación, voy a visitar el sitio web de Google phones. Porque vamos a usar el teléfono de Google durante todo el proyecto. Sigamos adelante y busquemos Tilt, Warp the style. Copia el enlace y pegarlo solo en la cabeza. Bien, estamos listos para comenzar a escribir la marca del demonio H. Voy a abrir etiqueta profunda que va a ser el contenedor en el que voy a insertar aterrizaje. Entonces, bueno aquí las capas, capa uno, la capa dos y la capa tres. Dentro de la capa tres, tendremos capa interna. A continuación, voy a crear la navegación sin usar elementos. Vamos a insertar aquí Sin artículos. Tendremos tres elementos de enlace diferentes. Vamos a abrir el elemento de enlace y Pegar aquí a casa. Entonces el segundo va a ser Explora. En cuanto al tercero, va a ser Contacto. Bien, después de la navegación, necesitamos banner en el que voy a abrir H uno, encabezando gradientes de elementos con Entonces necesitamos botón. El tipo va a ser botón. A continuación necesitamos elemento span con el texto Explorar. Entonces voy a colocar con la clase FA flecha FA sólida. ¿Verdad? En realidad necesitamos aquí yo elemento y no lo profundo. Aquí tenemos el lado izquierdo de la página. A continuación necesitamos crear encabezado en el que voy a colocar H uno elementos de encabezado con la landing page de texto. Entonces necesitamos aquí elemento span gradientes CSS. Bien, después de eso necesitamos crear los enlaces de redes sociales que necesitamos desarrollo con la clase social media en que voy a colocar I elemento con las clases FA marcas, Facebook. Vamos a duplicarlo dos veces. Cambiar los nombres de las clases. El segundo va a ser FA Instagram. En cuanto al tercer elemento link, va a ser FA Twitter. Bien, así que eso es todo. Todos los elementos están creados y ahora tenemos que empezar a escribir el CSS. Voy a seleccionar cada elemento. Y usa algunos estilos predeterminados. Vamos a poner margen y ponerlos a cero a ambos. A continuación necesitamos que el tamaño de la caja sea cuadro de borde ya que voy a establecer la decoración del texto en ninguno. Entonces necesitamos familia telefónica. Va a ser tilt Warp, el teléfono de Google que seleccionamos. Como puede ver, se aplican los mosaicos predeterminados. A continuación, voy a establecer el tamaño del teléfono del elemento HTML en 62.5% Para hacer un m igual a diez píxeles, vamos a usar M como unidad de medida A continuación, voy a seleccionar el contenedor que tiene establecido el ancho al 100% Entonces la altura va a ser de 100 pies de altura. Vamos a usar el color de fondo. Va a ser DE 162. Tenemos aquí el color azul. A continuación voy a seleccionar el aterrizaje. Vamos a establecer el ancho a 95% entonces la altura va a ser 90% voy a usar fondo con función de degradado lineal. La dirección va a ser hacia abajo derecho. Necesitamos aquí el primer color que va a ser un D24. Entonces el siguiente va a ser 2d48. 99, 70% Tenemos aquí agradable y co es gradiente. A continuación necesitamos sombra de caja con los valores 01 Ram, cinco Ram. Y el color va a ser negro con menor opacidad, 0.2 ¿bien? Ahora necesitamos aquí para el radio, va a ser uno Ram, así como se pueden ver las esquinas a su alrededor. A continuación, voy a centrar el elemento usando libro de lino. Necesitamos justificar el centro de contenido y luego un centro de líneas de artículos. Como puedes ver, el encabezado está centrado en la página. A continuación, voy a seleccionar la primera capa. Vamos a establecer su ancho en 70% Entonces la altura va a ser 120% va a establecer la posición en absoluto Entonces necesitamos posición relativa para el elemento padre, que es un aterrizaje. Definamos arriba. Posición va a ser -10% entonces la posición izquierda va a ser -5% voy a usar una función de gradiente lineal El primer color va a ser C558. Entonces el siguiente va a ser 4538. Tenemos aquí la primera capa. A continuación voy a usar radio de borde con los valores cero, 50% 50% y luego cero. También, necesitamos opacidad a 0.5 A continuación, voy a usar alguna sombra con valores 01 Ram, cinco Ram Y el RGBA color negro con una opacidad 0.5 Como puedes ver, tenemos aquí la primera capa En realidad necesitamos ocultar las partes de la primera capa usando desbordamiento He. Bien, eso es. La primera capa está lista. Voy a duplicar este código cambiar altura, va a ser uno 40% entonces la posición izquierda va a ser 15% -50% Entonces el primer color va a ser 338 En cuanto al segundo color, voy a usar 452. También aquí, valor porcentual 40% En realidad algo anda mal aquí. Sí, tenemos que cambiar el nombre de la clase. Va a ser la capa dos. Aquí tenemos la capa dos. Duplicemos este código, cambiemos el nombre de la clase. Va a ser la capa tres. Necesitamos que la altura sea uno 30% entonces la posición de plomo va a ser -25% Y tenemos que cambiar los colores en la función de gradación lineal, la primera va a ser 95, en realidad necesitamos aquí la dirección de la transición a, derecho Entonces el siguiente color va a ser el 5584. Vamos a deshacernos del valor porcentual. Aquí tenemos la tercera capa. Se ven bastante bien. Vamos a deshacernos de la opacidad. No necesitamos aquí la opacidad. Entonces ahora tenemos resultados mucho mejores. Bien, sigamos adelante y seleccionemos la capa interna. Vamos a establecer con 100% entonces la altura va a ser 100% Vamos a agarrar esta función graduada lineal, cambiar la dirección hacia arriba a la derecha como necesitamos. Primer color para ser 245. El siguiente color va a ser b1666. A continuación necesitamos transformar con una función de traducir valores. Vamos a ser 30 Ram, y luego 15 Ram. Tenemos que mover el elemento con ambas direcciones. Vamos a usar radio de borde para hacer que el elemento sea redondeado 50% Ahora tenemos que ocultar las partes del elemento usando desbordamiento Heiden Bien, entonces creo que se ve bastante bien. Ahora tenemos que del no bar. Fijemos la posición a absoluta. La posición superior va a ser cero, la posición izquierda va a ser cero. Con va a ser del 100% entonces la altura va a ser de diez ml. Voy a usar libros flex. Vamos a establecer los elementos en el centro verticalmente. Y también necesitamos justificar el contenido con Flex porque vamos a colocar los artículos en el lado derecho. Vamos a poner a 010 Ram. Ahora podemos personalizar los enlaces. Seleccionemos los elementos A. Voy a establecer el tamaño de fuente en 1.4 Ram. El color va a ser blanco. Necesitamos que la transformación de texto sea mayúscula, entonces Ponight va a ser 300 Y también necesitamos el espacio usando margen, 02 Ram en los lados izquierdo y derecho, y luego crea algo de espacio entre las letras. Vamos a configurarlo 2.1 Ram. Además, necesitamos algún efecto de sombra a 3,020.5 Ram, uno Ram con RGBA color negro, y la oposidad 0.2 Bien, Los elementos de navegación se ven bastante bien. A continuación voy a seleccionar el banner. Pongamos posición a absoluta entonces posición superior va a ser 35% posición izquierda, va a ser 10% Aquí tenemos el banner, el encabezado en la parte inferior. Sigamos adelante y personalicemos los elementos del encabezado, Aumente el tamaño del teléfono. Va a ser diez Ram, entonces el color será blanco. También, necesitamos espacio entre las letras. Vamos a configurarlo 2.3 Ram. A continuación necesitamos macetas de margen. Vamos a ponerlo a cinco Ram. Además, necesitamos sombra de texto con los valores 0.5 Ram, dos Ram, y el color RGBA El rumbo se ve bastante bien. A continuación voy a encargarme del fondo. Vamos a seleccionarlo. Voy a establecer el ancho a 20 Ram. La altura va a ser cinco Ram. Entonces necesitamos que el color de fondo sea blanco. Vamos a establecer borde 2.2 Ram, sólido, un color blanco. Siguiente Voy a establecer radio de borde 2.7 Ram. Aquí tenemos el fondo. Voy a usar libros flex, eso es una línea de artículos en el centro. En cuanto a la propiedad justify content, voy a establecerla en un espacio alrededor del texto y la flecha se alinean muy bien. En realidad, necesitamos espacio entre y no la ronda. Eso es. Ahora necesitamos relleno que quede para ser uno Ram. A continuación, voy a aumentar el tamaño del teléfono, va a ser 1.8 Ram. Entonces tenemos que gravar transformar para ser mayúsculas. También usa algo de espacio entre las letras. Vamos a 32.2 Ram y cambiemos el color. Voy a usar aquí el color nueve, F cinco, el texto se ve bastante bien. Siguiente Voy a usar algún efecto Sombra. Vamos 3,020.5 Ram. Need 0.5 fram otra vez. Y el color, 230-31-7590 Y la opacidad Siguiente Voy a usar box shadow 3,020.5 Fram, dos Ram. Y el color RGBA, me refiero al color negro con opacidad 0.2 Por último, usa cos punto Bien, ahora tenemos que seguir adelante y tomar del icono, me refiero a la flecha del lado derecho. Vamos a establecer con 30% y la altura va a ser 100% Vamos a cambiar el color de fondo. Voy a usar aquí E C 245. Ahora necesitamos mostrar la flecha. Vamos a establecer para el radio a 0.7 Ram, 0.7 Ram, y cero. Ahora vamos a usar Flex box para colocar la flecha en el centro usando justify content center y un centro de línea de pedido. Y también cambia el color, hazlo blanco. Aumentemos el tamaño del teléfono. Va a ser 1.8 tranvía. Aquí tenemos la flecha. Ahora vamos a encargarnos del header, el elemento heading del lado derecho. Fijemos la posición a absoluta. El primer puesto va a ser del 30% En cuanto a la posición correcta, voy a hacer diez Ram. Vamos a aumentar el tamaño del teléfono, van a ser cinco Ram. Aquí tenemos el rumbo del lado derecho. Vamos a establecer el ancho, 243 Ram. Después un texto de línea en el lado derecho. También cambia el color, hazlo blanco. Luego usa algún efecto de sombra. Necesitamos 0.5 Ram, uno Ram, y el color RGBA con pastoso 0.2 El rumbo se ve mucho mejor Ahora tenemos que seleccionar el elemento span. Vamos a usar el bloque de visualización. A continuación, necesitamos que el tamaño de fuente sea seis Ram. Entonces necesitamos transformar texto mayúsculas como necesitamos aquí. Degradado lineal, el primer color va a ser 815. Entonces el siguiente va a ser 447 con 90% Para poder aplicar el degradado lineal, necesitamos Property Webkit clip de fondo, va a ser texto Y también necesitamos texto webkit, sentir color. Va a ser transparente. Como puedes ver, aquí tenemos un efecto de degradado agradable y fresco para el elemento heading. Bien, ahora tenemos que encargarnos de las redes sociales. Fijemos la posición a absoluta. La posición inferior va a ser cinco Ram. En cuanto a la posición correcta, voy a ponerla en diez Ram. A continuación necesitamos libros flex. Aquí tenemos los iconos. Voy a seleccionar elemento de redes sociales. Vamos a aumentar el tamaño del teléfono, van a ser dos Ram. Entonces necesitamos que el color sea blanco. También necesitamos margen, 01.5 Ram. Usemos algún efecto de sombra con los valores 0.5 Ram, uno Ram. El RGBA color negro. También cambia el cursor, hazlo señalar. Bien, eso es. Todo se ve bastante bien. Con este proyecto, ya terminamos. Ojalá fuera interesante y lo disfrutaste. Sigamos adelante. 14. Proyecto 9 - Formulario de contacto con el modo de luz / oscuridad: Bien, es hora de seguir adelante y comenzar a crear nuestro próximo proyecto. En la sección, vamos a estar construyendo un formulario de contacto con modo claro y oscuro. Como puedes ver, por defecto, el proyecto está en modo luz. Puedes ver aquí un par de campos de entrada diferentes con una parte inferior. Aquí tenemos dos fondos diferentes, claro y oscuro. También tenemos aquí algo así como Sun. Si hago clic en oscuro, entonces el proyecto cambiará al modo oscuro y el sol se transformará en Luna. Entonces si hago clic en luz, entonces el proyecto volverá a cambiar al modo de luz. Creo que este proyecto te será interesante y útil porque hoy en día los sitios web utilizan el modo claro y oscuro. Entonces aprenderás algo nuevo en este proyecto, ¿bien? Ahora es el momento de seguir adelante y empezar a construirlo. He creado una nueva carpeta en el escritorio, que ahora mismo está vacía. Sigamos adelante y ábralo en código VS. Entonces necesitamos crear nuestros archivos de trabajo para HTML. Entonces para CSS, también necesitamos archivo para Javascript. Vamos a abrir el índice, cargar el archivo HTML y crear el documento HTML básico. Voy a cambiar el título. Va a ser claro oscuro, cambia a Togo. Entonces voy a vincular el CSS y jouse los archivos. Vamos a abrir la etiqueta script y especificar el nombre del archivo en el atributo source. Entonces necesitamos abrir el proyecto al navegador usando servidor en vivo. Además, coloquemos el editor y el navegador uno al lado del otro, así. Ahora voy a usar algunas fuentes de Google. Visitemos el sitio web y busquemos Google Phone llamado Ubuntu. Voy a seleccionar un par de estilos diferentes aquí, después voy a copiar el enlace y pegarlo en el elemento head, estamos listos para comenzar a escribir el código. Voy a comenzar con el marcado H L. Vamos a abrir etiqueta con el contenedor de clase en el que voy a abrir envoltorio de formulario. Dentro de la envoltura de formulario, tendremos envoltura de espuma izquierda y envoltorio de forma derecha. Vamos a abrir lado izquierdo crear Sol Luna. Entonces necesitamos bastón con un elemento span. Tiene clase BG, necesitamos tres elementos span. El segundo va a ser ligero, él claro oscuro ya el botón de texto tendrá atributo type, va a ser botón. Después tenemos que tomar aquí del lado derecho del formulario. Vamos a abrir H un elemento de encabezado que va a ser Contáctenos. Insertemos tu entrada con el campo de clase. El tipo va a ser texto. Además, necesitamos un atributo de marcador de posición con tu nombre. Vamos a duplicarlo y cambiar el marcador de posición. Va a ser correo electrónico. Además, voy a cambiar el atributo type. También va a ser correo electrónico. A continuación necesitamos área de texto. Voy a agregar aquí clase, va a ser campo y luego mensaje también, voy a usar el atributo placeholder con el texto tu mensaje Bien, a continuación necesitamos fondo. El tipo va a ser de fondo. Entonces voy a instituir texto enviar mensaje. Bien, entonces creo que todo está listo. Sigamos adelante y comencemos a escribir el CSS. Voy a usar algunos estilos predeterminados. Vamos a seleccionar cada elemento y establecer margen y poner a cero. Entonces necesitamos que el tamaño de la caja sea una caja de borde. Voy a poner esquema a ninguno. Vamos a configurar la familia telefónica a, a la que acabamos de sacar del sitio web de Google phones Bien, entonces se aplican los estilos predeterminados. A continuación, voy a establecer el tamaño de fuente del elemento H tmul 62.5% porque vamos a usar m como unidad de medida En este caso, un m será igual a diez píxeles. A continuación, tenemos que seleccionar contenedor. Vamos a definir el ancho. Va a ser del 100% entonces la altura será de 100 vistas de altura. Cambiemos el color de fondo. Va a ser blanco. A continuación, voy a usar libros Flex. Necesitamos centrar el elemento usando justify content center y el centro de línea de pedido. Como puedes ver, el contenido está perfectamente centrado en la página. Usemos envoltorio de espuma y fijemos su ancho, 280 Ram. Entonces necesitamos altura, va a ser 60 Ram. A continuación necesitamos que el color de fondo sea blanco. Voy a usar libros de lino. Establezca el radio del borde en tres Ram, haga las esquinas redondeadas. Además, voy a usar algún efecto de sombra. Pongamos la sombra de caja a cero, a Ram, seis Ram. Y el color va a ser RGBA 61215 y la Opacidad 0.2 Bien, aquí tenemos la forma con Siguiente Voy a seleccionar el envoltorio de formulario a la izquierda. Vamos a establecer su ancho 40% Entonces voy a duplicar este código. Cambia la clase que necesitamos aquí, ¿verdad? Y el ancho va a ser 60% Todo bien, al lado de usar flex box para el lado izquierdo, cambiemos la dirección. Va a ser columna también, necesitamos que justifiques contenido al espacio entre, necesitamos algo de espacio entre los ítems. En cuanto a los artículos Elin, va a ser centro. Siguiente. Voy a crear espacio usando relleno. Digámoslo a 100, luego 20.0 Después de eso, voy a seleccionar el Sol Luna Vamos el ancho a 12, entonces la altura va a ser 12 Ram también. Voy a cambiar el fondo. Vamos a usar gradiente lineal. Necesitamos dirección para ser 225 grados. cuanto al primer color va a ser F nueve, entonces el siguiente color va a ser 55. Entonces voy a hacer que el elemento sea redondeado usando radio de borde. Aquí tenemos el sol. A continuación voy a tomar aquí del fondo, del lado izquierdo, pongamos su ancho a 20 Ram. Entonces la altura va a ser cuatro Ram. Voy a cambiar el color de fondo. Va a ser 888. Entonces vamos a deshacernos de la frontera, que no sea ninguna. Y también necesitamos radio fronterizo, tres Ram. Aquí tenemos el fondo. A continuación voy a establecer el tamaño del teléfono en 1.4 Ram. También cambia el color. Va a ser 777. Entonces voy a poner el cursor a puntero. Bien, después de eso, voy a seleccionar bottom con un elemento spin. Fijemos la posición a absoluta. Necesitamos posición relativa para el elemento padre, que es la parte inferior en este caso. Entonces necesitamos dos posiciones para ser cero. A continuación, voy a establecer el ancho al 50% También cambia la altura, hazla al 100% Siguiente Voy a seleccionar fondo. Cambiemos el color de fondo. Va a ser blanco. También necesitamos radio de borde con el valor de tres Ram. Vamos a poner la posición izquierda a cero. Necesitamos algo de sombra. Vamos a establecerlo en 0.5 Ram, un Ram. Y el RGBA color negro color con opacidad 0.1 Aquí tenemos el fondo, que pasará de claro a oscuro A continuación, voy a seleccionar claro y oscuro. Vamos a configurar la pantalla para flexionar. Necesitamos centrar el contenido usando el centro de contenido Justificar y un centro de líneas de artículos. Después de eso, voy a seleccionar luz por separado, posición izquierda a cero. En cuanto a la oscuridad, voy a ponerla en la posición correcta a cero. Bien, eso es todo, el botón está personalizado. A continuación voy a cuidar del lado derecho. Necesitamos libros flexibles. Entonces voy a cambiar la dirección, hacerla columna. También, voy a elin artículos en el centro. En cuanto al contenido justificado, voy a ponerlo en un espacio entre ellos. Para crear el espacio entre los elementos, pongamos poniendo a ocho Ram, luego a cero. Como puede ver, los elementos están alineados. Ahora es el momento de personalizar los elementos del encabezado. Vamos a establecer el tamaño de fuente en cinco Ram. Entonces el color va a ser 777. Aquí tenemos el rubro. A continuación voy a seleccionar Campo, establecer el ancho a 50 Ram. Entonces la altura va a ser de cinco Carneros. Voy a deshacerme de la frontera y luego crear frontera en la parte inferior. Vamos a establecerlo en 0.2 Ram, sólido. El color va a ser BBB. Aquí tenemos los campos de entrada con borde en la parte inferior. En realidad, vamos a disminuir el ancho, que sea 30 Ram porque son demasiado grandes. Ahora tenemos un resultado mucho mejor. A continuación, voy a establecer el tamaño del teléfono en 1.4 Ram. Entonces el color va a ser 555. También, cambia el color de la espalda aune, hazlo transparente. A continuación voy a seleccionar Campo, seguido del atributo placeholder Cambiemos la transformación del texto, ponla en mayúscula, así que necesitamos que el tamaño del teléfono sea 1.4 Ram. Después cambia el color, hazlo BBB. Además, necesitamos espaciado entre letras con el valor 0.1 Ram. Como puede ver, el atributo de marcador de posición se ve bastante bien A continuación, voy a seleccionar área de texto con el mensaje de clase. Vamos a establecer la altura a diez Ram. Y también voy a deshabilitar la función de cambio de tamaño. Vamos a ponerla en ninguna. Bien, eso es todo sobre los campos de entrada. Ahora tenemos que tomar oído del fondo. Definamos con, van a ser los dos Ram, entonces la altura va a ser 4.5 Ram. Entonces voy a cambiar el color de fondo. Vamos a usar aquí color 262431. Además, voy a establecer border a none, luego hacer que el botón sea redondeado usando el radio del borde. Vamos a ponerla a tres Ram aquí, abajo. Cambiemos el tamaño de la fuente. Va a ser 1.4 Ram. Entonces voy a cambiar el color. Hagámoslo BB, transformemos texto en mayúsculas. Entonces crea algún espacio entre las letras, hazlo 0.1 Cambia el rumbo, es puntero. Y también necesitamos algún efecto de sombra. Digamos 2012. Y el color va a ser negro con la opacidad 0.1 Bien, ese es el botón, bastante bonito Voy a crear el efecto click usando la clase activa de acciones. Tenemos que transformarnos. Traducir Y con valor 0.2 Ram. Una vez que haga clic, entonces obtendremos este bonito efecto click. Bien, ahora tengo que agregar aquí fondo de círculo. Personalicemos estos elementos seleccionados. Establezca el ancho en 120 Ram. Entonces la altura va a ser 120 Ram también. Voy a usar radio fronterizo. Vamos a establecerlo al 50% Haz que el elemento sea redondeado. Voy a agarrar este fondo con su función de degradado lineal. Aquí tenemos el círculo. Tenemos que cambiar su posición. Vamos a establecerlo en absoluto. Entonces necesitamos posición relativa para el contenedor. La posición superior va a ser -70% En cuanto a la posición let, va a ser 50% Y necesitamos centrar el elemento horizontalmente usando transform translate x -50% Bien, Entonces ahora lo único que tengo que hacer es crear la sombra con los valores 01 Ram, cinco Ram El color va a ser 248-10-6509, Con la opacidad 0.2 tenemos que colocar el círculo detrás del envoltorio Vamos a establecer la posición a relativa. Y luego usar la propiedad index del valor 100. Bien, ahora todo se ve bastante bien. Podemos empezar a escribir el Govscript. Sigamos adelante y creamos una nueva variable que va a ser un contenedor. Voy a seleccionarlo usando el método selector de consultas. Tenemos que especificar aquí el nombre de la clase. A continuación tenemos que seleccionar el botón. Coloquemos aquí el envoltorio de formulario de nombre de clase a la izquierda, seguido del botón de nombre de etiqueta. Bien, ahora tenemos que agregar un oyente de eventos al botón con evento click También necesitamos aquí la función Cope. Una vez que hacemos clic en el botón, tenemos que agregar nueva clase al contenedor usando el método to. Llamemos al switch de nombre de clase. Ahora tenemos que usar este nombre de clase en el archivo Css para crear nuevos estilos para el modo oscuro. Voy a comenzar con el fondo que se selecciona usando la clase switch. Necesitamos aquí transformar, traducimos x función y el valor va a ser 100% También usamos transition transform, la duración va a ser 0.4 segundos. Una vez que hagamos clic, entonces el elemento se moverá muy bien de claro a oscuro y de oscuro a claro. Bien, sigamos adelante y seleccionemos Cambiar con contenedor. Voy a cambiar el color de fondo. Va a ser 262431 y luego usar transición. Una vez que haga clic, entonces el fondo del contenedor cambiará de claro a oscuro. A continuación tenemos que cuidar el fondo del círculo. Vamos a seleccionarlo usando switch cambiar el fondo. Voy a usar gradiente lineal. El sentido va a ser de 225 grados. Entonces voy a usar el primer color, 93 DFF. En cuanto al segundo color, va a ser 3374 También necesitamos caja sombra 015 con RTB calor 60508115 y la opacidad 0.5 Ahora, como puedes ver, el círculo, el color de fondo del círculo color de fondo del Caín, sigamos adelante y seleccionemos el interruptor con envoltorio de formulario. Voy a cambiar el color de fondo que necesitamos aquí. Este color otra vez, 262431 y luego usar transición. Una vez que haga clic, entonces el fondo del formulario de contacto cambiará muy bien. A continuación tenemos que cambiar el Sol. Entonces, seleccionemos estos elementos. Cambiar el fondo que necesitamos aquí, gradiente lineal. El sentido va a ser 225. En cuanto a los colores que voy a usar en realidad eso es copiado todo el código y pegado aquí Después de eso, voy a cambiar la sombra de caja. Hagámoslo ninguno. Ahora el sol está cambiando. Pero aquí necesitamos un efecto adicional. Necesitamos transformar el Sol en Luna. Seleccionemos Sol Luna, seguido del elemento después del mar. Voy a poner contenido a vacío. Entonces necesitamos posición para ser absolutos. Usemos la posición relativa para el elemento padre, que en este caso es sol luna. Vamos a definir bien. La posición va a ser cero. Para la primera posición, voy a hacer que sea cero también. Entonces el ancho va a ser 9.5 Ram. La altura también va a ser 9.5 fram. Cambiemos por el radio, va a ser 50% Necesitamos un círculo. También cambia el color de fondo. Voy a usar aquí, este color oscuro. Bien, Ahora tenemos, pero necesitamos agregar aquí algún efecto. En realidad, cambiemos el color de fondo y luego usemos la escala de transformación. Que sea cero. Tenemos que aumentar la escala. Una vez que haga clic en el botón, usemos el interruptor de clase seguido del Sol Luna. Con elementos after do, voy a cambiar el color de fondo de nuevo a oscuro. También necesitamos aumentar la escala 0-1 También necesitamos aquí transición para un efecto más suave Ahora tenemos mucho mejor resultado. Pero aquí necesitamos transformar origen para estar en la parte superior derecha en lugar de en el centro. Ahora como se puede ver, el elemento va en aumento desde el lado derecho. Y aquí tenemos resultados mucho mejores y geniales. Bien, a continuación voy a encargarme del propio patón Vamos a seleccionar el botón con el interruptor, voy a cambiar el color de la espalda. Vamos a usar aquí el color 1128. También necesitan su transición para un efecto suave. Como puedes ver, la parte inferior cambia su color de fondo. También necesitamos cambiar el color del elemento span. Seleccionemos el interruptor Fondo y cambiemos el color de fondo. Usa aquí, 34323. Nuevamente, transición, quiero decir necesitamos agregar aquí color de fondo con un punto de duración 1 segundo. Como puedes ver, el botón se ve bastante bien. Una vez cambiamos el modo, ahora tenemos que tomar el texto de la entrada. Seleccionemos campo con interruptor y cambiemos el color. Hágalo ligero con BBB es ligero Y finalmente tenemos que de abajo, me refiero al botón Enviar. Vamos a seleccionarlo y cambiar el color de fondo. Va a ser BBB, y también necesitamos cambiar el color Hagámoslo oscuro, bien, así que ya está, todo funciona a la perfección. Y tenemos aquí este agradable y genial cambio de claro a oscuro. 15. Proyecto 10 - Barra de búsqueda: Bien, así que sigamos adelante y comencemos a crear nuestro próximo proyecto. En esta sección, vamos a estar creando una barra de búsqueda agradable y genial. Como puedes ver, tenemos aquí un círculo en el centro de la página, un icono de búsqueda. Si hago clic en este elemento, entonces la barra de búsqueda se expandirá. Usted es capaz de escribir aquí. Piense también que el icono de búsqueda se cambia con X botón de cierre. Si hago clic en este botón, entonces la barra de búsqueda se cerrará. Y también volveremos aquí, el icono de búsqueda. Bien, sentémonos sobre este proyecto. Es sencillo, pero estoy seguro que lo vas a disfrutar y será interesante y útil. Sigamos adelante y empecemos a construirlo. He creado una nueva carpeta en la barra de búsqueda de escritorio, que ahora mismo está vacía. Sigamos adelante y abramos esta carpeta en código Us, y luego creamos archivos de trabajo para HTML. Entonces necesitamos archivo para CSS, también para script Java. Después voy a abrir el archivo HTM indexado y crear la estructura HTML básica Sigamos adelante y cambiemos el título. Va a ser barra de búsqueda, después voy a vincular los archivos archivos CSS y Js. Vamos a abrir la etiqueta script y especificar el nombre del archivo en el atributo source. Bien, a continuación voy a abrir el proyecto al navegador. Y luego colocar el editor y el navegador uno al lado del otro. A continuación voy a agarrar el enlace de CDN telefónico, porque vamos a usar el teléfono algunos íconos a lo largo de este proyecto Vamos a copiar el enlace, luego abrir la etiqueta de enlace y pegarla en el atributo de referencia H. Además de eso, necesitamos los teléfonos de Google. Sigamos adelante y visitemos el sitio web. Voy a buscar el teléfono llamado signica negativo. Vamos a agarrar los estilos y luego copiar el enlace y pegarlo en el elemento head. Bien, así que estamos listos para comenzar a escribir el marcado HTML Voy a abrir Deep Type, que va a ser el contenedor. Vamos a insertar aquí la barra de búsqueda, en la que voy a insertar elemento de entrada con el tipo text y con un placeholder tipo de atributo Además de eso, tendremos aquí un fontosomicón con las clases FA solid, FA lupa También, necesitamos aquí otro fonosomicon, las clases FA solid Tenemos aquí todos los elementos. Y ahora podemos empezar a escribir el CSS. Voy a seleccionar cada elemento y luego establecer margen y ponerlos a cero a ambos. A continuación necesitamos que el tamaño de la caja sea caja de borde. Voy a deshacerme del esquema predeterminado y luego cambiar la familia telefónica. Va a ser el teléfono que seleccionamos, Signia negativo Sensorii Además de eso, voy a establecer el tamaño del teléfono del elemento H tim en 62.5% para poder usar el Ram como unidad de medida Bien, sigamos adelante y cuidemos el contenedor con el que voy a establecer al 100% entonces la altura va a ser de 100 mirador de altura. Además, necesitamos aquí el color de fondo. Voy a usar aquí el color 1611. Es de color oscuro. Además, necesitamos Flexbox para centrar el contenido. Vamos a justificar el centro de contenido y un centro de líneas de artículos. Como puedes ver, el contenido está centrado en la página. A continuación, voy a seleccionar Barra de búsqueda. Vamos a establecer el ancho en 45 Ram. Entonces la altura va a ser ocho Ram. Además, necesitamos que el color de fondo sea blanco. A continuación, voy a usar radio de borde para hacer redondeadas las esquinas. Vamos a ponerla en diez Ram. También usemos algún efecto de sombra. Va a ser 01 Ram, seis Ram. Y el color va a ser RGBA, negro con menor opacidad, 0.6 Bien, después de eso, voy a alinear el texto al lado derecho A continuación voy a seleccionar los elementos de entrada. Vamos a establecer con dos 100% entonces la altura va a ser 100% también. Vamos a deshacernos del borde predeterminado y luego usar el radio del borde con el valor diez Ram. A continuación, voy a establecer el color de fondo en non. También necesitamos un relleno de una Ram, 7.5 Ram, luego una Ram, y luego dos Ram. Tenemos espacio dentro de la entrada. A continuación voy a aumentar el tamaño del teléfono, van a ser dos Ram. A continuación, voy a seleccionar la barra de búsqueda I elemento, me refiero a Fmoc Fijemos la posición a absoluta. Entonces necesitamos posición relativa para el elemento padre, que es la barra de búsqueda envolvedora. La posición de dos va a ser 50% Entonces la posición correcta va a ser 0.5 Entonces necesitamos traducir x -50% En realidad necesitamos aquí y en lugar de x así los iconos están centrados verticalmente Vamos a establecer con siete Ram. Y la altura va a ser siete Ram también. A continuación necesitamos color de fondo para ser ED 3758 color rojo Vamos a establecer el radio del borde en 50% para que el elemento sea redondeado. También use flex box con el fin de centrar los elementos usando justificar el centro de contenido y el centro de líneas de artículos. Como puedes ver, los íconos están centrados. Vamos a aumentar el tamaño del teléfono, Hazlo 2.5 fram Después cambia el color, hazlo blanco. También cambia el tipo de coursor, hazlo puntero. Bien, ahora es el momento de escribir algo de Javascript. Vamos a crear la variable, que va a ser el contenedor. Voy a seleccionar este elemento usando el método selector de consultas. Tenemos que especificar aquí el contenedor de nombre de clase. A continuación, necesitamos otra variable que va a ser ese tipo de iconos. Seleccionemos ambos elementos usando el selector de consultas. Todo el método que necesitamos aquí para pasar la barra de búsqueda. A continuación, voy a mirar a través los iconos usando el método de forraje, necesitas aquí el icono de búsqueda pero sin las cotizaciones A continuación, voy a pasar aquí la función de flecha. Voy a agregar el oyente de eventos al icono de búsqueda con un evento de clic con una función de devolución de llamada. Ahora tenemos que agregar una clase al contenedor al click usando el método togal El nombre de la clase va a ser, digamos cambio. Entonces ahora tenemos que usar esta clase en el archivo CSS. En primer lugar, cambiemos El ancho de la parte de búsqueda, va a ser ocho Ram. Después voy a seleccionar la parte de búsqueda con cambio. Vamos a establecer con 245 fram. También use la transición para un efecto más suave. Necesitamos aquí el ancho y la duración, 0.5 segundos. Además, voy a usar la función Si cúbica para hacer que el efecto sea más agradable. Eso está en esos valores dentro de la función. Una vez que haga clic en el icono, entonces la parte de búsqueda se expandirá. Voy a establecer la opacidad a cero para el elemento de entrada. Después voy a seleccionarlo con cambio y establecer opacidad a uno Voy a usar transición con opacidad y con la duración 0.5 segundos Además, necesitamos tiempo de retardo 0.3 segundos. Necesitamos la misma transición para el elemento input por defecto, pero sin el tiempo de retardo. Ahora todo funciona bien. Ahora tenemos que encargarnos de los íconos. Seleccionemos elementos con el selector de gráfico tres. Establezca la opacidad 20. Entonces necesitamos seleccionar los elementos con cambio de clase. Aquí necesitamos la opacidad para ser uno. Además, necesitamos cambiar con el selector de gráfico dos y la opacidad cero Por último, necesitamos una transición para que los efectos sean más suaves. Como puedes ver, por defecto, tenemos aquí el ícono de búsqueda. Una vez que hagamos clic, entonces se transformará en X botón de cierre. Todo funciona a la perfección. Y tenemos aquí una barra de búsqueda genial y moderna. Pasemos al siguiente proyecto. 16. Proyecto 11 - Calculadora: Bien, así que es hora de seguir adelante y comenzar a crear nuestro próximo proyecto. En esta sección, vamos a estar construyendo una aplicación que va a ser una calculadora Javascript. Como puedes ver, la calculadora tiene un aspecto bonito y moderno y también divertido. Si hacemos aquí alguno de los cálculos, entonces obtendremos las respuestas adecuadas. Como puedes ver, la calculadora funciona bien. Tenemos aquí una pantalla seguida de los botones. Dos de ellos son diferentes. El primero, quiero decir el rojo es para borrar. En cuanto al verde, es un botón igual. Bien, así que sentémonos sobre este proyecto. Empecemos. creado una nueva carpeta en el escritorio que está vacía en este momento. Sigamos adelante y ábralo en código VS. Entonces voy a crear los archivos de trabajo para HTML index HTML. Entonces para CSS que va a ser estilo CSS y también necesitamos archivo para Javascript script JS. Entonces voy a abrir el archivo HTML índice y crear la estructura HTML básica. En primer lugar, voy a cambiar el título. Va a ser una calculadora. Entonces voy a vincular el CSS y también los archivos Javas. Tenemos que abrir el script Tac y especificamos el nombre del archivo en el atributo source. Entonces voy a abrir el proyecto al navegador usando servidor en vivo. Además, coloquemos el editor y el navegador uno al lado del otro para que el proceso de trabajo sea más cómodo y sencillo. Voy a visitar el sitio web de Google Phone, porque vamos a utilizar un teléfono de Google a lo largo de este proyecto. Sigamos adelante y busquemos el teléfono llamado No a los Suns. Seleccionemos un par de estilos diferentes, luego copiemos el enlace y lo peguemos en el elemento head. Bien, estamos listos para comenzar a escribir el código. Empecemos con el marcado Html. Voy a crear el contenedor en el que voy a insertar etiqueta, que va a ser calculadora. Aquí necesitamos elementos de entrada que va a ser la pantalla. Vamos a agregar la pantalla de nombre de clase. A continuación, voy a crear patm con tipo patm. Entonces necesitamos aquí BTN. Además, voy a usar atributo llamado data num. Vamos a insertar tu C. Voy a duplicar este patm un par de veces porque vamos a tener muchos botones diferentes Vamos a agregar aquí clase, entonces voy a insertar divide seno. Entonces necesitamos 789. A continuación, necesitamos aquí asterisco. Me refiero al seno de multiplicación 456. Entonces tendremos menos seguido de 12.3 Entonces tendremos más seno El siguiente va a ser cero. Entonces otra vez cero, tendremos puntos y por último signo igual. Además, voy a cambiar el nombre de la clase. Va a ser igual. Bien, entonces tenemos aquí el marcado HTML. Sigamos adelante y comencemos a escribir el CSS. Selecciona cada elemento y establece el margen, y ponerlos a cero. A continuación, voy a establecer el tamaño de la caja a la caja de borde. Necesitamos esquema para ser ninguno. Entonces cambia la familia telefónica por cada elemento, va a ser el teléfono que haya seleccionado no hijos. San Serif. Bien, después de eso, voy a establecer la parte frontal del elemento H mile 62.5% porque vamos a usar m como unidad de medida Y en este caso un m será igual a diez pexels. Vamos a seleccionar contenedor conjunto ancho al 100% Entonces la altura va a ser de 100 ver la altura del bote. También cambia el color de fondo. Va a ser 12224, es de color oscuro Siguiente Voy a usar Flex Box porque vamos a centrar el contenido usando Justify Content Center Y el centro de líneas de pedido. Como puedes ver, el contenido se coloca en el centro de la página. Sigamos adelante y seleccionemos calculadora. Voy a establecer con 240 Ram, entonces la altura va a ser 60 Ram. Cambiemos el color de fondo. Voy a usar 223. Tenemos la calculadora, vamos a establecer algunos espacios en el relleno de tres Ram, dos Ram. Entonces necesitamos radio fronterizo 32 Ram. También necesitamos algún efecto de sombra. Vamos a establecer box shadow a 01 Ram, luego tres Ram, y el color va a ser color RGBA con opacidad 0.4 Tenemos aquí bonito y fresco efecto de sombra Después de eso, voy a seleccionar Pantalla, que es el elemento de entrada. Vamos a establecer el ancho a 34 Ram. La altura va a ser ocho Ram. Entonces voy a cambiar el color de fondo. Vamos a usar 888d, entonces voy a usar margen en la parte inferior Vamos a establecerlo en 1.5 Ram. A continuación necesitamos radio fronterizo, va a ser uno Ram. Se deshace del borde predeterminado, vamos a establecerlo en ninguno. Voy a deshabilitar los eventos de puntero, pongámoslo en ninguno. Y también voy a alinear el texto del lado derecho. Ya no podemos enfocarnos en el elemento input. Vamos a establecer el tamaño del teléfono en dos Ram. También aumenta el ritmo entre las letras. Hagamos uno Ram, cambiemos el color. Va a ser blanco. Entonces necesitamos poner, digamos 22 Ram. Después de eso, voy a seleccionar BTN, seguido del seno igual Vamos a establecer con 27 Ram. La altura va a ser siete Ram también. Aquí tenemos los botones. Usemos margen, conviértalo en uno Ram. Entonces me voy a deshacer de la frontera por defecto. Voy a cambiar el fondo. Vamos a usar gradiente lineal. El sentido va a ser de 180 grados. cuanto al primer color, voy a usar 222. Entonces el segundo color va a ser 333. Como puede ver, se cambia el color. Vamos a usar algunos efectos de sombra que necesitamos aquí. Recuadro cero -0.8 Ram, el ocho Ram. Y el color va a ser color negro con opacidad 0.25 El siguiente valor va a ser 000.2 m. aquí tenemos el resultado. aquí tenemos el resultado El color va a ser negro con opacidad 0.75 Entonces necesitamos otro valor Un m Ram, 2.5 Ram, y el color RGBA con opacidad 0.4 Siguiente Voy a establecer el radio de borde a una También cambia el coursor, hazlo puntero. Lo siguiente que voy a hacer es usar flex box para la calculadora. Vamos a establecer fp2p. También, necesitamos justificar el centro de contenido. Y las líneas de pedido al centro, los patrones están alineados. Muy bien. A continuación seleccionemos claro, así es ancho 225 Ram. En realidad, con el layout que terminamos, los patrones están perfectamente alineados. A continuación, voy a seleccionar BTN con antes do elemento. También, necesitamos iguales con antes hacer elementos. Vamos a establecer content para atribuir data num, que usamos en el archivo HTML. Aquí tenemos los números y las señales en los botones. Fijemos la posición a absoluta. Necesitamos posición relativa para el elemento padre. Voy a establecer la posición superior a 0.3 Ram. La posición izquierda va a ser 0.4 Ram. También necesitamos la posición inferior 0.7 Ram. Y la posición correcta va a ser 1.2 Ram. A continuación voy a cambiar el color, va a ser blanco. Vamos a establecer, Mostrar las banderas usa Justify Content Center y Eline Items Center así como los números y los signos están centrados. A continuación, voy a aumentar el tamaño del teléfono. Va a ser 2.2 Ram. Cambiar el fondo, voy a usar, de nuevo, gradientes lineales El sentido va a ser 90 grados y el primer color va a ser 2d2d2 D. Entonces el siguiente será 40, 40, 40 Ahora los botones se ven más bonitos. Usemos sombra de caja que necesitamos aquí. -0.5 Ram, luego -0.5 Ram, 1.5 Ram. Y el color RGBA color negro con Opacidad 0.1 Entonces necesitamos agregar aquí otro valor, uno Ram, 0.5 Ram, luego uno Ram, y el RGB con la Opacidad 0.15 Entonces necesitamos borde en el lado izquierdo, va a ser 0.1 El color va a ser 0004. Entonces cambiemos aquí. Necesitamos fondo fronterizo. Borde superior, Ahora necesitamos usar radio de borde, va a ser uno Ram. Los botones se ven bastante bien. Agreguemos aquí antecedentes a, va a ser 62929 También tenemos que seleccionar claro con antes pseudo elemento y tenemos que cambiar el fondo Va a ser del mismo color. Tenemos que colocar el código abajo. El código se sobrescribirá. Tenemos aquí bonito fondo claro. Agreguemos esos bordes al elemento y cambiemos el color. Va a ser F cuatro. Necesitamos lo mismo para el botón igual. Cambiemos el fondo. Usa el color 37925 como necesitamos aquí. Igual con antes elemento cambiar el fondo. Usa este código aquí. También, necesitamos esas fronteras también. Ahora, todo a la perfección y con el estilo, ya terminamos. Lo único que hay que hacer es hacer clic efecto usando PT y activo. Y también cuando es igual activo. Vamos a establecer filtro a brillo con valor 1.5 Tenemos aquí bonito efecto click. Bien, ahora es el momento de hacer que la calculadora funcione con Javascript. Voy a crear una función. Vamos a llamarlo calculado aquí, una función de flecha. Necesitamos crear un par de variables diferentes. El primero va a ser pantalla. Vamos a seleccionarlo usando el método selector de consultas. Necesitamos aquí nombre de clase, pantalla. Entonces el siguiente elemento va a ser botones. Tenemos que seleccionarlos usando query select all método. Vamos aquí PTN. Por último, necesitamos aquí iguales. Bien, después de eso, voy a mirar a través los botones usando el método de forraje A continuación, necesitamos agregar un oyente de eventos al botón usando click event Y también tenemos que pasar aquí una función de devolución de llamada. Vamos a añadir aquí parámetro. Entonces necesitamos crear un valor variable que será igual al conjunto de datos objetivo. Estamos agarrando aquí los números que pasamos en el atributo data num Vamos a comprobarlo en la consola. Voy a ejecutar la función. Si inspecciono la página y separemos esas ventanas, entonces cambie a la pestaña de la consola. Si hago clic en los números entonces obtendremos m string map object en el que tendremos los números. Si agrego aquí la propiedad num, entonces obtendremos números sin ningún objeto en la consola. Bien, vamos a deshacernos de esta línea de código. A continuación, voy a definir el valor de pantalla con signo más igual. Será igual a valor. Los números se agregan en la pantalla, quiero decir que los valores se agregan en la pantalla. Después de eso, tenemos que cuidar el signo igual. Agreguemos el oyente de eventos al signo igual con el evento click Y también necesitamos la función de devolución de llamada. Vamos a crear respuesta variable. Y voy a usar construido en función mal, que evalúa la expresión A continuación, necesitamos pantalla que ese valor sea igual para responder. Si hago aquí el cálculo que obtendrá la respuesta adecuada. Ahora tenemos que encargarnos de la función clara. Agreguemos incluso oyente a la función clear con el evento click Una vez que hacemos clic en la función clear, necesitamos hacer que la pantalla esté vacía. Necesitamos agregar aquí cadena vacía. Ahora todo funciona perfectamente. La calculadora funciona bien. Terminamos con este proyecto. Ojalá fuera interesante y aprendiste algunas cosas nuevas. Sigamos adelante. 17. Project 12 - Encabezado de sitio web con menú de navegación: Bien, así que es hora de seguir adelante y comenzar a crear nuestro próximo proyecto. En esta sección, vamos a estar construyendo un encabezado de sitio web con un menú de hamburguesas El sitio web va a ser sobre algo como comida o recetas. Consta de un par de partes diferentes. Tenemos aquí un icono de menú. Si hago clic en él, entonces los elementos de navegación se mostrarán muy bien, con algunos efectos. Si coloco el cursor sobre los artículos, entonces obtendremos este bonito efecto hover Si vuelvo a hacer clic en el icono del menú, entonces los elementos de navegación se cerrarán. Además de eso, tenemos aquí un par de elementos textuales diferentes con una imagen que se coloca muy bien También en el lado derecho, puedes ver aquí la imagen de la comida, lo que crea un letrero muy agradable y genial. Bien, eso es todo sobre este proyecto. Sigamos adelante y comencemos. He creado una nueva carpeta en el escritorio en la que tenemos una carpeta de imágenes. Sigamos adelante y abramos esta carpeta en código VS. Luego crea nuestros archivos de trabajo para HTML, para CSS, cuatro Ylscript también Después voy a abrir index, cargar el archivo HTML y crear la estructura pac HTML. Cambiemos el título. Voy a entrar aquí a la página de aterrizaje. Entonces sigamos adelante y vinculemos los archivos CSS y al script que necesitamos aquí con estilo CSS Entonces vamos a abrir la etiqueta script y especificar el nombre del archivo en el atributo source. Vamos a abrir el proyecto al navegador usando servidor en vivo. Y luego voy a colocar el editor y el navegador uno al lado del otro, así. Sigamos adelante y empecemos a escribir la marca H mal. Necesitamos etiqueta profunda que va a ser el contenedor. Entonces voy a insertar aquí otra profunda. Va a estar aterrizando. Entonces dentro del rellano, voy a abrir la navegación, en la que tendremos dos partes. El primero va a ser el menú. Voy a insertar aquí, Líneas, vamos a tener tres líneas distintas. Necesitamos dos clases, línea sobre línea uno. Además, tenemos que cambiar aquí los números. Además de las líneas, aquí tendremos el elemento Span. Va a ser el menú de texto. Eso es todo, sobre el icono del menú. A continuación, necesitamos crear elementos de navegación. Voy a insertar elemento link con la clase. No hay elemento dentro del elemento de enlace. Bueno, etiqueta span con el nombre del artículo. Va a ser en casa. Voy a insertar una etiqueta de imagen. Seleccionemos Imagen en la carpeta de imágenes. Va a ser la imagen tres. Después duplique este elemento cinco veces. Cambia los ítems, el segundo va a ser sobre. También necesitamos cambiar los nombres de las imágenes. A continuación tendremos recetas como imagen cinco. Entonces tendremos entrega imagen seis. Y finalmente tendremos contacto. En cuanto a la imagen, va a ser la imagen siete. Bien, entonces aquí tenemos las imágenes y los elementos de navegación. A continuación voy a crear el banner. Dentro de la pancarta, tendremos una imagen. Seleccionemos la imagen dos de la carpeta de imágenes. Además, necesitamos su nombre de clase. Va a ser imagen a la izquierda. Entonces voy a abrir encabezado. Incluirá H, un elemento de encabezamiento. Va a ser el mejor pie de la historia. Entonces tendremos recetas de párrafo para alimentos saludables. Vamos a duplicarlo dos veces. El segundo párrafo va a ser el mismo día de entrega que para el tercer párrafo. Tendremos aquí productos frescos y deliciosos. Bien, después de eso, voy a encargarme del lado derecho. Necesitamos, vamos a seleccionar la imagen uno de la carpeta de imagen que necesitamos aquí, nombre de clase, imagen. ¿Correcto? También necesitamos aquí que va a ser el plato. Bien. Creo que todo está creado y con el marcado HTM, ya terminamos Sigamos adelante y nos ocupemos del CSS. Voy a visitar el sitio web de Google Phones, porque vamos a utilizar los teléfonos de Google a lo largo de este proyecto. Sigamos adelante y busquemos el teléfono llamado Tilt. Ahora vamos a seleccionar este estilo. Además, necesitamos otro teléfono llamado Ctilium Web. Seleccionemos un par de estilos diferentes, luego copiemos el enlace y lo peguemos en los elementos de cabeza. A continuación, voy a crear algunos estilos predeterminados. Voy a seleccionar cada elemento y luego establecer margen y ponerlos a cero a ambos. Necesitamos que el tamaño de la caja sea una caja de borde. Además, me voy a deshacer de la decoración de texto por defecto. Vamos a configurarlo en non, luego configuremos familia de teléfonos para inclinar cursiva Además de eso, voy a establecer el tamaño del teléfono del elemento H tim 62.5% porque vamos a usar el Ram como unidad de medida En este caso, una Ram será igual a diez píxeles. A continuación, voy a seleccionar ningún artículo. Voy a esconderlos por un tiempo, usando display non. Entonces voy a seleccionar banner, y voy a ocultarlo también. Seleccionemos Contenedor, Establezca su ancho 200% entonces la altura va a ser de 100 macetas de altura Voy a cambiar el color del backe. Usemos el color amarillo que va a ser FD 861. Aquí tenemos el color amarillo. Después voy a seleccionar Préstamos y definir su ancho y alto. El ancho va a ser 90% En cuanto a la altura, voy a establecer 280, 5% También cambia el color de fondo. Voy a usar aquí color FFT, 868, f863. Cambiemos el radio del borde, que sea dos Ram. También necesitamos algún efecto de sombra. Vamos a poner pop shadow 201 Ram, seis Ram. Y el RGBA color negro con opacidad 0.3 Aquí tenemos el aterrizaje Voy a colocarlo en el centro usando libro de lino. Necesitamos justificar el centro de contenido y un centro de líneas de artículos para el elemento padre que es un contenedor. Ahora el elemento se coloca perfectamente en el centro. Siguiente voy a seleccionar la navegación que es definir su posición va a ser absoluta posición dominante relativa para el elemento padre. Pongamos dos posiciones a cero y la posición izquierda a cero también. Entonces necesitamos ancho para ser cinco Ram. En cuanto a la altura, voy a, entonces voy a cambiar el color de fondo. Va a ser blanco. También, voy a establecer las alturas al 100% Entonces necesitamos para el radio 2m00 y dos m, necesitamos esquinas redondeadas en el lado izquierdo del elemento A continuación, sigamos adelante y seleccionemos Icono de menú. Voy a poner su ancho en cuatro Ram, entonces la altura va a ser 16 Ram. Vamos a establecer el color de fondo en CC por un tiempo. Aquí tenemos el icono del menú. Fijemos la posición a absoluta. Entonces la posición dos va a ser 50% la posición va a ser 50% Necesitamos centrar perfectamente el elemento y para eso necesitamos transformar. Traducir. -50% otra vez -50% El elemento está centrado, usemos libros flex Voy a establecer dirección flex a columna. Entonces cuando justifique el espacio de contenido entre y el centro de las líneas de artículos. También voy a poner el cursor a puntero. Todo bien. Después de eso voy a encargarme de las líneas. Vamos a establecer el ancho a 80% entonces la altura va a ser dos Ram. También cambia el color de fondo, color rojo por un tiempo. A continuación voy a seleccionar línea y establecer su ancho al 100% Entonces la altura va a ser 0.3 Ram. También cambia el color de fondo. Utilice 555. Entonces necesitamos radio fronterizo, va a ser 0.5 Ram. Vamos a deshacernos del color rojo desde aquí. Aquí tenemos las líneas. Ahora necesitamos crear algún espacio entre las líneas. Para eso, voy a usar display Flex. Dirección flex va a ser columna y necesitamos justificar contenido con espacio de valor entre aquí tenemos las líneas separadas. Además, me voy a deshacer de este color de fondo desde aquí. Ahora tenemos que encargarnos de los elementos span. Me refiero al texto del menú que establece la orientación del texto en vertical. Tenemos que colocar las letras verticalmente. Entonces necesitamos el modo de escritura Vertical L, R. Aumentar el tamaño del teléfono. Va a ser 2.5 Ram. Aquí tenemos el texto colocado verticalmente. Entonces transformemos el texto en cambio en mayúsculas. El color va a ser 555. El icono del menú se ve bastante bien. Vamos a deshacernos de él se está jugando desde aquí. Ajusta el ancho a 25 Ram. Necesitamos altura para ser 100% cambiar la posición, va a ser absoluta. En realidad necesitamos disminuir el tamaño de la imagen porque son demasiado grandes. Ahora mismo vamos a establecer con 211 Ram. La altura va a ser 11. También necesitamos cubierta de pies de objeto. Ahora las imágenes se hacen más pequeñas y el proceso de trabajo será más conveniente. Pongamos la posición izquierda a cinco Ram. Entonces necesitamos display flex. La dirección de flexión va a ser columna. Entonces voy a seleccionar ahora artículo y establecer lino a uno. Ahora cada artículo tiene un ancho par. Cambiemos el color de fondo. Va a ser 888. Entonces me pongo posición de la imagen en absoluto y voy a establecer dos posiciones a 50% Entonces necesitamos transformar traducir Y con -50% para centrar la imagen horizontalmente, verticalmente A continuación necesitamos la posición correcta para ser menos tres Ram. Además, voy a establecer la posición relativa para el elemento op, que es el elemento padre. Las imágenes se colocan muy bien. Necesitamos ocultar las partes de las imágenes usando desbordamiento oculto. Ahora se ven bastante bonitas y geniales. Bien, después de eso, voy a encargarme de los elementos del texto. Este elemento pan, vamos a establecer la posición dos absolutas. Entonces necesitamos posicionar para ser 50% También necesitamos centrarlos particularmente usando transform translate y -50% entonces la posición izquierda va a ser tres Ram Vamos a configurar la familia de teléfonos a till Web Serif. A continuación voy a aumentar el tamaño del teléfono. Va a ser 2.5% dos puntos, luego aumentar el tamaño del teléfono, va a ser 2.5 Fram también crea algo de espacio entre las letras, luego cambia el color Va a ser 33. Entonces como puedes ver, la espinela debe quedar bastante bien. Siguiente Voy a seleccionar artículo nova con hover. Voy a cambiar el color de fondo en hot 26. También use transición para un efecto más suave. Aquí tenemos el efecto wer. A continuación, voy a usar Javascript para que el menú funcione. Vamos a crear la variable llamada icono de menú y seleccionar este elemento utilizando el método selector de consultas. Voy a especificar aquí el nombre de la clase va a ser icono de menú. Además de eso, voy a crear otras dos variables. El segundo va a ser líneas. Seleccionemos líneas. Entonces necesitamos contenedor. Especificemos aquí el nombre. Bien, ahora tenemos que agregar el oyente de eventos al icono del menú con un evento click Agreguemos aquí la función de devolución de llamada al hacer clic. Tenemos que agregar nueva clase al contenedor usando el método togal El nombre de la clase va a ser, digamos cambio. Ahora tenemos que usar este nombre de clase en el archivo Css para crear nuevas reglas. Al hacer clic, necesitamos cambio seguido de las líneas al hacer clic. Voy a rotar el icono. Usando la función rotar C, el valor va a ser de 90 grados. Vamos a usar la transición. Si hago clic, entonces el icono del menú girará. Siguiente Estoy altura elemento span y la imagen usando opacidad cero y visibilidad oculta. Además, no soy un ítem usando la función scale x. Vamos a agregarlo a cero, entonces voy a usar cambio con ítem. Una vez que hacemos clic en el icono, tenemos que hacer la escala a uno, nuevo a su valor predeterminado. Agreguemos aquí transición con transferencia 0.5 segundos. También voy a establecer el origen de la transformación a la izquierda. Vamos, una vez que hagamos clic entonces se mostrarán los artículos. Si nos deshacemos del origen transformado, entonces verás los resultados que en realidad no necesitamos. A continuación, voy a seleccionar span Elements con cambio de clase. Vamos a establecer la opacidad a uno y la visibilidad a visible. Además, voy a usar la transición con poco tiempo de retraso. Necesitamos lo mismo para la imagen. Cambiemos el selector. Necesitamos imagen aquí. Aumentemos el tiempo de retardo, que sea 0.7 segundos. Ahora, una vez que haga clic, entonces obtendremos este bonito y genial efecto. Artículos, o mostrando al hacer clic, podemos hacer que este efecto sea aún mejor. Seleccionemos el artículo. Estoy en el primer elemento usando selector Chad, seguido de hilado. Vamos a agarrar la transición. Entonces voy a duplicar este elemento cinco veces, cambiar los selectores del gráfico Mph, y también aumentar ligeramente los tiempos de retraso Ahora si hago clic, entonces el tiempo suficiente de artículos de los paneles aparecerá en orden amablemente También necesitamos lo mismo para las imágenes. Voy a cambiar los selectores en vez de span. Voy a insertar Imagen. Aumentemos ligeramente el tiempo de retraso porque por defecto el tiempo de retardo es diferente para la imagen para este panel. Ahora vamos a comprobarlo. Como pueden ver tenemos aquí un resultado genial y agradable. Vamos a deshacernos de la transición de aquí. Ahora necesitamos lo similar para el artículo nova en sí. Seleccionemos el primer elemento de nova usando chart selector corp, la propiedad de transición, luego dupliquemos este código cinco veces, cambiemos los números de los selectores secundarios, y también necesitamos agregar tiempo de retardo para cada elemento nova con una cantidad de tiempo diferente Cambia el tiempo de demora para cada artículo. Ahora si hago clic, entonces vamos a conseguir esto agradable y genial, perfecto en realidad, Con la navegación, ya terminamos. Sigamos adelante y nos ocupemos del resto de las partes del proyecto. Seleccionemos la imagen a la izquierda, ajustemos el ancho a T m, luego la posición va a ser absoluta. Aquí tenemos las imágenes. Voy a establecer posición para la imagen de derecha a absoluta. Además, voy a establecer la posición correcta -10% Entonces sigamos adelante y seleccionemos encabezado Vamos a establecer display a none para ocultar el encabezado por un tiempo. adelante y posicionemos imagen en el lado izquierdo, la posición va a ser -15% En cuanto a la posición izquierda, voy a ponerla en -10% Entonces necesitamos transformar rotar, el valor va a ser 70 grados Entonces voy a establecer Opacidad 2.5 La imagen está muy bien posicionada Necesitamos desbordamiento oculto para el aterrizaje con el fin de ocultar la parte de la imagen. Además, voy a agregar en esta propiedad a la navegación porque terminó detrás de la imagen. Bien, a continuación voy a encargarme del plato. Voy a establecer su ancho 70% y la altura va a ser 100% Entonces voy a cambiar el color de fondo, va a ser blanco. Voy a poner posición a absoluta. Entonces la posición correcta va a ser -20% Aquí tenemos la placa que en este momento no se parece a ninguna placa Vamos a establecer con 50% para la imagen. Y también necesitamos que el índice sea 100, luego opacidad, va a ser 0.9 Aquí tenemos la imagen Vamos a establecer el radio de borde para la placa en 50% luego 00.50% necesitamos esquinas redondeadas hacia el lado derecho Vamos a establecer transformar para rotar la función Z. El valor va a ser de -30 grados. Ahora tenemos aquí placa que se ve bastante bien. Vamos a encargarnos del encabezado. Voy a poner posición a absoluta, entonces a posición va a ser 20% la posición izquierda va a ser 10% Aquí tenemos la cabecera. Personalicemos cada uno de los elementos. Voy a seleccionar encabezado. Cada uno. Elemento de encabezado, vamos a establecer el tamaño del teléfono a diez Ram. El peso del teléfono va a ser de 300. A continuación voy a seleccionar párrafos. En el elemento header, el tamaño del teléfono va a ser 1.8 Ram. Entonces necesitamos margen. Va a ser dos Ram y cero. También, voy a establecer transformación de texto para que se ponga en mayúscula. A continuación, voy a seleccionar encabezado, seguido del cuatro elemento. Vamos a configurar el contenido en vacío. Entonces necesitamos posición para ser absolutos. Voy a establecer a posición a 50% Entonces necesitamos centrar elemento verticalmente usando transform translate Y -50% esa posición va a ser una Ram Entonces necesitamos ancho para ser tres Ram. En cuanto a la altura, voy a ponerla 2.3 Ram. Después cambiar el color de fondo, va a ser 333. Aquí tenemos los elementos. Vamos a establecer la posición en relativo para el elemento padre. Ahora con el fin de solucionar el pequeño problema, necesitamos relleno dejado cinco ram. Ahora el encabezado se ve bastante bien y tenemos que hacer que el proyecto receptivo a diferentes tamaños de pantalla. Está creado para un tamaño de pantalla extra grande. Si reviso aquí la versión final del proyecto para diferentes tamaños de pantalla, entonces descubrirás que el proyecto responde. Como puedes ver, se ve bastante bien en tamaños de pantalla más pequeños. Ahora si lo reviso para ipod o para teléfonos, encontrarás que se ve bastante bien y receptivo. Bien, voy a hacer que el proyecto sea receptivo usando media queries CSS. Vamos a crearlo y especificar aquí el ancho máximo como 1,600 píxeles Voy a seleccionar encabezado H, un elemento de encabezado. Vamos a establecer el tamaño de fuente dos m. entonces voy a comprobar el proyecto en diferente punto de interrupción, se ve bien Entonces voy a comprobarlo en un tamaño de pantalla más pequeño. Tenemos que hacer aquí algunos cambios. Vamos a crear una nueva consulta de medios CSS. Voy a establecer el ancho máximo en 1,208 píxeles. Seleccionemos elemento Html y disminuyamos el tamaño del teléfono 50% hará que todos los elementos sean más pequeños. A continuación, voy a seleccionar encabezado H uno. Disminuyamos el tamaño del teléfono, que sea siete. En realidad, todo se ve bastante bien. Vamos a configurar la pantalla en el ipad y crear CSS media query. Establezca el ancho del mux en 820 píxeles. Voy a seleccionar imagen izquierda. Vamos a poner la posición a -10% Entonces voy a seleccionar placa y cambiar su ancho Va a ser 90% entonces la altura va a ser 50% También cambia la posición inferior, va a ser cero. Entonces voy a poner la posición correcta a menos dos Ram. Voy a mover la imagen abajo. Seleccionemos la imagen a la derecha, ajustemos su posición de poner a 15 Ram. Ahora tenemos aquí marzo, mejor resultado. A continuación voy a seleccionar encabezado. Establezca su posición izquierda en 50% Además, necesitamos transformar traducir x para centrar el Olmo horizontalmente El encabezado se coloca en el centro. En realidad, con este punto de ruptura, ya terminamos. Vamos a crear una nueva consulta de medios CSS para un tamaño de pantalla ligeramente más pequeño. El ancho máximo va a ser de 768 píxeles. Voy a seleccionar encabezado uno y establecer su ancho en 50 Ram. Además, seleccionemos la imagen a la derecha y fijemos el peso en 45% Entonces la posición inferior va a ser 12 Ram. Ahora creo que todo se ve bastante bien. Y cambiemos el tamaño de la pantalla. Entonces voy a crear una nueva consulta de medios CS. El ancho máximo va a ser de 480 vehículos. Voy a seleccionar imagen Izquierda y establecer su ancho en 60 Ram. A continuación, voy a seleccionar encabezado. Establecer la posición izquierda en 65% Además, voy a seleccionar el encabezado H uno y establecer el tamaño del teléfono a seis Ram. Tenemos que hacer un encabezado más pequeño. A continuación, voy a seleccionar la imagen a la derecha. Pongamos el ancho al 50% Entonces la posición inferior va a ser diez Ram. Entonces tenemos que encargarnos del plato. Pongamos la altura a 40% En cuanto a la posición correcta, va a ser -15 Ram. Ahora, se ve bastante bien. Necesitamos crear el último punto de quiebre. Vamos a crear una consulta de medios CS y establecer x con 2,400.14 píxeles. Voy a seleccionar elemento Html. Vamos a establecer el tamaño de fuente 240, 2% Todo se ve bastante bien. Y con el proyecto que terminamos, es receptivo. Ojalá fuera interesante y lo disfrutaste. Sigamos adelante y nos encarguemos del próximo proyecto. 18. Proyecto 13 - Tarjeta de producto: Bien, así que en su lugar, siga adelante y comience a crear nuestro próximo proyecto. En esta sección, vamos a estar construyendo esta tarjeta de producto genial y moderna. El proyecto se creará en base a HTML y CSS. Sigamos adelante y lo describamos rápidamente. Como puede ver, la tarjeta se coloca en el centro de la página. Detrás de la tarjeta, tenemos este bonito y genial fondo. La tarjeta es sobre algo como Raincde. En el centro de la tarjeta, tenemos aquí un producto que se mueve hacia abajo, se puede ver esta sombra agradable y fresca en el lado izquierdo de la tarjeta Tenemos dos rubros diferentes para el lado derecho. Puedes ver aquí los detalles de la tarjeta. Se puede seleccionar el color de aquí o talla también la longitud del pecho y así sucesivamente. Abajo tenemos un fondo que al hacer clic se mueve, crea un bonito efecto de clic. Bien, eso es todo sobre este proyecto. Sigamos adelante y empecemos a crearlo. He creado una nueva carpeta en el escritorio en la que tenemos una carpeta para imágenes. Sigamos adelante y abramos la carpeta en código VS. Entonces voy a crear nuestros archivos de trabajo para HTML y para CSS, vamos a tener estos dos archivos diferentes. Vamos a abrir el archivo HTML indexado y crear el documento HTML básico Entonces voy a cambiar el título. Va a ser tarjeta de producto. Entonces voy a vincular el archivo CSS. Después de eso, voy a abrir el proyecto al navegador usando servidor en vivo. Coloquemos el editor y el navegador uno al lado del otro. Como es habitual a lo largo del proyecto, voy a usar los teléfonos de Google. Así que sigamos adelante y visitemos el sitio web y busquemos el teléfono llamado Josephine Sans Voy a agarrar diferentes estilos. Además de eso, voy a buscar otro teléfono llamado Tilt Warp. Seleccionemos el estilo, luego copiemos el enlace y lo peguemos en el elemento head. Estamos listos para comenzar a crear el proyecto. Vamos a empezar con el marcado HD mal. Vamos a abrir etiqueta, que va a ser el contenedor dentro del contenedor voy a crear tarjeta. Entonces vamos a tener aquí, quiero decir, el lado izquierdo y también vamos a tener el lado derecho, el lado izquierdo. Para insertar H tres elementos de encabezado con el texto en código aquí, segundo encabezado que va a ser H uno con el texto oferta de venta de primavera insertar aquí etiqueta div que va a ser tarjeta imagen izquierda. Seleccionemos Imagen en la carpeta de imágenes. Va a ser código. Bien, eso es todo, sobre el lado izquierdo. Sigamos adelante y creamos el lado derecho. Voy a abrir etiqueta, que va a ser info del producto. Vamos a abrir otro dip, que va a ser color. Necesitamos color de párrafo seguido del desarrollo, que va a ser colores. Vamos a tener aquí panelements, me refiero a cuatro elementos span A continuación voy a crear el tamaño que necesitamos aquí, párrafo con los lazos de texto. Entonces voy a insertar tu etiqueta profunda con los tamaños de clase en que tendremos elementos, cuatro elementos span con diferentes tamaños como L x L y así. Bien, después de las tallas voy a crear detalles en los que vamos a tener, voy a crear párrafo con el texto largo de la manga. Entonces tendremos aquí otro párrafo con el texto 66 M. Entonces también tendremos contador de manga. Aquí tendremos contador de clases. Siguiente Voy a crear cofre en su lugar párrafo con el cofre de texto. Entonces tendremos aquí otro párrafo con el texto 102 M Santi metros Entonces tendremos contador de pecho. Necesitamos de nuevo otro contador de clase. Bien, finalmente voy a insitu fondo con la tarjeta de clase BTN, pongamos el fondo tipo dos y voy a instituir tu texto Proceder. Bien. Se crea el marcado HD mal y ahora podemos comenzar a escribir el CSS En primer lugar, voy a crear algunos estilos predeterminados. Seleccionemos cada elemento usando un asterisco. Establece el margen y el relleno a cero. Entonces voy a establecer el tamaño de la caja a la caja de borde. También necesitamos una familia telefónica para ser Josephine Sans Santerif A continuación, voy a establecer el tamaño del teléfono del elemento atuml 62.5% porque vamos a usar M como unidad de medida En este caso, una M será igual a diez píxeles. Después de eso, voy a encargarme de la imagen de la tarjeta izquierda porque es demasiado grande. Ahora mismo, vamos a establecer con marco 235. A continuación, voy a seleccionar la imagen en sí y establecer ancho al 100% No, la imagen se hizo más pequeña y podemos comenzar a personalizar el contenedor al 100% Entonces la altura va a ser de 100 viewpot de altura Voy a poner el fondo. Vamos a usar gradiente lineal. Voy a usar el primer color, blanco con menor opacidad 0.2 En cuanto al segundo color, va a ser blanco de nuevo con la opacidad 0.2 A continuación, voy a establecer la imagen como fondo, pero seleccionada de la carpeta imagenes Entonces encuentran que la posición va a ser centro. Además, no necesitamos repetir. A continuación voy a establecer el tamaño del fondo para cubrir. Tenemos aquí esta imagen de fondo agradable y genial. Voy a usar Flex book para centrar la tarjeta usando Justify Content Center y un centro de líneas de artículos. La tarjeta se coloca en el centro. Ahora es el momento de personalizar la tarjeta en sí. Vamos a seleccionarlo y establecerlo en 100 Ram. Entonces la altura va a ser 65 Ram. Voy a poner la sombra a 01 Ram, seis Ram. Y el color va a ser negro con opacidad 0.5 Tenemos aquí tarjeta con una sombra Usemos libros de lino. Estoy haciendo las esquinas de la tarjeta, redondear usando radio de borde. Entonces voy a poner el curser a puntero. Bien, sigamos adelante y cuidemos el lado izquierdo. Voy a establecer su ancho a 65% entonces la altura va a ser 100% Además, voy a cambiar el color de fondo. Vamos a usar RGBA 120-31-2106 la opacidad 0.7 Entonces establecí el radio del borde Necesitamos esquinas redondeadas en el lado izquierdo. Aquí tenemos los antecedentes. Después de eso voy a encargarme del lado derecho. Vamos a establecer con 230, 5% entonces la altura va a ser 100% También cambia el color de fondo. Voy a usar aquí RGBA 903-80-6606, y la opacidad 0.7 todas las celdas en el radio de borde a 01m1 Entonces los lados izquierdo y derecho están separados con los fondos. A continuación voy a establecer la posición del envoltorio de imagen en absoluto. Necesitamos posición relativa para el elemento padre que queda. Vamos a establecer la posición en 12% En cuanto a la posición correcta, va a ser -8% Como puedes ver, la imagen se coloca muy bien Siguiente estoy. Establece el filtro de caída de pack polar con el valor 0.5 Ram para el lado derecho, así como puedes ver el fondo es polar. Ahora vamos a mostrar la imagen usando la propiedad de índice Z con el valor 100. En realidad voy a seleccionar tarjeta izquierda imagen con el pseudo elemento after Vamos a configurar el contenido en vacío. Entonces la posición va a ser absoluta. Entonces voy a establecer la posición inferior, dos menos siete Ram. La posición izquierda va a ser 50% Y necesitamos enviar al elemento usando transform translate x -50% En realidad estamos creando la sombra abajo Vamos a establecer con 232 Ram. Entonces la altura va a ser diez Ram. Cambiar el color de fondo. Voy a usar RGB, un color negro con opacidad 0.4 También usa radio de borde Vamos a ponerlo en diez Ram. Como puedes ver, ten aquí los elementos. Usemos filtro con una función de desenfoque. Nosotros evaluaremos 3.5 Ram. Como pueden ver, tenemos aquí una sombra. En realidad voy a crear el efecto hover en hover. Voy a mover la imagen hacia arriba. Vamos a establecer la posición en 8% y también usar la transición para un efecto más suave. A continuación, tenemos que cambiar después. Entonces el elemento estoy en la sombra en hover. Vamos a usar la posición inferior, que sea menos diez Ram. Y también usar filtro. Voy a aumentar el valor de la función de desenfoque y luego usar la transición para un efecto más suave. Vamos a revisar. Ahora como puedes ver tenemos aquí un efecto hover realmente agradable y genial Bien, ahora sigamos adelante y personalicemos los encabezamientos. Voy a comenzar con el elemento de encabezado H tres. Vamos a poner posición a absoluta entonces la posición superior va a ser 15% En cuanto a la posición izquierda, voy a establecer en 10% entonces voy a aumentar. Cambiemos la familia telefónica. Va a ser para Tarp Cursive. Incrementa el tamaño del teléfono, van a ser tres. Ram también crea algo de espacio entre las letras. Cambiar de color. Es 31227. Entonces tenemos aquí el primer elemento de encabezamiento. Duplicemos este código, cambiemos el selector. Necesitamos H un elemento de encabezado. Cambiar las dos posiciones va a ser 22% Entonces voy a aumentar el tamaño del teléfono. Digamos 4.5% 4.5 Ram. También usa transformación de texto, haz la mayúscula, entonces necesitamos que la altura de línea sea una. Y también necesitamos cambiar el color. Va a usar nueve, B, D, siete. Tenemos aquí el segundo rubro. Vamos a establecer con 22 Ram. Ahora se ve mucho mejor con el lado izquierdo. Ya terminamos. Sigamos adelante y cuidemos el lado derecho. Voy a usar libros Flex. Usemos Justificar Centro de Contenido y Alinear Centro de Elementos. Como puedes ver, el contenido se coloca en el centro del lado derecho. A continuación, voy a seleccionar Product Info. Vamos a establecer el ancho a 24 Ram. Después voy a seleccionar Product Info. Siga el párrafo. Vamos a establecer el tamaño de fuente en 1.2 Ram. Entonces la fuente ocho va a ser 300. Cambiar la propiedad de transformación de texto, hacer la mayúscula. Entonces voy a establecer el color a RGBA, 255-25-5255 me refiero al color blanco con opacidad 0.7 Los opacidad Sigamos adelante y seleccionemos colores. Establecer flex de pantalla. Entonces necesitamos margen. Va a ser dos Ram y cero, luego cuatro Ram y otra vez cero. Después de eso, voy a seleccionar color span. Contamos con cuatro elementos span para diferentes colores. Pongamos el ancho a seis Ram, entonces la altura va a ser 0.5 Ram. Cambia el color de fondo para poder ver los elementos span por un tiempo. Vamos a deshacernos de él ahora. Voy a seleccionar el primer elemento spin usando el selector secundario enésimo Cambiemos el color de fondo. Voy a usar CDD de color C seven. Aquí tenemos el primer color. Duplicemos este código tres veces. Tenemos en general cuatro elementos de giro. Cambiemos los selectores secundarios enésimo. Entonces voy a cambiar los colores de fondo. El segundo va a ser 986, luego vamos a 55542. Y también necesitamos aquí 383123. Tenemos aquí cuatro colores diferentes. Bien, a continuación voy a encargarme de las tallas. Pongamos margen a dos, luego 04.0 Siguiente Voy a usar libros flex Vamos a establecer justificar el contenido dos. Espacio entre. Entonces como puedes ver, tenemos espacio entre los tamaños muy bien. Vamos a seleccionar elemento span. Establezca el tamaño del teléfono en 1.6 Ram. Entonces el peso del teléfono va a ser de 300. También cambia el color, hazlo nueve B, D siete. Entonces voy a poner el ancho a tres Ram. La altura también va a ser tres. A continuación voy a seleccionar el segundo elemento spin usando selector hijo. Vamos a establecer el radio del borde al 50% necesitamos círculo. Y luego establecer borde 2.1 Ram sólido. Y el color va a ser nueve, B, D siete. Tenemos aquí círculo, pero necesitamos colocar el tamaño dentro del círculo. Vamos a usar libro flexible usando justificar el centro de contenido y el centro de líneas de artículos. Ahora el tamaño está centrado dentro del círculo. A continuación voy a encargarme de la manga. Seleccionemos también el cofre. Voy a establecer con 100% Entonces necesitamos libros flex, seguidos de justificar el espacio de contenido entre. A continuación, voy a seleccionar contador. Vamos a poner con 22 Ram, entonces la altura va a ser dos Ram. Vamos a usar radio de borde para hacer el círculo, establecerlo en 50% Siguiente Voy a establecer borde 2.1 Ram sólido y usar este color. A continuación necesitamos margen dos Ram y 04 Ram cero. Aquí tenemos círculos para ambos elementos. Siguiente Voy a seleccionar la transformación de contador de manga. Traducir x función 30 a 16 Ram. A continuación necesitamos mostrador de pecho. Cambiemos el valor. Van a ser cinco Ram. Acabamos de mover los círculos por diferentes cantidades. Seleccionemos el contador de manga seguido del pseudo elemento antes Vamos a configurar el contenido en vacío. Necesitamos crear líneas. Fijemos la posición a absoluta. Entonces necesitamos posición relativa. Para el contador, que es el elemento padre, necesitamos posicionar para ser 50% entonces la posición correcta va a ser dos Ram. Entonces necesitamos transformar, traducir y función para centrar verticalmente el elemento. A continuación, voy a establecer el ancho a 16 Ram. En cuanto a la altura, va a ser 0.1 Ram. Voy a cambiar el color de fondo. Usemos el mismo color. Aquí tenemos la línea para el largo de la manga. También necesitamos la línea similar en el lado derecho. Vamos a usar después del elemento azúcar, solo necesitamos cambiar la posición correcta, va a ser menos seis Ram. Y también cambiar el ancho. Necesitamos seis Ram. Tenemos aquí mostrador agradable y fresco. Hagamos lo mismo con el mostrador de pecho también. Cambiemos los nombres de clase ya que necesitamos cambiar el ancho para el elemento before, va a ser cinco Ram. Después del elemento necesitamos la posición correcta para ser -17 Ram. Y también el ancho va a ser 17 Ram. Bien, ambos mostradores se ven bastante bien y ahora tenemos que personalizar el fondo. Sigamos adelante y seleccionemos este elemento. Voy a establecer con 12 Ram. Y la altura, van a ser cinco Ram. Cambiemos el color de fondo. Usa de nuevo, el mismo color. Voy a configurar display para bloquear, luego margen A O para centrar el elemento. Ahora el fondo está centrado. A continuación, pongamos el radio del borde en cinco carneros. Voy a deshacerme de la frontera por defecto. A continuación, voy a agregar tamaño de fuente, que sea 1.4 Ram. El peso de la fuente va a ser negrita, entonces la transformación de texto va a ser mayúscula. Además, necesitamos algún efecto de sombra. Vamos a establecerlo en 0.1 Ram, 0.2 M, un Ram. Ese es el color que voy a usar negro con la opacidad 0.4 El botón se ve bastante bien Por último, voy a poner el cursor a puntero. Bien, ya casi terminamos. Lo único que tenemos que hacer es crear el efecto click usando active do class. Necesitamos transformarnos. Traducir y función con valor -0.2 Ram. Si hago clic en el botón, entonces tendremos este hecho de clic agradable y genial. Bien, así que terminamos con este proyecto. Espero que lo hayan disfrutado. Sigamos adelante y nos ocupemos del siguiente. 19. Proyecto 14 - Formulario de contacto animado: Bien, sigamos adelante. Y así para crear nuestro próximo proyecto, en esta sección, vamos a estar construyendo un formulario de contacto animado con HTML y CSS. Este proyecto va a ser sencillo, pero creo que va a ser interesante y un poco divertido. Como puedes ver, tenemos aquí algunas animaciones y efectos divertidos. Todo lo que ves aquí está creado con HTML y CSS puros. No utilizamos aquí ninguna imagen. En la parte superior de la página, tenemos un encabezado, luego le siguen las olas, me refiero al mar. En el mar, se pueden ver dos grupos de peces. Se mueven desde los lados izquierdo y derecho. Además de eso, tenemos aquí un par de campos de entrada diferentes y un botón Enviar. Bien, así que sentémonos sobre este proyecto. Sigamos adelante y comencemos. He creado una nueva carpeta en el escritorio. Sigamos adelante y lo abrimos en código VS y luego creamos nuestros archivos de trabajo. Vamos a usar solo HTML y CSS que necesitamos aquí indexar HTML y estilos. Después voy a abrir el archivo HTML índice y crear el documento HTML básico. Sigamos adelante y cambiemos el título. Va a ser formulario de contacto, entonces voy a vincular el archivo CSS. Entonces sigamos adelante y ejecutemos el proyecto al navegador usando servidor en vivo. Coloquemos el editor y el navegador uno al lado del otro. Bien, a lo largo del proyecto, vamos a usar los teléfonos de Google. Así que sigamos adelante y visitemos el sitio web. Voy a buscar teléfonos de Google llamados burbujas rubic Seleccionemos el estilo y luego agarremos el enlace que necesitamos para pegar el enlace en el elemento head. Bien, eso es todo. Sigamos adelante y para crear el marcado H mal, necesitamos un contenedor Estoy en la etiqueta profunda en la que voy a insertar agua. Entonces tendremos olas en las que voy a crear diez ondas, yo diez elementos profundos. Voy a abrir etiqueta profunda, que va a ser grupo de peces también. Tendremos aquí otro grupo de peces de clase. Uno. A continuación necesitamos, que consistirá en pescado Tidy. Duplicemos este código cinco veces. Tendremos seis peces en cada grupo. Entonces voy a duplicar todo el grupo y cambiar el nombre de la clase. Bien, ahora mismo nada es visible porque solo tenemos los desarrollos vacíos. Sigamos adelante y comencemos a escribir el CSS. Voy a seleccionar cada elemento y luego establecer margen y ponerlos a cero a ambos. A continuación necesitamos que el tamaño de la caja sea caja de borde. También establezca el esquema para no cambiar la familia de teléfonos. Van a ser burbujas rubianas. A continuación, voy a establecer el tamaño del teléfono del elemento HTML en 62.5% para poder usar el Ram como unidad de medida En este caso, una Ram será igual a diez píxeles. Sigamos adelante y cuidemos el contenedor. Voy a establecer el ancho al 100% entonces la altura va a ser de 100 macetas de altura. A continuación, voy a seleccionar agua. Establecer el ancho a 100% La altura va a ser 85% Establece la posición en absoluto. Necesitamos posición relativa para el elemento padre, el contenedor. A continuación necesitamos la posición inferior para quedar también a la izquierda. La posición va a ser cero también. El color de fondo va a ser 60 PTE seis. Aquí tenemos el agua. A continuación voy a seleccionar olas. Vamos a establecer el ancho al 100% Entonces la altura va a ser de diez m. A continuación tenemos que cambiar el color de fondo. Vamos a usar el color EE. Establezca la posición en absoluto. Entonces la posición va a ser del 15% esa posición va a ser cero. Aquí tenemos las olas. A continuación voy a seleccionar la ola misma. Establezca el ancho al 10% entonces la altura va a ser diez Ram. Cambiar el color de fondo, voy a usar el color blanco. Aquí tenemos las olas. Usemos la caja flexible para colocar los artículos horizontalmente en una fila. Voy a deshacerme de este color de fondo temporal. Entonces voy a establecer el radio fronterizo para la ola a 00, 50% y 50% También necesitamos 50% Como pueden ver, tenemos aquí las olas. Bien, Después de eso, voy a seleccionar Fish Group. Vamos a establecer el ancho a 40 Ram. Entonces la altura va a ser de 15 Ram. Voy a cambiar el color de fondo, vamos a hacerlo C. Luego cambia la posición, va a ser absoluta. También establecer la primera posición al 50% La posición izquierda va a ser del 40% Aquí tenemos el primer grupo. Seleccionemos Cuerpo de pescado. Voy a establecer con a seis Ram, entonces la altura va a ser tres Ram. Cambiar el color de fondo, voy a usar 26388 Siguiente Voy a establecer el radio fronterizo en 65% luego 40% 40% y 65% 50% Ahora tenemos cuerpos de peces. Siguiente Voy a seleccionar cola de pez. Eso se establece con cero. La altura va a ser cero. Necesitamos frontera. Necesitamos frontera para ser dos Ram sólido. El color va a ser transparente. A continuación, necesitamos border top con el valor cero. Entonces voy a usar border bottom con valores 1.8 Ram solid, y el color va a ser 26388 Como pueden ver, aquí tenemos triángulos creados por las fronteras Tenemos que rotarlos. Usemos transformar la función rotar Z. El valor va a ser de 90 grados. Las colas se rotan, pero necesitamos moverlas y colocarlas detrás del lado de los cuerpos de peces. Seleccionemos Fish Set Display Flex. Ahora tenemos mejores resultados, pero necesitamos mover las colas cerca de los cuerpos. Vamos a usar margin, right, Con valor -1.2 Ahora tenemos que mover las colas Vamos a usar el centro de líneas de artículos. Ahora todo se ve bastante bien. Vamos a establecer el radio del borde en un carnero para que la cola sea ligeramente redondeada. Vamos a establecer la posición en absoluto. Ahora todos los peces terminaron uno encima del otro. Seleccionemos peces con el selector, va a ser el primer pez. Pongamos la posición superior al 40% entonces la posición correcta va a ser. Dos Carnero. Aquí tenemos el primer pez. Disminuyamos la opacidad. Que sea 0.3 Entonces voy a duplicar este código. Cambiar el, necesitamos posicionarnos para ser cero. En cuanto a la posición correcta va a ser diez Ram. Aquí tenemos el segundo pez. Duplicemos el código, cambiemos el número. La posición de dos va a ser 30% En cuanto a la posición correcta, voy a hacerla 15 Ram. Entonces necesitamos el cuarto pez. Vamos a establecer la posición inferior a cero. La posición correcta va a ser ocho ram. A continuación necesitamos el quinto ítem. Voy a cambiar la posición superior, va a ser cero. En cuanto a la posición izquierda, voy a hacer que sea ocho Ram. Entonces necesitamos sexto ítem, pongamos la posición en 40% En cuanto a la posición izquierda, voy a ponerla en dos Ram. A continuación necesitamos séptimo. La posición inferior va a ser cero, es para la posición izquierda. Voy a hacer diez. Tenemos aquí todos los peces alineados. Vamos a deshacernos de los antecedentes temporales. Entonces como pueden ver, tenemos aquí el grupo de peces. Se ven bastante bien. A continuación voy a seleccionar el grupo de peces uno. La posición dos va a ser 35% a la izquierda posición va a ser -25% Duplicemos este código, cambiemos el nombre de la clase Necesitamos Phish group two set two position to 70% En cuanto a la posición correcta, voy a hacerla -25% Y también necesitamos transformar traducir y18 Como se puede ver, el grupo de peces se coloca abajo. En realidad, si me quito estas dos líneas, entonces el grupo de peces terminará en el lado derecho. En realidad, deberían ser rotados. Necesitamos aquí rotar la función Y y no el traducir. Se gira el grupo de peces. A continuación necesitamos crear la animación. Necesitamos marcos clave CSS. El nombre va a ser grupo phish uno al 0% necesitamos que la posición izquierda sea -25% En cuanto a la función transform rotate y, va a ser cero Entonces el siguiente paso va a ser 47% en ese paso. Va a establecer la posición izquierda al 100% ya que la función de rotar va a ser la misma. Entonces el siguiente arriba va a ser 53% La posición izquierda va a ser 100% En cuanto a la función de rotar, voy a establecer en 18 grados. Entonces el siguiente paso va a ser 100% Este es el final de la animación. Voy a agarrar esas dos líneas. Vamos a establecer la función de rotación a 18 grados. Ahora necesitamos aplicar esas reglas usando propiedad de animación que es instituto grupo de peces uno, el nombre de la animación. Entonces necesitamos duración 30 segundos infinito. Y la función lineal. Como puedes ver, el grupo de peces se mueve muy bien de izquierda a derecha. Una vez que están ocultos, entonces deben rotar y volver al lado izquierdo. Bien, todo funciona bien. Ahora necesitamos la misma animación para el segundo grupo de peces. Vamos a cambiar. El nombre va a ser grupo de peces dos, entonces aquí, derecha, posición, función Rotar va a ser 180 grados. Entonces vuelve a cambiar aquí, la posición que necesitamos, derecha 180 grados. También necesitamos lo mismo en ese escalón. Vamos a insertar aquí cero. Necesitamos aquí cero. Otra vez. Vamos a configurar la animación para el segundo grupo que necesitamos aquí retrasar 4 segundos y también cambiar el nombre. Necesitamos el grupo de peces dos. Como puedes ver, ambos grupos se mueven muy bien. Tenemos que deshacernos de esta barra de desplazamiento desde aquí. Vamos a establecer desbordamiento oculto para el contenedor. Bien, entonces ahora ya no tenemos los golpes de pergamino y ambos grupos se mueven muy bien. A continuación tenemos que encargarnos de los campos de entrada. Vamos a crear HTM en mark up. Necesitamos contacto. Entonces H un elemento de encabezado con el nombre de la clase contacto encabezado, va a ser contactanos. Entonces necesitamos el elemento de formulario con el nombre de la clase formulario de contacto. Vamos a inst elemento profundo que va a ser grupo de entrada. Voy a insbela's ser tu nombre entonces voy a en elemento de entrada con el tipo Duplicemos este código. Necesitamos el mismo grupo de entrada para el correo electrónico, Cambiar el tipo. Va a ser correo electrónico. Entonces necesitamos grupo de entrada para mensaje en lugar de elementos de entrada, voy a usar área de texto. Aquí tenemos los campos de entrada. Sigamos adelante y diseñemos esos elementos. Voy a seleccionar el encabezado de contacto. Pongamos esta posición a absoluta. La posición superior va a ser frame, luego dejamos posición va a ser 50% Y cuando centrar el elemento usando transform translate x -50% Siguiente voy a establecer el tamaño del teléfono a nueve Carneros, cambiar el color, va a ser un color naranja, Aquí tenemos el rubro. Vamos a usar aquí algún efecto de sombra. Vamos a establecer la sombra del texto a 0.5 Luego un RB, un color negro con opacidad 0.2 Bien, el encabezado se ve bastante bien A continuación voy a tomar del formulario de contacto. Pongamos esta posición a absoluta. Entonces la posición dos va a ser 35% voy a establecer let position a 50% Necesitamos de nuevo, centrando usando transform translate x -50% el formulario de contacto esta centrado en la pagina Siguiente Voy a seleccionar grupo de entrada. Vamos a configurar la pantalla para flexionar. Tenemos que cambiar la dirección que va a ser columna. Entonces voy a establecer margen en la parte inferior a tres Ram. Como pueden ver, tenemos algo de espacio entre los siguientes. Voy a seleccionar etiqueta. Vamos a establecer el tamaño de fuente en 2.3 Ram. Entonces el color va a ser blanco. Voy a poner margen en la parte inferior a un Ram. Las etiquetas se ven bien. A continuación voy a seleccionar los elementos de entrada. Vamos a establecer con 250 Ram. Entonces la altura va a ser. 0.5 Carnero. Necesitamos frontera para ser ninguno, Entonces necesitamos redondear las esquinas usando radio de borde, tres Ram. A continuación, voy a crear algo de espacio usando relleno. Digámoslo a un Ram, 1m1m, y luego a dos Ram del lado izquierdo Los dos primeros campos de entrada se ven bastante bien. A continuación voy a establecer el tamaño del teléfono a 1.6 Ram, Cambiar el color. Voy a usar 555. Necesitamos caja sombra 000.3 Ram, uno Ram. Y el color va a ser RGBA con Opacidad 0.1 Bien, Siguiente voy a encargarme del área de texto En realidad vamos a copiar esas líneas y luego establecer la altura en diez Ram. Como puedes ver, el área de texto se ve bien. A continuación, voy a colocar aquí, abajo. Olvidamos que olvidamos el botón Enviar. Vamos a establecer el nombre de la clase para contactar. Btn necesitamos aquí enviar mensaje, entonces voy a seleccionar abajo Vamos a establecer con 250 Ram. Entonces la altura va a ser cinco. Cambiar la frontera, que no sea ninguna. Entonces necesitamos que el color de fondo sea naranja. Cambia el color, va a ser blanco. Entonces voy a hacer tamaño de fuente dos Ram. También, necesitamos algo de espacio entre las letras. Vamos a configurarlo 2.2 Ram. Después transforma el texto en mayúsculas. El siguiente camino es el radio fronterizo. Para que el botón sea redondeado, entonces voy a usar alguna sombra. Tomemos este código de aquí y lo utilicemos también para el botón. Por último, pongamos más rumbo al punto. Bien, así que eso es todo. Ya terminamos con este proyecto. Ojalá fuera interesante. Ahora vamos a seguir adelante y encargarnos del próximo proyecto. 20. Proyecto 15 - Button que brilla: Bien, es hora de seguir adelante y comenzar a crear nuestro próximo proyecto. En esta sección, vamos a estar construyendo este bonito y fresco, fondo resplandeciente El proyecto se creará en base a HTML y CSS. Usaremos solo estas dos tecnologías. Como pueden ver, tenemos aquí un fondo con algo de texto y también la sombra abajo. El texto dentro de la parte inferior parpadea y también la sombra brilla Si vuelo el cursor sobre la parte inferior, entonces obtendremos este bonito y genial efecto El texto dejará de parpadear y también la sombra se expandirá, ¿verdad? Creo que este proyecto va a ser interesante y divertido. Aprenderás sobre cómo crear esos efectos usando solo HTML y CSS. Bien, sigamos adelante y comencemos. He creado una nueva carpeta en el escritorio, que ahora mismo está vacía. Sigamos adelante y ábralo en código VS y creamos nuestros archivos de trabajo para HTML y CSS. Como decíamos, vamos a utilizar sólo estas dos tecnologías. Vamos a seguir adelante y abrir el archivo HTML índice y crear el documento HTML básico. Voy a cambiar el título del proyecto. Va a ser botón, después voy a vincular el archivo CSS. Especificemos aquí el nombre del archivo. Abramos el proyecto al navegador y colocemos el editor y el navegador uno al lado del otro. Además de eso, voy a tomar los teléfonos de Google del sitio web de Google Phones. Sigamos adelante y busquemos el teléfono llamado señal Can negativo. Seleccionemos estos estilos, luego copiemos el enlace y lo peguemos en el elemento head. Bien, entonces ahora podemos empezar a escribir el H m mark up, open deep tech, que va a ser el contenedor. Voy a insertar un botón con la clase BTN. Entonces necesitamos type attribute, que va a ser botón. Voy a insertar tu elemento span con la clase Envíame un mensaje de texto aquí, hover Eso es todo sobre el marcado H mal. Empecemos a escribir CSS. Necesitamos márgenes de relleno para que cada elemento sea cero. Entonces voy a establecer el tamaño de la caja a la caja de borde. A continuación voy a establecer el esquema en non. También cambia la familia de fuentes el signica negativo serif. Entonces necesitamos establecer el tamaño de fuente del elemento H dimel en 62.5% para usar m como unidad de medida En este caso, un m será igual a diez píxeles. A continuación, voy a seleccionar el contenedor. Vamos a establecer con al 100% Entonces la altura va a ser de 100 altura de la ventana gráfica Cambiar el color de fondo. Voy a usar aquí el color 1611d, es un color oscuro Entonces necesitamos flex box para poder centrar el contenido. Usemos Justify Content Center y un Centro de Líneas de Artículos. Como puedes ver, la parte inferior se coloca en el centro de la página. Después de eso, voy a seleccionar PTN resplandeciente. Vamos con 245 Ram, entonces la altura va a ser 12 Ram. Vamos a poner fondo a ninguno. Aquí tenemos el fondo. A continuación tenemos que definir frontera. Vamos a configurarlo 2.7 Ram, sólido. En el color, voy a usar la función RGB. Los valores serán 212044. A continuación, establecí el radio de borde en dos Ram. Vamos a hacer las esquinas redondeadas. A continuación, voy a establecer el color en el mismo valor RGB. En realidad necesitamos aquí 74.4 Ahora el color se cambia ligeramente y creo que es mucho mejor A continuación, necesitamos tamaño para ser siete Ram. Entonces voy a crear algún espacio entre las letras. Vamos a establecerlo en 2.5 Ram. Cambiar caja sombra va a estar en conjunto 003 Ram RGP y el mismo color Ahora tenemos resultados mucho mejores. Voy a usar padding left 2.5 Ram. A continuación vamos a establecer cos dos puntos. Veamos sobre la parte inferior derecha. Ahora a continuación tenemos que seleccionar bottom, seguido del elemento before. Vamos a configurar el contenido en vacío. Entonces voy a establecer el ancho al 100% La altura va a ser 100% voy a establecer la posición en absoluto. Necesitamos posición relativa para el elemento patrón, que es el botón en sí. Pongamos la posición a cero. La posición va a ser cero también. A continuación necesitamos caja sombra 006 Ram. El color va a ser el color que usamos. A continuación necesitamos fondo resplandeciente con después de que el contenido del elemento va a estar vacío Entonces necesitamos posición para ser absolutos. La posición superior va a ser cero. La posición izquierda va a ser del 50% entonces el ancho va a ser del 100% En cuanto a la altura, voy a decir al 100% también. A continuación voy a definir los antecedentes. El color va a ser el mismo. Vamos a establecer la opacidad 2.7 Entonces necesitamos transformar traducir -50% y luego 130% También voy a usar aquí rotar función de acuerdo a la dirección x, el valor va a ser Y también voy a usar la función scale 1.35 Aquí tenemos el elemento Vamos a usar filtro con función de desenfoque con valor tres Ram. Paso a paso estamos creando la sombra. Vamos a establecer los eventos puntuales, ninguno. A continuación, voy a usar la perspectiva, lo que nos ayudará a crear tres efectos D. Digámoslo a seis Ram. Como pueden ver, la sombra se ha expandido. Siguiente Voy a seleccionar texto resplandeciente. Vamos a configurar la tecnología Shadow 2001 Ram. El color va a ser RGBA 212474. Entonces necesitamos otro valor, 001 Ram. Rgba el mismo color pero con la opacidad 0.7 En realidad, necesitamos aquí opacidad 0.7 Puedes ver aquí el resultado. A continuación voy a crear animación CSS. Vamos a establecer el nombre del borde de los marcos clave cualquiera al 0% necesitamos que la opacidad sea 0.1 Entonces el siguiente paso va a ser 2% y el valor será uno Duplicemos este cambio de código. El valor porcentual va a ser 4% el valor será 0.1 A continuación necesitamos 8% y el valor de la opacidad, va a ser uno Voy a insertar 70% con la opacidad 0.7 Entonces voy a establecer el 100% y la opacidad Necesitamos tu función de animación para poder aplicar esas reglas. Esa es la duración a 2 segundos. Entonces necesitamos lineales y también infinitos. Como puedes ver, tenemos aquí bonito y fresco, efecto resplandeciente A continuación, voy a crear otros fotogramas clave con el texto del nombre. Cualquiera al 0% voy a establecer opacidad a 0.1 El siguiente arriba va a ser 2% la opacidad será uno Entonces necesitamos aquí 8% y la opacidad 0.1 Entonces el siguiente paso va a ser 9% con el valor uno Entonces vamos a tener 12% de capacidad va a ser 0.1 Siguiente voy a insertar tu 20% con la opacidad uno Entonces tendremos aquí 25% con valor 0.3 El siguiente paso va a ser 30% y la opacidad va a ser uno El inserta tu 70% con valor 0.7 El siguiente paso es ser 72% con el valor 0.2 Vamos a 72% con el valor duplicar de nuevo este cambio de código. El valor porcentual va a ser 77% y la opacidad va a ser 0.9 Entonces voy a establecer el valor porcentual a 100 y la opacidad 0.9 Vamos a usar de nuevo la 0.9 Vamos a usar de nuevo propiedad de animación con el nombre de los fotogramas clave La duración va a ser de 3 segundos. Entonces necesitamos lineal y otra vez infinito Como pueden ver, tenemos aquí bonito parpadeo y resplandeciente, los hechos Lo único que tengo que hacer es crear el botón resplandeciente con efecto hover Con hover, voy a establecer fondo a RGB, el color que usamos Voy a cambiar el color del texto. Digamos 22729 para ser. Entonces necesitamos que la animación no sea ninguna. También use transición. Una vez que obtendremos este bonito y hendido, en realidad el texto sigue parpadeando, así que voy a seleccionar fondo resplandeciente con hover seguido del Vamos a establecer caja sombra 2015 Ram y el RGB, el color también usan transición. Ahora la sombra se está expandiendo muy bien. A continuación voy a seleccionar bottom con hover seguido del elemento after Vamos a establecer con 2,100.20% La altura va a ser 120% También En realidad vamos a desechar este valor. Voy a cambiar el valor de traducir. Va a ser 110% Además, voy a usar su filtro con función de desenfoque con valor cinco Además, use la transición para un efecto suave. Ahora todo se ve bastante bien. Por último, voy a encargarme del texto. Seleccionemos botón con hover seguido del selector de texto resplandeciente Tenemos que detener la animación. Vamos a establecerlo en non. Bien, así que ahora cada perfectamente y con este proyecto ya terminamos. Sigamos adelante. 21. Proyecto 16 - Hamburguesa Menú: Bien, es hora de seguir adelante y comenzar a crear nuestro próximo proyecto. En esta sección, vamos a estar construyendo un menú de hamburguesas con HTML, CSS y Javascript. Sigamos adelante y describamos el proyecto. Como puedes ver, tenemos aquí una imagen de fondo a pantalla completa. En el centro de la página, se puede ver el menú de hamburguesa de texto Las letras tienen fondo transparente y los bordes. Entonces en la esquina superior derecha de la página, puedes ver el ícono del menú, que tiene este bonito y genial fondo animado. Si hago clic en el icono de menú, entonces el fondo se expandirá y se mostrarán los elementos del menú. Si coloco el cursor sobre los artículos, entonces cambiarán el color de esta manera genial y agradable Entonces si hago clic en la X, patton, los elementos del menú se ocultarán Muy bien, entonces creo que este proyecto va a ser interesante y lo vas a disfrutar. Sigamos adelante y comencemos. He creado una nueva carpeta en el escritorio que incluye carpeta para las imágenes. Sigamos adelante y abrimos la carpeta y el código VS y luego creamos nuestros archivos de trabajo para HTML, CSS, y también para Javascript. A continuación, voy a abrir el archivo HTM índice y crear el documento HTM básico. Cambiemos el título. Va a ser menú de hamburguesas. Voy a vincular el CSS y también los archivos Javascript. Necesitamos la etiqueta script y el nombre del archivo en el atributo source. Bien, sigamos adelante y abramos el proyecto en el navegador. Después coloca el navegador y el editor uno al lado del otro, así. A continuación, voy a visitar el sitio web de Google Phones, porque vamos a utilizar los teléfonos de Google a lo largo de este proyecto. Sigamos adelante y busquemos el teléfono llamado Secular Uno. Voy a seleccionar el estilo, luego copiar el enlace y pegarlo en el elemento head. Ahora podemos comenzar a crear la marca HD. Abramos Deep Tag, que va a ser el contenedor. Después dentro del contenedor, voy a abrir Préstamos, en el que tendremos H un elemento de encabezado, menú de hamburguesas A continuación, voy a crear menú de hamburguesas, en el que voy a insertar de elementos con la navegación de clases Dentro de la navegación, tendremos elemento link, que va a ser el elemento de navegación que necesitamos aquí. Contenido de datos, atribuir el texto home. Vamos a insertar a casa aquí. Entonces necesitamos un par de artículos diferentes. El segundo va a ser sobre la cuadra. El siguiente va a ser galería. En cuanto al último elemento de navegación, va a ser Contacto. A continuación, necesitamos el menú. Voy a insertar aquí, Lines. Tendremos tres líneas. Cada desarrollo tendrá dos clases, línea, línea uno, línea dos y línea tres. Bien, eso es todo sobre el marcado HTML. Se crean todos los elementos. Y ahora tenemos que abrir el archivo CSS y empezar a escribir el CSS. En primer lugar, voy a seleccionar cada elemento usando un asterisco Y luego establecer el margen, y ponerlos a cero a ambos A continuación, necesitamos definir la propiedad de dimensionamiento de cajas. Va a ser caja fronteriza. Entonces necesitamos que la decoración de texto no sea ninguna. Además, voy a configurar la familia de teléfonos para cada elemento, dos seculares, un sensor ref. Como puede ver, los estilos por defecto se aplican a los elementos. A continuación, voy a establecer el tamaño predeterminado del elemento HTM 62.5% porque vamos a usar M como unidad de medida En este caso, una M será igual a diez píxeles. Sigamos adelante y seleccionemos el contenedor. Voy a definir su ancho. Va a ser 100% entonces necesitamos altura, va a ser 100 epot de altura Entonces voy a encargarme del aterrizaje. Vamos a establecerlo con la altura. Voy a establecer el ancho al 100% En cuanto a la altura, va a ser 100% también. Tenemos que ampliar el aterrizaje. A continuación voy a cambiar el fondo. Vamos a usar gradiente lineal. El primer color va a ser RGBA color negro con opacidad 0.8 En cuanto al segundo color, necesitamos aquí el mismo valor RGBA, pero la opacidad va a ser 0.9 A continuación, necesitamos seleccionar la imagen de la carpeta images Necesitamos una imagen de fondo a pantalla completa. También necesitamos posición para ser centro y luego no repetir. Tenemos aquí la imagen de fondo a pantalla completa. En realidad, voy a establecer el tamaño de fondo propiedad dos, cubrir siguiente. Sigamos adelante y usemos libros Flex. Tenemos que centrar el rumbo para eso. Utilice Justificar el centro de contenido y los centros de líneas de artículos podrán ver que el encabezado está perfectamente centrado en la página. A continuación, voy a seleccionar el elemento de encabezado H y personalizarlo. Definamos el tamaño del teléfono. Van a ser diez. Entonces necesitamos color. Vamos a establecer el color en C A, A cinco. Oh, es de color amarillo. Siguiente Voy a crear algún efecto de sombra. Vamos a establecer la sombra de texto 203 Ram, seis Ram. Y el color RGBA con opacidad 0.7 Siguiente Voy a crear algún espacio entre las letras Vamos a configurarlo 2.3 Ram. Ahora necesitamos fondo transparente para las letras. Para eso, voy a usar la propiedad llamada Webkit Text stroke Va a ser 0.1 Ram y el color va a ser amarillo. Además, necesitamos establecer el color en transparente. Entonces, como pueden ver, el rumbo se ve bastante bien. A continuación, voy a encargarme de los elementos de navegación. Seleccionemos Elemento de enlace y utilicemos display Ninguno para ocultar los elementos de enlace. Ahora tenemos que encargarnos de la navegación. Definamos con la altura. El ancho va a ser, entonces necesitamos alturas también. Cambiar el color de fondo. Aquí vamos a usar Color 28231. Aquí tenemos el elemento abajo. Cuidemos su posición. Voy a poner posición a absoluta. Entonces necesitamos posición relativa para el contenedor. Porque vamos a posicionar el elemento según el contenedor. Vamos a establecer la posición superior a cuatro. En cuanto a la posición correcta va a ser también. Entonces necesitamos sombra de caja. Vamos a establecerlo en 013. Y el color va a ser negro con la opacidad 0.7 Aquí tenemos el elemento colocado en la esquina superior derecha de la página Sigamos adelante y creamos animación CSS usando fotogramas clave. Necesitamos aquí nombre BG Anim al 0% Voy a establecer el radio del borde a los siguientes valores El primero va a ser 63% entonces tendremos 37% El siguiente va a ser 54% luego 46% entonces necesitamos aquí. Y 85% 48% luego 52% El último va a ser 45% El siguiente paso va a ser 14% Tomemos este código de aquí y luego cambiemos los valores que necesitamos aquí. 40% luego 60% El siguiente va a ser 49% Entonces tendremos 60% 40% y el último valor va a ser 51% Entonces voy a colocar tu siguiente paso, 28% Vamos a agarrar el código de nuevo, cambiar los valores. El primero va a ser 54% luego 46% 38% 62% Siguiente vamos a tener aquí 70% 30% Y 51%. El siguiente paso va a ser 42% Sigamos adelante y cambiemos de nuevo los valores para radio fronterizo. Necesitamos aquí 61% luego 39% El siguiente va a ser 55% 45% Siguiente necesitamos 61% luego 38% 62% 39% Sigamos adelante y definamos el siguiente paso. Va a ser 56% cambiar los valores. El primero va a ser 61% 39% 67% 33% Entonces tendremos 70% 50% 50% y 30% El siguiente paso va a ser 70% Cambiemos los valores. Primero va a ser 50% luego otra vez, 50% 34% 66% Entonces necesitamos aquí 56% 68% 32% y 44% El siguiente paso, va a ser 84% Cambiemos el primer valor. Va a ser 46% Entonces vamos a tener 54% 50% Luego otra vez, 50% Siguiente tenemos 35% 61% 39% 65% Todo bien, Como parte del último paso, estoy en 100% Necesitamos los mismos valores que usamos para el primer paso, los fotogramas clave ya. A continuación necesitamos propiedad de animación. Vamos a insertar el nombre de la animación. Entonces necesitamos duración, 7 segundos, lineal e infinita. Como pueden ver, tenemos aquí estos elementos animados agradables y geniales. Vamos a llevarte del icono del menú. Voy a definir esta posición. Vamos a establecerlo en absoluto. Entonces necesitamos dos posiciones. Va a ser siete Ram. Entonces vamos a tener aquí la posición correcta. Voy a ponérselo a seis Ram. Establece el ancho, va a ser 3.5 Ram. Entonces la altura es de dos. Luego establece el puntero del cursor, y también necesitamos color de fondo. Vamos a usar aquí el color amarillo. Aquí tenemos el icono del menú. Ahora tenemos que encargarnos de las líneas. Vamos a establecer con 23.5 Fram, entonces la altura va a ser 0.2 Ram Cambia el color de fondo, usa aquí de nuevo, el color amarillo, y luego deshazte de este color temporal desde aquí. Aquí tenemos las líneas, Ahora tenemos que separarlas. Vamos a establecer la posición absoluta. Entonces tenemos que seleccionar la línea uno. Define dos. La posición va a ser cero. Entonces necesitamos la línea dos. Necesitamos que el ancho sea 60% Entonces a la posición va a ser 0.9 Ram. También necesitamos la posición izquierda. Vamos a configurarlo dos puntos sevel Ram. Aquí tenemos la segunda línea. Tomemos aquí de la tercera línea. Voy a agarrar este código, establecer el nombre de la clase en la línea tres. Entonces necesitamos posicionarnos para ser 1.8 Ram, bien. Entonces aquí tenemos el ícono del menú. Se ve bastante bien. Ahora necesitamos escribir algo de Javascript. Vamos a crear una variable. Va a ser icono de menú. Voy a seleccionar este elemento usando el método selector de consultas. Necesitamos especificar aquí el nombre de la clase. Va a ser icono de menú. Entonces necesitamos otra variable. Va a ser menú de hamburguesas. Cambiemos el nombre de la clase. Necesitamos menú de hamburguesas. A continuación, voy a agregar un oyente de eventos al icono del menú con un evento click También, tenemos que pasar aquí la función de Calbeck que será ejecutada Una vez que hacemos clic en el elemento al hacer clic, tenemos que agregar nueva clase al menú de hamburguesas usando el método Togo El nombre de la clase va a ser, digamos cambio. Ahora tenemos que usar este nombre de clase en el archivo CCs para crear nuevos estilos, los cuales se aplicarán una vez que hagamos clic en el icono del menú Sigamos adelante y usemos Cambiar con Navegación. Una vez que hacemos clic, entonces necesitamos cambiar. La posición superior va a ser del 50% entonces la posición derecha va a ser del 50% también. Y necesitamos centrar el elemento usando transform translate. Los valores serán 50% y luego -50% Una vez que hagamos clic en el icono, entonces el elemento se colocará en el centro, la navegación Ahora tenemos que aumentar el tamaño del elemento. Vamos a establecer con 200% entonces la altura va a ser 200% también También necesitamos publicar la animación. Para eso, voy a usar la propiedad llamada estado de reproducción de animación y va a ser post. Si hago clic, entonces el elemento se expandirá, la animación se detendrá. Ahora tenemos que ocultar esas barras de desplazamiento. Para eso, voy a usar desbordamiento oculto. Ahora no tenemos aquí scroll Bs. A continuación, voy a agregar aquí transición. Para que el efecto sea más suave, necesitamos algo de tiempo de retardo y también una función cúbica más ocupada para que el efecto sea más agradable Los valores serán 0.20 3,110.30 2.1 Nuevamente, también necesitamos aquí La posición correcta va a ser 0.4 segundos. La duración va a ser de 0.4 segundos. Entonces necesitamos tiempo de retraso. Nuevamente, la función Cubic más ocupado. A continuación habremos transformados. La duración va a ser de 0.3 segundos. Entonces necesitamos tiempo de retraso. A continuación necesitamos con, con la duración de 0.8 segundos el tiempo de retardo va a ser de 1 segundo. Y nuevamente necesitamos la función cúbica más ocupado. A continuación viene altura 0.8 segundo, 1 segundo. Y la misma función ser cúbica. En realidad, eso es todo. Como pueden ver, tenemos aquí este bonito y genial efecto. La navegación se está expandiendo de esta manera genial. Tomemos la transición y agreguemos aquí. Por defecto, organicemos el código, luego deshagamos del tiempo de demora y lo cambiemos. Que sea 1.1 segundo. Necesitamos aquí otra vez, 1.1 segundo. Luego viene transformar. Cambiemos el tiempo de retraso. Va a ser 1.1 segundos. En cuanto al ancho, necesitamos aquí 0.7 segundos y luego 0.4 segundos en cuanto a la altura. Agreguemos aquí los mismos valores. Ahora si hago clic y luego cierro, llegaremos aquí los bonitos y geniales efectos animados. Bien, ahora tenemos que encargarnos de las líneas. Empecemos por la línea uno. Necesitamos dos posiciones para ser 0.9 gramos. Entonces necesitamos transformar la función Rotar. El valor va a ser de 45 grados. A continuación necesitamos la línea dos con el cambio de clase establecer la opacidad a cero y factibilidad, necesitamos ocultar la segunda línea en absoluto En cuanto a la tercera línea, necesitamos aquí dos posiciones para ser 0.9 Ram. Entonces la propiedad transform tendrá rotar la función con el valor -45 grados. Una vez que haga clic aquí, pequeño número. Sí, necesitamos cambiar el nombre de la clase. Ahora tenemos aquí un x botón de cierre al hacer clic. Agreguemos aquí la transición. Top 1 segundo, también agarro la función cúbica más ocupado También, necesitamos aquí transformar 0.3 segundos, 1.6 segundos. Entonces voy a copiar, en realidad necesitamos aquí la transición y no la transformación. Vamos a copiar el código, Pégalo aquí. Una vez que haga clic, entonces obtendremos esta genial transformación del ícono del menú. Creo que se ve bastante genial. A continuación, usemos la transición para la primera línea. Y el tiempo de retardo va a ser de 1.6 segundos. Además, necesitamos el punto de duración 1 segundo sin tiempo de demora. Luego usa transición para la segunda línea. Por defecto, necesitamos punto de opacidad 1 segundo y el tiempo de retardo 1.6 segundos Vamos a copiar el código. En realidad lo necesitamos para la línea tres. Ahora si hago clic, entonces llegaremos hasta aquí. Este hecho agradable y genial. Bien, vamos a encargarnos de los elementos de navegación. Voy a mostrarlos de nuevo. Personalicemos los elementos del enlace. Voy a usar libros flex con justify content center. Y entonces tenemos que cambiar la dirección. Hagamos la columna y además de eso, necesitamos el centro de líneas de pedido también. Como puedes ver tenemos aquí los elementos de navegación. Vamos a establecer el tamaño de la fuente a siete Ram. Entonces el color va a ser CCC. Cambiar el espaciado entre letras. Vamos a establecerlo en 0.3 Ram. A continuación necesitamos margen inferior. Hagámoslo un Ram. Aquí tenemos los elementos de navegación. Se ven bien. Seleccionemos la navegación seguida del enlace. Y luego antes del desarrollo, el contenido va a ser atributo data content que usamos en el elemento HTML. Entonces voy a poner la posición a absoluta. Entonces necesitamos posición relativa para el elemento padre. Vamos a poner en posición a cero. Entonces la posición de la pierna va a ser cero también. Voy a poner el color en amarillo. Voy a poner el color a B, D nueve. Entonces el ancho va a ser del 100% Aquí tenemos el forzado el elemento. Pongamos el ancho a cero y luego ocultemos el elemento usando el dobladillo de desbordamiento. Necesitamos espacio en blanco para ser p. A continuación, necesitamos seleccionar navegación A con hover seguido del elemento before Al flotar, tenemos que cambiar el ancho. Va a ser 100% Entonces te necesitamos transición con 0.6 segundos está fuera. Una vez que flote, entonces obtendremos este bonito y genial efecto una vez que cierre la navegación Entonces vamos a tener aquí un pequeño problema que necesitamos aquí, opacidad cero y visibilidad. A continuación, voy a usar cambio, seguido del enlace de navegación. Tenemos que volver a mostrar los artículos. Ahora tenemos mejores resultados, pero necesitamos aquí la transición todos los 0.5 segundos y el tiempo de retardo 1.5 segundos. Necesitamos transición por defecto todos los 0.5 segundos. Ahora si hago clic, entonces obtendremos los buenos y geniales resultados. Todo funciona a la perfección, y con el proyecto, ya terminamos. Vamos a seguir adelante. 22. Project 17 - Encabezado de sitio web con presentación de diapositivas y menú de navegación: Bien, entonces es hora de seguir adelante y crear nuestro próximo proyecto. En esta sección, vamos a estar construyendo un encabezado de sitio web con una presentación de diapositivas y un menú de navegación. El proyecto se creará en base a HTML, CSS y Javascript. Entonces sigamos adelante y describamos el proyecto. Como puedes ver, el proyecto trata sobre algo de comida. Tenemos aquí un par de diapositivas diferentes que incluyen imágenes de comida, algunos encabezamientos, y el párrafo Y también tenemos aquí el botón botón tiene un bonito y genial efecto hover El número consiste en un logotipo y algunos elementos de navegación que tienen este bonito y genial efecto hover Además, en la esquina superior derecha, tenemos un icono de menú con efecto hover Si hago clic en él, entonces aparecerá la barra lateral. Si hago clic aquí, entonces los elementos de navegación se mostrarán muy bien. Cerremos la barra lateral. En realidad, el proyecto responde a diferentes tamaños de pantalla. Si inspecciono la página y cambio al modo responsive y verifico el proyecto a diferentes tamaños de pantalla, entonces encontrarás que el proyecto responde. Se ve bien a diferentes tamaños de pantalla. Aprenderás sobre el diseño web responsive. Bien, así que sentémonos sobre el proyecto. Va a ser grande, pero espero que lo disfrutes y aprendas algunas cosas nuevas. Sigamos adelante y comencemos. He creado una nueva carpeta en el escritorio. Sigamos adelante y lo abramos en código VS, luego creamos nuestros archivos de trabajo. Necesitamos índice de punto HTML, luego estilo CSS. Además, necesitamos un archivo para Javascript script JS. Vamos a abrir el archivo HTML de punto índice y crear el documento HTML básico. Voy a cambiar el título, va a ser landing page, luego voy a vincular los archivos CSS y Javlscript Vamos a abrir script y especificar el nombre multi archivo en el atributo source. A continuación, voy a abrir el proyecto al navegador usando servidor en vivo. Y luego colocar el navegador y el editor uno al lado del otro para que nuestro proceso de trabajo sea más cómodo y sencillo. Voy a visitar el sitio web de Google Phones, porque vamos a utilizar algunos teléfonos de Google lo largo de este proyecto. Sigamos adelante y busquemos teléfono de Google llamado Fiel One. Voy a seleccionar el estilo. A continuación voy a buscar otro teléfono. Va a ser inknut, antiqua, no sé cómo pronunciar esos nombres de peso Seleccionemos esos estilos, luego copiemos el enlace y lo peguemos solo en la cabeza. Bien, a continuación voy a agarrar la CDN para los asomos telefónicos, porque vamos a usar algo Vamos a copiar el enlace, la etiqueta open link en el elemento head y pegar aquí el CDN Bien, estamos listos para comenzar a construir un proyecto. Vamos a crear contenedor en el que voy a tener préstamos. Entonces voy a abrir ningún elemento con la clase ahora parte. Vamos a insar tag que va a ser logo. El logo consistirá en un pontomicon, que será un sólido, utensilios A A continuación tendremos la navegación. Me refiero a los elementos que necesitamos aquí, elementos de enlace. El primero va a estar en casa. Entonces voy a duplicarlo un par de veces y cambiar los artículos. El segundo va a ser sobre. Entonces tendremos cocina. Voy a insite tu galería. Entonces el siguiente ítem va a ser bloque. En cuanto al último, voy a entrar en contacto insitu aquí Tenemos los elementos de navegación después de eso que necesitamos. Crear el ícono del menú, Necesitamos aquí dos líneas con la línea de clases y la línea uno, y también la línea dos. Después de la navegación, voy a crear diapositivas. Vamos a abrir la etiqueta p. Va a ser slide y va a tener otra clase. Deslice uno que necesitamos aquí slide image wrapper. Entonces la imagen misma. Voy a seleccionar imagen de la carpeta de imágenes. Necesitamos comida Uno A continuación tendremos pancarta. Consiste en H un elemento de encabezado con el encabezado clase PG. El texto va a ser Gusto. Entonces tendremos H dos elementos de rumbo con el encabezado principal de la clase. El texto va a ser comida increíble. Entonces tendremos párrafo con la descripción de la clase comida tarea. Aquí tendremos algún texto de Tammy. Además, tendremos aquí abajo la diapositiva de clase, PTN. Además, vamos a tener aquí type attribute y va a ser pat. En cuanto al texto, voy a insertar su vista más. Bien, a continuación voy a crear la barra lateral. Necesitamos aquí el icono de los teléfonos que va a ser FA sólido A X mark. Va a ser el botón de cierre. A continuación tendremos barra lateral. No, necesitamos botón con el aparador clase, BTN el texto va a ser cocina También necesitamos del tipo que va a ser botón. Entonces después del botón, voy a crear barra lateral suficientes artículos. Voy a insertar tu elemento link. Va a ser en casa. Vamos a duplicarlo un par de veces. En realidad, voy a agarrar esos enlaces porque necesitamos el mismo contenido. Vamos a pegarlo aquí. Bien, así que en realidad con el marcado HTML, ya casi terminamos Empecemos a escribir algo de CSS. Voy a poner el margen y relleno para cada elemento a cero. A continuación necesitamos dimensionamiento de cajas. Va a ser caja fronteriza. Entonces voy a poner a ninguna decoración de texto. Necesitamos familia telefónica, va a ser uno. A continuación, voy a establecer el tamaño del teléfono del elemento HTML 62.5% porque vamos a usar M como unidad de medida En este caso, una Ram será igual a diez píxeles. Ahora voy a seleccionar contenedor. En realidad, tenemos que cambiar aquí. El nombre va a ser contenedor. Vamos a establecer el ancho al 100% para que la altura va a ser de 100 altura de ventana gráfica Entonces voy a poner el pudín a tres carnero por los cuatro lados Después de eso, voy a seleccionar aterrizaje. Establece su ancho 200% entonces la altura va a ser 100% Siguiente Voy a seleccionar diapositivas y estas dos líneas aquí también A continuación necesitamos diapositiva. Necesitamos con altura 100% Bien, después de eso, voy a seleccionar envoltorio de imagen de diapositiva y usar de nuevo con altura 100% Vamos a duplicar este código y usar con altura para la propia imagen. Ahora se cambia el tamaño de la imagen. Seleccionemos la barra lateral y la ocultemos por un tiempo. A continuación voy a seleccionar, ahora voy a establecer su posición en absoluto. Entonces necesitamos posición relativa para el elemento padre que es un aterrizaje. Pongamos el ancho al 100% La altura va a ser diez Ram. Entonces voy a usar libros flex. Aquí necesitamos justificar el espacio de contenido entre ellos. cuanto a los ítems LN, voy a ponerlos al centro. A continuación, necesitamos relleno. 05 Carnero. Aquí tenemos la navegación. Voy a establecer el color de fondo a CCC por un tiempo. Ahora podemos ver el icono y los elementos de navegación. Vamos a deshacernos del color de fondo. A continuación, voy a encargarme del logo. Vamos a establecer el tamaño del teléfono en cinco Ram. Entonces necesitamos Webkit, trazo de texto. Va a ser 0.1 Ram. El color va a ser blanco. En cuanto al color en sí, lo voy a poner en transparente. Ahora tenemos aquí esta agradable y genial el hecho. Pongamos el cursor a punto. Bien, después de eso voy a encargarme de la navegación. Me refiero a los elementos de enlace. Vamos a establecer el tamaño del teléfono en dos Ram. La transformación del texto va a ser mayúscula. Voy a poner el color al blanco. Necesitamos margen 03 Ram en los lados izquierdo y derecho. Aquí tenemos los elementos de navegación. Vamos a crear sobre efecto usando pseudo elementos antes y después Necesitamos contenido para estar vacíos. A continuación, voy a establecer el ancho al 100% Entonces la altura va a ser 0.2 Ram. Necesitamos color de fondo, va a ser blanco. A continuación voy a fijar la posición. Va a ser absoluto y necesitamos posición relativa para el elemento link. Vamos a establecer dos posiciones a -0.5 Ram. En cuanto a la posición izquierda, va a ser cero. Aquí tenemos las líneas. Ahora necesitamos la misma línea en la parte inferior de los enlaces. Vamos a usar after do elemento voy a cambiar las posiciones que necesitamos posición inferior. Ahora tenemos aquí líneas arriba y abajo. Agreguemos aquí transformar escala x cero. Tenemos que ocultarlos y exhibirlos. Una vez que pasemos el cursor sobre los artículos, coloquemos la clase y hagamos la escala uno Necesitamos lo mismo para el elemento también. Además de eso, necesitamos usar la transición para un efecto más suave. Una vez que pasemos el cursor sobre los elementos, entonces las líneas se mostrarán Pero aparecen desde el centro. Y tenemos que cambiarlo. Tenemos que cambiar transformar origen. Y tenemos que hacerla a la izquierda para el elemento antes. Y necesitamos transformar el origen, justo para el elemento después. Ahora bien, si flojo, entonces volveremos a obtener este bonito y genial efecto hover que se sienta sobre los elementos de navegación A continuación, voy a encargarme del icono del menú. Vamos a establecer el ancho a seis Ram. La altura va a ser dos Ram. Entonces voy a encargarme de las líneas. Vamos a establecer al 100% En cuanto al De, va a ser 0.4 Como necesitamos cambiar el color de fondo, pongámoslo en blanco. Aquí tenemos dos líneas y necesitamos separarlas. Para eso, voy a usar libros flex. Necesitamos mostrar flex entonces flex direction va a ser columna tambien, necesitamos justificar el espacio de contenido entre Y tambien cambiar el Coursormke it point can, tendras el icono del menu A continuación, voy a crear efectos Hover. Tenemos que seleccionar la línea al pasar el cursor. Vamos a establecer la escala de transformación x 0.5 y usar luego la transición. Si vuelo el cursor, entonces se disminuirá el ancho de las líneas Pero necesitamos diferentes efectos para la línea uno y la línea dos. Necesitamos cambiar el origen de la transformación. Va a ser adecuado para la línea uno. En cuanto a la línea dos, voy a hacerla a la izquierda. Ahora bien, si flojo, entonces obtendremos mejor resultado Pero eso no es lo que necesitamos en realidad. Tenemos que cambiar el nombre de la clase ahora, todo funciona perfectamente. Bien, sentémonos sobre la navegación. Sigamos adelante y nos ocupemos de los toboganes. Voy a establecer el color de fondo para el envoltorio de imagen para entonces necesitamos que el objeto se ajuste a las imágenes. Se va a cubrir. Y también voy a disminuir la opacidad 2.3 Ahora las imágenes se ven mucho mejor Vamos a agregar la propiedad de índice z a la barra n, que sea diez. A continuación, voy a seleccionar una cacerola que establezca el ancho en 100 Ram. Y la altura va a ser 100 Ram también. Voy a poner la posición a absoluta. Entonces posicionamos absoluta para elemento padre que es una diapositiva, voy a establecer dos posiciones a 50% entonces posición va a ser 50% Y luego para centrar, necesitamos transformar traducir -50% y otra vez 50% Bien, después de eso voy a seleccionar encabezado PG Vamos a definir la posición, voy a hacerla absoluta. Entonces necesitamos posicionar 20% a la izquierda, posición va a ser 50% Para el centrado horizontal, necesitamos transformar traducir x -50% Aquí tenemos el rubro, pongamos la familia telefónica a Inknut Antique Entonces el tamaño del teléfono va a ser 20 Ram. A continuación voy a usar Webkit text stroke, necesitamos fondo transparente y el borde necesitamos 0.05 Ram Y el color va a ser blanco. Color de siguiente minuto para ser transparente. Tenemos aquí rumbo. En realidad, tenemos que cambiar aquí, esta carta. Ahora el problema está arreglado. Vamos a establecer el espaciado entre letras en 1.5 Ram. Necesitamos algo de espacio entre las letras. Y luego voy a configurar Opacity 2.4 creo que el encabezado se ve bastante genial Seleccionemos el encabezado principal. Voy a poner posición a posición absoluta va a ser 47% La posición izquierda va a ser 22% Entonces necesitamos el tamaño del teléfono, voy a ponerla en un tranvía. Entonces voy a transformar texto en mayúsculas. Cambiemos el color. Voy a hacer blanco, entonces voy a aumentar el espacio entre las letras. Hagámoslo 0.5 Ram. El rumbo se ve bastante bien. En realidad, voy a añadir aquí el peso de la fuente. Vamos a hacer 300, ¿de acuerdo? Después del encabezamiento principal, voy a encargarme del párrafo. Vamos a establecer la posición en absoluto. Entonces la posición inferior va a ser 35% Entonces voy a establecer posición izquierda en 50% Y necesitamos centrar el elemento horizontalmente usando transform translate x -50% Vamos a establecer el ancho a 80 Ram Entonces voy a establecer el tamaño del teléfono en 1.8 Ram. Cambia los pesos del teléfono, pongámoslo en 300. Además, necesitamos alinear el texto en el centro y luego el color va a ser blanco. Aquí tenemos el párrafo. A continuación voy a tomar aquí del fondo. Vamos a establecer el ancho a 20 Ram. Entonces la altura va a ser cinco Ram. A continuación voy a establecer la posición en absoluto. La posición inferior va a ser 27% Para la posición izquierda, voy a establecer en 50% Y luego nuevamente necesitamos enviar al elemento usando transform translate x function -50% La parte inferior se coloca en el centro A continuación voy a cambiar el color de fondo, va a ser transparente. Voy a poner borde 2.1 Ram y el color va a ser blanco, el tamaño del teléfono a 1.8 Ram. Entonces voy a transformar texto en mayúsculas. También crea espacio entre las letras, hazlo 0.1 Ram. Entonces cambia de color, va a ser blanco. Además, necesitamos cursor para ser puntero. A continuación, va a seleccionar Botón, seguido de los cuatro elementos. Vamos a configurar el contenido en vacío. Necesitamos crear las partes blancas al flotar. Vamos a establecer el ancho a 20 Ram. Entonces la altura va a ser diez Ram. Cambiemos el color de fondo, vamos a hacerlo blanco. Entonces la posición va a ser absoluta a la izquierda la posición va a ser -14 Ram En cuanto a la posición de dos, voy a ponerla a cero. Entonces necesitamos transformar con función de rotar por dirección z. El valor va a ser de 45 grados. Aquí tenemos los elementos blancos en el lado izquierdo de la parte inferior. Necesitamos lo mismo usando después de elementos necesitamos los elementos. Quiero decir, elementos blancos en el lado derecho. Cambiemos la posición que necesitamos. ¿Verdad? En cuanto a la posición dos va a ser menos cinco fram, tenemos la segunda parte del lado derecho Voy a crear el efecto hover que necesitamos aquí. Antes flotar, voy a aumentar la escala del elemento Vamos a establecerlo en 2.4 Necesitamos lo mismo para los after s, los elementos. Usemos la transición para un efecto más suave. Si flojo, entonces esos elementos aumentarán. A continuación, voy a seleccionar Patton con hover y voy a cambiar el color del texto. Hagámoslo negro. Además, necesitamos transición con algún retraso, tiempo 0.3 segundos. También necesitamos la transición por defecto para el patton. Pero en este caso, sin transición, sin demora, hay que añadir. Aquí está la propiedad index con valor negativo para mostrar el texto. Aquí tenemos el texto. Ahora tenemos que ocultar esas partes blancas fuera del parton usando desbordamiento oculto Ahora tenemos aquí bonito y fresco efecto hover. Bien, agreguemos al efecto de sombra de aterrizaje con valores 01 Ram, tres Ram. Y el RGBA color negro con la opacidad 0.7 Ahora tenemos aquí bonito y fresco efecto de sombra En realidad me voy a deshacer de scrollbar usando overflow heiden para el contenedor, Las barras de desplazamiento Voy a duplicar diapositiva un par de veces. Tendremos cuatro diapositivas diferentes. Hagamos algunos cambios que necesitamos aquí. Diapositiva dos. También cambiar el nombre de la imagen, y necesitamos cambiar los encabezamientos y Recetas Deliciosas A continuación, necesitamos aquí la diapositiva tres. También cambia el contenido de los encabezados que necesitamos aquí, Enjoy En cuanto al segundo encabezamiento , van a ser ingredientes frescos. Entonces tendremos aquí la diapositiva cuatro. Cambiar el nombre de la imagen y también cambiar el contenido del encabezado Elementos. Tendremos aquí Explore y luego Top Cuisines. Bien, ahora es el momento de escribir algo de Javascript y hacer que la presentación de diapositivas funcione. Voy a crear una presentación de diapositivas variable, que va a ser la función. A continuación, necesitamos seleccionar diapositivas y convertirlas en una matriz usando el método array. Necesitamos aquí para diapositivas usando el método selector de consultas. Especificemos aquí la diapositiva del nombre de la clase. Voy a correr por la consola para poder ver la salida. Llamemos a la función. Si inspecciono la página y luego cambio a la pestaña de la consola, obtendremos aquí una matriz que constará de cuatro diapositivas diferentes. Como puede ver, aquí tenemos desarrollos con los nombres de las clases y con los números de índice. A continuación, voy a crear una variable llamada current, que será el contador. Voy a configurarlo en uno por defecto. A continuación necesitamos aquí si declaración en la que voy a definir lo siguiente. Si la corriente es mayor que la longitud de dos diapositivas, me refiero al número de diapositivas, entonces tenemos que establecer la corriente en una. De lo contrario, quiero decir, si la corriente es igual a cero, entonces tenemos que establecer la longitud actual de dos diapositivas. Además, necesitamos aquí operador actual más incremento. Tenemos que aumentar la corriente en uno. A continuación, voy a usar el método set interval. Yo llamo función de presentación de diapositivas. Necesitamos mil milisegundos. A continuación, voy a mirar a través de los portaobjetos usando el método de forraje Necesitamos su declaración en la que necesitamos la lista uno, tenemos que acceder al nombre de la segunda clase en la diapositiva. Entonces necesitamos el método split. Tenemos que dividirlo y tenemos que agarrar el segundo artículo. Tenemos que hacerlo número, entonces debería ser igual a actual. Si esta condición es verdadera, agregue a la diapositiva los siguientes estilos CSS. Aquí necesitamos, visibilidad visible y también opacidad uno Entonces necesitamos L declaración. Si esta condición es falsa, entonces tenemos que hacer esta diapositiva oculta usando visibilidad oculta y opacidad cero, ¿bien? Entonces ahora como pueden ver, diapositivas está funcionando. Las diapositivas están cambiando con un intervalo de 1 segundo. Voy a usar transición para la diapositiva con opacidad y la duración va a ser 0.3 segundos. Ahora las diapositivas están cambiando más suave, necesitamos aquí. Color de fondo para ser negro con el fin de crear un efecto de fundido mucho más agradable Y también, necesitamos cambiar el intervalo. Cambiemos también la duración de la transición. Ahora tenemos aquí un resultado mucho mejor y genial. La presentación de diapositivas funciona perfectamente. A continuación voy a encargarme de la barra lateral. Fijemos la posición fija. Entonces necesitamos posicionarnos para ser cero. La posición correcta va a ser cero también. Entonces el ancho va a ser de 50 Ram. En cuanto a la altura, voy a hacerla 100 ver altura de la olla. A continuación, cambiemos el color de fondo. Va a ser D DD. Aquí tenemos la barra lateral. Usemos la propiedad index para ocultar el icono del menú. Ahora el problema está arreglado. A continuación, seleccionemos la barra lateral I Elementos. Estoy en el botón de cierre X I, la posición a absoluta, y la posición superior va a ser dos Ram. La posición correcta va a ser cinco Ram. Entonces voy a aumentar el tamaño del teléfono. Hagámoslo un Carnero. Cambia el color del icono. Va a ser 555. Además, necesitamos cursor para ser puntero. En realidad, el icono no es visible. Vamos a revisar el archivo HTM del que necesitamos deshacernos de aquí. Ahora el icono es visible y se ve bastante bien. A continuación, voy a encargarme de la navegación. Voy a establecer el ancho a 40 Ram. Entonces la altura va a ser 15 Ram. Voy a establecer frontera 2.1 Ram soluto. Y el color va a ser 999. Entonces necesitamos posición para ser absolutos. Top position va a ser 50% posición negra va a ser 50% Necesitamos centrar el elemento. Necesitamos transformar traducir. -50% y otra vez -50% Siguiente Voy a seleccionar el lado B, Vamos a establecer el ancho a 40 Ram. Entonces la altura va a ser 15 Ram. Voy a cambiar el color de fondo. Vamos a configurarlo en transparente. Siguiente Voy a poner frontera a non. También necesitamos familia para ser sansif inknut. A continuación, necesitamos que el tamaño de fuente sea seis ram. Voy a transformar texto en mayúsculas. Entonces otra vez, voy a usar trazo de texto del kit Web para hacer que el texto sea más agradable Necesitamos aquí 0.1 Ram 222 y luego el color va a ser transparente. A continuación, pongamos el cursor a punto. Tenemos aquí el fondo, que se ve bastante bien. Cambiemos la altura de la navegación. Hacerlo 60 rampa. Tenemos que colocar los artículos aquí. Seleccionemos la barra lateral. Ahora los artículos configuran la pantalla para flexionar. A continuación necesitamos dirección flex para ser columna. También, voy a establecer la posición en absoluto. Entonces la posición superior va a ser 30% let position será 50% Vamos a establecer transform para traducir X y el valor va a ser -50% Necesitamos centrar el elemento horizontalmente Vamos a establecer el Centro de Alineación de Texto. Aquí tenemos los elementos de navegación alineados. Ahora tenemos que seleccionar Link Element y personalizarlos. Vamos a establecer el tamaño del teléfono en tres Ram entonces. El color va a ser 888. Entonces necesitamos, pongamos margen a una B y cero. Necesitamos transformar el texto en mayúsculas. Los artículos se ven bien. Ahora tenemos que crear un efecto hover. Agreguemos aquí hover. Hacer clase, voy a cambiar el color al flotar. Vamos a establecerlo en 444. Y también usa transición para un efecto más suave. Tenemos aquí un efecto hover. A continuación, voy a esconder la barra lateral. Vamos a establecer la posición correcta dos -50 Ram. Ahora usa Javascript para mostrarlo. Al hacer clic, voy a crear barra lateral variable TN. Seleccionemos este elemento usando el método selector de consultas. Especifique aquí el nombre de la clase, barra lateral, PTN. Voy a duplicar este código un par de veces. La segunda variable va a ser sidebar. Cambiemos el nombre de la clase. Entonces tendremos icono de menú. Además, necesitamos cerrar el botón X. Seleccionemos este elemento. Necesitamos agregar un oyente de eventos al icono del menú con clic Evento con una función de devolución de llamada. Voy a agregar nueva clase a la barra lateral. Una vez que hacemos clic en el icono del menú usando el método, llamemos al nombre de la clase, navegue. Duplicemos este código que necesitamos eliminar. Necesitamos aquí x cerrando. Pero una vez que hacemos clic en X, entonces necesitamos eliminar la clase. Navegar. Bien. Ahora usemos navegar, seguido de la barra lateral. Voy a cambiar la posición correcta. Hagámoslo cero. Y entonces necesitamos la transición. Voy a entrar aquí, justo entonces la duración va a ser de 0.5 segundos. Y también necesitamos función cúbica con los valores 100.1 Si hago clic en el icono del menú, entonces llegaremos aquí barra lateral y se cerrará Una vez que haga clic en el botón Cerrar. Bien, ahora necesitamos ocultar los artículos. Digamos opacidad a cero y visibilidad oculta. A continuación voy a cambiar la altura de la de 32 15 Ram. Ahora voy a agregar incluso oyente al botón de la barra lateral con el evento nuevamente click Necesitamos aquí una función de devolución de llamada. Una vez que hacemos clic en el botón, entonces tenemos que añadir a la barra lateral otra usando el método total. Llamemos al cambio de clase. Ahora tenemos que seleccionar barra lateral. Ahora con el cambio de clase, tenemos que aumentar la altura al hacer clic, vamos a hacerlo 60 Ram. Y también utilizar de nuevo transición con los valores altura. La duración va a ser de 0.5 segundos. Ahora si hago clic en el botón, entonces el elemento se expandirá. Ahora tenemos que mostrar los elementos de navegación. Necesitamos tu cambio de clase, seguido de los n ítems. Necesitamos establecer la opacidad a uno y la visibilidad a factible. A continuación, necesitamos la transición aquí. Va a ser todo 0.5 segundos y necesitamos tiempo de retardo 0.5 segundos. Ahora una vez que haga clic, entonces los elementos de navegación se mostrarán muy bien. Bien, así que todo funciona perfectamente. Ahora tenemos que hacer que el proyecto sea receptivo. Cambiemos al modo de respuesta. Voy a establecer el ancho y la altura para el tamaño de pantalla extra grande. Y luego voy a encontrar los puntos de interrupción sobre los que necesitamos hacer algunos cambios Voy a usar media queries CSS para hacer que el proyecto sea receptivo. Vamos a seguir adelante y crear CSS media query. Voy a especificar el ancho máximo como 1,200 pixeles. Establecer el lado del teléfono del elemento H dem 250, 5% Vamos a disminuir el tamaño de la pantalla. Como puede ver, los elementos se hicieron más pequeños después de 1.200 píxeles. A continuación, necesitamos encontrar el siguiente punto de quiebre. Cree una consulta de medios CSS y especifique el ancho máximo como 1,000 píxeles. Voy a establecer el tamaño del teléfono del elemento H tim al 50% para que todo se vea bien. Seleccionemos el encabezado de fondo y establecemos el tamaño de fuente en 16 Ram. Entonces voy a establecer las dos posiciones a 25% Siguiente voy a seleccionar el párrafo y establecer el ancho a 60 Ram. Creo que todo se ve bien y necesitamos encontrar el siguiente punto de quiebre. Voy a crear una nueva consulta de medios CSS. Vamos a establecer el ancho máximo en 800 píxeles. Voy a disminuir de nuevo el tamaño de fuente del elemento H m. Vamos a establecerlo en 45% Siguiente Voy a seleccionar navegación. Me refiero a los elementos de enlace, y establecer el margen en 0.1 Ram. A continuación, vamos a encargarnos de la pancarta. Voy a agarrar el código de aquí, Cambia el tamaño del teléfono, hazlo 14 Ram. En cuanto a la posición de dos, voy a hacerla 28% Siguiente, vamos a seleccionar el encabezado principal, Establecer el tamaño del teléfono a siete Ram. En cuanto a la posición izquierda, voy a hacerla 25% Bien, sigamos adelante y encontremos el siguiente punto de quiebre. Sigamos adelante y creamos nueva consulta de medios Cess. Y especificar el ancho máximo que va a ser de 600 píxeles. Voy a establecer el tamaño del teléfono del elemento Html 40% A continuación necesitamos navegación. Voy a ocultarlo. A continuación necesitamos encabezamiento de fondo. En realidad ambos encabezamientos. Hagamos aquí algunos cambios. Ajusta el tamaño del teléfono a diez Ram. Entonces la posición de dos va a ser 33% En cuanto a la cabecera principal, voy a establecer el tamaño del teléfono en seis Ram. En cuanto a la posición, pongámosla en 27% Bien, creo que todo se ve bastante bien. Y ahora tenemos que llevarte del último punto de quiebre. Vamos a seguir adelante y crear una nueva consulta de medios CSS y especificar el ancho máximo como 450 píxeles. Voy a establecer el tamaño del teléfono del elemento HTM en 35% Además, necesitamos que la barra lateral se expanda en toda la página. Vamos a establecer con 100% En cuanto a la posición correcta, voy a hacerla -100% Una vez que haga clic, entonces la barra lateral se expandirá a toda la página A continuación voy a seleccionar el encabezado principal y establecer el tamaño del teléfono 25 fram hasta el punto La posición de la izquierda va a ser 29% Entonces voy a seleccionar el párrafo que se establece con 245 fram Ahora creo que todo se ve bastante bien, y de hecho con el proyecto ya terminamos. Responde a diferentes tamaños de pantalla. Ojalá fuera interesante y aprendas algunas cosas nuevas. Sigamos adelante. 23. Project 18 - Tarjeta de perfil: Bien, así que sigamos adelante y comencemos a crear un nuevo proyecto. En esta sección, vamos a estar construyendo una tarjeta de perfil. El proyecto se creará en base a HTML, CSS y Javascript. Sigamos adelante y describiéndolo rápidamente. Como pueden ver, tenemos aquí una tarjeta con una imagen de una persona. Abajo, puedes ver el botón más. Si hago clic en ella, entonces la tarjeta se expandirá y verás los detalles sobre la persona como nombre, posición, enlaces de redes sociales y así sucesivamente. El botón más se cambia para contactarme. Si hago clic en el botón hacia atrás, entonces la tarjeta se cerrará. Bien. Entonces ese sentarse sobre el proyecto es sencillo, pero creo que va a ser interesante y útil porque hoy en día muchos sitios web necesitan tener tarjetas de perfil. Sigamos adelante y comencemos. He creado una nueva carpeta en el escritorio en la que tengo otra carpeta para imágenes. Vamos a abrir la carpeta en código VS, luego crear los archivos de trabajo para HTML, para CSS. También necesitamos un archivo para script Java. Entonces voy a abrir el índice así archivo mel y crear un documento básico H mel. Cambiemos el título. Va a ser tarjeta de perfil. Entonces voy a vincular los archivos CSS y Charles. Necesitamos aquí la etiqueta script y el nombre del archivo en el atributo source. Bien, sigamos adelante y abramos el proyecto al navegador usando servidor en vivo. Y luego voy a colocar el editor en el navegador lado a lado. Entonces a continuación visito el sitio web de Google Phones. Porque vamos a usar los teléfonos de Google durante todo el proyecto, sigamos adelante y busquemos el teléfono llamado punto. Voy a seleccionar un par de estilos diferentes, luego copiar el enlace y pegarlo en el elemento hide. Además de eso, voy a agarrar el teléfono increíble enlace CDN Vamos a usar iconos impresionantes del teléfono a lo largo del proyecto. Vamos a copiar el enlace desde aquí. Después abre enlace, tira y cabeza elemento y pega aquí el CDM Bien, entonces estamos listos para comenzar a escribir el marcado HTML. Voy a crear el contenedor que envolverá todo el contenido. Entonces tendremos tarjeta en que voy a insertar Deep Tug, que va a estar arriba dentro de ese elemento Para insertar Cardmage, necesitamos aquí imagen. Sigamos adelante y seleccionemos la imagen de la carpeta de imágenes. A continuación, voy a insertar aquí dar verificado, en el que voy a insertar fonosomicon, necesitamos una comprobación FA sólida A continuación voy a crear el fondo con tarjeta de clase BTN. Vamos a especificar el tipo del elemento que va a ser inferior. Entonces te voy a insertar elementos de pan con la clase. Entonces necesitamos otro panelement con el nombre de la clase BTN text Voy a insertar contactame Siguiente, voy a crear fondo de tarjeta. Necesitamos H uno encabezando elementos con el nombre de John Smith. A continuación necesitamos H tres elemento de rumbo para la posición. Va a ser diseñador de productos. A continuación voy a crear desarrollo, que van a ser las redes sociales. Inserto aquí otro Deps, sea social Info. Vamos a instituir elementos con los nombres de las clases, marcas FA vinculadas en. A continuación necesitamos elementos span con el nombre de la clase. Vamos a instituir algún número, entonces necesitamos otro elemento span con los seguidores de la clase. Vamos a instituir seguidores de texto. Bien. Voy a duplicar este código dos veces. Cambiemos los fonemíconos. El segundo va a ser FA Instagram. Voy a cambiar esos números. El tercero va a ser FA Facebook. Cambiemos el número. Bien, así que todo está listo. Sigamos adelante y comencemos a escribir CSS. Voy a establecer margen y poner para cada elemento a cero, luego voy a establecer el tamaño de la caja a cuadro de borde. A continuación necesitamos familia telefónica. Va a ser Ubuntu San Serif. Voy a establecer el tamaño del teléfono del elemento HTML en 62.5% para poder usar el Ram como unidad de medida En este caso, una Ram será igual a diez píxeles. A continuación, voy a seleccionar la imagen de la parte superior de la tarjeta que tiene el ancho establecido en 12 Ram. Entonces la altura va a ser 12 Ram también. A continuación voy a seleccionar la propia imagen. Vamos a establecer el ancho al 100% Entonces la altura va a ser 100% también. Además, necesitamos aquí pies de objeto con el valor color. Ahora la imagen se hizo más pequeña y ahora podemos encargarnos del contenedor. Vamos a establecer el ancho al 100% entonces la altura va a ser de 100 macetas de altura. A continuación, voy a cambiar el color de fondo. Vamos a usar aquí el color 13124. A continuación voy a seleccionar la tarjeta. Vamos a poner a 35 Ram. Entonces la altura va a ser de 60 Ram. A continuación necesitamos color de fondo, va a ser 32365 A continuación, voy a establecer la posición en absoluto. Y necesitamos posición relativa para el elemento padre, que en este caso es contenedor. Voy a establecer la posición superior a 15% posición izquierda va a ser 50% Y necesitamos transformar traducir x con -50% para poder centrar el elemento horizontalmente Entonces como puedes ver la tarjeta está centrada. A continuación, voy a establecer el radio de borde a un Ram. Además, voy a crear alguna sombra. Vamos a insertar 03 Ram, seis Ram. Y el color va a ser negro con la opacidad 0.5 Tenemos aquí bonito efecto de sombra Bien, después de eso, voy a seleccionar la parte superior de la tarjeta. Vamos a establecer la altura a 25 Ram. Entonces voy a establecer la posición para la imagen en absoluto. Necesitamos posición relativa para el elemento padre. Vamos a establecer la posición superior a cinco fotogramas. Entonces la posición de la izquierda va a ser 50% Nuevamente, necesitamos centrar el elemento usando transform translate x -50% la imagen se centra horizontalmente Después de eso, voy a hacer redondear la imagen. Usando el radio de borde 50% la imagen se volvió redondeada. También necesitamos sombra de caja. Va a ser 01 Ram, tres Ram, y el color va a ser RGBA En realidad, tenemos aquí un pequeño problema, no vemos aquí el teléfono, así que icono estoy en el cheque. Veamos el código HT que necesitamos aquí. Estos elementos. Ahora el problema está arreglado. Volvamos al archivo CSS. Seleccione el desarrollo con la clase verificada. Voy a poner el camino a 2.5 Ram. Entonces si la altura va a ser 2.5 frame también, voy a cambiar el fondo. Va a ser gradiente lineal. Vamos a definir la dirección va a ser dos, ¿no? Y el primer color va a ser un 35c6, luego el segundo color va a ser tres Cinco BP. Como pueden ver, tenemos aquí un bonito fondo. Vamos a establecer el radio del borde a 50% Necesitamos elemento redondeado. También necesitamos banderas de exhibición. Y para centrar el elemento, necesitamos justificar el centro de contenido, y un centro de líneas de artículos. Entonces, como puedes ver, el ícono de Ponso está centrado dentro del círculo A continuación voy a establecer la posición en absoluto. Entonces necesitamos la posición inferior para ser uno Ram. En cuanto a la posición correcta, voy a hacer que sea cero. Bien, después de eso, voy a tomar del ícono. Aumentemos el tamaño del teléfono. Va a ser 1.5 Ram. Y cambiar el color. Voy a hacerlo blanco. Ahora el icono se ve bastante bien. A continuación, sigamos adelante y seleccionemos tarjeta BTN y obtuve el ancho establecido en 17 Ram Entonces la altura va a ser 4.5 Ram. A continuación voy a cambiar el fondo. Utilice de nuevo gradiente lineal. La dirección va a ser a la derecha. El primer color será 82 62d2. Entonces el segundo color será DC 561. Tenemos aquí bonito gradiente. Fijemos la posición a absoluta. Entonces necesitamos posicionar para ser 22.5 desde la posición de laboratorio va a ser 50% Y luego necesitamos centrar el elemento usando transform translate x -50% el Batson A continuación, me voy a deshacer de la frontera por defecto. Entonces voy a hacerlo redondeado usando radio de borde tres Ram. Siguiente Voy a establecer box shadow 201m3 Ram. Y el color va a ser GPA con la opacidad 0.3 A continuación voy a poner el cursor de dos puntos Bien, después de eso voy a seleccionar más, pongamos la posición a absoluta. Entonces la posición de dos va a ser del 50% Necesitamos la posición 1.5 Ram. Entonces voy a centrar el elemento verticalmente usando transform translate Y -50% Además, voy a rotar el elemento por dirección z con el valor -45 grados Vamos a establecer el tamaño de la fuente en tres Ram. El color va a ser blanco. Tenemos aquí x. Siguiente Voy a seleccionar texto BTN Vamos a establecer el tamaño del teléfono en 1.6 Ram y el color va a ser el blanco. Puse la forma del teléfono en negrita. A continuación, vamos a crear algo de espacio entre las letras. También, voy a establecer la posición en absoluto. La posición superior va a ser del 50% entonces la posición derecha va a ser tres Ram. Nuevamente, necesitamos censurar el elemento, particularmente usando transform translate Y -50% Bien, el fondo se ve bastante A continuación voy a encargarme del fondo. Vamos a establecer la altura a 35 Ram. Entonces necesitamos flex box. Voy a establecer dirección flex a columna. Entonces voy a alinear elementos en el centro. En cuanto a la propiedad de contenido justificada, voy a establecerla en el espacio de manera uniforme. Entonces como puedes ver, los elementos están alineados verticalmente. Vamos a colocar el relleno en los cinco primeros Ram. A continuación voy a encargarme del elemento H one heading, que es el nombre que establece el tamaño de fuente en tres. Entonces el peso del teléfono va a ser de 300. Además, voy a cambiar el color, hacerlo blanco. A continuación, voy a duplicar este código y cambiar el selector que necesitamos aquí H tres elemento de encabezado, el tamaño del teléfono va a ser 1.2 Ram. Entonces voy a cambiar el color. Va a ser D111. Entonces necesitamos espaciado entre letras a 0.1 Ram. Además, voy a mover el elemento hacia arriba usando margin, top menos cuatro Ram. Bien, después de eso voy a encargarme de las redes sociales. Vamos a establecer el ancho al 100% Necesitamos caja flexible para alinear. Elementos horizontalmente. Vamos a usar justificar el espacio de contenido de manera uniforme. Siguiente Voy a seleccionar nuevo la información social que necesitamos, flex box. Entonces tenemos que cambiar la dirección que necesitamos para alinear los elementos verticalmente. Vamos a establecer líneas de pedido al centro, los elementos están alineados y ahora tenemos que seleccionar elementos. Vamos a establecer con seis Ram. Entonces la altura va a ser seis Ram también. Voy a cambiar el color de fondo. Usemos CCC. Entonces voy a usar Flexbox para centrar los íconos, los íconos están centrados A continuación, voy a establecer el radio del borde al 50% También necesitamos pok shadow con los valores 01 Ram, tres Ram, y el color va a ser RGBA Vamos a establecer el tamaño de fuente en 1.8 Ram. Después cambiar el color va a ser blanco. Vamos a deshacernos del color de fondo temporal. Después voy a seleccionar la primera información social usando el selector de Id. Cambiemos el color de fondo. Voy a usar gradiente lineal. La dirección va a ser dos, ¿verdad? cuanto al primer color, voy a usar 0077b Entonces tendremos 5107. Duplicemos este código dos veces, cambiemos los selectores de gráficos El color para el segundo icono va a ser 833ab, cuatro. En cuanto al segundo color, va a ser C13 584. También necesitamos aquí, el tercer color va a ser el 13, su seis. Bien, vamos a encargarnos del tercer artículo que necesitamos aquí, 42672 Entonces el segundo color va a ser 5581. Bien, así que los tres íconos se ven bastante bien. A continuación tenemos que encargarnos de los entumecidos. Vamos a establecer el tamaño del teléfono. Va a ser 1.8 Ram. Entonces necesitamos el peso de la fuente, va a ser negrita. Y también voy a cambiar el color. Hagámoslo EEE. Entonces necesitamos margen. 1.5 Ram, 010.5 Ram, y cero. Nuevamente, los números se ven bastante bien. A continuación tenemos que cuidar a los seguidores. Vamos a establecer el color dos AA. ¿Correcto? En realidad la tarjeta está estilizada Ahora tenemos que usar Javascript. Vamos a crear botón de variable. Voy a seleccionarlo usando el método selector de consultas. Tenemos que especificar aquí el nombre de la clase. Va a ser tarjeta BTN. A continuación necesitamos otra variable. Va a ser tarjeta la que esté seleccionada. Ahora voy a agregar el oyente de eventos al botón con un evento click También tenemos que pasar aquí la función de devolución de llamada. Voy a agregar nueva clase a la tarjeta usando el método togal El nombre de la clase va a ser cambiado y tenemos que usar esta clase en CSS para crear nuevos estilos que necesitamos usar al hacer clic. Sigamos adelante y cambiemos la altura de la tarjeta. Va a ser 25 frame. Entonces necesitamos de encabezamientos usando opacidad cero y visibilidad oculta. Necesitamos lo mismo para la info. También voy al texto de Hyde PTN. En realidad, cambiemos el ancho del patrón, que sea cinco. Entonces voy a cambiar la posición de la izquierda va a ser 50% Además, deshazte de la función de rotar por un tiempo. Entonces necesitamos traducir con -50% dos veces. Bien, así que eso es todo. Ahora necesitamos aquí cambio seguido de la tarjeta. Vamos a establecer la altura, 260 Ram. Voy a usar tu altura de transición y la duración va a ser de 0.5 segundos. Si hago clic, entonces se incrementará la altura de la tarjeta. Bien, a continuación voy a tomar del botón. Vamos a usar de nuevo cambio rápido seguido del auto, BTN, voy a aumentar el ancho, va a ser 17 Ram Vamos a usar aquí la transición. Si hago clic en el botón, entonces el tamaño del mismo aumentará. A continuación, voy a seleccionar el cambio con plus que necesitamos aquí a la izquierda posición 1.5 Ram. Además, voy a rotar el elemento que necesitamos al principio traducir Y -50% y luego rotar la función Z con valor -45 grados Luego usa la transición para un efecto más suave. Si hago clic, entonces el signo más girará y el patrón se expandirá. En realidad, necesitamos aquí escondidos, no el H. Voy a mostrar el texto BTN de vuelta Entonces necesitamos aquí cambiar el texto BTN. Y tenemos que establecer la opacidad a uno y la visibilidad a visible Además, voy a usar la transición. Tenemos que adherir un poco de retraso, tiempo 0.5 segundo. Si hago clic, entonces todo va a funcionar perfectamente. A continuación, voy a encargarme de los rubros. Seleccionemos el cambio seguido del elemento H one heading. Voy a mostrarlos de nuevo. Vamos a establecer la opacidad a uno y la visibilidad a visible. Y también necesitamos transición. El tiempo de retardo va a ser de 0.5 segundos. Si hago clic entonces el primer encabezado aparecerá muy bien. Hagamos lo mismo para los elementos del segundo encabezamiento. Cambiemos aquí el selector, el tiempo de retardo va a ser de 0.6 segundos. Como puede ver, los encabezados se muestran muy bien. Hagamos lo mismo con las redes sociales. Voy a seleccionar cambio seguido del selector infantil de información social. Primero, fijemos la opacidad a uno y la visibilidad a visible Aquí necesitamos la transición. Los tres artículos tendrán diferentes tiempos de retraso y crearán un bonito efecto. Necesitamos aquí 0.8 segundos. Duplicemos este código dos veces, cambiemos los selectores secundarios enésimo, y también cambiemos el tiempo de retardo Necesitamos 0.9 segundos y 1 segundo. En realidad tenemos que cambiar aquí el número. Ahora si hago clic, entonces todo va a funcionar perfectamente. Y tenemos aquí una tarjeta de perfil agradable y genial. Bien, así que ojalá fuera interesante, disfrutaste de este proyecto. Vamos a seguir adelante. 24. Proyecto 19 - Formulario de inicio de sesión / registro: Bien, así que es hora de seguir adelante y crear nuestro próximo proyecto. En esta sección, vamos a estar construyendo una forma de signum de firma moderna y genial El proyecto se creará en base a HTML, CSS y Javascript. Como puedes ver, el proyecto tiene un diseño moderno y bastante impresionante. Por defecto, tenemos aquí una forma signum. La forma en sí tiene un bonito fondo con diferentes formas. En el lado izquierdo, se puede ver la planta. Entonces tenemos aquí un encabezado seguido de los campos de entrada. Además, tengo aquí una marca de verificación personalizada. Abajo puedes encontrar algunos enlaces de redes sociales. Si hago clic en el enlace de firma, entonces obtendremos aquí el formulario de firma con solo dos campos de entrada. Si hago clic en el formulario de registro, entonces volveremos al formulario de registro. Bien, así que sentémonos sobre el proyecto, comencemos. He creado una nueva carpeta en el escritorio en la que tengo carpeta para las imágenes. Vamos a abrir el proyecto en código BS, y luego voy a crear nuestros archivos de trabajo. El primero va a ser índice del HTML. Entonces tendremos archivo para CSS. Y también necesitamos un tercer archivo para Javascript script JS, abrir el archivo HTM índice, y crear la estructura HTM básica. Voy a cambiar el título. Va a ser inicio de sesión, formulario de registro. A continuación, voy a vincular el archivo CSS. También necesitamos vincular el archivo Gil Sky. Vamos a abrir guión Tac. Especifique el nombre del archivo en el atributo source. Bien, sigamos adelante y abramos el proyecto al navegador usando servidor en vivo. Y también voy a colocar el navegador y el editor uno al lado del otro, así. Sigamos adelante y comencemos a crear el H DM en mark up. Voy a abrir la etiqueta div que va a ser el contenedor, va a incluir todo el contenido. Entonces necesitamos otro dip que va a ser el fondo. A continuación necesitamos envoltorio de formulario en el que voy a insertar Imagen. Seleccionemos Imagen en la carpeta de imágenes. Va a ser planta. Vamos a deshacernos del atributo Alt. A continuación, necesitamos crear H un elemento de encabezado. Agrega aquí el encabezado del formulario de clase. Voy a insertar aquí el siguiente texto. Rellene el formulario y forme parte del equipo. A continuación, necesitamos elementos de formulario con el formulario de contacto de clase. Vamos a deshacernos del atributo action, luego inserte aquí el elemento deep, que va a ser togal links Voy a insertar aquí un elemento con el enlace de toggle class. Y también necesitamos otro registro de clase. Insertemos texto, inscríbase. En realidad necesitamos registrarnos y no iniciar sesión. Duplicemos el código, iniciemos sesión y también cambiemos el nombre de la clase. Necesitamos aquí iniciar sesión. Bien, después de eso, voy a crear un desarrollo que serán insumos. Vamos a abrir la etiqueta de entrada con un texto de tipo y también con el campo de entrada de nombre de clase. Además, necesitamos otra altura de clase. Vamos a agregar aquí el atributo de marcador de posición con el nombre del texto Duplicemos la entrada T tres veces. Apellido. El siguiente va a ser el correo electrónico. Tenemos que cambiar el tipo y también el marcador de posición, va a ser la dirección de correo electrónico Necesitamos que lo exhiba. El siguiente va a ser pasaporte. Necesitamos que lo exhiba. Y también cambiar el atributo placeholder. Va a ser pasaporte. Bien, después de eso, voy a crear una casilla de verificación. Agreguemos aquí la clase hyde. Voy a insertar tu entrada con la casilla de verificación tipo. También necesitamos su identificación. Va a ser cheque. Entonces después del elemento de entrada, voy a etiquetar para comprobar el texto es estoy de acuerdo. Entonces necesitamos elemento span con el texto. Términos de servicio. Todo bien. Después de eso voy a crear el botón. I Presentar botón donde se presenta la clase. El tipo va a ser botón como texto. Voy a inscribirme. A continuación necesitamos las redes sociales. Estoy en elementos con la clase. A marcas, FA, Facebook. Duplicémoslo tres veces y cambiemos los nombres de las clases. El segundo va a ser Instagram. Entonces tendremos Twitter. Eso es porque el último icono va a estar vinculado en. En realidad se crean todos los elementos y ahora voy a agarrar de forma enlaces CDN, copiar el enlace de aquí Después voy a abrir la etiqueta de enlace en el elemento head e insertar CDN en el atributo de referencia H. Como puedes ver ahora se muestran los iconos. A continuación, voy a visitar el sitio web de Google Phones. Porque vamos a utilizar diferentes teléfonos de Google a lo largo de este proyecto. Visitemos el sitio web y busquemos, ¿no? Esta va a ser la primera. Voy a seleccionar un par de estilos diferentes. A continuación, voy a buscar otro teléfono donde se va a labrar, p. vamos a seleccionar el estilo, luego voy a agarrar el enlace y pegarlo en el elemento head Bien, sigamos adelante y comencemos a escribir el CSS. Voy a seleccionar cada elemento usando un pan de asterisco, establecer margen y ponerlos a cero A continuación, necesitamos establecer el tamaño de la caja para abordar la caja, también contorno a ninguno. Entonces tenemos que deshacernos de la decoración de texto predeterminada y también cambiar la familia telefónica. Va a ser cansif. Además de eso, voy a establecer el tamaño del teléfono del elemento H ml en 62.5% En este caso, un m será igual a diez píxeles, y usaremos M como unidad de medida Se aplican los estilos por defecto, ahora tenemos que cuidar la imagen porque es demasiado grande. Ahora mismo vamos a seleccionar formulario, envoltorio, imagen, y establecer la visualización en ninguno. Bien, eso es, la imagen está oculta. Ahora podemos encargarnos del contenedor. Vamos a establecer el ancho al 100% entonces la altura va a ser de 100 ver la altura del bote. Voy a cambiar el color de fondo. Va a ser el 9c287. Aquí tenemos los antecedentes. Siguiente Voy a seleccionar PG. Vamos a definir el ancho, va a ser 100% entonces la altura va a ser una persecución del 50%, color de fondo, va a ser EEE Aquí tenemos el elemento. Voy a establecer el radio fronterizo al 50% luego al 00.50% Ahora voy a encargarme de la posición Vamos a moverlo usando translate 20% Y luego necesitamos -50% el elemento movido también Necesitamos aquí rotar la función por dirección z, y el valor va a ser de 15 grados. Creo que ya está. ocultar partes fuera de la página usando desbordamiento oculto. Ahora tenemos aquí este fondo genial e impresionante. Sigamos adelante y cuidemos el envoltorio de formularios. Voy a poner posición a absoluta. Entonces necesitamos posición relativa para el elemento padre, que en este caso es contenedor. A continuación, voy a establecer posición 50% entonces la posición izquierda va a ser 50% voy a centrar el elemento usando transform translate con los valores -50% y otra vez -50% Como puedes ver, el envoltorio de formulario está centrado en la página Vamos a establecer el ancho a 70% entonces la altura va a ser 80% Vamos a cambiar el color de fondo. Voy a usar aquí el color 25 a cinco a siete. Aquí tenemos el fondo de la envoltura de espuma. Hagamos el elemento redondeado usando radio de borde dos Ram. También necesitamos box shadow, los siguientes valores. 03 Ram, ocho Ram. El color va a ser RGBA, color negro con la opacidad 0.6 Tenemos aquí bonito y fresco efecto de sombra Después de eso, voy a cuidar la imagen. Vamos a poner a 140 Ram. Pero entonces necesitamos posición para ser absolutos. Posición izquierda va a ser -50% En cuanto a la primera posición, voy a ponerla en -20% Tenemos aquí la imagen Vamos a establecer la opacidad a 0.5 Entonces necesitamos desbordamiento oculto para envoltorio de formularios con el fin de ocultar las partes de la imagen Ahora se ve bastante genial. Sigamos adelante y nos ocupemos del encabezado del formulario. Voy a poner posición en absoluto entonces. El puesto va a ser 19% Led. El puesto va a ser 35% la familia telefónica, va a ser inclinación, cursiva Sacerdote Se cambia la familia telefónica. Ahora tenemos que hacerlo más grande usando el tamaño del teléfono. Vamos a ponerla a cinco fotogramas. El peso va a ser de 300. Tenemos que cambiar el color. Voy a blanco. El rumbo se ve mucho mejor. Vamos a establecer su ancho en 35 Ram. Entonces voy a usar algún efecto de sombra. Necesitamos 01 Ram, dos Ram, y el color va a ser RGP, un color negro con la opacidad 0.5 Aquí tenemos el encabezado, que se ve bastante bien Seleccionemos formulario de contacto, pongamos ancho a 35% entonces la altura va a ser 100% voy a establecer posición en absoluto, entonces la posición dos va a ser cero. La posición correcta va a ser cero también. A continuación voy a cambiar el color de fondo. Pongamos rojo por un tiempo. Entonces aquí tenemos el formulario de contacto. Vamos a deshacernos de este color. A partir de aquí. Voy a usar libros flex para alinear los elementos. Vamos a establecer la dirección de flexión a la columna. Entonces necesitamos justificar el contenido con espacio de valor entre. A continuación, voy a usar pudín con valor siete Ram y luego diez ram Entonces necesitamos siete Ram, y nuevamente siete ram. Ahora tenemos el espacio dentro del elemento. A continuación voy a encargarme de los enlaces. Vamos a poner texto una línea dos. Bien, que tenemos aquí, los enlaces en el lado derecho del elemento. A continuación, voy a seleccionar Total Link. También necesitamos palmo total. Vamos a establecer el tamaño de fuente 21.6 Ram. Entonces el peso de la fuente va a ser de 300. Voy a establecer la transformación de texto en mayúsculas. Entonces necesitamos espaciado entre letras, 0.1 Ram. Cambia el color, voy a usar aquí. Color 9287. Aquí tenemos los enlaces. En realidad, creo que aquí nos falta. Este elemento span, me refiero al slash aquí está. A continuación voy a añadir aquí puntero. Ahora tenemos puntero de curso para el elemento span también. A continuación voy a seleccionar el giro y establecer marchar a cero y 0.5 Ram Necesitamos algo de espacio entre los eslabones. A continuación vamos a inscribirnos, voy a configurar el color 289663 En realidad va a ser el enlace activo. A continuación voy a seleccionar entradas. Pongamos la parte superior del margen a menos dos Ram. Entonces necesitamos libros flex. Voy a establecer dirección a columna Siguiente, voy a seleccionar la entrada. Vamos a definir el ancho. Va a ser 100% entonces la altura va a ser cinco Ram. A continuación necesitamos marchar, va a ser uno Ram y cero Entonces voy a poner poner a una Ram. A continuación necesitamos color de fondo. Va a ser 343539. Los insumos se ven mucho mejor. Siguiente Voy a poner borde 2.1 Ram sólido. Y el color va a ser RGB 25053 veces el color blanco con la opacidad 0.1 Aquí tenemos el bonito borde A continuación, establezca el radio del borde en 0.5 Ram. También necesitamos aquí tamaño de fuente, va a ser 1.6 Ram. Después cambia el color. Voy a hacerlo EEE, Se cambia el color Ahora voy a seleccionar la casilla de verificación. Vamos a configurar la pantalla para flexionar. Necesitamos un centro de líneas de pedido, entonces voy a establecer margen en la parte superior a dos Ram. A continuación, voy a seleccionar la casilla de verificación, seguida del elemento input. Vamos a poner la apariencia a ninguna. Entonces necesitamos con, van a ser dos Ram. La altura va a ser dos Ram también. A continuación voy a cambiar el color de fondo. Va a ser 333. Aquí tenemos la caja. Agreguemos aquí margen en el lado derecho y pongámoslo en un Ram. A continuación necesitamos radio fronterizo. Voy a ponerle 2.2 Ram. Después de eso, voy a seleccionar elementos de entrada y también la etiqueta. Vamos a establecer el puntero para ambos elementos. Ahora voy a seleccionar la etiqueta y personalizarla. Ahora voy a seleccionar entrada con ACDOClass marcado. Vamos a establecer el color de fondo 258235. Una vez que marque, entonces el color de fondo de la caja cambiará. Necesitamos aquí la transición para que el efecto sea más suave. Si hago clic, entonces el color de fondo cambiará suavemente. A continuación, voy a seleccionar Entrada con un elemento. Vamos a configurar el contenido en vacío. A continuación, necesitamos posición para ser absolutos. Entonces necesitamos posición relativa para el elemento padre, que es la entrada. Vamos a establecer la posición -15% Entonces la posición izquierda va a ser 20% voy a establecer el ancho al 50% entonces la altura va a ser 75% A continuación necesitamos frontera, ¿verdad Y va a ser 0.2 Ram sólido. Y el color va a ser el blanco. Duplicemos este código que necesitamos aquí. Borde inferior. Como pueden ver, aquí tenemos la marca de verificación. Ahora necesitamos rotar el elemento usando transform rotate Z, el valor va a ser 45 grados. Tenemos aquí una bonita marca de verificación. A continuación necesitamos opacidad cero y visibilidad oculta. Después de eso, voy a seleccionar elemento de entrada con una cola comprobada y seguida del elemento after do. Una vez comprobada la entrada, entonces tenemos que volver a mostrar la marca de verificación. Necesitamos opacidad uno y visibilidad visible. Entonces agrega aquí transición. Si hago clic, entonces llegaremos aquí esta apariencia agradable y genial de la marca de verificación. Bien, sigamos adelante y seleccionemos la etiqueta y personalízala. Voy a establecer el tamaño del teléfono en 1.2 Ram. El que llama va a ser DDD. Después voy a seleccionar elementos span, que se coloca dentro de la etiqueta. Cambiemos la llamada. 58235, Bien. Ahora todo se ve bastante bien y ahora podemos seguir adelante y cuidar el fondo. Vamos a establecer el ancho al 100% entonces la altura va a ser cinco Ram. A continuación, voy a cambiar el color de fondo. Vamos a usar aquí color D48 142. Entonces me voy a deshacer del borde predeterminado, luego cambiar el tamaño del teléfono, va a ser 1.6 Ram. Cambia el peso del teléfono, lo voy a poner en 300. También necesitamos espaciado entre letras, 0.1 m. Luego necesitamos transformar texto. Va a ser mayúscula ya que voy a poner el color en blanco. Como puedes ver, el fondo se ve bastante bien. A continuación, pongamos el cursor a puntero. Además, voy a agregar aquí radio de borde, que va a ser 0.3 Ram. Entonces necesitamos aquí box shadow con los valores 01 m1m y el color va a ser RGBA, color negro con la opacidad 0.1 Bien, finalmente voy a agregar aquí Va a ser menos cuatro Ram. El botón se ve bastante bien. Voy a crear efecto click usando pseudoclase activa que necesitamos aquí Transformar traducir y con valor 0.2 Si hago clic en el botón, entonces obtendremos este bonito y genial efecto click Bien, sigamos adelante y cuidemos los íconos de las redes sociales. Voy a seleccionar Envoltura. Vamos a establecer con a 100% Entonces necesitamos poner, va a ser tres Ram y 40% A continuación necesitamos 0.0 Entonces voy a configurar display a flex. Necesitamos justificar el espacio de contenido entre. Además, voy a poner borde en la parte superior, 2.1 Ram sólido. Y el color va a ser RGBA, color blanco con menor opacidad, 0.2 Bien, a continuación voy a cuidar los iconos Vamos a poner a tres Ram. Entonces la altura va a ser de tres Ram. A continuación voy a cambiar el color de fondo. Usemos tu color, 939695. Siguiente Voy a poner el radio de portero al 50% porque necesitamos círculos. Entonces necesitamos censurar los íconos usando libros flex. Vamos a usar justificar el contenido y una línea de pedido. Entonces configuré el tamaño del teléfono en 1.6 Ram. Entonces voy a cambiar de color. Va a ser 333c y también hacer puntero de cursor. Bien, todo se ve bastante bien. Ahora voy a usar algo de Javascript. Vamos a crear una nueva variable y llamarla inicio de sesión. Voy a seleccionar elemento usando el método selector de consultas. Insertemos el inicio de sesión de tu clase. Entonces necesitamos un par de variables diferentes. El segundo va a ser apuntarse. Entonces tendremos tu contenedor. Se va a enviar la última variable , me refiero al botón. Sigamos adelante y agreguemos al elemento de escucha de eventos de inicio de sesión con un evento click Además, necesitamos aquí una función de devolución de llamada que se ejecutará una vez que hagamos clic en el enlace de inicio de sesión Voy a agregar al contenedor nuevo con método add y va a ser cambio. Duplicemos este código que necesitamos aquí, firme una vez. Entonces necesitamos eliminar el cambio del elemento. Ahora voy a usar el cambio de clase en el archivo CSS para crear nuevos estilos, los cuales se aplicarán una vez que hagamos clic en el enlace. Necesitamos aquí cambio seguido del formulario de firma. Voy a cambiar el color. A continuación, voy a seleccionar con registrarse y cambiar el color. Necesitamos definir el enlace activo aquí usando esos diferentes colores. Una vez que haga clic, entonces el color cambiará. A continuación, voy a seleccionar Cambiar, seguido de la visualización del conjunto de altura a ninguno. Una vez que haga clic, luego se ocultarán dos campos de entrada y también la casilla de verificación. A continuación, voy a seleccionar Display y set transform with translate function. Tenemos que mover los elementos hacia arriba por menos seis Ram. Ahora como pueden ver, tenemos mucho mejor resultado. Tenemos que encargarnos del fondo. Tenemos que moverlo hacia arriba. Y también tenemos que cambiar el texto. Seleccionemos Cambiar. Con la clase Submit, necesitamos mover los elementos usando transform translate, Y -14 Ram Ahora el botón se mueve hacia arriba y se ve bastante bien. Bien, ahora necesitamos lo mismo con el cambio de clase porque necesitamos crear efecto click que necesitamos aquí -13.8 Ram Si hago clic, entonces el botón tendrá efecto click. Bien, Lo último que tenemos que hacer es cambiar el texto. Una vez que hagamos clic en el enlace, voy a cambiar el contenido de texto botón Enviar y va a ser iniciar sesión. Necesitamos lo mismo abajo. En este caso, tenemos que cambiar de inicio de sesión para inscribirnos. Bien, ahora todo se ve perfectamente con el proyecto, ya terminamos. Vamos a seguir adelante. 25. Proyecto 20 - Barra de progreso animada: Hola y bienvenidos a nuestro próximo proyecto. En esta sección, vamos a estar creando barra de progreso animada. El proyecto se creará en base a HTML, CSS y Javascript. En realidad, va a ser gracioso. Uno, sigamos adelante y describiéndolo rápidamente. Como pueden ver, tenemos aquí una carga de rumbo seguida de la barra de progreso, que ahora mismo está vacía. Y luego abajo tenemos dos botones diferentes, descargar y reiniciar. Si hago clic en descargar, entonces la barra de progreso comenzará a llenarse. También se animará el encabezamiento. Si hago clic en restablecer, entonces la barra de progreso dejará de funcionar. Bien, entonces creo que el proyecto va a ser interesante y divertido. Así que sigamos adelante y comencemos. He creado una nueva carpeta en el escritorio, que ahora mismo está vacía. Sigamos adelante y lo abrimos en código VS, luego creamos sobre archivos de trabajo, necesitamos indexar HTML. Entonces el segundo archivo va a ser estilo CSS. Además, necesitamos archivo para script Java script o S. Vamos a abrir el archivo HTML índice y crear el documento HTML básico. Voy a cambiar el título. Va a ser barra de Progreso. A continuación, voy a vincular el archivo CSS. Además, necesitamos la etiqueta script para vincular el archivo de script chav Vamos a insertar el nombre del archivo en el atributo source. Bien, sigamos adelante y abramos el proyecto al navegador usando servidor en vivo. Y luego colocar el editor en el navegador uno al lado del otro. Al igual que a lo largo del proyecto, voy a usar los teléfonos de Google. Así que sigamos adelante y visitemos el sitio web. Voy a buscar teléfonos llamados burbujas rubic. Seleccionemos el estilo, copiemos el enlace y péguelo en el elemento head. Ahora voy a empezar a escribir el marcado HTM. Necesitamos contenedor, envolverá todo el contenido. Vamos a abrir la etiqueta, que va a ser envoltorio de barra de progreso dentro de ese elemento. Voy a abrir tres etiquetas de rumbo cargando. Entonces tendremos barra de progreso en la que voy a insertar barra. Entonces voy a crear patones. Necesitamos patrones de envoltura, y luego el botón en sí necesitamos aquí, clases PTN, descargar Duplicarlo y cambiar el nombre de la clase. Restablecer. Insertemos aquí el contenido. El primero se va a descargar. En cuanto a la segunda va a ser reseteada. Eso es todo, sobre el HD mark up. Ahora tenemos que empezar a escribir el CSS. Seleccione cada elemento como de costumbre, cree algunos estilos predeterminados. Necesitamos margen y relleno, ambos para ser cero. A continuación, voy a establecer el tamaño de la caja a la caja de borde. Necesitamos familia telefónica, va a ser burbujas rubic, el teléfono que hemos seleccionado Se aplican los estilos por defecto. A continuación, voy a establecer el tamaño de fuente del elemento Htiml en 62.5% Para usar un m como unidad de medida uno, m será igual a Entonces me voy a sacar del contenedor. Vamos a establecer ancho, va a ser 100% Entonces necesitamos altura, va a ser 100 altura de viewport También cambia el color de fondo. Va a ser 734. A continuación, voy a usar libros flex. Para alinear el contenido en el centro, necesitamos justificar el centro de contenido y alinear el centro de elementos. Como puedes ver, el contenido se coloca muy bien en el centro. A continuación, sigamos adelante y seleccionemos Envoltura de barra de progreso. Voy a definir el ancho, va a ser 70 Ram. A continuación necesitamos libros de lino. Voy a cambiar la dirección. Va a ser columna. Necesitamos alinear los elementos verticalmente. Entonces usemos justify Content center. A continuación voy a seleccionar elementos de encabezamiento. Vamos a establecer el tamaño de la fuente a cinco hm. El color va a ser 1182. Además, voy a crear algún espacio entre las letras. Como pueden ver, el rumbo se ve bastante bien. Agreguemos aquí texto transformar mayúsculas. Entonces necesitamos sombra de texto. Va a ser 0.5 Hm, tres Ram. Y el color va a ser negro con la opacidad 0.3 Ahora el encabezado se ve mucho mejor Agreguemos aquí margen en la parte inferior, van a ser tres Ram. Bien, eso es. Sobre el rubro. Sigamos adelante y nos ocupemos de la barra de progreso. Vamos a sumar con el 100% entonces la altura va a ser 3.5 Ram. Necesitamos frontera, va a ser 0.2 Ram. El color sólido va a ser 66, es color verde. A continuación necesitamos radio de borde para hacer que el elemento sea redondeado. Digamos 23 Ram. Además, necesitamos poner 0.3 Ram. Después de eso, voy a encargarme del bar. Vamos a establecer al 100% entonces la altura va a ser 100% voy a cambiar el fondo. Vamos a usar gradiente lineal. La dirección va a ser dos, ¿verdad? cuanto al primer color, voy a usar Fd166 Entonces el siguiente color va a ser f476. Como pueden ver, tenemos aquí el bar. Tenemos que hacerlo redondeado. Usemos radio de borde tres m. ahora se ve bastante bien. Necesitamos algo de espacio en la parte inferior. Vamos a usar margen. Abajo cuatro Ram. A continuación voy a seleccionar botones. Vamos a establecer con al 100% También necesitamos usar flex box, usar justify content space entre los botones están alineados y ahora tenemos que personalizarlos. Seleccionemos BTN. Voy a establecer el ancho 35% entonces la altura va a ser 5.5 voy a establecer border a non set phone size a 1.8 Ram. A continuación necesitamos color. Va a ser blanco ya que voy a crear algún espacio entre las letras. A continuación, pongamos el radio del borde a cinco Ram. Voy a agregar aquí sombra de caja con el palidez 01 Ram, tres Ram Y el color va a ser negro con la opacidad 0.2 También cambia el rumbo o hazlo puntero Bien, ahora tenemos que cambiar el fondo para cada uno de los botones. El primero se va a descargar. Vamos a usar gradiente lineal. La dirección va a ser a la derecha. En cuanto a los colores, voy a usar f476. Entonces el siguiente va a ser F D 166. El primer botón se ve bastante bien. A continuación, voy a hacer lo mismo para el segundo botón, que es reset. Voy a cambiar los colores. Agreguemos aquí el segundo 166. Bien, así que eso es todo, todos los elementos están estilizados Ahora necesitamos BTN activo para crear el efecto click. Necesitamos transformar traducir Y 0.2 m. ahora si hago clic en los botones, entonces llegaremos aquí este bonito efecto click. Vamos a poner ancho de barra cero, entonces voy a. Crear animaciones CSS. Necesitamos tu nombre barra anim al 0% Necesitamos que el ancho sea cero Para el 100% voy a establecer el ancho al 100% Vamos a establecer la animación en bar Anim Entonces la duración va a ser de 10 segundos y también necesitamos lineales y delanteros. Como puedes ver, la barra de progreso se está llenando. Ahora tenemos que crear otra animación. Va a estar cargando. Va a ser para encabezar al 0% necesitamos opacidad para ser uno Al 25% voy a poner la opacidad a cero. Entonces voy a duplicar este código. Al 50% la opacidad va a ser uno, 75% Necesitamos que la opacidad sea cero En cuanto al 100% necesitamos opacidad uno. Si agrego aquí, animación con los valores cargando anum, luego la duración, 2 segundos, cinco, quiero decir las cinco veces, obtendremos esta animación agradable y genial Ahora es el momento de escribir algo de Javascript. Vamos a crear la variable de descarga BTN. Voy a seleccionar la parte inferior usando el método Queryselector Después voy a seleccionar restablecer BTN. Cambiemos el nombre de la clase. A continuación necesitamos otra variable. Va a ser contenedor. Ahora voy a agregar un oyente par al botón de descarga con evento click, necesitamos aquí una función callback la cual será ejecutada Una vez que hacemos clic en el botón, necesitamos agregar nueva clase al contenedor usando un método. La clase va a ser cambiada. Ahora si selecciono barra con cambio de clase y agrego aquí la animación. Entonces, una vez que hagamos clic en el botón de descarga, la barra de progreso comenzará a funcionar. A continuación, necesitamos lo mismo para el rubro también. Seleccionemos barra de progreso, envoltorio tres con cambio Cl aquí, Animación. Ahora como puedes ver, todo funciona bien. Tenemos que programar el botón de reinicio. Cambiemos aquí. Button va a ser reset, BTN y tenemos que quitar clase Change del contenedor Una vez que haga clic en el botón de reinicio, entonces la animación dejará de funcionar. Bien, eso es que todo funciona a la perfección. Ojalá este proyecto fuera interesante y divertido. Sigamos adelante y comencemos a crear el siguiente. 26. Proyecto 21 - Cabecera de sitio web con animaciones: Hola y bienvenidos a, o próximo proyecto. En esta sección estaremos construyendo un encabezado de sitio web moderno y genial con animaciones y un menú de hamburguesas El proyecto se creará en base HTML, CSS y Javskrit En realidad es el masivo y uno de los mejores proyectos de este curso. Sigamos adelante y describamos el proyecto. Como pueden ver, tenemos aquí un bonito y hermoso encabezado para el sitio web. Tenemos dos partes, izquierda y derecha. Ambas partes tienen diferentes orígenes. En el lado izquierdo, tenemos un como para el lado derecho, hay un fondo claro. En el centro de la página, se puede ver el encabezado. Consta de dos partes. El lado izquierdo es ancho. En cuanto al lado derecho, tiene un fondo transparente con una imagen. También puedes encontrar lo mismo para otros elementos textuales. Aquí en el lado derecho, en la esquina superior izquierda, se encuentra el icono del menú. Si hago clic en él, entonces los elementos se ocultarán con efectos de desvanecimiento y un menú de navegación mostrará los elementos de navegación tienen fondos agradables y geniales, transparentes y algunos buenos efectos de hover Si hago clic en el icono de menú, entonces la navegación se cerrará y los elementos se mostrarán de nuevo. Con efectos de fundido, el proyecto responde a diferentes tamaños de pantalla. Si inspecciono la página, cambie al modo de respuesta, luego verifique el proyecto para ver diferentes tamaños de pantalla. Encontrarás que se ve bien y responde en todos los diferentes tamaños de pantalla. Bien, así que sentémonos sobre este proyecto. Creo que te va a encantar. Así que sigamos adelante y comencemos. He creado una nueva carpeta en el escritorio que incluye la carpeta para las imágenes. Sigamos adelante y lo abrimos en código VS y luego creamos nuestros archivos de trabajo. Necesitamos tres expedientes. El primero va a ser index con HTML, entonces tendremos estilo CSS. En cuanto al tercero va a ser archivo para Javascript script JS. Sigamos adelante y abramos el archivo HTM indexado y creemos la estructura HTM básica Voy a cambiar el título. Vamos a insertar tu landing page, luego voy a vincular los archivos CSS y JS. Necesitamos aquí la etiqueta script, entonces tenemos que especificar el nombre del archivo en el atributo source, mccain Sigamos adelante y abramos el proyecto al navegador usando servidor en vivo. Entonces voy a colocar el navegador y el editor uno al lado del otro. Para que el proceso de trabajo sea más sencillo y conveniente, voy a agarrar un par de enlaces diferentes. El primero va a ser fuente, increíble CDN, porque vamos a usar algunos iconos impresionantes del teléfono a lo largo del proyecto Agarremos el enlace desde aquí. Y luego abre la etiqueta de enlace en el elemento head y pega la CDN aquí Además de eso, vamos a usar los teléfonos de Google. Visitemos el sitio web, entonces voy a buscar Google Phone llamado signica negativo Seleccionemos un par de estilos diferentes. Entonces voy a buscar otra fuente que va a ser Stick, sin facturas. Seleccionemos diferentes estilos, después voy a copiar el enlace y pegarlo en el elemento head. Bien, estamos listos para comenzar a crear el proyecto. Voy a empezar con un marcado HTML. Vamos a crear contenedor. Incluirá todo el contenido que necesitamos aquí, icono de menú. Consiste en líneas. Aquí tendremos dos líneas, línea uno y la línea dos. Además de eso, necesitamos elementos span con el menú de clase. Y tenemos que insertar aquí menú de texto. Necesitamos otro lapso y se cerrará. Bien, después del icono del menú. Voy a insertar aquí elementos de navegación con el nombre de la clase de navegación. Voy a insertar aquí elementos de enlace. El primero va a estar en casa, después voy a duplicarlo un par de veces. Cambiemos los elementos de navegación. El segundo va a ser sobre, entonces vamos a tener contenido. El siguiente va a ser tutoriales. En cuanto al último, voy a insertar contacto. Bien. Después de la navegación voy a abrir Profundidad va a estar aterrizando, eso es en otro chapuzón, va a estar aterrizando a la izquierda, entonces necesitamos aterrizar derecho y lado izquierdo. Tener H uno elementos de encabezado con el nombre de la clase encabezado principal. También necesitamos aquí otro rumbo principal a la izquierda. Voy a insertar aquí tres letras. A continuación, sobre en que voy a insertar H un encabezado con el código de texto y Crear. A continuación, voy a insertar aquí párrafo con algún texto ficticio como desarrollo el cual va a ser link Voy a insertar un elemento con el texto. Más información Además, voy a insertar aquí icono de fuentes, que va a ser FA flecha FA sólida. Justo después de eso, voy a encargarme del lado derecho. Necesitamos aquí íconos de redes sociales. Vamos a insertar elemento. El primero va a ser un Facebook de marcas, luego tendremos un Twitter. En cuanto al tercer icono, va a ser un link in, in after social media icons. Voy a agregar H uno elementos de encabezado con los nombres de clase. Encabezamiento principal y encabezado principal. Bien, va a ser la segunda parte del rubro principal. Insertemos aquí el resto de las letras. A continuación necesitamos texto en el que tendremos tres tecnologías, Open H, un elemento de entrega, la primera va a ser HTML Entonces tendremos CSS y Javascript. Bien, entonces creo que eso es todo Sobre el marcado HTML, lo único que hay que hacer es insertar aquí, aterrizar, escribir fondo, que estará vacío Ahora mismo tenemos aquí todos los elementos, y ahora tenemos dos para escribir el CSS. Vamos a abrir archivo CSS. Selecciona cada elemento, establece margen y poniendo ambos a cero. A continuación necesitamos que el tamaño de la caja sea cuadro de borde También voy a establecer la decoración de texto en ninguno. Entonces voy a definir la familia telefónica. Va a ser señal y negativo san serif. Se aplican todos los estilos por defecto. A continuación, voy a establecer el tamaño de fuente del elemento H mal 62.5% porque vamos a usar M como unidad de medida En este caso, un m será igual a diez píxeles, los elementos se hicieron más pequeños. Ahora voy a encargarme del contenedor. Vamos a establecer el ancho al 100% entonces la altura va a ser 100 de la altura de la ventana gráfica A continuación, voy a encargarme del aterrizaje. El ancho va a ser del 100% La altura va a ser 100% también. También, voy a cambiar el fondo. Vamos a usar la función de gradiente lineal. El primer color va a ser negro con opacidad 0.5 En cuanto al segundo color, voy a insertar de nuevo, color negro con la opacidad 0.4 A continuación tenemos que seleccionar imagen de la carpeta imagenes Entonces voy a definir la posición va a estar centrada. Y también tenemos que añadir aquí no repetir. Además de eso, voy a definir paro size property con la cobertura de valor. Bien, aquí tenemos la imagen de paro. Siguiente Voy a seleccionar man, pongamos display a none. Voy a esconderme un rato. Entonces necesitamos la navegación. Voy a ocultarlo también usando display none. Ambos elementos están ocultos. Sé que podemos encargarnos del aterrizaje. Seleccionemos el aterrizaje a la izquierda. Voy a poner posición a absoluta. Entonces necesitamos posición relativa para los elementos padre. Dos posiciones va a ser cero. La posición izquierda va a ser cero. Entonces necesitamos ancho para ser 50% la altura va a ser 100% Siguiente, voy a duplicar este código, cambiar la clase necesitamos tu aterrizaje derecho. Necesitamos las mismas propiedades, solo cambiamos de izquierda a derecha, ambas partes están alineadas. Después de eso, voy a tomar el fondo del lado derecho. Vamos a establecer el ancho al 100% La altura va a ser 100% Voy a establecer la posición en absoluto. La posición superior va a ser cero. En cuanto a la posición correcta, voy a hacer que sea cero también. A continuación necesitamos color de fondo. Va a ser 94e. Se cambia el fondo del lado derecho. Ahora voy a encargarme del acerca. Fijemos la posición a absoluta. Entonces la posición inferior va a ser diez Ram. En cuanto a la posición izquierda, voy a hacer que sea diez Ram también. El elemento se coloca abajo. Después de eso, voy a seleccionar H, un elemento de encabezado en el acerca. Vamos a establecer el tamaño de la fuente a seis Ram. Entonces voy a hacer texto en mayúscula. También cambia el color, va a ser blanco. A continuación, voy a crear alguna sombra, 0.5 Ram, una Ram. Y el color va a ser negro con opacidad 0.5 Tenemos aquí el rubro Se ve bastante bien. A continuación, tomemos aquí del párrafo. Establezca el tamaño del teléfono en 1.6 Ram. Entonces voy a cambiar el color. Va a ser 94de. Entonces me voy a poner con 250 Ram. También necesitamos marchar uno Ram, 03 Ram, y cero Aquí tenemos el párrafo. Sigamos adelante y nos ocupemos del enlace. Voy a configurar display a flex. Entonces necesitamos una línea de pedido, va a ser línea base. Entonces necesitamos puntero de cursor. A continuación, voy a definir el ancho, va a ser 14 Ram. Después de eso, voy a seleccionar un elemento. Vamos a establecer el tamaño del teléfono en 1.6 Ram. Entonces voy a ponerla en mayúscula, necesitamos color, va a ser blanco. Además, voy a poner margen en el lado derecho, va a ser uno Ram. Necesitamos algo de espacio entre el texto y la flecha. A continuación voy a encargarme de la flecha. Seleccionemos Elementos. Voy a establecer el tamaño de la fuente en 1.6 Ram. Entonces necesitamos color. Va a ser blanco. Aquí tenemos la flecha. Ahora voy a crear efecto hover. Necesitamos agregar hover al enlace. Y luego tenemos que seleccionar un elemento al flotar. Voy a aumentar margen en el lado derecho. Vamos a ponerla en dos Ram. También utilizo aquí transición para que el efecto sea más suave. Vamos a establecer la duración 2.3 segundos. Si flojo, entonces obtendremos este bonito efecto. Bien, entonces sentémonos sobre este elemento. A continuación, voy a seleccionar el encabezado principal. Fijemos la posición a absoluta. La posición superior va a ser del 25% Entonces necesitamos familia de fuentes. Va a ser la segunda fuente, palo. Sin pastillas. San Serif. Entonces voy a establecer el tamaño del teléfono a 20 Ram. Estos son los estilos por defecto para ambas piezas. Y ahora voy a seleccionar el lado izquierdo. Pongamos la posición correcta a -1% Entonces voy a poner el color a blanco ya que necesitamos Te shadow, va a ser 0.5 Ram, uno Ram Y el color va a ser GPA, color negro con opacidad 0.5 Tenemos aquí primera parte del rubro Seleccionemos el lado derecho. Voy a establecer la posición izquierda 1% Entonces necesitamos sombra de texto 0.5 m1m y el RGBA 0.2 derecho, el lado derecho no es visible Vamos a establecer el índice 2100. Entonces aquí tenemos el lado derecho. Deshagámonos de la propiedad index y agreguemos aquí. Además, necesitamos aquí el peso de la fuente para que sea negrita. Entonces voy a poner texto mayúsculas y luego crear algo de espacio entre las letras, convertirlo en tres Ram. Ahora el rumbo se ve mucho mejor. Tenemos que cuidar los antecedentes del lado derecho. Necesitamos gradiente lineal. El primer color va a ser RGBA negro con opacidad 0.2 A continuación necesitamos de nuevo RGBA color negro con la opacidad 0.1 Ahora tenemos que definir la URL de la imagen Necesitamos la misma imagen de fondo. Entonces necesitamos el 30% como posición. Además, voy a usar el clip de fondo web K, va a ser texto. Además de eso, necesitamos texto webkit, sentir color. Voy a hacerlo transparente. Si reviso, entonces verá aquí la imagen como fondo del texto. Creo que se ve bastante bien. Bien, tomemos este código y lo peguemos. Pueblo donde tenemos el lado derecho. Después de eso, voy a encargarme de los íconos de las redes sociales. Vamos a establecer la posición del envoltorio. Absoluto. Entonces necesitamos posición va a ser cinco fram La posición correcta va a ser cinco fram también. Entonces necesitamos la propiedad de índice z 100 para mostrar los iconos. Voy a seleccionar elementos, voy a establecer el tamaño del teléfono en tres Ram. Entonces el margen será de 01.5 Ram. A continuación necesitamos Tech Shadow. Vamos a establecerlo en 0.5 Fram, un carrito, y el color va a ser RGB, color negro con la opacidad 0.2 A continuación necesitamos el mismo fondo para los iconos también Vamos a copiar el código. Agrega aquí el puntero del cursor. Entonces como puedes ver, tenemos aquí iconos de fuente con la misma imagen de fondo. A continuación voy a encargarme del texto. Voy a definir la posición. En realidad, tomemos este código. Cambiar a posición. Aquí necesitamos seis Ram. Necesitamos posición inferior y de la parte superior. Vamos a cambiarlo. Como puede ver, los elementos se colocan abajo. A continuación, necesitamos seleccionar H, un elemento de encabezado. Establezca el tamaño de fuente en ocho Ram. Entonces el peso de la fuente va a ser negrita. A continuación, voy a establecer la transformación de texto en mayúsculas. Entonces necesitamos a Te Shadow. Va a ser 0.5 Ram, uno Ram, con el RGBA color negro con la opacidad 0.2 Entonces otra vez, agarra este código Y aquí como pueden ver, los encabezamientos se ven bastante bien Para disminuir la altura de la línea va a ser uno. Y también necesitamos un texto de línea en el lado derecho. Bien, todo se ve bastante bien. Ya terminamos con los encabezamientos del texto. Ahora voy a hacer visible el icono del menú. Eso fijó su posición en absoluta. A continuación tenemos que posicionar va a ser la posición de cinco cuadros. Yo también voy a hacer cinco fotogramas. Establecer ancho, va a ser diez Ram. Entonces necesitamos altura, van a ser tres Ram. También usa la propiedad índice, hazla 200. A continuación necesitamos color de fondo. Vamos a usar algún color de fondo temporal. Aquí tenemos el icono del menú. Voy a seleccionar Línea. Vamos a establecer a 2.5 Ram. Entonces la altura va a ser 0.2 Ram. Cambia el color de fondo, pongámoslo a nueve para E. Aquí tenemos las líneas. Voy a deshacerme de este color de fondo. Ahora las líneas son visibles, necesitamos separarlas. Seleccionemos líneas ajustamos la altura al 100% Y luego necesitamos flex box. La dirección va a ser columna también, necesitamos justificar contenido con espacio de valor, incluso las líneas están separadas y alineadas muy bien. Después de eso, voy a tomar equipo de los elementos span. Tenemos dos elementos de giro, menú y cierre. Vamos a establecer el tamaño de fuente en 1.8 Ram. Entonces necesitamos la transformación del texto. Va a ser mayúscula también. Voy a establecer el color 29 FuRte. Tenemos aquí elementos span. Fijemos la posición a absoluta. Necesitamos la posición correcta para ser cero. A continuación, voy a configurar display para flex para el icono del menú. Necesitamos un centro de líneas de artículos. Justificar también el espacio de contenido entre. A continuación, voy a poner cursor a puntero. Además, vamos a crear espacio usando relleno. Pongámoslo a cero y 0.5 m. Como puede ver, los elementos span están muy bien alineados junto a las líneas. Voy a seleccionar cerrar y establecer es posicionar al 100% Ahora el segundo elemento span terminó abajo abajo. Ahora tenemos que usar algo de Javascript. Vamos a crear una variable. Va a ser contenedor. Voy a seleccionarlo usando el método selector de consultas. Necesitamos especificar aquí el contenedor de nombre de clase. A continuación, voy a crear otra variable. Va a ser icono de menú. Especificemos aquí el nombre de la clase. Ahora voy a agregar un oyente de eventos al icono del menú con un evento click Además, tenemos que agregar aquí función de devolución de llamada que se ejecutará una vez que hagamos clic en el icono del menú Voy a agregar nueva clase al contenedor usando el método togal, y el nombre de la clase va a ser navegado Voy a usar esta clase en el archivo CSS para crear nuevos estilos que se aplicarán a los elementos. Una vez que hacemos clic en el icono, agreguemos transformar la línea uno con una función rotar Z. El valor va a ser de 135 grados. También, necesitamos aquí para traducir. Tenemos que mover los elementos ligeramente. El valor va a ser 0.7 Ram. Duplicemos este código, cambiemos el nombre de la clase. Necesitamos la línea dos. La función rotar Z será de 225 grados. A ver, tenemos aquí el botón X. Ahora si agrego aquí clase navegar. Y también usa la transición con Cubic zer función por clic. Entonces las líneas se transformarán en X botón de cierre. Bien, después de eso voy a seleccionar Navegar. Seguido del menú. Voy a establecer la propiedad transform para traducir la función Y con el valor 110% quiero decir -110% como necesitamos aquí Menú con transición con el punto de tiempo de retardo 1 segundo. Duplicemos este código, cambiemos el nombre de la clase. Necesitamos aquí 120% para un cierre. Voy a agregar aquí transición con transform con la duración 0.3 segundo. A continuación, necesitamos transición para el menú con navegar. También necesitamos la misma transición para cerrar que podamos. Entonces una vez que haga clic, entonces los elementos finos cambiarán. Ahora lo único que hay que hacer es ocultar este fino elemento. Vamos a poner desbordamiento a él muchos. Ahora como puedes ver, todo funciona a la perfección. A continuación voy a encargarme del rubro principal. Seleccionemos el encabezado principal con navegar. Establezca la transformación para traducir Y menos cinco fram. A continuación, necesitamos opacidad cero y visibilidad oculta. Además, agreguemos aquí la transición para un efecto más suave. Una vez que haga clic, entonces el encabezado se ocultará con un bonito efecto de fundido. A continuación, voy a esconder el acerca. Vamos a seleccionar elemento con clase navegar. Necesitamos aquí transformar traducir x cinco Ram. Y también necesitamos de nuevo opacidad cero y visibilidad oculta. Y nuevamente para un efecto suave, hagamos la transición con la duración 1 segundo. Una vez que haga clic, entonces la sección acerca de se moverá en altura con efecto de fundido. A continuación, voy a hacer lo mismo para el texto. Seleccionemos el elemento con clase Navigate. Establecer transformar para traducir x menos pi fram. Además, necesitamos opacidad cero y visibilidad oculta. Nuevamente, use transición para el punto de duración 1 segundo. Si hago clic, entonces los elementos se ocultarán. Pero necesitamos aquí 1 segundo en lugar de 0.1 Ahora como puedes ver, todo vuelve a funcionar bien. Ahora necesitamos lo mismo para las redes sociales. Seleccionemos Elementos con Nombre de Clase. Navega y haz lo mismo que necesitamos aquí. Opacidad cero y visibilidad oculta. Y también usar transición con duración 0.5 segundos. Si hago clic, entonces todos los elementos se esconderán. Tenemos aquí bonitos efectos de fundido. A continuación, voy a ocultar el fondo del lado derecho. Seleccionemos estos elementos usando class. Navegar. Voy a establecer transformar para traducir x 100% También necesitamos opacidad cero y nuevamente visibilidad oculta Entonces voy a agregar aquí la transición. Si hago clic, entonces el fondo se moverá hacia el lado derecho. Necesitamos ocultar esas barras de desplazamiento. Usemos desbordamiento oculto para el aterrizaje. Ahora todo funciona a la perfección. Bien, ahora voy a seleccionar aterrizaje con navegar. Para difuminar el fondo, necesitamos filtro Blar 1.5 Ram Siempre se puede ver que el fondo es blarred. En realidad necesitamos aquí fondo del contenedor para que sea negro con el fin de mejorar los efectos de desenfoque. Ahora como pueden ver, tenemos aquí resultados mucho más agradables y mejores Bien, a continuación voy a agregar transición para que el efecto sea un poco más suave. Y también necesitamos algún tiempo de retraso. A continuación, necesitamos transición para el aterrizaje por defecto. Ahora si vamos a llegar aquí efecto polar con transición suave. Bien, ahora voy a encargarme de la navegación que estaba oculta. Vamos a establecer el ancho al 100% entonces la altura va a ser 100% voy a establecer la posición en absoluto. Entonces necesitamos libros flex. Voy a cambiar la dirección, luego usar justify content center y un centro de línea de pedido. Tenemos que centrar el contenido. Me refiero a los elementos de navegación en este momento, son visibles. Agreguemos aquí el índice con el valor 100. Ahora aquí tenemos los elementos de navegación. Voy a seleccionar Elementos de enlace. Vamos a configurar el tamaño del teléfono 210 Ram. Entonces el peso del teléfono va a ser audaz. Además, voy a transformar texto en mayúsculas. A continuación, necesitamos Tech Shadow 0.5 Ram, uno Ram, y el color va a ser negro con la opacidad 0.5 A continuación necesitamos margen, 0.5 Ram Y en realidad necesitamos aquí 0.5 Ram. Aquí tenemos los elementos de navegación. Ahora voy a agarrar el fondo, que usamos un par de veces. Usemos aquí el mismo código. Cambiemos el valor porcentual que necesitamos, 35% Como puedes ver, tenemos aquí imagen de fondo para los elementos de navegación. Cambiemos aquí el color. Va a ser blanco con menor opacidad. Ahora tenemos mucho mejor resultado. Bien, después de eso, voy a crear un efecto hover en Ho. Voy a cambiar el espaciado entre letras. Voy a aumentar el espacio. Ahora necesitamos transición con la duración 0.5 segundos. Ahora tenemos este bonito y genial efecto hover. ¿Bien? A continuación, voy a ocultar la navegación por defecto. Usemos Opacidad cero y visibilidad oculta. Voy a mostrarlos de nuevo. Una vez que abrimos el menú, necesitamos el nombre de la clase navegar, seguido de la navegación. Además, necesitamos lo mismo para el elemento link. Vamos a establecer la opacidad a uno y la visibilidad a visible. A continuación, voy a cambiar la transición. Agreguemos aquí opacidad 0.5 segundos. Y también necesitamos tiempo de retardo de 1 segundo. Ahora una vez que abremos el menú, entonces se mostrarán los elementos de navegación. Bien, deshazte de este código desde aquí, porque vamos a usar diferentes transiciones para cada ítem. Voy a comenzar con el primero usando el enésimo selector hijo Definir transición. Necesitamos tu espaciado entre letras con la duración de 0.5 segundos. Entonces necesitamos opacidad 0.5 segundos y luego tiempo de retardo 1 segundo Voy a duplicar este código un par de veces. Cambiemos el niño selecciona para el segundo ítem que necesitamos 1.2 segundo. Entonces para el tercer ítem, va a ser 1.4 segundos. Entonces tendremos 1.6 segundos, y finalmente, 1.8 segundos. Si abro el menú, entonces los artículos se mostrarán en orden con un efecto agradable y genial. En realidad, todo funciona a la perfección, y ahora tenemos que hacer que el proyecto sea receptivo a diferentes tamaños de pantalla. Sigamos adelante y cambiemos el proyecto al modo responsive. Necesitamos encontrar los puntos de interrupción en los que tenemos que hacer algunos cambios para nuestro proyecto Vamos a seguir adelante y crear CSS media query. Voy a agregar aquí comentarios para responsive. El ancho máximo va a ser de 1,600 píxeles. Voy a establecer el tamaño del teléfono para el elemento H demil 55% Hará que los elementos sean más pequeños A continuación, necesitamos encontrar otro punto de quiebre. Vamos a establecer el ancho en 1,280 píxeles. Creo que el proyecto se ve bastante bien. A continuación, voy a establecer el ancho en 1024 píxeles. Sigamos adelante y dupliquemos este código. Voy a configurar con 1,200 pixeles. En cuanto al tamaño de fuente del elemento H, va a ser 45% Los elementos se hicieron más pequeños y en realidad el proyecto se ve bien. A continuación voy a hacer la pantalla más pequeña y encontrar el siguiente punto de quiebre. Vamos a configurar el proyecto dos ipod. Voy a duplicar este código, cambiar el max va a ser de 900 pixeles. En cuanto al tamaño del teléfono, voy a establecer dos 40% Además de eso, voy a seleccionar sobre, quiero decir, el párrafo, pongamos con dos para dos Ram. Como puedes ver, todo se ve bien. A continuación, voy a hacer que la pantalla sea más pequeña. Vamos a establecer con 2500 píxeles, eso es lo que va a ser el Hyde, 800 píxeles. Vamos a crear una nueva consulta de medios CSS con Max con 700 píxeles. Voy a establecer el tamaño del teléfono del elemento HTM en 35% Siguiente, voy a seleccionar aterrizaje a la izquierda y establecer con 100% Después de eso, voy a ir al archivo script Java Crear nueva variable. Va a ir rumbo, ¿verdad? Vamos a seleccionar elementos usando el método selector de consultas. Necesitamos aquí, clase principal, rumbo, ¿verdad? Duplicemos el código que necesitamos aquí. Rumbo a la izquierda también. Se seleccionan ambos elementos de encabezado. A continuación, voy a crear nueva variable llamada responsive Design va a ser una función que necesitamos if statement en la que voy a definir lo siguiente. El ancho interior de la ventana es menor o igual a 700 píxeles. Entonces necesitamos rumbo al estilo correcto. No mostrar ninguno. Si el tamaño de la pantalla es menor a 700 píxeles, necesitamos ocultar el encabezado en el lado derecho. En cuanto a la izquierda, necesitamos hacer que el texto explore. También, necesitamos declaración L. Vamos a agarrar este código. En la instrucción L, necesitamos bloque de visualización para el encabezado derecho. Para el encabezado de la izquierda, necesitamos que el contenido de texto sea x, entonces necesitamos un oyente de eventos para el objeto window con el evento resize. entonces necesitamos un oyente de eventos para el objeto window con el evento resize Y también necesitamos aquí una función de devolución de llamada. Llamemos a la función diseño responsivo. Y también tenemos que llamar a la función fuera de la declaración. Una vez que hacemos que el tamaño de la pantalla sea menor a 700 píxeles, el lado derecho, quiero decir que el encabezado derecho está oculto. A continuación, seleccionemos el encabezado principal a la izquierda. Y cambiar la posición correcta va a ser 50% Además, necesitamos centrar el elemento usando transform translate x 50% A continuación necesitamos relleno en el lado izquierdo para ser tres Ram, el encabezado se coloca en el centro. adelante y seleccionemos fondo del lado derecho y fijemos la visualización a ninguno el fondo está oculto. Además de eso, voy a seleccionar encabezado principal, justo con texto H uno y también elemento de redes sociales. Necesitamos kit web color de relleno de texto. El color va a ser blanco. Voy a seleccionar el encabezado principal y establecer el tamaño del teléfono, 212 Ram. Ahora como puedes ver, los encabezamientos y también los iconos son blancos En realidad, tenemos aquí error, necesitamos contenido de texto y no la pantalla. Y lo mismo en la declaración de outs. Ahora se solucionará el problema. Tenemos aquí rumbo con la segunda parte. A continuación voy a seleccionar sobre el cambio. La posición inferior va a ser 50% En cuanto a la posición let, va a ser 50% Entonces necesitamos transformar traducir x con -50% También necesitamos display flex y tenemos que cambiar la dirección, va a ser columna Vamos a una línea de pedido en el centro. También necesitamos definir el ancho va a ser 100% En realidad tenemos aquí algún problema. Sí, necesitamos aquí posición izquierda y no portero izquierda. Ahora el elemento se coloca en el centro. Cambiemos la pantalla para el móvil y creemos una nueva consulta de medios CSS. El ancho máximo va a ser de 450 píxeles. Voy a seleccionar acerca y establecer la posición inferior en 45% Vamos a cambiar la pantalla, hacerla más pequeña. Tenemos aquí navegación, que se ve bien. No me gustan los efectos aquí en el tamaño de pantalla más pequeño. Yo voy a encargarme de eso. Seleccionemos navegar con encabezado principal y establecer transformar traducir 50% y luego menos cinco Ram. Ahora creo que aquí tenemos resultados mucho mejores. En realidad, creo que para el proyecto ya hemos terminado. Ojalá fuera interesante y aprendiste algunas cosas nuevas. Sigamos adelante y pasemos al siguiente proyecto. 27. Project 22 - Slider con testimonios: Bien, así que es hora de seguir adelante con la respuesta para crear nuestro próximo proyecto. En esta sección, vamos a estar construyendo un slider testimonial. Este proyecto se va a crear en base a HTML, CSS y Javascript. Sigamos adelante y describiéndolo rápidamente. Como puedes ver, tenemos aquí un slider testimonial. O sea, en el centro de la página, se puede ver la tarjeta donde tenemos la imagen del cliente, luego la opinión del cliente, también el nombre y la edad. En el lado derecho e izquierdo, se pueden ver las flechas. Puedes hacer clic en las flechas y nosotros cambiaremos a los demás clientes. Abajo, se puede ver que esos son los controladores. Puedes hacer clic en esos puntos y obtendremos el cliente adecuado. Bien, creo que el proyecto será interesante y útil hoy en día. Casi todos los sitios web tienen dicha sección. Podrás aprender sobre cómo crear slider testimonial. Bien, así que sigamos adelante y comencemos. He creado una nueva carpeta en el escritorio en la que tengo carpeta para las imágenes. Sigamos adelante y abramos el proyecto y el código VS, y luego creamos archivos de trabajo para HTML. Entonces para CSS, también necesitamos archivo para script Java. Vamos a abrir el archivo HTML de índice y crear la estructura HTML básica. Voy a cambiar el título. Va a ser slider testimonial. Después voy a vincular el archivo CSS, y también necesitamos vincular el archivo Javas Vamos a insertar el archivo nombrando el atributo source. Bien, abramos el proyecto al navegador usando servidor en vivo y luego organicemos nuestro entorno de trabajo. Voy a colocar el navegador y el editor uno al lado del otro así, para que el proceso sea más sencillo. Bien, voy a corregir el enlace de CDN telefónico porque vamos a usar algún teléfono así iconos a lo largo de este proyecto Vamos a copiar el enlace, luego abrir la etiqueta de enlace en el elemento head y pegar el CDN en el atributo de referencia H. Además de eso, vamos a usar algunos teléfonos de Google. Así que visitemos el sitio web de Google Phones. Voy a buscar una llamada telefónica. ¿Puede? Seleccionemos Estilos. Después voy a copiar el enlace y pegarlo en el elemento head. Bien, estamos listos para comenzar a escribir el código. Voy a comenzar con el marcado HTML. Necesitamos un contenedor que envuelva todo el contenido. A continuación, necesitamos envoltorio de testimonios, en el que voy a abrir otro profundo, va a ser encabezado de testimonios. Dentro de ese elemento, necesitamos H tres elemento encabezado con el texto, nuestros clientes. A continuación necesitamos H un elemento de encabezado, va a ser testimonial. A continuación necesitamos estrellas. Voy a abrir elementos con la estrella sólida clase A. Necesitamos cinco estrellas. Aquí tenemos los iconos. Siguiente Voy a insertar aquí, Testimonios en los que necesitamos slider. Entonces necesitamos diapositiva. Voy a insertar aquí, fondo de diapositiva. A continuación, el contenido de la diapositiva en que voy a insertar elemento. Va a ser una izquierda sólida. Entonces necesitamos derecho. A continuación necesitamos crear una imagen de diapositiva en la que voy a insertar etiqueta de imagen. Seleccionemos Imagen en la carpeta de imágenes. Va a ser cliente en IPG. A continuación, el texto de la diapositiva en el que voy a insertar. H, elemento de tres encabezamientos, va a ser un producto maravilloso. A continuación necesitamos párrafo con un texto Tammy. También, necesitamos otro párrafo en el que voy a insertar el nombre del cliente, el H. Después de eso, voy a crear los controles. Vamos a abrir Deep va a ser controles. Y voy a insertar aquí el elemento I, que va a ser FA sólido FA flecha izquierda. Entonces necesitamos flecha a la derecha. Y también voy a insertar tus puntos los cuales serán creados por elementos span. Bien, así que en realidad tenemos aquí un pequeño problema hay que agregar aquí. Va a ser sólido. Ahora, los Asmicons telefónicos se muestran en realidad con el marcado H demil Estamos abajo. Sigamos adelante y comencemos a escribir el CSS. En primer lugar, como de costumbre, voy a seleccionar cada elemento y luego establecer margen y ponerlos a cero a ambos. A continuación, voy a establecer el tamaño de la caja a la caja de borde. También necesitamos familia telefónica. Va a ser el teléfono llamado can it, que seleccionamos en el sitio web de Google phones. A continuación, voy a establecer el tamaño del teléfono del elemento H mil 62.5% porque vamos a usar M como unidad de medida uno, Ram será igual a diez píxeles, todos los elementos se hicieron más pequeños A continuación, te voy a sacar de la imagen. Vamos a poner con 215 Ram, entonces la altura va a ser 16 Ram. Entonces voy a seleccionar la propia imagen , definir dentro de la altura. Voy a establecer con 200% la altura va a ser 100% Y además necesitamos pies de objeto con cobertura de valor Ahora la imagen se hizo más pequeña. Sigamos adelante y comencemos a personalizar el contenedor. Voy a establecer con al 100% entonces la altura va a ser de 100 partes de altura. Cambiemos el color de fondo. Voy a usar gradiente lineal. El primer color va a ser 368661. Entonces el siguiente va a ser el 2964. Tenemos aquí bonito fondo. Usemos libros flex. Necesitamos centrar el contenido usando el centro de contenido justificado y el centro de líneas de pedido. Entonces como puedes ver, el contenido se coloca en el centro. Sigamos adelante y seleccionemos envoltorio testimonial. Voy a establecer el ancho al 95% entonces la altura va a ser del 90% A continuación necesitamos color de fondo. Voy a usar gradiente lineal. El primer color va a ser RGBA, color negro con opacidad 0.7 A continuación necesitamos de nuevo, color negro con la opacidad 0.5 Con la opacidad 0.6 Entonces voy a definir URL de la imagen de fondo Seleccionemos Imagen en la carpeta de imágenes. A continuación, voy a definir la posición va a ser sensor y además no necesitamos repetir. Por último, voy a establecer el tamaño de fondo para cubrir. Como pueden ver, tenemos aquí una imagen de fondo agradable y genial para el envoltorio. A continuación necesitamos sombra de caja con valor 01, Bram five fram, y el color va a ser RGBA, color negro con la opacidad 0.4 Tenemos aquí bonito y Siguiente Voy a encargarme del encabezado testimonial. Fijemos la posición a absoluta. Entonces necesitamos posición relativa para el elemento padre, que es el envoltorio testimonial. Voy a establecer la posición superior al 5% entonces la posición izquierda va a ser 50% Necesitamos centrar el elemento usando transform translate x con el valor menos. 50% A continuación, necesitamos alinear el texto en el centro. Tenemos aquí el encabezado testimonial. Vamos a copiar el, Seleccione Pégalo aquí. Y seleccione H, elemento de tres encabezamientos. Voy a establecer el tamaño del teléfono en dos Ram. Entonces el peso del teléfono va a ser de 300. Además, necesitamos color a CCC. Tenemos aquí el primer elemento de encabezamiento. A continuación, duplico este código, cambio el selector que necesitamos aquí. H un elemento de encabezamiento. Vamos a establecer el tamaño del teléfono en cinco Ram. Entonces voy a agregar aquí texto transformar con el valor mayúsculas también cambiar el color, va a ser blanco. Entonces necesitamos espaciado entre letras con el valor 0.4 Ram. Aquí tenemos el rubro. A continuación, voy a tomar del teléfono asume íconos. Vamos a establecer el tamaño del teléfono en 1.6 Ram. Entonces el color, va a ser RTB 255 a 2062, va a ser de color amarillo Vamos a establecer el margen en 0.5 Ram. Aquí tenemos las estrellas. Se ven bastante bien. A continuación voy a encargarme de los controles. Vamos a poner a cinco, entonces la altura va a ser cinco Ram. A continuación necesitamos color de fondo. Voy a establecer el color de fondo 27854. Entonces voy a establecer Opacidad 2.6 A continuación necesitamos radio de borde 50% necesitamos controles redondeados Entonces voy a configurar display a flex porque necesitamos centrar las flechas usando justify content center y line item center. Como puede ver, las flechas se colocan en el centro de los círculos. Vamos a agregar tamaño de fuente, que sea tres Ram. Entonces necesitamos color. Va a ser 444. También, voy a establecer posición en absoluto. A la posición va a ser 50% También necesitamos transformar traducir Y para centrar las flechas verticalmente con el valor -50% Y luego cambiar el cursor, hacerlo puntero Aquí tenemos los controles. Ahora tenemos que seleccionar controles con mph, selectores de gráficos y establecer la posición izquierda para la primera flecha en 15% Vamos a duplicar este código Selecciona la segunda flecha y cambia de posición. Necesitamos la posición correcta 15% Como puedes ver, las flechas están muy bien alineadas. A continuación voy a encargarme de los puntos. Seleccionemos elementos span. En primer lugar, voy a definir nosotros y altura. Vamos a ponerlos a ambos en un Ram. Entonces necesitamos color de fondo. Va a ser CC. Entonces necesitamos radio de borde para hacer que los elementos sean redondeados usando 50% Ahora mismo, los puntos no son visibles. Vamos a establecer la posición en absoluto para el elemento padre. Entonces ollas y posición va a ser 10% como let position, lo voy a decir al 50% Y luego necesitamos centrar los elementos usando transform translate x -50% A continuación necesitamos Flexbox Aquí tenemos los puntos. Necesitamos algo de espacio entre ellos. Hagámoslo usando margin 0.5 rm. Y también voy a poner cursor a puntero. Ahora los puntos se ven bastante bien. Agreguemos la clase activa al primer elemento spin. A continuación, seleccione el elemento de giro activo. Establezca el ancho a 1.5 entonces la altura va a ser. 1.5 Carnero. Necesitamos que el color de fondo sea blanco. Entonces como puedes ver, el punto es más grande. Necesitamos centrar los elementos verticalmente usando líneas de pedido. Centro, bien, eso es todo sobre los puntos ahora mismo. A continuación voy a encargarme del tobogán. Seleccionemos testimonios establecidos con 55% entonces la altura va a ser 50 Ram. Siguiente minuto posición absoluta, voy a establecer a posición a 50% entonces la posición izquierda va a ser 50% Y necesitamos centrar el elemento usando transformar traducir los valores -50% otra vez -50% Siguiente Voy a agregar frontera Va a ser 0.1 m sólido y el color va a ser blanco. Aquí tenemos el borde, vamos a duplicar la diapositiva un par de veces. Voy a hacer aquí algunos cambios. Tenemos que cambiar el nombre de la imagen ya que el nombre del cliente va a ser Mary Brown. A continuación necesitamos cliente tres. El nombre es Nick Jones y el será 27. Necesitamos cliente cuatro, el nombre es Brown. Cambiemos la H. Tenemos aquí. Última imagen, cliente cinco, y el cliente va a ser John Smith, 25. Como pueden ver, esta diapositiva se muestran a continuación, voy a seleccionar slider, establecer la altura a 100% Entonces el ancho va a ser 500% Necesitamos establecer display flex, así las diapositivas se colocan horizontalmente, lado a lado Siguiente Voy a seleccionar el conjunto de diapositivas al 20% Será el 100% del envoltorio. Estoy en la quinta parte del envoltorio. Seleccionemos el fondo de la diapositiva y pongamos el ancho al 70% y la altura va a ser 65% voy a cambiar el color de fondo. Vamos a usar aquí este color verde. A continuación, voy a establecer posición en absoluto. Necesitamos posición relativa para el elemento padre. Entonces voy a definir a posición va a ser 50% la posición izquierda va a ser 50% Y necesitamos transformar, traducir con los valores -50% y otra vez -50% Aquí tenemos el fondo para esta diapositiva Agreguemos aquí, o el radio. Van a ser dos Ram. Entonces necesitamos opacidad 0.7 Después de eso, voy a seleccionar el contenido de la diapositiva Vamos a agarrar el código de aquí y pegarlo para el contenido de la diapositiva. Cambia el color del tocino, va a ser blanco. Además, voy a deshacerme de la opacidad. Entonces necesitamos display flex. Además, necesitamos aquí justificar contenido con el espacio de valor entre, necesitamos espacio entre los elementos flexibles. Además, agreguemos aquí un centro de líneas de pedido. Y luego necesitamos crear espacio usando relleno, 0.5 Ram. A continuación, voy a rotar el fondo usando la función rotar Z. Y el valor va a ser menos seis grados. Ahora tenemos aquí resultados mucho mejores y agradables. A continuación, voy a encargarme de la. Phonosomicon, pongamos el tamaño del teléfono a 12 Bram, entonces el color va a ser verde También, voy a establecer posición en absoluto. Aquí tenemos las cotizaciones y necesitamos posicionarlas. Vamos primero fonosomicon usando nésimo hijo seleccionar las dos posiciones va a ser -20% En cuanto a la posición izquierda, voy a ponerla en 10% Vamos a duplicar este código Para el segundo fonosomicón necesitamos posición inferior -20% y posición derecha 10% Como puedes ver, comillas Sigamos adelante y nos ocupemos del texto de la diapositiva. Vamos a poner el ancho al 70% entonces voy a cuidar la imagen. Vamos a establecer el radio del borde a 3m03 Ram cero. Ahora la imagen se ve bastante bien. Siguiente Voy a seleccionar imagen de diapositiva con después de pseudo elementos También necesitamos imagen de diapositiva con antes de pseudo elemento. Necesitamos crear una bonita frontera. Pongamos quantum a vacío. Entonces necesitamos ser 100% la altura va a ser 100% Entonces necesitamos, pongámoslo en absoluto. Necesitamos posición relativa para el elemento padre, que es la imagen de diapositiva. Siguiente Voy a poner borde a 0.2 Ram sólido. Y el color va a ser RTB, un color negro con opacidad 0.4 A continuación necesitamos radio de borde tres, Ram 03 Ram cero Es como el radio del borde de la imagen. A continuación tenemos que encargarnos de las posiciones de los elementos del después y del antes. Empecemos con el elemento after. La posición de dos va a ser menos uno Ram. Entonces necesitamos la posición izquierda va a ser -0.5 Ram. Duplicemos este código, cambiemos el selector que necesitamos antes del elemento. Pongamos macetas y posicionemos dos menos uno Ram. Y la posición correcta va a ser -0.5 Ram. Bien, ahora los elementos se ven bien. Necesitamos aquí es la propiedad índice menos uno. Ahora tenemos aquí esta linda y genial, el hecho de la frontera. Vamos a seleccionar el texto de la diapositiva con H tres elemento de encabezado. Voy a establecer el tamaño del teléfono en 2.5 Ram. Entonces el peso del teléfono va a ser de 300. Voy a poner color a 111, luego voy a establecer margen en la parte inferior a una Ram. Sigamos adelante y personalicemos el párrafo. Seleccione el texto de la diapositiva con el selector. Voy a establecer el tamaño del teléfono en 1.4 Ram. El peso del teléfono va a ser de 300. También necesitamos que el color sea RGB 3,040.35 Entonces voy a establecer la altura de línea a 1.2 También necesitamos tu margen En la parte inferior, van a ser tres Ram. Como pueden ver, el párrafo se ve bastante bien. Vamos a establecer con 235 Ram. Siguiente Voy a seleccionar Slide Text Client. Vamos a configurar el tamaño del teléfono 21.8 Ram. En cuanto al color, voy a usar RTP 11, 83, 47. El nombre y el. Se ve bastante bien. En realidad, me deshago de esta frontera de aquí. Ya no lo necesitamos. Ahora tenemos que empezar a escribir el Javascript. Vamos a crear una variable. Va a ser slider. Voy a seleccionar elemento usando el método selector de consultas. Vamos a insertar tu deslizador de nombre de clase. A continuación, necesitamos un par de variables diferentes. El segundo va a ser diapositivas. Y tenemos que seleccionar diapositivas usando el selector de consultas Método Todo. Cambiemos el nombre de la clase. La siguiente variable va a ser la flecha izquierda. Vamos controlador flecha izquierda. También necesitamos aquí flecha derecha. Duplicemos esta línea de código. Cambiar de izquierda a derecha. Necesitamos aquí niño dos. Bien, ahora voy a agregar incluso oyente a la flecha derecha con evento click Entonces necesitamos la función cope que se ejecutará una vez que hagamos clic en la flecha derecha. Voy a añadir estilo al deslizador. Se va a transformar con la función value translate x. Voy a interferir -20% A continuación, necesitamos transición para el slider con todos y la duración va a ser 0.8 segundos Además, voy a usar P1001 cúbico. Si hago clic en la flecha derecha, entonces este deslizador se moverá hacia el lado izquierdo. A continuación, voy a crear nueva variable, va a ser índice de diapositivas. Y voy a ponerla a cero por defecto y duplicar este código que necesitamos aquí. Flecha izquierda. Voy a agregar aquí índice de diapositivas, y voy a configurarlo para deslizar índice menos uno. Entonces traducimos x. voy a pasar aquí índice de deslizamiento multiplicado a -20% Vamos a copiar este código Pégalo aquí para la flecha derecha que necesitamos aquí, más una. Ahora si hago clic en el, el deslizador funcionará bien. Una vez que llegamos a la última o primera diapositiva, entonces tenemos que detener el deslizador. Necesitamos aquí índice de deslizamiento mayor a cero. Necesitamos signo de interrogación, índice de deslizamiento menos uno o cero. Necesitamos la declaración similar aquí. Índice de diapositivas menor que las diapositivas enseñadas longitud menos uno o luego signo de interrogación. Y tenemos que inder índice de deslizamiento más uno o longitud de diapositivas menos uno Ahora una vez que lleguemos a la última diapositiva, el deslizador dejará funcionar y sucederá lo mismo para la primera diapositiva. ¿Bien? Ahora necesitamos desbordamiento oculto para ocultar el resto de las diapositivas. Ahora si hago clic, entonces el deslizador funcionará perfectamente. Ahora tenemos que encargarnos de los puntos. Vamos a crear una variable. Va a ser envoltorio de puntos. Seleccione este elemento. A continuación necesitamos, voy a pasar tu lapso. También necesitamos consulta seleccionar todos. Voy a mirar a través de los puntos usando el método de forraje. Necesitamos punto e índice. Los parámetros que voy a agregar incluso escuchando el punto con evento click. Y también tenemos que pasar aquí la función de devolución de llamada. Vamos a establecer índice de diapositiva a índice, me refiero al parámetro. Siguiente Voy a puntos activos, uso método selector de consulta. Voy a eliminar activo de la lista de clases. Agreguemos aquí la misma declaración. También, voy a sumar al activo. Ahora si hago clic en el, el deslizador funcionará. Ahora necesitamos trabajar los puntos. Una vez que hagamos clic en los controladores, agreguemos aquí los niños del envoltorio de puntos. Tenemos que agregar aquí índice de diapositivas. Agrego activo a la lista de clases. Entonces copio este código de aquí y lo agrego para ambas flechas. Ahora si hago clic, entonces los puntos funcionarán bien. En realidad, todo funciona bien. A continuación, voy a crear una variable llamada set index, que será función. Voy a agarrar este código de aquí y agregar una función también necesitamos este código. Entonces me voy a deshacer de este extremo de código llamado el índice de conjunto de funciones. Voy a hacer lo mismo con las flechas izquierda y derecha. Llamemos al índice de conjunto de funciones. Ahora el código parece mucho más sencillo. En realidad, todo funciona a la perfección y ya terminamos con este proyecto. Ojalá fuera interesante y aprendiste algunas cosas nuevas. Sigamos adelante y pasemos al siguiente proyecto. 28. Proyecto 23 - Formulario de contacto animado: Hola y bienvenidos a nuestro próximo proyecto. En esta sección, vamos a estar creando un formulario de contacto animado. El proyecto se creará en base a HTML, CSS y Javascript. Como puedes ver, tenemos aquí un círculo animado en el centro de la página. Si hago clic en él, entonces se mostrará el formulario de contacto. Consta de un par de elementos diferentes. Tenemos aquí rumbo a campos de entrada para nombre y correo electrónico con este bonito efecto de enfoque. Entonces tenemos aquí área de texto para el mensaje. Abajo, puedes ver el botón que tiene este bonito y genial efecto hover En la esquina superior derecha del formulario de contacto, se puede ver el botón de cierre X. Si hago clic en él, entonces se cerrará el formulario de contacto. Bien, creo que el proyecto va a ser interesante y útil. Sigamos adelante y comencemos. He creado una nueva carpeta en el escritorio. Sigamos adelante y lo abramos en código VS, luego creamos nuestros archivos de trabajo para HTML. Entonces necesitamos archivo para CSS, así que voy a crear script archivo JS para script Java. Vamos a abrir el archivo HTML índice y crear el documento HTML básico. Voy a cambiar el título. Va a ser Formulario de Contacto. A continuación, voy a enlazar archivo CSS. También necesitamos enlace para archivo Javas. Sigamos adelante y abramos el proyecto al navegador usando servidor en vivo. Y también necesitamos colocar el navegador y el editor uno al lado del otro, así. A continuación, voy a visitar el sitio web de Google Phones. Debido a que vamos a usar los teléfonos de Google a lo largo de este proyecto, voy a buscar un teléfono llamado poppins Seleccionemos un par de estilos diferentes, después voy a copiar el enlace y pegarlo en el elemento head. A continuación, voy a agarrar el teléfono, algún enlace de CDN porque vamos a usar teléfono algunos iconos necesitamos para abrir etiqueta de enlace y pegar la CDN en el atributo de referencia H. Bien, estamos listos para comenzar a escribir el marcado HTML. Necesitamos un contenedor que envuelva todo el contenido. A continuación, necesitamos envoltorio de formulario. Voy a abrir botón con la clase cerrar BTN. A continuación, tenemos que colocar aquí x después del botón. Voy a crear formulario con el nombre de la clase formulario de contacto. Vamos a deshacernos del atributo action Dentro del elemento form. Voy a colocar H una etiqueta de encabezado con el encabezado del formulario de clase. El texto va a ser Contáctanos. A continuación necesitamos desarrollo, que van a ser grupos de entrada. Vamos a insertar tu grupo de entrada en el que voy a colocar etiqueta por nombre. Voy a agregar aquí etiqueta de campo. A continuación, voy a insertar tu etiqueta de entrada con el texto tipo, también nombre de clase, va a ser campo. Entonces tenemos que agregar aquí atributo placeholder con el texto Ingresa tu nombre. Voy a duplicar grupo de entrada. Necesitamos lo mismo para el correo electrónico. Cambiemos el texto. Por lo que necesitamos aquí ingrese su dirección de correo electrónico junto a insertar área de texto. Al principio necesitamos desarrollo con el grupo de área de texto de clase. Y luego voy a insertar tu etiqueta para mensaje. El nombre de la clase va a ser etiqueta de campo. A continuación, voy a insertar área de texto. Con el campo de nombre de clase. Además, necesitamos el atributo placeholder con el texto, tu mensaje aquí Bien, después de eso necesitamos presentar a Batson. Con el tipo Batson. Voy a agregar aquí el nombre de la clase, va a ser Enviar PTN Entonces voy a agregar aquí cual se colocará en el elemento span Submit. Y también necesitamos elemento que va a ser sólido FA flecha justo después del botón. Voy a colocar aquí párrafo con el texto para cualquier duda conflicto o call center 2047 Voy a agregar aquí elementos span y algún número de teléfono ficticio En realidad se crean todos los elementos y ahora podemos empezar a escribir el CSS. Como de costumbre, voy a seleccionar cada elemento y luego establecer el margen y el relleno de ambos a cero. A continuación tenemos que definir el tamaño de las cajas. Va a ser caja fronteriza ya que voy a poner línea a ninguno. Entonces voy a definir la familia telefónica. Va a ser poppins san serif. Se aplican los estilos por defecto. A continuación, voy a establecer el tamaño del teléfono del elemento HTM en 62.5% Para usar M como unidad de medida uno, m será igual a diez píxeles Después de eso, seleccionemos contenedor. Voy a definir ancho, va a ser 100% entonces la altura va a ser de 100 puertos de altura. Voy a cambiar el color de fondo, va a ser EEE A continuación, selecciono envoltorio de formulario, vamos a establecer con 60% entonces la altura va a ser 70. A continuación necesitamos color de fondo, va a ser blanco. Aquí tenemos el envoltorio de formularios. Necesitamos posición para ser absolutos. Entonces la posición dos va a ser 50% La posición izquierda será 50% Y para censurar el elemento, necesitamos transformar traducir -50% y nuevamente -50% Como puede ver, el envoltorio de formulario se coloca en el centro de la página A continuación, voy a agregar aquí alguna sombra con el valor 03 Ram, seis Ram. Y el color va a ser RGBA, color negro con una menor opacidad, 0.1 Tenemos aquí bonito efecto de sombra Vamos a establecer el radio del borde en un Carnero para que las esquinas sean redondeadas. Ahora la envoltura de espuma se ve mejor. A continuación, voy a seleccionar cerrar BTN y establecer su posición en absoluto Entonces la posición de dos va a ser -1.5 fram. La posición correcta va a ser -1.5 fram también. Vamos a establecer el ancho a tres Ram. Entonces la altura va a ser un carnero de tres. Necesitamos color de fondo, va a ser blanco. Aquí tenemos el x botón de cierre. Vamos a poner borde 2.1 Ram vendido. El color va a ser EEE. También, necesitamos radio de borde para que el elemento sea redondeado. A continuación, voy a agregar aquí sombra de cuadro con el valor 0.1 0.1 m. El color va a ser RGBA, color negro con la opacidad 0.1 También necesitamos aquí puntero Y entonces voy a crear efecto hover. Vamos a seleccionar el botón. Con hover, voy a cambiar el color de fondo Va a ser de dos a dos. Entonces necesitamos que el color sea blanco. Voy a poner borde a 0.1 Ram sólido y el color va a ser blanco. Agreguemos aquí la transición para que el efecto sea más suave. Si pongo el cursor sobre el botón de cierre X, entonces llegaremos hasta aquí. Efecto agradable y fresco. Sigamos adelante y seleccionemos el formulario de contacto. Voy a establecer el ancho al 100% entonces la altura va a ser 100% Vamos a configurar display Flex. Entonces necesitamos flex direction para ser columna, tenemos que alinear elementos verticalmente. Entonces necesitamos justificar el contenido. Va a ser espacio incluso para crear espacio para eventos entre los elementos flexibles. También, voy a poner poner a 0.15 Ram en los lados izquierdo y derecho. Sigamos adelante y formemos rumbo. Voy a establecer el tamaño del formulario para formar. Entonces el color va a ser 333. Aquí tenemos el rubro. Siguiente Voy a seleccionar Grupos de entrada. Vamos a configurar con 100% Entonces necesitamos display Flex. Voy a establecer justificar el contenido al espacio entre. También necesitamos margen en la parte inferior , van a ser tres Ram. Los campos de entrada están alineados. A continuación, seleccionemos el grupo de entrada. Necesitamos ancho para ser 40 Ram, Entonces la altura va a ser seis. Siguiente Voy a seleccionar etiqueta de campo. Vamos a establecer el tamaño en 1.4 Ram. El color va a ser 888. Después de eso, voy a seleccionar elemento de entrada usando campo de clase. Vamos a establecer con 100% entonces la altura va a ser 100% A continuación necesitamos frontera, va a ser ninguno. Además, voy a establecer borde inferior, 2.2 m sólido y el color va a ser BBB Tendremos justo borde en la parte inferior. A continuación necesitamos el tamaño del teléfono va a ser 1.8 Ram. Entonces voy a poner pudín a 002 Ram y cero. Eso es todo sobre el elemento input. A continuación necesitamos campo con atributo placeholder. Voy a cambiar el color, hagámoslo 222. Se cambia el color del marcador de posición. A continuación, voy a seleccionar Grupo de área de texto. Vamos a configurar la pantalla Flex. Necesitamos dirección flex. Va a ser columna. Después de eso, voy a seleccionar grupo de área de texto, seguido del área de texto. Voy a establecer la altura a 12 Ram. Necesitamos aquí frontera en la parte inferior. Va a ser 0.2 Ram sólido, y el color va a ser BBB Entonces necesitamos relleno en la parte superior, va a ser uno Carneros Voy a desactivar la función de cambio de tamaño. Tenemos que establecer redimensionar a ninguno ahora ya no podemos recitar el área de texto Después de eso, voy a seleccionar Enviar BTN, Vamos a establecer con 18 Ram, entonces la altura va a ser cinco Ram Entonces necesitamos color de fondo. Voy a 72 f45 A. A continuación, deshazte de frontera por defecto. Hagámoslo ninguno. Voy a hacer que el elemento redondeado usando radio de borde tres Ram. Cambia el color. Va a ser blanco como necesitamos. Tamaño de fuente para ser 1.5 Ram. Ahora el botón se ve mucho mejor. A continuación necesitamos sombra de caja. Va a ser 0.3 Ram, uno Ram, y el color va a ser 250-57-0590 Y la opacidad 0.5 También necesitamos Bien, entonces el botón se ve bastante bien. Siguiente Voy a seleccionar Enviar BTN, seguido de esto un elemento Fijemos la posición a absoluta. Entonces necesitamos posición relativa para el elemento padre, que en este caso es el propio botón. Pongámonos a posición al 50% Entonces la posición de la izquierda va a ser cinco fram Entonces necesitamos transformar traducir Y -50% para censurar el elemento verticalmente A continuación, voy a seleccionar enviar BTN seguido del icono El tamaño de la fuente va a ser 1.8 Ram. Entonces la posición va a ser absoluta. Tenemos que posicionarnos para ser 50% entonces la posición correcta va a ser 4.5 Ram. Y también necesitamos censurar el elemento verticalmente usando transform translate Y -50% Bien, después de eso voy a crear el efecto hover Seleccionemos el botón con hover. Al flotar, voy a cambiar el color de fondo. Va a ser 333. Además, necesitamos sombra de caja con el valor de 0.3 Ram, una Ram. Y el color va a ser RGBA, color negro con la opacidad 0.5 hover Tenemos que agregar aquí transición ahora como puedes ver, tenemos un efecto hover agradable y genial cursor. Voy a mover el icono. Vamos a enviar botón con hover seguido del elemento. Voy a cambiar. La posición correcta va a ser tres Ram. También utilizo aquí transición con derecho y la duración va a ser de 0.5 segundos. Una vez que flote, entonces la flecha se moverá hacia el lado derecho. Y en realidad va a crear este bonito y genial efecto hover A continuación, voy a seleccionar contacto para el párrafo abajo. Vamos a establecer el tamaño del teléfono en 1.6 Ram. Entonces el color va a ser 888. A continuación, voy a seleccionar el elemento span en el párrafo. Cambiemos el color. Voy a usar aquí, color 45. El párrafo se ve bastante bien en realidad. Lo siguiente que tenemos que hacer es crear un efecto de enfoque. Una vez que nos enfocamos, tenemos que cambiar la frontera en la parte inferior. Me refiero al color, vamos a ponerlo en un sólido 0.2 Ram, y el color va a ser 45. Un siguiente borde de transición inferior con la duración 0.3 segundos. También necesitamos facilitar el enfoque de la función, los campos de entrada, luego obtendremos este efecto agradable y genial Bien, después de eso, voy a seleccionar Enfoque de campo, seguido del atributo placeholder Necesitamos ocultar el marcador de posición al enfocar el campo. Vamos a establecer el color a transparente. Y entonces necesitamos hacer la transición de color y la duración, 0.3 segundos. Una vez que nos enfocamos, entonces el atributo placeholder se ocultará muy bien Ahora tenemos que encargarnos de las animaciones. Vamos a establecer display a none para el envoltorio del teléfono. Voy a añadir nuevos elementos en el archivo HTML. Vamos a llamarlo cargando. Necesitamos aquí otro fondo de carga profunda que voy a colocar aquí que va a ser FA regular. Fa sobre. A continuación, voy a darle estilo a esos elementos. Seleccionemos la carga. Establecer ancho a 100% entonces la altura va a ser 100% voy a establecer posición en absoluto. Entonces necesitamos posicionar cero. Dejemos la posición cero, necesitamos Display Flex para centrar el contenido usando Justify Content Center y Align Items center. El elemento se coloca en el centro. A continuación, voy a seleccionar el fondo de carga. Definamos el ancho. Va a ser 12 Ram. Entonces la altura será 12 Ram también. Cambia el color de fondo, Usa este color aquí. A continuación necesitamos radio fronterizo. Va a ser círculo. Necesitamos 50% Entonces necesitamos sombra de caja con el valor de 01m3 Ram El color va a ser este color que usamos recientemente. A continuación voy a seleccionar elementos. Vamos a poner a 12 M. Entonces la altura va a ser 12 Ram también. A continuación necesitamos color. Va a ser blanco. Entonces voy a aumentar el tamaño del teléfono. Vamos a ponerla a M. Cambiar la posición, voy a hacerla absoluta. Entonces nosotros dos posición va a ser 50% posición izquierda va a ser 50% Y necesitamos centrar el elemento, traducir -50% y -50% También necesitamos display flex con justify content center y line item center con el fin de censurar el icono dentro del círculo Vamos a correr a punto. Bien, el icono se ve bastante bien. Ahora voy a crear fotogramas clave CSS con el nombre cargando un al 0% necesitamos ancho para ser 12 Ram. También la altura va a ser 12 Ram. El color de fondo será F45. Entonces al 50% voy a aumentar el ancho, va a ser 14 Ram. Entonces necesitamos altura 14 Ram. En cuanto al color de fondo, voy a usar F616 Apliquemos esos mosaicos. Necesitamos animación. Entonces el nombre de los fotogramas clave cargando la duración va a ser 0.9 segundos. Entonces necesitamos flexibilizar la función. Además, necesitamos reproducir la animación infinitamente. Como puedes ver, el fondo está animado. A continuación, voy a usar Javascript para mostrar el formulario de contacto. Vamos a crear una nueva variable. Va a ser, vamos seleccionar icono usando el método selector de consultas. Tenemos que insertarte el nombre de clase cargando I. Entonces necesitamos la segunda variable que va a estar cerca BTN Seleccionemos este elemento. En cuanto a la tercera variable, voy a usar container. Insertemos tu contenedor de nombre de clase. A continuación, voy a agregar un oyente de eventos al icono con click event Además, tenemos que pasar aquí la función de devolución de llamada que se ejecutará una vez que hagamos clic en el icono al hacer clic Voy a agregar nueva clase al contenedor usando el método add y el nombre de la clase va a ser cambiado. Duplicemos el código que necesitamos aquí, Cerrar PTN. Una vez que hacemos clic en el PTN cerrado, entonces necesitamos eliminar el cambio de clase del contenedor Ahora es el momento de usar el cambio de clase y tenemos que definir nuevos estilos CSS, los cuales se aplicarán al click. Aquí necesitamos opacidad cero, visibilidad oculta. A continuación, voy a agregar aquí opacidad cero y visibilidad oculta. Además, necesitamos seleccionar envoltorio de formulario con cambio de clase. Y tenemos que hacer visible la forma usando opacidad uno y visibilidad visible. Una vez que haga clic, entonces se mostrará el formulario. Y luego una vez que hagamos clic en el botón X, se cerrará. Ahora voy a agregar aquí transición con toda la duración va a ser 0.3 segundos. Necesitamos transición por defecto para la carga con algún tiempo de retardo 0.3 segundos. A continuación necesitamos transición para el envoltorio Fam. Va a ser un 0.3 segundos y el tiempo de retardo 0.3 segundos. Y también necesitamos transición por defecto todos los 0.3 segundos. Ahora si hago clic, entonces el formulario se mostrará con efecto Fa y en realidad todo va a funcionar bien. Bien, así que eso es todo. Sigamos adelante. 29. Project 24 - Encabezado de sitio web con formularios: Bien, así que es hora de seguir adelante y comenzar a crear nuestro próximo proyecto. En esta sección, vamos a estar construyendo un encabezado de sitio web con formularios de registro y registro. El proyecto se creará en base a HTML, CSS y Javascript. Así que vamos a seguir adelante y describirlo rápidamente. Como puedes ver, tenemos aquí este bonito y genial encabezado de sitio web. Tenemos aquí poca navegación con dos enlaces a casa y únete. Entonces tenemos pancarta con elementos de encabezado, y también tenemos aquí un pequeño logo en la esquina inferior derecha. Si hago clic en unirse, entonces obtendremos aquí el formulario de registro. Tenemos aquí un par de campos de entrada diferentes con dos botones. Si hago clic en el enlace de inicio de sesión, entonces iremos al formulario de inicio de sesión. Como puede ver, el botón se cambia correctamente. Si hago clic en Inscribirse, entonces volveremos al formulario de registro. Si hago clic en Inicio, entonces iremos al Banner Ok. Entonces eso se sienta sobre este proyecto. Espero que sea interesante y útil y lo disfrutes. Así que sigamos adelante y comencemos. He preparado una nueva carpeta en el escritorio en la que tengo carpeta para las imágenes. Sigamos adelante y abramos el proyecto en código VS. Entonces voy a crear nuestros archivos de trabajo para HTML. Entonces necesitamos archivo para CSS. Voy a crear guión. S. Vamos a abrir el archivo Html índice y crear la estructura Html de la página. Voy a cambiar el título, va a ser landing page. Después voy a vincular el enlace del archivo CSS para el archivo script Java. Agrego aquí nombre de archivo en el atributo source. Bien, sigamos adelante y abramos el proyecto al navegador usando el paquete de servidor en vivo. Entonces voy a colocar el navegador y el editor uno al lado del otro. Así que bien, voy a visitar el teléfono increíble CDN porque vamos a usar algunos iconos impresionantes del teléfono Vamos a copiar el enlace desde aquí. Entonces voy a abrir la etiqueta de enlace y pegar aquí la CDN. A continuación tenemos que visitar el sitio web de Google Phones. Voy a usar Google Phones a lo largo de este proyecto. Sigamos adelante y busquemos fuente llamada cabina. Seleccionemos un par de estilos diferentes, luego copiemos el enlace y lo peguemos en el elemento head. Bien, estamos listos para comenzar a crear el marcado HDL. En primer lugar, voy a abrir deep tag, que va a ser el contenedor. A continuación, voy a insertar aquí, otro va a estar aterrizando en el que voy a crear navegación con la parte de clase. Voy a agregar aquí navegación en la que vamos colocar elemento link con el logo de Css Estoy lugar aquí elemento span con el círculo de Quas. A continuación, voy a agregar aquí otro lapso con el texto del logotipo de Quas El texto va a ser Ir a cualquier parte. A continuación, necesitamos elementos de enlace. Me refiero a los elementos de la perilla. El primero va a estar en casa. En cuanto al segundo, voy a colocar aquí, Únete. Sentémonos sobre la navegación. A continuación voy a crear el banner. Dentro de la pancarta, voy a colocar H un elemento de encabezado. Va a ser explorar nuevos tours con ir a cualquier parte. Voy a colocar sus elementos span e ir a cualquier parte dentro del span. A continuación, voy a crear contacto. Necesitamos aquí H tres elemento encabezado con el texto. Empezar por tres. Siguiente voy a insertar aquí H un elemento de encabezado y va a ser crear nueva cuenta. Después de los elementos de encabezado, necesitamos párrafo con el texto ya miembro. Entonces necesitamos elemento link en el que voy a colocar log in. Después del párrafo. Necesitamos crear elementos de formulario con el formulario de contacto de clase. Vamos a deshacernos del atributo de acción Dentro del formulario. Voy a crear grupo de entrada en el que tendremos elementos de entrada con el tipo text, con el atributo placeholder Va a ser el primer nombre. Pero entonces necesitamos elementos con la clase de un usuario sólido. Duplicemos el grupo de entrada un par de veces. El segundo va a ser apellido. En cuanto al tercero, voy a insertar su dirección de correo electrónico. Tenemos que cambiar el tipo. Va a ser correo electrónico como para el teléfono o algunos íconos. cuanto al cuarto ítem necesitamos aquí, contraseña. Cambiemos el tipo. Va a ser contraseña necesita bloqueo. Después de eso voy a crear un grupo PTN en el que tendremos dos botones distintos Vamos a crear botón con la clase de contacto BTN y también voy a agregar aquí el atributo de tipo Va a ser botón siguiente. Voy a insertar aquí cambiar método. En cuanto al segundo botón, voy a agregar aquí crear cuenta. Bien, eso es todo sobre la forma. Vamos a crear un logotipo en la parte inferior. Todo está preparado y en realidad podemos empezar a escribir el CSS. Voy a seleccionar cada elemento usando aster isk. Entonces pongamos el margen y el relleno, ambos a cero. A continuación, voy a definir la propiedad de dimensionamiento de cajas, va a ser caja fronteriza. Entonces necesitamos que la decoración de texto no sea ninguna. Además, voy a poner esquema a ninguno. Por último, voy a definir la familia telefónica. Va a ser cabaña Sanerif. A continuación, voy a definir el tamaño del teléfono. A continuación voy a definir el tamaño del teléfono del elemento H on. Voy a fijarlo en 62.5% para poder usar m como unidad de medida En este caso, un m será igual a diez píxeles. Después de eso, cuidemos el contenedor. Voy a definir el ancho. Va a ser 100% En cuanto a la altura, voy a ponerla en 100 VH. Me refiero a la altura de la ventana gráfica. Cambiemos el color de fondo. Va a ser 525561. A continuación, voy a configurar display a flex. Vamos a mover el contenido en el centro usando justify content center y un centro de líneas de artículos. Como puedes ver, el contenido se coloca en el centro de la página. A continuación, sigamos adelante y seleccionemos aterrizaje. Voy a definir dentro de la altura. El ancho va a ser del 95% En cuanto a la altura, la voy a establecer en 90% Entonces necesitamos definir fondo. Vamos a usar gradiente lineal. El rumbo de la transición va a ser de dos derechos. Entonces necesitamos color RGB 309-40-2505 Necesitamos aquí valor porcentual 40% Entonces el siguiente color va a ser RGBA 309-40-2505 El mismo color pero con opacidad 0.8 A continuación necesitamos definir la opacidad 0.8 A continuación necesitamos valor porcentual 40% Entonces el siguiente color va a ser RGBA 309-40-2505 El mismo color pero con opacidad 0.8 A continuación necesitamos definir la URL para la imagen de fondo. Seleccionemos la imagen de la carpeta de imágenes. Entonces necesitamos centro de la posición y no repetir. Además, necesitamos definir la propiedad de tamaño de fondo con una cobertura de valor. Bien, tenemos aquí este lindo y genial fondo para el aterrizaje. Vamos a agregar radio de borde para el aterrizaje, que sea dos Ram. Además, necesitamos sombra de caja con los valores 01 Ram, cinco Ram. Y el color va a ser RGBA, color negro con la opacidad 0.4 Bien, a continuación sigamos adelante y seleccionemos Voy a hacerlo oculto usando display none, luego voy a seleccionar Contacto y ocultarlo también. Ahora vamos a encargarnos de la navegación. Voy a seleccionar, Ahora pongamos la posición a absoluta. Entonces necesitamos posición relativa para el elemento padre. A continuación, voy a poner en posición a cero. Entonces la posición de la izquierda va a ser cero. A continuación necesitamos ancho, va a ser 30% La altura va a ser las 12:00 P.M A continuación voy a cambiar el color de fondo. Va a estar rojo por un tiempo. Aquí tenemos la navegación. Vamos a deshacernos del color de fondo. A continuación necesitamos navegación. Voy a establecer width a 100% entonces la altura va a ser 100% Vamos establecer display a flex y necesitamos justificar el espacio de contenido entre. Y también alinear los elementos al centro para centrar los artículos verticalmente. A continuación, voy a crear algo de espacio usando padding, zero fi fram, los enlaces están muy bien alineados Cuidemos el logo. Voy a configurar display a flex. A continuación necesitamos círculo. Vamos a establecer con tres Ram. Entonces la altura va a ser de tres Ram. Voy a cambiar el color de fondo. El color va a ser 1d95, es un color azul Entonces pongamos el radio del borde al 50% Para poder hacer el círculo también necesitamos margen en el lado derecho, uno Ram. Aquí tenemos el círculo. Siguiente Voy a seleccionar texto. Vamos a establecer el tamaño en dos Ram. El peso del teléfono va a ser de 400, también crea algo de espacio entre las letras. A continuación necesitamos color. Va a ser blanco. Aquí tenemos el texto. Voy a alinearlos en el centro usando el centro Alinear Artículos. Ahora el logo y el texto están muy bien alineados. A continuación voy a encargarme del artículo. Vamos a establecer el tamaño de la fuente en 1.6 Ramon. El peso va a ser audaz. También necesitamos aquí color 6967. Aquí tenemos los elementos de navegación. Seleccionemos el elemento de navegación con hover. Voy a cambiar el color al flotar. Va a ser CCC. Y también necesitamos transición para que los efectos de hover sean más suaves Una vez que pase el cursor, los artículos nova cambiarán su color. A continuación, voy a encargarme de la pancarta, que ahora mismo está oculta. Fijemos la posición a absoluta. Entonces necesitamos posicionar, va a ser 30% entonces la posición izquierda será 5% el banner está alineado. A continuación, voy a tomar de la H un elemento de encabezamiento. Vamos a establecer el tamaño de fuente a cinco, entonces el peso del teléfono va a ser de 300. Cambia el color, voy a hacerlo blanco. A continuación voy a tomar del elemento span. Necesitamos bloque de visualización. Entonces voy a aumentar el tamaño del teléfono. Va a ser siete Ram. Entonces necesitamos el peso de la fuente. Vamos a ponerla en negrita. Voy a alinear texto en el centro, y luego voy a transformar texto en mayúsculas. A continuación, voy a cambiar el color. Va a ser azul. También necesitamos margen en la parte superior. Vamos a ponerla en seis Ram. Por último, voy a añadir algún efecto de sombra. Pongamos la sombra del texto a 01 Ram. Tres Ram y el color va a ser negro con la opacidad 0.2 Bien, entonces el banner se ve bastante bien A continuación, voy a agregar aquí mostrar ninguno por un tiempo porque vamos a encargarnos de la sección de contacto. Vamos a deshacernos de mostrar ninguno de aquí. Establecer la posición dos, absoluta, entonces necesitamos a la posición va a ser 25% entonces la posición izquierda va a ser 5% Como se puede ver, la forma se coloca muy bien. Entonces necesitamos contactar H tres. Vamos a establecer el tamaño de fuente en 1.6 Ram, la transformación del texto. Va a ser mayúscula. Voy a cambiar el color, vamos a usar este color gris. Duplicemos este código, cambiemos el selector que necesitamos aquí. H un elemento de encabezamiento. Voy a aumentar el tamaño del teléfono. Vamos a establecerlo en 4.5 Ram. Entonces deshazte de la transformación de texto y establece el peso de la fuente en negrita. Entonces el color va a ser blanco. A continuación necesitamos vamos a espaciar. Vamos a configurarlo 2.2 Ram. Voy a poner margen a dos Ram y cero. El segundo rubro se ve bastante bien. A continuación, vamos a seleccionar párrafo, el tamaño de fuente a 1.5 Entonces necesitamos peso, va a ser negrita. A continuación, estoy configurando el color en gris. Necesitamos margen en la parte inferior, va a ser un carnero de tres. Ahora voy a encargarme del enlace que se coloca dentro del párrafo. Vamos a poner el color en azul. Bien, veamos sobre el párrafo siguiente. Tenemos que encargarnos de los campos de entrada. Seleccionemos el grupo de entrada. Voy a establecer el ancho a 40 Ram. Entonces la altura va a ser 4.5 Ram. A continuación necesitamos margen , van a ser 20. Después voy a seleccionar elementos de entrada. Vamos a establecer el ancho al 100% entonces la altura va a ser 100% Siguiente, necesitamos color de fondo. Voy a establecer el color de fondo 2323644. A continuación, necesitamos frontera para ser ninguno. Además, voy a establecer el radio de borde a 1.5 Ram. A continuación necesitamos poner, va a ser un Ram y dos Ram. Los campos de entrada se ven mucho mejor. A continuación voy a añadir aquí color. Va a ser CCC. También necesitamos tamaño de teléfono 1.4 Ram. A continuación voy a copiar el selector y añadir aquí foco pseudo clase en foco Voy a cambiar la frontera al enfoque. Voy a cambiar el color de fondo. Va a ser 344b. También necesitamos cambiar la frontera. Vamos a establecerlo en 0.2 Ram sólido, y el color va a ser azul. Una vez que nos enfoquemos, entonces obtendremos este efecto agradable y genial. Bien, después de eso, voy a encargarme de los iconos del teléfono. Fijemos la posición a absoluta. Entonces necesitamos posicionar relativo para los elementos padre que es grupo de entrada. Vamos a establecer la posición correcta a dos Ram ya que dos posiciones va a ser 50% Y necesitamos censurar los iconos verticalmente usando transform translate Y -50% A continuación vamos a establecer el tamaño de fuente en 1.4 También cambia el color. Voy a hacerlo CCC. Como puedes ver, los íconos se ven bastante bien. A continuación tenemos que encargarnos de los botones. Vamos a poner con 240 Ram, entonces la altura va a ser cinco Ram. Además, necesitamos pantalla Flex justificar. El contenido va a ser espacio entre, entonces necesitamos margen en la parte superior, los botones están muy bien alineados. Ahora tenemos que personalizar cada una de ellas. Seleccionemos Contacto. Btn establecido con a 46% entonces la altura va a ser 100% Vamos a agregar aquí radio de borde, va a ser cuatro Ram Entonces necesitamos color, va a ser blanco. Voy a poner frontera a non. A continuación necesitamos tamaño de fuente, va a ser 1.5 Ram. Vamos a establecer el peso de la fuente en polt. También cambia el cursor, hazlo puntero. En realidad, necesitamos aquí el color, no las columnas. A continuación tenemos que cambiar el color de fondo para cada botón por separado. Seleccionemos el primero. Voy a establecer el color de fondo en gris. En cuanto al segundo botón, voy a hacer que su fondo sea de color azul. Los botones se ven bien. A continuación voy a seleccionar logo en la parte inferior. Vamos a establecer la posición en Absoluto. Entonces necesitamos la posición inferior , van a ser tres Ram. Voy a poner la posición correcta a tres Ram. Entonces necesitamos ancho, va a ser seis Ram. La altura también será de seis Ram. Necesitamos transformar elementos en círculo, entonces necesitamos radio de borde 50% y también cambiar de color, hacerlo azul. A continuación necesitamos sombra de caja con los valores 01 Ram, cinco Ram, Y el color va a ser RBA, color negro con la opacidad 0.3 Aquí tenemos el logo en la esquina inferior derecha Ahora voy a mostrar el banner hacia atrás y ocultar la sección de contacto usando opacidad cero y visibilidad oculta Ahora es el momento de escribir algo de Javascript. Vamos a crear una nueva variable. Va a ser contenedor. Voy a seleccionar contenedor usando el método selector de consultas. Necesitamos especificar aquí el contenedor de nombre de clase. A continuación tenemos que seleccionar el botón de unión. Seleccionemos este elemento. Tenemos que colocar aquí navegación a con el enésimo selector hijo Van a ser tres. Ahora, voy a agregar un oyente de eventos al botón conjunto con evento click con una función callback se ejecutará una vez que hagamos clic en el elemento link Voy a agregar nueva clase al contenedor usando un método. Esta clase va a ser cambiada. Ahora voy a usar el cambio de clase y crear nuevos estilos los cuales serán aplicados. Una vez que hacemos clic en el enlace, necesitamos seleccionar y mostrar de nuevo usando opacidad uno y visibilidad visible Voy a agregar aquí transición con valores todos 0.5 segundos y con el tiempo de retardo 0.5 segundos. Copiemos la transición y agreguemos al contacto por defecto. A continuación tenemos que seleccionar banner con cambio de clase porque necesitamos ocultar banner. Una vez que hagamos clic en el enlace, pongamos la opacidad a cero y la visibilidad a oculta Tenemos que agregar aquí la transición todo 0.5 segundo. Nuevamente, necesitamos la transición por defecto, pero con un tiempo de retraso. Una vez que haga clic, entonces se mostrará el formulario de contacto. A continuación, voy a crear nueva variable. Va a ser casa BTN. Seleccionemos este elemento. Tenemos que cambiar el selector hijo. Van a ser dos. Entonces voy a duplicar este código, cambiar el fondo. Necesitamos su casa. Una vez que hacemos clic en el botón Inicio, necesitamos eliminar el cambio de clase del contenedor para poder volver a mostrar el banner. Una vez que hagamos clic en Inicio, entonces el banner se mostrará nuevo y el formulario de registro se ocultará. A continuación voy a crear nueva variable. Va a ser login BTN. Me refiero al enlace de inicio de sesión que tenemos en el párrafo. Seleccionemos este elemento. Voy a agregar un oyente de eventos al botón de inicio de sesión con el evento nuevamente click y con una función de devolución de llamada Una vez que hacemos clic en el botón de inicio de sesión, tenemos que agregar al contenedor nueva clase. Y va a ser, aquí usamos el método togal. Seleccionemos la altura seguido del grupo de entrada con el gráfico seleccione uno. Y también necesitamos lo mismo para el segundo elemento. Necesitamos ocultar esos campos de entrada. Una vez que hagamos clic en iniciar sesión, entonces los dos primeros campos de entrada serán. A continuación, necesitamos aquí un signo de interrogación. Si la afirmación es verdadera, entonces necesitamos cambiar el contenido de texto del botón de inicio de sesión para registrarnos. Si es falso, entonces tenemos que hacer que el contenido de texto del botón de inicio de sesión inicie sesión. Si hago clic en el inicio de sesión BTN, entonces el texto del registro cambiará También necesitamos lo mismo para el botón. Vamos a contactar PTN, Cambiar el nombre de la clase Necesitamos aquí selector de gráficos. Tenemos que seleccionar el segundo botón. Voy a usar aquí, operador. Necesitamos cambiar el contenido de texto del contacto BTN, hacer que inicie sesión Aquí también necesitamos lo mismo. Necesitamos cambiar el contenido de texto del BTN y hacer que cree cuenta Sigamos adelante y comprobemos lo que tenemos aquí. Hagamos clic en Unirse y, a continuación, pasar al registro. Entonces como puedes ver, se cambia el contenido del botón. Bien, así que todo se ve bastante bien y funciona a la perfección. Vamos a seguir adelante. 30. Project 25 - Tarjetas de precios: Hola y bienvenidos a nuestros próximos proyectos. En esta sección, vamos a estar construyendo tarjetas de precios modernas y geniales. El proyecto se creará en base a HTML y CSS. Como puedes ver, tenemos aquí tres cartas diferentes con algunos efectos de degradado agradables y geniales. Cada tarjeta tiene un par de partes diferentes, como tipo, características de precio, también el botón para comprar, y así sucesivamente. Si vuelvo a cargar la página, entonces las tarjetas aparecerán con un bonito y genial efecto de fundido Hoy en día, muchos sitios web necesitan tales secciones. Creo que el proyecto será interesante y útil. Así que sigamos adelante y comencemos. He creado una nueva carpeta en el escritorio, que ahora mismo está vacía. Sigamos adelante y abramos el proyecto en código VS, luego creamos nuestros archivos de trabajo. Necesitamos dos archivos, índice HTML y estilo CSS. Vamos a abrir el archivo HTML índice y crear los documentos HML básicos En primer lugar, voy a cambiar el título. Van a ser tarjetas de precios. Entonces voy a vincular el archivo CSS. Además, necesitamos abrir el proyecto al navegador usando servidor en vivo. Coloquemos el navegador y el editor uno al lado del otro. Al igual que a continuación, voy a visitar teléfonos CDN, porque vamos a utilizar algunos iconos fonosantes a lo largo de este proyecto Vamos a copiar el enlace desde aquí. Entonces necesitamos abrir la etiqueta de enlace en el elemento head y pegar la CDN Además de eso, voy a agarrar algunos teléfonos de Google. Visitemos el sitio web de Google phones y luego busquemos Pound llamada Sophia Sons. adelante y seleccionemos un par de estilos diferentes, luego copiemos el enlace y lo peguemos en el elemento head. Bien, estamos listos para comenzar a escribir el marcado HTML. Voy a abrir De Tu, que va a ser el contenedor dentro de lo profundo. Voy a crear tarjetas de precios, va a ser el envoltorio. A continuación necesitamos tarjeta de precios en sí en la que tendremos tipo de tarjeta. Va a ser básico. Siguiente Voy a asegurar H un elemento de encabezado con el precio de la tarjeta de clase, va a ser 14.90 $9 Siguiente Voy a asegurar H tres elemento de encabezado con el Va a ser un mes. A continuación necesitamos aquí en en el que voy a insertar un par de elementos de la lista. Voy a insertar aquí, seguir algún icono, va a ser un cheque A sólido. A continuación voy a insertar su panel. Va a ser algún texto ficticio. Duplicemos el artículo un par de veces. Voy a cambiar el nombre de la clase por el fonosomeicon por tres ítems, estoy en los Siguiente Voy a asegurar botón. Va a ser tarjeta PTN. También necesitamos aquí tipo que va a ser botón. Ya voy a asegurar el texto. Además de eso, necesitamos tu fondo de tarjeta con el texto. Únete a nosotros. Bien. Entonces eso es todo sobre la tarjeta. Voy a duplicarlo dos veces porque vamos a tener tres cartas distintas. Vamos a duplicarlo y luego hacer algunos cambios. El segundo va a ser estándar, y el precio será diferente, 24.99 voy a cambiar la fonémica A continuación tendremos premium con diferente precio por 9.99 De nuevo, voy a cambiar la fonética que necesitamos aquí, cheques en lugar de marca x En realidad, se crean las tres tarjetas. Estoy en el marcado HD y ahora podemos empezar a escribir el CSS Sigamos adelante y seleccionemos cada elemento. Como de costumbre, voy a poner el margen y el relleno a cero. A continuación, voy a definir el dimensionamiento de la caja. Va a ser caja fronteriza también necesitamos su familia telefónica. Vamos a ponérselo a Sophia San San Serif. A continuación, voy a establecer el tamaño del teléfono del elemento HTML 62.5% porque vamos a usar como unidad de medida En este caso, un m será igual a diez píxeles. A continuación, voy a empezar a personalizar el contenedor. Vamos a establecer su ancho en 100% Entonces la altura va a ser de 100 altura de ventana gráfica A continuación, voy a cambiar el fondo. Vamos a usar gradiente lineal. El sentido va a ser dos a la izquierda. Entonces necesitamos aquí el primer color, va a ser 1d33 58 Entonces el siguiente color va a ser 14278. También necesitamos aquí tercer color, que va a ser Oe138 En realidad tenemos que cambiar aquí dos. Como pueden ver, tenemos aquí un fondo agradable y fresco con grado infecta A continuación voy a configurar Display Reflex, porque vamos a centrar el contenido usando el centro de contenido justificado y un centro de líneas de artículos. Como puedes ver, el contenido se coloca en el centro. A continuación, voy a encargarme del envoltorio. Estoy en las tarjetas de precios. Vamos a establecer en 80% Entonces necesitamos Flexbooks. Vamos a establecer justificar el contenido para espaciar de manera uniforme. Como puedes ver, las cartas están muy bien alineadas. A continuación voy a seleccionar la propia tarjeta. Vamos a establecer con 230 Ram. Entonces la altura va a ser de 50 Ram. Cambiemos de fondo. Voy a usar gradiente lineal. La dirección va a ser dos, ¿verdad? Y el primer color va a ser el 1254. Entonces el siguiente color será F139. Aquí tenemos los fondos de las tarjetas. A continuación voy a establecer el radio de borde en 1.5 Ram, luego un Ram, luego 1.5 Ram, y nuevamente 1.5 Ram. Después de eso voy a poner sombra de caja con los valores 01 Ram, seis Ram, y el color va a ser R para ser un color negro con la opacidad 0.4 Aquí tenemos la sombra Después de eso, voy a usar libros flex. Vamos a establecer la dirección a la columna siguiente. Necesitamos justificar el contenido con espacio de valor de manera uniforme. En cuanto a las líneas de pedido, voy a ponerla al centro. Entonces pongamos curser a puntero. Como puedes ver, los elementos están alineados dentro de la tarjeta. Sigamos adelante y comencemos con el tipo de tarjeta que voy a establecer con 222 Ram. Entonces la altura va a ser cuatro Ram. También necesitamos aquí color de fondo. Va a ser CCC. Usa este color solo por razones temporales. A continuación, voy a usar la función transform rotate Z con el valor -90 grados, se gira el elemento Fijemos la posición a absoluta. Entonces necesitamos posición relativa para el elemento padre, que es la tarjeta. Pongamos la posición a 12 Ram. En cuanto a la posición, voy a poner en -13 Ram Como puedes ver, el elemento está muy bien alineado. A continuación, fijemos el radio del borde en 2.5 Fram. Entonces necesitamos 2.5 fram, 0.0 El elemento se volvió redondeado A continuación, vamos a establecer el tamaño de la fuente en 2.2 Ram. Entonces el peso de la fuente va a ser negrita. Voy a aumentar el espacio entre las letras. Entonces usemos la transformación de texto make por caso. Después de eso voy a poner color en blanco. Entonces necesitamos flex box para centrar el texto dentro del elemento usando justify con center y align items center. Ahora voy a establecer la sombra de caja a los mismos valores que usamos para la tarjeta. Cambiemos la opacidad. Va a ser 0.3 Tenemos aquí el efecto sombra. Siguiente voy a duplicar tipo de tarjeta cambiar el nombre de la clase va a ser fondo de tarjeta. Además, necesitamos deshacernos de la propiedad izquierda en lugar de arriba, necesitamos abajo y el valor va a ser menos cuatro Ram. A continuación, me voy a deshacer de transform Rotar. También necesitamos cambiar el radio de la frontera. Necesitamos 00 y luego esos dos valores. La parte inferior se ve bastante bien. A continuación voy a seleccionar la tarjeta de precios, seguida del selector de gráficos. Necesitamos el primero. Entonces necesitamos tu tarjeta tipo fondo de tarjeta. Tenemos que cambiar el fondo. Voy a usar gradiente lineal. La dirección va a ser también, bien. En cuanto a los colores, el primero será f6od C, entonces tendremos aquí La primera tarjeta se ve bastante bien. Duplicemos este código dos veces, cambiemos los selectores, los colores para la segunda tarjeta serán df3b, ya que el segundo color va a ser Vamos a encargarnos de la tercera tarjeta. La primera persona que llama va a ser OD9fc. Vamos a tirar de la segunda persona que llama. Voy a insertar aquí, 174 FF. Todo bien. Por lo que las tres tarjetas están personalizadas. Me refiero a esos dos elementos. A continuación necesitamos aquí el precio de la tarjeta. Voy a establecer el tamaño del teléfono a siete, entonces el peso del teléfono va a ser de 300. A continuación voy a seleccionar mes. Vamos a establecer el tamaño del teléfono a los Rams. Necesitamos el peso de tu teléfono, 300. A continuación voy a establecer marchar en la parte superior. Va a ser menos cuatro Ram. Voy a mover el elemento hacia arriba. A continuación necesitamos menos ítem, pongamos en 30. Entonces la altura va a ser m. necesitamos flex box. Vamos a establecer justificar el contenido al centro. En cuanto a los artículos de la aerolínea, va a ser el centro también va a ser el centro por lo que los artículos están muy bien alineados. Después de eso, voy a encargarme del menor ítem con selector infantil, necesitamos artículos impares. Vamos a establecer el color de fondo dos, RGBA 91233 y la Opacidad 0.5 Siguiente Voy a Vamos a poner a dos Ram. Entonces necesitamos que Texiline va a ser el centro. También voy a establecer el tamaño del teléfono a 1.8 Ram. A continuación necesitamos margen en el lado derecho, pongámoslo en uno Ram. Después de eso, voy a tomar él del elemento span, Vamos a establecer el tamaño del teléfono a 1.4 Ram. A continuación necesitamos transformar texto va a ser mayúscula. Siguiente Voy a seleccionar tarjeta con selector infantil primero uno, luego necesitamos precio de tarjeta. Vamos a duplicarlo tres veces. Necesitamos aquí mes ya que voy a usar menos. Y finalmente necesitamos aquí elemento span. Vamos a cambiar el color del texto con efectos de degradado. Vamos a establecer fondo a este valor que usamos para la primera carta. Además de eso necesitamos aquí web ke clip de fondo. Va a ser texto. Además, voy a usar el color del campo de texto clave web y va a ser transparente como puedes ver, el texto para la primera tarjeta se ve bastante bien. Vamos a duplicarlo dos veces. Cambiar los selectores de gráficos. Necesitamos segundo, entonces necesitamos tercero. Voy a agarrar los fondos adecuados para la segunda tarjeta, la tercera tarjeta también. Entonces como puedes ver ahora el texto de las tarjetas se ve bastante bien. A continuación tenemos que encargarnos de los botones. Vamos a poner con 212 gramos, entonces la altura va a ser de tres Ram. Voy a establecer la transformación de texto en mayúsculas. A continuación necesitamos radio fronterizo , van a ser tres Ram. A continuación necesitamos frontera ninguno. Voy a cambiar el color y hacerlo blanco. A continuación necesitamos espaciado entre letras. Va a ser 0.1 Ram. Después cambia el punto curser. Al igual que los demás elementos, necesitamos cambiar los fondos para los bosones por separado. Vamos a agarrar el fondo para el primero, luego duplicar este código dos veces, cambiar los selectores, y también usar los fondos adecuados para el segundo fondo y también el tercero En realidad, tenemos aquí un pequeño tema. Utilizamos los mismos fondos para la segunda y tercera tarjeta. Entonces, sigamos adelante y arreglemos ese problema. Tenemos que agarrar el código en lugar de éste, y tenemos que hacer lo mismo con las porras también Bien, ahora todo se ve increíble. Ahora voy a crear el efecto fade. Tenemos que esconder las tarjetas. Vamos a crear fotogramas clave Ess con el nombre llamado Anim one al 0% voy a establecer transform para traducir x -15 Ram Además, necesitamos opacidad cero y visibilidad oculta. Entonces al 100% necesitamos las mismas propiedades con los siguientes valores. Traducir x será cero, cuanto a la opacidad, va a ser uno Y entonces necesitamos visibilidad visible. Seleccionemos la primera tarjeta y usemos esas propiedades por defecto. Y también necesitamos animación con la tarjeta de valores uno, que es el nombre de los fotogramas clave. Entonces necesitamos duración. Va a ser 1 segundo, después tiempo de retardo 1 segundo. También necesitamos lineales y delanteros. La primera tarjeta funciona bien. Hagamos lo mismo para el resto de las tarjetas. Voy a duplicar este código dos veces, luego cambiar selector. Además, necesitamos traducir x a traducir Y. Entonces el nombre va a ser la tarjeta dos. Necesitamos aquí y en lugar de x. cuanto al tercer ítem, traducimos x sin menos, entonces el nombre va a ser la tarjeta tres. Nuevamente, deshazte de menos. En realidad necesitamos aquí 15 Ram sin menos. Ahora todo se ve y funciona bastante bien. Eso es, ya terminamos con este proyecto. Sigamos adelante.