Crea 5 plantillas de diseño de interfaz de usuario completas y modernas

1. Introducción: Bienvenido al nuevo curso, donde podrás aprender sobre cómo crear plantillas de diseño modernas y hermosas para tus Si quieres construir y personalizar tu portafolio, conviértete en un desarrollador y diseñador experimentado y consigue ser contratado. Entonces este es el curso adecuado para ti. Construirá juntos cinco sitios web receptivos completos y modernos con tres tecnologías principales, HTML, CSS y JavaScript. Si tienes algunos conocimientos básicos de estas tecnologías. Y aún así tienes algunos problemas para construir los sitios web. O si quieres subir de nivel tus habilidades de desarrollador y diseñador, entonces has venido al lugar correcto. Creamos este curso para brindar a los estudiantes la mejor experiencia en tres tecnologías centrales y permitirles crear las plantillas mejor diseñadas que entusiasmarán a sus clientes Quién construirá cinco sitios web completos diferentes. Y no sólo las partes de ellas desde cero, estarán llenas de efectos y diseños modernos, bonitos y hermosos. Comenzaremos con proyectos relativamente simples, y también pasaremos por algunas partes avanzadas. Mediante este curso, podrás obtener las inspiraciones que te ayudarán a potenciar tus proyectos y ponerlos en tu portafolio. Dominar solo estas tecnologías centrales del desarrollo web front-end Puedes crear temas increíbles y modernos y simplemente ser contratado. Además, tendrás conocimientos suficientes para seguir adelante y aprender otras tecnologías, como algunos frameworks y bibliotecas front-end, que hoy en día son realmente populares y muy demandados. Articulaciones 2. Sobre los proyectos: Hola y bienvenidos al curso. Nos alegra verte aquí. Como ya sabes, vamos a construir cinco sitios web responsivos completos diferentes usando HTML, CSS y JavaScript. En este video, vamos a repasar por cada una de ellas. Quisiera mencionar una cosa. Como dijimos, los proyectos se crearán en base a tres tecnologías centrales, HTML, CSS y JavaScript. Por lo que debes tener una sólida comprensión de HTML y CSS y algunos conocimientos básicos de JavaScript para poder seguir las conferencias. Bien, así que sigamos adelante y describamos los proyectos. Nuestro primer proyecto va a ser un sitio web sobre muebles. El proyecto va a ser sencillo. Usaremos solo HTML y CSS. Pero creo que lo vas a disfrutar porque el proyecto es de aspecto moderno y hermoso. Sigamos adelante y describamos el proyecto. Consistirá en un par de secciones diferentes. Comenzará con una Navegación, que incluirá un par de elementos diferentes como un logotipo, una barra de búsqueda, algunos iconos en los elementos de Navegación. A la navegación le seguirá el Encabezado del Sitio Web. Tiene un fondo azul y me gusta Banner con algo de texto y botones. A continuación tenemos una sección de proyecto que consta de un par de rubros diferentes Y luego tenemos seis tarjetas con bonitos íconos. Si pasamos el cursor sobre los iconos y tendremos un efecto agradable y suave Después de eso se construirá una sección de precios. Esta sección tendrá dos partes distintas. La primera parte consiste en la imagen, encabezamiento y fondo. En cuanto a la segunda parte, encontrarás tus seis autos de precios diferentes con algún buen efecto sobre. A continuación tenemos una Sección de Blog donde puedes encontrar una revista y algunos artículos sobre las tendencias. A la sección del blog le sigue la Sección de Contacto. Y por último, tenemos aquí un pie de página sencillo y bonito de aspecto del Sitio Web. Bien, entonces esas son las secciones de nuestro primer sitio web. Cada proyecto del curso responde a diferentes tamaños de pantalla. Si inspecciono la página, cambie al modo de respuesta y verifique el proyecto cuatro tamaños de pantalla diferentes. Encontrarás que el proyecto es Responsive y se ve bien en cada tamaño de pantalla diferente. Los proyectos del curso se crean para un tamaño de pantalla extra grande. Es decir, esto coincide con 1920 píxeles de ancho y 1080 píxeles de alto Entonces, si estás usando un tamaño de pantalla relativamente más pequeño, entonces durante las conferencias deberías cambiar al modo de respuesta y especificar el ancho y la altura así. De lo contrario, el proyecto no se verá bien en un tamaño de pantalla más pequeño hasta que lo hagamos receptivo. Entonces, por favor, tómalo en cuenta. Bien, entonces el próximo proyecto va a ser un Sitio Web de Portafolio Personal. Hoy en día, este tipo de Sitio Web es muy popular y muy demandado, así que creo que será interesante para ti. Entonces el proyecto es sobre un Desarrollador Web con todas sus Habilidades, obras, proyectos, contexto, y así sucesivamente. Sigamos adelante y describamos el proyecto. Entonces tenemos aquí un Encabezado del Sitio Web en el que tenemos un logo, Banner y un ícono de Menú de Hamburguesa Si hago clic en él, man, la Navegación aparecerá con algunos efectos agradables. El Banner consta de un par de elementos diferentes, incluyendo la imagen de un desarrollador. X, tenemos una sección de habilidades que nos muestra las tecnologías y el nivel de conocimiento de un desarrollador web. la sección Habilidades le sigue la sección Proyecto donde se pueden encontrar diferentes trabajos de un desarrollador. Después de eso, tenemos aquí una Sección de Contacto con algunos datos de contacto y campos de entrada. Y por último, lo puedes encontrar yo sencillo y agradable Pie de página. El próximo proyecto va a ser un sitio web sobre arquitectura. El proyecto consta de un par de secciones diferentes. Comenzaremos a crear el proyecto trabajando en la barra de navegación y la Navegación Tenemos aquí, el logo, la barra de búsqueda y el ícono del Menú Hamburguesa Si hago clic en él, entonces la Navegación se mostrará muy bien. Si coloco el cursor sobre los elementos de navegación, entonces te conseguiremos estos bonitos y geniales efectos Después de la Navegación, crearemos este bonito y sencillo Banner en que tenemos un par de elementos diferentes. Al binario le sigue una sección Acerca de que consta de dos partes. En el lado izquierdo tenemos algunos elementos de texto y el botón, como para el lado derecho, consiste en un marco e imagen. Y además de eso, tenemos aquí una parte agradable y fresca en la parte inferior de esta sección. A continuación tenemos la sección de proyectos, que incluye cinco tarjetas con algunos buenos efectos de hover Después de eso llega a la Sección Clientes, que consta de dos tarjetas diferentes. Entonces tenemos una Sección de Contacto y Pie de Página simple abajo. Bien, A continuación vamos a estar construyendo un sitio web de interiorista Este campo es muy popular y muy demandado hoy en día. Entonces creo que este tipo de sitio web te será interesante y útil. Tenemos aquí un Encabezado del Sitio Web que incluye el logo, ícono del Menú Hamburguesa y luego Banner Animado Si hago clic en el icono Menú, entonces la Navegación aparecerá muy bien. Los binarios Animados, como puede ver, los elementos de texto están cambiando con algunos efectos de fundido A continuación tenemos y Acerca de la Sección, que aparece muy bien con un efecto fade. Vamos a usar este efecto para cada sección de este proyecto. La sección Acerca de consiste en una imagen y algunos detalles sobre el diseñador. A continuación tenemos la sección Servicios que nos muestra lo que el diseñador puede ofrecer. Después de eso, podrás encontrar los proyectos del diseñador. Estoy en la cartera de su trabajo. Después viene la sección de logros en la que tenemos Contadores Animados. Y por último, puedes encontrar aquí yo sencillo y agradable Pie de página. Bien, entonces el último proyecto y este curso serán un Sitio web sobre cafetería El proyecto constará de un par de partes diferentes y estará lleno de diseños y funcionalidades de aspecto moderno . Comenzaremos con una Navegación que se fija en la parte superior de la página. Una vez que nos desplazemos hacia abajo, cambiará su fondo. Después de la Navegación trabajará en el Banner, el cual tiene una Presentación de Diapositivas Vamos a usar uno de los plug-ins llamados swipe integer Sí. Se puede ver Slideshow funciona automáticamente Pero además de eso, puedes usar esos controladores. Y también puedes arrastrar las diapositivas con un ratón. Bien, Siguiente tenemos en Acerca de la Sección con algo de info. A esta sección le sigue un Menú. Después de eso tenemos algunos datos con Contadores Animados y con algunos efectos agradables. La siguiente sección será sobre los clientes que tenemos aquí, las opiniones de los clientes colocadas por costo muy bien. A continuación viene la sección Contacto donde puedes contactar con la casa o reservar una mesa. Y finalmente tenemos aquí es simple Pie de página. Bien, así que eso es todo sobre nuestros proyectos. Espero que los disfrutes. Aprende algo nuevo y además consigue algo de inspiración para mejorar tu propia cartera. Sigamos adelante. 3. Configuración: Hola y bienvenidos al curso. Nos alegra que estés aquí y esperamos que disfrutes del curso antes de que profundicemos y empecemos a crear nuestros proyectos. En primer lugar, tenemos que preparar nuestro ambiente de trabajo. Estoy seguro que la mayoría de ustedes ya están preparados para escribir el código. Si es así, entonces puedes sentirte libre de saltarte este video y saltar a los proyectos de inmediato. Pero si no, entonces ese no es el problema. Sigamos adelante y montemos algunas herramientas. A lo largo de este curso, necesitaremos dos herramientas principales, que son el navegador web moderno y un editor de texto. Como navegador web, voy a usar mayormente Google Chrome. Y también en algunos casos también necesitaremos la ayuda de Mozilla Firefox. Estoy seguro de que ya sabes cómo instalar estos navegadores web, y creo que todos ya los tienen. Pero de todos modos, veamos cómo descargarlos. Para obtener el Google Chrome, tenemos que ir a esta URL aquí y descargar el navegador web. El proceso de instalación es bastante sencillo, así que no voy a pasar por él. En cuanto al Mozilla Firefox, tienes que usar esta URL y descargar el navegador web desde aquí. Ambos enlaces se adjuntarán a esta conferencia. Bien, sigamos adelante y hablemos del editor de texto. Vamos a usar Visual Studio Code porque estos momentos es uno de los mejores editores de textos del mundo. Por supuesto, puedes sentirte libre y usar tu editor de texto favorito. Depende de ti, pero te recomiendo usar el código VS. Para poder descargar el código de abuso, tienes que visitar este sitio web y obtener el editor de texto ya sea para Windows o Mac o Linux. Este enlace también se adjuntará a esta conferencia. El proceso de instalación del Visual Studio Code es muy sencillo, dos, así que estoy seguro de que no va a tener ningún problema con él. Bien, así que una vez que instales ambas herramientas estarás bien para ir Así que vamos a saltar directamente a los Proyectos 4. Proyecto 1: crea y da estilo a la navegación del sitio web: Bien, así que he creado una nueva carpeta en el escritorio. Sigamos adelante y ábralo en código VS. Voy a crear aquí dos archivos diferentes, uno para HTML y el segundo para el CSS. A continuación, abra el archivo index.html y cree un documento HTML básico. Sigamos adelante y cambiemos el título. Voy a instituir un mueble. Y también voy a enlazar archivo CSS. Sigamos adelante y ejecutemos el proyecto al navegador. Y también, voy a colocar el navegador y el editor uno al lado del otro. Así. Porque quiero que nuestro proceso de trabajo sea más cómodo y sencillo. A continuación, voy a agarrar algunos enlaces como Font Awesome CDN, porque vamos a usar algunos iconos de Font Awesome a lo largo del proyecto Sigamos adelante y agarremos el enlace. Entonces abre la etiqueta de enlace y pega aquí. El enlace. Además de eso, vamos a usar algunas fuentes de Google. Así que sigamos adelante y visitemos sitio web de Google Fonts y busquemos un par de fuentes diferentes. El primero va a ser fuente llamada kenya. Seleccionemos el Estilo y luego busquemos otra fuente, MCT1. Voy a seleccionar un par de estilos diferentes. Entonces tenemos que agarrar el enlace desde aquí. Vamos a pegarlo en el elemento cabeza. Bien, entonces creo que estamos listos. Empecemos a crear el marcado HTML. En primer lugar, voy a pasar aquí algunos comentarios. Entonces sigamos adelante y abramos la etiqueta DIV con el contenedor de clase. A continuación necesitamos otro comentario por ahora claro. Y luego voy a instituir HTML5 nav tag con la clase navbar A continuación voy a crear deep tag, que va a ser suficiente Parte superior. E incluirá un logotipo. Te voy a pasar un icono Font Awesome con los nombres de clase fa, sólido, FAA, sofá Así que aquí tenemos el icono Font Awesome. Entonces voy a insertar aquí una etiqueta span, que incluirá quién gravó los muebles de valor Bien, eso es todo sobre el logo. Entonces voy a crear barra de búsqueda. Vamos a instituir aquí la etiqueta de entrada con un texto tipo y con el atributo placeholder, que incluirá el siguiente texto ¿Qué buscas? Entonces necesitamos de nuevo un icono Font Awesome, nombres de clase, fa sólido, una lupa Entonces aquí tenemos entradas y el icono de búsqueda. Después de eso, voy a crear otra etiqueta profunda con el usuario de la clase. Y voy a pasar por aquí un par de iconos diferentes. El primero va a ser un FA sólido, atrapado comprando. Entonces te voy a pasar etiqueta span, que incluirá el valor en el que estoy, el signo de dólar y algunos números. Entonces voy a usar otra Fuente, Icono Impresionante, F, un FAA regular caliente Y por último, voy a hacer una pausa aquí otro icono. Va a ser un usuario sólido. Entonces aquí tenemos nuestros íconos. Después de eso. Voy a crear la lista de navegación, que incluirá un par de elementos de navegación diferentes. Vamos a interferir En otra fuente, Icono impresionante, va a ser fa, casa fa sólida. Y también voy a usar aquí etiqueta span con valor home. Duplicemos el elemento Navigation un par de veces y luego cambiemos los nombres de las clases y los valores de este Pentax Necesitamos aquí sofá y productos. El siguiente va a ser el signo de dólar y el precio. El siguiente ícono va a ser blogger. Hagamos una pausa aquí Blog. Entonces tendremos ventas estrella. Y el último icono va a ser mensaje. Y el elemento span será Contacto. Bien, entonces aquí tenemos los íconos, pero como puedes ver, uno de los íconos no está mostrando. Vamos a revisar. Así que necesitamos aquí marcas fa en lugar de sólido. Ahora el problema está arreglado. Bien, sentémonos sobre el marcado HTML. Empecemos a escribir algo de CSS. Voy a pasar aquí algunos comentarios para estilos predeterminados. Sigamos adelante y seleccionemos todos los elementos usando un asterisco Vamos a establecer el margen y el relleno de ambos a cero. Además, voy a definir la propiedad box-sizing, y voy a establecerla en border-box Se va a esbozar el siguiente. Hagámoslo no. Y también voy a definir la forma general familia. Se va a maquetar sans serif. Así se puede ver que se aplican los estilos por defecto. A continuación, voy a cambiar el tamaño de fuente del elemento HTML porque quiero usar RAM como unidad de medida. Vamos a establecer el tamaño de la fuente en 62.5 por ciento. En este caso, una RAM será igual a diez píxeles. Bien, sigamos adelante e instituyamos algunos comentarios para contenedor Y también para navbar. Al principio, voy a Estilo suficientes elementos. Vamos a definir el ancho. Voy a hacerlo al 100%. Y también voy a definir la altura, que va a ser 19 RAM. Entonces cambiemos el color de fondo. Voy a ponerla en blanco. A continuación, voy a usar display flex y voy a cambiar la dirección. Va a ser columna. Luego use alinear elementos en el centro. Entonces como puedes ver, los elementos se colocan en el centro. Además, voy a usar poco efecto de sombra. Usando box-shadow, los valores serán 01 rango cinco RAM como color Voy a usar el valor RGBA. Va a ser de color negro con menor opacidad, 0.1. Entonces se puede ver que tenemos aquí sombra de caja. El siguiente elemento que voy a Estilo va a ser no pobre top. En primer lugar, pongamos display a flex. Entonces necesitamos alinear los artículos en el centro verticalmente. Y también definamos el relleno. Va a ser a RAM y cero. ¿Bien? Después de eso, vamos a seleccionar elementos en la parte superior no pobre. Definamos margen. Va a ser cero y foro en los lados izquierdo y derecho. Entonces voy a seleccionar logo. Me refiero al icono Font Awesome y al logo. Cambiemos el tamaño de fuente, que sea seis RAM. Entonces voy a cambiar el color. Vamos a usar aquí llamado f887 para ser Cuando también crea algo de espacio en el lado derecho usando margin-right con el Entonces aquí tenemos nuestro logo, que se ve mucho mejor. A continuación, voy a encargarme de los elementos span, que se coloca junto al icono. Así que vamos a cambiar la familia de fuentes. Ves tu teléfono llamado kenia. Cursiva. Tamaño de fuente. Hagámoslo más grande. Uso para RAM. Además, crea algo de espacio entre las letras y cambia de color. Voy a usar tu color 07372. Entonces aquí tenemos nuestro elemento span, que es Todd y se ve bien Seleccionemos aquí logo, me refiero a los elementos envoltorio. Voy a configurar display para flexionar y también alinear elementos al centro con el fin de centrar el icono y los elementos espinales. A continuación, vamos a encargarnos de la barra de búsqueda. En primer lugar, voy a seleccionar los elementos de entrada y cambiar su ancho. Va a ser 50 para carnero. A continuación, necesitamos crear algo de espacio dentro del relleno del conjunto de entrada a un punto para rampa en la parte superior de un punto para RAM en el lado derecho, un punto a RAM en la parte inferior y 3.7 RAM en el lado izquierdo. A continuación, voy a cambiar el color de fondo. Va a ser un eff tres. Entonces aquí tenemos la barra de búsqueda, me refiero al elemento input. Vamos a deshacernos de la frontera. Voy a hacer que no sea ninguno. Y también voy a establecer border-radius 2.5 ran. A continuación, vamos a encargarnos de la fuente. Cambiemos el tamaño de fuente, que sea 1.6 RAM. Y también, voy a establecer el peso de la fuente a 300 y cambiar el color. Usa aquí. Color azul. Entonces se puede ver que el elemento de entrada se ve mejor. Sigamos adelante y seleccionemos el marcador de posición. Cambia el tamaño de fuente, hazlo 1.7 R& También cambia el peso de la fuente. Usa aquí 300. Y voy a poner el color al azul. Bien. Ahora es el momento de comenzar a Style the Font Awesome icon. Estoy en el icono de búsqueda. Definamos esta posición, hagámosla absoluta. Y también necesitamos hacer que la posición de los elementos padres sea relativa. Porque necesitamos posicionar elementos de acuerdo a los padres. Entonces definir la posición superior va a ser del 50 por ciento. Para la posición izquierda va a ser un punto para RAM. Y además voy a centrar los elementos perfectamente horizontalmente. Para eso necesitamos Transformar Traducir, Y -50 por ciento Así que los iconos posicionados. A continuación, voy a aumentar el tamaño de la fuente. Va a ser 1.5 RAM. Cambia el color. Te ves de nuevo, color azul. Entonces la barra de búsqueda está lista. Sigamos adelante y seleccionemos usuario. Cambia el tamaño de fuente, hazlo a RAM, y también define el color. Como puedes ver, necesitamos algo de espacio entre los artículos. Entonces voy a seleccionar user y user span y definir margin-right, Hacer que sea un punto para ejecutar ¿Bien? Entonces, como puedes ver, la parte superior de la barra de navegación está lista. Sigamos adelante y nos ocupemos de la lista de navegación. Definamos display, flex. Define la altura. Va a ser 8.5 RAM. Entonces necesitamos algo de espacio en la parte superior usando padding top a RAM. Después de eso, voy a seleccionar desarrollos en la lista de Navegación. Entonces el ancho va a ser de 16 RAM. Además, voy a utilizar de nuevo display flex, luego cambiar la dirección, hacerla columna. Alineemos los elementos en el centro y también utilicemos justify-content center para centrar perfectamente ¿Correcto? Después de eso, voy a crear bordes en el lado izquierdo de los elementos que fijaron border left 2.1 RAM solid. Y como el color, voy a usar el anuncio E9. Entonces, continuemos. Aquí tenemos fronteras, pero tenemos que quitar frontera al principio. Entonces sigamos adelante y seleccionemos novelista Div con el enésimo hijo uno Seleccionamos aquí el primer elemento, establecemos border a none. Entonces se puede ver que el problema está arreglado. Y nuestros artículos de navegación se ven mucho mejor. Cambiemos el tipo de cursor y hagamos que apunte. Bien, Así que sigamos adelante y seleccionemos íconos, aumentemos el tamaño de la fuente, lleguemos a Ram. También cambia el color. Usa aquí, el color azul. Entonces voy a crear algo de espacio en la parte inferior usando margen inferior con valor uno RAM. Así que se puede ver que los íconos se ven muy bien. Entonces voy a seleccionar elementos span. Quiero decir, el tamaño de fuente del ítem va a ser 1.6 RAM. Y luego también necesitamos cambiar el color. Puedes colorear también, voy a crear algún espacio entre las letras. Así que se puede ver que los artículos se ven muy bien. 5. Proyecto 1: vista previa: Hola y bienvenidos a nuestro segundo proyecto, que va a ser un sitio web de Portafolio Personal. Hoy en día, este tipo de Sitio Web es muy popular y muy demandado, así que creo que será interesante para ti. El proyecto es sobre un Desarrollador Web con todas sus Habilidades, obras, proyectos, Contacto, y así sucesivamente. Sigamos adelante y describamos el proyecto. Entonces tenemos aquí un Encabezado del Sitio Web en el que tenemos un logo, Banner y un ícono de Menú de Hamburguesa Si hago clic en él, entonces aparecerá la Navegación con algunos efectos agradables. El Banner consta de un par de elementos diferentes, incluyendo la imagen de un desarrollador. A continuación, tenemos una sección de habilidades que nos muestra las tecnologías y el nivel de conocimiento de un desarrollador web. la sección Habilidades le sigue la sección Proyecto, donde podemos encontrar diferentes trabajos de un desarrollador. Después de eso, tenemos aquí una Sección de Contacto con algunos datos de contacto y campos de entrada. Y por último, puedes encontrar aquí un pie de página sencillo y agradable. El proyecto responde a diferentes tamaños de pantalla. Si inspecciono la página, cambie al modo de respuesta y verifique el proyecto cuatro tamaños de pantalla diferentes. Encontrarás que el proyecto es Responsive y se ve bien en cada tamaño de pantalla diferente. Nuevamente, todos los proyectos se crean para un tamaño de pantalla extra grande. Estoy en sitios discretos con 1920 pixeles de ancho y 1080 pixeles de alto. Entonces, si estás usando un tamaño de pantalla relativamente más pequeño, entonces durante las conferencias, debes cambiar al modo de respuesta y especificar el ancho y la altura así. De lo contrario, el proyecto no se verá bien en un tamaño de pantalla más pequeño hasta que lo hagamos receptivo. Entonces, por favor, tómalo en cuenta. Bien, entonces eso es todo sobre nuestro segundo proyecto. Ahora podemos seguir adelante y empezar a construirlo 6. Proyecto 1: crea el encabezado del sitio web: Bien, así que ahora es el momento de crear nuestra siguiente sección, que va a ser el Landing Vamos a instituir nuevos comentarios para los préstamos. Entonces voy a abrir aquí Elemento Sección con una clase Aterrizaje. El primer elemento que vamos a insertar aquí va a ser el fondo. A continuación, voy a insertar aquí Banner, que constará de un par de elementos diferentes. El primero va a ser una imagen. Especificemos aquí la ruta de la imagen. Necesitamos seleccionar la imagen del banner. También, vamos a Instituto clase Banner IMG. Entonces voy a abrir la etiqueta H1 con el encabezado Banner de clase. El texto va a ser muebles de lujo. Entonces tendremos dos botones distintos. Vamos asignados a las clases de botón, Banner, BTN, y también Banner be 101 Vamos a insertar aquí. Ir a la tienda. Voy a duplicar este elemento y cambiar el nombre de la clase y también cambiar el valor. Se va a explorar. Bien, así que eso es todo sobre el marcado HTML de la segunda sección Sigamos adelante y comencemos a Estilizar los elementos menos sensibles a tus comentarios. Y luego seleccionar Elemento Sección con la clase Landing, quiero definir un ancho. Va a ser al 100%. En cuanto a la altura, voy a hacerla 90 de altura de viewport A continuación voy a seleccionar el fondo. Fijemos su posición a absoluta. Y también necesitamos definir la posición para el elemento padre. Hagámoslo relativo. Entonces voy a definir la posición superior. Va a ser RAM llena. En cuanto a la posición de rezago, voy a hacerla 50%. Y luego centremos los elementos horizontalmente cuando transformes traducir X -50% También, voy a definir el ancho. Va a ser el 90%. En cuanto a la altura, voy a hacer que sea 65 corrió. Después cambia el color de fondo, haz que sea 3954 Y también hacer las esquinas redondeadas usando border-radius. Tres rondas. Entonces aquí tenemos el fondo azul. Siguiente Voy a seleccionar Banner. Definamos ancho, hazlo 60%. Entonces definir la altura va a ser 65. Rima. También establece la posición en absoluto. Entonces tenemos que seleccionar elemento de imagen. Definamos el ancho al 100%. Además, necesitamos definir la altura como 100%. Entonces aquí tenemos la imagen. ¿Verdad? A continuación, voy a cambiar la posición del Banner, digamos posición superior a ocho RAM. Después defina la posición izquierda con presente. Y también para centrar, voy a usar Transformar Traducir X valor -50 por ciento. Después de eso, voy a definir imagen de fondo. Necesitamos gradiente lineal con valor RGBA. Seleccionemos color negro con opacidad 0.5. Y luego otra vez, voy a usar el mismo color con la misma opacidad Después de eso, definamos border-radius con valor tres RAM Necesitamos pies de objeto para la imagen con la cubierta de valor. Y también necesitamos lo mismo para el radio para la imagen también. Por último, usemos la opacidad, yendo ocho. Bien, entonces la imagen se ve bien. Sigamos adelante y cuidemos el rumbo de Banner. Definamos su posición como absoluta. Entonces necesitamos definir la posición superior, hacer que sea diez RAM de lo que la posición correcta va a ser cinco ejecutados. Entonces como puedes ver, el rumbo se posiciona en el lado derecho. Vamos a definir el tamaño de la fuente , va a ser atrio Y también cambiar el color del elemento, hacerlo blanco. Bien, a continuación voy a establecer el ancho en 40 por ciento. Y también vamos a disminuir el espacio entre las palabras. Establezca la altura de línea en uno. Derecha. A continuación voy a alinear el texto al lado derecho. También usa algunos textos efecto sombra con los valores 03 RAM, tres RAM. Y como el color, vamos a usar el valor RGBA. Entonces ahora como pueden ver, el encabezado se ve muy bien. A continuación, voy a encargarme de los botones. Fijemos la posición a absoluta. Después refinar la posición superior, haciendo 28 RAM. El ancho va a ser de 18 RAM. También la altura va a ser de rango completo. Entonces necesitamos frontera. No va a ser ninguno. Cambiar el radio del borde, hacer los botones redondeados, devaluaría tres RAM Entonces puedes ver aquí el botón. Voy a cambiar el tamaño de la fuente. Hagámoslo 1.6 RAM. ¿También puede el cursor convertirlo en puntero? Bien. Sigamos adelante y seleccionemos el botón de bosque. La posición va a ser la correcta. 25 RAM. El color de fondo será naranja. El color del texto va a ser blanco. Entonces el primer botón, se ve bien. Sigamos adelante y nos ocupemos del segundo. Usa el mismo código, cambia el nombre de la clase. El puesto va a ser de cinco primos. En el lado derecho también cambia el color de fondo. Va a ser blanco. En cuanto al color del texto va a ser naranja. Así que todo se ve muy bien. Voy a crear efecto hover. Para el primer botón. Al flotar. Voy a cambiar el color de fondo. Hagámoslo blanco. También cambia el color. Que sea naranja. Asfalto. El segundo botón. Necesitamos lo contrario. O sea, tenemos que cambiar el color de fondo, hacerlo naranja. En cuanto al color del texto va a ser blanco. Y por último, usemos valores de transición, todos 0.3 s. Bien, entonces eso es todo. El Landing está estilizado y ahora tenemos que seguir adelante y encargarnos de la siguiente sección 7. Proyecto 1: crea la sección de productos: Bien, entonces ahora es el momento de seguir adelante y comenzar a crear nuestra siguiente sección, que va a ser la sección Productos. Voy a empezar a crear el marcado HTML. Así que sigamos adelante e insertemos sus comentarios para Productos. Entonces voy a abrir Elemento Sección con la clase Productos. El primer elemento que voy a insertar aquí, va a ser darle a la clase Productos top. Tendremos aquí h3 elemento de encabezado con una búsqueda de valor para Entonces tendremos H2 rumbo 15 mil y H1 rumbo gobierno. Con un texto Productos. Después de eso, voy a crear otro desarrollo que serán los íconos de Productos. Abramos la etiqueta DIV con el dormitorio de la clase. Voy a inasegurar una imagen para el icono va a ser recámara PNG Y también tendremos aquí un elemento span para el dormitorio de texto. Duplicemos estos elementos un par de veces. Después cambia los nombres de las clases. Va a ser tamponado. También cambia el nombre de la imagen y cambia el valor de texto del elemento span al mismo para el siguiente elemento, va a ser comedor. Cambiemos el nombre de la imagen y también el span. Entonces tendremos que hasta ahora cambiar esta sartén. El siguiente ítem va a ser mesa. Y el último artículo va a ser el vestuario. Entonces cambiemos el nombre de la imagen y también este elemento span. Bien, así que eso es todo sobre el marcado HTML. Tenemos aquí, todos los elementos necesarios. Sigamos adelante y comencemos a escribir algo de CSS. Voy a instituir los comentarios, Productos y de productos. Después seleccione los elementos de Sección, defina su ancho, va a ser del 100%. Esa es probablemente la altura. Voy a hacer que sea 85 de altura de viewport. A continuación, necesitamos display flex. Y tenemos que cambiar la dirección. Hagámoslo columna. Y también alinear los elementos en el centro. Así es que se puede ver que los elementos se colocan en el centro. Sigamos adelante y seleccionemos Productos. Ancho superior definido, va a ser del 60%. Entonces voy a crear algo de espacio en la parte inferior usando margen inferior ocho RAM. A continuación, voy a seleccionar Productos. H3, elemento de encabezado, mayor tamaño de fuente, hazlo a Ram. También cambia el color que voy a usar aquí, color azul. Duplicemos este código. Cambio H3N2, H12. Voy a cambiar el tamaño de fuente, que sea siete RAM, y también cambiar el color. Usa aquí, color naranja. ¿Correcto? Sigamos adelante y Estilo el tercer rumbo, H1. Cambia el tamaño de fuente, hazlo nueve RAM. También cambia el color. Voy a usar aquí, color azul. Además de eso, voy a disminuir el espacio en la parte superior usando margen superior con un valor negativo menos phi prime. Bien, así que vamos a ver que los encabezamientos se ven bastante bien. Sigamos adelante y seleccionemos productos, íconos. Voy a definir el ancho. Hagámoslo 60%. Entonces voy a configurar display a flex. Crea algo de espacio entre los elementos usando justificar el espacio de contenido de manera uniforme. Entonces como pueden ver, tenemos aquí incluso el espacio entre los artículos. A continuación, voy a seleccionar Dar elementos de los íconos de productos. Vamos a configurar la pantalla para flexionar. También cambia la dirección, hazlo columna. Entonces voy a alinear elementos en el centro. A continuación, definamos el ancho, hazlo 18 RAM. También definir la altura 20 RAM. Y crea algo de espacio en el lado derecho usando margin-right para correr Bien. A continuación, cambiemos el color de fondo. Voy a usar tu color F7, F7, C7. Luego crea espacio dentro del elemento usando relleno. A continuación, voy a crear algunos border-radius 2AM y también cambiar el cursor, hacerlo Derecha. Siguiente Voy a deshacerme del espacio del lado derecho del último ítem. Entonces tenemos que seleccionar el último hijo. Entonces necesitamos margen-derecho para ser cero. Bien. Sigamos adelante y seleccionemos Imagen. Crea algo de espacio en la parte inferior usando margen inferior tres ram. A continuación, voy a seleccionar el elemento span. Cambiemos la imagen en un lapso. Cambia el tamaño de fuente, hazlo 2.5 RAM. También cambia el color. Usa tu color. Azul. A continuación, voy a crear un efecto hover Voy a cambiar el color de fondo. Hagámoslo blanco. Y también usa box-shadow con los valores 01 RAM, tres RAM Y como el color, voy a usar RGBA color negro con la opacidad 0.1 Y también necesitamos aquí transición para un efecto suave. Así que se puede ver que tenemos aquí bonito sobre efecto. Lo último que voy a hacer es crear relleno dentro de la sección en la parte superior con Make it five prime. ¿Correcto? Así que todo se ve bien y la sección de Productos está hecha. Pasemos al siguiente. 8. Proyecto 1: crea y diseña la sección de precios: Bien, así que es hora de seguir adelante. Responde para crear nuestra siguiente sección, que va a ser una Sección de Precios. Sigamos adelante e insertemos nuevos comentarios, Precios y de Precios. Entonces voy a abrir una sección elemento clase Pricing. Insertemos aquí la etiqueta DIV Pricing top, que incluirá un par de elementos diferentes. Entonces voy a pasar aquí una imagen. Sigamos adelante y especifiquemos aquí el camino de la imagen. Va a ser muebles a PNG. A continuación, voy a pasar tu etiqueta DIV Pricing top content. Abramos la etiqueta de encabezado H1 con los textos, prepárense para Navidad. Y también voy a colocar aquí un patrón, tendencias reales. ¿Correcto? Así que vamos a verlo Acerca de la parte superior. Ahora, necesitamos crear un par de tarjetas. Vamos a crear la etiqueta DIV Tarjetas de precios y luego Instituir el auto en sí. Entonces tendremos aquí Íconos de tarjetas de precios. Me refiero a que los iconos Font Awesome tendrán tres de ellos. El primero va a ser F, un sólido enlace FAA Entonces el siguiente va a ser fa, regular. Fa caliente. En cuanto al tercer icono, voy a usar aquí, F un sólido, una lupa Más. Bien, así que aquí tenemos nuestros iconos Font Awesome A continuación, voy a instituir envoltorio para la imagen. En cuanto a la imagen, vamos a seleccionar la ruta. Va a ser sillón Pricing. Entonces voy a abrir la etiqueta de encabezado h3. Va a ser el nombre sillón. Bueno, entonces vamos a tener aquí estrellas. Vamos a usar de nuevo Font Awesome. Los iconos tendrán cinco estrellas en total. Entonces necesitamos fa sólido de una estrella. Vamos a duplicarlo cuatro veces. Y por último, voy a pasar aquí H4, rubro elemento por el precio Bien, así que sentémonos sobre la tarjeta. Tendrá seis de ellos. Así que vamos a seguir adelante y duplicarlo cinco veces. Y luego tenemos que hacer algunos cambios. Entonces la segunda tarjeta, va a ser sobre sofá. Tenemos que cambiar el camino, también el rumbo. Y vamos a tener aquí diferente estrella. Va a ser fa irregular. Y también el precio va a ser de 129 dólares. La siguiente tarjeta va a ser sobre iluminación. Cambiemos el precio, conviértanlo 59 dólares. Entonces tendremos una tarjeta sobre hasta el momento. Cambiemos el rumbo. También cambia el precio. Después pasa a la siguiente carta. Va a ser mesa llena. En realidad, voy a cambiar las estrellas por el Sofar. Necesitamos aquí. Fa, irregular Luego cambia el precio de la mesa. Va a ser 49 dólares Y ahora tenemos que cambiar los detalles para la última tarjeta, va a ser de vestuario. Cambiemos el rumbo y cambiemos también la estrella. Necesitamos aquí fa irregular. Por último, voy a cambiar el precio, ¿no? Entonces aquí tenemos nuestras seis tarjetas con imágenes y los detalles. Y el último elemento en esta sección va a ser un patrón. Ir a la tienda. Bien, así que eso es todo sobre el marcado HTML. Ahora, es el momento de seguir adelante y empezar a escribir algo de CSS. Insertemos nuevos comentarios para Pricing. Después voy a seleccionar elementos de Sección. Vamos a definir el ancho. Va a ser al 100%. También necesitamos aquí altura 100%. Entonces voy a configurar display a flex, y luego vamos a cambiar la dirección, hacerla columna. Entonces voy a alinear los elementos en el centro. Así se puede ver que los elementos se colocan en el centro de la sección. A continuación, voy a crear algo de espacio en la parte inferior usando margin, bottom 20 ram. Aunque aquí tenemos algún espacio que se sienta sobre el elemento sección. Sigamos adelante y seleccionemos Pricing top. Voy a configurar display a flex. Y luego vamos a alinear los elementos. Y el centro. Además de eso, voy a crear algo de espacio en la parte inferior. Entonces tienes este ritmo. A continuación, voy a seleccionar Pricing top images. La imagen. Vamos a crear algo de espacio en el lado derecho. Hagámoslo 20 RAM. Después voy a seleccionar Pricing top H1 heading elements. Vamos a aumentar el tamaño de la fuente, que sea siete RAM. También cambia el color. Voy a usar tu color azul. Entonces voy a definir el ancho. Hagámoslo 50 RAM, y también cambiemos la altura de la línea, Hazlo uno. A continuación, voy a crear algo de espacio en la parte inferior usando la RAM margin-bottom three Se puede ver que el rumbo se ve bastante bien. Sigamos adelante y seleccionemos el botón. Vamos a cambiar el ancho, que sea 18 RAM. Y entonces tenemos que cambiar la altura. Hagámoslo para RAM. A continuación, voy a definir el color de fondo. Va a ser blanco. Entonces necesitamos aquí borde con valores de 0.1 g sólido, y el color va a ser naranja. Entonces aquí tenemos el botón. Hagámoslo un poco redondeado usando border-radius con el valor tres RAM Entonces voy a cambiar el tamaño de fuente. Va a ser 1.6 R&. A continuación voy a cambiar el color. Usa aquí el color naranja y también cambia el cursor, hazlo señalar. Entonces como puedes ver, el botón se ve bien. Ahora es el momento de seguir adelante y seleccionar la tarjeta de precios. Cambiemos el ancho, que sea 30 RAM. Después cambia la altura. Va a ser 45 RAM. Además, voy a cambiar el color de fondo. Hagámoslo F7, F7, F7. Entonces aquí tenemos las tarjetas. Vamos a crear algo de espacio usando margen, una RAM. Además, voy a hacer las esquinas redondeadas usando border-radius para rampa Entonces aquí tenemos los cambios. Después usa display flex y también cambia la dirección, hazlo columna. Y también voy a alinear los elementos en el centro. Así es que se puede ver que los artículos se colocan en el centro. Quiero decir en el centro verticalmente. Además, usemos justificar el espacio de contenido entre ellos para crear algo de espacio entre los elementos flexibles. Entonces voy a usar padding para crear algo de espacio dentro de la tarjeta. Vamos a usar aquí cinco primos y cero y también cambiar el tipo de cursor, convertirlo en un puntero. Bien, así que las canchas se ven bien. Entonces necesitamos seleccionar un desarrollo envoltorio Tarjetas de precios para alinear las tarjetas al principio, usemos ancho, hazlo 60%. A continuación, ajuste la pantalla a flex. Se puede ver que las tarjetas se colocan una al lado Ahora usa justificar contenido con el valor Center Y después de eso, voy a envolver los elementos usando flex wrap, wrap. Bien, entonces como pueden ver, las cartas están muy bien alineadas. Usemos margen inferior con el valor cinco RAM para crear algo de espacio en la parte inferior entre los carros y el botón A continuación, voy a seleccionar los iconos de la tarjeta de precios. Al principio, los voy a ocultar usando display none. Entonces sigamos adelante y seleccionemos Envoltura de imagen. Voy a definir el ancho. Hagámoslo 20 RAM. Bueno, así que definamos la altura. Va a ser 18 RAM. Además de eso, voy a crear algo de espacio en la parte inferior. Hagámoslo cinco primos. A continuación, ajuste la pantalla a flex. Y también colocar el contrato y la central usando justify-content ¿Correcto? Después de eso, voy a seleccionar el rubro tres. Cambiemos el tamaño de la fuente. Va a ser 1.61. Además, voy a cambiar el peso de la fuente. Vamos a establecerlo en 300 y crear algo de espacio entre las letras. Que sea 0.1 R&. A continuación voy a cambiar el color. Usa tu color azul. Entonces vamos a ver los elementos del encabezado. Luce bien. A continuación, voy a seleccionar las estrellas. Me refiero al icono. Vamos a cambiar el tamaño de fuente, que sea 1.6 RAM. También cambia el color. Ves una naranja. Como puedes ver, las estrellas se ven bonitas. Y ahora es el momento de Personalizar la H, cuatro elementos de encabezado, que es el precio, cambiar el tamaño de fuente. También cambia el color. Entonces, como pueden ver, los encabezamientos se ven bien. Bien, ahora, necesitamos los mismos estilos para el botón en la parte inferior Como puedes ver, estos mosaicos se aplican y el botón se ve bien. Lo último que hay que hacer en esta sección es personalizar los iconos de la tarjeta. Seleccionemos envoltorio y definamos la posición. Hagámoslo absoluto. Necesitamos posición relativa para el elemento padre con el fin alinear los elementos de acuerdo con el padre. Vamos a configurar los dos primeros en RAM y la posición correcta para carnero también. A continuación, necesitamos display flex y tenemos que cambiar la dirección, hacerla columna. Entonces, como puedes ver, los iconos Font Awesome están alineados en la esquina superior derecha de la tarjeta Ahora necesitamos Personalizar y Estilo del icono en sí. Me refiero al icono Font Awesome. Vamos a establecer el ancho a tres RAM y definir también la altura, Hazlo 31 también. Necesitamos que el color de fondo sea blanco. Entonces voy a hacer redondear los íconos usando border-radius 50 por ciento También crea algo de espacio en la parte inferior usando margen, inferior una RAM. Y luego voy a colocar los iconos en el centro de los círculos usando display flex, justify-content Y también necesitamos alinear los artículos al centro. Justo después de eso, vamos a crear algunos efectos de sombra usando box-shadow, use sus valores 0.5 RAM, una RAM, y el color negro RGBA con una menor Y ahora, cambiemos el tamaño de fuente, hagamos un punto a RAM, y también cambiemos el color. Usa el color azul. Bien, entonces los íconos se ven bien, y ahora tenemos que ocultarlos porque deberían aparecer al flotar Ocultemos los iconos y también los movamos ligeramente usando Transformar. Traducir el valor Y a rampa. Entonces, como puedes ver, los íconos están ocultos. Ahora tenemos que crear sobre efecto. Seleccionemos Tarjeta de precios con hover. Y también tenemos que seleccionar los iconos. Al flotar. Tenemos que volver a mostrar los iconos y también establecer la propiedad transform translate Y a la posición predeterminada. Quiero decir, necesitamos aquí cero. Y también usa transición para un efecto suave. Entonces, como pueden ver, tenemos aquí un efecto hover realmente agradable y sencillo Y en realidad con la sección de precios, ya terminamos. Entonces, sigamos adelante y pasemos a la siguiente sección. 9. Proyecto 1: crea una sección de blog: Bien, entonces ahora es el momento de seguir adelante. Y así para crear nuestra siguiente sección, que va a ser una Sección de Blog, vamos a insertar tus nuevos comentarios Blog y de Blog. Y luego abrir la etiqueta de sección con un nombre de clase, Blog. Voy a insertar aquí etiqueta DIV con el contenido del blog de la clase, en la que voy a insertar aquí otra dar la clase block top. Necesitamos aquí otra vez etiqueta DIV con una revista de clase. Y también me voy a pasar imagen de orina. Seleccionemos imagen, que va a ser Revista punto PNG. ¿Correcto? A continuación necesitamos etiqueta DIV con tendencias de clase y luego etiqueta de encabezado H1 con el valor tendencias de invierno. 2023. Llegó el siguiente. Voy a usar botón de descarga. Y luego usemos la etiqueta DIV con la clase. Blog. Los artículos contarán tres artículos diferentes en los que voy a pasar lapso de año con un número de uno. Entonces necesitamos otro elemento span con algún texto ficticio. Duplicemos el artículo dos veces, porque como dije, necesitamos tres artículos en general. Entonces cambiemos los números. Bien, así que eso es todo sobre el marcado HTML. Sigamos adelante y comencemos a personalizar esta sección. Voy a introducir nuevos comentarios. A continuación, seleccione Elemento de sección ancho definido. Va a ser al 100%. Para la altura. Voy a configurarlo a la altura de la ventanilla Además, voy a cambiar el color de fondo. Va a ser de color azul. Entonces voy a usar flexbox. Coloquemos los elementos en el centro usando justify-content center y alineemos los elementos en el centro y alineemos Bien, así que a continuación voy a seleccionar contenido de bloque. Definamos una ola. Va a ser del 50 por ciento. Entonces la altura va a ser de 50 rampas. Voy a cambiar el color de fondo. Voy a usar un color naranja. Entonces hagamos las esquinas redondeadas usando border-radius. Entonces aquí tenemos el contenido. Sigamos adelante y seleccionemos Blog top. Use flexbox. Voy a sugerir vía contenido está espaciado de manera uniforme. Y también voy a alinear elementos en el centro. A continuación, sigamos adelante y seleccionemos la imagen de la parte superior del bloque. Estoy en la imagen de la revista. Vamos a establecer algo de espacio en la parte superior usando margen top cinco RAM. Entonces la imagen se ve bien. Siguiente Voy a usar tendencias, elementos de encabezado H1. Eso ha cambiado el tamaño de la fuente. Va a ser seis RAM. Además, voy a cambiar el ancho. Vamos a establecerlo en five prime y también verificemos el espacio entre las palabras usando line-height Uno. Después cambia de color, hazlo blanco, luego cambia de color, hazlo blanco. Y también usa algo de espacio en la parte inferior. Derecha. Después de eso, sigamos adelante y seleccionemos el botón. Vamos a definir el ancho. Va a ser 18 RAM. Entonces voy a definir la altura. Va a ser RAM llena. También cambia el color de fondo. Usemos el color azul. Se deshace del borde predeterminado. Entonces aquí tenemos el botón. Voy a hacerlo redondeado usando border-radius. Tres RAM. También cambiar el tamaño de fuente va a ser 1.6 RAM. Después cambia de color, hazlo blanco, y también haz el puntero del cursor. Derecha. Después de eso, voy a empezar a trabajar en artículos. Usemos Flexbox. Necesitamos justificar-centro de contenido. Y también necesitamos algo de espacio en la parte superior usando margin top a RAM. Entonces aquí tenemos los artículos. Seleccionemos el artículo en sí. Ancho definido, va a ser 23 RAM. Además, necesitamos definir la altura, que serán diez RAM. Luego crea algo de espacio usando margen. Después de eso, voy a usar flexbox. Alineemos los elementos en el centro y también utilicemos el puntero del cursor. Bien, a continuación voy a seleccionar elementos span en el artículo. Aumentemos el tamaño de la fuente, hagámoslo a RAM, y también cambiemos el color. Voy a usar el color blanco. A continuación, voy a poner el texto en mayúscula. Y también cambiar la altura de la línea. Hazlo a uno. Entonces tendrás el texto de los artículos. Duplicemos este código y ahora seleccionemos el primer elemento span usando el selector secundario enésimo Voy a aumentar el tamaño de la fuente va a ser de cinco RAM. Entonces deshazte del color, los impuestos transforman la propiedad. Y también la altura de la línea. Voy a usar font-weight con el perno de valor. Y también creemos algo de espacio en el lado derecho usando una rampa margin-right one Entonces como puedes ver, la sección del blog está terminada y se ve bien. Pasemos al siguiente. 10. Proyecto 1: crea una sección de contacto: Muy bien, así que sigamos adelante y comencemos a crear nuestra siguiente sección, que va a ser una sección de Contacto Voy a insertar sus nuevos comentarios, Contacto y de conflicto. Después abre Elementos de sección con un nombre de clase, Contacto. Voy a insertar aquí etiqueta DIV con un contenido de conflicto de clase. Vamos a Instituto y otros DIV, que va a estar contenta. Izquierda. Voy a insertar sus elementos de encabezado H2 con el texto. Suscríbase a nuestro boletín, y obtenga un 30%, que se colocará en el elemento span. A continuación, voy a colocar la etiqueta U DIV con el contenido de la clase, ¿verdad? En el que voy a insertar la etiqueta de entrada con el tipo e-mail y con un atributo placeholder, tu dirección de correo electrónico. Además de eso, voy a insertar tu botón con el texto regístrate. Bien, así que eso es todo sobre el marcado HTML. Sigamos adelante y comencemos a escribir CSS en los comentarios, contactos y contactos que voy a seleccionar Sección de Contacto. Vamos a definir el ancho. Va a ser al 100%. También, voy a definir la altura. Va a ser 40, altura de la vista. Entonces voy a usar display flex. Y voy a colocar los contenidos en el centro usando justify-content center y alinear items center Entonces como puedes ver, el contenido se coloca en el centro. Sigamos adelante y seleccionemos contenido y definamos el ancho. Va a ser del 50%. Además, voy a definir la altura va a ser 15 RAM. Entonces voy a usar otra vez Flexbox. Entonces consideremos que los elementos se colocan uno al lado del Entonces sigamos adelante y seleccionemos el contenido a la izquierda y definamos el ancho. Va a ser del 40 por ciento. Entonces voy a definir la altura va a ser del cien por ciento. Estoy en el 100% de los padres. Entonces cambiemos el color de fondo. Voy a usar el color naranja. Entonces aquí tenemos el lado izquierdo. Hagamos las esquinas redondeadas usando border-radius a RAM, 00 a RAM Además, voy a usar libros de lino. Y quiero colocar los artículos en el centro. Además de eso, vamos a crear algo de espacio en el lado izquierdo usando relleno. Después de eso, voy a seleccionar contenido a la izquierda, encabezando elementos. Definamos una ola. Va a ser un 2%. Además, voy a cambiar el tamaño de la fuente. Vamos a configurarlo en 2.2 RAM. Entonces voy a cambiar el color, va a ser blanco. Además, necesitamos disminuir la altura de la línea. Va a ser un punto. Para. Ahora, voy a seleccionar estos elementos span, que incluye 30% de, cambiemos el tamaño de fuente, hagamos 2.5 RAM, y también cambiemos el color. Voy a usar tu color azul. ¿Verdad? Entonces el lado izquierdo se ve muy bien. Sigamos adelante y seleccionemos el lado derecho. Definamos el ancho. Va a ser 60%. También, voy a definir la altura como 100 por ciento. Después cambia el color de fondo, usa el color azul. Entonces voy a hacer las esquinas redondeadas usando border-radius En este caso, necesitamos cero a RAM, a RAM. Y cero. También use flexbox. Para alinear los elementos en el centro, necesitamos alinear items center y también justify-content Muy bien, sigamos adelante y seleccionemos los elementos de entrada. En primer lugar, voy a definir el ancho va a ser 35 RAM. Después defina la altura. Hagámosla RAM llena. Cambiar el color de fondo. Voy a usar aquí un color 17469. Digamos de color azul más claro. A continuación, voy a crear algo de espacio dentro de la entrada usando padding. Después se deshace del borde predeterminado y Create para el radio 0.5 RAM también cambia el color. Voy a hacer el color blanco y crear algo de espacio en el lado derecho usando margen, ¿ verdad? Quiero Ram se convirtió. Entonces, como puedes ver, el elemento de entrada se ve mejor. Sigamos adelante y volvamos a seleccionar entrada. Aquí marcador de posición. Cambiemos el color. Hazlo blanco, y también cambia el tamaño de la fuente. Que sea un punto. Para RAM. Bien. Después de eso, voy a seleccionar entrada con foco. En foco, voy a cambiar la frontera. Hagámoslo 0.1 habitación sólida. Y como color voy a usar naranja. Entonces, una vez que enfoquemos la entrada, la frontera cambiará. ¿Verdad? Ahora es el momento de Personalizar el botón que se coloca junto al elemento de entrada. Vamos a definir un ancho, que sea diez RAM. Entonces voy a definir la altura. Va a ser RAM llena. También cambia el color de fondo. Vamos a usar aquí color naranja. Entonces. Voy a deshacerme de la frontera. Hagamos una monja y utilicemos para el radio para hacer redondeadas las esquinas del botón Entonces voy a cambiar el tamaño de fuente va a ser 1.6 RAM. Cambiar el color del texto. Hagámoslo blanco y cambiemos también el tipo de cursor, hagámoslo puntero. Bien, así que eso es todo sobre la Sección de Contacto. Se ve muy bien. Pasemos a la siguiente sección. 11. Proyecto 1: crea y da estilo al pie de página del sitio web: Bien, así que ahora es el momento de crear nuestra última sección del Proyecto, que va a ser un Pie En realidad, el Pie de Página va a ser sencillo. Insertemos tus comentarios para el Pie de Página. Entonces voy a abrir la etiqueta de pie de página HTML5. Vamos a la clase Pie de página. Entonces sigamos adelante e insertemos etiqueta U DIV con la clase copyright, en la que voy a colocar el párrafo, que incluirá la entidad HTML5. Me refiero al signo de copyright, seguido del texto. Todos los derechos reservados. 2023. Y luego crear por código y crear. Además de eso, vamos a tener aquí un logo. Me refiero al icono Font Awesome del sofá, seguido del encabezado H1, elemento muebles. Bien, entonces eso es todo. Se crean todos los elementos. Sigamos adelante y Personalice esta sección. En cambio comentarios para el Pie de Página. Después voy a seleccionar el elemento Footer, definir su ancho. Va a ser del 50 por ciento. Entonces la altura va a ser de cinco RAM. También necesitamos aquí margen o tú para centrar el elemento. Y también usa display, flex. Justificar el espacio de contenido entre para crear espacio entre los elementos. Y también necesitamos aquí alinear los elementos al centro para centrar los elementos verticalmente. A continuación voy a usar border top con los valores 0.1 RAM solid. Y como el color. Usemos el CCC. Bien, eso es todo sobre el Pie de Página A continuación, voy a Personalizar el desarrollo de derechos de autor. Vamos a establecer el tamaño de fuente en 1.6 RAM. También cambia el color, el color azul. A continuación, voy a encargarme del lado derecho del Pie de Página. Vamos a usar display flex para colocar los artículos uno al lado del otro. También necesitamos aquí alinear elementos, centro. Los elementos están muy bien alineados. A continuación, sigamos adelante y seleccionemos Icono de Font Awesome. Aumenta el tamaño de la fuente, hazlo a RAM. Y también cambiar el color que voy a usar aquí, naranja. Y entonces necesitamos algo de espacio en el lado derecho usando derecho marginal con el valor 1.5 gram. Bien, así que eso es todo sobre el icono. A continuación, quiero seleccionar los elementos de encabezado H1. Vamos a cambiar la familia de fuentes. Utiliza aquí el curso de Kenia. También establece el tamaño de fuente para que se ejecute y use algo de espaciado entre letras 0.3 RAM. Y también cambiar el color. Usa tu color azul. Bien, así que veamos el sobre el Pie de Página. Se ve bien y de hecho va el proyecto que estamos hechos a continuación, tenemos que hacerlo Responsive 12. Proyecto 1: convierte el proyecto en receptivo: Bien, así que ahora es el momento de hacer que nuestro proyecto responda a diferentes tamaños de pantalla. Voy a inspeccionar la página y cambiar al modo responsive. El proyecto está hecho para tamaño de pantalla extra grande. Y ahora tenemos que encontrar los puntos de quiebre sobre los que tenemos que hacer algunos cambios. En realidad, creo que después de 1,600 píxeles, el proyecto necesita algunos cambios Entonces volvamos al editor. Y primero voy a insertar nuevos comentarios para Responsive. Entonces voy a crear media query CSS. Y como el tamaño de pantalla, voy a definir aquí 1,600 pixeles En primer lugar, voy a encargarme del Banner. Así que sigamos adelante y seleccionemos un Banner. Voy a cambiar su ancho. Hagámoslo 70%. Bien, a continuación, hagamos un ligero cambio para los productos Vamos a seleccionarlo y establecer el relleno superior a diez RAM. Y también voy a cambiar la altura, que va a ser de 100 altura de viewport ¿Verdad? Entonces, como puedes ver, la sección Productos se ve mejor. A continuación, voy a seleccionar Productos top y cambiar el ancho va a ser 70%. Entonces voy a encargarme de los productos, íconos. Vamos a establecer con dos 70% también. Entonces ahora tenemos mucho mejor resultado. Bien, a continuación, voy a encargarme de las tarjetas de precios Entonces cambiemos el ancho. Va a ser 70%. A continuación, voy a encargarme de la sección del blog. Así que sigamos adelante y seleccionemos Contenido del Blog. Ancho definido. Va a ser 70% otra vez. Ahora tenemos mejor resultado. Luego, sigamos adelante y seleccionemos Content Content (Contact Content). Nuevamente, cambia el ancho, hazlo 70%. La Sección de Contacto se ve bien. Y por último, tenemos que encargarnos del Pie de Página. Vamos a cambiarlo con dos 70%. Bien, entonces creo que todo se ve bien. Sigamos adelante y encontremos el siguiente punto de interrupción, que creo que va a ser de 1,400 píxeles Así que vamos a seguir adelante y crear una nueva consulta de medios CSS. Y como ancho máximo, pongamos aquí 1,400 píxeles Voy a cambiar el tamaño de fuente de los elementos HTML. Vamos a fijarlo en 54 por ciento. Hará que todos los elementos sean un poco más pequeños y nos ayudará a que el proyecto sea receptivo. A continuación, voy a encargarme del Pricing, los elementos principales que estoy en la imagen. Cambiemos el ancho, hagamos 60 RAM, y también cambiemos el espacio en el lado derecho, establecemos margin-right a diez rampa Ahora tenemos mejores resultados. Y en realidad todas las demás secciones. Luce bien. Entonces, sigamos adelante y comencemos a trabajar en el siguiente punto de interrupción, que creo que va a ser de 1,200 píxeles Así que vamos a seguir adelante y crear una nueva consulta de medios CSS. Y como el max-width, vamos a especificar aquí 1,200 pixeles En primer lugar, cambiemos el tamaño de fuente de los elementos HTML. Voy a fijarlo en 51%. Como puedes ver, todos los elementos se hicieron más pequeños. A continuación, voy a seleccionar Banner. Cambiemos su ancho y hagamos que sea 80 por ciento Así que el Banner queda bien. A continuación, voy a tomar aquí de la sección de productos. Seleccionemos Productos Top. Cambia su ancho, hazlo 80 por ciento. Y también cambiar el ancho de los iconos de los productos. Vamos a establecerlo en 8% también. Bien, a continuación, tenemos aquí un Tarjetas de precios. Entonces voy a seleccionar Tarjetas de precios y establecer su ancho en ocho por ciento. Entonces tenemos tres tarjetas en cada línea otra vez. Bien, sigamos adelante y cuidemos la Sección de Blog. Seleccionemos el contenido del bloque y cambiemos su ancho, lo hagamos ocho por ciento. A continuación, voy a seleccionar Blog top image, que es Revista. Vamos a establecer su ancho en 40 RAM. Entonces voy a seleccionar artículos de blog y establecer margen superior a cero. Bien, entonces la Sección de Blog se ve bien. Y ahora tenemos que encargarnos de la Sección de Contacto y también del Pie de Página. Así que vamos a establecer el ancho en 8% para Content de Contacto y también cambiar el ancho, el Pie de Página también. Bien, para que se asiente sobre este punto de ruptura. Sigamos adelante y encontremos el siguiente. Entonces creo que los próximos puntos de interrupción , van a ser mil pixeles Así que sigamos adelante y creamos una nueva consulta de medios CSS con un ancho máximo de mil En primer lugar, voy a disminuir el tamaño de fuente del elemento HTML. Hagámoslo 46%. Siguiente. Yo voy a encargarme de la Navegación. Seleccionemos siesta o desarrollo superior y cambiemos la marcha. Háganlo 0.2 Rem en los lados izquierdo y derecho. Entonces la Navegación menos, se ve mejor. A continuación, voy a seleccionar Barra de búsqueda, elemento de entrada. Y voy a cambiar el ancho. Hagámoslo para correr. Entonces eso es todo sobre la Navegación. Seleccionemos encabezado de Banner y cambiemos el tamaño de fuente. Hagámoslo seis RAM. Entonces voy a encargarme de la sección Productos. Seleccionemos productos y definamos la altura. Hagámoslo 90 altura de la ventanilla. Y también voy a establecer padding top a five prime. A continuación, voy a seleccionar Productos. Top H2, elemento de encabezado, y establecer el tamaño de fuente en cinco REM. Bien, vamos a duplicar este código y lo mismo para el elemento H one Voy a establecer el tamaño de la fuente a siete rampas. ¿Verdad? Sigamos adelante y pasemos a la siguiente sección, que es la Sección de Precios. Voy a seleccionar Pricing top image. Vamos a establecer su ancho en 40 RAM. A continuación, tenemos que seleccionar Precios, elemento de encabezado H1 superior. Cambiemos el tamaño de la fuente, que sea five prime. Y también voy a establecer con 23 a cinco R&. Bien, entonces creo que el lado superior se ve bien. Ahora vamos a encargarnos de las Tarjetas. Vamos a establecer su ancho en 90%. Entonces nuevamente, tenemos tres tarjetas en cada línea. Y en realidad todo se ve bien. Sigamos adelante y encontremos el siguiente punto de interrupción, que creo que va a ser de 800 píxeles Así que sigamos adelante y seleccionemos nueva consulta de medios CSS con un ancho máximo, 800 Cambiemos de nuevo el tamaño de fuente de los elementos HTML. Voy a fijarlo en 139 por ciento. A continuación, voy a seleccionar un logotipo. Estoy en el icono Font Awesome, y cambio su tamaño de fuente, hazlo para RAM. Después de eso, voy a seleccionar Barra de búsqueda, elemento de entrada. Y voy a cambiar el ancho. Hagámosla rampa 30. Bien, ahora tenemos que encargarnos de la sección Productos Creo que tenemos un gran espacio en esta sección, así que vamos a seleccionar productos y a encontrar alto para que sea 75 altura de ventana Y también cambiar el acolchado en la parte superior. Vamos a ponerla a cero. Bien. A continuación, voy a seleccionar iconos Desarrollo. Vamos a establecer su altura en 18 RAM. Además, necesitamos disminuir el tamaño de los iconos. Así que vamos a seleccionar imágenes y establecer el ancho en five prime. Ahora se ven mucho mejor. Y además de eso, voy a seleccionar elementos span y disminuir el tamaño de fuente. Hagámosla rampa 1.8. Bien, a continuación, sigamos adelante y nos ocupemos de la Sección de Precios Seleccione la imagen superior de Precios y establezca su ancho en tres para ejecutar. Además, tenemos que encargarnos de la tarjeta de precios. Vamos a establecer su ancho en 27 RAM. Ahora las imágenes son u2, más grandes. Entonces, vamos a encargarnos de eso. Seleccione la imagen de la tarjeta de precios y defina el ancho. Hagámoslo 18 RAM. Ahora se ven mucho mejor. Ahora tenemos que encargarnos de la sección de bloque. Así que sigamos adelante y seleccionemos conjunto de contenido de bloque con dos 90%. Además, voy a seleccionar Blog top image. Y voy a definir su ancho como tres para rampa. ¿Verdad? A continuación, sigamos adelante y cuidemos las tendencias. Elementos de encabezamiento H1. Voy a cambiar su tamaño de fuente. Vamos a configurarlo en RAM completa. Y también cambiar el ancho, hacerla rampa 30. Bien, entonces después de eso, voy a seleccionar artículos de blog. Y fijemos el margen superior a cinco RAM para poder bajar los artículos. Bien, eso es todo sobre la Sección de Blog. Sigamos adelante y nos ocupemos de la conducta Sección, seleccionemos Contact Content y cambiemos con hacerlo 90%. En realidad, necesitamos aquí signo porcentual. Además de eso, voy a seleccionar lado derecho. Me refiero al elemento input. Vamos a establecer con 230 RAM Así que la Sección de Contacto se ve bien y pasemos a Pie de página, cambie su ancho, hágalo 90%. Bien, así que eso es todo sobre este punto de ruptura. Sigamos adelante y encontremos el siguiente. Creo que el siguiente punto de interrupción, va a ser de 600 píxeles Así que vamos a Crear nueva consulta de medios CSS y establecer el ancho máximo en 600 píxeles. En primer lugar, de nuevo, voy a cambiar el tamaño de fuente del elemento HTML. Va a ser el 35%. A continuación, voy a seleccionar elementos de lapso de logotipo. Y voy a cambiar su tamaño de fuente. Hagámoslo tres RAM. Así que tenemos que encargarnos de los elementos de entrada de la barra de búsqueda. Vamos a establecer su ancho en 26 RAM. Además, tenemos que encargarnos de los elementos de navegación. Entonces como desarrollo y cambio con hazlo 12 RAM. Ahora, como puedes ver, la parte superior del sitio web se ve bien. Pasemos al Desembarco. Voy a cambiar la altura. Va a ser 75 de altura de la ventanilla. Además, voy a seleccionar elementos de encabezado, que se coloca en el Banner, y vamos a cambiar su ancho, hacerlo a Ram. Siguiente. Tenemos que encargarnos del botón. Los Bateson's, pongamos el ancho a 15 RAM. A continuación, seleccionemos el primer Batson y cambiemos la posición en la que estoy La posición correcta va a ser 20 para rampa. Bien, Así que eso es todo sobre el Encabezado del Sitio Web. Sigamos adelante y nos ocupemos de la sección Productos. Vamos a establecer la altura a 90 altura de la ventanilla. Ahora se puede ver que tenemos espacio de bitácora abajo. Entonces, seleccionemos Productos. Arriba. Necesitamos text-align center y tenemos que cambiar el margen en la parte inferior Vamos a ponerla en tres rampas. Bien, sigamos adelante y seleccionemos los iconos y fijemos su ancho en 70% Además, necesitamos flex wrap para envolver para colocar los iconos en diferentes líneas. Lo siguiente que tendrá que hacer es seleccionar Desarrollo y establecer ancho a 16 RAM. Además, tenemos que establecer el margen en, para ejecutar. Por lo que se considera que el último ítem tiene margen en el lado izquierdo. Entonces voy a arreglar ese problema. Seleccionemos Desarrollo. Estoy en el último elemento de la lista. Vamos a establecer margen derecho a, para ejecutar. Se puede ver ahora el problema está arreglado. ¿Bien? A continuación tenemos que encargarnos de la sección de bloques porque la Sección de Precios se ve bien. Así que sigamos adelante y seleccionemos artículo, elemento span. Cambiar el tamaño de fuente. Vamos a configurarlo en 1.5 RAM. Ahora, se ve bien. Y en realidad con este punto de quiebre, ya terminamos. Sigamos adelante y encontremos el siguiente punto de ruptura, que va a ser el último Así que vamos a seguir adelante y crear una nueva consulta de medios CSS como el ancho máximo de la pantalla Voy a especificar aquí 450 pixeles. En primer lugar, cambiemos el tamaño de fuente del elemento HTML. Va a ser 32%. A continuación, voy a encargarme del logo. Creo que estaría bien si ocultamos el texto. Estoy en este parlamento en absoluto usando display, ninguna. A continuación, voy a encargarme de la sección Productos. Seleccionemos productos y dijimos hola a la altura de la ventana gráfica. Bien, a continuación, sigamos adelante y cuidemos la parte superior de la sección de precios Voy a seleccionar un elemento de imagen. Vamos a establecer su ancho en 25 RAM. Y además, vamos a personalizar el encabezado H1. Voy a cambiar el tamaño de la fuente. Vamos a establecer el tamaño de fuente en 3.5 RAM. Y luego cambia el ancho, hazlo 25 wrap. Bien. Ahora tenía que encargarme de la Sección de Contacto. Sigamos adelante y seleccionemos el lado izquierdo. Me refiero a contenido a la izquierda, H2, elemento de encabezado. Vamos a establecer el tamaño de fuente en un punto, una trampa. A continuación, voy a seleccionar Contact left span element. Y para cambiar su tamaño de fuente. Hagámoslo a rampa. Bien, sigamos adelante y cuidemos del lado derecho. Seleccionar contenido, ¿verdad? Elementos de entrada. Disminuir su ancho, que sea 25 RAM. Así que ahora se puede ver todo. Se ve bien y podemos decir que nuestro proyecto responde a diferentes tamaños de pantalla. Bien, así que con este proyecto ya terminamos. Espero que lo hayan disfrutado. Ahora, podemos seguir adelante y comenzar a crear nuestro próximo proyecto, que espero sea interesante y aprendan algo nuevo. Bien, sigamos adelante. 13. Proyecto 2: vista previa: Hola y bienvenidos a nuestro segundo proyecto, que va a ser un sitio web de Portafolio Personal. Hoy en día, este tipo de Sitio Web es muy popular y muy demandado, así que creo que será interesante para ti. El proyecto es sobre un Desarrollador Web con todas sus Habilidades, obras, proyectos, Contacto, y así sucesivamente. Sigamos adelante y describamos el proyecto. Entonces tenemos aquí un Encabezado del Sitio Web en el que tenemos un logo, Banner y un ícono de Menú de Hamburguesa Si hago clic en él, entonces aparecerá la Navegación con algunos efectos agradables. El Banner consta de un par de elementos diferentes, incluyendo la imagen de un desarrollador. A continuación, tenemos una sección de habilidades que nos muestra las tecnologías y el nivel de conocimiento de un desarrollador web. la sección Habilidades le sigue la sección Proyecto, donde podemos encontrar diferentes trabajos de un desarrollador. Después de eso, tenemos aquí una Sección de Contacto con algunos datos de contacto y campos de entrada. Y por último, puedes encontrar aquí un pie de página sencillo y agradable. El proyecto responde a diferentes tamaños de pantalla. Si inspecciono la página, cambie al modo de respuesta y verifique el proyecto cuatro tamaños de pantalla diferentes. Encontrarás que el proyecto es Responsive y se ve bien en cada tamaño de pantalla diferente. Nuevamente, todos los proyectos se crean para un tamaño de pantalla extra grande. Estoy en sitios discretos con 1920 pixeles de ancho y 1080 pixeles de alto. Entonces, si estás usando un tamaño de pantalla relativamente más pequeño, entonces durante las conferencias, debes cambiar al modo de respuesta y especificar el ancho y la altura así. De lo contrario, el proyecto no se verá bien en un tamaño de pantalla más pequeño hasta que lo hagamos receptivo. Entonces, por favor, tómalo en cuenta. Bien, entonces eso es todo sobre nuestro segundo proyecto. Ahora podemos seguir adelante y empezar a construirlo 14. Proyecto 2: crea y da estilo al encabezado del sitio web: Bien, entonces es momento de comenzar a construir nuestros proyectos. Tengo una carpeta aquí, página web de cartera. Sigamos adelante y ábralo en VS Code. Y luego crear nuestros archivos de trabajo para HTML, CSS, y también para JavaScript. Entonces sigamos adelante y abramos archivo index.html y creamos un documento HTML básico. Voy a cambiar el título. Va a ser un sitio web de cartera. Entonces voy a enlazar archivo CSS. Y también vamos a vincular el archivo JavaScript usando la etiqueta script. Bien, abramos el Navegador de Proyectos. Y también voy a colocar el editor y el navegador uno al lado del otro, así Además de eso, voy a usar un par de enlaces diferentes. El primero va a ser las fuentes de Google. A lo largo de este proyecto, vamos a utilizar la fuente llamada escribió estos. Seleccionemos un par de estilos diferentes. Entonces buscaremos otra fuente de Google, que se llama Cabot Selecciona diferentes estilos. Después copia el enlace y pegarlo en el elemento head. Bien, a continuación necesitamos Font Awesome CDN. Porque vamos a usar un par de fuentes diferentes, iconos impresionantes. Vamos a agarrar el enlace, luego abrir la etiqueta de enlace y el elemento head y pegar la CDN Bien, así que todo está listo. Sigamos adelante y comencemos a crear comentarios de marcado HTML para contenedor Entonces voy a insertar aquí la etiqueta DIV con el contenedor de clase. Entonces necesitamos otro comentario para Navegación. Vamos a crear el marcado HTML para la Navegación, necesitamos aquí la etiqueta DIV con el icono de menú de clase, que incluirá dos líneas diferentes El desarrollo contará con dos clases, línea y línea uno. A continuación necesitamos Navegación. Estoy en elemento nav con la clase Navegación. Incluirá Sección frontera. Y entonces vamos a tener aquí artículos nav. Insertemos tu elemento de enlace con home que se duplique un par de veces y cambiemos los elementos de navegación. El segundo va a ser sobre, entonces tendremos proyectos. El siguiente será Galería. Entonces tendremos clientes de Blog. El siguiente será Precios y luego Contacto. Bien, así que eso es idoneidad Navegación. Vamos a instituir nuevos comentarios para Landing. Vamos a abrir la etiqueta de sección con la clase Landing. Voy a instituir etiqueta DIV con la clase Sección, encabezado PG con el desarrollador web de texto. En realidad, va a ser el encabezado H1, etiqueta y no el equipo. A continuación necesitamos un logo con elemento span con la web de texto. Y luego otra vez elemento span con la pestaña de texto. ¿Verdad? Después de eso, voy a crear Banner. Insertemos aquí Borde de sección. Y también vamos a tener aquí información del desarrollador. Incluirá la etiqueta de encabezado h3 con el saludo de la clase. Vamos a texto institucional, hola. Entonces tendremos elemento span. Mi nombre es Vamos a insertar sus elementos de encabezado H1 con un nombre de clase y luego inserte la etiqueta span con el texto John Smith. Bien. Después de eso, voy a insertar tu etiqueta de encabezado h3 con la clase Prof. me refiero a profesión. Vamos a introducir algunos textos en. Entonces. Es span tag, el contenido Web Developer. Bien, Siguiente, vamos a insertar párrafo con la clase sobre Y voy a instituir algún texto ficticio. Justo después de eso. Voy a instituir un par de íconos de redes sociales. Pero primero vamos a abrir la etiqueta DIV con la clase social media. Y luego te voy a colocar Font, Iconos impresionantes. El primero va a ser el FAA de una marca, Facebook F. Entonces el segundo va a ser el de una marca de Instagram En cuanto a la tercera, va a ser si las marcas tengo un Twitter. Bien, así que aquí tenemos nuestro marcado HTML. Sigamos adelante y empecemos a trabajar en el CV. Voy a instituir botón con el botón tipo y con una clase. Btn, CV, BTN. Y también instituir texto. Voto negativo CV. A continuación, necesitamos aquí span tag con el texto, mis habilidades. A continuación, voy a instituir una etiqueta DIV con la imagen del desarrollador del nombre de la clase. Entonces vamos a insertar tu rapero de imagen. Me refiero al desarrollo será la clase sorda envoltorio de imagen. Insertemos la etiqueta de imagen y luego seleccionemos la ruta de la imagen. Cuando desarrollador puntea PNG. Bien. la imagen le seguirá un elemento profundo con el nombre de clase deep experience. Y además tiene otra clase Deep Work Institute etiqueta span con el número 15. Y también necesitamos otro lapso. Años de experiencia. Duplicemos este código. Cambia aquí. Nombre de clase necesitamos proyectos, ha cambiado un número, va a ser 400 plus. También cambia el texto. Vamos a instituir proyectos concluidos. Bien, así que veamos que tenemos aquí nuestro marcado HTML para la Navegación y para el Encabezado Empecemos a escribir algunos CSS en lugar de comentarios para los estilos predeterminados. Entonces voy a seleccionar cada elemento usando un asterisco, establecer margen, y relleno ambos a cero También, voy a definir box-sizing, border-box. Entonces tenemos que deshacernos de la decoración textual. Además, pongamos esquema a ninguno. Y establecer font-family. Para rodar estos sensoriales. Bien, después de eso, voy a establecer tamaño de fuente del elemento HTML en 62.5 por ciento porque voy a usar RAM como unidad de medida Una RAM será igual a diez píxeles. A continuación, voy a insertar sus comentarios para el contenedor. Seleccionemos contenedor. Define con como 100% y también defina la altura como 100 altura de ventana gráfica Después cambia el fondo. Voy a usar tu degradado lineal con un par de colores diferentes. El primero va a ser 23293 al segundo va a ser para ver 3138 y también tener aquí el tercero Va a ser 232932. Entonces aquí tenemos el color de fondo con un gradiente lineal A continuación, voy a instituir comentarios para el Landing. Seleccionemos el envoltorio de imagen del desarrollador y establecemos su ancho en 60 RAM. Porque ahora mismo la imagen es demasiado grande. Necesitamos aquí altura 60 RAM. También. Sigamos adelante y seleccionemos la propia imagen y definamos un ancho y alto como 100%. Ahora la imagen se hizo más pequeña. A continuación, voy a seleccionar el elemento de sección. Definamos con Make it cientos por ciento. También cambie la altura y establezca 200 altura de ventana gráfica. Te voy a cambiar la altura del contenedor. Vamos a agregarlo al 100%. Ahora, voy a seleccionar el encabezado de fondo de la Sección. Fijemos su posición a absoluta. Y también necesitamos cambiar la posición para el elemento padre. Vamos a establecerlo en relativo. Luego, establece abajo a cero. Y también necesitamos que nos quede el 50 por ciento. Y luego para un centrado perfecto, necesitamos transformar, traducir X con -50% Después de eso, voy a aumentar el tamaño de la fuente. Va a ser a través de correr. Entonces tenemos aquí encabezamiento de fondo. Vamos a cambiar el ancho va a ser del 100%. También. Voy a alinear, gravando el centro y luego cambiar la familia de fuentes En este caso, voy a usar fuente llamada cursor de gabinete. Ahora el rumbo se ve mucho mejor. A continuación tenemos que cambiar su color. Va a ser 3136 3D. Es como un color gris. Además, necesitamos que la opacidad sea 0.5. Ahora, se ve muy bien. Sigamos adelante y seleccionemos Banner. Voy a poner su posición a absoluta. Entonces necesitamos posición dura para ser 50% posición izquierda pies por ciento. Y entonces necesitamos centrarlo usando transform translate -50 por ciento Y nuevamente -50 por ciento porque necesitamos centrar los elementos vertical y horizontalmente Bien, después de eso, voy a seleccionar Logo. Fijemos su posición a absoluta. Entonces necesitamos una posición dura para estar lleno de RAM. Y luego dejar posicionar cinco RAM. Entonces cambiemos el tamaño de la fuente. Va a ser tres RAM. Entonces tenemos aquí logo, se coloca en la esquina superior izquierda de la página. A continuación, voy a seleccionar elementos span. El primer elemento span. Cambiemos el color, hazlo blanco. Entonces aquí tenemos el primer elemento span. Duplicemos este código y cambiemos el nombre de la clase. Tenemos que hacerlo. Intercambiamos el tamaño de la fuente. Va a ser cinco RAM. Y también voy a cambiar la familia de fuentes. Voy a usar salvedad. Por supuesto, el peso de la fuente va a ser negrita. Y también voy a cambiar el color. Voy a usar color verde, 298587. Bien, entonces tenemos aquí nuestro logo, que creo que se ve bastante bien A continuación, voy a exhibir flex para el Banner. Y luego voy a seleccionar Borde de Sección. Vamos a establecer su ancho 2.3 RAM. La altura va a ser de 55 RAM. Entonces voy a cambiar el color de fondo. Vamos a usar aquí BBB. También crea algo de espacio en el lado derecho usando la RAM de diez margin-right Entonces aquí tenemos Sección frontera, la frontera para la Navegación. Entonces ahora mismo voy a ocultar la Navegación por un tiempo. Entonces vamos a los comentarios del Instituto. Después seleccione Navegación y asignado para mostrar no. Volveremos a la Navegación en un rato. Sigamos adelante y continuemos personalizando el Encabezado del Sitio Web. Entonces voy a seleccionar Borde de sección con una pseudo-clase antes Vamos a configurar el contenido en vacío. Entonces voy a establecer el ancho a tres RAM. La altura va a ser tres Rahm. En realidad estamos creando el círculo aquí. Así que pongamos borde a punto para carnero sólido en el color BBB Además, necesitamos que el color de fondo sea 1d22 a ocho. A continuación, establezca la posición posición absoluta relativa para el elemento padre. Entonces tenemos aquí antes pseudo elementos. Hagámoslo redondeado usando el border-radius está presente. Entonces la posición en la que estoy, la posición izquierda va a ser -1.65 corrió de la siguiente Es una posición, va a ser menos tres RAM. Tendrás el círculo. Duplicemos este código. Necesitamos otro círculo, en este caso usando después de pseudo elemento Tenemos que cambiar aquí un par de cosas. Necesitamos. Posición inferior. Menos tres rampa. En realidad, no necesitamos cambiar nada más. Entonces necesitamos un saludo. Cambiemos el tamaño de la fuente. Va a ser 1.6 RAM. Entonces voy a transformar texto en mayúsculas. Cambia el color, hazlo blanco. También, necesitamos algo de espacio entre las letras. Aquí tenemos texto de saludo. A continuación, voy a seleccionar elementos span, el saludo. Cambiemos el color, hagámoslo verde. A continuación, voy a seleccionar nombre. Cambiemos el tamaño de fuente, que sea diez RAM. Necesitamos con que sean 60 RAM. Además, crear algo de espacio alrededor del elemento está en margen para RAM cero a RAM cero, entonces el color va a ser blanco. Entonces aquí tenemos el nombre. Vamos a agregarle alguna sombra con RGBA, color negro con una menor opacidad Entonces tenemos aquí poco efecto de sombra. A continuación, voy a seleccionar elemento span, que se coloca dentro del nombre. El color va a ser verde. Entonces el primer nombre es verde ahora y se ve bien. A continuación, voy a seleccionar al prof. Cambiemos el tamaño de la fuente. Va a ser 1.8 R&. Además, voy a cambiar el peso de la fuente. Vamos a establecerlo en 300. Transforma texto en mayúsculas. También cambia el color Aquí, color blanco. Y luego crear algo de espacio entre las letras que establecen a para apuntar a RAM. También cree algo de espacio en la parte inferior usando margin-bottom six rent ¿Verdad? Ahora, voy a seleccionar elemento span del Prof. cambiar la familia de fuentes Va a ser una advertencia, corrosivo. Y también voy a establecer el tamaño de fuente a tres R&. A continuación, voy a cambiar el peso de la fuente, va a ser negrita. Después transforma el texto en mayúscula. Además, crea algo de espacio usando margin-left, un punto para ejecutar Entonces aquí tenemos la segunda parte del Prof. siguiente necesitamos sobre, Vamos a establecer el ancho a 60 RAM Cambiar la familia de fuentes, va a ser advertencia cursiva. Además, necesitas que el tamaño de fuente sea 2.5 RAM. Entonces voy a cambiar la altura de la línea Vamos a ponerla en una y cambiar el color Que sea un nueve, un BAE. Entonces aquí tenemos sobre el párrafo. Vamos a establecer el margen inferior en cinco RAM para crear algo de espacio en la parte inferior. Ahora, tenemos que encargarnos de los íconos de las redes sociales. Vamos a establecer el margen inferior a cinco RAM. Entonces voy a Personalizar tres íconos. Entonces es como las redes sociales. Irlanda. Aumentar el tamaño de la fuente. Va a ser 2.5 RAM. Después cambia el color blanco. Voy a crear algo de espacio en el lado derecho usando margin-right a RAM Y luego usa algún efecto de sombra. Los valores 0.5 gramo o una RAM, y el RGB un color negro con la opacidad 0.3 Bien, entonces los íconos se ven mucho mejor. Cambiemos el tipo de cursor, hazlo señalar. Bien, Eso es todo sobre los íconos de las redes sociales. Ahora, tengo que encargarme del botón. Vamos a establecer su ancho en 20 RAM. Entonces la altura va a ser de seis RAM. Además, voy a establecer borde a punto para carnero sólido con un color BBB Para el radio va a ser tres RAM. Quiero que el patrón sea redondeado. Después cambia el color de fondo, hazlo transparente. Entonces tendrás el botón. Cuidemos el texto. El tamaño de la fuente va a ser un punto para la RAM. El cambio, la transformación, lo hacen mayúsculas. También necesitamos establecer el color a blanco y también cambiar el cursor, hacerlo apuntar. Bien. Lo siguiente que voy a hacer es crear algo de espacio en el lado derecho, van a ser siete RAM. Y ahora tenemos que crear un efecto hover. Tenemos que seleccionar BGN antes. Agreguemos contenido para vaciar. Con va a ser al 100%. La altura también va a ser del 100%. Después cambia el color de fondo, ves un color verde. Además, voy a establecer border-radius a tres RAM. Debe ser redondeado como el fondo. Luego establece la posición en absoluto. Necesitamos escuchar la posición relativa porque el botón es el elemento padre. Entonces aquí tenemos el pseudo elemento antes. Pongamos la posición superior a cero y esa posición a cero también. Entonces ahora, antes de que descubramos el botón, arreglemos ese problema usando el valor de la propiedad index menos diez Bien, así que ahora se ve bastante bien. Y tenemos que ocultar estos elementos usando Transformar Escala cero. Una vez que pasamos el cursor sobre el botón, entonces antes de que aparezca el pseudo elemento Así que vamos a seleccionar BTN con más, seguido del pseudo elemento before Vamos a establecer la escala a uno. Y también necesitamos que hagas la transición para hacer un hecho más inteligente. Vamos a usar la transición aquí también. Bien, ahora tenemos que crear una línea junto al botón. Entonces, seleccionemos CVP diez con el pseudo elemento after. Vamos a configurar el contenido en vacío. Entonces encontramos ancho. Va a ser cinco RAM. Necesitamos altura para estar apuntando a RAM. Luego cambia el color de fondo. Va a ser BBB. Así que establece la posición en absoluto. Entonces la posición superior va a ser del 50 por ciento. En cuanto a la posición correcta, va a ser menos cinco mil. Entonces aquí tenemos línea. Agreguemos aquí Transformar, Traducir Y -50 por ciento para centrar la línea perfectamente Bien. Ahora necesitamos CV span. Cambiemos el tamaño de la fuente. Va a ser un punto para la RAM. Peso de la fuente. Voy a fijarlo en 300. Además, transforma el texto en mayúsculas y luego cambia el color, hazlo blanco Bien, así que eso es todo sobre el lado izquierdo Sigamos adelante y cuidemos el lado derecho. Voy a añadir aquí color de fondo. Usemos el color verde del que necesitamos, el radio del borde para ser del 50 por ciento. Agreguemos aquí relleno con algunos valores diferentes en diferentes sitios. También necesitamos aquí efecto sombra. Los valores 01 RAM, una RAM, y RGBA, el color negro y con el punto de opacidad para tener efecto sombra Ocultemos la parte de la imagen usando desbordamiento oculto. Bien, ahora necesitamos algo de espacio entre los lados izquierdo y derecho. Seleccionemos la información del desarrollador y fijemos el margen derecho a 15 corridas. Entonces ahora tenemos aquí mucho mejor resultado. Seleccionemos esa Obra. Establecer ancho a 25 RAM que la altura va a ser nueve RAM. También necesitamos aquí el color de fondo para que sea uno, T22 a a. luego cambiar el tamaño de fuente Va a ser un punto para la RAM. Necesitamos que el texto esté en mayúscula. Cambia el color, hazlo blanco. Entonces tendrá ese trabajo. Eso es establecer borde para apuntar a ram, solid y BBB. También necesitamos border-radius six RAM. Entonces ahora tenemos aquí mucho mejor resultado. Vamos a configurar la pantalla para flexionar. Tenemos que enviar al texto usando justify-content center y align items center Además, usemos relleno, cero para rampa. Después usa box-shadow con los valores 0.5 gram 1 gand, el color negro RGBA con el punto de opacidad Bien, Siguiente, fijemos la posición en absoluto. Y también necesitamos aquí posición relativa para el elemento padre, que es la imagen del desarrollador. Entonces tenemos que seleccionar por separado ese trabajo. En este caso, usted paso experiencia, establecer la posición inferior a diez RAM. Además, la posición correcta va a ser cuatro a la RAM. Entonces un elemento se coloca correctamente. Seleccionemos que Proyectos establezca la posición inferior en una RAM, y luego la posición correcta va a ser menos dos rampa. Bien, así que todo queda bien. Ahora, voy a seleccionar ese lapso de trabajo. Nth-niño uno. El primer elemento span. Vamos a establecer el tamaño de fuente a tres RAM, que va a ser del 50 por ciento. Además, alineemos el texto y el centro. Así que aquí tenemos, vamos a duplicar este código, cambiar nth-child a, para deshacernos de text-align También tamaño de fuente, y luego establecer el color en verde. Bien, así que eso es todo. Todo se ve genial. Pasemos a la siguiente conferencia. 15. Proyecto 2: estilo y haz que la navegación funcione: Bien, así que una vez que terminemos con un Encabezado, ahora es el momento de seguir adelante y trabajar en la Navegación, que en este momento está oculta porque le asignamos mostrar ninguno Sigamos adelante y Personaliza el ícono de Menú. Voy a configurar con 23 RAM. Entonces la altura va a ser de tres RAM. Y voy a firmarle algún color de fondo temporal, C, C, C. Entonces necesitamos definir la posición. Se va a arreglar. La posición superior va a ser cinco RAM. En cuanto a la posición correcta, también van a ser cinco RAM. Entonces como puedes ver, tenemos aquí Icono de menú. Deshagámonos de estos colores de fondo temporales y luego seleccionemos la línea. Vamos a establecer con dos o tres RAM para la altura va a estar apuntando a RAM. Y luego pongamos el color de fondo a BBB. Entonces aquí tenemos líneas. Voy a configurar display para flexionar para el icono Menú. Y entonces tenemos que cambiar la dirección. Hagámoslo columna y también utilicemos espacio de contenido justificado de manera uniforme. Además de eso, necesitamos alinear los elementos al centro y también cambiar el más grueso, hacerlo punto cero Entonces como puedes ver, tenemos aquí bonito ícono de Menú con dos líneas. A continuación, me voy a deshacer de display none desde la Navegación y posición definida, Hacerlo fijo. Entonces tenemos que hacerlo, si la interposición va a ser cero Y también necesitamos aquí, posición correcta para ser cero también. Entonces vamos a configurar con 250 RAM. Para la altura va a ser cien la altura de la vista. Entonces voy a cambiar el color de fondo. Va a ser de color gris. Aquí tenemos la Navegación. Vamos a establecer la propiedad index en 100 para mostrar el Navigation. Bien, entonces ahora también necesitamos índice Z para el ícono de Menú Por lo que ahora se muestra el icono. A continuación, voy a configurar display a flex y necesitamos alinear los elementos de navegación usando align items center. Además, voy a usar el acolchado de la aurícula izquierda. Entonces sigamos adelante y seleccionemos artículos. Necesitamos display flex y tenemos que cambiar la dirección. Hagámoslo columna. Por lo que los artículos se colocan verticalmente. A continuación, voy a seleccionar el propio elemento nav. Me refiero al elemento link. Vamos a establecer el tamaño de fuente en tres RAM. También cambia font-weight. Van a ser 300. Entonces transformemos el texto en mayúsculas Crea algo de espacio entre las letras y cambia de color. Hacer Color II. También necesitamos algo de espacio, está en margen, una RAM y cero. Entonces, como puedes ver, los elementos de navegación se ven bien. Siguiente Voy a seleccionar elementos de enlace con hover. Cambiemos el color, lo hagamos verde, y también utilicemos la transición para un efecto suave. Entonces ahora consideremos que tenemos aquí bonito efecto liso hover Bien, así que ahora es el momento de hacer que la Navegación funcione. Vamos a ocultarlo. Establecido en oposición a menos ocho. Um, en cuanto a la posición correcta, necesitamos -63 RAM Además, voy a usar Transformar Girar. Z. el valor va a ser -15 grados. Si pongo posición en absoluto, entonces veremos la posición de la Navegación. Volvamos aquí, posición fija. Entonces, una vez que hagamos clic en el icono, debería aparecer la Navegación. Necesitamos JavaScript. Vamos a crear algunas variables. Icono de menú, vamos a seleccionarlo usando el método QuerySelector. Necesitamos especificar aquí el nombre de la clase, icono de Menú. Duplicemos este código. Necesitamos aquí. Container también cambió el nombre de la variable. Va a ser contenedor. A continuación, voy a agregar oyente de eventos al ícono Menú con un evento click Y también tenemos que pasar una función de devolución de llamada. Va a ser una función de flecha Una vez que hagamos clic en el ícono Menú, tenemos que agregar una clase al contenedor. Así que necesitamos aquí la propiedad de lista de clases que el método toggle. Y tenemos que colocar el nombre de tu clase, que va a ser cambiado. Bien, entonces ahora tenemos que seleccionar Navegación con un cambio de clase y tenemos que aplicar para comer algunos estilos, posición superior cero y posición derecha cero. También necesitamos aquí Transformar, Rotar Z. Y tenemos aquí para pasar por defecto la posición cero Una vez que hagamos clic en el icono Menú, entonces aparecerá la Navegación. Para que esto afecte motor, necesitamos hacer la transición de todos los puntos 6 s. así que ahora todo funciona bien y tenemos aquí bonito efecto. A continuación, voy a establecer opacidad para los intentos cercanos a cero y también visibilidad oculta. Tenemos que ocultar los elementos de Navegación. Seleccionemos Navegación. Después Frontera de la Sección. También tenemos que ocultar la frontera. Entonces necesitamos de nuevo opacidad cero y visibilidad oculta. Bien, entonces ahora tenemos que mostrarlos, quiere que se muestre la Navegación Tenemos que volver a cambiar de clase y luego nav items. Vamos a establecer la opacidad a uno y la visibilidad a visible. Luego use la transición con algún tiempo de retraso. Porque una vez que necesitamos mostrarlo en Navegación y luego los artículos, hagamos lo mismo para el borde de la Sección. Usa el cambio de clase y establece la opacidad a uno y visibilidad para calentarlo, lo siento, visible Y también usan transición, que nuevamente algún tiempo de retraso. Bien, ahora, todo funciona bien. Tenemos aquí efecto cool. Una vez que hayamos mostrado el icono de Menú. Bien, por último, voy a encargarme de las líneas. Tenemos que establecer la propiedad de transformación para rotar Z 45 grados. Va a ser para la línea uno. Además, necesitamos traducir para poder mover la línea con el valor 0.7 RAM y -0.1 rampa Hagamos lo mismo para la línea dos. Aquí necesitamos -45 grados. Y también necesitamos hacer la transición. Ahora una vez que hagamos clic en el icono Menú, se transformará en X botón de cierre. Así que todo funciona a la perfección. Bien, eso es lo de la Navegación. Pasemos a la siguiente conferencia. 16. Proyecto 2: crea y personaliza la sección de habilidades: Muy bien, así que ahora es el momento de crear nuestra siguiente sección, que va a ser una Sección de Habilidades Sigamos adelante e insertemos nuevos comentarios para la Sección de Habilidades. Después abra la sección, etiquete con un nombre de clase. Habilidades. En primer lugar, te voy a insertar un par de encabezamientos. El primero va a ser el encabezado de fondo de la Sección H1. Va a ir rumbo probablemente a la Sección. Mis habilidades. Después para instruirte a ti y a otros elementos del encabezado H1 Bueno, el título de la sección de nombre de clase. Vamos a insertar tus habilidades profesionales. Después de eso, voy a insertar el elemento h3 heading, que va a ser un subtítulo E incluirá etiqueta span. Con Habilidades. Después de eso, necesitamos la frontera de Sección, la frontera que tenemos en la primera sección. Y después de eso, voy a crear tarjetas. En general tendrá seis tarjetas diferentes. Abramos la etiqueta DIV con la tarjeta de habilidades de clase. Entonces tendremos aquí habilidad con elementos span, HTML, y el porcentaje del sesgo, 95% Entonces voy a instituir un párrafo con algún texto ficticio Y también necesitamos el progreso, que indicará el porcentaje de este cubo. Bien, así que eso es todo. Voy a duplicar código cinco veces porque en general va a tener seis tarjetas. Y luego voy a cambiar las tecnologías y también los valores porcentuales. El segundo va a ser CSS, 90%. Entonces tendremos JavaScript al 5%. El siguiente va a ser React JS 75%. Entonces el siguiente va a ser NodeJS, 85%. Y la última tecnología va a ser futura como un valor porcentual 75. Muy bien, entonces el marcado HTML para la sección Habilidades está listo y ahora es el momento de escribir algo Ante todo, respondamos a tus comentarios. Habilidades y habilidades. A continuación, seleccione Elemento de sección y ancho y alto definidos. El ancho va a ser del 100%. En cuanto a la altura va a ser de 100. Altura de la vista. Y también se definió la posición, Hazlo ruta. Muy bien, después de eso, voy a seleccionar Borde de sección con las habilidades, nombre de clase, establecer posición en absoluto Y luego para encontrar a la Suerte, la posición va a ser de 20 rampas. Entonces tendremos que posicionarlo presente. Y para centrar los elementos verticalmente, usemos Transformar Traducir Y -50 por ciento Entonces, como puedes ver, el borde está muy bien colocado. A continuación, voy a usar flexbox para este elemento de sección. Cambia la dirección, hazlo columna. Alinee los elementos en el centro. Así se puede ver que los elementos se colocan en el centro horizontalmente. A continuación, voy a seleccionar el encabezado de sección. Vamos a personalizarlo. Cambia el tamaño de fuente, hazlo seis RAM, entonces necesitamos font-weight, va a ser 300 También, transforma texto en mayúsculas. Después crea espacio entre la celosía, ponla para que apunte a carnero, cambia el color, hazla blanca, y también crea algo de espacio en la parte inferior Tres RAM. Entonces el rumbo se ve bien. Ahora es el momento de Personalizar el subtítulo. Cambiemos el tamaño de la fuente. Va a ser a RAM Entonces necesitamos color. Hagámoslo verde. 29587. También transforma texto en mayúsculas Entonces aquí tenemos estos, el relleno. Ahora, tenemos que seleccionar la etiqueta span, que se coloca en el subtítulo Vamos a cambiar la familia de fuentes. Va a ser una advertencia corrosiva. Entonces voy a cambiar el tamaño de la fuente. Vamos a configurarlo en 3.5 RAM. Luego transforma los impuestos para capitalizar en lugar de mayúsculas, y también cambiar el color Va a ser blanco. Bien, así que esto es, el acolchado, se ve muy bien Y ahora tenemos que seguir adelante y encargarnos de las tarjetas. Seleccionemos un envoltorio. Establezca el ancho en 140 RAM. Después sentarse margen dos, atrio en la parte superior, cero En el lado derecho, cero en el Boltzmann puede RAM en el lado izquierdo Entonces necesitamos flexionar y también flex wrap con el value wrap. Después de eso, voy a seleccionar la propia tarjeta. En primer lugar, definamos el ancho. Va a ser cuatro para RAM. Después defina la altura con el valor 18 RAM. Establezca el margen en tres, corra en los cuatro lados. Entonces necesitamos un poco de relleno con los valores 0.3 RAM y también cambiar el color de fondo. Ccc por un tiempo. Entonces aquí tenemos las seis tarjetas colocadas muy bien. A continuación, voy a seleccionar habilidad, ponerla a flex. También, necesitamos justificar el espacio de contenido entre para crear algún espacio. Además, voy a crear algo de espacio en la parte inferior usando margen inferior para embestir. A continuación, voy a seleccionar etiquetas span, establecer el tamaño de fuente en, para ejecutar. Cambia el color, hazlo E, y luego deshazte de estos colores de fondo temporales. Así es que se puede ver la tecnología y el porcentaje se ve bien. A continuación voy a seleccionar elementos span, que es el segundo. Cambiemos el color, hagámoslo verde. Entonces ahora tenemos mejores resultados. Después de eso, voy a encargarme del párrafo. Cambiemos font-family. Va a ser una advertencia coercitiva. A continuación voy a cambiar el tamaño de la fuente. Vamos a configurarlo a, a carnero. Cambia de color, hazlo BBB. También cambiar margen en la parte inferior, lo siento, dos para RAM. Entonces el párrafo se ve muy bien. Ahora, tenemos que encargarnos de la barra de progreso. Vamos a configurar con 2.5 RAM. La altura va a ser 2.5 RAM lo que necesitamos color de fondo para ser 122228 Entonces necesitamos punto fronterizo para carnero sólido. El color va a ser BBB. Y también, voy a hacer elementos redondeados usando border-radius 50 por ciento y también establecer posición en absoluto En realidad, necesitamos una posición relativa para el padre que va a estar en Habilidades Atrapadas. A continuación, necesitamos que la posición inferior sea -1.25 RAM. Entonces aquí tenemos los círculos, y ahora necesitamos crear las líneas. Entonces copiemos el nombre de la clase y utilicemos. Antes del pseudo elemento, establezca el contenido en vacío. Entonces necesitamos la altura para estar apuntando a la RAM. Luego cambia el color de fondo. Usa el color verde. Posición a absoluta. Entonces necesitamos una posición dura para estar al 50 por ciento. Para el Diseño Central, Usemos Transformar Traducir Y -50 por ciento Muy bien, después de eso, Seleccionemos la tarjeta de Habilidades, nth-child uno, seguido de las Habilidades llamadas progreso, necesitamos borrar la posición para ser Para el primer elemento. Duplicemos este código y seleccionemos antes del pseudo elemento la posición correcta Va a ser 2.5 RAM. Y también el ancho, va a ser el 30. Hacemos rampa. Entonces aquí tenemos la línea. Vamos a copiar este código. Y ahora usa después de pseudo elementos. El color va a ser 777. Además, voy a duplicar este código aquí. Cambiar antes a después. Entonces, el ancho va a ser RAM completa. En cuanto a la posición correcta, necesitamos aquí -4.3 RAM Bien, entonces ahora tenemos líneas. Duplicemos este código. Cambiar los números que necesitamos aquí para. La posición correcta va a ser del 50 por ciento que el ancho va a ser 31.5 RAM En cuanto a la posición correcta, aquí, necesitamos -6.1 RAM y el ancho va a ser 5.8 Bien, entonces la segunda tarjeta está lista. Duplicemos este código. Cambiar los números. Necesitamos aquí. Tres. La posición correcta va a ser del 20 por ciento. Entonces voy a cambiar el ancho. Va a ser 29.8 RAM. Lo siento, cinco RAM. Además, voy a cambiar la posición correcta aquí, ocho puntos a RAM. Y también el ancho va a ser 7.9 rampa. Bien, entonces ya están listos los tres primeros acordes. Ahora vamos a duplicar este código. Cambiar los números. Va a ser para la posición correcta, solo va a ser el 30%. Entonces voy a cambiar el ancho. Va a ser 25.5 RAM. Y también necesitamos aquí posición Y para estar 12 punto a rampa. En cuanto al ancho va a ser 12 redondos. Bien. A continuación, voy a copiar la tercera tarjeta porque necesitamos algunos valores similares. Cambiemos el número va a ser cinco. Entonces veamos que el progreso está listo. Entonces voy a copiar la cuarta tarjeta. Cambia los números, hazlo seis. Entonces ahora todo está listo. Hemos terminado de trabajar en la sección de Habilidades. Pasemos al siguiente. 17. Proyecto 2: crea la sección de proyectos: Bien, así que una vez que hayamos terminado con la sección de Habilidades, ahora suena, sigue adelante y empieza a trabajar en la siguiente sección, que va a ser una sección de proyecto Así que vamos a insertar aquí tus comentarios para la sección de proyectos. Entonces voy a abrir etiqueta de sección con un nombre de clase, Proyectos. Sigamos adelante y copiemos este código de aquí porque necesitamos aquí elementos de encabezado similares. Sigamos adelante y cambiemos aquí mis proyectos. Entonces necesitamos aquí cartera. Y también cambiarte este elemento. Entonces proyecta. ¿Correcto? A continuación, voy a abrir la etiqueta DIV para las tarjetas de proyecto de clase. Entonces necesitamos la tarjeta en sí. Incluirá una imagen de proyecto de elemento Div. Vamos a abrir la etiqueta de imagen. Después selecciona la imagen de la carpeta de imágenes que necesitamos aquí proyecto uno, PNG. También voy a insertar aquí y otra etiqueta DIV con los textos de clase. En su lugar usa Pontiac, va a ser HTML. Entonces necesitamos otra etiqueta span, CSS. Y el tercero va a ser JavaScript. Siguiente Voy a usar la etiqueta de encabezado H3 con un nombre de proyecto de clase En este caso, tendremos contacto para el encabezado será seguido por el párrafo con un nombre de clase descripción del proyecto, tarea. Vamos a introducir algún texto ficticio. Y después de eso, necesitamos un botón. El tipo va a ser botón. También necesitamos aquí un nombre de clase, proyecto, BTN. Vamos a insertar aquí. Ver proyecto. Entonces necesitamos un icono Font Awesome para la flecha. F agudo, F, una flecha sólida. ¿Correcto? Bien, así que eso es todo sobre la tarjeta. Vamos a duplicarlo cinco veces porque en general tendremos seis tarjetas de proyecto diferentes. Sigamos adelante y cambiemos los detalles que necesitamos para proyectar a PNG. Después cambia el rumbo. Va a ser calculadora. El siguiente proyecto va a ser el proyecto tres. Entonces tendremos proyecto cuatro. El encabezado va a ser Sitio web. A continuación tendremos proyecto cinco. El nombre va a ser Menú. Para la última tarjeta, tendremos proyecto seis. Y el rubro va a ser tarjeta de perfil. ¿Correcto? Eso es lo de las tarjetas. El último elemento que necesitamos aquí va a estar abajo con un botón tipo. También necesitamos aquí un nombre de clase. Va a ser BTN Y vamos a insertar tu vista más. Por último, voy a insertar su elemento DV, la clase Sección. Bien, entonces aquí tenemos nuestros elementos. Ahora mismo esta sección se ve fea. Así que sigamos adelante y nos ocupemos de eso. Voy a empezar a escribir algunos CSS necesitamos aquí nuevos comentarios para proyectos. Después voy a seleccionar la imagen del proyecto. Vamos a poner con rampa 236. La altura va a ser de 20 RAM. A continuación tenemos que seleccionar la imagen en sí. Empecemos con el 200 por ciento. Entonces la altura va a ser del 100%. Ahora, las imágenes se hicieron más pequeñas, y ahora tenemos mucho mejor resultado. Seleccionemos los elementos Section. Definir ancho. Va a ser al 100%. Entonces la altura también va a ser del 100%. A continuación, voy a establecer posición a relativa. También necesitamos aquí un flujo de libros. Vamos a cambiar la dirección va a ser columna. Y también, necesitamos alinear elementos en el centro usando alinear elementos en el centro. Las tarjetas se colocan en el centro. También tenemos aquí frontera y el encabezamiento de fondo de la Sección. Bien, Siguiente, sigamos adelante y seleccionemos Borde de sección. Vamos a establecer la altura a 140 RAM. Cambio. La posición va a ser absoluta. La primera posición va a ser del 50%. La posición correcta será de 15 rampas. Y también necesitamos centrar la frontera usando Transformar Traducir Y con el valor -50 por ciento Además, voy a usar el margen cero. Entonces veamos que tenemos aquí Borde de sección que se coloca en el lado derecho de esta sección. Sigamos adelante y seleccionemos la tarjeta de proyecto. Establezca su ancho en cuatro para carnero. La altura va a ser 55 RAM de lo que necesitamos para cambiar el color de fondo. Ves 1222 a ocho. Entonces voy a seleccionar tarjetas de proyecto. El rápido desarrollo estableció el ancho a 140 rampa. Entonces necesitamos aquí libros flex. Luego use justify-content center para enviar a los elementos Y también necesitamos envolver los artículos flex y crear margen en la parte superior. Además, necesitamos algo de espacio en la parte inferior usando padding-bottom puede correr Bien, así que las tarjetas se colocan muy bien en el centro de la sección A continuación, necesitamos crear algo de espacio entre las cartas. Usar margen y establecerlo en, para ejecutar. Además, necesitamos relleno a RAM. Entonces voy a usar border-radius. ¿El valor uno utilizará la RAM flexbox? Necesitamos aquí para cambiar la dirección. Va a ser columna. Y también voy a utilizar justificar el espacio de contenido entre. Bien, así como pueden ver, el encabezado de fondo cubre la tarjeta Así que arreglemos ese problema usando la propiedad index. Pongámoslo a 100. Entonces ahora el problema está arreglado. A continuación, voy a encargarme de las imágenes que necesitamos pies de objeto para estar tapados. Y también, usemos border-radius con RAM de valor uno. Cambia el cursor, hazlo señalar. Bien, entonces los autos se ven mejor. Sigamos adelante y nos ocupemos del efecto hover. Una vez que pasemos el cursor sobre las imágenes, deberían ensancharse. Entonces usemos Transformar Escala 1.3 y luego usar la transición para un efecto suave. Entonces se puede ver que tenemos aquí un efecto hover, pero necesitamos arreglar un problema Las imágenes se superponen. Los carros, por lo que necesitamos rebosar de valor oculto. Bien, entonces ahora tenemos mucho mejor efecto. Vamos a usar aquí border-radius con un valor uno RAM. Entonces ahora el efecto hover se ve aún mejor. Después de eso, voy a encargarme de los textos. Quiero decir, es tecnologías. Cambiemos el tamaño de la fuente. Va a ser 1.6 RAM. Entonces necesitamos font-weight para ser 300. También transforma texto en mayúsculas. Cambia el color, hazlo verde. Entonces aquí tenemos las tecnologías. Vamos a crear algo de espacio. Que sea 0.1 renta, ¿verdad? A continuación, voy a seleccionar envoltorio de textos. Vamos a establecer margen top dos menos tres RAM. Con el fin de colocar los elementos span hacia arriba. Siguiente Voy a seleccionar el nombre del proyecto. Cambiemos el tamaño de la fuente. Van a ser tres. Rampa. Cambiar el peso de la fuente, hacer 300, y cambiar el color. Necesitamos aquí un color blanco. A continuación necesitamos margen superior para ser menos dos RAM. Tenemos que subir el nombre. Siguiente. Voy a seleccionar la descripción del proyecto. Vamos a cambiar la familia de fuentes. Va a ser una advertencia. Cursiva. También cambia el tamaño de fuente, haz que apunte a rampa. Cambia el color que voy a usar aquí, C, C, C. Entonces la descripción se ve bien. A continuación, voy a encargarme del botón. Me refiero al proyecto BTN configurado con 220 RAM que la altura va a ser RAM completa Cambia el color de fondo, va a ser transparente. A continuación, necesitamos font-size para ser 1.8 RAM. Alineemos el texto al lado izquierdo. Cambia el color, hazlo blanco. Y además necesitas border para que no quede ninguno para el curso, así que va a ser puntero cero. ¿Bien? A continuación, voy a seleccionar Fuente, Icono impresionante. Me refiero a la flecha. Cambiemos el color, hagámoslo verde. Y también necesitamos margen en el lado izquierdo. Vamos a agregarlo a una fila. ¿Bien? Entonces el botón se ve bien. Vamos a crear poco efecto hover. Selecciona iones al pasar el cursor y cambia el margen izquierdo. Vamos a configurarlo a, a RAM y también usar la transición para un efecto más suave. Margen a la izquierda con iteración 0.3 s. bien, así que ahora tenemos aquí bonito pequeño efecto A continuación, voy a seleccionar botón, que se coloca en la parte inferior. Vamos a establecer el margen a cinco cuadros en la parte superior y ceros en el resto de los lados Entonces ahora todo se ve bien. Y con esta sección, ya terminamos. Sigamos adelante. 18. Proyecto 2: crea y da estilo a la sección de contacto: Muy bien, así que una vez que hayamos terminado con la sección de Habilidades, ahora es el momento de seguir adelante y comenzar a crear nuestra siguiente sección, que va a ser una Sección de Contacto Sigamos adelante e insertemos nuevos comentarios para la Sección de Contacto. Entonces voy a abrir Sección, consultar con el nombre de la clase. Contacto. A continuación, voy a agarrar algunos encabezamientos de la sección anterior porque vamos a tener aquí unos elementos de encabezado similares Así que vamos a pegar esos elementos aquí. Además, necesitamos cambiar los valores del texto. Necesitamos contactarme. Entonces el siguiente encabezamiento van a ser los contactos. Entonces tendremos, vamos a tener algún par que reemplazará el interior de este elemento span. ¿Correcto? Después de eso, voy a abrir el chat, la clase Sección frontera. Tendremos la misma frontera en esta sección también. Después del borde de la Sección, voy a abrir la etiqueta DIV con la clase Contact Content, en la que voy a insertar otro desarrollo Contacto left. En el lado izquierdo tendremos dirección. Pongamos aquí Icono de Font Awesome, que será un sólido si una ubicación puntea. A continuación voy a insertar aquí etiqueta DIV con el nombre de la clase Contact Info, en la que tendremos elementos span, address, seguido de otro, span, New York, USA. A continuación voy a insertar tu y otros elementos profundos con el nombre de la clase freelance, en el que voy a poner icono Font Awesome con las clases fa, usuario habitual. Entonces necesitamos oscuridad profunda con la clase Contact Info, en la que voy a poner dos elementos span como el caso anterior. Necesitamos aquí. Freelance. En cuanto al segundo elemento span, va a estar disponible ahora mismo. Bien, sigamos adelante y copiemos este código dos veces y cambiemos el nombre de la clase Va a ser correo electrónico. A continuación tenemos que cambiar el nombre de la clase para el icono Font Awesome va a ser sobre. También cambia los elementos span, correo electrónico y algunos correos electrónicos tontos John Smith en sign, web tab.com. Bien, Siguiente, voy a poner tu teléfono. También cambia la Fuente. Icono impresionante va a ser un teléfono fa sólido por fases Después cambia los elementos span, tendrás tu teléfono. Y voy a poner aquí algún número de teléfono ficticio, números 1-9 Bien, después de eso, voy a abrir otro desarrollo que va a ser el lado correcto. Vamos a abrir la etiqueta de formulario. Deshacerse del atributo action. En el elemento form, voy a insertar la etiqueta DIV con los grupos de entrada de clase. Entonces tendremos grupo de entrada. Vamos a abrir elemento etiqueta. Voy a poner aquí tu nombre completo y el icono Font Awesome, que será fa sólido. Un asterisco. A continuación, voy a insertar aquí la etiqueta de entrada con un texto tipo. Bien, sigamos adelante y dupliquemos el grupo de entrada. Cambiar el atributo for. Se va a enviar por correo electrónico. Además, necesitamos aquí su dirección de correo electrónico. Cambiar el tipo. A continuación, voy a copiar este código. Cambiar el atributo for, va a ser sujeto. También cambia tu texto, tu Asunto y necesitamos que escribas de la a a la B para que te graven. Bien, vamos a insertar aquí de nuevo, input-group. Cambia la etiqueta, se va a enviar un mensaje. Cambiar tu texto va a ser tu mensaje. En lugar de la etiqueta de entrada, voy a usar aquí área de texto. Después de eso, voy a abrir elementos de botón. El tipo va a ser botón. También tendremos tu clase Contactar BTN. Y vamos a insertar aquí enviar mensaje. Bien, así que sentémonos sobre el marcado HTML. Todos los elementos están creados y ahora tenemos que escribir algunos CSS. Sigamos adelante e insertemos nuevos comentarios para la Sección de Contacto. En primer lugar, voy a seleccionar elementos de Sección. Vamos a establecer con el 200 por ciento. Entonces la altura va a ser cien de altura de ventana, y la posición va a ser relativa A continuación, voy a usar Flexbox. Cambiemos la dirección. Va a ser columna. Y también voy a alinear elementos en el centro. Así que aquí se puede ver que los artículos se colocan en el centro. A continuación voy a seleccionar Borde de sección. Vamos a definir esta posición es absoluta. Establezca la posición de las piernas en 20 RAM. Esa es probablemente una posición dura, va a ser del 30%. Entonces como pueden ver, esta Sección, embotellador se coloca en el lado izquierdo de esta acción A continuación, voy a seleccionar Contact Content. Voy a definir el ancho. Va a ser 120 RAM de lo que la posición va a ser absoluta. La posición va a ser del 50%. Posición izquierda, 50 por ciento también. Y luego para un centrado perfecto, voy a usar transform translate -50% y otra vez -50 A continuación, voy a establecer margen superior a siete rampa. Después de eso, voy a usar flexbox. Eso es justificar el espacio de contenido entre. Y luego usa align items. Centro. Bien, entonces como puedes ver, ambos lados están muy bien colocados. Estoy en lados izquierdo y derecho. A continuación te voy a sacar del lado izquierdo. Seleccione el elemento profundo en la izquierda Contacto. Configura la pantalla para flexionar. Luego use alinear elementos, centrar. Y necesitamos margen. Va a ser tres rampa y cero. ¿Bien? Después de eso, voy a seleccionar iconos Font Awesome en el lado izquierdo, vamos a establecer con 25 RAM. Entonces la altura va a ser de cinco cuadros también. A continuación, voy a cambiar el color de fondo. Va a ser un D22 que establecer borde a punto para rampa sólida El color va a ser BBB. Entonces aquí tenemos los íconos. A continuación, voy a hacer esas cajas redondeadas usando radio fronterizo 50 por ciento Y además voy a colocar los artículos en el centro están usando flexbox Necesitamos justificar-centro de contenido y alinear el centro de artículos. Así es que se puede ver que los iconos se colocan perfectamente en el centro. A continuación, voy a aumentar el tamaño de la fuente. Va a ser a rampa. Entonces voy a cambiar el color. Va a ser E. También crea algo de espacio en el lado derecho, va a ser nueve RAM. Así que ahora es se pueden ver los íconos. Luce bien. Sigamos adelante y seleccionemos icono, seguido del pseudo elemento after El continente va a estar vacío. Entonces tendremos ancho. Para RAM. La altura va a ser punto a rampa. Estamos creando líneas melódicas. A continuación tendremos color de fondo, BBB, y la posición va a ser absoluta Además, necesitamos aquí la posición para ser relativa para el elemento padre. Después de eso, definamos la posición superior va a ser del 50 por ciento. Y también necesitamos centrar la línea usando Transformar, Traducir Y con el valor -50 por ciento También vamos a definir la posición correcta va a ser menos 4M. Se puede ver que tenemos aquí Líneas en el lado derecho de los iconos. A continuación, sigamos adelante y seleccionemos Información de contacto establecida con 220 RAM. Entonces necesitamos usar flexbox. Cambiar direcciones va a ser columna. Nosotros tenemos aquí. El texto info está alineado en el centro. A continuación, voy a seleccionar elementos span. Cambiar el ancho. Va a ser cien por ciento. Después de eso, voy a seleccionar los primeros elementos span usando selector secundario F que se especifica aquí. Uno, cambiar la familia de fuentes. Va a ser por supuesto de advertencia. Entonces tenemos que aumentar el tamaño de la fuente. Vamos a configurarlo en tres RAM. Cambiar el peso de la fuente. Voy a ponerla en negrita. El color va a ser blanco. Y también voy a crear algún fondo de especialidad usando margin bottom 0.5 RAM para que puedas ver el nombre del elemento span en el primer elemento. Se ve bien. Sigamos adelante y seleccionemos el segundo. Cambia aquí, el número, va a ser dos. En este caso, el tamaño de fuente va a ser 1.6 RAM. El peso de la fuente va a ser de 300. En cuanto al color, voy a hacerlo 777. Así que ahora ambos elementos span se ven bastante bien. Sigamos adelante y seleccionemos el lado derecho. Estoy en el contrato ¿verdad? Establezca el ancho en 60 RAM. La altura también va a ser 60 RAM. Luego use nuevamente Flexbox, seguido de justify-content center y align items center y Bien. Después de eso, sigamos adelante y seleccionemos grupos de entrada. Utilice de nuevo display flex. A continuación voy a seleccionar el grupo de entrada en sí. Nuevamente, display flex. Cambia la dirección, hazlo columna. Entonces paso a paso, los elementos de entrada. Cada vez más agradable. A continuación, necesitamos etiqueta de grupo de entrada. Cambiar el tamaño de fuente. Va a ser 1.6 RAM de lo que necesitamos font-weight 300. Y también crear algo de espacio entre las letras. Usa eso solo basando. A continuación, necesitamos transformar el texto en mayúsculas y también cambiar el color, hacerlo blanco Después de eso, pongamos margen a 001.5 rampa y a rampa. Así es que se puede ver la etiqueta. Luce bien. A continuación necesitamos entrada, grupo, etiqueta I elemento. Estoy en el icono Font Awesome, el asterisco. Vamos a establecer el tamaño de fuente un punto para rampa y cambiar el color. Usa el color verde. ¿Correcto? Después de eso, voy a seleccionar entrada de grupo de entrada, seguido del área de texto seguido del área de Necesitamos algunas teselas CSS similares, digamos hola a seis RAM. También necesitamos margen para ser 03, rampa, cinco REM, y cero. Dan, voy a cambiar el color de fondo. Va a ser uno debido a un borde establecido para apuntar a carneros sólidos y 777 Entonces ahora las entradas se ven bien. A continuación, necesitamos border-radius fin de hacer las esquinas redondeadas, configurarlo a tres rampa cambiar tamaño de fuente va a ser 1.6 R& que el peso de la fuente será 300 y cambiar el color, hacerlo blanco A continuación, necesitamos algo de espacio dentro de las entradas. Establezca el relleno en una rampa o una rampa, luego nuevamente una RAM y para leer mandu lado izquierdo Después de eso, voy a seleccionar la entrada misma establecer ancho a 35 RAM. Y después voy a seleccionar área de texto. Voy a cambiar su altura. Hagámoslo 12 rampa también necesitamos aquí margen inferior a RAM. Y voy a desactivar la función de cambio de tamaño. Vamos a establecer el redimensionamiento a ninguno. Bien, así que finalmente, voy a Personalizar el botón en la parte inferior. Así que vamos a seleccionarlo. Establezca el ancho en calc 100% menos tres RAM que la altura va a ser de cinco rampas Volvamos a cambiar de color, usar color verde. Además, necesitamos puntos de borde a carneros sólidos y el color va a ser Bb B. A continuación, necesitamos hacer las esquinas redondeadas usando border-radius El valor va a ser tres RAM. Cambia el color, hazlo blanco. Y también necesitamos aquí transformar el texto a mayúsculas. A continuación, cambiemos el tamaño de la fuente. Va a ser 1.6 RAM. Y también necesitamos aquí font-weight para ser 300. Crea algo de espacio usando el punto de espaciado de letras para rampa, y necesitamos cambiar el cursor. Hagámoslo señalar. Bien, así que digamos que Sección de Contacto se ve bastante bien Pasemos a la siguiente sección. 19. Proyecto 2: crea y personaliza el pie de página del sitio web: Bien, entonces después de la Sección de Contacto, ahora hay que seguir adelante y comenzar a crear la última parte del Sitio Web, que va a ser un Pie El pie de página va a ser sencillo. Sigamos adelante e insertemos ver los comentarios. Entonces voy a abrir un Footer, meter la clase Pie de página. Vamos a insertarte. Realiza un seguimiento con los íconos de clase. Voy a agarrar esos íconos de las redes sociales desde aquí. Sigamos adelante y pegarlos dentro de los íconos. Voy a abrir TikTok will class copyright. Vamos a párrafo inseguro con textos de derechos de autor. Necesitamos aquí un signo de copyright, que es la entidad HTML5. Después le seguirá la web de texto. Y entonces necesitamos span tag con el valor sordo. Además, te voy a pasar todos los derechos reservados. 2023. A continuación, vamos a abrir datos con el orden de clase N lugar aquí, Párrafo hecho por elementos span y código y Crear. Bien, Así que eso es todo sobre el marcado HTML para el Pie de Página. Sigamos adelante y comencemos a escribir algo de CSS. Insertar aquí, Pie de página y un pie de página. Estoy en los comentarios. Después voy a seleccionar Pie de página. Vamos a establecer con el 200 por ciento. La altura va a ser diez rampas. Entonces voy a poner boulder en la parte superior con valores 0.1 corrió sólido y el color va a ser 444 Además, voy a usar display flex Con justificar el espacio de contenido de manera uniforme. Y también voy a usar align items center con el fin de centrar los elementos flex. Bien, después de eso, sigamos adelante y seleccionemos íconos, seguidos de la isla. Aquí necesitamos tamaño de fuente para ser, para bajar el color va a ser blanco. Entonces voy a usar margen, ¿verdad? Correr. Y luego algún efecto de sombra usando sombra de texto, 0.5 gram 1 gand Si el color voy a usar RGBA, color negro con menor opacidad Y también cambiar de rumbo lo hará señalar. Bien, así que eso es todo sobre los íconos de las redes sociales. A continuación, voy a encargarme del texto de copyright. Y también voy a seleccionar autor. Establezca el tamaño de fuente en 1.6 RAM. Cambiar de color, blanco. Para que veas que el texto se volvió blanco y más grande. Usemos los derechos de autor, span. Establecer la familia de fuentes en caveat cursive. Entonces voy a establecer el tamaño de fuente en 2.5. Rima. Cambia font-weight, va a ser audaz, y también cambia el color Voy a usar el color verde. A continuación, establezca el margen derecho a una rampa. Bien, entonces tenemos aquí un logo. Sigamos adelante y seleccionemos el lapso de autor. En realidad, voy a copiar este código de aquí. Así que vamos, el pie de página se ve muy bien y en realidad todas las secciones están terminadas. Entonces como pueden ver, tenemos aquí un pequeño problema. La navegación se muestra detrás del carrito. Así que arreglemos ese problema usando el índice 150. Bien, así que eso es todo. Todo se ve a la perfección. Lo único que he tenido que hacer es hacer el proyecto sea receptivo a diferentes tamaños de pantalla. Entonces, sigamos adelante. 20. Proyecto 2: convierte el proyecto en receptivo: Muy bien, así que hemos terminado de crear y personalizar nuestras secciones del proyecto, y ahora tenemos que hacerlo receptivo a diferentes tamaños de pantalla Sigamos adelante e inspeccionemos la página y cambiemos al modo responsive. Tenemos que encontrar nuestro primer punto de quiebre en el que tenemos que hacer algunos cambios. Entonces creo que el primer punto de interrupción, va a ser de mil 700 píxeles Sigamos adelante e insertemos nuevos comentarios para el modo responsive. Y luego usar CSS media query. Voy a especificar aquí max-width como 1,700 pixeles. Entonces lo primero que tienen que hacer es cambiar el tamaño de fuente del elemento HTML. Hagámoslo 57%. Entonces los elementos se volvieron relativamente más pequeños. A continuación, voy a seleccionar Navegación y cambiar la posición correcta. Va a ser menos siete para RAM. Además, voy a seleccionar Borde de sección para la sección Habilidades. Cambiemos la posición de longitud, que sea diez RAM. Después voy a seleccionar Contacto Borde de Sección. Cambiemos la posición de la izquierda, que sea diez corrió. Así que vamos a revisar el proyecto. En realidad, necesitamos adherir S porque el código no funcionó. Bien, entonces a continuación, tenemos que encontrar otro punto de interrupción Y creo que debería ser de 1,500 pixeles. Así que vamos a seguir adelante y crear nueva consulta de medios CSS y especificar aquí el max-width, que va a ser de 1,500 De nuevo, voy a cambiar el tamaño de fuente del elemento HTML. Vamos a establecerlo en 52%. A continuación, voy a Personalizar el nombre. Vamos a cambiar el tamaño de fuente, que sea siete RAM. También cambiar el ancho, va a ser para correr. Bien, a continuación, voy a seleccionar Acerca de y cambiar el ancho. Hagámoslo 45 RAM. Después de eso, voy a seleccionar envoltorio de imagen de desarrollador. Vamos a establecer el ancho a 40 RAM. También defina la altura, hágalo 40 RAM también. A continuación, tenemos que encargarnos del trabajo de dapp. Cambiemos el ancho. Va a ser 20 renta por la altura, voy a hacer que sea siete RAM. Entonces el relleno va a ser 0.1 RAM en los lados izquierdo y derecho. A continuación, necesitamos cambiar las posiciones para su trabajo. Seleccione el elemento span. Nth-niño uno. Cambia el tamaño de fuente, hazlo a rampa. Y el ancho va a ser 35. Presente. Bien, entonces ahora voy a seleccionar la experiencia de tabulación y cambiar. La posición inferior va a ser 22 corridas para la posición correcta, voy a ponerla en 25 corridas. A continuación, voy a cuidar a los sordos. Proyectos. Cambio. La posición inferior va a ser 14 renta. Para la posición correcta, voy a hacerla menos cuatro rampa. Bien. A continuación, voy a encargarme del encabezamiento de fondo. Seleccionemos el encabezado de la Sección BG, cambiemos el tamaño de fuente. Va a ser 23 R&. A continuación, vamos a encargarnos de la sección de Habilidades. Voy a seleccionar habilidades y cambiar la estatura va a ser del cien por ciento. Además, vamos a establecer padding a diez RAM y cero, luego 20 RAM y cero Entonces voy a seleccionar tarjetas, wrapper, cambiar el ancho, hacer que se ejecuten 100. Bien, ahora las cartas se ven bastante bien. A continuación, seleccionemos Sección, borde para la sección Habilidades. Y voy a cambiar la altura. Va a ser a las cinco RAM. Ahora creo que la frontera se ve bastante bien. A continuación, sigamos adelante y nos ocupemos de la sección Proyecto. Seleccionemos tarjetas de proyecto. Me refiero al ancho del envoltorio establecido en 100 Ren. Entonces ahora todo se ve bien. Tenemos que encargarnos de la Sección de Contacto. Seleccionemos Content Content (Contenido de contacto) y establecemos el ancho en 110 RAM. Ok, así que todo se ve bien. Y pasemos al siguiente punto de quiebre. Entonces el siguiente punto de ruptura va a ser, creo, mil 200 píxeles Así que vamos a seguir adelante y crear una nueva consulta de medios CSS. Establezca el ancho máximo en 100, lo siento, 1,200 píxeles. Cambiar el tamaño de fuente del elemento HTML. Voy a fijarlo en 45%. A continuación, voy a encargarme de la acción Proyectos. Entonces, seleccionemos Proyectos seguidos del borde de la Sección. Cambio. La posición correcta va a ser diez RAM. Ahora se ve bien. A continuación tenemos que encargarnos de la Sección de Contacto. Seleccione Contenidos de contacto, establezca el ancho en rampa 100. También necesitamos cambiar, justificar el contenido. Hágalo espaciado de manera uniforme. Entonces tenemos que seleccionar Contacto, ¿verdad? Usemos margin-right, conviértanlo -15 RAM. Además, tenemos que personalizar los grupos de entrada. Vamos a cambiar la dirección, Hacer columna. Entonces. Necesitamos seleccionar grupos de entrada, seguidos de las entradas. Cambiar el ancho. Hagámoslo 60 Ran. Bien, entonces ahora Contacto Sección se ve bien. Y en realidad podemos seguir adelante y encontrar el siguiente punto de interrupción, que va a ser de 900 pixeles Así que vamos a seguir adelante y crear una nueva consulta de medios CSS. Configuración de ancho máximo a 900 píxeles. Necesitamos cambiar el tamaño de fuente del elemento HTML. Va a ser del 39 por ciento. Entonces voy a seleccionar Borde de sección y ocultarlo en absoluto para todas estas secciones. A continuación, voy a seleccionar Sección, encabezamiento de fondo. Cambiar el tamaño de fuente. Va a ser 20 R&. A continuación voy a encargarme de la Sección de Contacto. Así que vamos a seguir adelante y seleccionar Contact Content y cambiar el ancho va a ser cien rampa. Además, voy a seleccionar Contacto, ¿verdad? Vamos a establecer margen derecho, dos menos cinco RAM. Por lo que la Sección de Contacto se ve bien. Y en realidad, podemos seguir adelante y encontrar el siguiente punto de interrupción, que va a ser de 700 píxeles Así que vamos a Crear nueva consulta de medios de Caesars. Cambia max-width, va a ser de 700 pixeles. Seleccione HTML y cambie el tamaño de fuente. Ahora va a ser del 35%. A continuación, voy a seleccionar Sección fondo encabezado Y cambiar el tamaño de fuente. Vamos a configurarlo en 17 RAM. Después voy a seleccionar la imagen del desarrollador y ocultarla. Después de eso, sigamos adelante y seleccionemos tarjetas de habilidades. Me refiero al envoltorio configurado con 260 RAM. Entonces voy a duplicar este código, cambié habilidades a Proyectos. Y después de eso, tenemos que llevar aquí la Sección de Contacto. Así que sigamos adelante y seleccionemos Contacto a la izquierda y ocultarlo. Y también voy a seleccionar Contact Content y establecer su ancho en 70 Ran. Bien, entonces en el punto de ruptura, creo que ya terminamos Ahora es el momento de encontrar el último punto de ruptura. Sigamos adelante y creamos nueva consulta de medios CSS. Entonces voy a especificar el max-width como 500 pixeles. Tomemos aquí de la Navegación. Quiero extenderlo en la página. Entonces fijemos con el 200 por ciento y también cambiemos la posición correcta. Va a ser -100 de los grandes de lo que necesitamos justify-content center para poner los artículos en el Bien, Después de eso, voy a seleccionar Banner, establecer su ancho en 70%. Entonces necesitamos seleccionar encabezado de sección y usar text-align center para alinear los encabezados en el centro de las Lo siguiente que hay que hacer es encargarse de la Sección de Contacto. Así que sigamos adelante y seleccionemos Contact Content set with 255 ramp. También necesitamos seleccionar elemento de entrada. Establezca el ancho a 50. Corre. Bien, entonces creo que todo se ve bastante bien. Podemos agregar aquí una cosa más. Ya sabes, se ve tarjetas lindas y establece el ancho 55 RAM también. Después de eso, voy a seleccionar iconos del Pie de Página y hacerlos de altura. Bien, entonces creo que finalmente terminamos y todo se ve bastante bien. El proyecto es Responsive. Entonces creo que disfrutaste de este proyecto. Ahora podemos seguir adelante y empezar a crear la siguiente. 21. Proyecto 3: vista previa: Hola y bienvenidos a tu próximo proyecto, que va a ser un sitio web sobre arquitectura. El proyecto consta de un par de secciones diferentes. Entonces sigamos adelante y repasemos por cada uno de ellos. Empezaremos a crear el proyecto trabajando en los no pobres y en la Navegación. Tenemos aquí, el logo, la barra de búsqueda y un ícono del Menú Hamburguesa Si hago clic en él, entonces la Navegación y se mostrará muy bien. Si pongo el cursor sobre los elementos de navegación, entonces llegaremos aquí este bonito y genial efecto Después de la Navegación crearemos estos bonitos y sencillos Banner en que tenemos un par de elementos diferentes. El Banner es seguido por una sección Acerca que consta de dos partes. El lado izquierdo, tenemos algunos elementos de texto y el botón se llama el lado derecho. Consiste en un marco e imagen. Y además de eso, tenemos aquí una parte agradable y fresca en la parte inferior de la Sección. En realidad, esos elementos aparecerán en cada sección. A continuación tenemos la sección Proyecto, que incluye cinco cartas con algunos buenos efectos sobre. Después de eso constituimos la Sección de Clientes, que consta de dos tarjetas diferentes a las que teníamos una Sección de Contacto y un Pie de Página simple abajo. El proyecto responde a diferentes tamaños de pantalla. Si inspecciono la página, luego cambiar al modo responsive y verificar el proyecto cuatro tamaños de pantalla diferentes. Encontrarás que el proyecto es Responsive y se ve bien en promedio, diferente tamaño de pantalla. Nuevamente, son los proyectos que se crean para un tamaño de pantalla extra grande. Estoy dentro. Esto coincide con 1920 píxeles de ancho y 1080 píxeles de alto Entonces, si estás usando un tamaño de pantalla relativamente más pequeño, entonces durante las conferencias, debes cambiar al modo de respuesta y especificar el ancho y la altura así. De lo contrario, el proyecto no se verá bien en tamaño de pantalla pequeña hasta que lo hagamos receptivo. Entonces, por favor, tómalo en cuenta. Bien, así que eso es todo sobre nuestro tercer proyecto. Sigamos adelante y empecemos a trabajar en ello 22. Proyecto 3: crea y da estilo a la navegación - Parte 1: Bien, así que sigamos adelante y comencemos a crear un nuevo proyecto Tengo una carpeta aquí. Sigamos adelante y ábralo en VS Code. Y luego necesitamos crear o trabajar archivos para HTML, CSS y JavaScript. Necesitamos index.html, luego style.css. Y el siguiente va a ser script.js. A continuación, abra el archivo index.html y cree un documento HTML básico. En primer lugar, voy a cambiar el título, va a ser arquitectura. Entonces necesitamos enlazar o archivos. El primero va a ser el archivo CSS. Y luego voy a abrir la etiqueta script y especificar en el atributo source la ruta del archivo JavaScript. Vamos a abrir el proyecto al navegador y luego colocar el editor y el navegador uno al lado del otro. Así. Bien, voy a agarrar un par de enlaces diferentes. El primero va a ser Font Awesome CDN, porque vamos a usar algunos iconos Font Awesome a lo largo del proyecto Vamos a copiar el enlace. Entonces voy a abrir la etiqueta de enlace en el elemento head y pegar aquí la CDN Siguiente Voy a visitar el sitio web de Google Fonts porque vamos a usar algunas fuentes de Google. Sigamos adelante y busquemos fuente llamada Able. Voy a seleccionar este azulejo. El siguiente va a ser nuestro primer laboratorio. Seleccionemos el Estilo. Entonces voy a copiar el enlace y pegarlo en la cabeza. Bien, entonces estamos listos para comenzar a escribir el código. En primer lugar, voy a crear el marcado HTML. Vamos a insertar tus comentarios para contenedor. Después voy a abrir la etiqueta DIV con el contenedor de nombre de clase, en el que voy a insertar comentarios para la barra de navegación Después abre el elemento de navegación HTML5 con el nombre de la clase navbar, en el que voy a insertar una etiqueta DIV con clases marca, marca Ahora cuatro. Entonces voy a abrir y otra etiqueta DIV con el logo de la clase. Uno. Cambiemos aquí los nombres de las clases. Necesitamos un logo y un logo tres. A continuación necesitamos aquí span elementos en los que voy a insertar la arquitectura de texto. Bien, así que eso es todo sobre el logo. A continuación, necesitamos crear una barra de búsqueda. Vamos a insertar aquí elementos de entrada con un texto tipo y con un atributo de marcador ¿Qué estás buscando? Y también necesitamos aquí un icono Font Awesome, que será icono de búsqueda. Necesitamos clases, fa sólida, fa, lupa. Bien, Así que eso es todo sobre la primera parte de la Navegación. Ahora necesitamos crear un Menú de Hamburguesas. Insertemos aquí Icono de menú, que tendremos tres líneas, línea uno, la línea dos y la capa tres. A continuación necesitamos la etiqueta DIV, que será una Navegación. Voy a insertar aquí un par de enlaces diferentes. El primero va a estar en casa. Entonces vamos a tener sobre el siguiente va a ser proyectos. Entonces tendremos Blog. El siguiente será Clientes Y para el último artículo, voy a poner aquí Contacto. Bien, así que en realidad vamos a sentarnos sobre el marcado HTML. Ahora, voy a empezar a escribir algo de CSS. En primer lugar, vamos a Instituto comentarios para los estilos predeterminados. A continuación, voy a seleccionar cada elemento usando un asterisco Y voy a poner margen y relleno a ambos a cero. Entonces tenemos que establecer box-sizing border-box. Además, voy a cambiar la familia de fuentes. Vamos a usar aquí capaz. Sans-serif. También. Voy a deshacerme de la decoración textual No será ninguno. Y también voy a poner bosquejo a ninguno también. Entonces los estilos predeterminados se aplican a los elementos. A continuación, voy a cambiar el tamaño de fuente del elemento HTML. Va a ser 62.5 por ciento porque vamos a usar RAM como unidad de medida Bien, sigamos adelante y comencemos a personalizar el contenedor. Inserta aquí los comentarios, luego selecciona contenedor. En primer lugar, voy a establecer el ancho. Va a ser al 100%. En cuanto a la altura, voy a hacerla 100 de altura de viewport A continuación, cambiemos el color de fondo. Va a ser el 202020. Es como el color gris oscuro. Entonces voy a colocar tus comentarios para la barra de navegación. Sigamos adelante y fijemos el ancho al 100%. En cuanto a la altura que va a ser. Puede RAM. Además, voy a cambiar el color de fondo. Vamos a usar aquí el mismo color que usamos para el contenedor. Entonces voy a definir la posición se va a arreglar. La posición superior será cero. La posición de rezago también será cero. Y después de eso, voy a seleccionar Logo uno. Vamos a establecer con 26 RAM que la altura va a ser seis RAM también. Vamos a establecer borde 2.4 RAM, sólido. Y el color va a ser el be H1B, Es como, y el color amarillo Duplicemos este código y cambiemos el nombre de la clase. Necesitamos tu logo dos, cambiemos ancho y alto. Voy a ponerlos a cinco RAM. Se deshace del borde y cambia el color de fondo. Usa aquí, color gris oscuro. Bien, así que ahora mismo el logo dos no es visible porque tenemos aquí el mismo color Fijemos la posición a absoluta. En realidad, voy a seleccionar marcas y establecer posición en absoluto también. Entonces necesitamos posicionarnos para ser del 50%. La posición de suerte va a ser un tranvía. Y también necesitamos centrar los elementos usando Transform Translate Y -50 por ciento. Bien. Volvamos al logo para establecer la posición en una RAM que la posición izquierda va a ser una RAM también. Entonces ahora el elemento es visible. A continuación voy a seleccionar Logo tres. La tercera parte del logo. Vamos a establecer el ancho a cinco RAM de lo que la altura será cinco para M también. Cambiar la frontera. Va a ser punto cero para RAM, sólido con un color amarillo. A continuación voy a cambiar el color de fondo. Va a ser gris oscuro. Y ahora tenemos que encargarnos del puesto. Va a ser absoluto. La posición superior será el de ariete. Esa posición será para embestir también. Entonces ahora el logo se ve mejor. Vamos a configurar aquí display flex. Después voy a seleccionar elemento span y la marca. Cambiemos el tamaño de la fuente. Va a ser tres carnero. A continuación voy a cambiar el color. Vamos a ponerla en blanco. También, necesitamos algo de espacio entre las letras. Vamos a ponerla en rampa 0.3. Entonces tenemos aquí este elemento pan. A continuación, voy a crear algo de espacio, digamos margen a 1.5 en rampas y 00.3 RAM en el lado izquierdo Después de eso, voy a seleccionar la barra de búsqueda. Fijemos la posición a absoluta. Entonces necesitamos posicionarnos para ser del 50%. La posición correcta va a ser 15 RAM. Y también necesitamos centrar el elemento verticalmente usando Transform Translate Y -50 por ciento Bien, entonces la barra de búsqueda está alineada en el lado derecho de la barra de navegación Seleccionemos elementos de entrada. Ancho refinado como 45 RAM que la altura va a ser RAM completa. Además, voy a cambiar el color de fondo. Voy a usar aquí 3341. Es de color gris, pero el más claro. Entonces necesitamos frontera ninguno. Y voy a usar padding para crear algo de espacio. Vamos a configurarlo a, a RAM para ejecutar de nuevo dos REM y foro en el lado izquierdo. También cambia el tamaño de la fuente. Va a ser 1.6 RAM. Entonces voy a cambiar el color del texto. Vamos a ponerla en blanco. Cambia border-radius, hazlo 0.5 RAM. Entonces ahora el elemento input se ve mucho más bonito. A continuación voy a seleccionar el atributo placeholder. Vamos a poner color a C. C, C. Ahora, tengo que encargarme del ícono Font Awesome. Estoy en el icono de búsqueda. Fijemos la posición a absoluta. Entonces necesitamos posicionarnos para ser del 50%. La posición de suerte va a ser 1.5 RAM. Además, necesitamos centrar los elementos verticalmente usando Transformar Traducir Y -50 por ciento, cambiar el tamaño de fuente Va a ser 1.6 RAM. Y también voy a poner color a C. C, C. Bien, así que eso es todo sobre la barra de búsqueda A continuación, tenemos que seguir adelante y comenzar a crear un Menú de Hamburguesas 23. Proyecto 3: crea y da estilo a la navegación - Parte 2: Bien, así que sigamos adelante y empecemos a trabajar en el menú Hamburguesa Voy a seleccionar el icono Menú. En primer lugar, voy a mostrar el icono Menú. Así que vamos a establecer el ancho en cuatro RAM. Necesitamos que la altura sea 2.5 RAM que el color de fondo. Va a ser CCC. En realidad, necesitamos este color de fondo por algunas razones temporales. A continuación, voy a la posición a absoluto. Entonces la posición va a ser del 50%. Entonces necesitamos aquí, posición correcta, que serán ocho RAM. Y también necesitamos centrar el icono usando Transformar Traducir Y -50 por ciento A continuación voy a cambiar el puntero del cursor. Entonces tenemos aquí el ícono de Menú. En realidad vamos a deshacernos de este color de fondo temporal y luego seleccionar la línea. El ancho va a ser de rango completo. Entonces necesitamos altura, que será punto a carnero. A continuación, voy a cambiar el color de fondo va a ser CCC. Entonces ahora mismo las líneas no son visibles. Vamos a revisar el archivo HTML. En realidad necesitamos que agregues una línea de clase separada. Entonces ahora las líneas deberían ser visibles. Aún así. Aquí tenemos algún problema. Sí, necesitamos aquí etiqueta DIV y no la línea tog. Perdón por el error. Ahora, puedes ver aquí las líneas. Sigamos adelante y alinéelos por separado. Para eso, voy a usar flexbox. Necesitamos display flex. Entonces tenemos que cambiar la dirección. Va a ser columna. Y necesitamos crear algún espacio entre las líneas usando justificar el espacio de contenido entre. Entonces ahora tenemos aquí el ícono de Menú con tres líneas distintas. ¿Bien? Después de eso, voy a encargarme de la propia Navegación. Vamos a establecer el ancho. Va a ser cien por ciento. Entonces tenemos que definir la altura, que va a ser 100, la altura de la ventana gráfica A continuación voy a cambiar el color de fondo. En este caso, voy a usar 0 B, 0 B, uno por que es como el color azul oscuro. Siguiente Voy a sentarme posición va a ser absoluta. Las posiciones top y let, ambas deben ser cero. A continuación, voy a encargarme de los elementos de navegación. Deben colocarse en el centro. Entonces a partir de eso, usemos flexbox para centrar los artículos Al principio necesitamos flexionar la dirección de la columna, y luego justificar el centro de contenido y también alinear los elementos al centro. Entonces aquí tenemos los ítems alineados en el centro verticalmente. A continuación, seleccionemos los elementos de navegación. Me refiero al elemento link establece la familia de fuentes dos alfas lab, una, más gruesamente que aumentar el tamaño de la Va a ser cinco RAM. Bueno, entonces voy a cambiar el color. Vamos a ponerlo en blanco. A continuación, voy a crear algún espacio entre las letras. Vamos a configurarlo en 0.3 RAM. También necesitamos aquí margen en la parte inferior. Vamos a establecerlo en 1 g. Así que como puedes ver, los elementos de navegación se ven bastante bien. A continuación, voy a seleccionar antes pseudo elemento. Vamos a configurar el contenido en vacío. Entonces voy a definir un ancho. Va a ser 15 RAM que la altura va a ser 0.5 RAM. Cambiar el color de fondo. Voy a usar el color amarillo aquí para establecer la posición en posición absoluta va a ser del 50 por ciento. Ahora la posición izquierda debe ser de rampa -17. Y también necesitamos transformar, traducir Y -50 por ciento para centrar los elementos verticalmente En para centrar los elementos verticalmente este momento, el pseudo elemento antes no es factible porque necesitamos establecer position a relative para los elementos padre, en este caso el elemento link Entonces se puede ver que tenemos aquí ahora las líneas en el lado izquierdo de los artículos. Necesitamos lo mismo del lado derecho. Para eso voy a usar después de pseudo elementos. Sólo tenemos que cambiar la posición. Necesitamos aquí, posición correcta. Entonces ahora tenemos líneas en ambos lados. Esas líneas se utilizarán para el efecto hover. Entonces, antes que nada, necesitamos ocultarlos usando Transformar Escala. Debería ser cero, así las líneas están ocultas. Siguiente Voy a seleccionar Enlace de navegación seguido de hover Y también necesitamos aquí antes pseudo elemento. Entonces, al pasar el mouse, necesitamos aumentar la escala y establecerla en su valor predeterminado, que es uno Vamos a usar la transición para un efecto suave. Entonces, como puede ver, una vez que pasa el cursor sobre el artículo y aparecerá la línea, necesitamos mostrar la línea desde el lado derecho Entonces para eso tenemos que cambiar el origen de la transformación. Por defecto, está configurado al centro. Y ahora necesitamos, bien. Ahora la línea aparece por el lado derecho. También necesitamos lo mismo para el pseudo elemento after. Entonces vamos a copiar este cambio de código aquí antes y después. Y también necesitamos aquí transformar origen y transición. Para transformar el origen se va a dejar en este caso. Además, la transmisión necesitamos lo mismo. Entonces, si pasamos el cursor sobre los elementos de navegación, entonces tendremos este efecto agradable y genial Bien, así que lo siguiente que hay que hacer es mostrar el ícono de Menú porque ahora mismo está oculto Entonces usemos la propiedad index. Ahora vemos aquí el ícono de Menú. Y ahora es el momento de escribir algo de JavaScript para hacer que la Navegación funcione, voy a crear variable, llamémosla Icono de menú seleccionado usando el método query select. Tenemos que especificar aquí el nombre de la clase, que va a ser icono Menú. Duplicemos este código. Necesitamos la segunda variable, que va a ser seleccionada navbar Aquí nombre de clase navbar. A continuación, voy a agregar el oyente de eventos al ícono Menú con un evento click Y también tenemos que poner aquí una función de flecha, que va a ser una función de devolución Entonces voy a agregar a Napa un nombre de clase con método toggle. Este nombre de clase será, digamos cambio. Después de eso, tenemos que ocultar la Navegación. Vamos a establecer la posición de dos -100 de altura de ventana gráfica. Y luego tenemos que seleccionar Navegación con un nombre de clase de cambio. Tenemos que volver a poner la posición a cero. Usemos el efecto de transición. Necesitamos aquí arriba. Y la duración va a ser de 0.3 s. así que si hacemos clic en el icono Menú, entonces no pasará nada. Entonces, inspeccionemos la página. No tenemos aquí ningún error. Vamos a revisar el HTML5. Tenemos que agregar aquí punto JS porque el nombre del archivo no se indicó correctamente. Entonces ahora la Navegación funciona bien. Y yo estoy aquí bonito efecto. A continuación, voy a ocultar los elementos de Navegación usando opacidad cero y la visibilidad oculta. A continuación, voy a seleccionar el cambio de clase con el enlace de navegación que se envía opacidad a cero y la visibilidad a visible También. Voy a seleccionar el primer elemento de Navegación con un cambio de clase. Digamos transición a todos 0.3 s. Y luego necesitamos un tiempo de retraso 0.3 s. Necesitamos mostrar el elemento de navegación por separado con un tiempo de retardo diferente, lo que creará un efecto realmente agradable. Entonces cambiemos el tiempo de retraso. Necesitamos 0.4 s, luego 0.5 s para el tercer ítem. Entonces el siguiente va a ser 0.6 s. Entonces para el quinto ítem necesitamos 0.7 s. Y para el último ítem, va a ser 0.8 s. Así que vamos a revisar los resultados. Y como pueden ver, tenemos aquí un efecto realmente agradable y genial. Bien, entonces ahora tenemos que encargarnos del ícono de Menú. Estoy en las líneas. Seleccionemos Cambiar con la línea uno. Vamos a establecer con dos 55%. Y también necesitamos aquí Transformar, Rotar dirección Z -15 grados. Y también tenemos que mover la línea uno usando translate menos cero puntos a RAM y 0.8 rampa. Duplicemos este código. Usa tu línea tres. En este caso, necesitamos deshacernos de la señal mía de la función de rotar. Y también necesitamos aquí -0.8 RAM. Además, usemos la transición para efectos suaves. Vamos a comprobar el resultado. Entonces como pueden ver, tenemos aquí un bonito y genial efecto. El icono Menú se transforma en una flecha. Bien, así que eso es todo sobre la Navegación. Sigamos adelante y comencemos a crear la siguiente parte del sitio web 24. Proyecto 3: crea y da estilo al encabezado del sitio web: Muy bien, así que una vez que terminemos con la Navegación ahora es el momento de seguir adelante y comenzar a crear la siguiente sección de nuestro proyecto Sigamos adelante e insertemos comentarios. Para Aterrizaje. Vamos a crear un encabezado del sitio web que es etiqueta de sección abierta con la clase Landing. Voy a insertar la etiqueta U DIV con la clase Landing image, en la que vamos a colocar el elemento de imagen. Voy a seleccionar imagen de la carpeta imagenes va a ser Landing BG. Muy bien, a continuación necesitamos Banner en el que voy a insertar elementos de encabezado H1 con el nombre de la clase encabezado Banner El texto va a estar dentro del elemento span. Casa de ensueño. A continuación, voy a insertar aquí etiqueta DIV con un nombre de clase, Contenido de Banner en el que tendremos párrafo con algún texto ficticio Y además de eso, voy a instituir a Bateson. Leer más. Bien, así que eso es todo sobre el marcado HTML. Sigamos adelante y comencemos a personalizar esta sección. Te voy a insertar comentarios, Aterrizaje y de Aterrizaje. Entonces sigamos adelante y seleccionemos Imagen de aterrizaje y establecemos el ancho en 92%. A continuación necesitamos altura. Va a ser 70, altura de la ventanilla. Entonces tenemos que seleccionar la imagen en sí. Definamos un ancho como 100%. Según la altura va a ser del 100% también. Y también necesitamos que tu objeto ajuste para que sea carbono. Bien, entonces tenemos aquí la imagen. Siguiente. Voy a seleccionar el elemento de sección y definir su ancho. Va a ser al 100%. Sigamos la altura. Voy a fijarlo a 90 altura de la ventanilla. A continuación, voy a establecer la posición para el envoltorio de imagen en absoluto. Y también necesitamos aquí posición relativa para el elemento section, que es un elemento padre. A continuación, definamos la posición superior va a ser de 11 corridas. En cuanto a la posición de izquierda, necesitamos aquí el 50 por ciento. Y también necesitamos centrar la imagen usando Transformar, Traducir X -50% ¿Bien? A continuación, necesitamos disminuir la opacidad para la imagen Después de eso, sigamos adelante y seleccionemos Banner. Voy a poner su posición a absoluta. Entonces necesitamos aquí posición inferior para ser 15 RAM. En cuanto a la posición de laboratorio va a ser 20 rampa. Entonces se puede ver que el Banner se posiciona abajo abajo. A continuación, voy a seleccionar elementos de encabezado. Vamos a establecer el tamaño de fuente a nueve. Carnero. El color va a ser blanco. A continuación, voy a seleccionar los elementos span dentro del encabezado. Vamos a cambiar la familia de fuentes. En este caso, voy a usar el teléfono llamado Alpha flap one cursive Y también voy a cambiar. El tamaño de la fuente va a ser ocho RAM que el color será amarillo. Entonces voy a crear algún espacio entre las letras. Entonces ahora el rumbo se ve bastante bien. A continuación, sigamos adelante y seleccionemos Contenido de Banner. Necesitamos aquí Flexbox. Y también necesitamos alinear elementos en el centro. Siguiente Voy a seleccionar Contenido de Banner seguido del párrafo. Vamos a establecer el ancho a 45 RAM. Y el tamaño de la fuente va a ser a RAM. Además, voy a cambiar el color que está aquí. Cuello blanco. Crea algo de espacio en el lado derecho usando margin-right to ramp Entonces el párrafo se ve bien. Ahora tenemos que encargarnos del botón. Vamos a definir el ancho va a ser de 15 R&. A continuación, necesitamos aquí la altura, que sería de cinco mil. Voy a cambiar el color de fondo. Vamos a configurarlo en transparente. Además, necesitamos bordear para ser 0.3 rampa sólida, y el color va a ser ligero. A continuación, cuidemos el color. Va a ser blanco. Entonces voy a aumentar el tamaño de la fuente. Vamos a establecerlo en 1.6 RAM que el peso de la fuente será negrita. Y también en querer cambiar el cursor. Hagámoslo señalar. Bien, así que veamos el doble de Encabezado del Sitio Web Se ve bien. Por lo que podemos pasar en su lugar a trabajar en la siguiente sección. 25. Proyecto 3: sección Crea información: Bien, así que terminamos con el encabezado del sitio web y ahora es el momento de seguir adelante y comenzar a trabajar en la siguiente sección del proyecto Por lo que la siguiente sección va a ser Acerca de la Sección. Insertemos tus comentarios para la sección Acerca de. Y luego como de costumbre, vamos a abrir la etiqueta de sección con la clase sobre. Voy a colocar la etiqueta U DIV About left, en la que necesitamos el elemento de encabezado H1. Con un texto. empresa de diseño de construcción creativa. Al elemento de encabezado le seguirá el párrafo con algún texto ficticio A continuación, después del párrafo, necesitamos aquí botón. Con el texto, leer más. Después de eso, voy a crear el lado derecho en el que vamos a tener frame. Y además vamos a tener tu envoltorio de imagen en que voy a insertar tu propia imagen. Seleccionemos la imagen de la carpeta de imágenes. Va a ser Acerca de punto JPG. A continuación, necesitamos etiquetar U DIV con una experiencia de nombre de clase. Y también necesitamos otra clase Sección abajo. Inserte su elemento de encabezado H1, 20 años. Y entonces necesitamos h3 elemento encabezado con el texto experiencia trabajando Bien, así que eso es todo. Todos los elementos están creados y ahora tenemos que personalizar esta sección. En realidad, voy a cambiar la altura del contenedor va a ser del 100% y no la altura de 100 viewport Ahora vamos a insertarte comentarios probablemente Acerca de la Sección. Entonces. En primer lugar, voy a cuidar la imagen. Es demasiado grande ahora mismo. Así que vamos a establecer con 250 RAM y la altura va a ser RAM certificada para el wrapper de la imagen. A continuación voy a seleccionar la propia imagen. Definamos dentro de la altura, el ancho va a ser del 100%. Para la altura, va a ser 100% también. Y también necesitamos ajustar la imagen usando la cubierta de alimentación de objetos. Bien, entonces ahora tenemos mucho mejor resultado. Ahora voy a encargarme del elemento de sección. Vamos a establecer con el 200 por ciento. La altura va a ser 75 de la altura de la ventana. Entonces voy a cambiar el color de fondo. Va a ser 313133. Es de color gris, más claro. Entonces voy a usar Flexbox. Alineemos los elementos en el centro. Y también voy a usar justificas contenido con valores paga alrededor. Así que los lados izquierdo y derecho están muy bien alineados. A continuación, voy a seleccionar About left H1 heading element. Vamos a establecer el tamaño de fuente a cinco REM que el color va a ser blanco. Además, voy a cambiar el ancho, van a ser 50 corridas. Entonces necesitamos algo de espacio en la parte inferior. Va a ser seis RAM. En realidad. No necesitamos este año. A continuación, voy a seleccionar párrafo. Vamos a establecer el tamaño de fuente dos en RAM. También cambia el color. El color va a ser blanco. Necesitamos que el ancho sea de 50 RAM. Y también necesitamos margin-bottom para ser five prime. Bien, siguiente, sigamos adelante y nos ocupemos de los Bateson. Voy a configurar con 218 RAM lo que necesitamos altura para ser cinco RAM. Además, voy a establecer el color de fondo en transparente de lo que necesitamos punto de borde para carnero sólido. Y el color va a ser Tba ocho 1-p Quiero decir, el color amarillo. A continuación, voy a volver a poner color, amarillo. Por lo que necesitamos en el sitio para ser 1.8 RAM. Necesitamos algo de espacio entre las letras. Vamos a establecerlo en 0.1 run. Y también necesitamos que Caruso sea punto. Bien, entonces el botón se ve bastante bien. Y en realidad con el lado izquierdo, ya terminamos. Sigamos adelante y cuidemos el marco que se coloca en el lado derecho. Vamos a configurar con 250 RAM. Entonces necesitamos que la altura sea de 35 marco. Entonces voy a usar border, que serán tres REM sólidos con el color 555. Fijemos la posición a absoluta. A continuación tenemos que posicionar para ser 15 RAM. En cuanto a la posición correcta, voy a ponerla en 40 RAM. En realidad, necesitamos posición relativa para el elemento padre. Por eso no vemos aquí el marco. Entonces ahora aquí está. Voy a establecer la posición para el envoltorio de imagen absoluto de dos posiciones va a ser un dram. La posición correcta será 33 RAM. Entonces ahora tenemos muy buenos resultados. A continuación, voy a encargarme del fondo de la Sección. Fijemos la posición a absoluta. Necesitamos aquí la posición inferior para estar, a la RAM. Entonces la posición correcta va a ser la rampa 33. Y también necesitamos que definas la altura va a ser 12. Rahm. A continuación necesitamos frontera en el lado derecho. Vamos a configurarlo en una RAM sólida y el color va a ser amarillo. Entonces aquí tenemos la frontera en el lado derecho. Vamos a establecer el texto alineado para escribir. Y también necesitamos algo de espacio en el lado derecho usando relleno ¿verdad? Correr. Bien, ahora tenemos dos Estilo los encabezamientos Empecemos con los elementos del encabezado H1. Voy a establecer familia de fuentes en Alpha slab one. El tamaño de la fuente cursiva va a ser 61. A continuación voy a cambiar el color. Usemos tu 555 también, necesitamos espacio entre letras. Digamos que 2.5 corrieron. El primer rubro. Se ve muy bien. A continuación, voy a seleccionar el segundo encabezamiento, que es H tres. Voy a establecer el tamaño de fuente en 2.5 prime. Entonces el color va a ser blanco. Así que ahora la parte inferior de la Sección se ve muy bien. Tenemos aquí un pequeño problema. Tenemos que mostrar la Navegación. Para eso. Tenemos que usar la propiedad índice con valor 100. Bien, entonces eso es todo. Todo se ve bien. Podemos seguir adelante y comenzar a trabajar en la siguiente sección. 26. Proyecto 3: crea y personaliza la sección de proyectos: Bien, así que ahora es el momento de seguir adelante y comenzar a crear nuestra siguiente sección de este proyecto El siguiente apartado trata sobre proyectos. Entonces voy a insertar nuevos comentarios para los nuevos proyectos de Sección y de proyectos. Y luego voy a abrir etiqueta de sección con un nombre de clase proyectos. Dentro de esta sección, voy a poner el elemento de encabezado H1 con el nombre de la clase Título Proyectos. Vamos a Instituir los últimos proyectos. A continuación, voy a abrir la etiqueta DIV con las tarjetas de clase en las que voy a colocar llamadas. La tarjeta incluirá una imagen. Seleccionemos la imagen de la carpeta de imágenes. Además, voy a abrir otra etiqueta DIV con el nombre de la clase llamada content, en la que tendremos elementos de encabezado H1 con un texto. La casa de tus sueños está aquí. Siguiente. Tendremos aquí un párrafo con un texto ficticio Entonces eso es todo sobre la tarjeta. Voy a duplicar este elemento un par de veces y cambiar las imágenes. En general, tendremos cinco tarjetas diferentes. Bien, entonces después de eso, voy a abrir la etiqueta DIV con los diseños de clase. Y luego Sección inferior. Ya hemos usado esto. En la última Sección. Abramos la etiqueta de encabezado H1 con los textos. Impresionante. Entonces necesitamos etiqueta de encabezado h3 con diseños de texto. Entonces aquí tenemos el marcado HTML. Sigamos adelante y comencemos a escribir algo de CSS. Voy a insertar nuevos comentarios para la sección de proyectos. Entonces voy a encargarme de la tarjeta. Vamos a establecer el ancho a 32 RAM. Entonces voy a establecer la altura como 50 RAM. A continuación, voy a seleccionar la imagen y definir su ancho. Va a ser al 100%. Pongamos la altura también será del 100%. Y también necesitamos encajar la imagen usando objetos de cubierta. Entonces ahora tenemos aquí imágenes relativamente más pequeñas. Y también tenemos aquí Sección inferior, diseños impresionantes. Entonces voy a ponerla abajo. Seleccionemos el elemento Section y fijemos su ancho 200%. La altura va a ser cien de altura de la ventanilla. Además, voy a establecer posición a relativa. Por lo que ahora el elemento inferior Sección se coloca abajo abajo. Siguiente Voy a seleccionar proyectos teniendo, vamos a definir su tamaño de fuente como un tranvía. Entonces voy a cambiar el color. Va a ser blanco. Voy a crear espacio entre las letras. Vamos a configurarlo para que apunte a rampa. A continuación, voy a crear algo de espacio usando margen con valores RAM repentina, 010 RAM y nueve RAM. Entonces aquí tenemos el rubro. Después de eso, vamos a seleccionar tarjetas. Me refiero al ancho del envoltorio establecido en 90%. Entonces necesitamos margin auto para colocar el elemento en el centro. Entonces necesitamos Flexbox. Así que se puede ver que las tarjetas se colocan muy bien horizontalmente. Vamos a crear algo de espacio en el lado derecho de cada carta usando Margie, ¿verdad? 2.5 RAM. Y también necesitamos cursor para ser puntero. Así que tenemos aquí mucho más agradable y mejor resultado. Siguiente Voy a seleccionar el contenido del carrito. Vamos a establecer con 200%. También la altura va a ser cien por ciento también. Entonces necesitamos posicionarnos para ser absolutos. Además, necesitamos posición relativa para el elemento padre, que en este caso se llama. A continuación voy a establecer la posición superior a cero. La posición izquierda también será cero. Aquí tenemos el contenido de la tarjeta. Cambiemos el color de fondo. Voy a usar tu color RGBA. Estoy en el color negro con una menor opacidad, 0.9. A continuación, voy a seleccionar el elemento de encabezado H1 en el contenido del carrito. Vamos a establecer el tamaño de fuente RAM que el color va a ser blanco. Entonces voy a poner posición en absoluto. Tomaron posición va a ser RAM llena. En cuanto a la posición de liderazgo, voy a ponerla en 4M también. Cambiar con va a ser 15 corridas. Entonces aquí tenemos el elemento de encabezado H1. A continuación, tenemos que seleccionar el párrafo del contenido del bacalao. Vamos a definir el tamaño de la fuente va a ser 1.6 ran. El color será blanco. Y también voy a definir la posición va a ser absoluta y necesitamos posicionar para ser 13 RAM. En cuanto a la posición izquierda, voy a usar para RAM, el ancho va a ser de 17 rampas. Bien. Entonces el párrafo del encabezado o Personalizar. A continuación, voy a seleccionar llamado content with before pseudo elementos Vamos a configurar el contenido en vacío. A continuación, voy a definir el ancho. Va a ser 92%. Entonces necesitamos la altura. Va a ser 0.1 RAM. Además, necesitamos cambiar el color de fondo que voy a usar aquí y el color amarillo. Vamos a establecer la posición para que sea absoluta. Necesitamos dejar que la posición sea cero. Sentí que tomó posición va a ser a RAM. Entonces aquí tenemos antes pseudo elementos. A continuación necesitamos crear otra línea usando después de pseudo elementos En este caso, tendremos línea vertical. Cambiemos el ancho. Va a ser 0.1 RAM en cuanto a la altura. Voy a fijarlo en 94%. La posición izquierda va a ser dos REM. Pongamos aquí las dos posiciones que necesitamos, cero. Entonces aquí tenemos ahora la segunda línea vertical. Ahora voy a crear un efecto hover. Una vez que pasamos el cursor sobre la tarjeta, tenemos que mostrar el contenido de la tarjeta En realidad, coloquemos el color de fondo aquí. Entonces voy a usar color de fondo de transición con una duración de 0.6 s. así que ahora, una vez que pasemos el cursor sobre la tarjeta, cambiará el color de fondo A continuación, voy a Hyde ambas líneas usando transform. Escala. El valor debe ser cero y luego tenemos que usar hover seguido del antes Pseudo elementos. Tenemos que cambiar la escala. Y ves aquí el valor por defecto uno. Entonces necesitamos hacer la transición para un efecto suave. Entonces ahora, una vez que pasemos el cursor sobre la línea de corte se mostrará. En realidad, necesitamos cambiar el origen de la transformación porque necesitamos mostrar la línea desde el lado izquierdo. Entonces ahora tenemos mucho mejor resultado. Y ahora necesitamos lo mismo para la segunda línea. Me refiero al pseudo elemento after, vamos a usar aquí hover, cambiar el pseudo elemento que necesitamos Y también necesitamos transformar el origen para ser top y la transición con una transformación. Bien, así que ahora tenemos aquí bonito efecto hover. A continuación, voy a ocultar el encabezado y el párrafo usando opacidad y visibilidad. Y una vez que pasamos el cursor sobre la tarjeta, tenemos que mostrarlos de nuevo. Entonces necesitamos aquí opacidad uno y visibilidad, visible. Copiemos este código y utilicémoslo para el párrafo también. Para cambiar aquí el selector aquí P. Y también necesitamos transición para ambos elementos. Además de eso, también necesitamos hacer la transición con hover y con algún tiempo de retraso Bien, ahora como pueden ver, tenemos aquí Mucho mejor hecho. En realidad, creo que todo funciona bien. Solo necesitamos cambiar la posición de los elementos inferiores de la Sección. Pongamos la posición correcta a 12 rondas. Bien, así que todo queda bien. Y con esta sección ya terminamos. Entonces, sigamos adelante. 27. Proyecto 3: crea y da estilo a la sección de clientes: Bien, así que una vez que hayamos terminado con la sección Proyecto ahora está abajo para seguir adelante y crear nuestra siguiente sección, que va a ser una Sección de Clientes Entonces voy a colocar sabías comentarios para la Sección de Clientes. Entonces sigamos adelante y abramos la etiqueta de sección con un nombre de clase. Clientes. Voy a insertar tu elemento de encabezado H1 con un encabezado de clase Clientes. Insertemos a tus clientes como valor de texto. Siguiente Voy a abrir Tip check con el nombre del clúster Contenido de clientes, en el que voy a colocar otro dar. Y va a ser la tarjeta de Clientes. Entonces dentro de la tarjeta, voy a insertar imagen. Sigamos adelante y seleccionemos la imagen de la carpeta de imágenes. Va a ser como tumor uno. También tendrá aquí la etiqueta DIV con la clase Clientes contenido de la tarjeta. Dentro de ese elemento, voy a colocar la etiqueta de encabezado H1 con el nombre de John Smith. Entonces tendremos encabezado h3 y va a ser co-manager asociado A continuación, tendremos un icono Font Awesome. Va a ser FAA, quedan cotizaciones sólidas. Entonces necesitamos tu párrafo con algún texto ficticio. Sigamos adelante y dupliquemos la tarjeta de Clientes. A continuación, voy a insertar aquí la etiqueta DIV, que va a ser cliente Sección inferior. Los elementos de las secciones anteriores. Entonces tendremos aquí elementos de encabezado H1 con los clientes de texto. Y también necesitamos aquí h3 elemento encabezado con el texto dice, bien, así que eso es todo. Tenemos aquí el marcado HTML. En realidad tenemos que cambiar aquí la imagen. Va a ser el cliente dos. Entonces ahora se cambia la imagen. Terminamos con el marcado HTML. Sigamos adelante y comencemos a escribir algo de CSS. Necesitamos aquí nuevos comentarios para la Sección Clientes. Después voy a seleccionar elementos de Sección, que tiene un ClassName Clientes Vamos a definir el ancho. Va a ser al 100%. Esa es probablemente la altura. Voy a configurarlo a la altura de la ventanilla Y también necesitamos cambiar el color de fondo. En este caso, voy a usar 313133. Entonces necesitamos algo de espacio en la parte superior usando relleno, top seven R& A continuación, voy a seleccionar la imagen de la tarjeta Clientes para hacerlos más pequeños. Vamos a configurar con 220 RAM. Ahora las imágenes se hicieron más pequeñas y ahora es más cómodo trabajar. Entonces necesitamos aquí posición relativa para el elemento section. Como se puede ver, estas Sección inferior se coloca muy bien. A continuación, voy a seleccionar el encabezado Clientes. Definamos el tamaño de la fuente. Va a ser la rampa ocho. Entonces necesitamos color. Va a ser blanco. Además, voy a crear espacio usando margen con el valor 0010 RAM, y luego nueve RAM en el lado izquierdo También crea algo de espacio entre las letras. Vamos a configurarlo para que apunte a RAM. Entonces aquí tenemos el encabezamiento de la sección. Siguiente Voy a, a continuación voy a seleccionar Contenido de Clientes . Definamos onda. Va a ser del 80 por ciento. Entonces tendremos su fila de margen para centrar el elemento. Entonces voy a usar flexbox. Necesitamos justificar el espacio de contenido de manera uniforme para crear un espacio uniforme entre los elementos flexibles. A continuación, sigamos adelante y cuidemos el contenido de la tarjeta de los clientes. El ancho va a ser de 50 R&. Entonces tendremos altura, que va a ser 22 RAM Siguiente voy a cambiar el color de fondo. Va a ser 777. Además, necesitamos aquí border-radius, 0.5 RAM. A continuación tendremos algún efecto de sombra con los valores 01 RAM. Entonces otra vez una RAM y el color RGBA, color negro con una menor opacidad A continuación, necesitamos algo de espacio usando el valor de relleno para envolver. Bien, Entonces paso a paso, la tarjeta se ve bien. A continuación, voy a así la posición para la imagen, va a ser absoluta. Después voy a seleccionar la tarjeta Clientes, que es un elemento padre para la imagen. Y necesitamos aquí posición relativa. Después de eso, sigamos adelante y definamos. El puesto va a ser menos cinco primos. Y también necesitamos aquí la posición correcta, va a ser para rampa. Entonces necesitamos aquí border-radius para ser 0.5 REM. A continuación necesitamos algún efecto de sombra. Serán los valores 0.5 RAM, 0.5 RAM, y el color va a ser color RGBA con menor opacidad Bien, así que las imágenes están muy bien alineadas. A continuación, voy a encargarme de los elementos del rubro H1 del contenido de bacalao. El tamaño de la fuente va a ser 2.5 RAM. Entonces tendremos color. Va a ser blanco. También. Voy a crear algo de espacio en la parte inferior. Vamos a configurarlo en una RAM. Así que los encabezamientos se ven bien. El siguiente elemento a Personalizar va a ser el elemento de encabezado h3 Cambiemos el tamaño de la fuente. También va a ser 1.8 dram. El color voy a usar C, C, C. Y el margen en la parte inferior va a ser de tres rampas. Después de eso, voy a encargarme del elemento I, el icono Font Awesome, Emily cita, Let's the font size two to ram. El color va a ser claro también. El margen inferior, tenemos que deshacernos de él. Así que los códigos se ven bien. Ahora tenemos que encargarnos del párrafo. Vamos a establecer el tamaño de fuente en 1.6 redondo. Bien, así que eso es todo. Eso es todo sobre la sección de clientes. Se ve muy bien. Y ahora podemos seguir adelante y empezar a trabajar en la siguiente sección. 28. Proyecto 3: crea una sección de contacto: Bien, así que es hora de seguir adelante y crear nuestra siguiente sección del proyecto La siguiente sección va a ser una Sección de Contacto. Entonces, sigamos adelante e insertemos nuevos comentarios para la conducta Sección. Entonces voy a abrir etiqueta de sección con un nombre de clase Contacto. Dentro del elemento de sección. Voy a abrir etiqueta profunda, que va a ser Content de Contacto. Entonces necesitamos Contacto izquierda, el lado izquierdo, esta sección. Vamos a abrir el encabezado H1, etiquetar e instituir. Estén atentos y obtén las últimas actualizaciones. A continuación necesitamos Contacto derecho, en el que voy a insertar la etiqueta de entrada con un tipo e-mail y con el valor del atributo placeholder, ingrese su dirección de correo electrónico A continuación necesitamos el icono Font Awesome, que va a ser un sólido un plato de papel. Bien, así que vamos a ver. El marcado HTML está listo. Sigamos adelante y comencemos a escribir algo de CSS. Insertemos tus nuevos comentarios para Contacto. A continuación, voy a seleccionar Elementos de contacto. Me refiero a esta Sección elementos. Esa celda con el 200 por ciento, la altura va a ser de 25 rampas. Entonces necesitamos Flexbox y justify-content center. Y también necesitamos alinear los elementos al centro para poder centrar el contenido dentro de esta sección. A continuación, voy a seleccionar Content Contact, y voy a especificar el ancho. Va a ser del 80 por ciento. Entonces necesitamos mostrar flex para poder colocar los artículos uno al lado del Entonces voy a usar justificar el espacio de contenido, incluso necesito crear un espacio maligno entre los elementos flex. A continuación, sigamos adelante y seleccionemos Contact Content H1 heading element. Entonces el tamaño de fuente a tres RAM. Entonces voy a transformar texto en mayúsculas. También cambia el color. Va a ser CCC. Aquí tenemos el elemento heading. Sigamos adelante y seleccionemos elementos de entrada. Voy a establecer el ancho a 45 RAM. Entonces la altura va a ser para R&. Además, voy a cambiar el color de fondo. Vamos a configurarlo en transparente. A continuación, voy a crear espacio dentro de la entrada usando padding, 1.5 RAM, y luego 1.5 g. A continuación tenemos que apuntar a RAM y cero. Después de eso, voy a usar border y voy a ponerla en ninguna. Entonces necesitamos para el fondo. Va a ser 0.1 rimas sólidas, y el color va a ser 777 Entonces aquí tenemos la frontera en la parte inferior. A continuación, fijemos el tamaño de fuente en 1.8 Ran. Además, necesitamos que tu color sea CCC. Después de eso, voy a seleccionar elemento de entrada seguido de la pseudo-clase de enfoque Entonces, una vez que enfocamos el elemento de entrada , necesitamos cambiar el borde, me refiero al color del borde, y va a ser amarillo. También, necesitamos aquí la transición para un efecto suave. ¿Bien? Entonces, una vez que enfocamos el elemento de entrada y el borde en la parte inferior, cambiamos su color. A continuación, voy a seleccionar el atributo placeholder, y quiero cambiar el color Hagámoslo CCC y también usemos espaciado entre letras, 0.1 RAM. ¿Bien? Entonces eso es todo sobre el elemento input. Ahora, te voy a quitar del ícono Font Awesome. Digamos que el tamaño de la fuente es de 1.8 alrededor. Entonces la posición va a ser absoluta. Voy a poner puesto al 20 por ciento. En cuanto a la posición correcta va a ser cero y también cambiar el color. Hazlo C, C, C. A continuación, cambiemos el cursor, hazlo señalar. Entonces el icono no es visible porque olvidamos tu posición relativa para el elemento padre. Entonces veamos conflicto, ¿verdad? Y establecer la posición a la ruta. Bien, entonces eso es todo. La Sección de Contacto se ve bien, así podemos seguir adelante y cuidar el índice Sección 29. Proyecto 3: crea y personaliza el pie de página del sitio web: Bien, así que ahora es el momento de construir nuestra última sección del proyecto Va a ser un Pie de Página. El Pie de Página será sencillo. Vamos a insertar nuevos comentarios para el Pie de Página. Entonces voy a abrir la etiqueta de pie de página HTML5, seguido del nombre de la clase Pie de página. Vamos a abrir la etiqueta DIV con la clase Contenido de pie de página en que voy a colocar el logotipo. Necesitamos aquí para platicar con las clases, marca y luego marca Footer. Dentro del desarrollo tendrá tres elementos. Quiero decir logo, uno, logo al nivel tres, como si estuviera en la Navegación. Y también necesitamos aquí elemento span con una arquitectura de texto. Bien, a continuación, necesitamos aquí el párrafo del texto de copyright con un signo de copyright. Y también con el texto. Todos los derechos reservados. Realizado por codificación Crear. Bien, así que eso es todo sobre el marcado HTML del Pie de Página Sigamos adelante y Estilo a esta sección. Vamos a insertar nuevos comentarios para el Pie de Página. Después voy a seleccionar el elemento Pie de página. Definamos un ancho. Va a ser al 100%. Probablemente haya altura. Voy a fijarlo a siete R& A continuación necesitamos color de fondo. Va a ser 2020 a cero. Además, necesitamos borde en la parte superior, 0.1 g sólido. El color va a ser tres, e3, e4, uno. Entonces aquí tenemos el borde en la parte superior del Pie de Página. Siguiente Voy a seleccionar Branch Footer, establecer su posición en absoluto. Entonces necesitamos posición relativa para el elemento padre, que es el Footer. La posición superior va a ser 3.5 RAM. Para la posición izquierda, voy a ponerla en 20%. Bien, entonces aquí tenemos el logo. Seleccionemos el logotipo uno de Frankfurter, que va a ser tres RAM Eso es probablemente alturas. Voy a configurarlo en tres RAM también. Entonces tendremos aquí puntos de borde a ram, sólido, y el color va a ser amarillo. A continuación voy a duplicar este código, cambiar el nombre de la clase. Va a ser ir a ancho y alto van a ser 2.5 RAM. Y no necesitamos frontera. Cambiemos el color de fondo. Va a ser el 202020. Además, necesitamos una posición dura para ser de 0.7 rampa. Eso es lo que lideró la posición. También va a ser rampa 0.7. Entonces la segunda parte está lista. Duplicemos este código y cambiemos el nombre de la clase. Necesitamos aquí un logo tres. En realidad, vamos a copiar el borde de aquí y pegarlo aquí. Entonces tenemos que cambiar de top y dejar posiciones. Vamos a ponerlos a 1.3 RAM. Entonces aquí tenemos el logo. A continuación voy a seleccionar elemento span. Vamos a establecer el tamaño de fuente en, para ejecutar. En cuanto al margen superior, va a ser 0.5 RAM. Entonces en realidad, podemos decir que el logo y el lado izquierdo del Pie de Página está listo. Sigamos adelante y cuidemos el texto de copyright. Voy a mandar posición a Absoluto que la posición superior va a ser del 50%. Necesitamos centrar los elementos usando Transformar Traducir Y -50 por ciento Para la posición correcta, va a ser del 20%. A continuación, necesitamos cambiar el tamaño de la fuente. Hagámoslo una moneda seis R&. También cambia el color. Vamos a configurarlo a CCC. Entonces, eso es todo. El Pie de Página ya está, se ve bien. Y en realidad podemos decir que el proyecto estamos hechos, lo único que tuvimos que hacer es hacerlo receptivo a diferentes tamaños de pantalla. 30. Proyecto 3: convierte el proyecto en receptivo: Bien, así que una vez que hemos construido todas las secciones de nuestro proyecto, ahora sonamos para que sea sensible a diferentes tamaños de pantalla. Voy a inspeccionar la página y cambiar al modo responsive. Entonces voy a insertar tus nuevos comentarios en el archivo CSS para el modo responsive. Entonces vamos a encontrar el punto de ruptura en el que tenemos que hacer algunos cambios Y luego tuvimos que usar CSS media query. Así que vamos a crearlo y especificar el max-width. Va a ser de 1,700 pixeles. Lo primero que voy a hacer es seleccionar Banner y cambiar la posición. Va a ser 12 R&. A continuación, voy a seleccionar sobre, derecha, me refiero al lado derecho de la sección Acerca de y definir margin-right como rampa 20 Después de eso, sigamos adelante y seleccionemos marco y cambiemos el ancho. Va a ser 45 RAM. Además, necesitamos cambiar la altura. Va a ser a 30 de RAM. A continuación, voy a cambiar la posición correcta. Vamos a configurarlo en 20 RAM. Entonces voy a cambiar la posición del marco y se movió hacia el lado derecho. A continuación, sigamos adelante y seleccionemos Acerca del envoltorio de imagen y cambiemos el ancho. Va a ser 45 RAM que la altura será 30 RAM. Y también voy a cambiar la posición correcta. Va a ser 13 de renta. Entonces ahora el lado derecho se ve bien. Lo siguiente que voy a hacer es cambiar la posición de la parte inferior de la Sección. Entonces necesitamos aquí experiencia y cambiar la posición correcta. Vamos a ponerla en rampa 20. Bien, a continuación, vamos a encargarnos de la sección Proyecto. Seleccione Elemento de sección y establezca la altura 200 por ciento. Entonces necesitamos seleccionar tarjetas y establecer con dos 80%. Además, voy a envolver los artículos flex usando flex wrap, wrap. Y también necesitamos justify-content center. Lo siguiente que voy a hacer es crear algo de espacio en la parte inferior usando relleno inferior, Vamos a ponerla en rampa 25. Bien, entonces las tarjetas están envueltas, pero necesitamos aquí para crear algo de espacio. Para eso. Voy a seleccionar la tarjeta en sí y establecer el margen a 1.5. Bien, entonces ahora todo se ve genial. A continuación voy a encargarme de la Sección de Clientes. Vamos a elegir el contenido de los Clientes. Ajustar el ancho al 90%. Y también tenemos que cambiar la posición de la Sección inferior. Pongamos la posición correcta a 20 Ran. ¿Bien? Lo siguiente que voy a hacer es seleccionar Contact Content. Vamos a cambiar el ancho va a ser del 90%. Además, tenemos que seleccionar la marca Pie de página y cambiar la posición izquierda. Va a ser 16%. Y hagamos lo mismo con los derechos de autor. Vamos a establecer la posición correcta en 16% también. Bien, entonces creo que todo se ve bien en un punto de ruptura. Sigamos adelante y encontremos el siguiente. Entonces creo que el próximo Breakpoint va a ser de 1,400 pixeles Así que voy a crear una nueva consulta de medios CSS. Y voy a especificar aquí el max-width como 1,400 pixeles Voy a disminuir el tamaño de fuente del elemento HTML. Vamos a establecerlo en 55%. Hará que todos los elementos sean relativamente más pequeños. A continuación, voy a seleccionar fotograma en la sección Acerca de. Vamos a establecer su ancho en 40 RAM. La altura va a ser 25 RAM. Y también necesitamos cambiar la posición correcta. Vamos a configurarlo en 15 RAM. A lo mismo para la imagen. Yo hice el envoltorio de la imagen. Vamos a establecer el ancho a 40 RAM y altura va a ser de 25. Y también hemos cambiado la posición correcta. Y este caso la posición correcta va a ser un tranvía. ¿Bien? Entonces el lado derecho de la sección Acerca de, se ve bien. Vamos a llevarte de la experiencia. Cambió la posición correcta y la puso en rampa 12. Bien, así que todo queda bien. Sigamos adelante y encontremos el siguiente punto de ruptura. Entonces creo que el siguiente punto de interrupción debería ser de 1,200 píxeles Así que vamos a seguir adelante y crear una nueva consulta de medios CSS y establecer max-width en 1,200 Voy a cambiar nuevo el tamaño de fuente del elemento HTML, vamos a establecerlo en 49%. Entonces voy a encargarme de la sección Acerca de. Así que vamos a seleccionar el lado izquierdo de la sección Acerca de. Y también necesitamos aquí Párrafo establecer ancho a 40 R&. Siguiente. Voy a encargarme de la Sección de Clientes porque las tarjetas están demasiado cerca unas de otras. Entonces, seleccionemos el contenido de Clientes y fijémoslo con un 200 por ciento. A continuación necesitamos clientes y tenemos que cambiar la posición correcta va a ser diez rampa. Bien. Después de eso, sigamos adelante y cuidemos la Sección de Contacto. Vamos a establecer el ancho del Contenido de Contacto 200 por ciento. Y también voy a encargarme del Pie de Página. Tenemos que cambiar la posición de las piernas. Vamos a fijarlo al diez por ciento. También hay que cambiar la posición de los derechos de autor. En realidad, necesitamos aquí la posición de la suerte y no la correcta. Necesitamos la posición correcta para los derechos de autor. Entonces, pongámoslo en diez por ciento también. Bien, entonces creo que todo se ve bastante bien. Sigamos adelante y nos ocupemos del siguiente punto de ruptura. Creo que el siguiente punto de ruptura debería ser de 900 píxeles. Sigamos adelante y otra vez Crear nueva consulta de medios CSS y especificar el ancho máximo como 900 En primer lugar, voy a cambiar el tamaño de fuente del elemento HTML. Vamos a establecerlo en 45 por ciento. A continuación, voy a encargarme de la barra de búsqueda. Me refiero al elemento input. Cambiemos su ancho haciendo 30 rampas. Entonces no, no tenemos ningún problema con la barra de navegación. A continuación, tenemos que encargarnos del rumbo en el Banner al establecer el tamaño de fuente a siete rampa. Y también, voy a seleccionar elementos span en el encabezado Banner. Cambiemos el tamaño de la fuente y pongamos también en siete ron. Bien, después de eso, voy a seleccionar Párrafo contenido independiente. Cambiemos el tamaño de la fuente. Va a ser 1.7 rampa como probablemente ancho. Voy a fijarlo a así que a cinco corrieron. A continuación tenemos que encargarnos de la sección Acerca porque las cosas están mal hechas aquí Así que sigamos adelante y Seleccionar Acerca de izquierda. Elementos de encabezamiento H1. Cambiar el tamaño de fuente. Vamos a ponerla a tres corridas. Además, voy a configurar con 235 RAM. Después voy a seleccionar párrafo en el lado About left. Cambiemos el tamaño de la fuente. Va a ser la rampa 1.7. Y también cambiar el ancho. Voy a ponerla en rampa 35 como los elementos de rumbo. A continuación, tenemos que encargarnos del marco. En el lado derecho. Eso ha cambiado. El ancho va a ser de 30 R&. Además, tenemos que cambiar la altura a 30 a 15 RAM que cambiar frontera. Me refiero al ancho del borde, va a ser 1.5 RAM. Además, necesitamos cambiar la posición correcta. Vamos a establecerlo en diez R&. A continuación tenemos que encargarnos del envoltorio de imagen. Tenemos que cambiar el ancho que va a ser. Entonces para correr, entonces tenemos que cambiar la altura. Vamos a ponerla en rampa 15. Y también tengo que encargarme de los puestos. La posición superior va a ser de 12 rampas. Y también tenemos que encargarnos de la posición correcta. Estudiemos a siete rampa. Bien, entonces el lado derecho se ve bien. A continuación, necesitamos personalizar la experiencia. Eso es cambiar la posición correcta y ponerla en siete R& A continuación, tenemos que encargarnos de la Sección de Clientes. Así que sigamos adelante y seleccionemos Clientes. Elemento de sección establece la altura al 100%. Y también necesitamos acolchado en la parte inferior para ser 12 rampas. Después voy a seleccionar el contenido de Clientes y cambiar la dirección del flexbox Eso son sólo dos columnas. Y necesitamos aquí alinear los artículos al centro. Entonces ahora las cartas se colocan verticalmente una encima de la otra. Vamos a crear algo de espacio entre ellos usando la rampa de margen H. Entonces ahora la Sección de Clientes. Se ve bien. Tenemos que llevarte tienes que contactar Sección. Seleccionemos Contact Content. Cambia la dirección, hazla columna como la sección anterior. Y también necesitamos aquí alinear elementos, centrar, luego seleccionar Contacto izquierda, y usar margen, abajo. Eso son sólo dos en renta. Bien. Creo que todo se ve bien en el punto de ruptura. Vamos a revisar la Navegación. Entonces ahora tenemos que encargarnos del siguiente punto de ruptura. La promulgación es la última. Así que vamos a Crear nuevo, ve que esta media query establece el ancho máximo en 600 píxeles. Entonces lo primero que tengo que hacer es cambiar el tamaño de fuente del elemento HTML. Vamos a establecerlo en 35 por ciento. Entonces te voy a llevar a Navbar. Seleccionemos la marca. Y vamos a seleccionar elementos span y la marca ahora pobre y ocultando usando display none. Entonces tenemos aquí y solo el logo. También. Tenemos que encargarnos de los elementos de navegación. Entonces, seleccionemos Navegación, seguido del elemento link. Así tamaño de fuente a tres RAM. Y también tenemos que encargarnos de las líneas. Son demasiado largas. un elemento con antes pseudo elemento, y también necesitamos después pseudo elemento también Vamos a establecer el ancho para que pueda correr. Entonces voy a seleccionar antes de pseudo elementos por separado Vamos a cambiar esa posición Va a ser rampa -13. Y tenemos que hacer lo mismo para el pseudo elemento after también En este caso necesitamos a la posición correcta. Entonces ahora creo que el problema está arreglado. A continuación, tomemos aquí del Banner. Necesidad de cambiar la posición izquierda. Va a ser cinco RAM y también tenemos que cambiar la posición inferior. Voy a fijarlo a 18 R&. A continuación, seleccionemos elementos de encabezado y cambiemos el tamaño de fuente, configurémoslo en cinco RAM. Además, voy a seleccionar elementos span dentro del encabezado Banner, esa celda, su tamaño de fuente dos para R& Bien, A continuación tenemos que encargarnos de la sección Acerca de. Así que vamos a seleccionar acerca de los derechos y hacerlo oculto usando display. Ninguno. En realidad. Tenemos que sacar este elemento del desarrollo porque estaba oculto. Entonces a continuación voy a seleccionar Acerca sección y establecer su altura al 100%. Y también usar justify-content center. También necesitamos relleno para ser diez RAM 025 gramo cero. Bien. Después de eso, voy a seleccionar lado izquierdo. Vamos a los textos de la aerolínea en el centro. Entonces cambia margin-right, hazlo cero. Creo que ahora sobre Sección se ve bastante bien. Vamos a sacarte del encabezado de la sección de proyectos. Así que selecciona el encabezado del proyecto, cambia el tamaño de fuente, hazlo seis RAM. A continuación voy a revisar la Sección de Clientes. Seleccione el encabezado Clientes, tamaño de fuente a seis RAM también. Bien. Creo que todo se ve bien y nuestro proyecto responde a todos los diferentes tamaños de pantalla. Espero que lo hayan disfrutado y aprendan algo nuevo. Sigamos adelante y construyamos nuestro próximo proyecto. 31. Proyecto 4: vista previa: Hola y bienvenidos a nuestro próximo proyecto. En esta sección, vamos a estar construyendo un sitio web de interiorista. Este campo es muy popular y muy demandado hoy en día. Entonces creo que este tipo de sitio web te será interesante y útil. Sigamos adelante y describamos el proyecto. Tenemos aquí un encabezado del sitio web que incluye el logotipo, el ícono del Menú de Hamburguesas y un Banner Animado Si hago clic en el icono Menú, entonces la Navegación aparecerá muy bien. Ellos Banner está Animado. Como puede ver, los elementos de texto están cambiando con algunos efectos de fundido. A continuación tenemos una sección Acerca de la cual aparece muy bien con un efecto de desvanecido. Vamos a usar este efecto para cada sección y este proyecto. La sección Acerca de consiste en una imagen y algunos detalles sobre el diseñador. A continuación tenemos la sección Servicios, que nos muestra lo que el diseñador puede ofrecer. Después de eso, podrás encontrar los proyectos del diseñador. Estoy en la cartera de sus obras. Después viene la sección de logros en la que tenemos Contadores Animados. Y por último, puedes encontrar aquí un pie de página sencillo y agradable. El proyecto responde a diferentes tamaños de pantalla. Si inspecciono la página, cambiar al modo de respuesta y luego verificar el proyecto cuatro tamaños de pantalla diferentes. Encontrarás que el proyecto es Responsive y se ve bien en cada tamaño de pantalla diferente. Nuevamente, todos los proyectos y este curso están creados para un tamaño de pantalla extra grande. Es decir, esto coincide con 1920 píxeles de ancho y 1080 píxeles de alto Entonces, si estás usando un tamaño de pantalla relativamente más pequeño, entonces durante las conferencias deberías cambiar al modo de respuesta y especificar el ancho y la altura así. De lo contrario, el proyecto no se verá bien en un tamaño de pantalla más pequeño hasta que lo hagamos receptivo. Entonces, por favor, tómalo en cuenta. Bien, así que eso es todo sobre nuestro cuarto proyecto. Sigamos adelante y comencemos a construirlo 32. Proyecto 4: crea y haz que la navegación funcione: Bien, así que sigamos adelante y comencemos a crear nuestro proyecto Voy a abrir esta carpeta en VS Code. Y luego voy a crear nuestros archivos de trabajo. Como es habitual para HTML, index.html, para CSS y JavaScript. Siguiente Voy a abrir el archivo HTML de punto índice y crear documento HTML básico. Antes que nada, sigamos adelante y cambiemos el título. Va a ser diseñador de interiores Website. Entonces voy a enlazar archivo CSS. Vamos a especificar aquí el nombre del archivo y también necesitamos etiqueta script. El atributo source. Necesitamos script como el nombre del archivo JavaScript. Vamos a abrir el Navegador de proyectos. Y luego voy a colocar el navegador y el editor uno al lado Me gusta. Entonces. Para que nuestro proceso de trabajo sea más cómodo. Bien, a continuación necesitamos ahora los enlaces como iconos Font Awesome Visitemos Font Awesome, C, D y J. Sí, y luego tomemos el primer enlace desde aquí. Voy a abrir la etiqueta de enlace en el elemento head y luego pegarte la CDN Además de eso, voy a usar los teléfonos de Google. Así que sigamos adelante y visitemos el sitio web de Google Fonts. Voy a buscar fuente llamada Railway. Seleccionemos un par de estilos diferentes. A partir de aquí. A continuación, voy a buscar otro teléfono llamado can-it Seleccionemos de nuevo un par de estilos diferentes. Después copia el enlace y pegarlo en el encabezado quiero. Bien, así que estamos listos para comenzar a escribir el marcado HTML. Insertemos tus comentarios para el contenedor. Entonces voy a abrir la etiqueta DIV con el contenedor de clase. A continuación necesitamos la etiqueta DIV para el rectángulo. Se necesitan dos clases, rectángulo y un rectángulo uno también necesitamos aquí rectángulo dos. A continuación, voy a insertar comentarios para la Navegación. Entonces sigamos adelante y abramos suficiente TOC con un nombre de clase Ahora cuatro, en el que tendremos otro elemento con el nombre de la clase designer. Vamos a insertar tu imagen. Voy a seleccionar imagen de la carpeta de imágenes. Va a ser diseñador, el JPEG. A continuación necesitamos la etiqueta DIV en la que voy a insertar span con el nombre y Smith. Y también necesitamos otro elemento span con el texto interiorista. Bien, después de eso, voy a crear el ícono Menú en el que voy a colocar tu etiqueta DIV con los nombres de las clases. Línea uno. Necesitamos tres líneas. Entonces sigamos adelante y cambiemos los nombres de las clases. Va a estar forrada a y mentir tres. Entonces voy a crear la propia Navegación. Vamos a escuchar. Ahora, a la izquierda con la imagen, voy a seleccionar imagen de la carpeta de imágenes. Va a ser nafta JPG. A continuación, necesitamos crear el lado derecho de la Navegación en la que voy a insertar le doy pista con el nombre de clase X BTN Va a ser el X cerrando Batson. Sinceridad, su etiqueta DIV con las clases XS línea, X, línea uno, y necesitamos entonces X línea dos Bien, veamos sobre el botón X. A continuación, necesitamos aquí H1 encabezando elementos con un texto y Smith. Entonces después de eso, voy a insertar la etiqueta DIV con una siesta de clase menos, que incluirá elementos de navegación. El primer enlace va a ser casa. Entonces voy a duplicar este elemento un par de veces. El segundo va a ser sobre, entonces tendremos Servicios. A continuación, voy a insertar su cartera. Entonces tendremos Blog. Y por último, voy a interferir, Contacto Bien, así que veamos Se crea el marcado HTML. A continuación, voy a encargarme del CSS. Vamos a abrir el archivo CSS e insertar nuevos comentarios para los estilos predeterminados. Voy a seleccionar cada elemento usando un asterisco. En primer lugar, pongamos el margen y relleno de ambos a cero. A continuación, voy a establecer el tamaño de la caja border-box. También. Necesitamos aquí texto-decoración para que no sea ninguno. Encontrado. El esquema, también se va a conocer. Y también, voy a cambiar la familia de fuentes para cada elemento. Va a ser Sensorial Ferroviario. ¿Bien? Además de eso, voy a cambiar el tamaño de fuente HTML porque vamos a usar RAM como unidad de medida. Necesitamos una fila para ser igual a diez RAM. Por lo que el elemento HTML debe tener el tamaño de fuente como 62.5 por ciento A continuación, voy a crear escuchar comentarios para el contenedor. Vamos a insertar comentarios, pausar la Navegación. Después voy a seleccionar Navegación. Vamos a poner la pantalla a ninguna. Voy a esconderlo por un tiempo. Bien. Después de eso, voy a seleccionar el contenedor. Definamos su ancho. Va a ser 100% que la altura. Va a ser 100 de altura de ventana gráfica. Voy a cambiar el color de fondo. Vamos a usar el color. Uno-dos, uno-dos, uno-dos A continuación, voy a seleccionar rectángulo. Definamos su ancho. Va a ser 70 RAM. También necesitamos aquí altura, va a ser 40 RAM. Entonces voy a establecer la frontera 2.1 RAM sólida. Y el color va a ser RGBA a cinco a cinco a cinco Es un color blanco con una menor opacidad, 0.1. A continuación, fijemos la posición como fija. Entonces tenemos aquí el rectángulo, necesitamos cambiar su posición. Pero ahora mismo voy a seleccionar el rectángulo uno. Pongámonos a la posición y hagamos que sea 48 por ciento. La posición izquierda va a ser -21%. Ahora. Entonces necesitamos aquí transformar, rotar con la dirección z y el valor va a ser de 20 grados. A continuación tenemos que posicionar relativo para el contenedor. Entonces aquí tenemos el primer rectángulo. A continuación, te voy a sacar de la herramienta rectángulo. Vamos a establecer la posición va a ser menos ocho RAM de lo que necesitamos posición correcta. Vamos a establecerlo a menos diez RAM. Y también agarrar transformar propiedad. El valor va a ser de 60 grados. ¿Bien? Entonces aquí tenemos el segundo rectángulo. En realidad, voy a cambiar la posición para el rectángulo a la posición dos va a ser 8%. Y necesitamos aquí la posición correcta menos diez por ciento en lugar de RAM, ¿verdad? Entonces, a continuación, seleccionemos la imagen del diseñador. Y en su ancho a seis RAM, la altura va a ser seis Roma también. Y también necesitamos aquí pies de objeto para que se ajuste a la imagen. Además, voy a cambiar el radio fronterizo. Va a ser del 50 por ciento. Entonces aquí tenemos la imagen del diseñador. A continuación, sigamos adelante y seleccionemos navbar. Establezca la posición en absoluto. Entonces para posicionar va a ser cero, la posición izquierda va a ser cero también. Y necesitamos establecer el ancho como 100%. Y la altura va a ser diez RAM. Entonces voy a seguir adelante y seleccionar diseñador. Permite establecer la posición en absoluto. Dos, la posición va a ser ariete, supuestamente posición izquierda. Voy a ponerla en una tercera a RAM. Entonces necesitamos aquí flexbox para alinear los elementos. Usemos alinear elementos, centrar. Bien, entonces aquí tenemos la imagen y los elementos span. Seleccionemos elementos profundos dentro del diseñador. Entonces voy a usar de nuevo Flexbox Entonces necesitamos aquí para cambiar de dirección Va a ser columna. También. Voy a alinear el texto en el centro. A continuación necesitamos algo de espacio en el lado izquierdo. Vamos a configurarlo a, a correr. Entonces aquí tenemos estos parlamentos. Ahora en realidad, podemos personalizar cada uno de estos elementos de pan. Sigamos adelante y seleccionemos el seno o el span. El primer elemento span usando el selector secundario enésimo. Entonces el tamaño de fuente va a ser 1.8 RAM. Entonces necesitamos aquí el peso de la fuente, va a ser negrita. Vamos a establecer el texto, transformarlo a mayúsculas y cambiar el color Va a ser blanco. A continuación, necesitamos algo de espacio entre letras usando el punto de espaciado entre letras para rampa. Entonces aquí tenemos el nombre del diseñador, el primer elemento span. Sigamos adelante y dupliquemos este código. Cambia el selector hijo que necesitamos aquí también. Voy a cambiar el tamaño de la fuente. Vamos a establecerlo en un punto para RAM. Y también cambiar el color va a ser 999. Comprobemos los resultados. Entonces tenemos aquí el segundo elemento span. Después de eso, voy a encargarme del ícono Menú, que se colocará en el lado derecho. Fijemos la posición a absoluta. Entonces es una posición va a ser tres RAM. Necesitamos la posición correcta. Va a ser así a RAM. Y también establecer ancho. Hagámoslo cinco RAM. Entonces. La altura va a ser de tres RAM. Y también necesitamos aquí color de fondo temporal. Usemos CCC. Así que aquí tenemos Menú icono colocar en el lado derecho de la Navegación. Sigamos adelante y seleccionemos línea. Vamos a establecer su ancho al 100%. La altura va a ser punto a RAM. Además, necesitamos aquí el color de fondo para que sea blanco. Deshagámonos de estos colores de fondo temporales desde el icono Menú. Entonces aquí tenemos las líneas, ahora necesitamos alinearlas. Y para eso, voy a usar flexbox. Necesitamos display flex. Entonces tenemos que cambiar la dirección. Va a ser columna. Y también necesitamos algo de espacio entre las líneas usando justificar el espacio de contenido de manera uniforme. Entonces aquí tenemos el ícono Menú, que ahora se ve bien. Cambiemos el cursor. Hacerlo puntero. Entonces, a continuación, voy a seleccionar Icono de menú con hover Vamos a establecer transformar a escala. ¿Por qué? 1.4? También necesitamos hacer la transición para un efecto suave. Una vez que coloquemos el cursor sobre el ícono de Menú, entonces esta K aumentará aquí Efecto agradable y fresco. Bien, vamos a deshacernos de mostrarlos desde la Navegación porque vamos a hacer que funcione. En primer lugar, voy a encargarme de la Navegación izquierda. Vamos a establecer el ancho a 30%. Entonces necesitamos que la altura sea del 100%. adelante y seleccionemos la imagen de la izquierda del nafta, porque en este momento la imagen es a mayor Vamos a establecer el ancho al 100%. Altura. También va a ser al 100%. Nuevamente, necesitamos aquí pies objeto con la cobertura de valor. Entonces aquí tenemos la imagen que se coloca en el lado izquierdo de la Navegación. Vamos a establecer el ancho para la Navegación. Va a ser al 100%. Entonces la altura va a ser de 100 altura de ventana gráfica. También necesitamos aquí el color de fondo, el color negro oscuro. Entonces voy a poner posición a fija. La posición superior va a ser cero y la posición izquierda también será cero. Bien, así que vamos a verlo. La imagen se ve bien. Usemos display flex. Entonces aquí tenemos la Navegación, menos. A continuación voy a disminuir ligeramente la opacidad. Vamos a establecer 0.5 para la imagen. Después de eso, voy a seleccionar el lado derecho. Vamos a establecer el ancho a 70% de lo que la altura va a ser 100% Después de eso, voy a encargarme del botón de cierre X. Vamos a establecer su ancho a cuatro RAM de lo que la altura va a ser REM completa también. Entonces cuando escuchas el color de fondo, me refiero al color de fondo temporal, entonces voy a establecer la posición para arreglar. La posición de punta va a ser de cinco RAM. En cuanto a la posición correcta, voy a ponerla en cinco para él también. Además, cambiemos el rumbo desde un buen punto. Entonces aquí tenemos el botón de cierre X. Vamos a deshacernos de estos colores de fondo temporales y cuidar las líneas para crear X seno. Así que vamos a establecer con dos para RAM. La altura va a ser punto a rampa que el color de fondo será blanco. Entonces aquí tenemos las líneas y ahora necesitamos transformarlas y hacerla X. Así que voy a seleccionar la primera línea que sea usar Transformar. Girar dirección Z como el valor voy a colocar tus -45 grados. Entonces se gira la primera línea. Duplicemos este código. Usa tu ex línea para deshacerte del signo menos de aquí. Además, necesitamos aquí la función Translate para mover los elementos por punto menos a RAM y luego rampa -0.1 Entonces ahora tenemos aquí y botón X. A continuación, voy a tomar aquí de los elementos de encabezado H1 en el lado derecho de la Navegación. Vamos a establecer font-family. Va a ser franco, sans-serif. Entonces necesitamos aquí tamaño de fuente , van a ser cinco RAM. Vamos a cambiar el peso de la fuente. Vamos a agregarlo a 300. Voy a transformar texto en mayúsculas. También cambia el color. Voy a ponerla en blanco. Entonces aquí tenemos el elemento de encabezado H1, que es el nombre del diseñador. A continuación, pongamos la posición a absoluta. Voy a establecer la posición superior al 20 por ciento. En cuanto a la posición de liderazgo, va a ser del 50 por ciento. Entonces aquí estamos contentos. Partida alineada muy bien. A continuación, vamos a sacarte menos de la Navegación. Voy a usar display flex. Entonces voy a cambiar la dirección porque necesitamos alinear los elementos verticalmente. A continuación, pongamos la posición a absoluta. La posición superior también va a ser del 30%. La posición izquierda, voy a ponerla 50% de rumbo probable. Entonces aquí tenemos los elementos de navegación. Sigamos adelante y seleccionemos no menos a elementos. Quiero decir, los enlaces, voy a cambiar font-family, va a ser sincero san-serif A continuación, definamos el tamaño de fuente. Voy a configurarlo para que caiga RAM. Además, necesitamos aquí el color para ser CCC. Entonces necesitamos Margen, 0.5 RAM que cero. Así que ahora los elementos de Navegación se ven mejor. A continuación, sigamos adelante y seleccionemos el primer enlace con el enésimo selector secundario Voy a cambiar el color. Usemos el color rojo. Ceo 374. Todo bien, Así que tienes el primer ítem el cual se lee. A continuación, voy a usar un efecto hover. Voy a cambiar el color al flotar y volver a usar estos colores rojos Y también necesitamos hacer la transición para el efecto suave. Bien, Así que ahora, una vez que pasemos el cursor sobre los elementos de Navegación, cambiarán el color y vendrán a leer A continuación, voy a usar algo de JavaScript. Vamos a crear una variable. Va a ser ícono de Menú. Sigamos adelante y seleccionamos Icono de menú usando el método selector de consultas, necesitamos especificar quién es el nombre de la clase, que va a ser icono de Menú. Duplicemos esta variable dos veces. Necesitamos aquí X botón seleccionado. Y también voy a usar tu Navegación. Especificemos aquí el nombre propio de la clase. Navegación. Ahora voy a agregar un oyente de eventos al icono Menú evento click y con una función de devolución de llamada Entonces necesitamos agregar clase a la Navegación. Una vez que hacemos clic en el botón. Esta clase va a ser navegada. Eso es copiar este código. Ahora, necesitamos aquí el botón X. Una vez que haga clic en el botón X, necesitamos eliminar la clase de la Navegación. A continuación, usemos esa navegación de clúster recién creada. Pero antes que nada, necesitamos ocultar la Navegación usando opacidad cero y visibilidad oculta. A continuación necesitamos Navegación seguida de la navegación. Y tenemos que volver a mostrar la Navegación usando opacidad uno y visibilidad visible. Ahora así que necesitamos que hagas la transición todos los 0.3 s. Así que ahora una vez que hagamos clic en el ícono Menú, se mostrará la Navegación. Y una vez que hagamos clic en el botón X, entonces se ocultará. Bien, así que eso es todo sobre Navegación. Sigamos adelante. 33. Proyecto 4: crea un banner animado: Bien, así que una vez que terminemos con la Navegación, ahora es el momento de seguir adelante Y así dos Crean la siguiente parte del proyecto. La siguiente parte va a ser un Banner Animado. Entonces voy a insertar tus nuevos comentarios para Landing. A continuación, voy a abrir una etiqueta de sección con un nombre de clase, Landing, en la que voy a abrir la etiqueta DIV con la clase Banner. Por lo que este elemento incluirá y otro chug profundo con dos clases, rumbo diapositiva y rumbo diapositiva Una general tendrá dos diapositivas. Vamos a insertar aquí h3 elementos de encabezado con el texto, Hola Yo soy. Entonces tendremos elementos de encabezado H1 con un texto y Smith. Vamos a duplicar. Elementos, cambie el nombre de la clase. Y también necesitamos cambiar el texto. Entonces aquí tenemos de Londres. Entonces necesitamos aquí y diseño de interiores. Bien, así que vamos a verlo sobre el marcado HTML. Sigamos adelante y comencemos a escribir algo de CSS. Voy a insertar tus comentarios para Landing. Entonces voy a seleccionar Aterrizaje. Estoy en esta sección elemento. Vamos a establecer con 200% que la altura va a ser 100 altura de ventana gráfica Siguiente Voy a seleccionar Banner. Fijemos la posición a absoluta. Entonces necesitamos posición relativa para el elemento padre, que es un elemento de sección. Entonces pongamos una posición en 35%. La posición izquierda va a ser del 50 por ciento y necesitamos centrar el Banner usando Transformar Traducir X con -50 por ciento Bien, a continuación, necesitamos aquí definir el ancho. Va a ser al 100%. En cuanto a la altura, voy a ponerla en 40 RAM. Además, necesitamos aquí text-align center. Así se puede ver que el Banner se coloca en el centro. Sigamos adelante y seleccionemos Heading slide h3 heading elements Voy a establecer el tamaño de fuente en, para ejecutar y el texto transformar mayúsculas Voy a cambiar el color, va a ser 999. Entonces necesitamos algo de espacio entre la celosía usando espaciado entre letras 0.3 ran Además, voy a crear algo de espacio en la parte inferior usando margen inferior, va a ser para correr. Entonces aquí tenemos encabezamientos. Duplicemos este código, cambiemos el selector que necesitamos aquí elemento de encabezado H1. El tamaño de la fuente va a ser de seis RAM. Además, voy a usar el peso de la fuente va a ser negrita. Después cambia el color. Hagámoslo blanco. Además, tenemos que dejar que este paciente tenga 0.25 RAM y se deshaga del margen. Bien, entonces eso es todo. Los encabezamientos se ven bastante bien. A continuación, debemos seleccionar Diapositiva de encabezado. Establezca la posición en absoluto. El ancho va a ser del 100%. Entonces ahora los encabezamientos se colocan uno encima del otro. Voy a usar Transformar, Traducir Z menos atrio y también establecer opacidad a cero y visibilidad oculta. Entonces ahora los encabezamientos están ocultos. A continuación, voy a crear fotogramas clave CSS. El nombre de la animación va a ser encabezado animado. Entonces, al cero por ciento, necesitamos esas tres líneas de código. Entonces al ocho por ciento, voy a cambiar el valor de la función Translate va a ser cero y además necesitamos mostrar el encabezado. El siguiente paso va a ser el 48%. Necesitamos el mismo código aquí. A continuación, necesitamos 56%. Y necesitamos este código de aquí, desde el primer paso. El siguiente paso va a ser el 100%. Va a ser el último paso. Necesitamos aquí. El mismo código. Ahora, necesitamos aplicar estas reglas a los elementos, su propiedad de animación, y luego el nombre de la animación. A continuación necesitamos duración e infinita y también lineal. Duplicemos este código, cambiemos el nombre de la clase. En realidad necesitamos aquí es ritmo. Para la segunda diapositiva, necesitamos un tiempo de retardo 4 s. Así que como pueden ver, tenemos aquí una animación muy agradable y genial. Bien, entonces eso es todo sobre el Banner. Sigamos adelante. 34. Proyecto 4: sección Crea información: Bien, así que ahora es el momento de seguir adelante. Y así dos Crean la siguiente sección del proyecto. Entonces la siguiente sección va a ser una sección Acerca de. Sigamos adelante e insertemos nuevos comentarios para una sección Acerca que voy a abrir. Tipo de sección con la clase sobre. En el que voy a abrir etiqueta profunda con una clase sobre la izquierda. Va a ser el lado izquierdo donde tendremos imagen. Sigamos adelante y seleccionemos la imagen de la carpeta de imágenes. Va a ser Acerca de punto JPG. A continuación, necesitamos el lado derecho en el que tendremos elementos de encabezado H1. Acerca de. A continuación, tendremos H tres rumbo Elementos, alto y Smith. A continuación necesitamos aquí la etiqueta DIV con la información de clase en la que voy a abrir párrafo con un texto ficticio A continuación, tendremos aquí la etiqueta DIV con la clase social media, en la que voy a insertar. Ahora algunos íconos. El primero va a ser marcas fa. Fa tweeter. Duplicémoslo dos veces y cambiemos los nombres de las clases. El segundo va a ser Facebook, F, y el tercero va a ser Instagram. Entonces tendrás el marcado HTML. A continuación, necesitamos crear un par de otros elementos. Cuando escuches H4 encabezando elementos con el texto, Contáctame. Aquí. A continuación, voy a abrir la etiqueta span en la que voy a insertar el correo electrónico. Entonces va a ser enlace completo en el que voy a pasar. Y Smith en design.com, alguna dirección de correo electrónico ficticio Duplicemos este código. Cambia aquí, enviando un correo electrónico al teléfono e insegura algún número de teléfono ficticio Bien, así que en realidad con el marcado HTML, ya terminamos. Sigamos adelante y comencemos a escribir CSS. Insertar nuevos comentarios para nuestra nueva sección. Me refiero a la sección Acerca de. Después voy a seleccionar Elementos de sección y establecer su ancho al 100%. En cuanto a la altura va a ser de 100 altura de la ventanilla. A continuación, voy a usar flexbox. Entonces necesitamos justify-content center. Y además voy a crear algo de espacio en la parte superior usando relleno, la parte superior puede rampa. Entonces se concibe que los lados izquierdo y derecho se colocan uno al lado A continuación, necesitamos aquí para cambiar la altura del contenedor. Va a ser al 100%. Entonces ahora tenemos aquí el fondo oscuro en la sección Acerca de también. A continuación voy a seleccionar el lado izquierdo. Vamos a establecer el ancho a 40%. Duplicemos este código y busquemos el ancho para el lado derecho también. Va a ser del 60 por ciento. A continuación, voy a seleccionar la imagen que está cerrada en la parte izquierda. Vamos a establecer el ancho en 33 RAM. Cambiar altura, va a ser 55 RAM. Entonces necesitamos ajustar la imagen usando objetos. Cubierta de alimentación. También, establece la posición, hazla absoluta. Entonces necesitamos posicionar relativo para el elemento padre que está aproximadamente a la izquierda. Vamos a definir dos posiciones que van a ser menos diez RAM. Ahora necesitamos la posición correcta. Vamos a ponerla a cero. ¿Bien? Entonces aquí tenemos la imagen. A continuación, vamos a encargarnos de los elementos del encabezado H1 en el lado derecho. Vamos a establecer la familia de fuentes en can-it sans-serif. Entonces necesitamos aquí tamaño de fuente, va a ser 20 RAM ahora, así que voy a usar font-weight Hagámoslo audaz. Entonces voy a transformar texto en mayúsculas. Después de eso, voy a Crear algún espacio entre las letras. También cambiar el color va a ser 222. Y entonces voy a cambiar la posición va a ser absoluta. Necesitamos posición relativa para el elemento padre para el desarrollo correcto. A continuación, voy a establecer la posición superior como -20 RAM. En cuanto a la posición izquierda va a ser 15 RAM. Entonces el rumbo se ve bien y está muy alineado. A continuación necesitamos elementos h3 rumbo en el lado derecho. Entonces se va a contar la familia de fuentes. San-serif. A continuación voy a aumentar el tamaño de la fuente. Va a ser RAM llena. A continuación voy a establecer el font-weight en 300. Además, necesitamos que el color sea blanco. Entonces voy a cambiar de posición. Vamos a establecerlo en absoluto. Y necesitamos posicionar para ser menos siete RAM de lo que necesitamos la posición de vuelta va a ser 25 RAM. Entonces aquí tenemos el segundo rumbo alineado encima del primer encabezado, y se ve bastante bien. A continuación voy a seleccionar Info. Permite posicionar a absoluto, establecer en posición 25 RAM. Entonces necesitamos posición izquierda va a ser 25 RAM. Después de eso, voy a seleccionar párrafo dentro de la info. Vamos a configurar font-family para que pueda san-serif. Entonces voy a cambiar el tamaño de la fuente. Va a ser 1.8 RAM. A continuación, voy a establecer el ancho. Hagámoslo 45 RAM. El color del párrafo va a ser 777. Además, necesitamos cambiar la altura de la línea. Vamos a agregarlo a 1.8. Y necesitamos algo de espacio en la parte inferior usando margen inferior, Hagamos que sea cinco RAM. Entonces aquí tenemos el párrafo. Siguiente. Sigamos adelante y cuidemos las redes sociales. Voy a configurar display a flex. Entonces necesitamos espacio en la parte inferior usando el margen inferior cinco corrieron. Y ahora podemos personalizar el icono Font Awesome. Entonces, seleccionemos las redes sociales seguidas del elemento I. Vamos a establecer el camino a seis RAM. Y la altura va a ser de seis RAM también. Necesitamos que el radio fronterizo sea del 50%. Y también necesitamos color de fondo. Usemos 202 O2O. Entonces aquí tenemos los círculos. Voy a usar display flux. Después con el fin de centrar el icono cuando justifique Contact Center y el centro de líneas de pedido. Entonces voy a aumentar el tamaño de la fuente. Hagámoslo 2.5 RAM. Entonces ahora los iconos se colocan en el centro de los círculos. A continuación, voy a usar algo de espacio en el lado derecho usando Margie derecho a RAM Y también el color va a ser el rojo, que usamos en las conferencias anteriores. Y también cambia el cursor, hazlo señalar. Así que los iconos Font Awesome se ven bastante bien. A continuación, voy a encargarme del info H, cuatro elementos. Vamos a establecer el tamaño de fuente en 1.8 RAM. Entonces usa color, hazlo blanco. Después de eso, voy a seleccionar elementos span. Dentro de la info. Vamos a establecer el tamaño de fuente en 1.6 RAM. Cambia el peso de la fuente, va a ser negrita. Entonces necesitamos que el color sea 777. Además, voy a usar display block y luego marchar a RAM y cero Por último, necesitamos seleccionar elementos de enlace. Cambiemos la familia de fuentes. Se va a contar alguna serif. Y luego cuando cambiar el color, vamos a usar el color rojo. Bien, así que en realidad esta sección está personalizada. Se ve bastante bien. Ahora tenemos dos Create fade effect. En primer lugar, necesitamos ocultar la imagen. Usemos la opacidad a cero y luego a la visibilidad. Oculto Y también necesitamos mover la imagen hacia abajo usando Transformar, Traducir Y 20 rampa. Usemos este código también para el lado derecho de la sección Acerca de. Entonces ahora el contenido está oculto y necesitamos escribir algo de JavaScript. Voy a agregar el oyente de eventos al objeto de ventana usando eventos de desplazamiento y con una función de devolución de llamada A continuación, necesitamos crear una variable que va a ser sobre, vamos a seleccionar los elementos usando el método selector de consultas. Y ahora necesitamos usar declaraciones if else, tu condición va a ser ventana punto Página Y offset es mayor o igual a 200. En realidad, esta propiedad nos muestra la distancia que nos desplazamos hacia abajo. A continuación, necesitamos agregar el cambio de clase al acerca. Si esta condición es cierta. En la sentencia else, necesitamos la misma condición pero con remove elements. Así que tenemos que eliminar la clase de cambio de la acerca. Comprobemos en la propiedad de desplazamiento Y de la página de la consola. Te voy a mostrar lo que realmente nos da una vez que nos desplazemos hacia abajo en la página. Entonces, inspeccionemos la página y cambiemos a la consola. Entonces una vez que nos desplazemos hacia abajo, entonces obtendremos algunos valores. Nuevamente, nos muestra la distancia a la que nos desplazamos hacia abajo en píxeles. Bien, entonces ahora necesitamos seleccionar cambio, seguido de About left image. Y tenemos que usar esas tres líneas de código. Tenemos que volver a mostrar la imagen. Y también tenemos que moverlo hacia arriba. Usemos el mismo código para el lado derecho. Se deshace del selector de imágenes. Necesitamos aquí la transición con algún tiempo de retraso. Y cuando haces la transición aquí también. Así que ahora, como pueden ver, tenemos aquí muy bonito efecto de desvanecimiento. Bien, así que eso es todo. En realidad, el ícono de Menú no funciona aquí. Entonces tenemos que arreglar ese problema. Usemos la propiedad index y fijémosla en 100. Entonces ahora consideremos que el problema está arreglado, ¿verdad? Sigamos adelante. 35. Project 4: crea y personaliza la sección de servicios: Bien, así que ahora es el momento de seguir adelante y crear la siguiente sección de nuestro proyecto La siguiente sección es sobre Servicios. Insertemos nuevos comentarios para una nueva sección. Entonces voy a abrir etiqueta de sección con la clase Servicios. Dentro del elemento de sección. Voy a abrir la etiqueta DIV, que va a ser Encabezado de Servicios. En ese elemento, voy a abrir la etiqueta de encabezado h3 con el texto. Lo que hago. A continuación, necesitamos elementos de encabezado H1 con un texto mis Servicios. Después de eso, voy a abrir la etiqueta DIV con la clase Servicios, menos. Dentro de ese elemento. a abrir otra etiqueta DIV con el elemento de la lista de clases en la que voy a abrir Font Awesome icon with the class is FA, solid fa, layer group. A continuación, te necesitamos span elemento en el que voy a insertar espacio. Planeación. Siguiente uno en otro elemento span con el diseño de muebles de texto. A continuación necesitamos otro span, que va a ser la selección de superficie. Así que voy a duplicar el elemento de la lista dos veces, y luego tenemos que cambiar los nombres de las clases y el texto también. Entonces el segundo icono va a ser fa, plumín de pluma. Aquí necesitamos diseño de iluminación. Entonces el siguiente va a ser el detalle interior. A continuación, tendremos instalación. En cuanto al tercer elemento de la lista aquí, el icono Font Awesome de una casa. Después dentro de esta cantidad de panel, voy a insertar selección de color. Entonces el siguiente va a ser tratamientos de ventana. Entonces tendremos documentaciones de constructores. Bien, así que eso es todo sobre el marcado HTML. Aquí tenemos los elementos HTML. A continuación, voy a empezar a escribir el CSS. En primer lugar, como de costumbre, voy a insertar nuevos comentarios para una nueva Sección, Servicios y fuera de Servicios. Siguiente Voy a abrir elementos de Sección. Vamos a definir con que va a ser 100%. Entonces necesitamos altura, que va a ser 70 de altura de ventana gráfica Entonces voy a usar Flexbox. Vamos a cambiar la dirección va a ser columna. Y también voy a alinear los elementos en el centro. Bien, así que aquí tenemos los elementos HTML. A continuación, voy a seleccionar Encabezado de Servicios, seguido del elemento H three heading. Voy a establecer el tamaño de la fuente en dos gramos. Entonces necesitamos transformar el texto en mayúsculas. Entonces voy a cambiar el color, va a ser 777. Entonces voy a usar el espaciado entre letras. 0.3 corrió. También. Voy a crear algo de espacio en la parte inferior usando el valor de margen inferior para ejecutar. Entonces aquí tenemos el primer rumbo. Duplicemos este código y cambiemos el encabezado. Va a ser H1. Necesitamos aquí font-size para ser cinco RAM. Entonces me voy a deshacer de la propiedad de transformación de texto. El color va a ser blanco. Además, necesitamos tu margen inferior 12 RAM. Entonces aquí tenemos el segundo encabezamiento. En realidad, voy a colocar los encabezados y sensoriales usando text-align Entonces ahora tenemos mejor resultado. Después de eso, voy a encargarme de la lista de servicios. Vamos a establecer con dos 70%. Entonces voy a usar flexbox, seguido de la propiedad justify content con el valor espaciado uniformemente Tenemos incluso espacio entre los elementos A continuación, voy a seleccionar el elemento de la lista. Vamos a celular con 230 RAM. A continuación necesitamos libros de flujo. Voy a cambiar la dirección. Hagámoslo columna porque necesitamos alinear los elementos verticalmente. Vamos a usar el centro de alineación de elementos. Así que los elementos de la lista están muy bien alineados. A continuación, sigamos adelante y seleccionemos elementos del elemento de lista, Fuente, Impresionante, icono. Voy a aumentar el tamaño de la fuente. Va a ser redondo completo. Después el color. Se va a leer. Además, voy a usar margin bottom. Con valor tres RAM. Necesitamos algo de espacio en la parte inferior. Así que los íconos se ven bastante bien. A continuación voy a encargarme del elemento span. Vamos a establecer la familia de fuentes en can-it sans-serif. A continuación voy a cambiar el tamaño de la fuente. Va a ser para carnero, cambiar el color. Voy a usar el color blanco. Y también necesitamos margen, 0.7 RAM en la parte superior en la parte inferior, y cero en los lados izquierdo y derecho. Bien, entonces en realidad todo se ve bien. Tenemos que ocultar el Encabezado porque vamos a usar el mismo efecto de fundido como lo hicimos en la sección anterior. Vamos a mover el encabezado hacia abajo usando Transformar Traducir Y cinco RAM. También tenemos lo mismo para la lista de servicios. Me refiero a los elementos de la lista. Entonces ahora todo el contenido está oculto. Sigamos adelante y escribamos algo de JavaScript. Voy a duplicar esta variable. Cambiar nombre, va a ser Servicios. A continuación necesitamos, de nuevo si else declaraciones. Ahora el número de píxeles se cambiará por Acerca de la parte superior de desplazamiento de punto. Una vez finalizada la sección Acerca de, luego más 200 píxeles, necesitamos mostrar el efecto. Ahora, voy a seleccionar cambio seguido del Encabezado de Servicios. Y necesitamos aquí opacidad uno, luego visibilidad, visible y Transformar Traducir Y con cero Vamos a usar la transición. Entonces voy a copiar este código y pegarlo aquí necesitamos elemento de lista en lugar de servicios Encabezado. Seleccionemos aquí el elemento de lista con selector F child y utilicemos la transición para el primer ítem con un tiempo de retraso 0.5 s. Duplicemos este código dos veces. Cambiar la conferencia de gráficos. Y también necesitamos diferentes tiempos de retardo para el segundo y para el tercer ítem de la lista. Bien, si recargamos la página y nos desplazamos hacia abajo, entonces obtendremos este bonito y genial efecto de fundido Bien, entonces eso es todo sobre la sección de Servicios. Pasemos a la siguiente conferencia. 36. Proyecto 4: crea y da estilo a la sección de cartera: Bien, así que una vez que hayamos terminado con la sección Servicios, ahora suena para seguir adelante y Crear siguiente sección, que va a ser una cartera. Por lo que voy a insertar sus nuevos comentarios para la nueva Sección. Entonces sigamos adelante y como de costumbre, abra la etiqueta de sección con la cartera de clases. Voy a insertar tu etiqueta DIV, que va a ser Portfolio Header. Vamos a abrir la etiqueta de encabezado h3 con el texto Portafolio. A continuación necesitamos elemento de encabezado H1. Sólo vamos a estar Checkout mi trabajo. Después de eso, voy a abrir la etiqueta DIV con las obras de clase. Será envoltorio de lo que necesitamos Obra misma, que constará de dos partes. Tendremos imagen. Seleccionemos la imagen de la carpeta de imágenes. Va a ser el Trabajo uno. Entonces tendremos Work Info en el que voy a insertar el elemento h3 heading Va a ser diseño de interiores. Entonces necesitamos el elemento de encabezado H1, que va a estar dando a tu hogar un nuevo estilo. Entonces tendremos párrafo con algún texto ficticio. Y entonces necesitamos link, que va a ser pocos. Proyecto. Bien, así que eso es todo sobre el trabajo Voy a duplicar este elemento un par de veces. Tendremos cuatro obras. Para la segunda Obra, voy a cambiar los lugares para la imagen y para la info de obra. Y también voy a cambiar el nombre de la imagen. Entonces tendremos aquí imagen Obra tres. Después trabajó para y para la cuarta Obra, voy a hacer lo mismo. Cambiemos los lugares para la imagen y la información de trabajo. Bien, así que en realidad con el marcado HTML para esta sección, ya terminamos Sigamos adelante y cuidemos el CSS. Voy a instituir nuevos comentarios para la cartera. Después voy a seleccionar etiqueta de sección. Vamos a establecer el ancho al 100 por ciento. Y la altura va a ser del 100% también. Y también necesitamos padding, 20 RAM y cero, luego five prime y cero otra vez. A continuación, voy a copiar todo este código de la sección anterior. Y voy a cambiar los nombres de las clases. Vamos a insertar aquí. Portafolio. También necesitamos aquí margen en la parte inferior, 20 rampa. Entonces como pueden ver, tenemos aquí los encabezamientos de sección y se ven bastante bien Bien, Siguiente, voy a encargarme de las obras que el envoltorio, vamos a poner el ancho al 80 por ciento Entonces necesitamos margin auto para centrar los elementos. Entonces el Centro de Desarrollo. A continuación voy a seleccionar Obra misma. Usemos Flexbox. Aquí necesitamos justificar el espacio de contenido de manera uniforme. Necesitamos incluso espacio entre los artículos flexibles. Entonces me voy a sentar margen a 15 RAM y cero. Entonces se puede ver que los elementos están muy bien alineados. A continuación, seleccionemos Imagen. Voy a definir el ancho, va a ser del 40 por ciento. Entonces necesitamos a tu altura. Va a ser 30 RAM. Además, voy a usar la alimentación de objetos con la cobertura de valor. A continuación, voy a disminuir ligeramente la opacidad. Vamos a establecerlo en 0.8. Así que las imágenes se ven bien. A continuación, voy a seleccionar Work Info. Vamos a establecer el ancho en 40 por ciento. Después de eso, voy a seleccionar elementos de encabezado h3 dentro de la información de trabajo que establecen el tamaño de fuente en 1.6 RAM Entonces necesitamos colorear va a ser 777. Además, voy a transformar texto en espaciado entre letras mayúsculas para crear algo de espacio entre la celosía Entonces el primer elemento encabezado se ve bien. A continuación, voy a duplicar este código, cambiar el selector que necesitamos aquí, elementos de encabezado H1. Tenemos que cambiar la familia de fuentes. Va a ser franco san-serif. Entonces voy a aumentar el tamaño de la fuente. Vamos a configurarlo para que caiga RAM. Además, voy a usar aquí font-weight, negrita, luego cambiar el color. Va a ser blanco. Además, me voy a deshacer de los cheques transforman propiedad. En cuanto al espaciado entre letras, va a estar apuntando a rampa. Además de eso, necesitamos a tu margen. Tres rampa y cero. Bien. A continuación, voy a seleccionar Work Info, seguido del párrafo. Vamos a establecer el tamaño de fuente a 1.6 RAM de lo que el color va a ser 777 más o menos. Voy a sentarme la altura de la línea a 1.6 y luego usar margen inferior con un valor para embestir. ¿Bien? Entonces el párrafo se ve bien. A continuación, voy a seleccionar elementos de enlace. Vamos a establecer el tamaño de fuente en 1.6 RAM que cambiar el peso de la fuente, va a ser negrita. Además, voy a cambiar el color. Usemos el color rojo y luego usemos el espacio entre las letras. Entonces ahora el elemento link se ve bien. A continuación, voy a ocultar el Encabezado Portafolio usando opacidad y visibilidad. Y también tenemos que bajar los elementos. Vamos a usar el mismo efecto destino que usamos en las secciones anteriores. Agarremos este código y lo utilicemos para el trabajo también. Aquí necesitamos diez RAM para el trabajo en lugar de cinco RAM. A continuación, voy a escribir algo de JavaScript. Seleccionemos nueva variable que va a ser cartera. Entonces voy a usar la declaración if else. Tenemos que cambiar aquí el nombre de la sección. En este caso necesitamos Servicios. Y aquí necesitamos cartera porque cartera viene después de la sección Servicios. Ahora, necesitamos seleccionar elementos usando esfuerzos de cambio de clase. Necesitamos aquí Portafolio Encabezado, agarra este código y establece la opacidad a uno Entonces necesitamos visibilidad, visible. En cuanto a la función Traducir Y va a ser cero. Y también necesitamos aquí transición para un efecto suave. Voy a agarrar este código y usarlo para el trabajo. Cambiemos el nombre de la clase. Va a ser Trabajo. Entonces necesitamos usar la transición, pero usaremos diferentes transiciones para los diferentes elementos de trabajo. Para el primer ítem necesitamos transición con un tiempo de retardo 0.5 s. Vamos a duplicar este código. Para el segundo ítem necesitamos tiempo retrasado, 1 s. Luego para el tercer ítem, necesitamos 2 s. En cuanto al cuarto ítem, van a ser 3 s. Bien, así que si recargamos la página, entonces obtendremos estos bonitos y geniales efectos Entonces eso es todo sobre la Sección Portafolio. Pasemos a la siguiente conferencia. 37. Project 4: crea sección de datos con contadores: Bien, así que una vez que hayamos terminado con la Sección Portafolio, ahora tenemos que seguir adelante y empezar a trabajar en la siguiente sección, que va a ser un dato, me refiero a los Contadores de datos Animados Vamos a abrir la etiqueta de sección con un nombre de clase Data. Entonces voy a abrir una etiqueta DIV, que va a ser Encabezado de Datos. Vamos a insertar tus elementos de encabezado de tres años, solo van a ser logros. Y también te voy a insertar elementos de encabezado H1 con el texto. Vamos a compartir mis logros. Bien. Eso es todo sobre el Encabezado de la sección. A continuación voy a abrir la etiqueta DIV, que va a ser Lista de datos, en la que tendremos elementos de datos. Vamos a insertar aquí elemento span. Y aquí mismo los clientes. A continuación tendremos otros elementos span. El nombre de la clase, entumecido, me refería al número. Y también necesitamos aquí Data, Val, que va a ser un atributo. Voy a pasar aquí algún número aleatorio. Por defecto, voy a insertar aquí cero. Así que vamos a duplicar el elemento de datos dos veces. Cambiemos aquí el contenido, va a ser proyectos realizados y el valor de los datos va a ser 652. Y necesitamos aquí tazas de café. Y el valor de los datos va a ser 1,000. Bien, así que digamos sobre el marcado HTML. Aquí tenemos todos los elementos que acabamos de crear. Voy a empezar a escribir el CSS. Vamos a Institutar comentarios para datos. Después voy a seleccionar Elementos de sección y establecer el ancho al 100%. En cuanto a la altura va a ser del 100% también. Necesitamos relleno, 20 RAM y cero. A continuación, voy a seleccionar datos Encabezado. Vamos a usar aquí text-align center. Después de eso voy a seleccionar datos Encabezado H, tres elementos de encabezado. Cambiemos el tamaño de la fuente. Va a ser para correr. Entonces necesitamos la transformación fiscal. Va a ser mayúscula. También. Voy a cambiar el color. Vamos a establecerlo en 777. Entonces necesitamos algo de espacio entre las letras, digamos 2.3 RAM. Y también voy a poner margen de fondo a rampa. Entonces el primer encabezado es Personalizar. Siguiente Voy a seleccionar elementos de encabezado H1. Cambiemos el tamaño de la fuente. Entonces cinco RAM, entonces necesitamos color para que sea blanco. Además, necesitamos espaciado entre letras con 0.3 RAM y luego margen en la parte inferior, que va a ser 12 rampa. Eso es todo sobre los encabezamientos de la sección. A continuación, voy a personalizar los datos. Menos. Vamos a establecer el ancho a 60%. La altura va a ser 90 RAM de lo que necesitamos margin auto para enviar al elemento. Después de eso, voy a encargarme de los elementos de datos. Vamos a establecer la posición en absoluto. Y también necesitamos aquí posición relativa para el elemento padre, que es una lista de datos. A continuación, usemos flexbox. Tenemos que cambiar la dirección. Va a ser columna. Entonces aquí tenemos los ítems de datos. A continuación voy a seleccionar el primer elemento de datos. Pongamos la posición a cero. En cuanto a la siguiente posición va a ser cero así como duplicar este código dos veces. Cambia los números aquí. Tenemos que posicionarnos para ser del 50 por ciento. Para el segundo ítem es para la posición izquierda va a ser 50% también. Y también, voy a utilizar aquí transformar traducir para centrar el elemento perfectamente Los valores que voy a costar aquí, -50 por ciento y nuevamente -50 por ciento cuanto al tercer ítem, necesitamos aquí, la posición inferior sea cero y la posición Y va a ser cero también. En realidad, no veo aquí el tercer ítem. Comprobaremos el código. Sí, tenemos que cambiar el número. Bien, entonces ahora todos los elementos, quiero decir, todos los ítems están alineados. A continuación, vamos a Estilo de esos artículos. Seleccione datos, elemento, elementos de extensión. Pero el primero, cambiemos el tamaño de la fuente. Va a ser a RAM. Aquí necesitamos transformar texto, mayúsculas. También en algún espacio entre las letras. Vamos a configurarlo para que apunte a carnero. A continuación, necesitamos color. Yo sólo voy a ser 777. Así que aquí tenemos los primeros elementos span dentro del elemento de datos. Duplica este código, cambia el número. Aquí, F niño a que la font-familia va a ser. ¿Puede sans-serif? Entonces necesitamos font-size para ser 20 RAM. Deshazte de la transformación fiscal. Además, no necesitamos ese espaciado. Pongamos el color que voy a usar columna derecha. Y además de eso, voy a usar la altura de línea. Vamos 321. ¿Bien? Entonces, como puede ver, los elementos de datos están personalizados. Se ven bastante bien. Y ahora tenemos que escribir algo de JavaScript. Voy a seleccionar un par de variables distintas. El primero va a ser inicio, que será falso por defecto. Entonces voy a seleccionar datos. Estoy en el elemento de sección. Además de eso, necesitamos seleccionar números usando el método QuerySelector all Y como el nombre de la clase, voy a pasar aquí Num. Después de eso, voy a crear una función start count. Vamos a insertar aquí elementos de parámetros. Entonces necesitamos crear una variable que va a ser max. Y en realidad será el valor del atributo data que colocamos aquí en el archivo HTML. A continuación, voy a crear una variable llamada count. Y voy a usar el método setInterval. Ahora tenemos que aumentar el contenido de los elementos en uno usando el operador de incremento, el plus, más Entonces declaraciones IF en las que tenemos que verificar si contenido de los elementos es igual a max, que es el valor del atributo. Si es cierto, entonces tenemos que borrar el intervalo como el intervalo. Voy a colocar aquí cinco milisegundos. También necesitamos la declaración IF aquí para definir el evento scroll. Es decir, si ventana el scroll ¿por qué es mayor o igual a los datos de la parte superior -300 píxeles otra parte, necesitamos si las declaraciones en las que tenemos que pasar el valor booleano comienzan con el operador NOT, y luego tenemos que recorrer los números usando para cada ayudante de matriz Tenemos que llamar a la función start count usando el parámetro numb Y entonces tenemos que establecer el valor booleano de inicio en true. ¿Bien? Tenemos que arreglar ese pequeño problema aquí. Necesitamos el contenido del texto. Entonces, como puedes ver, los Contadores funcionan bien. Ahora bien, si Y vuelve a cargar la página y se llama hacia abajo, llega a la Sección de Datos, entonces los números contarán inmediatamente Entonces aquí está. Bien, entonces eso es todo. Pasemos a la siguiente conferencia. 38. Proyecto 4: crea y personaliza el pie de página del sitio web: Bien, así que ahora es el momento de seguir adelante y robusto Crear la última parte del Proyecto, que está llegando a ser un Pie El Pie de Página va a ser sencillo. Vamos a insertar nuevos comentarios para el Pie de Página. Entonces voy a abrir la etiqueta de pie de página HTML5, en la que necesitamos la etiqueta DIV con el nombre de la clase Pie de página. Redes sociales. Voy a instituir iconos Font Awesome. Me refiero a los iconos de las redes sociales Font Awesome. Agarremos este código de aquí y lo peguemos aquí abajo dentro del desarrollo. A continuación, voy a abrir el elemento de encabezado H1 con el texto. Contáctame. También, necesitamos aquí un enlace. Va a ser y Smith en design.com, alguna dirección de correo electrónico de Tammy Después de eso, voy a abrir un párrafo con derechos de autor de clase, en el que necesitamos algún texto de copyright. Derechos de autor seguidos del signo de copyright. Entonces necesitamos 2023, todos los derechos reservados. Textos estándar de derechos de autor. Y también voy a instituir hecho por código y Create, que se colocará en el lapso. Bien, entonces eso es todo. Todos los elementos se crean para el Pie de Página. Ahora, tenemos que seguir adelante y darles estilo usando CSS. Vamos a instituir tus comentarios para el Pie de Página. Después voy a seleccionar la etiqueta de pie de página. Vamos a establecer con el 200 por ciento. Entonces necesitamos la altura. Van a ser 50. Pones altura. También voy a usar Flexbox. Cambiemos de dirección, conviértalo en una columna. Y también voy a usar justify-content center para poder enviar a los ítems horizontal y verticalmente usando align items verticalmente usando align Bien, entonces aquí tenemos los elementos alineados muy bien. A continuación, voy a seleccionar las redes sociales, el wrapper. Vamos a usar de nuevo los libros de flujo. Entonces necesitamos margen en la parte inferior para ser tres RAM. A continuación voy a Personalizar los íconos. Me refiero a los elementos I. Empecemos con 25 RAM. Entonces necesitamos altura para ser cinco RAM. Vamos a crear los círculos. Entonces voy a cambiar el color de fondo. Usemos 262626. También. Hacer el elemento redondeado usando border-radius que presente Bien, a continuación, voy a usar flexbox para centrar los iconos dentro de los círculos usando justify-content center Centro. Además, vamos a crear algo de espacio usando el margen 0.1 RAM en los lados izquierdo y derecho. A continuación voy a cambiar el tamaño de la fuente. Va a ser para correr. También cambia el color. Usa aquí 777. Bien, entonces aquí tenemos íconos de redes sociales Se ven bien. A continuación voy a encargarme del encabezado H1 y vamos a cambiar el tamaño de la fuente. Va a ser RAM llena. Entonces voy a usar el color blanco. También. Crea algo de espacio entre las letras. Vamos a configurarlo para que apunte a rampa. Entonces necesitamos margen en la parte inferior para correr. Entonces el rumbo se ve bastante bien. Entonces tenemos que encargarnos del elemento link y establecer el tamaño de fuente en, para ejecutar también cambiar el color. Usa aquí, D, D, D. Entonces necesitamos margen en la parte inferior. Hagámoslo tan RAM. Entonces aquí tenemos el elemento link. Por último, tenemos que cuidar el párrafo. Entonces eso se selecciona usando derechos de autor. Cambiar el tamaño de la fuente. Va a ser 1.6 RAM de lo que necesitamos color para ser CCC. A continuación, voy a seleccionar elementos span, que se coloca dentro del párrafo. Vamos a cambiar la familia de fuentes. Se va a contar san-serif. Y luego voy a cambiar el tamaño de la fuente. Va a ser para correr. También necesitamos aquí color. Ser leído. Llegó la celda que se encuentra por encima del Pie de Página. Se ve bastante bien. Y en realidad con el proyecto ya terminamos. Lo único que tengo que hacer es que sea sensible a diferentes tamaños de pantalla. 39. Proyecto 4: convierte el proyecto en receptivo: Bien, así que hemos terminado crear todas las secciones de este proyecto, y ahora es el momento de hacer que el proyecto sea receptivo a diferentes tamaños de pantalla. Voy a inspeccionar la página y cambiar al modo responsive. Entonces tenemos que encontrar los puntos de interrupción sobre los que tenemos que hacer algunos cambios para el Proyecto Se puede ver en tamaños de pantalla más pequeños, algunas de las partes del proyecto están en mal estado, así que tenemos que encargarnos de eso Volvamos al archivo CSS. Y antes que nada, voy a instituir comentarios para el modo responsive. Después voy a crear una nueva media query CSS, en la que voy a especificar max-width como 1,500 pixeles Entonces, antes que nada, vamos a disminuir el tamaño de fuente del elemento HTML. Hagámoslo 55 por ciento porque hará que todos los elementos sean más pequeños. En realidad, tenemos que cuidar el rectángulo para necesitar cambiar su posición. Seleccionemos Herramienta Rectángulo y fijemos mi posición en -15%. En realidad, creo que todas las demás secciones se ven bien. Para que podamos encontrar otro punto de quiebre. Por lo que el siguiente punto de interrupción va a ser de 1,300 píxeles. Vamos a crear una nueva consulta de medios CSS y especificar aquí el ancho máximo como 1,300 En primer lugar, vamos a disminuir nuevamente el tamaño de fuente para el elemento HTML. Voy a fijarlo al 50%. Entonces nuevamente, los elementos se hicieron más pequeños. A continuación, voy a encargarme de la sección Acerca que se trata de izquierda y fijaré su ancho en 35 por ciento. En cuanto a la derecha aproximadamente, voy a establecer su ancho en 65%. Por lo que ahora la sección Acerca se ve bien. A continuación, voy a encargarme de la cartera. Yo sólo soy obras. Empecemos con el porcentaje de esta noche. Entonces ahora tenemos mejores resultados. También, voy a encargarme de la sección de datos. Vamos a establecer el ancho de los datos conduce al 70%, ¿verdad? Entonces creo que eso es todo. Comprobemos la Navegación. Todo se ve bien. Sigamos adelante y encontremos el siguiente punto de ruptura. Entonces el siguiente punto de ruptura, creo que va a ser de 1,100 pixeles Vamos a crear una nueva consulta de medios CSS. Establezca el ancho máximo en 1,100 píxeles. De nuevo, voy a disminuir el tamaño de fuente de los elementos HTML. Vamos del 30 al 45%. A continuación voy a tomar aquí de la Sección Acerca de. Seleccione Acerca de los elementos de encabezado H1 derecho y cambie el tamaño de fuente. Va a ser 15 RAM. Además, voy a cambiar las dos posiciones que necesitamos aquí, -18 RAM Entonces voy a duplicar este código. Seleccione H, tres elementos de encabezado. El tamaño de fuente a 3.5 RAM. Como la posición del polítopo va a ser menos nueve rampa. Bien, entonces ahora la sección Acerca se ve bien. A continuación, voy a encargarme de la sección de datos. Vamos a seleccionar el elemento span de lista de datos. En este caso, el segundo elemento span. Vamos a establecer el tamaño de fuente en 16 RAM. Entonces ahora tenemos mejores resultados Y en realidad podemos seguir adelante y encontrar el siguiente punto de interrupción Entonces creo que el siguiente punto de interrupción va a ser de 900 píxeles Vamos a crear una nueva consulta de medios CSS y especificar aquí el ancho máximo como 900 Sigamos adelante y seleccionemos el rectángulo uno. Voy a establecer la posición de Suerte en -40 carreras. Entonces sigamos adelante y seleccionemos el rectángulo dos. Se va a establecer la posición correcta en -25 por ciento. Después voy a seleccionar diseñador y establecer su posición en rampa 15, estoy en la posición izquierda. Entonces necesitamos aquí Icono de menú. Vamos a cambiar la posición correcta va a ser 15 RAM. Entonces ahora tenemos mejores resultados. Vamos a encargarnos de la Navegación, que en estos momentos no se ve del todo bien. Entonces voy a seleccionar Navegación dejó configuración con 250 por ciento. Entonces voy a seleccionar el lado derecho y establecer su ancho en 50 por ciento también. Bien, entonces ahora mismo, la Navegación no se ve bien Nuevamente, seleccionemos elementos de encabezado H1, que se colocan en el lado derecho. Usemos Transformar. Traducir Y. voy a moverlo. Lo sentimos, necesitamos aquí traducir X e Y. Usemos -50 por ciento Y también voy a usar posición relativa. A continuación, tenemos que establecer con el 200 por ciento. También vamos a alinear el centro del texto. Después de eso, voy a seleccionar menos Navegación. Vamos a moverlo usando Transformar, Traducir X -50%, y luego usar de nuevo text-align A continuación, voy a encargarme de la sección Acerca de. Seleccionemos Acerca de la izquierda y la altura ocho usando display none. A continuación necesitamos sobre lo correcto, y tenemos que establecer el ancho al 100%. Ahora, la sección Acerca de se ve bien y también la Navegación se ve bien. Bien. Entonces, sigamos adelante y cuidemos el lado derecho del elemento de encabezado de sección Acerca Pongamos la posición izquierda al 50 por ciento. Además, necesitamos centrarlo usando Transformar Traducir X -50 por ciento A continuación, tenemos que encargarnos del segundo rubro, elemento h3 rumbo Cambiemos su posición de rezago va a ser del 35%. Ahora, todo se ve bien. A continuación, voy a seleccionar Info y establecer su posición izquierda en 50%. Ahora, entonces necesitamos centroide usando Transformar Traducir X -30% ¿Bien? Después de eso, voy a encargarme de esta Sección de Servicios. Seleccionemos la lista Servicios y establecemos su ancho en 90%. A continuación, vamos a encargarnos de la cartera. Voy a seleccionar obras y establecer su ancho al 100%. Además, voy a seleccionar Work Info y establecer su ancho en 50 por ciento. Yo creo. Se ve bien. Y en realidad, con este punto de ruptura, hemos terminado. A continuación, tenemos que encontrar el siguiente punto de interrupción, que creo que va a ser de 700 píxeles Así que vamos a seguir adelante y crear nueva media query CSS Y especifique aquí el ancho máximo como 700 píxeles. Al principio, vamos a disminuir el tamaño de fuente para los elementos HTML. Voy a llegar al 40 por ciento. A continuación, voy a seleccionar diseñador y establecer su posición izquierda en ocho RAM. Y también necesitamos ícono de Menú. Es la posición correcta. También va a ser atrio . Bien. Tenemos que encargarnos de los toboganes. Me refiero al segundo encabezamiento. Así que vamos a seleccionar el elemento de encabezado H1 y disminuir el tamaño de la fuente, que sea cinco RAM. Entonces ahora se ve bastante bien. A continuación tenemos que trabajar en la sección de Servicios. Así que sigamos adelante y seleccionemos Servicios. Cambiar la altura va a ser 90, altura de la ventanilla. Por lo que necesitamos seleccionar Servicios, listar y cambiar la dirección del flexbox Hagámoslo columna. Y también, necesitamos alinear los artículos al centro. Entonces los artículos se colocan verticalmente, pero necesitamos algo de espacio entre los artículos. Entonces usemos margen, fondo con valor. Tres rondas. ¿Bien? Entonces creo que eso es todo sobre este punto de ruptura. Y tenemos que encargarnos del último punto de quiebre. Así que vamos a seguir adelante y crear una nueva consulta de medios CSS. El ancho máximo va a ser de 500 píxeles. Seleccionemos el rectángulo uno y cambiemos la posición de retraso. Va a ser -70%. Entonces necesitamos un rectángulo para cambiar su posición correcta. Voy a fijarlo en -50 por ciento. Entonces se ven bien. A continuación voy a encargarme de la Navegación. Sigamos adelante y seleccionemos Navegación la izquierda y hazlo oculto. Y ahora tenemos que alinear correctamente el lado derecho. Entonces, seleccionemos lo suficiente, correcto, y fijemos su ancho al 100%. Ahora, los artículos se colocan en el centro de la Navegación. Bien. A continuación tenemos que encargarnos de la cartera. Seleccionemos Trabajo y asignemos al centro de alineación de elementos. Además, necesitas aquí Imagen de trabajo. Voy a establecer su ancho en 60%. A continuación voy a seleccionar Work Info y hacerlo oculto. Comprobemos los proyectos. Entonces ahora creo que tenemos resultados mucho mejores. A continuación, voy a encargarme de los elementos de datos. Es decir, el segundo ítem, elemento de lapso de año. Cambiemos el tamaño de fuente, hazlo 12 rampa. Bien, así que creo que todo está listo y el proyecto responde a todos los diferentes tamaños de pantalla. Espero que hayan disfrutado de este proyecto y aprendan algo nuevo. Entonces, sigamos adelante y construyamos el siguiente proyecto. 40. Proyecto 5: vista previa: Hola y bienvenidos a nuestro próximo proyecto. En esta sección, vamos a estar construyendo un sitio web sobre coffee house. El proyecto constará de un par de partes diferentes y estará lleno de diseños y funcionalidades de aspecto moderno . Sigamos adelante y describamos el Sitio Web. Comenzaremos con una Navegación que se fija en la parte superior de la página. Una vez que nos desplazemos hacia abajo, cambiará su fondo muy bien. Después de que la Navegación funcione en el Banner, que tiene una Presentación de Diapositivas, vamos a usar uno de los plug-ins llamados swipe, eso Como puedes ver, la Presentación de Diapositivas funciona automáticamente. Pero además de eso, puedes usar esos controladores. Y también puedes arrastrar las diapositivas con un ratón. Bien, A continuación tenemos una Sección Acerca de con alguna información. A esta sección le sigue un Menú. Después de eso, tenemos algunos datos con Contadores Animados y con algunos buenos efectos sobre. La siguiente sección será sobre los clientes que tenemos aquí las Opiniones de clientes colocadas por Koch muy bien A continuación viene la sección Contacto, donde se puede contactar con la casa o reservar una mesa. Y por último, tenemos aquí una muestra de Pie de página. El proyecto responde a diferentes tamaños de pantalla. Si inspecciono la página, cambie al modo de respuesta y verifique el proyecto cuatro tamaños de pantalla diferentes. Encontrarás que el proyecto es Responsive y se ve bien en promedio, diferentes tamaños de pantalla. Nuevamente, al igual que los otros proyectos, este se crea para pantalla extra grande de tamaño dos. Estoy en esto coincide con 1920 pixeles de ancho antena a pixeles de altura Entonces, si estás usando un tamaño de pantalla relativamente más pequeño, entonces durante las conferencias, debes cambiar al modo de respuesta y especificar el ancho y la altura así. De lo contrario, el proyecto no se verá bien en un tamaño de pantalla más pequeño hasta que lo hagamos receptivo. Entonces, por favor, tómalo en cuenta. Bien, entonces estamos listos para comenzar a construir el proyecto. Sigamos adelante. 41. Project 5: crea y crea navegación con estilo: Bien, entonces es momento de comenzar a construir los proyectos. Voy a abrir carpeta en VS Code. Y luego voy a crear nuestros archivos de trabajo para HTML, CSS, y también para JavaScript. Entonces vamos a seguir adelante y abrir archivo index.html y crear documento HTML básico. Antes que nada, sigamos adelante y cambiemos el título. Va a ser cafetería. Entonces voy a enlazar Archivos. Vamos a abrir la etiqueta script y especificar el nombre del archivo y el atributo source. Entonces voy a abrir el Navegador de Proyectos. A continuación, vamos a agarrar algunos enlaces. Quiero decir, link para iconos Font Awesome, porque vamos a usar esos iconos a lo largo del proyecto. Vamos a abrir la etiqueta de enlace y pegar la CDN en el atributo de referencia H. Coloquemos el editor y el navegador uno al lado del otro Así. A continuación, voy a visitar el sitio web de Google Fonts porque vamos a usar algunas fuentes de Google. Y el proyecto. Sigamos adelante y busquemos la fuente de Google llamada great wipes. Seleccionemos este mosaico. A continuación, voy a buscar otra fuente de Google, que es Poppins Selecciona un par de estilos diferentes. Después copia el enlace y pégalo en el elemento head. Después de eso, voy a agarrar el link force wiper dot JS porque vamos a usar este plug-in durante todo el proyecto. Entonces vamos a agarrar este enlace, pegarlo en el elemento head. Y además de eso, necesitamos agarrar el enlace JavaScript y tenemos que pegarlo encima de la pantalla. Tortura. Sí. Bien, así que estamos listos para comenzar Insertemos comentarios para el contenedor. A continuación, voy a abrir la etiqueta DIV con un contenedor de clase. Entonces necesitamos comentarios para la Navegación. Abramos suficiente TOC con una barra de navegación de nombre de clase. Va a insertar tu etiqueta DIV, que va a ser un logo. Dentro del logo, voy a abrir una etiqueta con la clase es una fase sólida como una taza Saltzer Y además de eso, necesitamos texto de logo. Estoy en el desarrollo en el que tengo etiqueta span con el café de prueba y luego otra casa span. Eso es todo sobre el logo. A continuación voy a crear la Navegación. Menos, vamos a insertarte elementos de enlace. Sólo vamos a estar en casa. Duplicemos el enlace un par de veces, luego cambiemos el texto. El segundo va a ser Menú. Entonces tendremos Blog sobre. También. Tenemos aquí agudo. Entonces Contacto. Además de eso, voy a insertar otro enlace cual tendrá un icono de Font Awesome con la clase es una fase sólida FA, cogido de compras. En realidad, el icono no es visible. Entonces tenemos que arreglarlo. Hay un problema. Bien, entonces ahora todo funciona bien. A continuación, voy a encargarme del Desembarco. Estoy en el Encabezado del Sitio Web. Vamos a insertar nuevos comentarios y luego abrir elemento Section con un nombre de clase Landing. Necesitamos aquí y elementos profundos, que va a ser Banner, en el que voy a abrir elemento h3 heading con el encabezado principal de la clase El texto va a ser bienvenido. Y también necesitamos otro encabezado va a ser H1, con el texto increíble Sabor y hermoso lugar. A continuación necesitamos párrafo con algún texto ficticio. Y también voy a insertar tus botones con el nombre de la clase Banner BTN Y también necesitamos aquí Banner BTN uno. Vamos a insertar tu pedido. Ahora. Voy a especificar el tipo que va a ser botón. Y necesitamos aquí el segundo con el nombre de clase Banner entre dos. Para el texto. Va a ser Ver menú. Justo después de eso, voy a encargarme de la Presentación de Diapositivas Necesitamos aquí etiqueta DIV con la clase swipe, en la que voy a insertar swipe o wrapper. Y también necesitamos aquí el nombre de segunda clase ratones limpiaparabrisas. Dentro de esta envoltura limpiaparabrisas, voy a abrir el elemento Div, que va a ser deslizado por diapositiva Y luego te voy a colocar imagen. Seleccionemos la imagen de la carpeta de imágenes. Va a ser imagen1. Entonces voy a duplicar, deslizar dos veces y cambiar los nombres de la imagen que necesitamos imagen a una imagen tres. A continuación, te voy a llevar de la paginación. Me refiero a los controladores. Después del Swiffer, necesitamos Contacto de Aterrizaje. Vamos a Instituto U DIV etiqueta con los detalles de la clase en la que voy a abrir, me llevo la clase es un telefono fa solido. Entonces necesitamos aquí profundo en el que voy a insertar elemento span con algún número de teléfono ficticio A continuación necesitamos otro span en el que vamos a insertar algún texto ficticio Bien, dupliquemos esto. Desarrollo. Cambiar el icono Font Awesome. El segundo va a ser fa, punto de ubicación. Además, deshagámonos de esos números de aquí. Y deberías alguna dirección ficticia. El segundo elemento span. Voy a sobrevenir contra ellos. Falsa ubicación ficticio. Después de eso, vamos a cambiar el tercer icono va a ser si un reloj, vamos a deshacernos de los números y usarlo para ti. Texto abierto lunes, viernes. En cuanto al segundo elemento span y va a ser el texto. Por favor. Únete a nosotros. Estamos disponibles de 08:00 AM a 09:00 P.M. Bien, En realidad, eso es todo Acerca del marcado HTML. Voy a empezar a escribir el CSS. Vamos a Instituir comentarios para estilos predeterminados. Después voy a seleccionar cada elemento usando un asterisco. Y como de costumbre, voy a poner margen y relleno a ambos a cero. A continuación, voy a establecer box-sizing border-box. Entonces tenemos que deshacernos decoración de texto por defecto, también del contorno. Y luego voy a establecer la familia de fuentes para cada elemento a Poppins, Y además de eso, necesitamos cambiar el tamaño de fuente del elemento HTML porque vamos a usar RAM como unidad de medida. Vamos a establecer el tamaño de la fuente en 62.5 por ciento. Entonces esos estilos predeterminados se aplican a los elementos. A continuación, voy a insertar comentarios para el contenedor. Entonces seleccionemos Desarrollo para el contenedor de clase definido la forma que va a ser 100% y la altura también será 100%. Además, te voy a instituir comentarios para el Desembarco. Porque ahora mismo voy a ocultar el Banner en absoluto usando display none. ¿Bien? A continuación, voy a insertar los comentarios para la Navegación. Sigamos adelante y seleccionemos navbar. Establezca su ancho 200 por ciento. Para la altura, va a ser de 10 g. A continuación, necesitamos aquí la posición se va a arreglar. Entonces la posición dos será cero. En cuanto a la posición izquierda, va a ser cero también. Ahora mismo, la barra de navegación no es factible. Arreglemos eso usando el valor de propiedad índice 100. Entonces tenemos aquí la Navegación. A continuación, usemos flexbox. Necesitamos justificar el espacio de contenido manera uniforme y también alinear los elementos en el centro para centrar los elementos verticalmente. A continuación, voy a crear borde en la parte inferior con el valor es 0.1, correr sólido, y el color va a ser RGBA, color blanco con una menor opacidad Entonces aquí tenemos el borde y también los artículos están muy bien alineados. Siguiente Voy a seleccionar Logo. Usemos display flex. Entonces necesitamos alinear los artículos al centro. Y también cambiemos el cursor, hazlo un puntero. ¿Correcto? Después de eso, voy a encargarme de los elementos I. Me refiero al icono. Vamos a establecer el tamaño de fuente en foráneo. Además, voy a usar aquí webkit text, stroke. Vamos a configurarlo en 0.1 RAM, y el color va a ser blanco. Entonces voy a poner el color a transparente. Y también necesitamos margen en el lado derecho. Vamos a configurarlo en una corrida. Entonces tenemos aquí el icono con trazo de textos. Después voy a seleccionar el texto del logotipo y usar Flexbox. Cambiemos la dirección. Tenemos que colocar los artículos en la columna. Y también necesitamos alinear el texto desde el centro. Entonces tenemos aquí ambos elementos span. A continuación, voy a seleccionar el primer elemento span usando F selector hijo. Vamos a establecer el tamaño de fuente para que se ejecute. Entonces necesitamos que transforme el texto en mayúsculas. Entonces vamos a crear algún espacio entre las letras, pero 32.1 redondas Y también cambiar el color. Voy a usar el color blanco. Entonces, como puedes ver, el primer elemento span se ve bastante bien. Duplicemos este código. Cambiar el nésimo número hijo. Va a ser para cambiar el tamaño de fuente. Voy a venderlo a un punto por RAM. Y también, cambiemos el color, hazlo E. Además de eso, necesitamos margen en la parte superior. Vamos a agregarlo a la rampa -0.7. Entonces el logo se ve bastante bien. A continuación, voy a encargarme de la Navegación. Vamos a seleccionar el elemento de enlace. Establezca el tamaño de fuente en un punto para la RAM. Entonces necesitamos que la transformación del texto sea mayúscula. Además, pongamos color a E y necesitamos margen en el lado derecho. Va a ser tres rampas. ¿Bien? Después de eso, voy a crear algún espacio entre las letras. Vamos a configurarlo para que apunte a RAM. A continuación, voy a seleccionar una almendra con hover. Al flotar, voy a cambiar el color. Va a ser C4, nueve. P63. También use transición para un efecto suave. Entonces, una vez que pasemos el cursor sobre el elemento de navegación , el color estándar se cambiará Voy a seleccionar el primer elemento de Navegación porque quiero establecer su color por defecto al color que usamos aquí. A continuación, voy a encargarme del último elemento de lo menos. Quiero decir, el carrito de compras. Vamos a su tamaño de fuente. Que sea 1.8 RAM. Entonces el ícono se hizo más grande. Y luego voy a usar después de pseudo elementos. Vamos a establecer el contenido en uno. Entonces voy a cambiar el ancho. Va a ser 2.5 RAM que la altura será 2.5 RAM también. Voy a cambiar el color de fondo. Vamos a usar aquí color FFC 107. Va a ser de color amarillo. Entonces voy a establecer posición a posicionamiento absoluto relativo para los elementos padre. Entonces tenemos aquí después del elemento, Vamos a cambiar la posición. La posición de dos va a ser -1.5 RAM de la que tendremos la posición izquierda Va a ser una RAM. También. Voy a hacer que los elementos sean redondeados. Y luego tener que cuidar los contenidos. Vamos a configurar la pantalla para flexionar. Luego use justify-content center y alinee los elementos. Centro. Además, voy a cambiar el color. Hagámoslo 222. Y por último, voy a cambiar el tamaño de la fuente. Vamos a agregarlo a un punto para correr. Bien, así que eso es todo sobre la Navegación. A continuación, tenemos que encargarnos del Landing 42. Project 5: crea presentaciones con Swiper.js: Bien, así que una vez que terminemos con la Navegación, ahora es el momento de seguir adelante y encargarnos del Aterrizaje En realidad, vamos a deshacernos de esto, vamos de aquí. Y seleccione Aterrizaje. Voy a establecer con el 200 por ciento. Eso es bastante alto. Va a ser el 95. Altura de la vista A continuación, voy a seleccionar Banner. Fijemos la posición a absoluta. Entonces necesitamos posicionar relativo para el elemento padre. A continuación, voy a fijar a la posición en 20%. Entonces esa posición va a ser del 50%. Y para centrar los elementos horizontalmente, necesitamos transformar traducir X con -50 por ciento Entonces en este momento el Banner es visible. Arreglemos eso usando el valor de propiedad índice 100. Entonces aquí tenemos el Banner. Vamos a establecer el texto en el centro usando text-align center. Y luego voy a seleccionar el encabezado principal. Dice Bombe familia dos, grandes vidas. Cursiva. Entonces voy a establecer el tamaño de la fuente para que caiga. Ran el peso de la fuente va a ser de 300, y voy a cambiar el color. Vamos a usar aquí es color. Bien, a continuación, seleccionemos Banner, elementos de encabezado H1. Entonces tamaño de fuente a seis RAM, luego peso de fuente, va a ser 400. Además, voy a transformar texto en mayúsculas. Después cambia el color. Va a ser blanco. Entonces aquí tenemos el rubro. Es decir, la segunda partida. Siguiente. Voy a crear algunos espacios en margen con valores a RAM y cero. Y también voy a cambiar la altura de la línea. Va a ser 1.5. Y crear algo de espacio entre las letras. Vamos a ponerla a punto para correr. Bien. A continuación, voy a seleccionar el párrafo del Banner. Vamos a establecer el tamaño de fuente a 1.5 RAM de lo que el peso de la fuente va a ser 300. Además, voy a cambiar el color, va a ser blanco. Después configura con 260 RAM. Además, voy a usar margin con valores cero y auto que a RAM y ROM también. Entonces él tendrá el párrafo y ahora tenemos que crear algún espacio entre las letras. Vamos a ponerla en rampa 0.1. ¿Correcto? Después de eso, voy a encargarme de los botones. Seleccionemos ambos botones. Establecer ancho a 12 RAM que la altura va a ser 5.5 rampa. Entonces voy a poner rumbo, vamos a dos apuntador. Entonces. El margen va a ser 0.1 RAM. Y necesitamos font-size para ser un punto para la RAM, así los botones se ven mejor A continuación, voy a seleccionar el primer botón. Cambiar el color de fondo. Usa aquí ese color dorado del que necesitamos borde para ser. Ninguno. Cambiar el color del texto. Que sea de dos a dos. Entonces el primer botón se ve bastante bien. A continuación, voy a duplicar este código, cambiar el nombre de la clase, y Personalizar el segundo botón. Voy a hacer que el color de fondo sea transparente de lo que el borde va a ser 0.1 RAM sólido. Y ves aquí el color blanco. En cuanto al color del texto, también lo voy a hacer blanco. Bien. Entonces ambos botones se ven bastante bien. Seleccionemos el primer botón con hover, voy a cambiar el color de fondo Hagámoslo transparente. Y también cambiar el color del texto. Hazlo dorado. A continuación, voy a establecer borde 2.1 RAM, sólido, y el color va a ser c4963 Vamos a copiar este código. Cambiar el nombre de la clase Entonces el color de fondo, va a ser Dorado que el color de los textos. Vas a ser de dos a dos. Entonces voy a usar la propiedad de transición para que el hecho sea más suave. Entonces, si pasamos el cursor sobre las partes de ellas obtendremos este bonito y genial efecto Después de eso, voy a encargarme de la presentación de diapositivas. Vamos, vamos a limpiarnos. Dicha espera al 100% que la altura va a ser del 85%. También, voy a seleccionar. Entonces me deslice seguido de la imagen. Vamos a establecer el ancho al 100 por ciento. La altura va a ser del 100%. Y también tenemos que ajustar la imagen usando objetos de alimentación de la cubierta. Así que tienes la imagen con nuevo ancho y alto. Ahora es el momento de escribir algo de JavaScript. Vamos a crear una variable. Se va a deslizar Voy a usar algún código listo por defecto para la presentación de diapositivas que necesitamos crear aquí Objeto noticias limpiaparabrisas a tus nombres de clase limpiaparabrisas. Entonces necesitamos aquí y otros objetos con la propiedad auto-play, que incluirá objeto como valor Necesitamos aquí, retraso de propiedad con 4,000 s. A continuación, necesitamos otra propiedad deshabilitada en la interacción. Va a ser falso. Entonces voy a crear aquí nueva propiedad con un valor, el destino, me refiero a Effect Fade. Entonces necesitamos loop, lo cual va a ser cierto. También. Ir a instituir la paginación Aquí, un elemento objeto va a ser swipe o estoy en el nombre de la clase, swipe o paginación A continuación, necesitamos propiedad llamada clickable, solo va a ser verdad Así que ahora, como puedes ver, la presentación de diapositivas funciona bien y la paginación también funciona bien Bien, Siguiente voy a Personalizar los círculos abajo. Me refiero a los controladores de paginación. Necesitamos seleccionar span dot, swipe o paginación bullet Vamos a establecer el ancho a dos RAM de lo que va a ser la altura. Para carnero también. Necesitamos opacidad para ser uno. A continuación me voy a sentar margen en el lado derecho, 1.5 RAM. Necesitamos aquí importante aplicar este código. Entonces el color de fondo va a ser AA. Entonces necesitamos aquí posición para ser relativos. Entonces ahora el control esto se ve mejor. A continuación, voy a copiar el nombre de la clase y adherirme después de pseudo elementos Agreguemos contenido para vaciar. Entonces necesitamos con que sea 2.5 RAM. La altura va a ser 2.5 desde también. Entonces necesitamos Parte la tasa que solía ser si está presente porque necesitamos hacer círculos. Vamos a establecer la posición en. Absoluto. La posición va a ser del 50%. La posición neta también va a ser del 50 por ciento. Y luego para poder enviar al elemento perfectamente cuando se transforma, traduce con valores -50% y otra vez, -50 por ciento que el color de fondo va a ser transparente Y necesitamos aquí los puntos de borde a RAM sólida y el color va a ser AA. Entonces ahora las balas, quiero decir, los controladores se ven bastante bien. A continuación, voy a copiar el nombre de la clase. Vamos a pegarlo aquí. En realidad, necesitamos pegarlo dos veces, luego deshacernos del elemento span del selector y adherir activo. Entonces, una vez que la bala está activa, necesitamos cambiar el color de fondo. Vamos a agregarlo al blanco. Entonces voy a duplicar este código y Adherirse después de pseudo elementos Entonces, una vez que la bala está activa, tenemos que cambiar el borde por los pseudo elementos posteriores Es decir, el color de la frontera. También va a ser blanco. Entonces ahora se puede ver que todo funciona bien y con este limpiaparabrisas Slideshow, ya terminamos A continuación, voy a seleccionar Contacto de Aterrizaje, Establecer posición en absoluto. Entonces para posicionar va a ser H 5%. La posición izquierda va a ser cero. Además, voy a establecer el ancho al 100%. Y la altura va a ser de 15. Altura de la vista. Cambiar el color de fondo. Voy a usar aquí el color negro. Entonces aquí tenemos el lado inferior del Aterrizaje, me refiero al Contacto de Aterrizaje. Usemos flexbox. Aquí necesitamos justificar el contenido con valores pegados de manera uniforme. Necesitamos incluso espacio entre los elementos flex y también tenemos que alinear los elementos en el centro verticalmente. A continuación, cambiemos el color, hazlo blanco. Entonces aquí tenemos los detalles. En realidad nos falta aquí el icono de Font Awesome. Comprobaremos el código. Necesitamos aquí ubicación. Entonces ahora, ahora el icono es visible. A continuación, voy a seleccionar detalles. Utilice de nuevo los libros de flujo. Entonces ahora el icono y elementos de texto se colocan uno al lado Después voy a seleccionar los elementos I, establecer el tamaño de fuente en, para correr de lo que va a ser el color. Colton. Además, voy a crear algo de espacio en el lado derecho. Vamos a acertar margen derecho a, para correr. Entonces como puedes ver, los íconos, se ven bien. A continuación, voy a seleccionar desarrollo dentro de los detalles. Vamos a configurar la pantalla para flexionar. Entonces tenemos que cambiar la dirección. Hagámoslo columna. Ahora tenemos que personalizar los elementos de texto. Sigamos adelante y seleccionemos el primer elemento de ruta usando el selector secundario F. Voy a cambiar el tamaño de la fuente. Va a ser 1.61. Entonces tenemos que cambiar el color. Hagámoslo blanco. Y también voy a usar margin bottom. Vamos a establecerlo en 0.5 para N. Así que los primeros elementos span se ven bien. Sigamos adelante y dupliquemos este código. Cambiar el enésimo selector hijo va a ser dos. Y tenemos que cambiar el tamaño de la fuente. Vamos a establecerlo en 1.4 y también cambiar el color, hacerlo BBB y se deshace del margen, fondo Ajusta el ancho a 2M. Bien, así que eso es todo. Acerca del Aterrizaje. Todo se ve genial. Sigamos adelante. 43. Project 5: crea y personaliza la sección Acerca de: Bien, así que sigamos adelante y comencemos a crear la siguiente sección de nuestro proyecto, que va a ser una sección Acerca Voy a entrevistar nuevos comentarios para la sección Acerca de. Y luego vamos a abrir la etiqueta de sección con el nombre de la clase sobre. Voy a instruir tu etiqueta DIV en la que tendremos icono Font Awesome con los nombres de clase fa, sólido, un móvil A continuación, necesitamos aquí elementos de encabezado H1 con el texto fácil de ordenar. Entonces el siguiente elemento va a ser un párrafo con texto ficticio Sigamos adelante y dupliquemos Desarrollo dos veces, y luego cambiemos el nombre de la clase. Su camión fa. El atrial Hannigan, lo que va a ser la a ser En cuanto a este tercer artículo, necesitamos aquí, una taza caliente. Vamos por el elemento H1, te voy a insertar café de calidad. Bien, así que eso es todo sobre el marcado HTML. Ahora, es el momento de no terminar, empezar a escribir algo de CSS. Voy a insertar nuevos comentarios para la sección Acerca de. Después voy a seleccionar Elemento Sección con una clase sobre. Vamos a establecer el ancho al 100% de lo que la altura va a ser 60 altura de ventana gráfica Cambiemos el color de fondo. Voy a usar aquí. Color dorado. Entonces necesitamos usar Flexbox. Vamos a Elon artículos en el centro y también usar justify-content Entonces se puede ver que tenemos aquí los elementos alineados muy bien. A continuación, voy a seleccionar desarrollo dentro del elemento de la sección About, que va a ser a través de RAM. Entonces voy a establecer la altura va a ser de 35 corridas. Además, voy a crear algún espacio usando margin con los valores cero o tres rampa y luego alinear el texto en el centro. Siguiente Voy a utilizar de nuevo Flexbox. Cambia la dirección, va a ser columna. Además, necesitamos alinear los elementos y centrar y justificar el espacio de contenido de manera uniforme. Entonces ahora tenemos resultados mucho mejores y tenemos dos Estilo a los elementos. Empecemos con el micrófono rápido y pongamos su ancho a nueve R& de lo que la altura va a ser diez RAM Cambiemos el tamaño de la fuente. Va a ser RAM llena. Además, te voy a usar Web Kit ataque trazo con un punto de valores a RAM, y el color va a ser 282727 Además de eso, tenemos que definir el color, hacerlo transparente. Bien, así que los iconos Font Awesome, se ven bien. A continuación, usemos border 0.1 RAM, sólido. El color a ocho a siete a siete. Entonces voy a enviar a los iconos Font Awesome usando Flexbox, justify-content center y align items center Bien, entonces eso es todo. Bueno, los iconos Font Awesome. A continuación, voy a seleccionar el elemento de encabezado H1. Vamos a establecer el tamaño de fuente dos para rampa. Entonces voy al peso predeterminado a 400. Transforma texto en mayúsculas. Después cambia el color. Te voy a usar del mismo color. Bien, Entonces tus encabezamientos se ven bien y voy a tener que personalizar el párrafo Vamos a establecer el tamaño de la fuente. Va a ser 1.5 RAM. Entonces necesitamos aquí el peso de la fuente. Va a ser a los 300. Cambia el color, hazlo a H7 a siete. Entonces, eso es todo. La sección Acerca de se ve bien y ahora podemos seguir adelante. 44. Proyecto 5: sección de menú de creación: Bien, entonces con la sección Acerca de, terminamos y ahora tenemos que seguir adelante Y así dos Crean la siguiente sección, que va a ser el Menú. Voy a insertar sus nuevos comentarios para la nueva sección. Y luego como de costumbre, voy a abrir etiqueta de sección con una clase Menú. Después dentro de este elemento de sección, voy a insertar una etiqueta DIV, que va a ser Menu left. El lado izquierdo de esta sección. Necesitamos aquí elemento de encabezado h3 con el encabezado principal de la clase Vamos a instituir estas cubiertas. Entonces necesitamos elementos de encabezado H1. Yo sólo voy a ser nuestro Menú. Siguiente. Voy a insertar aquí el párrafo con un texto ficticio Y también necesitamos aquí un botón. Tendrá clase Menú, BTN. También necesitamos el atributo type. Sólo vamos a ser Bateson. Para el texto. Yo voy al Instituto aquí. Ver Menú Completo. Justo después del desarrollo. Voy a crear otro, que va a ser Menú, ¿verdad? Necesitamos aquí Menú ¿verdad? Imágenes. Vamos a abrir la etiqueta DIV, que va a ser el envoltorio de imagen de menú. Este elemento incluirá cuatro imágenes diferentes. Seleccionemos el primero de la carpeta de imágenes. Va a ser la imagen cuatro. Entonces voy a duplicar este código tres veces y cambiar los nombres de las imágenes. Necesitamos la imagen cinco, la imagen seis, y luego la imagen siete. Bien, entonces en realidad, eso es todo sobre el marcado HTML. Ahora hay que seguir adelante y empezar a escribir el CSS. Vamos a instituir nuevos comentarios para el Menú. Después voy a seleccionar los elementos Section y establecer su ancho y alto. El ancho va a ser del cien por ciento. En cuanto a la altura, voy a hacerla 70 de altura de viewport A continuación, voy a seleccionar Menu Image wrapper para que la imagen sea más pequeña. Vamos a establecer con 225 RAM y la altura va a ser 25 RAM. A continuación, voy a seleccionar las imágenes y establecer el ancho al 100% y el alto al 100%. Además, necesitamos que se cubra la velocidad del objeto. Ahora se puede ver que tenemos imágenes relativamente más pequeñas. Vamos a establecer el fondo para el menú. Voy a usar la función de degradado lineal con color RGBA Estoy en el color negro con 0.9 opacidad. Y nuevamente necesitamos RGBA, color negro 0.8, me refiero a la opacidad A continuación voy a poner la imagen como fondo. Necesitamos seleccionar tu imagen ocho. Y también necesitamos una posición para estar al centro y no repetir. A continuación, voy a establecer el tamaño del fondo para cubrir. Entonces tenemos aquí la imagen como fondo de esta sección. A continuación, voy a usar flexbox. Necesitamos alinear los elementos en el centro. Entonces tenemos aquí las imágenes de artículos colocadas en el centro. A continuación, sigamos adelante y seleccionemos el lado izquierdo. Ajusta el ancho al 50%. También, voy a seleccionar Menú a la derecha, y establecer su ancho en 50 por ciento también. Bien, después de eso, voy a seleccionar Menú, ¿verdad? Imágenes, establece su ancho en 60 RAM. Y luego voy a usar flexbox. Necesitamos usar flex wrap con un valor rap para envolver las imágenes y alinearlas. Al igual que así. Vamos a crear algo de espacio entre las imágenes usando margen. Vamos a configurarlo en, a RAM. Además, necesitamos puntero de cursor para la propia imagen. Después de eso, voy a sacarte del lado izquierdo. Necesitamos centro de alineación de texto. Y también me voy a sentar margen en el lado derecho, 23 RAM. Entonces necesitamos margen izquierdo para el Menú, ¿verdad? El valor tres REM también. ¿Bien? En realidad, text-align debería ser correcto y no el centro aquí A continuación, voy a seleccionar Menú a la izquierda, seguido del encabezado principal. Vamos a establecer el tamaño de la fuente en seis RAM. Entonces el rumbo se ve bastante bien. Siguiente Voy a seleccionar Menú izquierda seguido del elemento de encabezado H1. Vamos a establecer el tamaño de la fuente en seis RAM. También en font-weight para ser 300. Entonces voy a transformar texto en mayúsculas. A continuación, voy a cambiar el color del encabezado. Va a ser blanco. Además, voy a establecer margin top a menos RAM completa. Entonces tenemos aquí el elemento de encabezado H1. A continuación, voy a seleccionar el párrafo y personalizarlo. En primer lugar, cambiemos el tamaño de la fuente. Va a ser un punto para corrió. A continuación, voy a cambiar el color del párrafo. Vamos a establecerlo en 777. Se trata de un color gris claro. A continuación, vamos a esperar a que sean 50 RAM. Y también me voy a sentar margen a RAM y cero, luego foráneo. Y voy a remar. ¿Bien? Entonces el párrafo se ve bien. Lo único que necesitamos aquí es line-height, el valor 1.2 ¿Bien? Después de eso, te voy a llevar del siguiente. Sólo vamos a ser botón Menú. Vamos a establecer el ancho a 15 corridas. Y la altura va a ser 5.5 RAM. Necesitamos color de fondo, que va a ser transparente. Entonces voy a establecer border 2.1 RAM. Sólido. El color, va a ser dorado. Entonces necesitamos color del impuesto para que se llame un también. Después cambia el tamaño de la fuente. Va a ser 1.3 RAM. Voy a transformar texto en mayúsculas. A continuación, establece el cursor para que apunte. Bien, Entonces el botón y real el lado izquierdo de esta sección se ve bastante bien. A continuación, voy a usar un efecto hover. Cambiemos el color de fondo. Voy a ponérselo a Dorado. Y también voy a cambiar el color de los textos. Vamos a establecerlo en 222 y luego usar la transición para el efecto suave. Así que tenemos aquí bonito sobre efecto. Ahora tenemos que cuidar el lado derecho. También voy a crear el efecto hover para las imágenes. Así que vamos a seleccionar Menu Image wrapper con hover y luego seguido por el selector de imagen, necesitamos transformar la escala con un valor 1.3 También, necesitamos la transición. Una vez que flotemos, enviemos, las imágenes deben ensancharse Usemos desbordamiento oculto para ocultar las partes de las imágenes. Ahora tenemos aquí muy bonito efecto y en realidad con la sección Menú, ya terminamos. Entonces, sigamos adelante. 45. Proyecto 5: crea y da estilo a la sección de datos con contadores animados: Bien, así que una vez que hayamos terminado con la Sección de Menú, ahora es el momento de seguir adelante y crear la siguiente sección Nosotros sólo vamos a ser los datos. Insertemos nuevos comentarios para la nueva sección. En esta sección contaremos con Contadores Animados. Vamos a abrir la etiqueta de sección con los datos de clase. Entonces necesitamos insertar la etiqueta U DIV, que incluirá el envoltorio de iconos. Volvamos a abrirlo con los nombres de las clases. Si un sólido, una taza caliente. A continuación, necesitamos aquí Elemento Style con el nombre de la clase. Puedo BG. Entonces tendremos otro elemento span con la clase numb, en la que necesitamos un atributo llamado data Bueno, vamos a insertarte algunos números. Digamos 350. En cuanto al valor por defecto, voy a pasar aquí cero. Entonces tendremos otro lapso con una información de clase en la que voy a en su lugar ramas de café. Duplicemos el desarrollo tres veces y luego cambiemos los números. Y también necesitamos cambiar el contenido de la info. Vamos a insertar tu número de premios. Entonces el siguiente elemento tendremos 25, 40 también. Este panel va a ser clientes contentos. Para el último ítem voy a insertar aquí, digamos 750 también. Esta cantidad final se va a quedar atascada. Bien, así que en realidad, eso es todo sobre el marcado HTML. Sigamos adelante y comencemos a personalizar esta sección. Voy a instituir nuevos comentarios para los datos. Después voy a seleccionar Elemento de sección y establecer con dos al 100%. La altura va a ser de 50 altura de ventana gráfica. Entonces necesitamos fondo para ser gradiente lineal. Voy a usar aquí el valor RGBA. Estoy en el color negro con punto de opacidad para. Y también necesitamos aquí y otro valor RGBA. Nuevamente, color negro con la opacidad 0.3. A continuación tenemos que seleccionar la imagen como fondo. Va a ser la imagen siete. Entonces tenemos que especificar la posición va a ser centro. Y además no necesitamos repetir. Y hemos definido el tamaño de fondo como cobertura. Bien, entonces aquí tenemos la imagen de fondo. A continuación, usemos flexbox. Voy a usar justify-content center y alinear items center en el centro del Aquí tenemos los artículos flex. A continuación, voy a seleccionar elementos. ¿Es Sección de Datos con va a ser 25 RAM, la altura será 30. Ran. Siguiente Voy a utilizar de nuevo Flexbox. Cambiemos la dirección. Va a ser columna. Y también necesitamos alinear los elementos y el centro. Entonces voy a usar justificar el contenido serán valores Pacioli Necesitamos crear un espacio uniforme entre los elementos flexibles. Siguiente voy a seleccionar I can wrapper y establecer su ancho como un Tran. Entonces la altura va a ser ocho RAM también. A continuación necesitamos más gruesa para ser puntero. Y ahora tenemos que seleccionar icono de fondo. Voy a usar el bloque de visualización. Y luego pongamos el ancho al 100%. Necesitamos alto para estar al 100% también. Entonces voy a usar la frontera. Va a ser 0.1 RAM sólida y el color será dorado. Entonces tenemos aquí puedo Antecedentes. Siguiente. Necesitamos seleccionar elementos. Esa es la posición a posición absoluta relativa para el elemento padre, que es el envoltorio de iconos. A continuación, voy a establecer la posición superior al 50%. Entonces necesitamos que la posición de Izquierda sea del 50 por ciento también. Y para centrar el elemento a la perfección, necesitamos transformar traducir. Serán los valores -50 por ciento y nuevamente -50 por ciento. Ahora el conservo perfectamente centrado dentro de las cajas. A continuación, voy a aumentar el tamaño de la fuente. Se va a volver a ejecutar. También. Necesitamos aquí de nuevo, un trazo de texto webkit con un valor es apuntar a la RAM y al color dorado Y también necesitamos establecer que el color sea transparente. Entonces ahora tenemos buenos íconos del café. adelante y seleccionemos el envoltorio de iconos con el hover, seguido del fondo del icono Al flotar, voy a cambiar el color de fondo. Va a ser de oro. Y también necesitamos rotar los elementos según la dirección Z. Y el valor va a ser de 135 grados. También. Necesitamos transición para un efecto suave. Y va a ser por el fondo. Entonces, una vez que pasemos el cursor sobre las cajas, rotarán muy bien Necesitamos mostrar los iconos. Usemos el índice con el valor 100. En realidad, los iconos aún no son visibles. En realidad, el problema es que tenemos aquí el mismo color para el trazo de texto. Así que una vez que pasamos el cursor sobre el envoltorio de iconos, también tenemos que cambiar el color del elemento I Así que vamos a agarrar este código y cambiar el color va a ser a un C7 C7. También necesitamos aquí la transición para el icono también. Entonces ahora el problema debería solucionarse. Bien, eso es. Todo funciona bien y tenemos aquí impresión, bonito y genial efecto. Bien, a continuación, tenemos que seleccionar entumecido y su tamaño de fuente a tres rampa Entonces voy a cambiar el color va a ser dorado. Entonces tenemos aquí lo más ahorita tenemos ceros por defecto Entonces voy a seleccionar info. Va a ser, el tamaño de fuente va a ser 1.8 RAM que el color será 999. Entonces tenemos aquí los elementos span, y ahora tenemos que escribir algo de JavaScript. Vamos a crear menú Variable. Voy a seleccionarlo usando el método selector de consultas. Especificemos aquí el nombre de la clase. A continuación necesitamos nums variables. Hay que seleccionar los números usando selector de consultas todo método. A continuación necesitamos la variable llamada start, que será falsa por defecto. Va a ser el valor booleano. Y ahora tenemos que crear una función start count. Vamos a insertar aquí elementos de parámetros. Ahora tenemos dos Crear variable max, que va a ser el valor del conjunto de datos. Me refiero al valor de los datos, bueno, atributos, que usamos aquí en el elemento HTML, necesitamos agarrar esos números y almacenarlos en la variable max. A continuación necesitamos count, que va a ser la función set interval. Entonces necesitamos definir el contenido del texto. Y en realidad tenemos que aumentarlo en uno usando operador de incremento. Y entonces necesitamos sentencia IF en la que tenemos que definir lo siguiente. El TextContent. Si el textContent es igual a max, entonces deberíamos borrar la integral Y tenemos que pasar aquí la variable de conteo. En cuanto al intervalo, va a ser 2000 dividido por el nonce A continuación tenemos que agregar el oyente de eventos al objeto window con el evento scroll, y tenemos que pasar aquí la función callback Tenemos que comenzar a contar una vez que nos desplazemos hacia abajo. Entonces necesitamos aquí sentencia IF en que tenemos que definir la siguiente ventana. Desplazamiento Y es mayor o igual que la parte superior de desplazamiento de punto de Menú. Una vez que lleguemos a la Sección de Menú, tenemos que iniciar el conteo. Entonces necesitamos declaraciones if en las que tenemos que pasar no start, que es el valor booleano Y luego tenemos que recorrer los números. Entonces ahora tenemos que llamar a la función this.com y tenemos que pasar el parámetro none A continuación tenemos que establecer el valor booleano, comenzar como verdadero. Bien, así que una vez nos desplazemos hacia abajo Y los Contadores comenzarán. Bien, entonces ahora tenemos que encargarnos de la barra de navegación. Tenemos que hacerlo pegajoso una vez que nos desplazemos hacia abajo. Entonces necesitamos usar estos eventos de desplazamiento aquí. Vamos a crear nueva variable va a estar ahora lejos. Voy a seleccionarlo usando el método QuerySelector. Especificemos aquí el nombre de la clase ahora cuatro. Entonces necesitamos ahora para la lista de clases de punto. Y tenemos que agregar a la clase navbar Tiki usando el método toggle Además, tenemos que pasar el año ventana punto scroll. Y es mayor que cero. A continuación, necesitamos seleccionar la clase Tiki, seguida de la barra de navegación Y tenemos que cambiar la altura. Va a ser ocho RAM. Y también necesitamos cambiar el color de fondo. Voy a ponerla en negro. Y también necesitamos aquí transición todos los puntos 5 s. así que una vez que nos desplazemos hacia abajo, entonces obtendremos estos bonitos y geniales efectos. En realidad, tenemos que arreglar un pequeño problema. El navbar terminó detrás del Landing, por lo que necesitamos el índice con un valor mayor Bien, entonces ahora el problema está arreglado. Y con esta sección, ya terminamos 46. Proyecto 5: crea la sección de clientes: Entonces en la conferencia anterior hemos creado una Sección de Datos, me refiero a los Contadores de Datos Animados. Y ahora tenemos que seguir adelante. Y así trabajar en la siguiente sección, que va a ser una sección testimonial. Vamos a insertar tus nuevos comentarios. Clientes. Voy a llamar a esta Sección Clientes. Entonces voy a abrir Tipo de Sección con la clase Clientes en la que necesitamos un Desarrollo, que va a ser Banner de Clientes. Dentro del desarrollo, voy a abrir etiqueta de encabezado h3 con el encabezado principal de la clase y con el testimonio de texto A continuación necesitamos elementos de encabezado H1. Y va a ser Clientes. Digamos, a continuación necesitamos el párrafo con un texto ficticio. Después de eso, voy a abrir la etiqueta DIV, que va a ser clientes. Y entonces necesitamos otro profundo, que será el propio cliente. Vamos a instituir párrafo con un texto ficticio. A continuación necesitamos elementos profundos, que van a ser envoltorio de la imagen. Seleccionemos Image client uno. Entonces necesitamos elemento span para el nombre del cliente. Bien, voy a duplicar cliente un par de veces. Y luego sigamos adelante y cambiemos las imágenes. Y también necesitamos cambiar el texto, texto ficticio. Cambiar el nombre. Va a ser Nick Brown. Siguiente renovado descenso tres. Y el nombre va a ser David Jones. A continuación voy a cambiar el texto, también el nombre de la imagen, el nombre del cliente. Y por último, necesitamos al cliente cinco. Su nombre va a ser Mary Brown. Bien, así que eso es todo. El marcado HTML está listo. Sigamos adelante y comencemos a escribir algo de CSS. Vamos a insertar nuevos comentarios para los clientes. Después voy a seleccionar Elemento de sección. Vamos a establecer el ancho al 100%. Entonces la altura va a ser 70 de altura de la ventanilla. Entonces necesitamos fondo con función de degradado lineal en la que voy a insertar valor RGBA Va a ser un color negro con opacidad 0.9. A continuación necesitamos de nuevo valor RGBA con un color negro con opacidad 0.8 A continuación voy a seleccionar la imagen de la carpeta de imágenes. Va a ser la imagen ocho. Definamos la posición. Va a ser centro. Y también necesitamos que no se repita A continuación voy a establecer la propiedad de tamaño de fondo para cubrir. Bien, entonces aquí tenemos la imagen de fondo. A continuación tenemos que encargarnos de las imágenes porque son dos más grandes. Vamos a establecer el ancho a cinco de. La altura va a ser de cinco también. A continuación necesitamos que se cubra el objeto phi. También hacerlos alrededor y usando radio fronterizo 50 por ciento Ahora te tenemos imágenes más pequeñas. Después voy a seleccionar Customer Banner, establecer su posición en absoluto. Luego colocamos relativo para el elemento padre, que es una Sección. Vamos a configurar la posición va a ser diez por ciento y la posición izquierda debe ser 50 por ciento y solo centrar los elementos horizontales usando Transformar Traducir X con el valor -50% También necesitamos aquí text-align center. Entonces aquí tenemos el Banner, que en estos momentos no es del todo visible. Sigamos adelante y seleccionemos Encabezado principal. Voy a establecer el tamaño de fuente a seis RAM de lo que necesitamos. Clientes Banner, seguido del elemento de encabezado H1, digamos tamaño de fuente a seis Roma también. Y también necesitamos que el peso de la fuente sea de 300. Necesitamos transformar el texto en mayúsculas y también cambiar el color Va a ser blanco. Entonces ahora el encabezado es visible y se ve bastante bien. A continuación, pongamos el margen entre los dos primeros menos cuatro rondas. Bien, entonces ambos encabezamientos se ven bastante bien. Voy a sentarme posición a pariente para la cabecera principal. Y entonces necesitamos el índice con un valor mayor. Bien, entonces ahora tenemos mejores resultados. A continuación, voy a encargarme del párrafo dentro del Banner de Clientes. Vamos a agregar ons es a 1.6 RAM. Y el color va a ser 777. Además, necesitamos margin top para ser full run. A continuación, necesitamos establecer la altura de la línea a un punto para aquí tenemos el Párrafo. A continuación, voy a encargarme de la posición del cliente a absoluta. Entonces necesitamos que la posición inferior sea cero. Y también necesitamos display flex con align items. Flex y tenemos que colocar los artículos en la parte inferior de la sección. A continuación, voy a seleccionar cliente. Vamos a establecer con dos 25%. Ahora necesitamos que la altura sea 25 RAM. A continuación voy a establecer el color de fondo en Dorado. Voy a crear algo de espacio usando relleno. Vamos a ponerlo a, a correr. Después cambia el color, hazlo blanco. Por lo que tendrá los clientes. En realidad, creo que algo anda mal aquí. Vamos a revisar el archivo HTML. Entonces tenemos los primeros clientes. Tenemos que moverlo y colocarlo aquí como el primer cliente de la lista. Entonces ahora todo se ve bien. A continuación, sigamos adelante y seleccionemos clientes. Con F selector hijo, necesitamos segundo cliente, digamos hola a una RAM. Entonces voy a duplicar este código, cambiar el número. Van a ser cuatro. Vamos a establecer la altura en 21 RAM. Ahora tenemos diferentes alturas para los clientes. A continuación, voy a seleccionar artículos pares. Vamos a establecer la opacidad 2.9. Entonces ahora tenemos mejor resultado. Voy a agarrar este código y pegarlo aquí abajo. Y voy a añadir aquí margen del lado derecho. Vamos a configurarlo en, para ejecutar con el fin de crear algún espacio entre la imagen y el nombre. A continuación, voy a seleccionar el párrafo del cliente. Vamos a establecer el tamaño de fuente en 1.6 RAM que el margen. En la parte inferior va a estar para correr. Los párrafos. Luce bien. Siguiente Voy a seleccionar cliente dar y sentar posición a absoluta. Entonces necesitamos posición relativa para el elemento padre, que es un cliente. Vamos a establecer poner algo de posición a la RAM. Además, necesitamos Flexbox. Necesitamos alinear los elementos en el centro verticalmente. Entonces ahora las imágenes y los nombres están muy bien alineados. Ahora tengo que cuidar el nombre. Seleccione elementos span, tamaño de fuente a un punto para RAM. Y también necesitamos que la transformación del texto sea mayúscula. Entonces eso es todo. Esta sección se ve bastante bien. Pasemos a la siguiente conferencia. 47. Proyecto 5: crea y da estilo a la sección de contacto y al pie de página del sitio web: Bien, así que una vez que terminemos con la sección de clientes, ahora, tenemos que seguir adelante y crear la última parte del proyecto Tenemos que crear la Sección de Contacto seguida del Pie de Página. Entonces, insertemos nuevos comentarios para el concepto. Y luego voy a insertar el elemento Section con el nombre de la clase Contacto. Voy a insertar aquí etiqueta DIV, que va a ser Contacto izquierda, el lado izquierdo de esta sección. Entonces necesitamos Contacto, ¿verdad? En el que voy a insertar elementos formados. Los elementos formados tendrán encabezado H1, etiquetar, reservar una mesa. Entonces tendremos grupo de entrada en el que voy a insertar elemento de entrada con el tipo text y con un atributo placeholder, que va a ser firstname. Al minuto siguiente. Elemento de entrada similar con lastName. Duplicemos el grupo de entrada. Cambiar el tipo del elemento de entrada. Va a ser correo electrónico. Y necesitamos aquí la dirección de correo electrónico. A continuación, necesitamos aquí el teléfono. Entonces voy a duplicar otra vez input-group. Vamos a deshacernos del primer elemento de entrada y colocar su área de texto con el atributo placeholder Sólo vamos a ser mensaje. También. Voy a deshacerme del segundo elemento de entrada y colocaré el botón Aquí con un botón tipo. Entonces necesitamos atributo de clase, Contacto BGN. Y voy a hacer su cita. Bien, así que eso es todo sobre el marcado HTML. Voy a empezar derecho a CSS. Insertemos comentarios para la sección de contacto. Voy a seleccionar Elementos de sección. Ancho definido. Va a ser al 100%, la altura, va a ser 60 de altura de ventana gráfica A continuación, necesitamos volver al color. Va a ser negro. Entonces voy a usar flexbox. Necesitamos alinear elementos usando Flexbox. A continuación voy a seleccionar el lado izquierdo y establecer su ancho en 50 por ciento. Y la altura va a ser del 100 por ciento. Y voy a cambiar de fondo. Vamos a usar la función de gradiente lineal. Con valor RGBA. Va a ser de color negro con opacidad 0.5. A continuación necesitamos el color similar. La opacidad va a ser 0.4. Además, necesitamos seleccionar la imagen de la carpeta de imágenes como fondo. La imagen va a ser imagen uno. Entonces otra vez, necesitamos Centro. Estoy en la posición y ahora repito. Y también necesitamos aquí el tamaño de fondo para ser cubierto. Tenemos aquí la imagen del lado izquierdo de la Sección de Contacto como fondo. Siguiente Voy a seleccionar Contacto, ¿verdad? Vendémoslo al 50%. La altura va a ser del 100%. Siguiente Voy a utilizar de nuevo Flexbox. Justificas centro de contenidos. Y también necesitamos alinear los elementos para que se centren también. Así se puede ver que el contenido se coloca en el centro del lado derecho de la Sección de Contacto. Siguiente Voy a seleccionar Contacto ¿verdad? Elemento de encabezado H1. Aumentemos el tamaño de la fuente. Va a ser RAM llena. Entonces voy a establecer el peso de la fuente a 300 y cambiar el color. Va a ser blanco. A continuación voy a crear espacio usando margin would el valor es 003 RAM y a RAM. Por lo que tendrá el rumbo. Después de eso, voy a seleccionar input-group. Vamos a usar de nuevo Flexbox Siguiente, voy a seleccionar grupo de entrada seguido del elemento de entrada Y también necesitamos aquí un área de texto. Necesitamos algunos estilos similares para ambos elementos. Establezca el ancho en rampa 30, entonces la altura va a ser de cinco primos Voy a establecer padding a una RAM, una RAM que a ejecutar y cero. Así que voy a crear algo de espacio usando margen para ejecutar. El color de fondo será transparente. Voy a deshacerme de border y luego usar border en la parte inferior. Serán los valores. Una RAM, sólida, y el color va a ser RGBA a cinco a 55 a 55 Y la opacidad 0.1, 0.3. En realidad, aquí tenemos algún problema. Sí, necesitamos 0.1 RAM. Entonces ahora la frontera se ve bien. A continuación voy a cambiar el color va a ser blanco. Después de eso, voy a seleccionar el área de texto por separado. Tenemos que desactivar la función de cambio de tamaño. Entonces voy a establecer la altura a cinco RAM. Tenemos que deshacernos de la barra de desplazamiento. Para eso, voy a usar área de texto, luego Kit Web, barra de desplazamiento. Y necesitamos aquí mostrar ninguno. Por lo que se considera que la barra de desplazamiento está oculta. Bien, a continuación voy a encargarme del atributo placeholder para las entradas y también para el área de texto Vamos a establecer el color en blanco. Bien, así que ahora las entradas se ven bastante bien. Sigamos adelante y cuidemos el patrón. Selecciónelo, y antes que nada, establezca su ancho. Va a ser. Así que para correr. A continuación necesitamos altura, que va a ser seis RAM. Voy a cambiar el color de fondo. Vamos a usar el dorado. Siguiente. Voy a cambiar el color del texto. Eso es 322277. Además, necesitamos margen, una RAM para ejecutar. Siguiente. Necesitamos frontera para no ser ninguno. Entonces voy a poner cursor a puntero. Entonces el botón se ve bastante bien. Y en realidad podemos seguir adelante y empezar a trabajar en el Pie de Página. Vamos a insertar nuevos comentarios que usar la etiqueta de pie de página HTML5, en la que voy a colocar párrafo para el texto de copyright. Voy a usar letrero de copyright. Y luego todos los derechos reservados. 2023. Hecho por código y Crear. Sigamos adelante y Estilo al Pie de Página. Necesitamos nuevos comentarios para Footer. Después voy a seleccionar el elemento Pie de página y establecer el ancho al 100%. La altura va a ser de diez vueltas. Entonces necesitamos que el color de fondo sea 262626. A continuación necesitamos flexbox. Necesitamos centrar los elementos usando justify-content center y El centro puede ver que el contenido está perfectamente centrado. Sigamos adelante y seleccionemos Párrafo. Cambiar el tamaño de fuente. Va a ser 1.6 RAM. Y el color, va a ser 999. Bien, así que eso es todo sobre el Pie de Página y la Sección de Contacto Ambos se ven bien. Sigamos adelante y hagamos que el proyecto sea receptivo 48. Proyecto 5: convierte el proyecto en receptivo: Bien, así se crean todas estas secciones del proyecto Y ahora lo único que hay que hacer es hacer que el proyecto sea receptivo a diferentes tamaños de pantalla. Voy a inspeccionar la página y cambiar al modo responsive. Necesitamos encontrar el punto de interrupción en el que tenemos que hacer los cambios usando media queries CSS Entonces creo que el primer punto de interrupción sobre el que tenemos que cambiar el proyecto va a ser de 1.500 píxeles Primero voy a insertar nuevos comentarios para el modo responsive. Y luego tenemos que crear media query CSS como el ancho máximo. Voy a especificar aquí 1,500 pixeles. Entonces lo primero que voy a hacer es disminuir el tamaño de fuente del elemento HTML. Hagámoslo 55%. Hará que todos los elementos sean más pequeños. Entonces creo que todo se ve bien. Y ahora podemos seguir adelante y encontrar el siguiente punto de interrupción. Creo que el siguiente punto de interrupción va a ser de 1,300 píxeles. Copiemos este código y cambiemos el ancho máximo, lo hagamos 1,300 Voy a cambiar el tamaño de fuente del elemento HTML. Hagámoslo 50 por ciento. Bien, entonces ahora creo que el proyecto se ve bien. Vamos a comprobarlo. Creo que todo se ve bien y podemos seguir adelante y encontrar el siguiente punto de ruptura Entonces, el siguiente punto de ruptura, en mi opinión, debería ser de 1,100 píxeles Sigamos adelante y creamos nueva consulta de medios CSS. Establezca el ancho máximo en 1,100 píxeles. Voy a seleccionar elemento HTML y otra vez, disminuir el tamaño de fuente, hacerlo 45 por ciento. A continuación, voy a seleccionar Menu Image wrapper y cambiar el ancho va a ser 18 RAM. En cuanto a la altura, voy a ponerla en 18 RAM también. Entonces ahora tenemos que encargarnos de la Sección de Clientes. Seleccionemos Clientes y establecemos altura como 120, la altura de la vista en Entonces voy a seleccionar clientes. Cambiemos la dirección, hagámosla columna. Voy a colocar los artículos verticalmente. A continuación necesitamos clientes. Vamos a establecer su ancho al 100%. En cuanto a la altura va a ser de 115 RAM. Entonces creo que tenemos que cambiar el tamaño del segundo cliente. Así que vamos a establecer con, así que vamos a establecer la altura a 15 RAM. Hagamos lo mismo para el cuarto ítem. Entonces ahora la Sección de Clientes se ve bastante bien. A continuación, tenemos que encargarnos de la Sección de Contacto. Sigamos adelante y seleccionemos Contacto la izquierda y hazlo oculto. Ahora tenemos que alinear los elementos en el centro. Seleccionemos Contacto, ¿verdad? Voy a establecer su ancho al 100%. Ahora. El elemento se coloca en el centro. A continuación necesitamos input-group, seguido del Y también necesitamos seleccionar área de texto. Y también necesitamos fondo. Vamos a establecer el ancho a 40 rampas. Ahora creo que todo se ve bien. Y con este punto de quiebre, ya terminamos. Sigamos adelante y busquemos el siguiente. Entonces el siguiente punto de ruptura, creo que va a ser de 900 pixeles Sigamos adelante y creamos nueva consulta de medios CSS. Y establece el ancho máximo como 900 píxeles. Voy a seleccionar Contacto de aterrizaje seguido del desarrollo. Y entonces necesitamos span. En este caso, el segundo elemento span. Vamos a poner la pantalla a ninguna. A continuación, voy a seleccionar Menú ¿verdad? Y hazlo oculto. Después de eso, voy a seleccionar Menú la izquierda y establecer su ancho al 100%. También, voy a alinear textos en el centro y tenemos que deshacernos del margen del lado derecho. Tenemos que encargarnos del párrafo. Así que sigamos adelante y seleccionemos Menú izquierda P y cierto margen para ejecutar. Y luego oral luego en renta y otra vez ADL. Entonces ahora esta sección se ve bastante bien. A continuación, voy a encargarme de la Sección de Clientes. Sigamos adelante y seleccionemos Clientes y fijemos la altura a 140 altura de la vista Entonces ahora creo que se ve mejor. A continuación voy a seleccionar las prendas de rumbo Clientes H1 y establecer su ancho en rampa 50. En realidad, creo que necesitamos disminuir la altura. Vamos 321. Bien. Bien, así que a continuación tenemos que seguir adelante y Personalizar el párrafo Sigamos adelante y seleccionemos Banner de clientes, seguido del selector P. Vamos a poner con 260 carnero. Oh no, creo que se ve mejor. Después de eso. Voy a seleccionar clientes. Ajustemos la altura a 18 rampas. En realidad, voy a copiar este código y cambiar las alturas para el segundo y cuarto ítem. Bien, entonces ahora creo que esta sección se ve bien. Agreguemos aquí margin auto. Entonces voy a poner la altura de nuevo a 140. Bien, eso es. Por último, con la sección de clientes, terminamos. Sigamos adelante y nos ocupemos de la sección de conflictos. Voy a seleccionar input-group y establecer la dirección flex a columna Siguiente. Necesitamos seleccionar la etiqueta de entrada, seguida del área de texto. Y también necesitamos botón. Vamos a poner con 260 rampas. Y también voy a seleccionar Sección de Contacto y aumentar la altura de 30 a 90 altura de ventana Entonces ahora tenemos buenos resultados. En realidad, con estos puntos de interrupción, ya terminamos. Sigamos adelante y encontremos el siguiente. Entonces creo que el siguiente punto de interrupción, va a ser de 600 píxeles Sigamos adelante y creamos una nueva consulta de medios CSS y establecemos el ancho máximo en 600 píxeles. Voy a seleccionar HTML y disminuir el tamaño de la fuente. Hagámoslo 35 por ciento. Después de eso, voy a seleccionar Contacto de Aterrizaje y establecer la altura a 19 rampa. También, voy a cambiar la dirección. Hagámoslo columna. Voy a colocar los artículos verticalmente. A continuación necesitamos un centro de líneas de artículos. Bien. Después de eso, voy a encargarme de los detalles. Es decir, el conjunto de desarrollo con rampa 220. Ahora creo que los artículos se colocan mejor. A continuación, tenemos que encargarnos de la sección Acerca de. Aumentemos la altura, hágalo a la altura de la vista Y también voy a cambiar de dirección. Tenemos que colocar los artículos verticalmente. A continuación, voy a seleccionar The Belmont en la sección Acerca y establecer su ancho en 60 RAM También, voy a sentarme margen a cero que correr por los lados izquierdo y derecho. Bien. Después de eso, sigamos adelante y cuidemos la Sección de Clientes. Tenemos aquí un gran espacio. Voy a la altura a una altura de la vista. Ahora creo que esta sección se ve bien. Y en realidad, con este punto de quiebre, terminamos. Sigamos adelante y nos ocupemos de los últimos puntos de interrupción. Voy a crear una nueva consulta de medios CSS. Y luego voy a establecer max-width a 450 pixeles. Selecciona Logo y hazlo. Entonces lo siguiente que voy a hacer es seleccionar input-group, seguido del área de texto de entrada y también el Cambia el ancho, hazlo 50 rampa. Bien. Lo único que entonces voy a hacer es crear algo de espacio. Y la Sección Clientes, Vamos a establecer la altura a una veintena de altura de la vista. Bien. Creo que ya está. Todo se ve bastante bien. Y podemos decir que el proyecto es Responsive. En realidad, con este proyecto, hemos terminado nuestro curso. Espero que lo hayan disfrutado. Aprende algunas cosas nuevas. Te deseo todo lo mejor. Buena Suerte.