El mega curso de Webflow para principiantes: aprende a construir un sitio web de portafolio desde cero en Webflow.

1. Descripción del curso: ¿ Y si te dijera que puedes construir un sitio web totalmente funcional desde cero sin usar una sola línea de cancha y completamente gratis? Puedes diseñarlo de la manera que quieras. Se pueden agregar animaciones. Podrías tener interacciones. Podrías hacer un responsive para otro dispositivo, grandes puntos e incluso alojado vienen a mí de forma gratuita. Hey allá, soy campeón y bienvenido a mi Magal. Pero claro, para la grandeza en este curso te voy a enseñar a tomar este sitio web de portafolio de una página que diseñé desde cero en fig MMA y construirnos dentro. Bueno, fluye completamente de cero otra vez. Siéntase libre de utilizar su diseño para sus propios cuatro para su página web. Adelante y haz cambios. Como desees, si es necesario. Está bien. Entonces hablemos de lo que te voy a enseñar en este curso en la partitura te va a enseñar lo básico y lo fundamental fuera del desarrollo. Y qué es lo que necesitas saber antes de empezar a construir un sitio web y te voy a enseñar cosas sobre caja Respuesta moderna, cuadrículas, cuadrículas, maquetación, elementos, animaciones, interacción, apuñala componentes y mucho más y querer molestar está listo incluso podrías hospedar completamente gratis, pero incluso lo adjuntó. Dominio personalizado. Pero final de las anotaciones. Ya sabes todo lo que necesitas saber para seguir adelante y construir cualquier tipo de sitio Web desde cero en el interior. Por lo que espero que estés emocionado y listo para aprender su gripe. Si eres un traje, chicos en el siguiente video. 2. Descarga de recursos y enlaces de vista preliminar: Muy bien chicos. Entonces, antes de que realmente empecemos, solo un dedo del pie comparte un par de cosas antes de la mano y haceros saber algo de información. Ahora bien, este es el sitio web final que he diseñado en su interior. Dónde, Flo Y lo que voy a hacer es que voy a compartir un enlace de vista previa en la descripción donde realmente puedes consultar este sitio web dentro del flujo de trabajo. Ahora no podrás hacer ninguna modificación o cambio porque, como ves aquí, dice que es sólo como puedes ver. Dice sólo leer sólo más cambios no se guardarán. Pero siéntete libre de ir o como Da la vuelta y echa un vistazo a cómo construí esto. Puedes revisar toda mi estructura que tengo mejor. Podrás consultar nuestra información sobre clases, cada cosa que necesites saber. Si alguna vez te atascas, adelante y vuelve con esto y tipo de verifica. Si te quedas atascado en cualquier lugar, eso es lo que prevalece. Entonces si aun si vas adelante y realizas algún cambio, no surtirá efecto porque esto es sólo la previsualización. Y si de verdad quieres ver la página web en todo su esplendor completamente funcional. Puedes echar un vistazo a esto. Otra vez lo estás. Enlace estará en la descripción donde podrás desplazarte y echar un vistazo y jugar. Tenemos muchas interacciones. Tengo muchas animaciones que vamos a hacer cosas súper divertidas. También puedes echar un vistazo a esto. Y por último pero no menos importante, he diseñado todo este sitio web en la Fig MMA, que puedas ir al Lincoln la descripción del video y echar un vistazo y Donna los activos que van a tener las imágenes las cuales van a tener los iconos en él va para tener el archivo de estigma, que ha diseñado y realmente nos referimos a ese archivo de figura. Y entonces estaremos construyendo ese diseño dentro del flujo de trabajo. Entonces tres cosas es el enlace de vista previa, y luego tienes el sitio web real en sí, y luego tienes los activos que necesitas descargar, así que asegúrate de revisar todos estos para que estés listo. Y en la próxima semana, vamos a empezar. Entonces los veo chicos en el siguiente video 3. Comprender el modelo de caja: Está bien, chico. Por lo que finalmente es hora de empezar. Ahora, antes de saltar al flotador Web y empezar a construirlo, hay muchos fundamentos y fundamentos que hay que entender. Entonces lo que voy a hacer es romper estos fundamentos en diferentes partes y explicarlos cuando surja la necesidad es cuando estamos construyendo cierta sección fuera del alcista . Entonces, en primer lugar, en este video, vamos a hablar de algo llamado el modelo Box, que es el concepto más básico y fundamental que debes entender sobre el diseño web y el desarrollo web. De acuerdo, ¿cómo se construyen realmente los sitios web? De acuerdo, ¿Cómo se estructuran? ¿ Es que hay alguna moda en particular o es sólo una aleatoria o cómo funciona todo? Y tenemos tantos tipos diferentes fuera del ingenio de los dispositivos. Tenemos pros de libros de Mac. Tenemos pantallas de retina. Tenemos o laptops windows. Tienes tabletas. Tenemos móvil tenemos monitores Foca. ¿ Cómo funciona el sitio web en todos estos tres tamaños diferentes? Vamos a hablar de eso. Entonces en el producto, archivado como una página llamada es la caja mortal. Y si haces click en eso, vas a ver algo que se parece a esto. Está bien, así que déjame explicar lo que tenemos. Tú alguien para venir aquí a este, um, marco, marco, que es por 14 40 píxeles de ancho. Y el estándar general de la industria es diseñar siempre e interconectar en el tamaño de pantalla más pequeño . Muy bien, Y cuando estás diseñando un sitio web, siempre quieres empezar con el tamaño de pantalla más pequeño, que es casi en su mayoría el Mac book pro este lugar. Entonces si en realidad voy y ya sabes, haga clic en el icono del marco, en realidad se puede ver que tenemos 14. 40. Tenemos un libro de Mac, que es de 11 50 pies. Consiguió un Mac book pro perras. 14 40. Tenemos que vender Facebook, que es 1500 más en I'm promedios 12 80 Ahora, A pesar de que el libro de Mac y el Mac son más pequeños que 14 40 siempre es un buen estándar para realmente diseñar en un 14 40 pixel con dimensiones, porque no es lo grande no es pequeño, es el tamaño óptimo, bien. Y ese es uno básico que necesitas entender. El siguiente es esta estructura fuera de un sitio web. Está bien, así que si Mira por aquí, tenemos colores de árbol, tenemos esta naranja, y luego tenemos esta naranja más clara. Y luego tenemos un color amarillo. Lo mismo por aquí y algo por aquí. Pero la nota diferente aquí es que esta naranja es en realidad más ancha en un to display, lo que significa que está ocupando todo el Brit. Pero este contenido que está dentro. Digamos que éste, este tiene 1311 píxeles de ancho. Se trata de 1311 pixels mientras que. Y esto es 131 en píxeles mientras. Y eso significa más o menos que el contenido se va a quedar en el centro de la pantalla, sin importar el tamaño fuera del monitor. Está bien. Y para ello, necesitamos definir un mojado en particular. Entonces aquí estoy definiendo en realidad consciente off diciendo 1319 píxeles de ancho y respectivo, fuera del tamaño de la pantalla, la pantalla va a ser 1311 correcciones. Muy bien, ahora, ahora, ¿qué pasa con los otros tamaños de pantalla? Que teníamos los 1152 y 120 Ahora estos son más pequeños, ya sabes. Entonces 1311 Sí, eso es cierto. Entonces, ¿cómo es ese buen look ¿Va a parecer raro? Bueno, no. Si corriste tu edificio, tu sitio web, puedes definir decir eso. Mira, quiero un máximo. Eran ser 1311 Pero si las pieles se ha vuelto más pequeñas, puedes seguir adelante y encoger el ingenio. Está bien, pero máximo. Yo quería ser 1311 no quiero que vaya más allá de 1311 Muy bien. Esa es una condición que puedes definir cuando estás construyendo en arma. Y así es como más o menos tienen libros en desarrollo. Entonces déjenme llegar en realidad al lado izquierdo y podemos ver algún tipo de ordenar e índice. Entonces lo de los pedidos que vemos esta llamada es una sección lo que significa que ocupa toda la pantalla vale la pena. Toca los bordes fuera de la pantalla. Y entonces tenemos algo llamado como rapero que define estos tamaño final fuera de nuestro contenido, la y última palabra fuera de nuestro contenido. Está bien. Y el siguiente son los bloques internos es donde tenemos contenido que puede ser texto o imágenes, y se pueden estructurar de cualquier manera que quieran y estos van a caber dentro del rapero, Muy bien. Y por último, tenemos una imagen, y esto es para el segundo ejemplo. Entonces digamos, por ejemplo, tienes una imagen o tienes algo de textura. Tienes alguna información que quieres mostrar, pero quieres sacar todo el valor fuera de la pantalla, ¿ verdad? se puede hacer. Definitivamente puedes hacer eso. Te gustaría ponerlo en una sección y no lo haces. Y no tienes que ponerlo en un rapero porque si lo pones en un rapero, acabará confinándose. El trabajo que has dado para que en realidad no puedas usar al rapero y el contenido abarcará todo el mundo. Está bien. Ahora, hay otra cosa que puedes hacer en este caso, si tienes Mira, esto es 1035 que es menor que 1311 Ahora puedes tener apuestas múltiples, ¿ verdad? Digamos que no quieres que esto ocupe 1311 espacio. A lo mejor no vas a encogerte un poco esto. Bueno, definitivamente puedes hacer eso para que realmente puedas tener múltiples Ritz a múltiples elementos. Y no importa cuál sea el tamaño de la pantalla, eso siempre va a ser lo mismo. 1035 por aquí, 1035 por aquí y 1035 por aquí. Entonces así es como los sitios web un poco. Entonces solo para recapitular, siempre tienes una sección que es el contenedor más exterior, y eso va a ocupar todo el mundo de la pantalla. Y luego tienes algo llamado rapero, donde defines cierto Brit y lo siguiente que tienes bloques interiores donde todo está dentro de ese rapero y ese corte y eso definido con todo bien. Y si quieres cambiar el mundo por otro rapero, definitivamente puedes seguir adelante y hacer eso. Entonces eso es más o menos sobre el modelo de caja. En la próxima semana, vamos a hablar de los tres tipos principales de elementos off layout, que estaremos utilizando para construir todo nuestro contenido dentro de las armas. Entonces los veré chicos en el próximo video 4. Tipos de elementos de composición: Oigan, chicos, bienvenidos de nuevo. Entonces en este video, vamos a echar un vistazo a los tres tipos principales fuera de los elementos de diseño. Esa arma Oh, proporciona. Ahora hay bastante más. Diré que son 6 a 7. Pero estos son los que tipo de tenemos que prestar mucha atención, porque esto es lo que vamos a estar usando la mayor parte del tiempo ahora, ahí tres cosas principales sección contenedor y un punto muerto. Entonces como mencioné en el video anterior que la parte naranja fuera de la pantalla que ocupa todo el ancho se llama como sección y esa exactamente es esta sección. Ocupa todo con fuera de la pantalla. El siguiente es un contenedor. Ahora, el segundo paso fue crear ah, contenedor o una envoltura fuera de algunos tipos que tipo off proporciona una definir con en donde, Flo, Tienes un contenedor de calidad elemento. Pero el problema es que, el contenedor se restringe a una lectura máxima de 9 40 píxeles en escritorio y y para otros puntos de ruptura, eso s tablet paisaje móvil y más reportado. Ocupa el 100%. Entonces es más o menos actos como una sección. Ahora tendremos otro elemento llamado como el bloque de la muerte. Ahora un bloque div, si lo sabrás, ya sabes, considerado en términos realmente. Es como un globo. Está bien, cuando miras un globo, ya sabes, cuando no hay aire, solo se siente como, ya sabes, un objeto completamente plano. Pero cuanto más cantidad de aire se sopla dentro del globo, más grande será el globo. Y en realidad puedes definir cuanto tamaño quiera ser. Si sopla más, se va a hacer más grande. Si sopla menos, va a ser más pequeño, ¿verdad? Entonces no mires, es algo que es realmente, realmente flexible. Um, cuando estás construyendo un sitio web, así que mi preferencia personal es nunca usar un contenedor, por eso no lo hago. He puesto un signo de exclamación al lado del contenedor. Ahora no hay nada malo y usar un contenedor, Pero creo que contenedor solo te quita ese control completo como diseñador y como persona que se está quemando en donde fluyen. Por lo que prefiero apegarme a secciones y desarrollarme porque tienes completa flexibilidad. Ahora mismo. También hay otra llamada de elemento es el bloque de enlace. Ahora, el bloque de enlace es básicamente el mismo que el bloque de la muerte. Pero la diferencia es que no se puede hacer clic en un bloque diff, pero se puede hacer clic en un bloque de enlaces, ¿ verdad? Por lo que esta marca mundial señala también. Entonces ahora que tipo de entendemos el modelo de caja y sabemos cuáles son los tres tipos de elementos principales , ahora podemos finalmente empezar a construir nuestro sitio web y quién lloró flotador. Entonces como ustedes chicos en el siguiente video 5. Precios y información de alojamiento de Webflow y alojamiento: nuestros chicos una última cosa antes de que realmente saltemos a ese flujo, como que quiero explicar cómo funciona el precio en donde, Flo. Entonces obviamente vas a construir un sitio web y es posible que quieras hospedarte más tarde. Va a ser un portafolio o el sitio web de tu empresa, nuestra página de aterrizaje lo que sea que pensé que sería interesante explicar como funciona el precio. Entonces cuando comienzas y creas un flujo de Canadá, obtienes hacer proyectos gratis, y eso es lo que puedes ver aquí. Dice que empiezas con dos proyectos gratis, acuerdo? Y puedes hacer lo que quieras con estos dos proyectos. Ahora hay tres opciones. Uno, puede hospedarlo en subdominio de flujos Web, que termina con el Florida Ohio, y esto es completamente gratuito, bien. El 2do 1 es que en realidad puedes hospedarlo con tu propio dominio personalizado en un flujo Web Silverware flow utiliza los servicios web de Amazon para que puedas hospedarte, desentrañar completamente y es puro, y él y sus amigos. Y es un muy seguro para que puedas vincular tu dominio personalizado. Pero eso requiere un plan pagado. Y el 3er 1 es, en realidad puedes exportar el cable de flujo Web que tienes y hospedado en otra plataforma diferente o juntos. Entonces, en realidad echemos un vistazo. Echa un vistazo a esto con mucho más detalle. Por lo que hay dos tipos de plantas. Uno es el plan de sitio, y otro es el plan de cuenta. Empecemos con el plan de cuenta. Entonces, como dije, el plan de inicio es el plan gratuito, donde llegas a tres proyectos y si quieres más de dos proyectos y cuando digo proyecto, me refiero a sitio web individual y si quieres, si quieres más de dos, puedes actualizar eso a 10 proyectos con $16 USD al mes si construyes anualmente o $24 al mes. Si eliges. Al igual que un sabio mensual, también puedes seguir adelante y exportar cable, está bien, y si quieres exportarlo a una plataforma de hosting diferente, en realidad puedes exportar hermosa Córdoba. Flow proporciona. Se puede hacer transferencias de proyectos y más o menos. Y si quieres ir por más de 10 proyectos, puedes ir por el pro plan. Está bien, ahora pasemos a los se pagan, decidan planta. Y cuando digo plantas laterales, esto significa el plan para cada sitio web individual o cada proyecto individual en su cuenta . Muy bien, entonces veamos realmente cuál es la diferencia. Ahora si vas por el plan básico y cuando llegues al plan básico, obviamente puedes vincular costoso tu dominio personalizado que compras desde otra plataforma de hosting , y puedes conectar ese dominio. Para ello, tendrás que usar un plan de pago que puedes tener 100 páginas. Puedes tener visitas mensuales de descuento de 25,000 y puedes tener cero artículos CMS. De acuerdo, parece un sentido para el sistema de gestión de contenidos, que es más o menos una cosa de nivel avanzado o intermedio donde se crea algún tipo de back in dashboard off. Todo tu contenido y flujo húmedo automáticamente toma ese contenido y pone eso en tu sitio web con menos esfuerzo en Ben, tienes un nivel de negocio si quieres tu sitio web. Si estás molesto, tiene más de lo que conoces un millón de visitas o quieres 10 mil artículos de CMS o quieres en el formulario de Madrid, envíalo ya que tal vez tengas que consultar estos planes dependiendo de los sitios web de patio requisitos. Muy bien, entonces así es como es la diferenciación entre plan de sitio en plan de cuenta. Entonces espero que ustedes tengan una idea básica. Pero para este curso, obviamente puedes empezar completamente gratis sin ninguna restricción. Entonces ahora que sabemos esto, sigamos adelante y pongamos en marcha un proyecto de reptiles en donde Flo y empecemos. Entonces son ustedes chicos en el siguiente video. 6. Cómo configurar tu proyecto de Webflow: Muy bien, chicos. Entonces en este video, vamos a configurar nuestro proyecto de flujo. Asegúrate de tener todo lo que necesitamos antes de empezar realmente a construir cada elemento dentro del flujo web. Entonces obviamente puedes crear una nueva cuenta sobre qué flujo, y vas a conseguir dos proyectos gratuitos con los que puedes trabajar. Y una vez que tengas esos 23 proyectos, donde puedes hacer es empezar con el nuevo proyecto. Y voy a elegir este espacio en blanco cuando también tengas un montón de plantillas gratuitas y plantillas de pago que puedes elegir. Pero vamos a empezar. Es uno grande en blanco, porque obviamente queremos arrancarlo desde cero. Entonces voy a seguir adelante y elegir en selecto, y puedes elegir cualquier nombre que quieras. Un búfalo te da un nombre muy fresco y peculiar. Voy a llamar a esto, uh, cuota escolar. Voy a llamar a esta junta para ti. Por supuesto. Está bien. Apenas a nombre aleatorio. Ah, está bien. Ahí vamos. Ok, entonces ahora estamos adentro. Ya estamos llenos. Ellos interfaz sí se ven bastante intimidantes y aterradoras. Y eso muchas opciones, pero vamos a amortizar. Mira esto uno por uno a medida que avanzamos por el curso, y ojalá entiendas un poco cada elemento que fuera de él. Pero por ahora, solo queremos seguir adelante y configurar nuestro proyecto. Sólo asegúrate de que lo tengamos todo, correcto. Entonces lo primero que hay que hacer es ir aquí arriba, a la izquierda. Tienes el logo del arma, y voy a seguir adelante y elegir ajustes del proyecto. Está bien, así que vamos a revisitar esto un poco más tarde hacia el final del curso está bien, pero solo hay unas cuantas cosas que queremos armar. Entonces lo primero, obviamente el nombre del curso, este es el sub Dominio donde puedes hospedarlo en flujos web, sub dominio libre. Y, ya sabes, solo hazlo Va a ser como un área de puesta en escena donde solo puedes comprobar cómo el molesto. Mira, solo voy a quitar esta apuesta extra, porque va a ser más fácil. Está bien. Um, y podemos decir curso de cartera, um, 01 o algo así. Um, el siguiente es. Tienes estos Farrakhan mi país, Israel. Poner más tarde. Cualquier cosa es que quieras elegir tu zona horaria. Asegúrate de que eso sea, um y sí, eso es más o menos. El siguiente es, queremos ir a la queremos ir a lasección de fondos porque vamos a estar usando un frente Ahora vamos a estar usando ahora, hay tres formas en que puedes tener teléfonos. sección de fondos porque vamos a estar usando un frente Ahora vamos a estar usando ahora, Tienes unos fondos de Google, tienes teléfonos personalizados y yo tengo teléfonos adobe. Si tienes una suscripción a adobe, obviamente puedes obtener la llave token del FBI. Va a estar ahí en la configuración de tu cuenta. Todo lo que puedes venir aquí y averiguar cómo conseguir eso y sólo poner la llave A P I y estás en los teléfonos de inicio va a ser eso en Buffalo. A continuación puedes subir archivos de fuentes personalizados. Ya sabes cuál. Ya sabes, tocino subir perfiles TTF ot f d r, y deberían estar funcionando bastante bien. El siguiente es usar un teléfono de Google. Ahora para este curso, estaremos usando un teléfono de Google. Es una llamada telefónica muy bonita. Ascenso y todo lo que tiene que hacer es simplemente ir al desplegable. Tienes todos los teléfonos de regla disponibles. Alberto es sólo búsqueda de los 40 quieren queremos algo llamado olor. Entonces s e n bien. Y esa es la diversión. Esto sólo tiene tres mil millones. Entonces vamos a elegir todo el árbol sólo por ahora. Um, y ya sabes el lenguaje al saltar. Si no incluyes eso o no, solo me voy del dedo del pie Déjalo. Simplemente voy a elegir el que sin extensión latina. Lo que sea. Y zapatos a las cuatro. De acuerdo, entonces ahora se puede ver que estos son los fondos que se han agregado, y eso es bastante bueno. El siguiente es que queremos entrar en la cancha de costumbre. Ahora, Veteran también te da la capacidad de actuar algún tipo de corte de costumbre. Si realmente quieres personalizar algunos elementos, qué piso de cama no te permite? Ahora bien, esto es bastante para usuarios avanzados, por lo que no estaremos usando ninguna cancha personalizada en absoluto. Pero lo único que notaré arreglar por aquí es que en la configuración anticipada, estaría yo quiero agregar el auto de idiomas, así que voy a decir e en para inglés. Bueno, eso es lo que va a pasar es cuando alguien abre su página web en la región que como Alemania o cualquier país extranjero. Tu navegador va a identificar que este es un sitio web en inglés, y te va a preguntar si quieres traducirlo del inglés al idioma respectivo de ese país. Y quieres que Google proporcione que ordene una funcionalidad. Por lo que quieres solo comprobar eso y vamos a elegir guardar cambios, Muy bien. Y lo siguiente que vamos a hacer es volver a nuestro diseñador y diseñador es nuestro espacio de trabajo donde vamos a diseñar y construir el sitio web, Muy bien. Y lo que voy a hacer es ir a este panel de navegación, que es el navegante donde tenemos un montón de capas. Lo que voy a hacer es que voy a elegir este elemento llama cuerpo y cuerpo es el enorme elemento padre que, cual especie fuera ya que todo está dentro de una caja y todo está en un cuerpo de contenedor es un pagado en más elemento, o lo voy a hacer es voy a dar click en cuerpo y voy a bajar a la sección telefónica y voy a seguir adelante y elegir la fuente que elegimos, y eso se va a mandar bien, y eso es todo . Por lo que cada vez que subamos, cada vez que introduzcamos un texto dentro del área del lienzo, se va a elegir la fuente para enviar. Por lo que no tenemos que cambiar el teléfono cada vez. Está bien, así que eso es una cosa que quieres hacer. Entonces ahora eso es más o menos. En el siguiente minuto, finalmente podemos seguir adelante y empezar a construir nuestro primer componente y estaremos empezando por construir la barra de navegación. Entonces los veo en el siguiente video. 7. Construir la barra de navegación: De acuerdo, así que finalmente estamos listos para empezar a construir a partir de primer componente, y vamos a empezar a crear con la barra de gallo, la barra de navegación que tenemos justo aquí en este video. Está bien, así que eso en realidad es saltar a FTL y ver cómo libros esta cosa. Muy bien, Entonces, como pueden ver, lo primero que tenemos es esta gran pantalla blanca que es el cuerpo fuera de toda la página web. Entonces sólo se desplaza hacia abajo hasta que encontremos la sección de fondo y de la sección de fondo, voy a cambiar eso de blanco a negro. Y no hagas click en este ícono más, que va a agregar una muestra global, lo que significa que en cualquier momento que aplique el erudito a un elemento, puedo cambiar el color de todos los elementos que tengan el mismo color aplicado, derecho ? Voy a seguir adelante y dar click en crear. Y ahora cada elemento que yo agregué tiene un color negro va a cambiar al respeto del color. Si cambio el color de la muestra global. Está bien. Genial. Ahora donde Flo solo te da algún tipo de elementos pre definidos, acuerdo? Y condenas finitamente, úsalos como son, todo lo que puedes personalizarlo a tu gusto. Entonces si hago clic en el icono más, se puede ver que estos son todos los elementos. Ese propietario. Y como les dije, tenemos esta sección. Tenemos un contenedor y tenemos el bloque. Ahora también tenemos cosas como bloque de enlaces y botones y columnas y genial, que probablemente echará un vistazo un poco más tarde. Pero por ahora, lo que queremos es una llamada de elemento como la barra de navegación. Está bien, tenemos la barra de gallo por aquí. Está bien. Ahora, en la sección izquierda, también tienes algunos ordenar un elementos predefinidos como barra pegajosa aquí, sobre el lago contenido principal llamada a cosas de acción. Pájaro de cuero. Para este curso de niños, no vamos a usar nada de esto porque queremos construir todo desde cero. Pero si quieres, definitivamente puedes seguir adelante y usar estos diseños personalizados. De acuerdo, entonces cuando bajes y voy a seguir adelante y elegir este elemento Nabbout, y voy a rastrear eso y voy a dejarlo dentro, ¿de acuerdo? Ahora, siempre lo que quieres hacer es prestar atención. a esta navegación que tenemos a la izquierda. Está bien, Ahora, si abro esto, ves, tenemos un par de artículos. ¿ Todo bien? Tenemos, como, como, una gran lista de artículos, así que déjame explicarte. Explica cómo esto es lo que está pasando ahora. Bueno, ya ves, por aquí está el cuerpo, y luego dentro de eso tenemos un elemento los colores no tenían sino y dentro de la duela. Pero tenemos algo llamado el contenedor. Y dentro de un contenedor, tenemos tres elementos. Tenemos la marca. Tenemos el menú de navegación, y tú tienes el menú de abajo. Y dentro del menú de knave, tenemos tres elementos, que es el enlace de knave. Quieres knave Ling a knave Enlace tres. Y también tenemos un ícono de menú. Está bien, entonces donde Flo usa esta terminología causa al padre y al hijo, en este caso, el cuerpo es el padre, y la barra de solzuelo es el niño. El contenedor es un niño fuera de la nab. Nuestro on the knave bar es un padre fuera del contenedor. Ahora el contenedor tiene tres menú de navegación de marca Niños y muchos pero correcto. El menú de knave es aparente. Eso tiene tres Niños. Muy bien ahorita Hay otra cosa que podrías mirar menú de marca knave y muchos botones son todos hermanos porque son Niños fuera del contenedor y hermanos es en realidad un término que se usa cuando estás construyendo cosas todo flujo web. Entonces, padre hijo y Sibley, estas tres cosas que necesitas dedo del pie sean atención, dedo del pie. Entonces, como mencioné antes, lo primero que queremos hacer es crear el derecho de sección que retome todo el derecho de la pantalla. Y lo que vemos aquí es que esta barra de duende está retomando todo el trabajo fuera de la pantalla. Muy bien, así que el ahora. Pero si ves si hago clic en él, puedes ver que está quitando todo el valor fuera de la pantalla. Entonces lo que quieres hacer es jugar con este número el cual es básicamente define. Ya sabes cómo se verá un diseño en particular en un trabajo de pantalla en particular. Entonces si cambio esto a 14 40 se podía ver que todo está en el centro como discutimos , bien, pero todo menos la barra de gallo, que está actuando como nuestra sección, está retomando el mundo entero. Si cambio esto a 1920 se puede ver que esto se queda en el centro, pero la sección está retomando todo el valor. Vamos a cambiarlo a 38 40 que es nuestra resolución cuatro K. Así se va a ver y esto está en el centro. Por lo que siempre quieres pegarle esto a 14. 40 para que tengamos una buena representación visual fuera de cómo coincide con nuestro diseño y fig MMA. Entonces porque lo hemos diseñado el 14 40 es justo mantener siempre esto en 14 40 también . El caso es que tenemos este contenedor como una celda que tiene un rapero, y esto está teniendo una semana libre. 940 picks es y no queremos usar eso, porque si ves, tenemos un trabajo máximo fuera de 1920 pixels, está bien. Y tenemos una despedida 40 y 72. Entonces lo que voy a hacer es que en realidad voy a seguir adelante y crear un elemento causó el bloque de la muerte ahora mismo, cuando bromees elementos, asegúrate de seleccionar el elemento aparente para que el elemento hijo que eres crear caídas como hijo del elemento padre. Entonces mira, como en el TLCAN, Y voy a presionar el control E que es un atajo o comando e en un Mac para borrar la barra de búsqueda donde se pueden buscar elementos. O en realidad puedes simplemente hacer clic en el icono más y buscar el trabajo elemental. Yo quiero estar usando estos cortes afilados, por lo que es mucho más fácil y mucho más rápido. Tan impresionado. Control E. Y voy a elegir su bloque, cariño. Y tenemos este callejón sin salida, y voy a poner este bloque de la muerte dentro, ¿de acuerdo? Y voy a tomar este elemento de marca. Voy a poner eso dentro del bloque de la muerte quiero tomar el menú de navegación. Pon eso dentro del bloque de la muerte y el botón de menú y pon eso dentro del bloque de la muerte. Está bien, Así que asegúrate de que todos sean chillin, que puedas derrumbarlos para ver si todo está dentro del padre. No tomo el contenedor y lo elimino. De acuerdo, Ahora le echamos un vistazo. Se puede ver que todo se mueve hacia la izquierda y la derecha. Se están estirando. Está bien. Entonces si cambio esto a 1920 se puede ver que Están tocando los bordes de la pantalla porque no hemos definido ese grano máximo. Está bien, así que sigamos adelante y hagamos eso. Entonces lo que hacemos es que voy a mandar esto de vuelta a 14. 40 arreglos, acuerdo? Y voy a elegir este punto muerto que creamos. También puedes hacer clic aquí en la navegación inferior y la primera inmunidad va a dar una clase. ¿ Qué es exactamente una clase? Está bien. Ah. Clase es un nombre que se da, y en realidad puedes llamar a cualquier elemento lo que quieras. Pero lo que sucede es cuando le das una clase en particular a algo, puedes asignarle ciertas propiedades, y esa clase será nombrada en esa clase será especial porque tiene una cierta cantidad de propiedades. ¿ Y qué significa todo esto? Bueno, en realidad, crea uno, y como que entendemos esto uno por uno. De acuerdo, entonces lo que voy a hacer es llamarlo como rapero, ¿de acuerdo? Puedes llamar a esto lo que quieras, pero solo voy a llamarlo rapero por ahora. ¿ De acuerdo? Y en el trabajo, lo que voy a decir es, voy a decir 100%. Está bien. ¿ Qué significa eso? Te digo, y también en el máximo valor. Voy a decir 1920. Genial. Ahora lo que está pasando aquí es que le estoy diciendo flujo de trabajo que Hey, mira a este rapero. ¿ Todo bien? Yo quiero que este rapero tome el 100% del ancho. ¿ Todo bien? 100% de descuento en el mojado, fuera del tamaño de la pantalla. Pero quiero que lo restrinjas a 1920 picks es lo que significa si voy a 12 40 pixels, bien, satisface ambas condiciones. El trabajo es 100% por lo que los elementos están tocando los bordes de la pantalla y el máximo con su 9 20 Lo que significa si voy a 38. 40 se puede ver que esto es una especie de restringido o, ya sabes, digamos eso a 2000 para que sea más fácil de entender. Está bien, se puede ver que esto está tocando el borde izquierdo de la pantalla, pero aquí, esto está confinado a 1920 píxeles. Tenemos este gap extra off 80 picks es correcto para responder la pregunta fuera rediseño en 14. 40. Pero cómo se va a ver en puntos de ruptura más pequeños. Utilizamos esta condición. Entonces vamos a decir, tomar el 100% de lo húmedo, pero restringido a 1920. Ahora, sé lo que estás pensando. Tenemos este espacio extra a la izquierda y a la derecha, incluso en el 14. 40 pixeles. ¿ Cómo conseguimos eso? Es bastante sencillo. Entonces vamos al 14. 40 correcciones. Está bien. ¿ Y qué pasa con el selector de rapero? Voy a agregar espaciado a la izquierda y a la derecha. Entonces si selecciono este elemento, se puede ver que en realidad se puede seleccionar el elemento Se puede sostener el control y hacer clic en un elemento si está dentro de un grupo y también mantener opción o arte y simplemente pasar el cursor sobre para ver la distancia. Entonces tenemos 72 pixeles a la izquierda, bien, y 72 picks está a la derecha. Entonces lo que hacemos es seleccionar el bar Knave, que está actuando como sección, y le voy a dar una clase. Carlos de Navarra. Está bien. Y voy a darle un relleno interior. Entonces, ¿qué? Acolchado esto? Es una especie de empuja elementos dentro. Siempre se quiere dar relleno al elemento padre para que empuje elementos dentro. Por lo que la planeación va a ser 72 fotos sobre esto. Por lo que se puede ver que si paso el cursor sobre, se puede ver esa sección verde, que es especie del relleno, que es la distancia entre el elemento izquierdo y el derecho. Y además, podría hacer lo mismo del lado derecho y decirlo 72. Entonces eso empuja esto también. Para que veas que tenemos este espaciado interior que queríamos. Entonces, ¿cómo se va a ver en una pantalla más pequeña? Echemos un vistazo a 12. 46 está bien. Eso se puede ver. Eso es basar 72 picks. Nosotros también se respeta en un tamaño de pantalla más pequeño. Ahora bien, si vas a 1920 ¿cómo va a quedar? Tiene un 1920 también en 1920. Tenemos ese extra 72 picks una fiesta. De acuerdo, si vas a, digamos 2500. Está bien, tenemos ese relleno de 72 píxeles a la izquierda y a la derecha. Pero aquí, realidad, no importa porque nuestro ingenio estaba restringido a 1920 píxeles. Ahora ya ves, tenemos un problema aquí donde los elementos están amables hacia la izquierda, pero son ustedes saben que necesitan estar en el centro. ¿ Cómo hacemos eso? Muy sencillo. Entonces elegamos al rapero. Muy bien, ¿por qué tenemos que seleccionar al rapero? Está bien, porque podemos seleccionar al rapero sólo porque podemos definir que éste sea el centro. Entonces si hago clic en este botón, se puede decir que el elemento central horizontalmente requiere un trabajo fijo. Por lo que en realidad hemos definido un valor fijo fuera de 1920 pixel, que es nuestro máximo con lo que todo después de hacer es hacer clic en este botón, y eso va a centrar esto a toda la pantalla. Entonces si dije esto a 2000 píxeles, se puede ver que está en el centro fuera de la pantalla, bien, y eso es lo que queremos. Por lo que este botón se puede aplicar en Lee cuando hayamos definido un cierto ancho. Fantástico. Entonces volvamos atrás y dijimos esto a 14 40. Genial. Ahora sigamos adelante y personalicemos estos enlaces. Pero antes de eso, en realidad seleccionemos esta navegación. Pero porque queremos que esto sea transparente porque ahora mismo es Puedes ver que es transparente. Esta barra de navegación se está transfiriendo. Voy a bajar y aquí en la configuración de fondo, tiene algún tipo de color aleatorio en realidad. Vamos a seguir adelante y dar click en este botón Hacer que sea transparente para que no veamos nada. ¿ De acuerdo? Y ahora tenemos estos tres elementos. Entonces lo que quiero hacer es mi hijo en el 1er 1 ¿Está bien? Voy a darle una clase y llamar a este enlace de soltera. Este es un nombre que le estoy dando, ¿ acuerdo? Y ahora vas a entender el significado fuera de lo que una clase cumple. De acuerdo, así que sigamos adelante y realmente personalicemos esto con nuestra configuración. Por lo que vienen aquí, se puede dar click en uno de los elementos que tenemos, y se puede ver que tenemos cierto valor de aquí. Alguien haga clic en este botón dedo del pie link, y ah, como que me olvidé de instalar los teléfonos porque estaba trabajando en el Mac Book Pro, Así que de todos modos voy a hacer eso en el siguiente video. Entonces Pero por ahora, se puede ver que el tamaño de la fuente es de 16 y tenemos ah, altura de 1 50%. Está bien, así que vamos a hacer es voy a seguir adelante y cambiar el tamaño de fuente a 16. De acuerdo, La altura va a ser del 1 50% para asegurarte de que agregues el valor por ciento, y luego también vamos a cambiar el color de esto a blanco. Pero tiene una capacidad del 70%, como se puede ver aquí. Por lo que voy a dar clic en este botón y luego dar clic en éste para hacerlo blanco. Y también voy a dar clic en Plus para que sea una muestra y luego dar clic en Crear. Y luego cambiaremos el Alfa, que es de ocho, que también se llama capacidad al 70%. Entonces ahora tenemos algo. Se ve así. Y obviamente, esto es experiencia. Tenemos que trabajar, Tenemos fotografía y tienes contacto. Entonces lo haremos. Es quiero hacer doble click en esto y simplemente cambiar esto a experimentar. Está bien, genial. Ahora también puedes ver que tenemos esta distancia de ordenamiento, que es de 24 píxeles en la parte superior, y Tito pixel study 24 pixels en la izquierda y en la derecha, y 32 pixels en la parte superior. Entonces voy a añadir la manchada que alguien venga aquí. Y como pueden ver, queremos poner esto en 32 en la parte superior 32 en la parte inferior, 24 en la izquierda y 24 en la derecha. De acuerdo, entonces ahora si puedes ver que tenemos tipo de estructura de la manera en que realmente se ve así. Está bien, genial. Ahora también tenemos es estos dos elementos. ¿ Qué hacemos con nosotros? Obviamente también tenemos que hacer que se vean así. Entonces lo que puedo hacer es que puedes ver que le damos nuestro clásico es vínculo de knave. Voy a venderla este link de knave y solo darle una clase llamada Knave Link y podrás ver las clases existentes. También tenemos las clases que nombramos con tu prensa enter. Y eso va a aplicar eso. Es lo mismo aquí. Vínculo de soltera y fantástico. Vamos a seguir adelante y renombrar esto tan trabajando para la geografía, así el trabajo y la fotografía. Está bien. Y luego voy a seguir adelante y duplicar esto, ¿de acuerdo? Y esto va a ser contacto Mayor ahora. Como puedes ver, contacto se ve diferente, ¿verdad? Entonces si sigo adelante y cambio el color de esto para que sea otra cosa. Está bien, así que si vas al fondo, todos son algún color de fondo que consideras que aplica este otro color también. Pero eso no es lo que tanto queremos. Hacemos eso de dos maneras, podemos o bien crear una clase completamente nueva. ¿ Todo bien? Entonces en realidad puedo quitar esta clase, y puedo crear una clase completamente nueva, pero eso va a llevar mucho tiempo, ¿ verdad? Va a tomar muchos pasos extra. Entonces lo que puedo hacer es que puedo Y tú puedes presionar el control Z, por cierto para, ya sabes, para deshacer y rehacer el control. ¿ Por qué el dedo redo control Z está dos bajo? Lo que puedo hacer es agregar algo llamado ¿Es clase combo? Entonces si hago clic aquí, puedo agregar algo que tenga una nueva clase combo. ¿ Y qué? Yo lo voy a decir. Voy a llamar a este botón, acuerdo? Cualquier nombre, lo que quieras. Puedes llamarlo cualquier otra cosa. Entonces cuando voy a dar click en abajo, lo que va a pasar es que voy a bajar a la parte trasera alrededor de los colores y realmente vamos escoger este color que tenemos este color púrpura. Sólo voy a copiar la cancha de colores, ¿de acuerdo? Y, um, una pareja aquí, y voy a bestia eso. ¿ De acuerdo? Y además, voy a añadir esto a una muestra, y aquí se llama Azul, pero lo que sea, eso debería estar bien. Vale, Ahora, lo que pasó aquí es que por esta clase combo, se puede ver que estos tres el narco, afectó sólo a este factor Carter. Y si ven el color por aquí, esto es naranja. Y esto es azul. Debido a que esta clase combo sólo tiene esta propiedad fuera de este valor de color extra que agregamos. Entonces si voy a la conveniencia y probablemente digamos que cambio el tamaño extraño, se puede ver que el tamaño de la fuente cambia para esto también, porque esto tiene esa clase basada llamada knave link. Está bien, voy a seguir adelante y acaba de poner este dedo atrás 16 ¿verdad? Y debido a que tiene un enlace base, está cambiando. Pero debido a que agregamos una clase de combate, que es un efecto adicional, es que está afectando solo al elemento que tiene esta clase combo. Ahora, lo otro que debemos señalar aquí es que esto es en realidad en chico rxf una mirada por aquí. Está en Boyd. Entonces lo que puedo hacer es aquí por el botón. Puedo cambiar la fuente. Espera. También para aburrirse, acuerdo? Y esto va a ser blanco puro. Voy a cambiar esto también a blanco puro. De acuerdo, así que este es Element, en realidad, tiene tres nuevas propiedades son diferentes. Los pesos son de color diferente en un fondo diferentes colores también. Entonces esa es la significación fuera de un combo close. Está bien. El siguiente paso es que vamos a seguir adelante y añadir en otro logo el cual tenemos por aquí, y lo que puedes hacer es condonar, o los activos que están ahí en el activo en los archivos del proyecto y puedes venir aquí y dar click en el activos, y en realidad se puede importar todo el activo. Entonces voy a hacer eso ahora mismo. Está bien. Entonces como pueden ver, he ido adelante e importado todas las imágenes de todos los activos que necesitamos. Ahora, lo que vamos a hacer es esa especie de observar esta sección, ¿ verdad? Entonces conseguimos algo llamado como la marca, y la marca tiene este link like on, lo que significa que es un link block derecho. Como puedes ver, es que es una cuadra. Es un bloque de enlace. Entonces va a seguir adelante y llamar a esta marca. ¿ De acuerdo? Ahora, lo que haremos es seguir adelante y seleccionar este logotipo que tenemos, que es un SVG y se arrastraron eso, y quiero dejarlo caer eso dentro de la marca. ¿ Todo bien? Debería estar dentro del marrón. ¿ De acuerdo? No lo sé. Llame a este logotipo. Está bien. Ahora desafiemos la altura y la anchura. Ahora, esto de aquí es puesto de 24 píxeles. Y por aquí, en realidad se puede ver que los valores que definen cuál es de 79 píxeles con y 24 picos de estilo, que es exactamente lo que necesitamos. Y esto es de todos modos y svg así que no tenemos que preocuparnos demasiado por escalar, así que dejaremos eso tal como está. Genial. Ahora, el problema es él aquí Es que esto Todo aquí está como en el centro, pero esto está algo alineado a la cima, Así que date prisa, especie de centro, Linus. Entonces lo que podemos hacer es si ves u oyes, tenemos un margen superior de 30 dedo del pie. En realidad puedo ir y agregar un margen de 30 dedo del pie. Hacer este elemento en particular. Ahora, tendrás cuidado con qué elemento estás agregando, desplazándote a escribir. Porque lo que queremos hacer es, ya sabes, agregarlo. ¿ Este enlace bloquea bien? Queremos agregar al bloque de enlaces porque eso en sí contiene ese local de Robin entero. Voy a ir a añadir un margen en la parte superior y llamarlo 32. Por lo que ahora la marca, bien y en el logo están dentro en el logo está dentro de la marca y la marca, El estudio a dos fotos lejos de la parte superior. Y esto se ve más o menos, ya sabes, en el centro. Y se ve bastante bien. Entonces eso es más o menos sobre cómo creamos esta barra de navegación. Si vas y lo cambias a un punto de ruptura diferente, como 1920 puedes ver que tipo de expansión, pero mantiene ese margen de 72 píxeles que habíamos mantenido. Y eso se ve fantástico. Genial. Por lo que en el siguiente video, vamos a seguir adelante y en realidad añadir algunas interacciones flotante a esto y tal vez incluso hacer que esto represente para tabletas y piezas de freno móviles. Entonces son ustedes chicos en el siguiente video 8. Agrega interacciones de hover a la barra de navegación: derecho. Entonces en este video, lo que vamos a hacer es ir adelante y agregar un poco fuera de interacciones divertidas hover a cada uno de estos elementos. Vamos afuera un poco más lúdico y animado. Entonces, ¿cómo hacemos eso ahora? Son dos tipos fuera de interacciones en Napa. Una son interacciones simples, y otra son interacciones complejas. Si fueras a crear interacciones y animaciones complejas, probablemente tendrás que ir a la interacción, apuñalar y hacerlo por aquí, cual haremos un poco más tarde. Pero por ahora, lo que vamos a estar creando es una interacción flotante muy simple. Entonces no tenemos que ir al escalón. Cómo estamos haciendo esto es mediante el uso de clases y veamos cómo hacerlo. Voy a seguir adelante y seleccionar el primer arnés que tenemos, y voy a bajar a este desplegable que tengo, y voy a elegir un colegio estatal. El estado flotante. Ahora tienes cuatro estados diferentes flotando, presionados, presionados, enfocados y visitados ST Now, A veces te gustaría usar esto para cajas de entrada o botones o escalera de cosas. Pero en este caso, solo nos preocupamos usar hover, dar click en hover. Es decir, si puedes tener lo que va a pasar, va a crear un plus de combate, lo que significa que cualquier efecto que crees nuestro anuncio se va a afectar sólo en esta clase de combo , ¿ verdad? Justo de la forma en que creamos una clase combo para este botón de enlace de navegación, alguien baja y vamos a hacer es en la configuración de color. En realidad voy a despejar un nuevo color, están en lo físico, ya sabes, como harvard un poco y probablemente escoger un buen color y tal vez dijo la capacidad al 100%. Ahora mismo eso parece un color brillante muy bonito. Y tal vez podrías tener algo derrama en el lado azul y voy a seguir adelante y crear una muestra de color, derecha y correctamente puede crear. Fantástico. Y ahora lo que voy a hacer es volver a lo no estatal para que nos aseguremos de que sea por defecto y nuestra directamente comprobar si este trabajo lo que podemos hacer es que puedes hacer click en esta botella de vista previa que tipo off revisa cómo se vieron realmente nuestra página web . Y si paso el cursor, se puede ver que el color cambia bien y yo también puedo flotar sobre esto. Pero, ¿cómo funciona para esto? Está funcionando porque estos tres tienen la misma clase. ¿ Verdad? ¿ Y cómo va a venir por aquí? Realmente no funciona porque hay una clase de coma. Eso es una especie de reemplazarlo. De acuerdo, Entonces Correcto. Y la cosa es, No, esto es pelea de trabajo, pero podemos tener ganas de tener algo de flexibilización. No queremos que cambie de inmediato. Vamos a tener algo de sierra. Pequeña transición entre los colores. Entonces, ¿cómo hacemos eso? Entonces voy a seleccionar esto. Y en lo no estatal, voy a bajar a la sección donde tenemos algo llamado Transiciones. Y donde usted este es donde se puede agregar flexibilización. Entonces lo primero que va a hacer es que voy a seleccionar la propiedad, que es dos, que es el color de la fuente. Y el segundo en es la duración. Ahora, algunos. Normalmente prefiero un rango entre 304 100 milisegundos. Entonces por ahora, sólo voy a elegir 350. También se puede al tipo de flexibilización. Y tienes muchos tipos diferentes de flexibilización. Preferentemente suelo ir por el que dice que está fuera de la cancha. Eso es un poco de estilo. Y me gusta lo que definitivamente puedes elegir lo que quieras, y puedes jugar con él, y eso es casi todo. Entonces ahora si vas y revisas eso, puedes ver que, ya sabes, puedes ver la ligera transición entre el color viejo y el nuevo color. Está bien, y eso es mucho más mejor. De acuerdo, ahora, ¿ qué haces por éste? Entonces lo que podemos hacer es que podemos hacer un par de cosas que quiero hacer es que voy a seguir adelante y añadir en un hover. Y esta vez sólo voy a ir al fondo, y voy a hacer esto un poco oscuro, acuerdo? Sólo un poco oscuro, está bien. Y entonces sólo lo voy a dejar como esto. Vamos a volver a lo no estatal y podemos sumar una nueva transición. Y aquí en la transición, voy a elegir el color de fondo y establecer esto en 350 milisegundos. Y también, la flexibilización va a ser fácilmente cancha. Está bien, así que ahora echemos un vistazo. Está bien, puedes ver que se ve bastante bien. fantástico. Entonces que en realidad lo que vamos a hacer es que vamos a seguir adelante y hacer de esto una respuesta para otros puntos de ruptura tan establecido más scape byline y retrato móvil. Entonces son ustedes chicos en el siguiente video. 9. Cómo hacer que la barra de navegación sea respondible: Muy bien, chicos. Entonces en este video, vamos a seguir adelante y aprender a hacer que esta barra de naff responda. Podría ser bastante divertido porque la capacidad de respuesta es un tema bastante importante en el concepto que sabes cuando necesitas aprender cuando estás construyendo un sitio web, por lo que es probable es cómo hacerlo. Ahora tenemos tres puntos de ruptura diferentes. Tienes tablet, tienes más por paisaje y tienes móvil Portrait little tablet primero. Ahora lo que vemos aquí es que tenemos este nuevo icono de menú que está ahí. Entonces, ¿de dónde está este dinero del que realmente puedo salir? Si realmente miras la navegación, tenemos la marca. Está bien, tenemos el menú del naff. Nunca obtuve el botón de menú. Ahora, en el punto de ruptura del escritorio, teníamos el menú de knave y el botón de menú no estaba ahí. Entonces, si realmente miras lo que aquí en el ajuste desplazado, realidad puedes ver que la pantalla está realmente configurada o no. Pero necesito otro punto de ruptura de tableta. Podemos ver que el botón de menú, bien, en realidad está en el bloque. Display en el menú de knave en realidad está oculto. Está bien, así que eso es feliz que el búfalo haya hecho automáticamente. Ahora bien, si de verdad quieres asegurarte de que también quieres tener los enlaces de navegación en la tableta , ¿ cómo hacemos eso? Es bastante sencillo. Si seleccionas la barra de knave y venimos aquí al panel Elementos, que es el segundo top, puedes ver que tenemos la opción de mostrar el ícono de menú para tablet y abajo. Lo que voy a hacer es que voy a decir mostrar muchos icono para paisaje por paisaje móvil y abajo. De acuerdo, lo que significa que cuando voy al paisaje móvil, tenemos el ícono del menú. Cuando vengo por aquí fuera de las lamas de duelo Muy bien, genial. Ahora se puede ver que hay eso. Sentimos que esto es que hay demasiado espacio o aquí en el escritorio. Yo me veía bien, pero en una tableta, se siente que, ya sabes, se ve apagado y también se puede ver que tenemos múltiples puntos de ruptura por aquí, ¿ verdad? Y cuando digo punto de ruptura, me refiero en este contexto punto de ruptura para diferentes dispositivos de tableta. Entonces tenemos iPad Pro, que es 7 68 y luego tenemos 808 34 luego, ya sabes, 912 y lo sabes y así sucesivamente. Entonces vamos a empezar con la más pequeña porque va a tener sentido. Ahora lo voy a hacer es que voy a venir aquí y seleccionar la NAB nuestra y agregamos 72 o quiero hacerlo ya. ¿ Eso es a 40? Está bien, así que se ve mucho mejor. Cambiamos, los 40 estaban aquí. Pero cuando vuelvas aquí, tú tampoco puedes. Sigue siendo 72. ¿ Cómo funciona eso? Porque esto es lo que un CSS hojas de estilo en cascada. ¿ Qué está pasando aquí? ¿ Es eso algún cambio que haces en cascada hacia abajo en el punto de ruptura? Entonces lo que significa que se va a aplicar el 72 dedo del pie este y esto. Pero ahora, una vez que hicimos un cambio a tablet off 40 este 40 va a ser transmisor al paisaje también, donde se puede ver es 40 y no 72. Y para retrato móvil, que es 40 que no era 72 antes. Por lo que en realidad tenemos este control donde podemos cambiar las propiedades de un punto de ruptura y no afectar a los otros puntos de ruptura. Y eso es fantástico. Y eso hace que sea mucho más fácil diseñar y construir cosas ahora mismo. Vayamos al punto de ruptura del paisaje. Pero ahora, si realmente ves que tenemos el diseño para el móvil también. Ahora el retrato móvil y el paisaje móvil se comportan prácticamente de la misma manera. Por lo que en realidad podemos usar la misma configuración para el retrato móvil. ¿ Verdad? Entonces si ves u oyes, he ido adelante y cambio la distancia. Los elementos son para ser 16 picks está a la izquierda y 16. Yo soy guapa para bien. Esto en realidad necesita ser 20 en. Esto tiene que ser 20 también. Entonces voy a asegurarme de que tengo los números correctos, ¿de acuerdo? Y en la parte superior, tienes 24 que tenía también en la parte superior del auto 24. Podemos ver que la parte superior aquí es de 24 picks es nuestro margen. Entonces voy a establecer eso. ¿ Son dos de 24? Está bien, se ve bien. Y fondo. También abajo. Puedes dejarlo tal como está. Um, y entonces lo que podemos hacer aquí es por estos muchos, pero Y yo iba a llamar a esto un botón de menú. Vale, Ahora, ya que ya tenemos este pixel 2020 a la izquierda, lo que quiero hacer es lo suficientemente maravilloso, pero lo voy a quitar del lado izquierdo, del lado derecho. Entonces la forma en que vamos a crear un espaciado de 20 píxeles es agregando relleno de 20 píxeles al botón de menú y también 20 por aquí y 24 en la parte superior y 24 en la parte inferior. Está bien, así que ahora esto parece más o menos lejos. Ahora, lo siguiente es aquí que en realidad tenemos un icono diferente por aquí, Muy bien, Y aquí tenemos un icono diferente. Ahora bien, este es el predeterminado. Realizo regalos de flujo de aire y podemos llamar a este ícono del menú, y en realidad puedes seguir adelante y jugar con esto agregando tus propios ajustes personalizados . Entonces si voy, puedo cambiar el color de este para que sea blanco. Y lo que va a pasar es que lo va a cambiar. El blanco. Ahora, lo siguiente es, ¿cómo ves realmente el elemento del menú? Si vas a una vista previa de objetivo, realidad puedes hacer clic en él y eso va a abrir este tipo de A Ya sabes, muchos donde realmente puedes pasar y tocar cada uno de los enlaces. Aquí es donde están nuestros enlaces de navegación. Este es el menú del naff, Está bien, pero por ahora, lo que voy a hacer es ir adelante y reemplazar este ícono que tenemos. Entonces voy a importar este ícono de menú que tengo de los activos para que en realidad veas que tengo el ícono por aquí, así que no quiero ir al Navigator, en realidad, y vamos a abrir este botón de menú ahora . Este es el botón de menú que tenemos. Voy a seguir adelante y arrastrar esto y poner eso dentro de estos muchos, pero Y en realidad puedo seguir adelante y borrar el otro porque no lo necesitamos. ¿ De acuerdo? Y ahora esto está en una gran y esto se ve bastante bien. Está bien. Si miras más por paisaje, esto es más o menos como se ve en el diseño. Y cuando hacemos clic en él, abre este menú. Fantástico. Ahora, obviamente, este menú también necesita algo de trabajo, así que vamos a arreglarlo. Entonces vamos al paisaje móvil on. ¿ En realidad puedes cambiar eso eligiendo este botón seleccionar en menú, y puedes elegir la configuración de la barra naff y puedes elegir menú abierto. Y ahora tienes esto. Y ahora cualquier cambio que hagas a esto, es como que va a efecto del estilo visual. Entonces lo primero que hay que hacer es que quiero hacer este botón de menú y el fondo. Voy a cambiar eso para que sea negro, ¿verdad? Ese es el número uno. El siguiente es el enlace de navegación son en realidad transparentes. Pero el menú de knave es el que tiene algún tipo de colores. Voy a primero que nada, voy a darle una clase a esto y llamar a este menú naff, acuerdo? Y voy a cambiar el color. Este para ser, um, uno de los colores que tenemos en el archivo de producto, Que es éste. Está bien. El ordenar un color morado oscuro. Sólo voy a copiar ese código de color. Está bien. Y voy a volver aquí y sólo basar eso, y luego voy a seguir adelante y añadir esto a la muestra de color, y voy a llamar a este nivel uno. Está bien. Esto es esto es que es porque más o menos estamos llamando a este nivel uno, acuerdo? Y tal vez lo que podamos hacer es por el menú de knave para 30 para el enlace de knave. Lo que puedo hacer es agregar en una especie de borde inferior. Por lo que voy a dar click en la sección fronteriza y dar clic en este botón, que va a agregar un borde inferior. Y voy a poner una palabra de uno, acuerdo? Y que voy a cambiar el color del negro a una especie off. Ah, ya sabes, como una luz. O vamos a actriz editora blanca. Y es la opacidad al, como, 12% o algo así. Sí, eso se ve mucho mejor. Y, ah, eso es más o menos como se va a ver y el contacto. Pero va a ser palabra completa, así que eso se ve genial. Entonces si abres el sub, esto es lo que obtenemos. Se ve bien. Y podemos cerrar esto. Muy bien, vamos a ver para móvil Looks fantástico. Genial. Ahora que otra cosa que puedes hacer ahora, también puedes elegir abrir el menú como desplegable o sobrescribir o sobre la izquierda Si eliges más. Correcto, Onda, abrimos esto. Se puede ver que viene de la derecha ahí muchas maneras diferentes que puedes mantener esto donde prefiero elegir un desplegable. Y si estás mirando otro enlace, puedes jugar con la flexibilización, ¿ verdad? Un par de características o funcionalidad. Entonces aquí. Pero vamos a mantener esto simple. Entonces si revisas nuestro look paisajístico, las cosas se ven bastante bien. Y sí, eso se ve bastante bien. Muy bien, genial. Entonces ahora lo único que dejamos el estudio es que tipo de agregar enlaces a cada uno de estos, porque de todos modos, estos son enlaces. ¿ Cómo podemos estar? Piensa que vamos a entender esta opción de configuración de enlaces que tenemos aquí. Entonces como ustedes chicos en el siguiente video 10. Agrega enlaces a los elementos de enlace: bien, Así que va a haber un video muy corto porque sólo van a entender rápidamente cómo agregar enlaces. Ahora, cuando haces clic en un elemento de enlace y cómo sabes si algo es enlace o no es mirando este icono de enlace. Si tiene algo como esto, eso significa que es un elemento de enlace. Puedes aplicarle propiedades. Por lo que puedes o hacer clic en este icono de engranaje realmente tienen, como, seis propiedades. Todo tú, tienes tienes, um, um, ya sabes, puedes comprobarlo en el ajuste de elementos que abarca por aquí. Por lo que un par de cosas una es obviamente cada elemento puede tener un enlace a un sitio web externo . Y puedes dar clic en la casilla de verificación si quieres abrirlo en un nuevo toque. Muy bien, entonces tienes una página. Entonces si tu sitio web tiene múltiples páginas o puedes hacer es puedes tipo de enlazarlo, haz eso pagado. Por lo que en este caso, no tenemos múltiples páginas. Entonces lo que voy a hacer es que voy a dejar esto tal como está. Vamos a estar usando el siguiente, que es una sección pero llegando al discurso donde realmente podamos hacerlo. Si seleccionas este logotipo y podemos elegir el elemento de marca, derecha, si seleccionas el elemento de marca, realidad podemos ir a la página y en la página. Puedes elegir la página de inicio. Entonces cualquiera que toque a quien haga clic en este logotipo de robin va a aterrizar en la página de inicio , y podemos asegurarnos de tenerlo solo en ese top. No lo abramos en una nueva pestaña que vuelve. Entonces aquí tenemos algo que es una sección de página. Esto es algo que implementaremos un poco más tarde. Pero básicamente lo que va a pasar es que cuando haga clic en la sección de experiencias, es especie fuera de la página se va a desplazar a la sección de experiencias fuera del sitio web para que realmente podamos definir eso. Va a ser bastante guay. El siguiente es si quieres que alguien se contagie, um, milieu. Entonces al hacer clic en este botón, se va a abrir el cliente de email fuera de esa persona en particular, y se puede tener ah, se puede. Puedes ingresar tu inmunidad y también, ya sabes, en el sujeto prefijo si quieres. A continuación se presenta un número telefónico, ya que se pueden ver enlaces foráneos enlaces telefónicos, solo dispositivos en funcionamiento que pueden realizar llamadas telefónicas. Entonces esto es algo que sólo se puede hacer en un punto de ruptura móvil. Y el último es el apego, lo que significa que se puede adjuntar cualquier imagen que se desee del panel de activos, y al hacer clic en él, se va a abrir esa imagen. Ya sabes, ya sea en una nueva pestaña si haces clic en el botón o se va a abrir su eso donde América tiene razón. Entonces, ¿eso es realmente lo que se trata de los enlaces de navegación? El asunto debe hacerlo. Cualquier elemento de enlace va a tener estas opciones o si usa un bloque de enlace, va a tener estas opciones, así que eso es más o menos. Y en la próxima semana, vamos a saltar a la sección de calentadores y construir la sección de héroes. Entonces los veré chicos en el próximo video 11. Construir la sección del héroe: Muy bien, chicos. Entonces en este video, vamos a seguir adelante y construir la sección de héroes, que es esta sección. Y antes de hacer eso, siempre comprendemos cómo son los elementos la estructura y la forma en que se construyen. Entonces lo que vamos a hacer es mirar cuántos elementos tenemos. Tú Tan poca imagen a la izquierda. Tenemos que textualizar elementos y luego tenemos esta decoraciones de borde de fondo o algo así. ¿ Verdad? Entonces, ¿cómo hacemos los constructores? Por lo que creé este ordenar un marco de alambre modelo de caja simple donde podemos entender como funciona. Vamos a empezar por crear una sección que es el Partido Naranja, ¿ verdad? Voy a crear una sección grande y luego dentro de eso voy a crear un rapero. Como puedes ver aquí, este es nuestro color de envoltura por ahí a la izquierda, tenemos una imagen, y a la derecha, vamos a crear un bloque de que va a sostener do elementos siguientes. Entonces así es como no se puede querer estructura del dedo del pie, todo y muchos componentes. Ahora podemos ver que este texto se está superponiendo a la imagen que está bien. Pero esto es sólo para explicar cómo estructurar y qué componentes usar. ¿ Y cómo se ve realmente en la parte de atrás? Es correcto. Y la otra cosa de nota escrita aquí es que la altura de la imagen va a tener Ah, altura de 45 v hetch en las imágenes va a ser 55 www. Muy bien, así que somos un poco malos. Entonces saltemos en realidad al piso mojado y luego veamos cómo funciona todo esto. Está bien, así que aquí, me refiero a rep bajo y qué volver a hacerlo. Voy a empezar creando una sección y asegurarme de seleccionar el cuerpo porque la sección necesita ser un hijo del cuerpo. Soy una prensa controlada comer y buscar sección. Y ese es el elemento que fuimos. Entonces tenemos un elemento de sección. Voy a dejar caer esa perspicacia. Y lo primero que siempre quisiste es dar una clase. Entonces voy a llamar a este calor o sección. Vale, Eso es un Ahora lo que queremos hacer es agregar un rapero, así que voy a crear otro bloque div, ¿de acuerdo? Y este va a ser nuestro envoltorio. De acuerdo, Tú eres Ya tenemos una clase que dice Rapper, así que podemos añadir eso, Está bien. Y si ves o escuchas eso, hay prácticamente nada a la izquierda y ya sabes, el impuesto o aquí tiene gastando 40 píxeles en el lado derecho. Entonces lo vamos a hacer es que voy a ir a la sección porque si miras el duende Pero agregamos que en un margen sobre el Nabaa, que acceden a la sección agregamos 72 porque píxeles a la izquierda y 72 píxeles a la derecha . Me pregunto lo mismo para esta sección de calentador es, pero así que déjame ir y agarrar esa sección aquí y para la sección de héroes, voy a añadir un relleno de 40 píxeles a la derecha. Está bien, eso es todo. Apenas 40 picks está a la derecha. Ahora. El motivo por el que en realidad actualmente algo es porque en el momento que somos propiedades, el tipo de colapso porque no hay contenido dentro de él, ¿ verdad? Entonces, en realidad agreguemos algún contenido. Entonces agregamos la sección agregamos el rapero, y ahora tenemos que sumar estos dos elementos, ¿no? Entonces, idealmente quisieras agregar un bloque de para esto y un punto muerto para esto, ¿ verdad? Pero antes de que hagamos eso, vamos a hacer algo nuevo. Y algo diferente que va a hacer es que voy a seguir adelante y seleccionar al rapero que tenemos , ¿de acuerdo? Y voy a añadir un combo close. Está bien. ¿ Y por qué estoy escuchando esta clase de coma? Permítanme que explique. Entonces solo soy tipo en grilla, acuerdo? Lo que ahora significa que cualquier cambio que haga efecto, sólo este combo plus y todo lo demás siguen igual. Lo que voy a hacer es cada look, ven aquí a las propiedades de visualización, y tenemos seis propiedades de visualización, acuerdo? Y íbamos a entender lo que estos +21 por uno. Pero por ahora lo voy a hacer es voy a dar click en el 3er 1 que dice Bueno te permite colocar elementos del mismo en filas y columnas. Voy a dar click en esa animada. Se puede ver que tenemos esta estructura de rejilla que tenemos. Está bien. Y lo vamos a hacer es voy dedo del pie elegir y personalizar las rejillas fuera de la armonía columnas y filas. Yo quiero obviamente solo necesito un dro, así que voy a borrar por aquí solo flotando por aquí y puedes creer. Y necesitamos columnas, lo cual está bien. Eso es lo que necesitamos. Muy bien, genial. Alguien adelante y haga clic en. Hecho. Entonces ahora tenemos una especie de esta gran capa, y todo lo que tenemos que hacer ahora son elementos de entrada. Muy bien, entonces empezaremos creando un bloque de para la imagen y un punto muerto para el texto. De acuerdo, entonces voy a presionar el control E, y voy a traer un elemento que causó el bloqueo, acuerdo? Y lo que realmente pasa si miras la navegación, tenemos el calor o sección, y luego tenemos al rapero, que ahora está en forma de grilla, que antes era un bloque de paloma. Y ahora dentro de eso tenemos esta cuadra. De acuerdo, voy a duplicar esto presionando el control, Say country. Y lo que eso va a hacer es que esto va a entrar a una segunda celda porque este es el segundo hijo. Y el 1er 1 va a ocupar el primero porque el primer viaje, voy a salvar el 1er 1 y voy a añadir una clase, y voy a llamar a este rapero de imagen héroe Vale, Bueno, podríamos llamar a esta caja de imagen de héroe. Creo que ese sería un mejor nombre. Está bien. Y para el 2do 1 lo voy a dejar como esto y mucha clase después, y te diré por qué. Entonces empecemos con este cuadro de imagen de héroe. Entonces ahora que hemos creado esta caja de imágenes de calentador, lo que voy a hacer es ir a agarrar la imagen del héroe, que está por aquí, ¿de acuerdo? Y voy a seleccionar esto, y voy a seguir adelante y dejar eso dentro. Ahora, el problema es que no va a caer exactamente en el elemento que queremos. Entonces la mejor manera de ir es ir realmente aquí en la navegación on. Déjala caer por ahí. Está bien. Ahora, todavía no caminaba rápido bastante bien. Por lo que sólo nos aseguramos de que lo hicimos de la manera correcta. Entonces lo que voy a hacer es seleccionar esta imagen y poner esto dentro de esta imagen de héroe para bloquear ahí mismo. Vete Ahora. Esta imagen es bastante grande y enorme, ¿verdad? Entonces, ¿qué vas a hacer? Un bicho raro es lo primero es hacer clic en el icono del engranaje y voy a seguir adelante y no lo hagas en esta imagen. Dice imagen es H I D p. Voy a patear en eso. Está bien, Y nada cambia. Y voy a explicar a qué se refiere este h I v p I en el siguiente video. Entonces tienes contexto. Pero por ahora, vamos a no hacer en h I D p I Ok, Y eso es genial. Y ahora lo haremos es que tendremos este callejón sin salida, y aún no voy a dar un con clase. Yo me voy a ir. Y no hice elementos de texto. Está bien, así que uno va a ser este rumbo, y uno va a ser este. Por lo que tenemos un par de elementos siguientes. Si nos fijamos en el panel de elementos en tipografía, tenemos encabezamiento párrafo, enlace de texto, bloque de texto, cotización de bloque, y texto enriquecido. Entonces en este caso, vamos a usar y 11 encabezamiento de calidad. Está bien, voy a arrastrar eso y soltar esa perspicacia. ¿ Y por qué tenemos que usar un rumbo? Entonces lo que pasa con los sitios Web es que la forma en que se clasifican en Google es a través de que si tu sitio web tiene palabras que coinciden con la búsqueda de descripción hecha por el usuario navegando en Google, entonces estás molesto se va a conseguir clasificado arriba. Entonces, ¿cómo define esas palabras clave en un sitio web? Y eso es mediante el uso de este elemento de calidad rubro impuesto. Por lo que hago clic en este icono de engranaje. Tengo seis etiquetas de encabezamiento de ayuda diferentes, y estas se van a colocar en función del nivel fuera de la jerarquía. En este caso, tenemos a Robin Williams, un diseñador de productos con sede en Italia. Esto es bastante grande, y esta es la información más importante en la página web. Está bien, eso es lo más importante en términos de jerarquía. Entonces eso va a ser cada uno. De acuerdo, entonces lo que voy a hacer es que voy a seguir adelante y llamar a este H uno, acuerdo? Um, o simplemente podemos llamarlo ¿Sabes?, encabezamiento y subrayado. Um, y nos han dado algunos valores, como 76 picks es así que voy a decir, encabezando debajo de la escuela 76 píxeles. Está bien. Y sigamos adelante y en realidad sumamos estos valores. Entonces tenemos Oh, me olvidé de instalar los teléfonos. Voy a hacer eso otra vez. Por lo que tenemos sen bowled 76 100% de altura de línea. De acuerdo, así que vamos a hacer eso. Por lo que también tenemos este margen en la parte superior. En realidad voy a quitar eso y dije que 20 en la parte superior en la parte inferior porque no necesitamos eso. Um, 76. Muy bien, altura va a ser 100% color va a ser blanco. ¿ De acuerdo? Y, uh, creo que voy a fijar este 210%. Está bien, eso debería estar bien. Y se ve bien. Todo después de noticias va a copiar esto. Entonces voy a decir que soy Robin Williams, es diseñador de productos con sede en Italia de la misma. Ahora, esto parece listo, diferente a la forma en que lo tenemos. Entonces lo primero que hagas es poner esto en 14 40 píxeles. Entonces ahora en realidad se puede ver esto, y entonces vamos a hacer es voy a seleccionar,ya sabes, ya sabes, el elemento de cuadrícula, que es el rapero en este caso. Y si hago clic en este ícono, podemos editar lo grande. Lo que vamos a hacer es antes que nada, voy a quitar el hueco de columna y dije que cero porque queremos que se corten, tocándose unos a otros. Y eso se ve bastante bien. Ahora lo que no sucede aquí es que esta imagen es en realidad bastante larga. ¿ Todo bien? Esto es, como, bastante grande si lo miras, es es que se está arrastrando mucho. ¿ Verdad? Pero por aquí, la va a restringir a Ah, altura de 45 v escotilla. Está bien. Y eso es algo que podemos definir, correcto, Porque no queremos que sea tan enorme, y podrías tener una imagen que es más larga que ésta, o corta de ella. ¿ Y cómo lo vas a hacer funcionar? Correcto. Entonces lo que hacemos es que voy a seleccionar el primero de todo, vamos a darle una clase a esto, y voy a llamar a la imagen la imagen de héroe, ¿de acuerdo? Y voy a elegir el elemento padre, que es el cuadro de imagen de héroe. Y voy a decir que quiero que te quites una altura de 45. Nosotros eclosionamos. Está bien. Ahora, aún podríamos ver que prácticamente no ha pasado nada, y no está haciendo ninguna diferencia. Entonces, como, así lo primero que hay que hacer es fomentar caída en contra de que esta volver a 14. 40. Está bien. Y entonces lo que voy a hacer es ya que esto se está superponiendo. Lo que puedo hacer es que en realidad puedo seleccionar el Bloque de Dev. ¿ De acuerdo? Que está por aquí y en el bloque de la muerte. Voy a realmente ahora, darle una clase y llamar a este bloque de texto héroe. ¿ De acuerdo? Y voy a dar un margen negativo. Quirúrgico off se superpone a éste. ¿ Y cuánto tenemos que darle? Creo que lo voy a dar en algún lugar alrededor de 64 píxeles. Correcto. Entonces voy a decir margen negativo. 64 picks es así que ahora eso es una especie de superposición. Todavía no se está superponiendo por completo la imagen, porque la imagen en realidad no está ocupando todo el ancho. Está bien, así que si miras bien el bloque de imagen del héroe, puedes ver que esto es lo mucho que está retomando, pero la imagen en realidad no está retomando tanto. ¿ Verdad? Entonces lo vamos a hacer es realmente voy a borrar la imagen del héroe. Creamos eso. Y estoy escuchando el cuadro de imagen de héroe. Y en lugar de agregar un elemento de imagen, lo que voy a hacer es bajar a los fondos y el ingrediente de imagen seccional aquí, y voy a dar clic en el plus y voy a elegir elegir imagen y luego me voy a ir y elegir mi calor o imagen. Por lo que ahora esto actúa como fondo. Ahora, lo siguiente que va a hacer es que voy a poner esto para cubrir, y voy a ponerlo en Tailandia ninguno. Y también la posición de más al centro. Entonces ahora lo que eso va a hacer es que va a seguir adelante y va a poner la imagen en el centro. Ahora, obviamente puedes jugar con estos valores para ver lo que quieres, pero esto se ve bastante bien en este momento. Todavía no se ve perfecto. Se ve bastante grande y grande por aquí. Pero, ya sabes, vamos a arreglarlo despacio. Lo siguiente que hay que hacer es agregar en esta imagen. Perdón. Añadamos en este elemento de texto. Entonces ahora voy a seguir adelante y copiar esto, así que voy a crear este párrafo 18 píxeles, una copia. Eso Y ahora, Ahora esta importante, esta información podría no ser muy importante porque es baja importante en términos de jerarquía, ya sabes, si miras toda la página así que voy a usar un elemento llamado como los párrafos y reprimido control profundo y buscar un párrafo. De acuerdo, y voy a hacer doble clic y pegar eso a la vista. Y vamos a llamar a este gráfico PATA subrayado 18 píxeles. Porque este es nuestro párrafo 18 píxeles. Si miras el ajuste, tenemos 18 regulares y 1 50%. De acuerdo, entonces voy a ir a poner la fuente de color en blanco. Está bien, um, comer púas es y 1 50%. De acuerdo, así es como se va a ver. Y también tenemos algo de espaciado, ya sabes, debajo de hito profundo el rumbo. Entonces eso es alrededor de los píxeles Toledo. Entonces lo que hacemos es seleccionar este título de héroe y en el margen inferior. Voy a decir 32 mezcladores y eso se ve bastante bien. Ahora, las cosas aún no son perfectas como se supone que deben ser. Entonces lo que haremos ahora es que en realidad voy a ir y seleccionar, en realidad, déjame poner esto bien por aquí, y voy a añadir otra línea, y voy a decir que esta sección esconde es 100 Veatch. De acuerdo, Entonces, ¿qué significa esto otra vez? Echemos un vistazo. Voy a ir a estas secciones, acuerdo? Y en la sección de héroes, voy a decir, saca una altura de 100. Nos enganchamos. De acuerdo, así que ahora si puedes ver que soy capaz de desplazarme porque está tomando hasta 100 de la altura del puerto de vista . ¿ Dónde significa eso? Aguanta. Permítanme explicar esto uno por uno. Ahora, lo único que pasó es que cambió la altura. Pero, ya sabes, esto sigue en la cima, ya sabes, no está en el centro. Entonces lo que puedo hacer es si selecciono al rapero, Muy bien. Y lo que voy a hacer ahora es que no quiero hacer ningún cambio a este rapero de cuadrícula de héroes. Entonces voy a ir y dar clic en esto que dice, heredando tres selectores, y voy a elegir el nivel inferior uno, Así que voy a dar click en sólo el rapero. Entonces ahora cualquier cambio Emmick está afectando sólo al rapero. Y aquí en la altura, voy a ver por qué no te tomas al 100% bien? 100% de descuento en el padre y 100% del padre es de 100 v escotilla. Ahora, la razón por la que no estoy diciendo setos de 100 V por aquí es porque vamos a estar usando este rapero varias veces y no quiero que todo sea 100. El seto, está bien. Sólo en este caso, quería ser de 100 v seto, así que en realidad lo estoy aplicando. Reparación de dedos y elemento, que es esta sección. De acuerdo, entonces aquí voy a decir 100%. Y ahora eso te va a ver que el rapero también está ocupando, ya sabes, todo el espacio. Pero si ves que las cosas no se están alineando correctamente otra vez, necesitamos que estén en el centro. ¿ Verdad? Entonces, ¿por qué no están en el centro? Eso se debe a que estamos totalmente automatizados, empuja todo hacia la parte superior y hacia la parte superior izquierda. Y pensar que tendríamos que hacer manualmente algunos cambios. Entonces lo primero que va a hacer es aquí en este callejón sin salida, que estamos llamando el calor o bloque extra. Cuando creas una gran cuando creas una gran puedes definir cómo se verán los elementos secundarios . Entonces este es un gran niño, ¿verdad? Entonces voy a decir un centro de línea para esto y hacemos lo mismo aquí, que es héroe Image Block es un gran niño, está bien, bien, porque es un niño fuera de la red, ¿de acuerdo? Y quiero decir alianza centro. Entonces ahora esto es más o menos como se ve. Está bien, Pero si lo miras, realmente no, ya sabes, ve exactamente así. Entonces puedo hacer está aquí por esta caja de imagen de héroe, en lugar de establecer una altura de 45 que puedo cambiarla a algo más grande. Entonces algo así como 65 años bien, en eso se ve mucho mejor. Está bien. Y ahora este valor se puede cambiar. Por lo que a partir de 45 podrías hacerlo 65 años, dependiendo de cómo quieras que sea. Ahora, déjame explicarle lo que realmente está pasando. Si voy y hago clic en este proyecto publicado y puedo elegir publicado para seleccionar los dominios, puedo dar click en el sitio web real y ver cómo se ve eso. Está bien, Así que ahora así es como se ve bien. Y tenemos esta sección ocupando el 100% de la altura del puerto de vista. Y en mi caso, mi altura de puerto de vista es ya que estoy en una pantalla de ventanas, es 10 IGP. Pero, ¿cómo lo revisas para otros puntos de ruptura, no? Entonces tú Lo que puedes hacer es hacer click derecho. Y ella fue inspeccionada, ¿de acuerdo? Y yo iba a conseguir este tipo de cosas. Y lo que esconder aquí es, a medida que aumento la altura, se puede ver que la altura fuera de esto también está cambiando porque definimos una propiedad diciendo 100 v seto, lo que significa que se está quedando de 100% fuera del tablero de vista altura. ¿ Todo bien? Y vemos que tenemos esta tanta brecha y espacio en la parte superior. Entonces, ¿por qué está pasando eso? Eso es porque, primer lugar, creo que la altura de la imagen del héroe es demasiado pequeña. Entonces tal vez podríamos hacer este seto de siete TV y también la sección en lugar de decir 100 nos pegamos . Eso es realmente usar eso hasta 90 v seto, ¿ verdad? Y eso lo acerca un poco más a cómo se ve en nuestro diseño. Creo que podríamos tener que hacer mucho más así que en lugar de decir 70 nos dirigimos, voy a ir por 85 nos enganchamos y que esto se ve un poco mejor. A lo mejor creo que un seto de TV sería un buen trabajo, así que voy a seguir adelante y establecer esta altura de imagen para que sea una escotilla T V. Está bien, eso se ve bien. Y esto parece bastante más cerca. Haz lo que tengamos. En realidad podemos hacer click en Publicar de nuevo los dominios seleccionados. Eso lo va a publicar en nuestro subdominio, que es de forma gratuita. Y puedo seguir adelante y simplemente recargar esto y se puede ver que se ve un poco mejor. Como yo diría, bastante mejor si le dijera esto a 14. 40 correcciones. Um y, ya sabes, volvamos a poner esto de nuevo al 25%. Así es como se va a ver. ¿ Todo bien? 14 40 fotos. Esto se ve bastante bien. Está bien, bien. Ahora, lo último que queremos hacer es agregar este, ya sabes, elemento de fondo. ¿ Todo bien? Y voy a añadir un par de propiedades a eso aquí también. Entonces, ya sabes, solo crea una copia, ¿de acuerdo? Y voy a llamar a este hito BG Oh, tenemos que duplicar a un héroe de élite uno BG y nos preguntamos quién es para la altura. Está bien, voy a decir 100 v escotilla. De acuerdo, tal vez cambiemos eso un poco más tarde, pero no estamos muy seguros. Y por la imagen que vale la pena armada para el mundo, voy a decir 65%. De acuerdo, que es 65 VW y vamos a quitar estas altura de sección. De acuerdo, esto es lo que vamos a hacer. Entonces sigamos adelante y hagamos eso. Entonces ahora esto mismo es un elemento. Es que es un bloque de porque es sólo una forma aleatoria. Entonces lo que vamos a hacer es que voy a seguir adelante y asegurarme de que estamos dentro de la sección de héroes , acuerdo? Y voy a presionar el control e cualquiera. Adán se comió el bloque. Ahora este callejón sin salida, voy a llamarlo él Keitel BG Vale. Y voy a añadir este color que tenemos. ¿ Todo bien? Ya hemos agregado ese color. Entonces voy a ir al calentador BG y en el Grady en escenarios voy a elegir estudioso. Y aquí en la configuración de color elegiría este, que es nuestro nivel uno. Y porque eso se ve bastante bien. Genial. Ahora, ¿cómo nos tipo de hacer que esto se ajuste a la parte superior, verdad? ¿ Cómo hacemos eso ahora? Aquí definimos 19 900 por 900 que, que se ve bien en diseño. Pero podría, pero en realidad queríamos seguir estas propiedades, que es de 100 v Hatch y 65 VW. Entonces voy a empezar por ver a Tito. ¿ Por qué no te quitas al 100% de la altura del puerto de vista y voy a decir escotilla de 100 V, Ok. Y ahora eso va a ocupar el 100% de la altura del puerto de vista y para el Pero voy a decir 65 w derecha, Y eso es 65%. Ahora, esto realmente necesita ir creciendo en la parte superior. Ahora, aquí hay una nueva funcionalidad que vamos a entender. Vamos a entender algo sobre absoluto y relativo. Ahora, cuando tenemos elementos que se superponen entre sí, como como se puede ver u oír, esto está en la parte superior. Esto está en la parte inferior, pero luego tenemos el texto y la imagen en la parte superior. Pero ya sabes, este elemento está en la parte inferior. Por lo que tenemos capas, apenas establecer capas en sitios web. Entonces vamos a hacer va a gustar este héroe, B g, B g, y voy a bajar aquí para posicionarme, ¿de acuerdo? Y voy a elegir posición. Absoluto. De acuerdo, ahora, no pasó nada, pero si en realidad me cierro sobre él. Se puede ver que hay algún texto que dice posiciones absolutas un elemento relativo a la posición más cercana padre, hacer el cuerpo si no se selecciona ningún padre, Entonces, ¿qué significa todo esto? Entonces si voy y elijo uno de estos presets y voy a decir este lugar, aquel que es la parte superior, bien, va a ir y colgarse al lado superior derecho de toda la web, que es todo el cuerpo en este caso. OK, pero el problema es, se puede ver que se está superponiendo todo. Entonces lo que voy a hacer es aquí tenemos algo llamado índice Z, que tipo de define un número, y ese número es el nivel fuera de jerarquía se superponen o espacio de enfermedad. Y vamos a seguir adelante y acaba de decir esto a menos uno. De acuerdo, entonces ahora que tengo senador menos uno, está detrás de todo lo demás porque todo empieza ese nivel cero. Voy a ir un nivel atrás y ponerlo en menos uno. Está bien, genial. Ahora, una cosa más que me gustaría explicar se trata de aquí. establece la posición en absoluta y es relativa al cuerpo, lo que significa que se está posicionando hacia la parte superior justo fuera del cuerpo. Muy bien, ahora veamos qué pasa cuando lo cambie. Hace algo más. ¿ Qué? Quiero decir lo mismo es que aquí. Si vengo a la sección de héroes, que es el padre, y si voy adelante y le digo la posición fuera de esto a relativo, se puede ver que esta caja Muy bien, que es este héroe B g es una posición absoluta que es posicionado a la parte superior derecha de la sección de héroes. De acuerdo, ahora, esa es la diferencia entre relativo y absoluto, y tú quieres seguir adelante. Y si cambio esto por arriba a la izquierda, va a ir a la parte superior izquierda de la sección de héroes porque ahora mismo es relativo a la sección de héroes. Entonces si quiero quitar eso y hacerlo por defecto, lo que puedo hacer es volver a la sección de héroes, que es el padre, y en repararlo, voy a establecer ese predeterminado de keeper estático. Entonces ahora sí. Entonces ahora este elemento, que es el héroe de BG BG es relativo al cuerpo y queremos que sea para estar en la parte superior derecha . Entonces voy a decir que la parte superior derecha. Y ahora vamos a seguir adelante y rápidamente darle a esto una publicación y ver cómo se ve eso. Está bien, sigamos adelante y cerremos esto y refresquemos. Está bien. Acabo de recargar. Y así es como se ve. Esto se ve bastante bien. Ahora, también puedes ver aquí que conoces el espacio por aquí. Es bastante grande. Jugar un poco más con estos valores así que aquí dijimos, la altura de 100 v seto o que puedo hacer probablemente se diga esto a 100 10 v h Está bien, tal vez eso se ve bien. Vamos a darle un tiro. Veamos cómo se ve eso. Podemos seleccionar la imagen de fondo que tenemos. Ah, héroe BGE. Y aquí en el Heideman dijo que 110 v enganche y que da un poco más de espacio. Creo que esto se ve bastante bien. Se ve bastante justo. Um, así que echemos un vistazo rápidamente. ¿ Todo bien? Y recarguemos esto. ¿ Todo bien? Y vamos, Sí, se ve mucho mejor. Tenemos este espacio extra en la parte inferior, acuerdo? También puedes ver que este texto de aquí es amable, ya sabes, alejándose hacia el lado derecho. Eso lo que podemos hacer No hay buena manera de arreglar eso es que en realidad podemos sólo, uh, sección 40 y 40. Y lo que podemos hacer es que en realidad podemos romper esto en otra línea. Está bien, Así que ahora si dijo esto hacer en 1920 Muy bien, se puede ver que se rompe en otra línea que podríamos hacer. Aquí también están lo mismo, podría decir, sede en Italia en una línea diferente. Está bien, entonces, ya sabes, se ve mejor. Genial. Ahora, una última cosa que queremos hacer es si ves u oyes el texto que dice basado en Italia es una especie de menor opacidad. Entonces, ¿cómo vamos adelante y hacemos eso ahora? Obviamente, puedes seguir adelante y crear otro elemento de texto en sí y darle una clase diferente y cambiar el color, pero vamos a hacer esto un poco más simple. Entonces lo que hacemos es que voy a volver aquí a 14. 40 y seguiré adelante y seleccionaré toda esta sección que dice con sede en Italia. Y cuando seleccionamos eso, obtenemos estas cinco opciones, que es negrita cursiva, span de enlace y formato claro. Lo que queremos hacer es elegir rápido con span. ¿ De acuerdo? Y una vez que elijas el lapso rápido, veamos cómo se ve en la navegación. Entonces empezamos con el calor. Ah, sección. Y luego tuvimos un rapero héroe. De acuerdo, ¿ cuál era nuestra grilla? Y dentro de eso a la izquierda, teníamos el cuadro de imagen de héroe. Y del lado derecho, tenemos este de block, que se llama bloque de calor o texto. No estoy muy seguro de por qué no está actualizando ese nombre por aquí. Ah, bien. Él dedo del pie bloque de texto. Está bien, de todos modos. Y dentro de ese bloque de texto de héroe, tenemos un encabezado, que es el principal, y luego tenemos un párrafo. Ahora, el encabezado, que es un elemento de texto, tiene otro hijo, que es el lapso de texto de Carla. Está bien, ahora a esto, voy a dar una clase, y como esto en realidad es 50% de capacidad, solo llamaremos a este quinto blanco subrayado 50. ¿ De acuerdo? Y luego voy a ir y radios la fuente fuera de esto a color de fuente de esto a 50% de capacidad, por lo que sólo cambia el color de la fuente. Ahora, todo lo demás sigue igual. Si aumento esto o disminuye a 24 se puede ver que también disminuye a 24. Pero lo único es que debido a que agregamos una clase diferente a esto, todas las propiedades permanecen iguales excepto el color de la fuente. Está bien, así que así es más o menos como lo hacemos. Genial. Entonces en el siguiente video, vamos a seguir adelante y hacer de esto un punto de descanso sensible para móviles. Otros puntos de ruptura, y va a ser bastante divertido. Entonces los veré en el siguiente video. 12. Cómo hacer que la sección del héroe: Muy bien chicos. Por lo que ahora es el momento de hacer que esto represente para los puntos de ruptura. Entonces veamos cómo hacer eso. Si miras el diseño en fig mob, realidad te he hecho saber, el punto de ruptura solo desde Mobile, correcto, correcto, porque prácticamente el paisaje móvil en retrato móvil son similares y el escritorio y la tableta son bastante similar. Entonces por eso decidí hacer sólo dos y no más de dos. Entonces vamos a hacer eso. Entonces, en realidad saltemos al punto de ruptura de la tableta y vemos que tenemos algo que se ve así y si juegas con él, como que se ve así. Y honestamente, creo que esto se ve bien. No se ve tan mal, pero una cosa que podríamos hacer, que yo probablemente ya sabes, tal es hacer es una especie de radios del tamaño del teléfono fuera de esto un poco. Muy bien, entonces lo que podemos hacer es probablemente sólo insertar haciendo el 76. Eso es lo que se reduce a algo así como 56. ¿ Todo bien? Y eso debería, ya sabes, verse mucho mejor. A lo mejor también podríamos ir y radios por el espaciado. Por lo que a partir de 40 pudimos establecer que sean 32 a la izquierda y 32 a la derecha para que pudiéramos hacer lo mismo aquí en la sección aquí también. Frente de radios. Ese 32 tal vez va a marcar la diferencia. A lo mejor no, pero creo que esto se ve bastante bien, Um y quiero decir, se ve mucho mejor, ya sabes, si lo miramos en una pantalla amplia, pero, ya sabes, las cortas también, ya sabes, ven bastante bien, en mi opinión. Está bien, Ahora, vamos al paisaje móvil. ¿ Todo bien? Entonces, paisaje inmóvil, esto es lo que tenemos. Y lo que he hecho aquí es realmente cambiar todo el diseño fuera de esto para lucir diferente, ¿ verdad? Entonces tenemos la imagen y la parte superior, y tenemos algo de información aquí en la parte inferior. Por lo que la fertilidad no cambia el tamaño de fuente de esto a 32 alguien para seleccionar el encabezado . Y voy a poner eso en 32. Está bien. Y eso debería ser bastante bueno incluso en las distancias. 16. Me pregunto, es eso del 32 al 60. Genial. Ahora, lo siguiente que voy a hacer es en realidad voy a seleccionar el fondo BG el elemento héroe BG que tenemos, que esta bien, y lo que voy a hacer es que en realidad voy a esconder esto. ¿ Todo bien? No quiero ver esto en el punto de ruptura del paisaje. Entonces para hacer eso, lo que pueda hacer que pueda dar clic en este ícono el cual está ocultando los elementos que muestran configurados ninguno. Está bien. Y cuando hago eso, eso se ha ido totalmente. Pero cuando vuelvo al punto de ruptura de la tableta, sigue ahí, y llegamos al punto de ruptura del escritorio. Eso sigue ahí, ¿verdad? Para que eso asegúrate de que, ya sabes que las cosas están funcionando Bien. Entonces aquí, lo que voy a hacer es ir y ahora seleccionar al héroe o rapero, y ahora vamos a cambiar la estructura fuera de la grilla. De acuerdo, entonces lo que haremos es que en realidad voy a ir y dar click en editar. ¿ Todo bien? Y ahora entra haciendo estas dos columnas y una gota. Vamos a hacer que sea una columna y kudos, está bien. Y el segundo automáticamente se genera automáticamente, así que eso está bien. Y hacemos click en hecho. También tenemos el espaciado a la izquierda, que realmente no necesitamos. Entonces voy a poner ese dedo del pie en cero, ¿de acuerdo? Y esto se ve más o menos como queremos. ¿ De acuerdo? Y lo siguiente es este elemento. Ahora esto le he dado una altura de 288. Ahora, lo que podemos hacer es que lo podemos dar estoy de altura de 50 picks, 50 Veatch o para TV Hitch. En realidad podemos definir eso. Entonces voy a ir a la imagen del calentador aquí. Habíamos dado 80. Yo probablemente eso ya va a ir. ¿ Eso es como 50? Um, o tal vez hasta 45. No lo sé. Lo que sea que funcione, está bien. ve bien. Lo siguiente que vamos a hacer es por la sección de héroes. Dijimos nueve TV Hitch. En realidad voy a quitar eso y dije eso para auto porque no quiero que tome 90 v seto. Voy a poner ese dedo auto, y eso se ve mucho mejor. De acuerdo, entonces. Lo siguiente aquí es que tenemos un poco de espaciado a la izquierda y a la derecha, ¿ acuerdo? Y el espaciado es de 20 picks es así que voy a ir a seleccionar el bloque de la muerte, que es el bloque de calor o texto. Y aquí habíamos dado un margen de negativo. 64. voy a decir para ser un Zito, ¿de acuerdo? Queríamos ser normales. Y a continuación, le voy a dar un dedo interior acolchado esto de 20 píxeles, así que empuja las cosas, ya sabes, como, así. Está bien, ahí vamos. ¿ Qué sigue? Por lo que tenemos una distancia de 48 píxeles en la parte superior y 48 píxeles en la parte inferior. Entonces lo que voy a hacer es si miras la grilla. Está bien, tenemos este tiro de fondo 16 correcciones. Voy a seguir adelante y poner eso a cero, porque quiero que se estén tocando entre sí. No quiero ningún hueco. Y para dar esa brecha de 48 píxeles, voy a ir a seleccionar. Esto sí bloque, y en la parte superior golpeando, voy a decir 48 el relleno inferior, voy a decir 48 bien? Y lo siguiente es, también tenemos esta imagen de fondo, color de fondo, así que voy a ir a la sección de fondo y solo Adam, ese color que teníamos rituales nivel uno, está bien. Y esto es más o menos como se va a ver, Volvamos a la tableta para ver Todo está bien y se ve perfectamente bien. No hay nada malo con lo mismo aquí, pero para el paisaje, se ve muy diferente, está bien. Y si quiero, puedo seguir adelante y mostrar esto para ver cómo se ve en otros puntos de ruptura, que se ve bien. Está bien. Y ahora vamos al móvil. Y se ve bastante bien en el móvil también. Se adapta perfectamente y se ve fantástico. Por lo que descendimos en una pantalla de resolución de 3 60. Entonces esto es más o menos como se va a ver. Y creo que se ve bastante genial. Muy bien, vamos a comprobar si todo está bien. Hacemos clic en el desplegable, obtenemos este desplegable, sólo la escuela, y, sí, se ven bastante bien. Está bien, así que eso se trata mucho de cómo haces que la sección de héroes sea receptiva. Si ustedes sí se confundieron, recomiendo que vuelvan a ver el video y los veo en el siguiente video 13. Construir la sección de experiencia: Muy bien, chicos. Entonces en este video, vamos a seguir adelante y crear la siguiente sección. Esto debe ser muy sencillo y muy sencillo de hacer. No es nada complicado. Y voy adelante y solo creador, como un marco de alambre para explicar como funciona esto. Por lo que obviamente empezamos con la sección rica, ocupa todo el espacio, y luego tenemos un contenedor dentro que va a seguir las mismas propiedades que este Donde tenemos ya sea 40 o 72 picks es palmaditas a ambos lados y están va a marinar 1920 píxeles, lo mismo que rehizo para el naff pero y la sección de calentador también. Y luego tenemos dos conjuntos de elementos. Una es la sección superior, y luego tenemos una es la sección inferior. Entonces voy a crear un bloque de para la parte superior sobre va a tener que texto elementos. Déjame en realidad solo duplicar esto ahora mismo, así que va a haber nuestro elemento de texto número uno y va a ser nuestro elemento de texto número dos y hace bastante grande. Entonces así se va a ver y luego tenemos uno para el fondo y esto va a ser Esto va a sostener tres que tienen bloque. Por lo que el bloque de una cuadra a la de tres. Entonces esta es básicamente la estructura de cómo va a funcionar esto. Entonces sigamos adelante y hagamos eso. Entonces aquí estamos en Buffalo y Leicester creando una nueva sección. Entonces cada vez que quieras crear una nueva sección, selecciona el elemento cuerpo y luego presiona control e y en una sección Así que ahora que la sección es hijo del cuerpo así que en realidad puedes ver ahora tenemos la nab nuestra tenemos la sección héroe y después tenemos esta sección. Por lo que para esta sección, Ramadán, adelante y llame a este auto sección de trabajo. Digamos que sección conveniente, vale, eso tiene más sentido. Sección expediente uh, llamada de Dios, esta sección en primer lugar, el 14 va a hacer va a sumar en este espaciado a la izquierda y a la derecha, que es alrededor de 72 píxeles a la izquierda y 72 píxeles a la derecha. Voy a ir a la sección y decir, relleno 72 correcciones y relleno 72 fotos. Está bien, ahí vamos. Lo siguiente que voy a hacer es agregar un rapero son en algún lugar en nuevo desarrollo, y llamaremos a este rapero, acuerdo. Y solo para asegurarme de que una configuración de rapero tenemos 100% con y un máximo con off 1920 pixels, voy a seguir adelante y dije esto a 14. 40 ¿Está bien? Y ahora también queremos sumar este margen en la parte superior de la inferior. Entonces 1 20 píxeles en la parte superior y alrededor de 1 20 píxeles en la parte inferior para que pueda ir y seleccionar la sección, acuerdo? Y en la sección, voy a decir, relleno 1 20% en la parte superior e inferior 1 20%. Está bien, así que se ve así, ¿verdad? Esto se ve bien. Y ahora tenemos el interior. Tenemos al rapero. De acuerdo, como puedes ver, esa manzana está sentada en medio, ya sabes, el 20 arriba y el 21 abajo. Está bien. Y vamos a todos creando nuestro primer bloque sordo, verdad, y este de block va a sostener nuestros elementos de texto, así que voy a empezar por crear un punto muerto, ¿ verdad? Y simplemente no lo voy a nombrar por el momento porque quiero empezar a dar un nuevo tipo fuera estructura de nomenclatura. Dos elementos. Entonces miramos cómo hacer eso. El minuto 40 estaba dentro. Este día Bloque. Voy a crear un bloque de texto. Este es un elemento nuevo que estamos agregando. Muy bien, Ahora, Text Block es algo que uso cuando no es un párrafo, pero es sólo una sola línea de texto. Y aquí está la experiencia laboral. Voy a copiar eso. Y voy a venir aquí y basarlo. Ahora, vamos a seguir adelante y darle un cierre a esto. Entonces esto es lo que está sobreponiendo 16 píxeles para que podamos ver las propiedades. 16 imágenes, 1 50% chico. Está bien, así que voy a seguir adelante y llamar a este subrayado overline 16 correcciones. Está bien. Y sigamos adelante en las propiedades por lo que el tamaño va a ser de 16. La altura va a ser del 150%. El tipo de fondos va a ser audaz, y el color está por aquí. ¿ Lo es? El color aquí dice ligero agarre en el verde claro? ¿ Se trata de nuevas canchas de color? Voy a copiar eso. Está bien. Y, um, voy a venir aquí al color, y voy a meter eso. Está bien. Y también podemos agregar esto como una muestra de color. Por lo que tenemos esta luz Genial. Ya sabes, ya sabes, solo tienes que hacer click en crear y ha sido bastante bueno. De acuerdo, así que ahora siento ver u oír que este sobreyacente 16 píxeles es una especie de tomar de todo este gran derecho, Pero eso no es lo que queremos. Lo que podemos hacer es si vamos aquí a las propiedades de visualización, tenemos algo llamado en bloque de línea, y tenemos algo colores en línea. Voy a dar click en línea, bloqueado, y todo lo que va a hacer es que va a especie fuera restringir esto para ser para ocupar sólo el espacio fuera del elemento Ya el espacio, la longitud fuera del texto en este caso. Está bien. Y ahora, introduciendo, Ya sabes, sumar en este siguiente apartado. Ahora bien, esto va a ser un rubro porque esta es la segunda información más importante en términos de jerarquía. Esta fue cada una. Esto también sería hte. Entonces voy a presionar el control, comer y a tomar rumbo, ¿de acuerdo? Y voy a dar clic aquí, lo que va a hacer y seto a. Y esto otra vez, voy a seguir adelante y en una clase y llamar a este rumbo. Um, subrayado. Va a haber 55 picks es Así que vamos a llamar a este rumbo. Subrayar 55 correcciones. De acuerdo, Ahora tenemos este relleno superior e inferior. Yo sólo quiero el relleno inferior, que es de 40. No quiero el relleno superior. De acuerdo, Ahora eso va a significar que esto va a permanecer unido. Entonces más bien, voy a agregar el margen de relleno inferior a esto, que es de ocho píxeles. Entonces venimos aquí y decimos Margin it. De acuerdo, entonces ahora eso da ese espaciado. Y sigamos adelante y copiemos esta información, este texto y base que estamos aquí y sigamos adelante y veamos la configuración. Entonces tenemos 50. Tenemos 55 pixeles y tablero. Eso está muy bien. Entonces vamos a seguir adelante y establecer el tamaño de fuente en 55. La altura va a ser del 100% y podríamos seguir adelante y ajustar el color del dedo extraño hasta que sea blanco. ¿ Verdad? Eso está lleno. Piensa genial. Ahora lo que queremos hacer es que aquí se puede ver que esto es una especie de restringido a cierto límite. Y en realidad voy a seguir adelante y agarrar esta información y hacer una copia. Voy a llamar a esto más apretado con todo bien, y voy a decir que vale la pena ser 60%. De acuerdo, Entonces lo que quiero decir, es que este texto. De acuerdo, entonces ahora voy a seguir adelante y dije esto para estar en bloque de línea, lo que tipo de significa que ocupa todo el espacio y la lectura de fijo. Esto es que vamos a usar flex. Muy bien, Entonces, ¿qué es el flex? Entonces si selecciono el interbloqueo, Muy bien. Y lo que me pregunto va a hacer es que voy a dar clic en esta segunda opción de visualización que dice flex. Y cuando hago clic en eso, algo pasa. Muy bien, tenemos este nuevo conjunto de propiedades y flex te permite organizar elementos de cualquier manera que desees de manera muy flexible. Entonces veamos en realidad 33 inmuebles que tenemos con su dirección. Tenemos alineación y tenemos justificado, o lo voy a hacer es voy a decir que quiero el elemento, Toby uno debajo del otro. Y una cosa que debes notar aquí es que la propiedad fuera. Asignar dos frascos debe ser al elemento padre. Está bien. Y como puedes ver, De Block aquí es el elemento padre, y tenemos que textuizar elementos dentro. Cuando flexiones al padre, puedes entonces reordenar el arreglo fuera de los Niños, acuerdo? Y eso es lo que voy a hacer. Yo quiero que la dirección de la alineación, está bien, sea vertical porque quiero que los elementos sean uno debajo del otro. Entonces voy a asumir vertical, ¿de acuerdo? Y tengo un par de ambientación. Tenemos ah, línea izquierda. Ah, línea central alineada, derecha. Si hago clic en un centro de línea, así es como se va a buscar para click en una línea drive. Así es como se va a ver si elijo el espacio entre esto, cómo se va a ver. De acuerdo, Entonces lo que voy a hacer es ir a la que dice una línea izquierda o derecha, porque como que queremos que los elementos estén alineados a la izquierda. Y también, podemos decir, justificado hasta arriba, como se puede elegir, justificar en el centro, justificar el fondo. En este caso, es realmente no importa porque no hay espacio suficiente para que a más. Entonces sólo lo vamos a dejar para justificar top y escuchar. Lo que voy a hacer es darle este bloque de puerta si una nueva clase y voy a llamar a este flex vertical, acuerdo? Y voy a ver guión bajo izquierda y subrayado Top. Muy bien, Entonces esta es la clase que voy a dar ahora va a pasar. Es cada vez que quiero flexionar elementos de esta manera determinada, solo puedo aplicar esta clase que tenemos y eso hace que sea fácil para la organización. Cuando estás construyendo una página web, en realidad tenemos este valor de fondo fuera 40 que le doy a México para que se quite eso por ahora. Correcto, porque este rubro podría no tener siempre 40 píxeles de espaciado entre otros elementos en los que va a decir ese cero por ahora. Está bien. Y ahora el problema aquí es que se puede ver que aquí el con está en realidad un 60% de descuento en todo el trabajo que tenemos. Entonces lo que hacemos es seleccionar este rubro 55 arreglos y en el trabajo, voy a decir 60%. De acuerdo, así que ahora no va a pasar. Se va a seguir adelante y restringido a 60% de descuento en el puerto Ver con Todo bien, Así que si dije esto a 12 40 va a ser 60% de eso. Y si le dijo esto a un número menor, digamos que 1100 va a ser 60% de eso. Dijeron esto a 1920. Va a ser el 60% de eso ahora. Obviamente, esto sí se ve un poco raro porque en 1920 está ocupando 60% pero no se ve bien . Entonces lo que podemos hacer es, ya sabes, en lugar de tener esto para ser 61 persona, realidad hagamos click en esto y restablezcamos. Lo que podemos hacer es debilitar en realidad. Rompe la línea justo aquí y podemos deshacernos de esto. Entonces sigamos adelante. Y, uh pero digo porque tengo mirada, puedo quitar la línea para y poner en una línea separada. De acuerdo, esto se ve mucho mejor ahora, creo que para el rubro, me gustaría añadir un poco de Heizo Nets 110%. ocasiones la altura de la línea en desarrollo Web funciona en libertad que en la Fig Marceau en la fig. Mi Si se ve bien. Podríamos querer aumentarlo un poco por aquí. Genial. Ahora se puede ver que tenemos un problema ahora en esta sección de experiencias, pesar de que agregamos una despedida superior 1 20 Muy bien, en realidad está empezando desde el final fuera de esta línea, porque por aquí en realidad está empezando. Esta sección empieza desde el final de esto, pero aquí no lo es. Y la razón es porque este cuerpo BG que creamos está en realidad detrás de todo lo demás. No está afectando el espaciado entre la sección expediente sobre el calor. Ah, sección la sección de calentador y las secciones de experiencia están, ya sabes, cerca juntas. Se están tocando entre sí y este fondo corporal que creamos no está teniendo ningún efecto. Entonces la única manera de arreglar eso es que en realidad podemos hacer clic en esto en él y aguantar o para ver la distancia. Y eso es alrededor de 245 picks es porque esta sección es una especie de terminando por aquí. Está bien, así que en realidad podemos seleccionar esto y en lugar de 1 20 tal vez podríamos decir 240. Creo que es probablemente un buen número o 200 quizá no sepamos el tamaño exacto por el hecho de que esta sección se basa en el puerto de vista del 90%, ¿ verdad? Y ya sabes, eso difiere de cada punto de ruptura hacer el diseño porque lo hemos diseñado a los 14. 40. Entonces lo que puedo hacer es que nos guste, la sección de experiencias y darle un número de descuento, Digamos, 265 y creo que eso se ve bastante bien. Entonces volvamos a poner esto de nuevo a 14. 40 y sí, eso se ve bastante bien. Está bien. De acuerdo, Entonces el siguiente paso es seguir adelante y crear Thies segundo bloque de día y dentro de eso vamos a tener tres elementos. Entonces lo que hacemos es que voy a seguir adelante y asegurarme de que hayamos seleccionado al rapero. Voy a presionar comer controlado, y voy a decir la cuadra. Y esta vez en realidad voy a conseguir un elemento de cuadrícula. Entonces voy a conseguir directamente un gran bien y vamos a definir Así que queremos tres columnas y preguntamos. Ah, así que quita andro y deja nuestras tres columnas Tenemos tres columnas. Fantástico. Y también podemos ver que aquí esa semana agregó un clic de búsqueda en cuadrícula en el marco y, ya sabes, toggle look genial en puedes ver que tenemos. Ah, gran espaciado fuera de 24 píxeles. Correcto. Por lo que queremos asegurarnos de que agreguemos eso. Entonces voy a seguir adelante y en la brecha de columna. Voy a decir 24 picks es y eso debería ser bueno. Ahora, este tipo está tocando la sección superior, así que voy a añadir un margen superior de 40. Y aquí en esta gran. Ahora, tal vez no estemos reutilizando los asustados mis tiempos más profundos, así que solo podemos darle una clase, y podemos llamar genial a esta experiencia. Está bien. Y bueno. Entonces ahora todo lo que tenemos que hacer es que Adán lo desarrolló para cada caja y luego empezar a sumar los elementos dentro. Entonces voy a crear un bloque, Ok. Y aquí dentro de esta cuadra, voy a llamar a esto. Podemos simplemente darle un nombre diferente más adelante. ¿ Todo bien? Voy a empezar agregando éste. Ahora, esto de nuevo no es importante para la jerarquía, pero esto es solo etiqueta tristemente, así que voy a agregar en un bloque de texto, acuerdo? Y voy a llamar bien a este número. Y veamos las propiedades. Su altura de línea 117 y 1 20%. Entonces solo voy a hacer doble clic en esto. Cambia este 201 Muy bien. Y aquí en las propiedades, el tamaño va a ser 117 La altura de la línea va a ser del 1 20%. Está bien, ya sabes, sólo podríamos decir esto al 100%. En este caso, debería estar bien. Y probablemente podríamos decir esto demasiado audaz. Está bien, que creo que es regular. Entonces, apegémonos a lo regular. Entonces voy a seguir adelante y hacer de esto un regular, y el color va a ser nuestro grado de luz. ¿ Verdad? Genial. El siguiente es, que tenemos esto. Ahora, este va a ser nuestro h tres, ¿verdad? Porque tenemos cada uno h dos y va a ser en la calle Octava. Está bien, así que voy a añadir un nuevo elemento de encabezamiento, ¿de acuerdo? Y aquí en el elemento de encabezamiento, voy a decir que en realidad voy a seguir adelante y copiar esto. ¿ Todo bien? Y pegar. Y asegurémonos de que esto sea un cada tres, ¿de acuerdo? Y voy a ver encabezamiento subrayado Y esto son 24 picks de derechos o 24 audaces. De acuerdo, entonces esto va a ser rubro subrayado 24 correcciones, y eso debería ser bueno. Entonces sigamos adelante y cambiemos el tamaño a 24 que ya es line hide. Debilen dijo que sí. A lo mejor 1 20% realmente no debería importar, porque es solo una línea y el color va a ser blanco. Y sin embargo eso se ve bastante bien. Ahora, si sigue adelante y selecciona el número y las radios que para estar en bloque de línea, se ve bien. Muy bien, ¿estamos podríamos dejarlo para bloquear en este caso. De verdad no importa. Está bien. Y ahora para que esto bloquee, sigamos adelante y le demos una clase, y podemos llamar a este bloque de experiencia, ¿de acuerdo? Y ahora vamos a seguir adelante, y tenemos mucho espacio aquí arriba en la parte inferior. Entonces esto es Primero que nada, no tenemos espaciado. Y en la parte inferior, tenemos, como, 16 píxeles. Entonces por aquí, lo que voy a hacer es que voy a radios esto desde 22 b cero. ¿ Todo bien? Y tal vez podríamos ponernos un poco, pesar de que se vea un poco diferente. Y el diseño que probablemente podríamos agregar en ocho píxeles en la parte superior. En la parte inferior, se pueden ver 16 fotos. De acuerdo, creo que voy a hacer es voy a quitar este margen en la parte superior Century Dijo eso Y por el número, voy a darle un margen inferior de él. Creo que eso debería reservar. Y para esto va a devolver esto a CEO. Está bien, esto se ve mucho mejor. Y ahora vamos a sumar en un párrafo y este es 16. Corregía algunos ardientes en nuevo párrafo. ¿ De acuerdo? Y copia esto y pega. Ahora bien, ¿ya tenemos un párrafo 16? ¿ Correcciones? No, no tenemos. Tenemos un párrafo de 18 píxeles. Entonces lo que hacemos es asegurar tu nuevo truco. De hecho voy a aplicar este párrafo de 18 píxeles, ¿de acuerdo? Y entonces en realidad voy a venir aquí en este desplegable. Voy a elegir clase duplicada. Entonces ahora hace una copia de esa clase, y tiene exactamente las mismas propiedades, pero un nombre diferente, está bien. Y entonces en realidad voy a seguir adelante y renombrar esto a 16 picks es y todas las propiedades ya están ahí. Por lo que sólo me ahorra un par de clics, y puedo ir y establecer el margen de fondo a cero. Y además, puedo cambiar el tamaño de fuente a 18 a 16. Está bien, eso se ve bastante bien. Ahora, también tenemos la palabra Google, que está en verde. Entonces, ¿cómo hacemos eso? Al igual que mencioné que cambiamos el color por aquí usando un lapso de rap. Podemos hacer lo mismo aquí, alguien o doble clic en Google. Seleccione ese cambio a span. Y podemos seleccionar esto. Aplicar una clase fusionar verde, y podemos aplicar un color verde simple que tenemos. Entonces voy a copiar este cordón de color, está bien. Y voy a venir aquí y simplemente cambiar el color de esto para que sea verde. Y, ya sabes, podemos agregar eso como una muestra si no lo estuviéramos. Y se ve bastante bien. Genial. Ahora lo que podemos hacer es seleccionar este bloque de experiencia y presionaré control C control V y controlaremos para pegarlo dos veces. Y eso es lo que vamos a tener. Y lo que iba a seleccionar esto y le dije esto a y seleccionar esto y cambiar esto a tres. Y podemos ir y rápido. Adelante. Copiar estos elementos. Muy bien, bestia y ah, Copiar Bestia y copiar Bestia y copiar y desmontar. Espere. Pero el problema aquí es que ya sabes, hemos aplicado unos boletos de clase diferentes. Entonces si miras la navegación, como que vemos que las cosas están un poco mal. Entonces lo que voy a hacer es que en realidad voy a seguir adelante y eliminar esto y eliminar esto. Y podemos seleccionar este rubro 24 que creamos y despertamos ritmo que por aquí. Entonces no tenemos ninguna confusión, y entonces solo podemos seguir adelante y cambiar esto para prod duct designer. Y ahora aquí podemos llamar aquí y podemos decir diseñador gráfico, vale. Y esto podemos cambiar nuestro a regate. Y aquí podemos cambiar esto a B. Facebook. De acuerdo, Ahora, el próximo año o dos ya está aquí. Dijimos verde, ¿verdad? Entonces en lugar de ver verde, podemos aplicar esta nueva cancha de color. Entonces voy a copiar este cordón de color. ¿ Todo bien? Y voy a quitar esta etiqueta verde. Voy a llamar azul a esto, y voy a venir aquí al color. Y en ese cuello azul los animales hacen lo mismo aquí por regate. Voy a borrar esa clase, y quiero decir que pienso, vale, vale, Y una copia este núcleo de color rosa que tenemos. Y voy a venir aquí al color y cambiar ese rosa y también tal vez en una muestra. Pero no creo que estemos usando estos colores en contra para que podamos dejarlo tal como está. Entonces ahora así es más o menos como se ve. De acuerdo, Lo siguiente que quiero hacer es si ves u oyes, pesar de que las distancias 24 he añadido un poco fuera de espaciado por aquí, que está apagado 48 correcciones, acuerdo? Y eso es algo que hice intencionalmente. Porque si lo empujo hacia la derecha, ya sabes, se ve un poco raro porque hay muy menos distancia. Por lo que intencionalmente agregué eso 48 pixeles. Entonces voy a seleccionar esta experiencia, bloquear que creamos, y voy a ir adelante a la mordida y dije que casi 40 la. Entonces, ¿qué? Eso va a perder eso va a seguir adelante y nuestro ese 48 pixel golpeando. Y eso se va a aplicar a todos los demás t como otros dos también porque tienen la misma clase que dice Experience Block. Entonces 48 0 aquí también Y esto se ve bastante bien. Esto es exactamente una especie de lo que teníamos en mente. Ah, debilita, quiero pensar podemos ir a 1920 píxeles y ver cómo se ve eso y esto se ve bastante bien. Ahora en el siguiente video, vamos a seguir adelante y hacer que este sensible, así que los veré chicos en el siguiente video. 14. Cómo hacer que la sección de experiencia sea: todo bien. Por lo que debería haber un video bastante sencillo y una vía de radio muy rápida. Simplemente vamos a hacer que esto sea sensible, Así que vamos a ver cómo hacer eso. Vamos a ir al punto de ruptura de la tableta y ver qué está pasando? Mini tablet, Brick Boynes. Las cosas se ven bien. Parecen bien. Pero el problema es que podemos ver eso. Ya sabes, el espaciado es a menudo se veía. No se ve perfecto. Entonces arreglamos esto ahora. Lo que hicimos aquí fue romper esta línea por aquí, ¿ verdad? Por lo que movimos la palabra muy lejos en el pasado en una segunda línea. Y esa es la razón es que cuando esto se está reduciendo, sabes, ya que en el pasado ya está en una segunda línea, tenemos este espacio innecesario. Entonces, ¿cómo vamos a arreglar esto para que se vea bien? Ahora, lo primero que intentaste fue agregar realmente un valor fijo fuera de 60 v escotilla o algo más preferiría lo que podemos hacer es realmente seguir adelante y, ya sabes, asegurarnos de que esto es en una línea, y para hacer esto un poco mejor, en realidad podemos ir. Y en el archivo de higment. En realidad se puede definir un cierto valor. Por lo que he definido valor fuera de 778 correcciones. Puedo redondear eso 7 80 ¿Está bien? Y en realidad podemos definir un valor apagado 7 80 píxeles como un máximo vale off. 7 80 picks es Así que ahora lo que va a pasar es que si voy tablet break point, va a ser 7 80 picks es El problema es que puedes ver que soy capaz de tipo de desplazamiento a la izquierda porque fuera de esto así lo que podríamos lo que deberíamos hacer es no ponerlo en 70 correcciones . Vamos a establecer un valor al 100% y un máximo de descuento. 7 80 picks está bien. Entonces ahora el máximo va a ser de 7 80 píxeles, bien, pero se va a restringir al 100% del espacio. Y por aquí, se puede ver que, ya sabes, el espacio es un poco demasiado. Entonces de 70 a México, bajar eso a algo así como 40 a la izquierda y 40 a la derecha. Y además, el espacio en la parte superior también es bastante demasiado en alguna parte. Radios que bajan a un poco más pequeños. Di algo así como 150. Eso se ve bastante bien. Y lo siguiente aquí es que agregamos este relleno interior apagado 40 It, yo diría Solo hazlo cero, porque debería estar bien. Y eso también se ve bastante bien. No se ve realmente tan mal. Y ahora este es el más pequeño coincide con la escala de la misma, te ves aún mejor. Entonces sí, creo que lo que podemos hacer es en cambio apagado irradiado por completo. A lo mejor podríamos darle un pequeño valor de 16 picks está en DA. Sí, creo que eso debería ser realmente bueno, ¿verdad? Se ve bastante bien. Ahora vamos al paisaje móvil en el paisaje móvil. Voy a ir por un enfoque completamente diferente. En primer lugar, este espaciado que tenemos en la parte superior en la parte inferior va a ser diferente, y eso en realidad son 64 píxeles. Entonces ese es el margen o partida que vamos a estar utilizando todo a través de uno dijo la parte superior a 64 la inferior también a 64. Y como se puede ver por los lados, lo hemos fijado en 20. Entonces voy a poner esto para ser 20 y el viento. Y lo siguiente aquí es que este tamaño extraño también se va a reducir a 32 píxeles. Entonces voy a seleccionar esto. Esto se va a convertir a partir de 55 radios. Esto a 32 picks está bien. Eso se ve bastante bien. Y ahora por esta grilla, no quiero que ésta sea una al lado de la otra. Yo quiero que sean uno debajo del otro, así que en realidad voy a ir a quitar las columnas, acuerdo? Y eso crea automáticamente rejillas automáticas para nosotros. Está bien, así que se ve así, y luego lo vamos a hacer es que vamos a venir aquí y este espaciado, vamos a aumentar eso a 40. Podemos ver que el espaciado o escuchar este 40. Por lo que la Gap Ro Ro va a ser de 40 píxeles, y esto se ve mucho mejor. Vamos a la vista de retrato móvil, y pongamos esto en 3 60 ¿Está bien? Y creo que esto se ve bastante bien. Algo que le gusta. Sí, es interesante. Vamos a comprobarlo. Y sin embargo, esto luce Esto se ve bastante bien. Y creo que otra cosa que podemos hacer es que agregamos este tipo de relleno a la izquierda 16 mezclas. Yo como que ya es ese 20 porque quería apoderarme de todo el espacio. Está bien, así que creo que esto se ve bastante bien, y estamos aquí también. Lo que podemos hacer es, um sí, podríamos para que cero se lleve foto aquí, y creo que esto se ve realmente bien. Está bien. Um, sí, creo que esto se ve realmente interesante. Entonces eso es más o menos para este video basado. Y los veré en el próximo. 15. Construir la sección media: justo en este video. Vamos a seguir adelante y crear esta sección, y eso va a ser muy sencillo y directo y ah, un par de off escupió omitido que han definido. Y estos son decisión diseñada que he tomado. Pero estoy diciendo que quiero que la altura fuera de esto sea de 600 píxeles encendidos. Yo quiero que el con off cada elemento tome hasta el 50% ya sabes, muy sencillo. Entonces vamos a leer, fluir y hacer esto. Va a empezar haciendo clic en el cuerpo y crear una nueva sección y llamar a esta sección y tenemos una sección por aquí, y lo que hacemos va a llamar a esta media sección. Y como mencioné, quiero que la altura de esto sea de 600 píxeles, así que voy a darle una altura de 600 correcciones. Está bien, así que tenemos una gran altura. Siguiente cosa, solo quiero despejar a los raperos en una prensa controlada comer y agregar un aro y obviamente el siguiente episodio en un rápido alguien presiona control e y 1/2 bloque y agregó, La clase rapero que hemos creado, por lo que máxima de 1920 altura es del 100% Y con esas 100 personas. Fantástico. Está bien. Ahora, también queremos sumar un genial por aquí. ¿ De acuerdo? Ahora, la cosa es que si te vas ahora, si te acuerdas, agregamos una llamada de clase de coma es genial. Y lo que podemos hacer es aplicar el mismo, bien. E incluso el número de columnas y las reglas y todo lo que queremos es más o menos lo mismo . Entonces esto es perfecto, ¿verdad? Entonces lo vamos a hacer ahora es que voy a sumar en un callejón sin salida. ¿ Todo bien? Uno para éste. Y el otro va a ser para éste, que va a estar ahí para las imágenes. Entonces para el 1er 1 el primero de bloque, le voy a dar una clase un poco más tarde porque quiero toe aplicar una propiedad flex a esto. Pero primero lo vamos a hacer es que voy a agregar en un color de fondo. Entonces voy a seguir adelante y añadir un color, que es este color que tenemos el color del discurso con una copia. Eso está bien, en mi cara eso sobre ti? Fantástico. A continuación, vamos a sumar tres elementos. 12 y tres el 1er 1 va a ser nuestro H dos, que es lo mismo en términos de jerarquía. Tiene esto durante una prensa controlada comer, vamos a sumar en rumbo. Vamos a cambiar esto a los dos años, acuerdo? Y luego vamos a añadir en el encabezamiento que clasificamos a cada creador, que está encabezando 55 fotos. Está bien, Ahora, el problema es que porque esto se usó por aquí, quiero decir, por aquí, donde estaba sobre un fondo negro y las texturas correctas, esa misma cosa está pasando sobre aquí porque tienen la misma clase. Entonces lo que podemos hacer es agregar una clase combo, y podemos simplemente llamar a esto negro, acuerdo? Y sólo lo único que podemos hacer es cambiar el color de esto, y vamos a elegir el color nivel uno que creamos. Y ahora ambos tienen las mismas propiedades. Pero esto tiene una clase extra de coma de negro, razón por la cual es en negro. Entonces, sólo tienes que seguir adelante y copiar esta filosofía y valores Adelante y basar eso. Está bien. El siguiente es, que tenemos este texto, este párrafo, así que voy a seguir adelante y en realidad copiar el mismo porque es más o menos lo mismo . Se copiará eso. Y pegar por aquí con un problema aquí es que este es un color diferente. Es de color gris oscuro. Y de nuevo, lo que quisiéramos hacer es venderlo esto y añadir una nueva clase de combate. Llámalo oscuro, genial, o bien y copiaremos el esqueleto que tenemos. Copia. Y vamos a bajar aquí al color y a una pasta. Está bien, así que ahora también podemos añadir este reloj. Creo que ya lo he agregado, por lo que podemos agregar eso. Entonces tenemos esto por aquí, y esto sigue siendo blanco. Fantástico. Um, voy a copiar este texto en base. Esa perspicacia. Ahora, la cosa es, que tenemos este espaciado, que está apagado 24 picos es ahora. O podemos agregar un margen inferior a esto, o podemos agregar un relleno superior o un margen superior a esto. Lo que quiero hacer es añadirlo al propio rubro. Entonces voy a ir a sumar en nueva clase de combate. Podemos agregar 1/3 clase coma y podemos llamar a este volcado 24 Fixer. Está bien, lo siento. Borde de 24 píxeles. Y en el fondo, voy a sumar nuevo valor fuera de 24. Por lo que ahora este recién de 24 aplica a sólo 24 píxeles de fondo. Dicle un negro es sólo para esta remontada. Además y todo lo demás es a encabezar 55 correcciones, ¿verdad? Genial. Ahora voy a seguir adelante y seleccioné esto y luego vamos a sumar en un discurso. Vamos a añadir algunas manchas en el interior porque, como pueden ver, son 1 20 píxeles de arriba y 72 fotos de izquierda y derecha, Así que sigamos adelante y hagamos eso. Voy a seguir adelante y en el margen en el relleno para esto hizo bloque. Voy a seguir adelante y decir 1 20 arriba, 1 20 abajo, 72 píxeles a la izquierda, y así son píxeles a la derecha. ¿ Verdad? Yo estaba en bastante bien. Ahora tenemos este elemento, ¿no? Y esto va a ser un elemento muy cool porque vamos a Esto va a ser un elemento animador muy bonito y hermoso. Entonces lo que vamos a hacer es seguir adelante y crear un enlace de texto, acuerdo? Entonces estamos presionando control y creamos un texto para enlazar porque queremos que esto sea animador en esto Y porque queremos que este sea un enlace en el que se pueda, que se puede hacer clic así básicamente no se puede entrar. Y eso va a agregar este pequeño enlace de texto, OK, y voy a llamar a este enlace animado fondo. De acuerdo, Ahora sigamos adelante y agreguemos los ajustes. Tenemos 16 picks es, um ya sabes, y el color negro y ya sabes, la estética regular. Entonces voy a ir a seleccionar este enlace de texto. Quiero establecer el tamaño de fuente en 60. Uh, voy a poner la altura a algo interesante, pero déjame explicarle qué voy a hacer con ella. Queremos que el color sea este nivel uno color negro, que es algo así como un adecuado Y ya que es un enlace donde para automático agrega este subrayado. Pero podemos quitar eso viniendo aquí en la configuración de decoración on. Podemos poner eso a ninguno. Está bien. Se ve bastante bien. Bien. Y lo siguiente es que queremos agregar este tipo de calco. Entonces lo que voy a hacer es que quieran fijar la altura a un gran número. Está bien, así que digamos algo así como, ya sabes, 40 ¿verdad? Y además, voy a venir aquí o aquí a la parte superior y en las opciones de visualización. Voy a elegir este que dice en bloque de línea, derecha, derecha, valor de bloque. Y tal vez podría seguir adelante y decir esto hasta algo así como 50. Está bien. Y luego puedo ir a la sección de bardos y asegurarme de que primero revises la frontera inferior. ¿ De acuerdo? Y luego agregas un valor de color fuera del que queremos. Está bien. Y orden son automáticamente conjuntos de la misma a uno. Entonces esto es más o menos lo que tenemos ahora, tal vez 50 es demasiado, así que probablemente pueda reducir eso a 40. Creo que el 40 es un número bastante decente, bien. Y podemos seguir adelante y llamar a esto. ¿ Qué quieres? Podemos llamar a esto ah, más sobre ti. Y la mejor parte es que la línea cambia de acuerdo a la altura fuera del según el con fuera del texto. Ahora, lo siguiente es que esto en realidad no es negro. Es un gris oscuro. Por lo que quiero cambiar rápidamente el color fuera que para nivelar uno a atracar, uva. Está bien, eso es fantástico. Ahora este botón está en realidad hacia abajo. momento, la forma ideal es seleccionar realmente este elemento y, ya sabes, moverlo. 133 píxeles abajo en la parte inferior. Margen sobre eso entra aquí. Pero tú quieres hacer algo diferente, ¿de acuerdo? Ahora, la razón es, porque si sigo adelante y cambio esto a probablemente dos líneas, todavía quiero que esto esté abajo por aquí. ¿ Todo bien? Yo quiero que esto esté tocando el borde inferior. Ahora, cuando digo de imagen, digo, después de que agregamos este margen de 1 20 píxeles. Como puedes ver, hemos añadido 1 margen de 20 píxeles en la parte inferior. Yo quería pegarme a ese fondo. Muy bien, Entonces, ¿cómo hacemos eso? Bastante sencillo. Lo que vamos a hacer va a seguir adelante y crear selecto este punto muerto, y quiero agregar una propiedad flex. Está bien. Ahora, obviamente, no queremos que las cosas sean horizontales. Queremos que sean verticales. Alguien elige la dirección para ser vertical. El día de hoy lo siguiente es que queremos que todo esté alineado a la izquierda. Similares. Elige una línea a la izquierda. El siguiente es que quiero elegir esta bobina como espacio entre. Vale, Ahora, lo que va a pasar es que eso va al espacio, estos tres elementos por igual. Pero eso no es lo que quiero. Yo quiero que estos dos estén juntos, y yo quería que esto fuera una manera. Entonces lo que vamos a hacer es seleccionar este bloque de día, y primero darle una clase y podemos llamar a este bloque medio izquierdo. Está bien. Y adentro, el alguien está en el bloque New Dev, ¿verdad? Y este punto muerto va a contener este rubro y este subtítulo. Está bien, realidad arreglemos en el navegador, ¿de acuerdo? Y queremos que la parte superior del bloque esté arriba y ésta esté en la parte inferior. Entonces ahora si ves lo que está pasando es este bloque medio, que es el padre es espaciado. El primero se desarrolló hasta la parte superior del contenedor en el animado hasta el fondo del contenedor. En realidad ponemos estos dos. Ponemos estos dos elementos en un desarrollado porque queremos que esto haga efecto estos dos ítems como un separado estos dos elementos porque queremos que estos dos elementos se realicen como, ah, un solo bloque. Y queremos que esto sea como un bloque separado. Está bien, así es como lo hicimos. Y para esto la cuadra. Simplemente puedo llamar a este rapero normal porque solo está agregando como contenedor o un trampero normal . Y no estamos definiendo ningún valor a esto, ¿verdad? Simplemente va a ser así. Y así es más o menos como haces esto. Ahora, el siguiente es éste donde vamos a añadir a la imagen algún anuncio en bloque D, acuerdo? Y que la cuadra se va a sentar aquí y voy a llamar a esta media imagen, ¿de acuerdo? Y vamos a hacer va a seguir adelante y seleccionar una imagen de fondo. De acuerdo, entonces vamos a cubrir y luego elegimos imagen y vamos a hacer es vamos a sumar en la imagen, cuál está bien? Y bien dijo la posición a centrar y eso se ve bastante bien. Genial. Entonces ahora ¿cómo se ve esto cuando vamos a 1920 arreglos? Está bien. Esto me vería bastante bien. Veamos cómo se ve cuando se va a 38. 40. Está bien, esto también se ve muy bien. Al igual que, este es el tipo de look que vamos a buscar, ¿ verdad? Y eso se ve bastante bien, en mi opinión. Genial. Entonces ahora esto se hace. Vamos a seguir adelante y animar este fondo para que se vea súper impresionante. Entonces los veré en el siguiente video. 16. Crear un enlace animado: Muy bien, chicos. Entonces en esto, yo o lo que vamos a hacer está pasando, mate este botón para que sea súper divertido e interesante. Entonces veamos cómo hacer eso. Ahora, esto va a ser una simple interacción otra vez. Entonces vamos a estar pegando todo. Nos vamos a pegar el dedo del pie en esta sección, y aún no vamos a ir a la pestaña del pie. Entonces lo que voy a hacer es obviamente que queremos que esto se active, y me cierro sobre ello, ¿verdad? Entonces me voy a ir, y en el desplegable, voy a elegir hover. Y ahora estamos en el estado “hover”. Por lo que cualquier cambio que hagamos afecta sólo al estado hueco. De acuerdo, entonces a qué queremos hacer su primer paso comenzó agregando un color de fondo y el uno elegir ¿Es este tipo de alerta pública que tenemos? De acuerdo, ahora, podrías elegir esto a cualquier color que quieras, pero voy a poner esto en morado por ahora, porque estar usando porque estamos usando morado para todos nuestros otros botones. Y ese es nuestro color primario. Y lo siguiente que hay que hacer es cambiar el color del texto para que sea blanco Vale, ahora se ve bastante apagado, ¿ verdad? Y ah, querer hacer es darle un poco de espaciado a la izquierda o a la derecha. Voy a venir aquí al bateo, y voy a decir una partida de 24 píxeles a la izquierda y 24 píxeles a la derecha. Muy bien, Y entonces en realidad podemos volver a nuestro estado ninguno. ¿ Verdad? Asegúrate de volver en lo no estatal y veamos cómo se ve esto. Está bien, para que se vea bien, pero realmente no se ve bien. Es decir, la interacción funciona, pero como que no se ve bien. Entonces, ¿cómo lo hacemos? Eso que vamos a hacer es obviamente vamos a bajar aquí a la sección de transición, y agregamos tres propiedades. Uno era el color del texto. Uno era el color de fondo, y otro era el relleno a ambos lados. Entonces vamos a aplicar propiedades a cada uno para empezar de nuevo las transiciones, y el 1er 1 va a ser el color de fondo. Y voy a poner esto hacer 3 15 milisegundos, y que vamos a elegir es nuestra cancha. Está bien. Y vamos a seleccionar otro. Vámonos. Y elige el color de la fuente esta vez 3 50 milisegundos y la flexibilización va a ser fácil fuera cancha. Vamos otra palabra. Y esta vez va a ser el bateo goto relleno, y vamos a elegir de nuevo 3 50 milisegundos. Y la flexibilización va a ser más fácil cancha. ¿ Verdad? Por lo que ahora hemos tomado las tres propiedades y también hemos añadido las mismas animaciones de flexibilización, por lo que debería quedar bastante bien. Está bien, Ahí tienes. Está bien. Y eso se ve super lindo. Ahora, creo que el relleno podría ser demasiado. Entonces, ¿qué puedo hacer? Uh, demasiado como si yo pudiera hacer eso. Volvamos al estado hover y tal vez lo reduzcamos de 24 a 16 y ya sabes 16 para que se vea bien. Y ahora, sigamos adelante. Vuelve al estado monja. Está bien, vamos a revisar aquí a la derecha, eso es que se ve bastante bien. Está bien, así que eso es más o menos sobre cómo despejaste este hermoso botón. Es muy divertido e interactivo para jugar. Entonces en la próxima semana, vamos a seguir adelante y hacer de esto una respuesta. Entonces los veré chicos en el próximo video 17. Cómo hacer que la sección media: Está bien, entonces en este video, vamos a seguir adelante y hacer que esto responda. Entonces si pudieras mirar el diseño para el punto de ruptura móvil, cómo se ve es más o menos sencillo así, Y él hubiera definido es que yo he definido, Ah, altura fuera 450 picks es así que esa es la altura que vamos para. Y queremos que todo esto sea para fotos bonitas, y queremos que esto también sea de 4 50 píxeles. Muy bien, así que ese es el valor que estamos diseñando y en realidad podemos seguir adelante y conseguir esto rápidamente. Y, ya sabes, pon eso aquí también para que tengamos contexto, está bien. Y voy a decir que la altura es para 50 Xers cada uno. Muy bien, adelante y que podamos gobernar este apartado. Entonces vamos a saltar a un arma y vamos al punto de ruptura de la tableta. Ahora, el punto de ruptura talibán es que está bien, yo diría, Um, no mucho de un tema por aquí se ve. Está bien. Está bien. Ahora sí tenemos un problema donde, sabes, porque a pesar de que dijimos 50% tenemos demasiado espaciado a la izquierda y a la derecha, y esa es la razón por la que esto se está reduciendo. Entonces lo que podemos hacer es por estos, el bloque izquierdo son inter de tener un relleno apagado 70. Probablemente podamos reducir eso a 40 a la izquierda y un divertido a la derecha. Y ahora eso debería hacerlo. Deberías darnos mucho más espacio para respirar, y deberías hacer que se vea mucho mejor. Y tal vez incluso en el golpeteo sobre el tema de probablemente es que hasta, como, 80 y uh, 80. Creo que ese es un número que funciona bonito, pero vamos a ir por el paisaje. Entonces en el paisaje del momento, como que queremos cambiarlo. Y ya ha cambiado, bien. Es tan raro que ya haya cambiado por el hecho de que habíamos usado ese mismo gran elemento, cierto, cierto, porque si miras por aquí, sabes, hemos agregado al rapero y él agregó la grilla y que esa Grid Ordenada está en este formato , y ya se ve bastante genial. Ahora obviamente queremos establecer la altura de estos dos por 50 píxeles. Entonces dije los dos altos por 50 fotos y eso se ve bastante bien. ¿ Todo bien? Como si si vamos a ir al paisaje móvil una urgencia, como que se ve bien. Pero aquí, no lo sabremos. Agradable. Asegúrate de que esto también sea por 50. Pero antes de que hagamos eso, voy a seguir adelante y asegurarme de que salir por izquierda y derecha sea 20. Está bien. Y en la parte superior está, um, es alrededor de 64. Está en 46 picks. Es yo creo que eso tiene que ser 48 de todos modos. Entonces cuando pongo el relleno superior a 48 el relleno inferior a 48 todo bien. Y tú en la altura para ser 450 pixeles eran la altura y dijo que hacer 450 picks es y que se ve bastante bien para 50. Sí, eso se ve bien. Y vamos al retrato móvil. Y eso también se ve fantástico. Se ve genial. Entonces si vas adelante y dices esto hacer 3 60 Um, bien, así es como se va a ver. Y creo que se ve bastante genial, ¿verdad? Y ya sabes, las mismas interacciones funcionan aquí también. Entonces nada de qué preocuparse Así que en la próxima semana, vamos a ir a la siguiente sección de la página web y vamos a aprender algo nuevo. Entonces como ustedes chicos en el siguiente video, 18. Construir la sección de habilidades: Muy bien, chicos. Entonces en este video, vamos a seguir adelante y crear esta sección. Vamos a aprender un nuevo concepto con respecto a la grilla. Se va bastante simple. Ahora bien, ¿cómo construimos esto? Muy sencillo. Empezamos con una sección como de costumbre y luego empezamos con un rapero e insider arriba. Pero tenemos una cuadrícula y vamos a tener de una a tres columnas y vamos a tener do hace una y dos, cierto, Si lo miras que esta sección, que es la camiseta de la escuela, el conjunto de habilidades y el descripción es una especie de retomar toda esta columna. Pero estos dos están retomando, ya sabes, son cuatro por cuatro columnas. Entonces, ¿cómo organizamos realmente esto en Buffalo? Se va bastante interesante. Saltemos a la web despacio. Entonces voy a empezar por establecer esto en 14 40 píxeles. Por lo que queremos empezar con eso. Vamos a crear seleccionar el cuerpo y esa es una nueva sección. Entonces vamos a seleccionar en tu sección y aquí vamos a seguir adelante y vamos a llamar a esta sección de habilidades, y vamos a seguir adelante y añadir algo de relleno en la parte superior e inferior. Entonces en la parte superior. Tenemos, como, como, 1 20 píxeles. Lo mismo aquí en la parte inferior 1 20 fotos y 72 a izquierda y derecha. Entonces con el Senado con el selector de sección, voy a seguir adelante y decir, bateando 1 20 píxeles de la parte superior en 20 píxeles en la parte inferior y 70 píxeles de puerta a la izquierda y 72 píxeles a la derecha. Está bien. Parezco hacer una prensa controlada Ito. Agrega un bloque diff. Y aquí es donde vamos a añadir un rapero. Entonces solo voy a seguir adelante y elegir a Rapper. De acuerdo, entonces nuestra configuración predeterminada de rapero son su 100% con 1920 píxeles, max con y una altura fuera 100%. Cosas bastante simples. Muy bien, Siguiente que vamos a hacer es crear una gran Ahora ya tenemos una clase de comas llamada Grid. Ahora, eso está bien, pero el problema es, esta genial son sólo dos columnas, pero queremos una cuadrícula de tres columnas, así que voy a crear una nueva clase y llamar a esta cuadrícula tres columnas. Está bien. Yo sólo voy a decir bien. Tres C o l suave. Ya sabes, tres columna, yo diría que tal vez subrayado. Haz que se vea mejor. De acuerdo, entonces esta es mi nueva clase. Y ahora voy a convertir este envoltorio en una cuadrícula haciendo clic en este botón. ¿ Todo bien? Y ahora vamos a tener tres columnas y voy a tener que subir, que es lo que tenemos. Muy bien, genial. Entonces ahora prácticamente no podemos ver nada porque no hay contenido, pero vamos a empezar a agregar contenido uno por uno. Ahora, lo otro que quiero hacer es asegurarme de que el margen sea de 24 píxeles porque es una especie de alineación. Hacer los 24 picos de margen que tenemos en nuestro gran Alguien dijo esto a 24 podemos establecer la parte inferior también a la parte inferior es en realidad así que la brecha de fila es en realidad 40 it. Entonces podemos establecer el hueco de fila inferior en 48 píxeles, y eso debería ser bastante bueno desde el inicio de la misma, un sordo normal, algún control de prensa e y creó el bloque, y eso va a retomar, tú saber, la primera sección. Y podríamos simplemente llamar a este rapero normal nominativo, diría yo, porque no tiene propiedades asignadas. Lo que vamos a hacer es seguir adelante y presionar el control, Comer y agregar se dirigen bien. Y va a ser el mismo rumbo que este conjunto de habilidades. Entonces voy a seleccionar esto. Ella era esto para ser una historia, y vamos a decir Lo siento, cada uno no cada tres. Y voy a decir que el rumbo 55 picos está bien, y vamos a seguir adelante y llamar a esta secta de habilidad. A continuación vamos a añadir este párrafo, que es 18 picks es alguien seleccionar al rapero normal porque queremos que los insights de texto sobre un control de prensa coman, y vamos a elegir una fotografía, ¿de acuerdo? Y vamos a seguir adelante y elegir el párrafo 18 picks es el que tenemos, Creador. Está bien, se ve bien. Entonces voy a copiar esto y voy a vender así y bestia. Ahora, el color de esto es diferente. En realidad es una luz de acuerdo. Entonces voy a ir a añadir una clase de coma gris claro. Tenemos doctorado, coma cerca. No tenemos un complejo gris claro. Alguien cree una nueva coma plus y llame a esta luz. Genial. Por lo que podemos agregar sólo ese color gris claro. Entonces voy a seguir adelante, copiar el valor y venir aquí y vamos a seguir adelante y cambiarnos. Ah, ¿ en serio? Ten el gris claro. Entonces yo lo soy. Simplemente reemplace eso. Ahora tenemos algún margen de la parte inferior, que es 24 cuadro. Entonces lo que puedo hacer es por el rubro. Puedo añadir una nueva clase de combate son para el párrafo. Puedo añadir un recién llegado Cerrar. Entonces creo que voy a ir con el rumbo. ¿ Todo bien? Y voy a decir 24 pixel. Um, margen inferior. ¿ Te vas a quedar? 24 picos de frontera. Está bien. Y todo lo que tienes que hacer es agregar este 24 pixel al fondo. Por lo que afecta sólo a este elemento en particular. Porque este es el único elemento que tiene esta clase cambia rápidamente para ser X genial luciendo bien, ¿ podría? Lo siguiente va a crear este bloque, así que impresionar al control, Comer. Vamos a añadir un bloque, y volveremos a llamar a esto rapero normal. Está bien. Y aquí vamos a añadir en icono, vas a añadir un subtexto. Cualquiera en un párrafo, correcto. Entonces vamos a ir al panel de activos, y tenemos nuestros iconos, así que voy a empezar con los primeros 100 días. El ícono del diseño del producto Voy a rastrear eso y dejarlo caer eso dentro. ¿ De acuerdo? Ahora bien, si miras el ancho y la altura, son más o menos lo mismo. Eso es 70 hacer píxeles por 72. Y los he exportado como un SPG en este formato mismo, por lo que debería estar totalmente bien. Ah, lo siguiente es, vamos a llamar a esto, um, icono de habilidad, icono de habilidad acuerdo? Y vamos a añadir un margen inferior de 24 píxeles, así que es como el ícono y va a decir 24 píxeles. Está bien. Y ahora vamos a sumar en nuestro elemento, que es el cada tres pequeño control de prensa E. Y en un encabezamiento, va a B e r h tres. Está bien. Y esto va a ser lo que tenemos es de 24 picks es creo que esta es una nueva. Entonces vamos a elegir h tres y diremos rumbo o solo tenemos ah, encabezando 24 píxeles. Entonces eso es bueno. Está bien. Y vamos a seguir adelante y copiar esto y debilitar a Feaster y ah, aquí, las distancias. 12. Pero aquí ya tenemos el margen inferior de 16 y creo que está bien. No tenemos que cambiarlo a 12 puedes mantenerlo como está. Entonces voy a copiar esto, y vamos a crear un nuevo párrafo 16. ¿ Verdad? Por lo tanto, crea un nuevo texto. Oh, podemos llamar a un párrafo en sí, Ok. Y voy a acelerar esa información, y esto va a ser correcciones del párrafo 16, y va a haber luz de acuerdo. Entonces voy a añadir una nueva clase de combate, y voy a llamar a esto luz. Genial. Sólo por el color. Yo quiero cambiar el color de esto para ser a la ligera. Está bien, vamos. Eso se ve bastante bien. momento, también tenemos este margen interno fuera de 48 píxeles. Eso también lo podemos hacer ahora. Pero el problema es si le hago eso al rapero normal, se lo va a sumar por todas partes. Entonces lo que voy a hacer es que en realidad voy a seguir adelante y quitar esta clase, y voy a crear una nueva clase, y sólo voy a llamar a esto habilidades. Ah, caja. Está bien. Y hacer esto. Voy a añadir un interior golpeando 40 it Genial. Ahora lo que estoy haciendo, voy a copiar esto y pegarlo y podemos seguir adelante y cambiar la información. Diseño visual de diseño, y puedes copiar toda esta información y casos por aquí y también vas a cambiar el icono para que realmente puedas hacer clic en el icono en sí y hacer clic en el icono de engranaje y elegir reemplazar imagen. Y puedes hacer click en esto para reemplazar la imagen, está bien. Y genial. Entonces ahora lo que podemos hacer es que si duplica el segundo, eso va a ir a esta caja, acuerdo? Y no podemos amortizar esto lejos a una caja diferente, ¿ verdad? Y eso es porque se puede ver aquí que la posición es una especie de conjunto, dedo del pie o dedo del pie, y podemos configurar el manual. Pero lo que vamos a hacer va a borrar esto. Lo que hacemos es seleccionar a este rapero normal que tenemos, ¿de acuerdo? Y en realidad voy a escalar esto para que recoja dos cajas. De acuerdo, así que ahora si realmente miras algunos valores por aquí, el lapso de columna es uno, lo que significa que abarca una columna, pero está ocupando dos de la rosa. Está bien, así que si hago clic en este ícono, en realidad lo puedes ver ahora. Todavía no lo puedes ver. Tipo de ver Lo que vamos a hacer es ir a seleccionar esto, a copiarlo y pegarlo. Muy bien, Así que ahora esto se sienta en la tercera caja. Pero por aquí, se puede ver que este rapero normal en realidad está retomando todo este bloque. Por lo que esta es una flexibilidad muy cool que el flujo de trabajo te da. Está bien. Voy a copiar esto y basarlo de nuevo Por aquí. Y todo lo que tenemos que hacer es simplemente seguir adelante y cambiar el texto aquí. Muy bien, copia eso. Y pega y copia que Pieced. Copiar eso y basado. ¿ Verdad? Entonces Y también, obviamente, queremos seguir adelante y cambiar el icono. Entonces vamos a seguir adelante y cambiar esto para que sea diseño de movimiento. Vamos a cambiar este para que sea fotografía, y está bien, éste no se cambió. Por alguna razón, alguien copiará eso, bestia Copiar y basado. Y esto vamos a seguir adelante y cambiar esto para que sea éste. ¿ Verdad? Entonces ahora así es como se ve, y se ve bastante bien. Ahora, también tenemos un interior a de despedida 48 pixeles. Entonces lo que quiero hacer es ahora este es el evaporado normal. Entonces lo que realmente podemos hacer ahora, ya que vamos a estar usando esto varias veces, voy a añadir una clase combo de 48 píxeles. De acuerdo, um, fiesta, arregla, ¿verdad? Y luego vamos a añadir un, ya sabes, relleno normal de 48 píxeles para que podamos hacer lo mismo aquí. Entonces en lugar de usar la clase de caja de habilidades, en realidad podemos agregar la misma que es nuestro rapero normal y también en la clase Kama fuera 48 pixel. Correcto. Y podríamos hacer lo mismo. Estamos aquí para que podamos llamar a este rapero normal y 48 pixeles clase combo para mover eso a la derecha llaman a este rapero normal y 48 pixel clase común a la derecha. Lo mismo. Por aquí llamamos a este rapero normal y a una despedida de 48 píxeles para dirigir. Está bien, así que esto se ve bastante bien. Um, sí, eso es más o menos. En el siguiente video, vamos a seguir adelante y hacer de esto una respuesta para otros puntos de descanso. Entonces los veré chicos en el próximo video 19. Cómo hacer que la sección de habilidades sea sensible: Muy bien, chicos. Entonces en este video, vamos a seguir adelante y hacer esta parte fuera del lado web, la sección responsiva. Entonces, empecemos. Tan seguramente súper simple. Eso está fuera de la vista de la tableta. Y en la tableta, todo se ve bien. Y solo queremos asegurarnos de que usamos la misma configuración. Por lo que tenemos 80 píxeles en la parte superior. Um, y ah, está bien, así que tenemos 1 51 20 creo que voy a seguir adelante y bajar esto a 80 también, sólo para asegurarme de que todo sea consistente y que hacer lo mismo estamos aquí. Vamos a hacer este 80 y 80 en la parte inferior y a la izquierda vamos a poner esto en 40 y en el lado derecho, también en 40. Está bien, esto se ve bastante bien. Ahora, una cosa que podemos hacer es que podemos jugar un poco con el layout. Y lo que realmente quiero hacer es cambiar esto bastante. Lo que quiero es que la sección superior retome. Ya sabes, toda esta sección para el conjunto de habilidades y este párrafo y luego queremos uno también, y queremos. Entonces básicamente estoy tratando de decir es que si voy a esto, voy a tener sólo dos columnas, acuerdo? Y tendremos tres filas, ¿verdad? Entonces 12 y tres y quiero hacer es que quiero seleccionar este rapero normal, que ahora abarca dos filas. Yo quería gastar dos columnas, pero abarcan un dro. Está bien, entonces, cuchillo, míralo. Como que tenemos esto desprendió un bonito diseño y la brecha de rollo es de 48 píxeles, lo cual está totalmente bien y tiene tipo fuera del estilo que vamos por. Y creo que esto se ve bastante bien a continuación. Subamos al paisaje y las cosas aquí. Mira un poco raro, pero vamos a tratar de arreglarlo. El primero que va a hacer es que quiero hacer todo en una fila. No quiero columnas, así que voy a empezar reduciendo el relleno superior e inferior a 40 por ser 64 porque ese es el número que estamos usando. Entonces 64 en la parte superior y ciudad desde abajo y 20 a la izquierda y 20 a la derecha, Derecha en ir a seleccionar al rapero normal y aquí vamos a hacer va a poner esto para que sea una columna cada uno, acuerdo. Y queremos ir a la parrilla y queremos asegurarnos de que solo tengamos una sola columna. Entonces ahora todo tipo de se ve así ahora mismo, los problemas. Podemos ver que algo anda mal. Vemos que algo se está superponiendo. Entonces si quieres revisar, ¿cuál es el problema? Lo que podemos hacer es empezar realmente ocultando estas secciones. Entonces si selecciono la sección media y tipo de ocultarla por ahora, en realidad podemos ver que todo está funcionando bastante bien. Todo se ve genial. Um, pero todo se ve genial. Entonces algo anda mal con la sección media. Y si en realidad empieza por mirar estas partes una a una, podemos ver que la sección media realmente tiene una altura de 600 píxeles. Pero ese no es el caso Por aquí. Was de 600 píxeles para el punto de ruptura de la tableta. Entonces estamos aquí para la sección vamos a quitar esta altura ajustándola a auto. Está bien. Y cuando hacemos eso ahora se arregla, ¿verdad? Porque estábamos definiendo 600 picos está fuera de la sección, Toby eso. Pero este contenido fue en realidad más de 600 píxeles. Entonces ese es un pequeño cambio que teníamos que hacer. Está bien. Y eso está luciendo un inicio bastante bueno que le guste. Podemos ir al, uh, punto de ruptura lejos el móvil en lo único que quiero hacer es que quiero cambiar. Um, ya sabes, esta sección de aquí, que es este extra, ya sabes, en ese fuerte 48 semanas de lucha que no puedo querer lista. ¿ Eso es a cero? Está bien. Y ahora todo se ve bastante bien. Volvamos aquí y comprobemos. Y ah, esto se ve Esto se ve bien. Está bien, así que eso es más o menos para este video. Y en el siguiente video, vamos a seguir adelante y diseñar este gato esta er arriba esta barra horizontal off logos, y también vamos a añadir una interacción y animación supercool a esto. Entonces los veré chicos en el próximo video 20. Construir la cartera de un logotipo: nuestros chicos. Entonces en este video, vamos a seguir adelante y crear esta sección fuera de la página web, que es esta barra de logotipos y fuera para encontrar un par de valores por aquí. Entonces he definido que la altura fuera esto va a ser de 140 píxeles, y el ingenio en realidad va a ser de 24 VW. Ahora. Podría haber usado, ya sabes, el con y dicho que Toby 3 40 Pero la razón por la que empecé toe 24 VW, ya sabes, que depende del trabajo de puerto de vista es porque la interacción que vamos a crear sí no funcionan realmente. Bueno, si agregamos valores de píxel, está bien. Y no se puede explicar por qué cuando voy adelante y en la interacción. Pero por ahora, en este video, solo sigamos adelante y nos construimos en flujo web. Entonces aquí estoy en Ruffalo, y voy a empezar creando unas nuevas secciones sobre Seleccionar el cuerpo e impresionar Control Comer y voy a añadir una sección. Está bien. Y ahora que tenemos una sección, voy a llamar a esta sección la sección barra de logotipos. Está bien. Ahora, en este caso, no voy a estar usando un rapero porque lo hay. No queremos que nada se limite al peso fuera del puerto de vista. Lo que como que queremos hacer es simplemente asegurarnos de que toque ya sea fuera de los bordes. Entonces solo voy a seguir adelante y empezar por crear un elemento de cuadrícula porque queremos que todos estos estén en una gran y voy a tener seis columnas. Entonces porque tenemos seis locales, Así que cuando haga clic en esto y voy a elegir seis, um, um, seis columnas y me pregunto. Muy bien, aquí vamos. Y voy a llamar a esto leer uno sueños. Bien. Voy a llamar a este logo. Genial. Está bien. Y vamos a empezar. Otra cosa que quiero hacer es que quiero reducir la columna. Gap dijo eso a cero porque queremos que se estén tocando entre sí. Voy a empezar creando mi primer grado. Está bien, voy a añadir un bloque A d, y, y, uh, dentro de esto, voy a llamar a esta caja local. ¿ Todo bien? Puedes llamarlo como quieras y solo comenzó dándole una altura de 140 píxeles. Ese es el valor que podemos haber definido. Y el con va a ser de 24 v W, que es de 24 vista Port Worth. Está bien, señor, dijo 24 b W. Que es vista aburrida con ello. Está bien, eso se ve bastante bien. Ahora, voy a agarrar el logotipo de nuestro panel de activos. A alguien le agarraron el primer bajo. Voy a poner eso dentro del bloque de logotipos, ¿de acuerdo? Y nosotros solo Podríamos simplemente llamar a este logotipo de cliente. ¿ De acuerdo? Ahora, para hacer esto en el centro, podemos seleccionar el elemento padre, que es la caja local, y ah, ahí. Vamos a seguir adelante y elegir display para ser flex, y luego voy a decir un centro de línea y justificar medio, que ese logo entre en el centro exacto. Ahora, lo que voy a hacer es que no soy copia esto y está todo bien, Y podemos seguir adelante y seleccionar el logotipo del cliente. O una cosa que queríamos hacer fue que voy a seleccionar la casilla local y se podía ver que tenemos este tipo fuera de frontera, ¿ verdad? Alguien va a bajar y aquí en la sección fronteriza, solo voy a cambiar el color de éste para que sea el que queremos, que es el nivel uno que es el color y el doctor. América. Nos aseguramos de que el ancho sea uno en el estilo es, ya sabes, con la línea sólida. Está bien. Una copia nominal esta y base y uno Seleccione el logotipo. Y aquí puedo hacer clic en este icono de engranaje donde puedo seguir adelante y reemplazar una imagen, y voy a elegir el 2do 1 Copiar esto de nuevo. Muy bien, selecciona el logotipo y cámbialo por éste. Copiar pegar. Seleccione este. Cambia el logotipo por otro, y luego copia basado. Está bien. Y ahora puedes ver que somos amables capaces de alejarnos y,ya sabes, ya sabes, fuera de la zona real fuera de nuestra de uber. Y esa es una mala experiencia. Pero vamos a arreglar eso. Voy a seleccionar este elegir reemplazar imagen, y vamos a elegir este y otro último logotipo. Copiar pegar. Debe seleccionar esta la imagen de lugar en ésta. De acuerdo, entonces si no puedes echar un vistazo que nuestra tos de sitio web se desplaza horizontalmente, lo cual nunca es una buena experiencia, nunca deberías estar haciendo esto Así que lo que vamos a hacer es cuando agreguemos una nueva propiedad, verdad, Entonces lo vamos a hacer es que voy a seleccionar la sección de bares local, ¿ verdad? El tramo inferior de la barra ocupa toda la húmeda fuera del puerto de vista. Está bien, así que está retomando. Si dijo esto a 14 40 en realidad está retomando. 14. 40 picks es ahora mismo. Hay un desbordamiento de colores de propiedad, y en este momento el desbordamiento se establece en visible, lo que significa visible muestra el contenido que desborda su contenedor. De acuerdo, así que ahora el elemento niño, que es este logotipo genial, se especie desbordando la sección de barras local porque ellos el sector de desbordamiento visible. Pero si vas adelante y pones a este bateador de dos, lo que significa oculto esconde contenido desbordante sin agregar una barra de desplazamiento, va a hacer clic en eso. Y ahora, si intentas desplazarte horizontalmente, no puedes hacerlo porque lo que sea que se esté desbordando, su tipo de oculto y está siendo obligada y cortada directamente al veterinario de la pantalla. Entonces si sigo adelante y dije esto a 1920 se puede ver que se está cortando, y el está tomando el tamaño fuera, y cada elemento está tomando el tamaño fuera del puerto de vista. Es calcular el trabajo en función del tamaño del puerto de vista. Entonces dijimos 24 VW. Entonces esto es básicamente 1920 en 24%. Está bien, crédito para persona de la vista puerto con todo bien. Y sin embargo así que más o menos de cómo construyes esto en referencia y en el siguiente video, vamos a seguir adelante y en la interacción para que sea muy divertido y entretenido. Entonces los veo en el siguiente video. 21. Animar la cartera de un logotipo: Muy bien, chicos. Entonces en este video, vamos a seguir adelante y animar este hermoso bar de aspecto y va a ser súper divertido. Y se siente muy bien cuando interactúas con él. Por lo que están súper emocionados. Entonces, empecemos ahora. El asunto a notar que es esto es una interacción compleja que necesita. No es tan sencillo como sabes, ir por aquí y hacer cualquiera de estos porque estos realmente no ayudan. Tenemos que usar la pestaña de interacciones. De acuerdo, Ahora que quieres hacer es cuando estás empezando, tienes que identificar con qué gatillo quieres tener la animación. Cuando digo trigger, quiero decir, ¿qué tipo de acción va a iniciar o comenzar la animación? Y si ven aquí, tenemos dos tipos. Tenemos elemento gatillo. Y en esta página, gatillo ahora en el disparador de elementos, tenemos un par de opciones como la mayoría stop, casi click, La mayoría se desplaza. La mayoría se mueve sobre elemento Moskal entrevista mientras se desplaza a la vista, ya sabes, así sucesivamente y así sucesivamente. Y también tenemos cosas como disparadores de página y página Lord page moviendo Vieux Port pagó scroll y páginas salvajes desplazándose ahora dependiendo de qué tipo de animación o interacción se quiera crear . Tienes que elegir el gatillo apropiado. En nuestro caso, vamos a elegir este que dice, mayoría se mueven en vista puerto. Si miras la información que sabes que dice animar mientras el ratón se mueve sobre el puerto de vista a lo largo del acceso X y blanco, así va a suceder es comienza. Haga clic en eso y vamos a empezar por crear una nueva animación. De acuerdo, así que voy a dar clic en iniciar Una nueva animación elegirá reproducir animación de ratón. Está bien. Y ahora, ya había creado una vez voy a creer eso. Entonces vamos a crear uno desde cero, ¿de acuerdo? Y vamos a empezar por crear el plástico haciendo clic en el segundo más, y voy a decir animación de barra de logotipo. De acuerdo, entonces ahora básicamente, tenemos cuatro propiedades que podemos definir. El eje X tiene dos propiedades. Ese hacia la izquierda y quiere está a la derecha y por qué el acceso es uno en la parte superior y otro en la inferior. En nuestro caso, solo queremos hacer que la animación se mueva a lo largo del eje X. Realmente no nos importa el eje Y en esta animación en particular. Entonces lo que soy lo que voy a hacer es dar click en plus derecho, y voy a elegir qué propiedad quiero? Dos enemigos sí quiero animar el movimiento, la escala, la rotación, la capacidad, el filtro. ¿ Qué es lo que quiero, Animal? En este caso, quiero animar la propiedad de mudanza. Así que haga click en movimiento. Está bien. Y ahora vemos que hemos buscado estos dos marcos clave. La otra cosa nota es que tenemos este signo de exclamación en este momento Eso no está recibiendo el exclamación es porque aún no hemos definido ningún valor a esto. ¿ Cuánto debe moverse? Correcto. Eso es lo que queremos. Pero antes de que hagamos eso, lo primero que quieres hacer es asegurarte de que estás moviendo el elemento correcto . En este caso, no queremos mover la caja de elementos. Queremos mover esta cuadrícula de logotipo a la derecha. Toda esta cuadrícula, queremos que nos movamos, ya sabes, desde fuera y dentro de la pantalla. Entonces lo que voy a hacer es ya que en este caso, hemos elegido caja local. Eso en realidad está mal. Entonces lo que podemos hacer es hacer click derecho, y podemos decir cambiar objetivo y ya voy. Voy a acercarme al navegante y voy a elegir la rejilla del logotipo. De acuerdo, entonces ahora se puede ver que el grande local ahora es el elemento que se va a mover cuando agrego algunos valores harán lo mismo aquí, verdad? Haga clic en cambiar, tigre y cuadrícula de logotipo. Entonces, a veces, si no funciona, lo que podemos hacer es realmente podemos cerrar esto, y podemos seleccionarlo por aquí, alguien haga clic en esto, y entonces eso se va a aplicar a esto, ¿verdad? Por lo que hay dos formas de hacerlo. Y aquí, empecemos a definir los valores Ahora, en un punto cero cuando ellos cuando el ratón está sobre la izquierda de la pantalla, podríamos haber querido lucir exactamente de la manera que sí sabe. Entonces voy a ir a establecer un valor de la X para que sea cero. ¿ Todo bien? Porque queríamos ser lo que sea que no queremos ningún movimiento. ¿ A dónde te mudaste? Cuando movemos el 100 cuando vengas por el lado, queríamos cambiar, así que no sé si voy a seguir adelante y ponerme. Mueve este deslizador. Está bien, Así que ahora se puede ver que todo el logo genial se está moviendo. Pero, ¿cuánto lo movemos? ¿ Verdad? Porque si pongo un valor de píxel, ¿qué va a pasar? ¿ Vale ese inspector fuera de la pantalla? Se va a mover sólo 500 píxeles, y eso podría no estar bien. Está bien, déjame darle un ejemplo. Entonces sigamos adelante y mantengamos el aumento. Entonces digamos esto a menos 800. De acuerdo, entonces ahora está en el borde adecuado fuera de la pantalla, ¿ verdad? Entonces si en realidad va a 14 40 picks está bien y lo miras, bien, y vamos a jugar a este fuera. Lo consideras a la izquierda. Se ve bien, pero bajo escribirlo bastante no, sabes, porque tenemos este espacio extra porque todo se está moviendo 500 pick 800 pixels, independientemente de la pantalla mojada. Entonces, ¿cómo nos aseguramos de que se alinea adecuadamente, ya sabes, hacia el oeste fuera de la pantalla. Entonces aquí hay un truco genial. Lo que quiero hacer es, en lugar de ver 800 fotos. Voy a definir un porcentaje. Alice, voy a decir, vamos a un menos 30%. De acuerdo, Es elección se desplazó hacia fuera. Voy a aumentar un poco hasta que el hielo hasta que se alinea perfectamente. Y creo que al 44% se ve bastante bien. De acuerdo, Ahora, lo otro que tenemos que hacer es que se puede ver que el signo de exclamación sigue ahí, pesar de que definamos valores. Y la razón de tocar es porque uno es en términos de porcentaje sobre el otro es en términos de píxeles. Entonces este, voy a ponerlo en porcentaje. Está bien, genial. Entonces ahora echemos un vistazo. Está bien, así que vamos a una especie de retiro 40. El tamaño de pantalla más pequeño y todo bien. Se ve bastante bien, ¿verdad? Se ve genial. Eso se puede ver. Es respetando los valores porcentuales. Muy bien, pasemos esto al 14. 40. ¿ Todo bien? Sí. Se ve igual. Se ve que se ve. Se ve muy bien. Probémoslo en 1920. Está bien. Y sin embargo esto también se ve bastante bien, y funciona muy bien. Impresionante. Entonces eso es más o menos. Ahora, si quieres, puedes seguir adelante y cambiar esto a 38 44 2 semilla Ana, Enfoque. Resolución sobre DA. Sí, se va a quedar bastante bien. Tan correcto. Um, sí, eso se ve genial. Impresionante. Correcto. Entonces volvamos a 1914 40 like so Eso es mucho en cómo vas adelante y creas esta hermosa interacción para este bar local Y para este local, pero y es súper simple. Si no lo conseguiste, te sugiero que vuelvas a ver el video lentamente, uno por uno. Y ah, va a funcionar para ustedes chicos. Entonces eso es más o menos para este video, y los veré en el siguiente video. 22. Cómo hacer el logotipo de la cartera: Muy bien, chicos. Por lo que en este video, vamos a seguir adelante y hacer que esta sección de barra de logotipo represente riesgos para otros puntos de ruptura . Ahora que lo pensaremos es que si realmente lo miras, la interacción que creamos en el video anterior estaba ocurriendo realmente, sabes, porque estábamos usando un ratón y un cursor, ¿ verdad? Y por eso estaba trabajando. Pero en una tableta y en un paisaje y un retrato móvil retrato, punto de ruptura, este tipo de interacción no sería posible. Por lo que lamentablemente tendríamos que quitar esta interacción para los otros puntos de ruptura. Pero aún puedes tenerlo en el escritorio porque es súper divertido tenerlo, ¿ verdad? Entonces sigamos adelante y hagamos eso. Lo que voy a hacer es aquí en la configuración de animación. ¿ Desencadena opciones ahí mismo? Yo puedo elegir. Hacer decidir gatillo en la parada de arriba de la tableta para el paisaje Importante. Voy a desmarcar para los otros tres porque quería sólo para el escritorio y arriba, ¿no? Eso es lo que queremos. Ahora si voy a la parte de ruptura de tabletas, lo que vamos a hacer va a seguir adelante y cambiar esto y lo haremos similar a lo que tenemos aquí. Está bien, así que vamos a eso. Entonces vamos a tomar el logo. Genial. Y aquí en el inferior, básicamente. Pero queremos es a columnas. Está bien, voy a quitar todas las columnas extra, así que asegúrate de que sólo tenemos a columnas, está bien. Y, um, ya sabes, podemos simplemente seguir adelante y también podemos agregar Ah, así que la brecha puede ser cero incluso en la rosa. Podemos decir eso a cero y conducta. Ahora, la razón es no tomar todo el espacio es por el hecho de que habíamos establecido un, um si fuera fuera 24 w Lo que voy a hacer es que voy a seguir adelante y sólo dije eso a o hacer bien, Así que eso retoma el entero con eso se da. Entonces esto es más o menos como se va a ver, y este es más o menos el estilo que vamos por ahora. Si nos fijamos en el punto de ruptura del paisaje, debería parecer prácticamente igual. Y creo que esto se ve chica bonita y para el descanso de la tableta y para el punto de descanso móvil, va a verse algo así. Y creo que esto también se ve bastante bien, ¿verdad? Se van, así que eso es más o menos. Pero si vuelves a nuestras muertes Tropic Point, aún podemos tener el efecto de animación que está sucediendo en. Se ve fantástico. Entonces eso es más o menos para este video. Y en el siguiente video, vamos a seguir adelante y crear la siguiente sección off están molestos, así que los veremos chicos en el siguiente video. 23. Construir la sección de proyectos: Muy bien, chicos. Por lo que en esta videoguerra, Granado va a crear esta sección. Ahora bien, esto parece un poco complicado de construir, y se puede ver que ese oficial guarda algún tipo de cable desde aquí para explicar cómo es. Pero es bastante simple, para ser honesto. Entonces vamos a entender como funciona esto. El primero es, que quieres arrancar obviamente, creando una sección que es nuestro paso habitual. Empezamos con una sección, y dentro de esa sección, voy a crear un rapero, acuerdo? Y esta vuelta va a ser mi grilla, bien, porque voy a tener que agarrar columna. Y como pueden ver, he creado un bloque Did, que es de este color amarillo que el bloque para la izquierda interna quiere, y va a ser para el interno derecho. Entonces tenemos dos columnas ahora en la primera columna, voy a añadir Wonder Block para este texto, ¿ verdad? Y para esta imagen y el subtexto, voy a crear otro desarrollo y poner la imagen por aquí y los elementos de texto. O aquí. Correcto. Entonces, básicamente, tenemos 1232 cuadras en la izquierda, y tenemos 123 en el lado derecho, y éste va a ser para nuestro botón. Y esto va a ser para nuestro texto, y tienes un texto de imagen, imagen, texto, imagen, texto e imagen y texto. Creo que tal vez sería mucho más fácil si voy adelante y cambio el color de este a otro color ahí. Ve. Creo que esto mucho tiene mucho más sentido. Entonces así es como vamos a seguir adelante y estructurar. Entonces, empecemos. Entonces aquí estoy en Buffalo. Voy a seguir adelante y cerrar esto, y vamos a seleccionar el cuerpo y vamos a empezar creando un nuevo control de prensa de sección y tipo en sección. Y va a haber una nueva sección donde lo vamos a llamar nuestra sección de proyectos. Está bien, ahora aquí van a empezar, obviamente, obviamente, creando un amontonamiento a la izquierda y a la derecha 72 fotos y 72 correcciones, acuerdo? Y su nuclear un bloque div, que va a ser nuestro rapero, va a crear un punto muerto, y vamos a llamar a este rapero derecho ladrón tiene las mismas propiedades que de costumbre con el con off 100 altura off 100 Maxwell off 1926 es ahora mismo. Queremos crear una cuadrícula. Queremos convertir este rápido integra y tipear. Genial. Ahora ya tenemos dos tipos de grandes este uno grado. Está bien, es un pan de dos columnas, pero creo que esto podría ser diferente cuando lo hagamos sensible. Entonces preferentemente lo que voy a hacer es que voy a quitar esto genial, y voy a decir proyectos. Genial. Voy a crear una clase completamente nueva, y sólo voy a convertirla en un artículo de cuadrícula totalmente nuevo para que no cometamos ningún error. Y voy a seguir adelante y dar clic en genial, y vamos a seguir adelante y vamos a tener sólo dos columnas y maravillarnos. Está bien, no me meto ahora. Todavía no podemos ver nada porque definimos valores y a todo, su tipo fuera, ya sabes, colapsan juntos. Pero eso está bien. Vamos a empezar creando nuestro primer elemento de texto, que es este desarrollado. Entonces voy a crear un desarrollado primero, y podríamos simplemente llamar a este bloque normal. Está bien, porque no tenemos propiedades asignando a esto. Es solo para actuar como contenedor para todos los demás artículos que tenemos aquí dentro, ¿no? Tan normal rapero. De acuerdo, ahora, dentro de esto, voy a crear un nuevo bloque de, ¿de acuerdo? Y esto también va a ser normal, trampero. ¿ De acuerdo? Y va a haber para la parada próxima zona dinero y vamos a hacer es vamos a seguir adelante y ah, buscar esta sección que creamos, ¿ verdad? Entonces vamos a copiar este texto overlying. Copiar eso y basarnos por aquí, y vamos a copiar esto y basar esto por aquí. Está bien, así que ahora va a quedar así, y todo lo que voy a hacer es seguir adelante y hacer doble clic y copiar esto y pegar. Está bien. Bastante bien. Ahora, con respecto a lo grande, lo otro que queremos hacer es decir la brecha de columna a 24. Perdón. No a 40 24 perro africano. Déjalo como esto. Ahora vamos a seguir adelante y dijimos esto a 14. 40 pixeles. Eso ahora que en realidad podemos ver cómo se ve en el diseño, y se parece más o menos a esto. He ido adelante y dado cierta distancia en 48 píxeles de la izquierda. Ahora aquí es un 72. Pero este 72 es después de considerar los 24 píxeles golpeando por aquí. Por lo que 70 a 70 a menos. El aprendiz cuatro es 48. Entonces voy a añadir No, ya tenemos esta clase más tranquila, pero tenemos 48 pixeles a la derecha. Voy a aplicar eso. Entonces ahora se ve perfecto. Y además, se puede ver que, ya sabes, tenemos algo de distancia en la parte superior, que es alrededor de 1 20 picks es y aquí no tenemos ninguna distancia. Entonces voy a seleccionar la sección proyectos, Ya sabes, el paciente más elemento. Y para la sección voy a decir bajo cualquier arreglo en la parte superior y 1 20 píxeles en la parte inferior. Entonces damos esto, obtenemos este bonito espaciado. Perfecto. Ahora, para el rapero normal acaba de encontrar. ¿ Y vamos a tener un relleno inferior de 80 píxeles? Acerca del margen de descuento 80 picks es así que vamos a hacer es voy a crear una nueva calma a través, bien, Porque no lo hacemos, porque estamos agregando múltiples propiedades nuevas que la misma clase existente, Así que creamos una nueva uno. Call s 80 recoge un fondo y voy a decir subrayado M para márgenes. Y vendré aquí y voy a poner esto a un fondo, ¿de acuerdo? Y en realidad puedes cambiar el nombre de esto desde 48 píxeles, derecho a 48 Picks es el ritmo correcto para palmaditas. Está bien, entonces es mucho más comprensible. Muy bien, y genial. Entonces ahora lo que podemos hacer es crear otro bloque de, que va a ser nuestro trabajo. Bloquear algún control reprimido. Come agregando un bloque. Está bien. Y sólo para asegurarse de que este es el bloque es el niño fuera de este rapero normal Así que éste es para todo el bloque izquierdo. Esto es por el texto, y esto es por, ya sabes, el área de trabajo. ¿ Verdad? Genial. Entonces lo que hacemos es que voy a seguir adelante y otra vez llamarnos en normal, rapero. ¿ Todo bien? Porque no tenemos ninguna propiedad que nos vamos a ir de pie asignado a esto. De acuerdo, Ahora voy a traer la imagen algunos adelante y empezar por meternos en nuestro elemento de imagen , Así que voy a seguir adelante y agarrar una imagen. Ahora, hasta ahora qué? Vimos que usamos una imagen de fondo para crear un bloque Duke, y agregamos una imagen. Haz eso. Ahora, definitivamente esa es una forma de hacerlo. Pero hay múltiples formas de hacerlo. Esto siempre va a usar un elemento de imagen. Por lo que una prensa controlaba E y buscaba imagen. Se puede ver que la imagen es un elemento real. Entonces eso es lo que voy a hacer es ir adelante y agregar en la imagen así que se va a llamar como Project One arrastrará eso y soltar esa perspicacia. Muy bien, bastante bien. Ahora voy a darle la vuelta a esta opción A dice h I D p I. Y lo que esto va a hacer es que esto va a evitar picos. Elación sobre una escritura se desplazan. Entonces si tienes un archivo de higment, lo que hemos definido aquí es que nos hemos ido pero auto, una cierta altura fuera del 626 está bien, voy a seguir adelante y asegurarme de que eso lo hable perfectamente. Pero más tarde, Pero ahora la altura está establecida en 620 píxeles. Entonces, ¿qué? Iba a vender esta imagen, y voy a llamar a este Proyecto una imagen de proyecto, y voy a ir a la altura. 610 arreglas 620. De acuerdo, Si ves, escuchamos el problema es que está tipo pixelado, ¿ verdad? Es Es una especie de estiramiento, y se ve raro. Entonces el verdadero arreglo que es tenemos una opción de aquí. Llámanos fit. Ahora mismo. Esto es súper útil. Lo que podemos hacer es correcto. Haga clic en él. Tengo cinco opciones que tengo, Phil, tengo contención. Tengo tapadera en la que me he hecho. Se le bajó la escala. Voy a seguir adelante y elegir la tapadera. Lo que la tapa va a hacer es ir de pie. Adelante y cubra todo el espacio fuera del contenedor en anarquista. Es la altura de 6 20 fotos, está bien. Y el trabajo que se define en base a nuestro envoltorio. Entonces, sea cual sea el espacio que tenga va a seguir adelante y cubrirlo. Entonces va a escalar un poco, pero va a hacer que se vea hermosa. ¿ Todo bien? Lo va a recortar, asegurándose de que las proporciones sean las mismas. Pero así va a funcionar. Genial. Ahora esto se hace. Entonces lo siguiente que haces es que quieres crear otro de bloque para este Vale, así que sigamos adelante y creemos un nuevo bloque. Por lo que presionaré country e digan que tienen bloqueo. ¿ Todo bien? Ahora por esto, no voy a darle una clase normal. Vamos a darle son clase diferente porque tenemos algunas personas agregando y vamos actualizamos interacciones sobre animaciones a este eso Vamos realmente adelante. Y con esto para bloquear, um, voy a darle una clase, y voy a llamar a esta descripción del proyecto. ¿ Está bien? Descripción del proyecto. Y sigamos adelante y empecemos agregando algún relleno a la izquierda y a la derecha. Entonces conseguimos 40 píxeles en la parte superior. Tenemos 32 a la izquierda y a la derecha, así que voy a ir y empezar agregando 32 píxeles a la izquierda. 32 picks está a la derecha. 40 picks está en la parte superior, y 40 picks está a la derecha. De acuerdo, entonces esto es lo que tenemos Ahora. El siguiente es que las mujeres agregaron una imagen de fondo para el color de fondo. Entonces voy a seleccionar al sculler, y voy a elegir el nivel uno. Entonces tenemos este color. A esto se va a sumar lo siguiente, que va a ser nuestro elemento H tres. Entonces voy a presionar el control. E. Perdón por dirigirme ahora mismo. Queremos usar encabezamiento porque este es nuestro el título fuera del título de la página web del proyecto. Y eso podría ser importante para propósitos Seo. Entonces adelante y dijo esto a cada tres y aquí. Voy a elegir el rubro 24. Correcto. Se ve genial. Alguien copia esto en tu cabeza y enfréntate a esto. Está bien. Ahora veamos la distancia entre estos dos que tenemos alrededor de 18 picks es creo que deberían ser 16. Está bien, así que realmente te cambias a las 2 16 ¿bien? Y ah, ahora mismo tenemos 16 picos, está en la parte inferior, lo cual es perfecto. Y fantasticos en una prensa controlada comer. Está bien. Y voy a añadir en un párrafo, y este párrafo va a ser nuestra descripción, así que van a haber párrafos de 18 píxeles. Voy a copiar esto y basarlo. Entonces por aquí. Pero podemos hacer es aplicar el párrafo 18 correcciones Eso luce bien. Y la fuente es también el color del teléfono es claro. Genial. Entonces agreguemos eso también. Por lo que ya tenemos la clase combo existente que usamos así en applique en eso on. Eso es todo. Y eso se ve bastante bien ahora mismo. Todo lo que tenemos que hacer es seguir adelante y seleccionar este trampero normal u ocho, que contiene la imagen. Entonces básicamente, estoy seleccionando la que contiene la imagen y la descripción del proyecto. Voy a seleccionar esto, acuerdo? Y voy a añadir un poco de relleno en la parte inferior, que es que está alrededor de 24 píxeles. Entonces voy a añadir un relleno de fondo fuera 24 ahora, porque este es el rapero normal. No podemos querer tener cuidado con esto porque ya tenemos demasiadas clases de combo. Entonces voy a añadir un nuevo combate plus y llamar a este fijador 24, bloquearlo M por margen. Entonces tenemos una nueva clase combo para esto, y quiero decir 24 píxeles de la parte inferior. Está bien, así que ahora voy a seguir adelante y seleccionar al rapero normal. Voy a hacer una copia de presionar el control, ver Contrave, y eso lo va a derribar. Ahora lo único que tenemos que hacer seleccionar esta imagen. Podemos hacer click en el icono del engranaje. Podemos elegir. Reemplazar imagen y podemos elegir nuestro proyecto número dos, que está por aquí. Está bien, está bien. Y podríamos simplemente adelantarnos rápidamente y cambiar los detalles. Copiar eso y desmenuzado. Ahora bien, yo no seguí adelante y cambié. Sé que no cambié los textos fuera de estos, pero cuando yo cuando tengas el nuevo archivo, tendrás las nuevas descripciones para que puedas referir eso en mi versión. Yo no, uh es lo mismo, así que no me hacen ningún cambio. Está bien, esto se ve bastante bien. ¿ Verdad? De acuerdo, entonces el siguiente no será Oh, aquí tenemos este relleno extra fuera margen extra de 24 ahora, no lo queremos para este bloque. ¿ Todo bien? Lo queríamos sólo por esto. Entonces voy a venir a seleccionar al rapero normal para esta sección, acuerdo? Y voy a seguir adelante y creerlo, ¿verdad? Porque no lo queremos para este elemento. Nosotros sólo queríamos para este elemento, ¿verdad? Nosotros sólo queríamos por esto para esto. No necesitamos esos fondos. Voy a quitar esa clase de combate A Z puede ver que sólo hay rapero normal, ¿ verdad? Entonces voy a seleccionar esto el todo no normal rápido, que actúa como un cual es el que está a la izquierda. Voy a copiar eso, y voy a probarlo para que salga a la derecha. De acuerdo, ahora, muy sencillo. Lo que voy a hacer es seleccionar el stop rapero normal y eliminarlo para que esta estrella hasta el principio y quiera venderlo. Esto soy lo mismo Reemplazar imagen, y voy a bajar y elegir proyecto número tres, acuerdo? Y no voy a seguir adelante y cambiar el cuarto. Copia esto y sigue adelante y meado esto y ah, crecemos, seleccionamos, copiamos y pasamos. Voy a cambiar la imagen de esto también para que puedas obtener ícono, elegir, reemplazar imagen y vamos a ir a elegir el proyecto número cuatro, que está por aquí. Entonces veamos rápidamente esto. Cómo se ve esto en el móvil en otros puntos de ruptura. Entonces así es como se ve en 1920 picks es y creo que eso se ve bastante bien. No se ve realmente tan mal en. A mí me está gustando. Genial. Entonces volvamos a un 14 40. Impresionante. Ahora tenemos otro, que es el punto de vista. Todos los proyectos mantequilla. Entonces vamos a hacer es voy a seguir adelante y crear un nuevo de block, ¿de acuerdo? Y voy a llamar a este rapero de botones. De acuerdo, entonces tenemos un botón, trampero. Lo que voy a hacer es en esta botella. Suéltala. Te voy a decir, ¿por qué no te quitas el 100% de la altura, Ok, que tú que te queda. Está bien, así que ahora ocupa el 100%. Pero el problema es, que ocupa el 100% de toda la página, que no es lo que queremos. Entonces en lugar de decir 100% voy a seguir adelante y en realidad calcular ese manual que voy a presionar están en mi teclado para agarrar, um, la puerta de la ira del doctor, y voy a ir rápido y sólo tipo de tratar de descubre la altura. Entonces salimos en 244 picks es altura, así que voy a decir este rapero de botones. Yo quería ser 244 pies x para fotos, y tenemos algo. Se ve así. A lo mejor quieres encogerlo un poco. Está bien, así que se ve perfecto. Um Sí. Está bien. Creo que eso se ve bastante bien. Ahora, obviamente, este será pixel perfecto cuando ustedes tengan el diseño. Pero por ahora, tengo que asegurarme de que sea pixel perfecto. Cometí algunos errores, uh, cuando lo estaba diseñando. De todos modos, este es nuestro rapero de botones. Ahora, en esto, voy a agregar este botón para que esté en el centro, fuera de la pantalla, en el centro, en el centro, fuera de esta caja, sin importar el tablero. Por lo que se encuentra en nuevo componente en un nuevo elemento collares botones en un país de prensa y escriba en botón. Por lo que tienes tres tipos de armas en normal, pero un botón de radio en el fondo de la granja elegirá lo normal. Pero en este caso, está bien. Y voy a llamar a este CD, ¿verdad? Este va a ser nuestro el nombre fuera de nuestro fondo, que va a ser llamado a la acción. Está bien. Y lo que voy a hacer es seleccionar al trampero de fondo. Y como queremos que el elemento infantil esté en el centro, soy igual que el padre, y voy a flexionar al padre, y voy a decir nuestro centro de línea y justificar el medio. Por lo que ahora está en el centro de esta zona. De acuerdo, sigamos adelante y echemos un vistazo a las propiedades. Entonces el 1er 1 es que Echemos un vistazo al frente. Es botón 18 pixels y su barco. Está bien, así que voy a establecer aumentar el tamaño de la rebajada. 18 cuadros comenzaron a hervir. Ah, el color de la fuente va a ser blanco, negro sobre blanco, y no queremos ningún fondo. Entonces voy a quitar eso y dije que 20 la capacidad o el Alfa va a ser cero. Más bien, vamos a tener un valor, y el color va a ser el nivel uno. Está bien, déjame comprobar el color. Ah, es burbuja. Entonces vamos a seleccionar esto y cambiar el color de este por el color púrpura que tenemos. Está bien. Y ahora veamos el espaciado. Entonces si seleccionamos el elemento box, podemos ver que tiene 2032 pixeles a la izquierda y a la derecha y 24 en la parte superior e inferior. Entonces vamos a añadir ese relleno por aquí en un selecto la ciudad y aquí en lugar de 15 analistas en el estudio, también. Y que haces y 24 y 24. Y ahora podemos ir y salvarte todos los proyectos. Entonces voy a hacer doble clic en esto y llamar a esta vista. Todos los proyectos, ¿verdad? Está bien. Entonces ahora si vas y miras esto en otro punto de descanso, vamos a 19 entrenamientos. Todavía se puede ver eso, Ya sabes, está como en el centro, y se ve realmente bonito. Ah, tal vez tú, vamos al 38. 40 ¿verdad? Las cosas se ven bastante bien, y realmente me gusta. Está bien, así que eso es más o menos para este video. En el siguiente video, vamos a seguir adelante y añadir algunas interacciones flotantes a los elementos. Entonces como ustedes chicos en el siguiente video 24. Animación de la sección de proyectos: Está bien, entonces en este video, vamos a seguir adelante y añadir unas cuantas interacciones agradables y divertidas hacer estos elementos ahora, hay prácticamente cualquier cosa que puedas hacer, pero te voy a mostrar solo unos cuantos de ellos para que ustedes tengan un idea off. ¿ Qué es lo que buscamos? Entonces vamos a empezar con la ciudad ahora. La animación que vamos a hacer esto va a ser en el hover Estado va a seguir adelante y no en hover, que va a ser un combo close. Ahora, aquí hay algunas cosas que quiero primero cosas. Yo quiero cambiar el color Así que va a ser burbuja. El siguiente es que quiero seguir adelante y agregar un poco off drop shadow fueron encendidos en este ajuste de sombras de caja . Y aquí voy a poner la dirección en 180 para que la sombra esté hacia abajo. Yo cambiaría el color apagado. Esto para ser burbuja. Está bien. Animales dijeron que la distancia para ser algo así como 50 y tal vez eso sea demasiado. A lo mejor consideramos a 20 y la sangre podemos decir eso a 60. Ahora bien, esto parece bastante fuerte. Entonces lo que podemos hacer es ir al color y reducir la opacidad para decir algo, como 50% tal vez incluso más tal vez, como, 30%. Creo que ese es un buen número. El otro cosa que quiero hacer es que puedo quiero subirlo un poco cuando lo tenga encima. Entonces lo que podemos hacer es aquí tenemos el efecto de propiedades transformadas. Locanda. Tenemos cuatro propiedades mover, habilidad, rotar y habilidad. Voy a seguir adelante y elegir Blanco, que es la posición blanca, y le voy a dar un número negativo de decir negativo, Fife. Está bien. Y eso va a mover eso hacia arriba. Cinco correcciones, y eso es más o menos. Entonces lo que tenemos que hacer es asegurarnos de que aplicamos las transiciones que se está relajando, hacer la sombra de caja de color y transformarnos. Entonces volvamos a lo no estatal. ¿ Verdad? Y aquí vamos a la transición va a empezar eligiendo la transformación. Muy bien, cuando dije esto a 3 50 milisegundos, vamos a decir que está fuera de la cancha y van a seguir adelante y elegir el siguiente, que es el color de fondo, el color de fondo puso esto en 3 50 y el relajamiento es va a ser Estos son corte. Y lo siguiente va a ser, um, um, la sombra de caja. Está bien, así que voy a poner eso también a 3 50 y relajar el dedo es nuestra cancha. Entonces si vas adelante y echas un vistazo a la mayoría de los cierres Oh, no. Entonces ahora si vas adelante y echas un vistazo a la interacción, podemos ver que se ve bastante bien, ¿ verdad? Se ve bien. Sí. Genial. Ahora voy a seguir adelante y añadir algunas interacciones. Haga esta sección también. Muy bien, haz estas secciones. Entonces vamos a hacer eso ahora. Algo que me olvidé de hacer es que quería hacer que cada uno de estos ítems se vinculen bloque porque ahora mismo, se puede ver que rapero normal como este es un bloque div, lo que significa que en realidad no puedo hacer clic en él ahora mismo. Eso va a ser un problema para mí porque quiero dar click en cada uno de estos activos. Entonces lo que voy a hacer es un mexicano o clic derecho, y voy a cambiar, digamos, este convertir a bloque de enlace. Muy bien, así que ahora este rapero normal ahora es en realidad un bloque de enlace en el que puedo hacer clic, derecha es lo mismo. Estamos aquí, seleccionaremos al rapero normal. Voy a hacer click derecho, y voy a decir convertir a link Block. Está bien. Debajo de lo mismo por aquí. Yo quiero decir rapero normal. Voy a gustar click y debo decir, bloque de enlace convertido en la misma cosa o aquí vendiendo el rapero. Está bien, bien. Haga clic y diga convertir a bloque de enlace. Genial. Ahora lo que quiero hacer es como que quiero cambiar el nombre de esto. Yo como que quiero quitarlo y darle una clase diferente porque sólo estos cuatro elementos van dedo del pie tienen que van a tener una interacción particular en. Lo voy a hacer en base a la clase. Entonces cada clase, cada elemento que tiene una clase en particular va dedo del pie tienen en la animación. Y hemos utilizado esta clase rapero normal en tantos lugares diferentes, así que no quiero afectar a todos esos diferentes elementos. Alguien quite esto y voy a crear un nuevo número de clase. Llama a este proyecto bloquear nuestro proyecto rapero. Creo que ese es un buen nombre. Entonces va a ser Project rapero. ¿ Todo bien? Este también va a ser crapper del proyecto. Está bien, aquí. Lo que hemos hecho es que tenemos una clase de combate, así que voy a borrar ambas. Quiero ver a Project tirarlo y voy a crear una nueva clase de combate, y voy a llamar a este 24 fijador fondo subrayado m por margen. Y voy a decir 24 arreglos o aquí Así que tenemos este 24 picks es Y lo otro que quiero hacer es seleccionado Este, el rapero normal. Sácalo de esta llamada a este rapero proyecto y fue 24 pixel parte de marcha. Ahora mismo quieren hacer es que se puede ver que tenemos este tipo de derecho subyacente. Y si miras bien el texto real, no lo hacemos. Tenemos el tipo de decoración, y si haces clic en él, puedes decir que está diciendo que el valor se está heredando de todos los enlaces. Ahora bien, si desmarco esto, todavía no lo quita. ¿ Está bien? Porque lo que está pasando es que esto en realidad no viene de esto. Si selecciono el link block nuestro rapero proyecto religioso que tiene este subrayado y que se está reenviando sobre el dedo del pie el elemento chile, que es el texto. Entonces voy a ir con el propio padre, que es el rapero del proyecto, y voy a descontrolarme. Y ahora eso va adelante y quita que están en la línea cada otro lugar nos va a poner de nuevo a 14. 40 pixeles. Creo que una cosa que realmente quiero hacer es que creo que ya sería del tamaño de esto. Siento que 620 píxeles es bastante largo. Entonces vamos adelante y cambiamos esto. Haz algo así como 400. Creo que eso es más fácil para el hielo escanear y mirar. Creo que sí, sí, ese es un número mejor. Está bien. Podría Así que no tienes, Vamos a seguir adelante y sumar la interacción. Entonces vamos a empezar seleccionando al rapero del proyecto porque cuando pase el rato sobre el rapero del proyecto quiero que suceda algo de interacción del dedo del pie. Voy a ir al tema de la interacción y voy a dar clic en elemento más grande y voy a elegir más flotar. Entonces tenemos que definir qué sucede cuando elegimos en hover. Y qué pasa cuando mastica hover fuera encuesta eligiendo lo que sucede en hover. De verdad voy a empezar una animación clara en nueva animación, y voy a llamar a este proyecto hover. De acuerdo, Entonces una cosa que hago es que quiero escalar todo este bloque. Eso va a ser el número uno. Y la interacción de ciclo es que quiero cambiar el color de esto. Ese es el número dos. Y el número tres es que quiero mover esto ligeramente hacia el lado derecho. ¿ Todo bien? Sólo para dar, como, un bonito efecto divertido. Está bien, así que sigamos adelante y hagamos esto. Va a empezar eligiendo la propiedad que queremos mover. Entonces queremos escalar porque queremos escalar el proyecto. El rapero. De acuerdo, ahora, aquí tenemos tres propiedades selección, clase de elemento o interacción desencadenada en este caso. El disparador de la clase y el disparador de interacción son prácticamente lo mismo, porque el disparador de interacción es Project Rapper Y la clase también es proyecto Rapper. Porque queremos que esta animación se aplique también a todas las otras tres clases. Está bien. Y vamos a elegir gatillo de interacción. Está bien. Y lo que voy a hacer es que voy a seguir adelante y sólo aumentar la escala en 1.2 Vale, Ahora, Ahora, escala obviamente es de hecho, nosotros fuera de uno. Por lo que no empieza con cero. No arranca. Se fija en forma de para puerto positivo. Entonces una es nuestra normal, y 1.2 es,ya sabes, ya sabes, un 2% más grande de lo que de ella. Entonces vamos a dejar eso tal como está. Lo siguiente que hagamos es ir adelante y elegir el color del texto. Y ahora no queremos cambiar el color del texto fuera del proyecto del rapero porque no hay texto. Queremos escribir, como el cambio, como el cambio, apuntar a cualquiera para elegir el rubro 24. Este es el tablero móvil. Ahora queremos seguir adelante y decir clase de efectos, ¿de acuerdo? Y también quieres decir efecto solo Niños con esta clase. ¿ Qué? Quiero decir que cuando esto se convierta en un disparador, está bien, no tenemos que crear una nueva animación. Podemos aplicar la misma animación a esto, y va a seguir adelante y animar este rubro porque es un niño fuera de este elemento en particular que estaban flotando. Correcto, Así que vamos a decir solo chillin con esta clase, ¿de acuerdo? Y ahora tenemos que definir el color. Entonces voy a elegir este tipo de un color cian que tenemos. Está bien, puedes ver eso por aquí. El próximo asesino sí va a seguir adelante y elegir movimiento. Está bien. Y ahora voy a seguir adelante, ¿verdad? Haga clic, cambie objetivo y elijelo a esto. Y aquí en el movimiento, sólo voy a moverlo a través de la X por unos cuantos píxeles. Entonces digamos que sólo comprar 10 púas está bien? Y ahora lo que va a pasar es que si jugamos esto, se puede ver que todos pasaron son tres veces diferentes. ¿ De acuerdo? Pero queremos que todos tengan que pasar al mismo tiempo. Entonces lo que voy a hacer es seleccionar este que podrías haber arrastrado y combinarlo con ese. Selecciona este y combínalo para abordar. Ahora, también se puede ver que se puede agregar un mortal a cada uno de los elementos. Y también tienes una opción donde puedes empezar o comenzar después de una acción previa. En este caso, queremos que esto comience con la acción anterior. También queríamos que esto comenzara con la acción anterior y no queremos liderar tarde. De acuerdo, Entonces si sigo adelante y digo después de acción previa, se puede ver que tipo de empuja esto afuera porque esto está empezando después de la acción anterior y no con la acción anterior. Entonces queremos mandar esto con acción previa, acuerdo? Y se puede seleccionar a todos estos tres manteniendo el turno hacia abajo, y luego podemos llegar a la flexibilización y se puede decir que está fuera de la cancha. No voy a querer dedo del pie hacer este punto de cedro cuarto segundo. Ahora echemos un vistazo. Entonces al pasar el cursor, se puede ver que escala y el color cambia. Pero cuando un hover fuera, realmente no pasa nada. De acuerdo, entonces tenemos que definir eso también. Por lo que aquí sí definimos el flotado. Voy a elegir hovered out, y voy a decir que empiece en animación y ya tenemos este proyecto cubierto. Lo que voy a hacer es venir aquí y duplicar esto, ¿de acuerdo? Porque no quiero seguir adelante y crear y empezar de fresco. Yo soy capaz de duplicar esto. Voy a seleccionar el 2do 1 así habitar. ¿ Estás vendiendo el 2do 1 y en Hovered en. Dijiste De acuerdo. 1er 1 Ok, quiero seleccionar esto. Y me cambiaron el nombre solo para asegurarme de que no nos confundamos. Yo quiero decir, sin embargo, fuera OK, y ahora vamos a mandar de vuelta los valores. Dos de los originales. Entonces esto va a ser uno. El color del texto va a ser blanco, y el movimiento va a ser cero. De acuerdo, así que ahí tienes. Entonces ahora si miras bien, puedes ver que tenemos esta hermosa animación de hábito y, sabes, ya sabes,por eso ahora, no funciona para los otros. Está bien, porque en realidad no lo estoy definido. Ahora. No tenemos que seguir adelante y hacerlo por cada off Estos. Todo lo que tenemos que hacer es si vas adelante y seleccionas al rapero del proyecto padre. De acuerdo, en realidad podemos bajar aquí a la configuración del disparador y decir gatillo solo en el elemento seleccionado , ¿ verdad? Esto es lo que está pasando. Queremos decir desencadenar la clase. ¿ Y qué es un rapero de proyecto de clase? De acuerdo, entonces ahora cada elemento que tiene la clase llamada Project Rapper va a iniciar la animación. Entonces si lo tengo en esto, esto funciona sobre esto. Esto funciona lo mismo aquí, ¿verdad? Bastante cool. Y eso se trata mucho de cómo se crea esta hermosa interacción divertida. Espero que lo disfruten chicos. Y en el siguiente video no saldría adelante y realmente siguiente sección. Entonces los veré en el siguiente video. 25. Cómo hacer que la sección de proyectos sea respondible: Muy bien chicos. Entonces industria, vamos a seguir adelante y hacer de esto un receptivo Sería súper rápido, súper fácil y súper fondo. Entonces sigamos adelante y hagamos eso. Voy a ir al punto de ruptura de la tableta, y luego los puntos de ruptura de la tableta piensan que parecen verse un poco abarrotados. El padre va a hacer es que voy a seguir adelante y poner esto en 80 arriba y 80 en abajo. No hay cambios a 40 a la izquierda y 40 a la derecha, ¿verdad? Y 40 y bien, esto es lo que tipo de ir. Ahora bien, esto sí se ve bien, pero creo que en mi opinión, sería mucho mejor que los pusiera por separado. Entonces lo que voy a hacer es que voy a seguir adelante y tenemos al rapero, ¿no? Y el rápido no es genial voy a seguir adelante y quitar dos columnas para que se convierta en una sola columna y ahora esto se ve mucho mejor. Entonces ya sabes, tenemos una buena distinción y teoría de diferenciación cosa que podemos hacer es si vas adelante y seleccionas al trampero, podemos seguir adelante y aumentar la brecha de crecimiento a 48 o 32. Lo que sea que pienses. Se ve bien. De acuerdo, um, no creo que hayamos hecho eso. Sí, 48. Eso sólo se aplica para esto. Pero quisiéramos aumentarlo aquí también, porque ahora mismo, aquí en el Project Rapper, tenemos al editor 24. No podemos querer aumentar esto a 40. Y, uh, eso se ve bastante bien. Y creo que eso es más o menos correcto. Y, ah, vamos al punto de ruptura del paisaje en la ruptura del paisaje cuando como que queremos radios este 2 42 64 en la parte superior, 64 en la parte inferior y 20 en la izquierda y 20 en la derecha. ¿ Verdad? ¿ Andi? Sí, eso se ve bastante bien. Está bien, así que eso es mucho sobre cómo hacer que esto represente. Y como ustedes en el siguiente video 26. Conceptos básicos de las resoluciones de imagen: ahora mismo en este mismo dueño, explique un concepto sencillo respecto a las resoluciones de imagen. Está bien, ahora, presta atención a esto, porque este es un concepto muy importante a entender. Por lo que no tienes una pantalla, que es 1920 por 10 80 píxeles en esto es más o menos lo que obtienes en una laptop de Windows. Y la mayoría de las pantallas no son retina. Sí consigues monitores y laptops Windows, que tienen una pantalla retina. Pero tomemos ah, situación en la que la mayoría de la laptop que están ahí fuera tienen no retorno se desplazan o una pantalla no retina. Ahora, aquí tengo una imagen. Y ahora el tamaño de este marco es de 1920 por Kennedy. Y tengo una imagen por aquí, que es 1002 100 por 600. momento, En estemomento,así es como se va a ver esta imagen en esta pantalla. Vale, Ahora, ¿y si estoy mirando la misma imagen en una pantalla de un libro de Mac? Está bien, entonces si vengo aquí a la izquierda, vemos que tenemos un Mac book pro. Sólo déjame moverme hacia un lado. ¿ Todo bien? En realidad, la pantalla del libro de Mac tiene un lado apagado 14 40 por 909 100 es la altura, pero el número de imágenes son en realidad dos veces a la derecha. Eso se debe a que se llama nuestra pantalla de retina, lo que significa que tiene que x la cantidad de imágenes. Ahora, pesar de que el tamaño es más pequeño, ya sabes, incluso el 14 40 es menor que 1920. El número de píxeles tiene es dos veces. Entonces si realmente tomamos esta imagen y la miramos en esto, en realidad va a ser del tamaño de la misma. Va a ser muy pequeño. No va a ser del mismo tamaño apagado 1200 por 600 porque estos tienen dos veces el número fuera de fotos. Esto en realidad va a ser la mitad del tamaño, que es de 600 por 300 el original es de 1002 100 por 600. Pero si vas adelante y escalamos esto para que sea de este tamaño, bien, en realidad estamos estirando las fotos, acuerdo? Porque en realidad, puede retomar sólo estas muchas selecciones es porque así es lo mucho que es eso. El número de píxeles son en realidad el doble. Entonces si ustedes están entendiendo el punto, así que si en realidad sigo adelante y hago un tablero de arte, que es que es así de grande ya saben, que es 28 80 por 1800 que tiene todas las fotos, entonces esta imagen va a ser la mismo tamaño, que es de 1200 por 600. Está bien. pantallas Retina siempre tienen dos veces el número de imágenes. Y esa es la razón por la que cualquier imagen que esté en una pantalla de ventanas va a ser la mitad del tamaño en un MacBook. Otra pantalla de retina, ¿verdad? Entonces cuando siempre estás agregando imágenes, quieres asegurarte de que tu turno encienda H I. D P I para que rep throw sepa que se supone que esto es la mitad del tamaño en la pantalla de retina. Por lo que al final, la línea de fondo es en cualquier momento que agregues una imagen, asegúrate de que la imagen sea H I. D P. I. Derecha. Y si no funciona bien o si no se ve bien, eso probablemente significa que tu imagen no es lo suficientemente grande. Tu imagen no lo es, no tiene una buena resolución suficiente, ¿ verdad? Entonces H I V p. Lo encendí para cada imagen, así que eso es más o menos sobre lo que tenía que explicar sobre la resolución de imagen. Y los veo en el siguiente video 27. Construir la sección de dribbble: Muy bien, chicos. Entonces en esta ciudad, vamos a seguir adelante y recrear la sección de regatas. Pero también tenemos esta sección de instagram, y lo único que tenemos que hacer es solo hacer una copia basada en esto y debería funcionar. Entonces podemos terminar rápidamente eso y luego ir a la sección de regate va a ser, ah, interacción muy divertida. Y te voy a mostrar cómo hacer esto porque tipo de lo que íbamos a desplazar esta imagen va a tener una interacción divertida muy agradable mientras recorríamos la página. Por lo que aquí estoy en flujo de trabajo. Y, por supuesto, obviamente estoy a flote. Y lo que hacemos es que voy a seguir adelante y empezar duplicando esta sección, así que asegúrate antes que nada, sumemos esto al 14. ¿ 40 bien? Y asegúrate de seleccionar toda la sección media. Voy a copiar esa sección, y voy a venir aquí cerrar todo y ah, que seguiría adelante y simplemente basarlo. Y entonces tomaré esta sección media y tipo de moverla hacia abajo. Entonces tenemos uno por aquí, y vamos a seguir adelante y simplemente reemplazar el texto y las imágenes. Entonces voy a decir, um bien, voy a decir copiar este Doble click en este instagram y quiero copiar esto y bestia . Está bien. Y aquí vamos a decir Sígueme en instagram. Entonces voy a decir, Sígueme en I G bien. Y cambiaremos esta imagen también. Ahora, la cosa es, que lo que va a pasar es dejarme mostrarte lo que va a pasar cuando cambies la imagen, ¿ verdad? Entonces vienen aquí a la filosofía de la fotografía, y elijo cambiar imagen sobre voy adelante y cambio la imagen a ésta, que es la que queremos. Se puede ver que aquí también cambia, porque técnicamente, ambos tienen la misma clase. Y la imagen de fondo es una propiedad off. Eso Así que más bien voy a presionar el control Z para restablecerlo de nuevo. ¿ De acuerdo? Y esto en realidad voy a seguir adelante y añadir una clase combo, y voy a decir este instagram ¿bien? O podrías seguir adelante y crear una nueva clase en sí misma. ¿ Todo bien? Pero solo voy a seguir adelante y clase de Atacama, porque es un poco más fácil, ¿de acuerdo? Y Ahora puedo seguir adelante y cambiar el esto y podemos elegir esto, acuerdo? Y voy a elegir derribar, cierto, Porque no puedo querer ver esta parte. Entonces si volvemos hacia arriba, podemos ver que esto permanece como está. Otra cosa es que esto tiene un color diferente. Entonces voy a seguir adelante y copiar esta cancha de color, copiar eso y venir aquí y aquí. Vamos a añadir una nueva clase, y voy a llamar a este Instagram porque volvemos a cambiar los valores. Entonces voy a seguir adelante y ritmo eso. Está bien, se van. No lo hagas. Ahora, vamos a seguir adelante y crear los próximos almuerzos son sección de regate. Entonces voy a empezar seleccionando el cuerpo y una prensa controlada e. quiero decir sección. De acuerdo, así que tenemos no quiero ninguna foto en la parte superior, y tenemos alrededor de 1 30 fotos en la parte inferior. De acuerdo, así que voy a llamar a esta sección de regates, Vale, así que van a haber 120 correcciones en la parte superior y preguntarme algún píxel en la parte inferior. Muy bien, genial. Voy a añadir en un rapero decir un bloque de, que va a ser nuestro rápido. De acuerdo, así que quiero decir rapero, y sabemos qué hacer. Ahora es esto en realidad, si miras esto, esto en realidad tiene un ingenio diferente. Está bien, este es un contenedor pequeño mientras que es esto no está bien. Ahora bien, este es el regular, que tipo de se expande a 1920 72. Pero esta es una sección que quiero decir y definir diciendo que quiero que esta sección esté en el centro todo el tiempo. No necesito expandirme. Yo quería ser de este tamaño. Entonces, ¿cuál es el tamaño? Vamos a comprobarlo en realidad. Esto en realidad son 1076 seises, y en realidad voy a seguir adelante y agarrar, ya sabes, el Colorado aquí, y voy a decir dribble. Voy a ver con Muy bien, ¿Cuál fue el valor? Fue de 1076 C una semilla o 76 pixeles. Está bien. Genial. Entonces lo que significa es que voy a seguir adelante y duplicar a este rapero, acuerdo? Está bien. Voy a seguir adelante y llamar a este rapero versión dos, ¿de acuerdo? Y este va a ser Maxwell off 1076 Ok. Ahora, independientemente del tamaño de la pantalla, esto va a ser 1076 Ahora, esta es alguna decisión de diseño que he tomado, y he elegido a alguien Adelante y haz esto. Entonces ahora vamos a tener estos tres elementos, y creo que ya tenemos esto en algún lugar por aquí. Entonces creo que podría seguir adelante y simplemente copiar toda esa información. Entonces empecemos agregando un bloque, y esto va a ser para nuestro contenedor. Y voy a seguir adelante y llamar a esto normal adecuado. Y aquí vamos a empezar agregando nuestro texto están encabezando Ah, párrafo. Y ya sabes, el enlace de animador abajo uno comenzó agregando el encabezado esto va a ser se dirigen a Ok. Y quiero decir que encabezar nuestras 55 selecciones está bien, y solo copiaremos esto y llamaremos a esto mi regate. El siguiente va a ser estos párrafos y reprimir control E buscar un párrafo. Está bien. Y voy a copiar esto y base por aquí. Y esto es 18 picks es para que podamos agregar la clase de párrafo de 18 píxeles. Entonces el párrafo 18 nos recoge bien. Y lo otro que queremos hacer es que queremos tener un espaciado de 24 píxeles en la parte inferior. Entonces seleccionas el encabezado, y vamos a añadir esta clase combo que ya tenemos. Creador. Entonces eso va a mover eso hacia abajo. También tenemos éste, que es de 18 píxeles y a la ligera. Entonces voy a añadir la luz. Gran clase combo. Eso se ve bien. Y también tenemos, como, como, 40 picks está montando en el margen de la parte inferior. Entonces vamos a seleccionar esto y vamos a sumar una nueva clase esta vez y llamamos a este 40 fixer margen inferior. Está bien, sólo estoy bien, y vamos a decir esto a 40. Genial. Y ahora necesitamos estos botones animados. Entonces solo voy a seguir adelante y copiar esto y basarlo en, voy a decir, seguirme en impulsado. Vale, Ahora, en realidad no podemos ver nada, ya sabes, porque está en una superficie negra. Entonces voy a seguir adelante y añadir una nueva clase de combate y solo llamar a esto blanco, está bien, porque como que queremos que esto sea de color blanco, así que vamos a seguir adelante y simplemente cambiaremos el color de esto para que sea blanco, acuerdo? Y eso debería ser lo suficientemente bueno. Está bien, esos libros. Ahora bien, si miras por aquí que esto en realidad es tipo apagado desglosado en dos líneas para que pueda seguir adelante y por aquí, sólo puedo pasar esto a una segunda línea, ¿de acuerdo? Y eso se ve bastante bien. Genial. Sólo estamos aquí ahora. El siguiente es crear esta sección. De acuerdo, Ahora, déjame explicarle qué va a pasar por aquí. Tenemos una imagen. Está bien. Se puede ver que se trata de una imagen. Y también tenemos este tipo de apagado. Ya sabes, como esta ilustración del navegador. Ahora mismo vamos con los pies a construir esto desde cero dentro de un arma. Ah, está bien. Entonces, ¿cómo lo vamos a hacer ahora? No es una condición que yo quiera. Ah, mención es sobre la altura. Ahora, esto son 6 40 picks es así que voy a seguir adelante y aquí en el con. Ahora en realidad puedes agregar Ah, altura basada en el estado como 77 TV, seto o un cabezales de TV son 50. Nosotros eclosionamos. Pero en este caso, voy a elegir algo como esto y ya sabes? Ah, valor fijo un valor absoluto. Y voy a seguir adelante y copiar esto, y voy a decir 6 40 picks es voy a hacer de esto la altura. De acuerdo, entonces esto es lo que vamos a remolcar ahora para esto. Vamos a seguir adelante y rápidamente construir este flujo de trabajo interno. Podemos sumar todos estos tres botones, todos estos tres dardos. Va a ser divertido. Entonces sigamos adelante y hagamos eso, acuerdo? Entonces cuando empiezas por, ya tenemos un conejo normal. Voy a crear un nuevo bloque de, ¿de acuerdo? Y esta también va a ser nuestra película de envoltura, también. De acuerdo, Ahora, queremos agregar algo de espaciado por aquí, que es que 120 corrige. Entonces voy a seleccionar este rápido normal que tenemos. Y en el que voy a crear en nueva clase y voy a llamar a este 60 pixel bottom underscore M for margin are Bueno, era 1 20 Ok, así que vamos a hacer este 20 y luego vamos a seguir adelante y darle un margen inferior de 120. De acuerdo, entonces tenemos esto y voy a crear ahora y ahora tenemos al segundo rapero normal que tenemos . Entonces tenemos una sección a la que tenemos a Rapper, que es para esto. Y luego tenemos otro rapero por aquí, que es un dedo rapero, y tiene que sostener esta ilustración, así que empezaremos por crear esto. Ahora bien, este es un bloque muy sencillo, y tiene una altura de 37 píxeles. Entonces voy a crear un nuevo bloque de, y voy a llamar a esta barra de navegador, ¿de acuerdo? Y voy a poner la altura de esto a 37 arreglos en el día. Vamos a seguir adelante y cambiar el color de fondo para que sea uno, ¿de acuerdo? Y también agregamos radio ahora con lo último. Lo que puedo hacer es hacer clic en este puntera botón individualmente agregar radio a la parte superior izquierda y la parte superior. Correcto. Está bien. Entonces, electorado cuchillo, tenemos este bonito entorno, que se ve realmente bonito. Y nos han añadido que redondear ocho píxeles por aquí también. Entonces eso es bastante bueno. Y ahora agregas estos tres puntos, así que voy a crear un nuevo bloque de día, ¿ verdad? Y este callejón sin salida, Vamos a llamar a esto puntos. ¿ De acuerdo? Está bien. Y aquí los oscuros tamaños de 12 píxeles por 12 píxeles. Entonces voy a ir el ancho y la altura y dije que los 12 pixeles por 12 pixels y voy a ir al radio y dar, como, un gran número apagado 100. Entonces se vuelve completamente alrededor y vamos a usar la luz de color. Genial. Alguien vaya al fondo y codicioso int y que pudiéramos elegir el color. Ah. Ah, lo siento. Vamos a elegir este color, y esto va a ser, como, como, Genial. De acuerdo, entonces ahí vamos. Está bien, ahora por esto. Pero yo estaba sobre Lo que quiero hacer es que esto sea un elemento flex, y quiero decir flex center bien. Y justificar izquierda, derecha, para que tengamos todo en el centro. Ahora, hay un poco de espaciado a la izquierda, que es alrededor de 16 correcciones. Entonces le voy a dar un relleno interior a la barra del navegador fuera de 16 píxeles para que los doctores aquí y también el punto tenga un espaciado fuera de seis fotos, así que voy a dar un margen derecho de seis píxeles, y quiero duplicar esto punto dos veces. Entonces ahora se va a ver así y ahora, como que tenemos esta sección perfecta hasta. Siguiente. Queremos crear este bloque de día, y este de block va a ser nuestro contenedor para la imagen. Entonces lo que vamos a hacer es crear unos nuevos bloques. Voy a llamar a esto la cuadra, ¿de acuerdo? Y esto queríamos volver a estar dentro del rapero. Por lo que lo reportamos, asegurarnos de que esté dentro del rapero. Muy bien, entonces vamos a empujar esto a la vista. Ahora ha entrado al rapero. Ahora, esta va a ser nuestra imagen de regate. ¿ De acuerdo? Y ahora la altura es de 6 40 picks es así que vamos a ir adelante a la altura y decir 6 40 picks es y esto es lo que tenemos son ahora mismo. Quiero seguir adelante e importante la imagen fuera de este doble tiro. Entonces si vas a nuestro panel de activos, tenemos nuestra imagen, que es nuestra imagen de regate. Ahora, hay dos vías. O bien podemos importar esto como un elemento de imagen ya podría usarlo como imagen de fondo. Lo que voy a hacer es ir adelante y dar clic en esto, y voy a decir, elegir una imagen de fondo. Entonces cuando digas elegir imagen, y yo voy a elegir Ah, la imagen de regate que tenemos. Está bien. Y voy a seguir adelante y decir: No estilo. Está bien, en. Yo quiero decir doble. Está bien, genial. Ahora, en realidad echemos un vistazo y veamos cómo funciona esto. ¿ Todo bien? Entonces cuando te desplazas, se ve bien. Se ve perfecto. Se ve absolutamente normal, está bien. No se ve diferente en absoluto. Una cosa que quiero hacer es seleccionar esta parte inferior de la imagen doble inferior hizo bloque. Y lo que quiero hacer es ir adelante y ah, darle a esto un redondeo de fondo en la parte inferior. Entonces haz esto, como, ocho píxeles y ocho píxeles en la parte inferior. Entonces, ya sabes, es una especie de 400. Agradable. Está bien. Y ahora aquí hay un truco genial. Lo que vamos a hacer es aquí. Tenemos una opción que dice fija. Está bien, voy a dar click en eso, ¿de acuerdo? Y cuando haga eso, lo que va a pasar es que se puede ver que como que da este efecto. Muy bien, Street, se va a arreglar. Está bien. Y lo que queremos hacer es asegurarnos de que realmente digamos esto a 40 y realmente podemos ir y decir esto para ser top, por lo que se alinea a la parte superior. OK, pero el único problema es que se recorta aquí a la izquierda y a la derecha porque se está arreglando a toda la página. Y y esto también está cambiando, dependiendo del tamaño de la pantalla. Entonces, ya sabes, eso también va a ser un problema. Entonces si le dije esto a 1920 se va a ver un poco diferente. Se va a ver un poco diferente para que lo arreglemos es lo que podemos hacer es por aquí . En lugar de decir tapadera, voy a decir costumbre, y voy a darle un valor fijo. En este caso, es 1076 el cual es el valor. Y voy a decir que quiero que seas 1076 picks es blanco, acuerdo? Y voy a decir top para que se alinea a la parte superior, o podemos elegir centro o top lo que quieras, verdad? En este caso, podemos ponerlo al centro si lo deseas. Eso debería estar bien. Y ahora si le echan un vistazo, está bien. Se ve mucho mejor. Se ve realmente genial e interesante. ¿ De acuerdo? Y la otra cosa es que si vas adelante y cambias el tamaño, digamos, 1920 es como que va a adaptarte a uno varios, 76 píxeles. De acuerdo, se va a cambiar a 1076 Si vas a probablemente 12. 40 se puede ver que tipo de se adapta a ese píxel 1076 con todo bien, y eso es fantástico. Genial. Entonces eso es más o menos en cómo creamos esta animación muy divertida, ¿ verdad? Y en el siguiente video, vamos a seguir adelante y hacer de esto un patrocinador para otros puntos de descanso. Entonces son ustedes chicos en el siguiente video. 28. Cómo hacer que la sección de dribbble: Entonces en este video, vamos a seguir adelante y hacer que esto sea sensible. Entonces vamos al punto de ruptura de la tableta encendido en el registro de la tableta, podemos ver que las cosas se apagan. Entonces vamos a empezar seleccionando la sección de regate. Voy a reducir la altura de esto a 80 píxeles en los 80 píxeles superiores en la parte inferior y también voy a agregar relleno a la izquierda, que es alrededor de 40. Picks es y 40 picks es justo Ahora. vemos un pequeño problema es que ustedes saben, cuando aumentan esto, estamos amables. Ya sabes, cambiando esto ahora. En realidad definimos un vale off, ya sabes, 1076 Pero, ya sabes, en los puntos de ruptura de tabletas, parecen ser un poco diferentes. Entonces creo que una cosa que podríamos hacer es ponerla para contener a Andi. Creo que lo que eso va a hacer es amable. O sea, contener realmente no funciona de nuevo. Queremos elegir portada, y creo que la cubierta hace un trabajo bastante decente. Yo no diría que sea la mejor, pero creo que esa es la mejor alternativa que tenemos. Y tal vez creo que para tablet nos vendría bien la altura de esto porque esto podría ser demasiado . Entonces de selects, poniéndolo a 6 40 tal vez podrías reducirlo a 4 80 Y creo que eso se ve Ah, un poco mejor. Está bien, eso se ve bastante bien. Muy bien, vamos al paisaje móvil. Punto de ruptura. Y aquí en el paisaje móvil, como que quieres cambiar esto de nuestro 80 a 64 en el top 64 en la parte inferior, Uh, 30 20 a la izquierda y 20 a la derecha. Y sí, creo que hasta esta distancia, creo que podría ser demasiado. Por lo que Internet 1 20 que podríamos preparar es esto por debajo de 64. Y creo que eso se ve bastante bien. Volvamos aquí también. Y creo que, um, ya sabes, deberían estar bien. Ahora bien, esa no es realmente una forma perfecta de arreglar esto. Entonces supongo que esto debería ser lo suficientemente decente. Debería serlo. Debería estar bien. Realmente no tan malo. Está bien, vamos. Pero eso debería ser Eso debería ser lo suficientemente justo. Eso debería ser bastante bueno. Está bien, así que eso es más o menos para este video y los veo chicos en el siguiente video 29. Construir la sección de testimonios: Muy bien, chicos. Entonces en este video, vamos a seguir adelante y crear esta sección fuera de la página web y será bastante divertido en porque ¿qué? Porque lo que vamos a hacer es hacer que esta parte se pegue a la parte superior de la página mientras ésta se desplaza para que el lado izquierdo de la página no se desplace Mientras que el lado derecho de la página se está desplazando. Es una interacción realmente divertida que no podemos ver en muchos tipos diferentes de sitios web. Entonces sigamos adelante y hagamos eso. Ahora. He ido adelante y he hecho una rápida demostración y un marco de alambre de cómo se va a ver , Así que vamos a empezar con una sección como de costumbre, y luego voy a crear un rapero dentro que va a tomar toda la altura por aquí y dentro de eso voy a lograrlo. Voy a hacer de esto un envolverlo en una gran Así que tenemos dos columnas. Entonces tenemos una por aquí y otra por aquí y en la primera columna. Sólo voy a asegurarme de que ocupe todo el espacio y voy a seguir adelante y añadir una cuadra por aquí. Esto es para el texto y la información de los enlaces. Y estamos aquí. Vamos a crear tres bloques tres bloques D, uno para cada uno. Las composiciones tienen una imagen. Tenemos algo de texto y sabes que le tiene subtexto o aquí. Entonces esto mucho como vamos a ir al respecto. Entonces vamos a saltar al flujo de rep, ¿verdad? Quieres empezar seleccionando el cuerpo encendido, empezaremos creando una nueva sección, Control de prensa e. Y estamos tipo en sección. Está bien. Y voy a seguir adelante y llamar a esto el Metro. ¿ Qué? Esto es en realidad esto está bien. Entonces esto es un surfista como testimonios. Señor Adelante y llame a esto, um, sección de amoníaco testy sobre ella, y tenemos algo de relleno en la parte superior de la parte inferior. Por lo que tenemos alrededor de 1 20 píxeles en la parte superior y alrededor de 1 30 en la parte inferior. Entonces voy a empezar creando una palmadita fuera 1 20 en la parte superior, 1 20 en la parte inferior, 72 a la izquierda, 72 a la derecha. Supongo que tenemos esta gran sección y voy a empezar creando nuestro primer bloque div, que va a ser un rapero, bloque creativo. Y voy a decir Rapper, así que sólo consigue otro rapero. ¿ De acuerdo? Y ahora qué? Clases de combo. Entonces tenemos genial. Tenemos tres grandes columnas y tienes proyectos crear. Creo que vamos a seguir adelante y crear un nuevo genial para esto porque estoy no quiero asegurarme de que no quiero estropear nada. Entonces vamos a seguir adelante y, um, um, darle a esto una clase y llamarlo, um, um, pegajoso. Bien. Está bien. Tan pegajoso. Genial. Entonces voy a hacer esto en una cuadrícula haciendo clic en este botón. Y ahora vamos a empezar por tener un hueco de columna fuera 24 en Just Wonder. Muy bien, sólo necesitamos una gota. Ahora vamos a empezar por crear un nuevo bloque de, que va a ser nuestro rapero izquierdo. Entonces esto va a ser sólo va a llamar a este trampero normal, porque va a estar a la izquierda, y aquí podemos crear estos tres elementos, Así que tenemos un h dos. Tenemos un párrafo, y tenemos esto. Entonces creo que lo que voy a hacer es que sólo voy a seguir adelante y agarrar, ya sabes, todo lo que voy a agarrar todo este bloque, que dice rapero normal. Voy a copiar eso y traer aquí y basarlo. Está bien, Bastante bien. Eso dijo esto a 14. 40. Está bien. Y voy a seguir adelante y sólo copiar esta información. Copiar esto y basado y copiar y basado. Y aquí lo podemos ver. Dice, Mira, todo el testimonio va a copiar eso y pegar. Está bien, así que esto prácticamente no lo hace Ah, esto es fantástico. Y lo que ahora vamos a seleccionar el siguiente, y voy a crear un bloque div, y voy a volver a llamar a este rapero normal porque va a ser nuestro lado derecho fuera del bloque. Y aquí lo que vamos a hacer es crear Wonder Block para cada uno de estos. OK, voy a crear en bloque de Nueva Delhi y quiero dar esto por nombre específicamente para esto porque no quiero confundirlo con nada más, y podemos crear nuestra propia clase para esto. Alguien llama a este testi mony bloque de distancia. Está bien. Y así vamos a ver cómo construirlo. Entonces tenemos una imagen, y luego tenemos otro de bloque. Entonces básicamente, tenemos dos elementos Cuándo va a ser una imagen y cuándo va a ser un bloque sordo con esta información y lo que puedo hacer es este alto a conjunto de 3 60 Y esto es algo que no puedo querer definir el verano. No, agarra eso baja en esto. Necesita ser tres letras, ¿verdad? Correcto. Ah, voy a llamar. Sólo voy a decir imagen, y voy a decir que la altura de la imagen va a ser de 3 60 Picks está en el recon porque está arriba. De acuerdo, Así hipnotizado. Ah, se puede ver que es de 3 60 arreglos. Entonces sigamos adelante e importemos primero nuestra imagen. Entonces ya creamos un bloque matutino polvoriento en una prensa controlada o estamos En realidad podemos simplemente seguir adelante y agarrarlo del panel de activos, así que va a ser uno testimonial. Voy a agarrar eso, y voy a soltar eso dentro, y voy a encender h I D p. I Ok. Y voy a llamar a esta tónica imagen de Monia, ¿de acuerdo? Y voy a añadir una altura de 3 60 píxeles. Ahora eso va a seguir adelante y aplastar esto que no queremos seguir adelante y poner esto a cubrir así que Muy bien, como que ocupa 3 60 píxeles de la altura sobre él cubre cuánto de un espacio que tiene sort. Eso es bastante bueno. No, lo siguiente que voy a hacer es quitar este margen inferior que tenemos. Entonces no quiero esto porque somos finales. No lo hace pronto. Adelante y borra esta clase. Alguien cabeza retroceso, y esto debería ser todo. De acuerdo, Ahora tenemos este bloque testimonial dentro. Voy a crear un nuevo de block, y voy a llamar a este DST monia siguiente. ¿ De acuerdo? Ahora, lo que tenemos aquí es un poco fuera de texto. Y si nos fijamos en este lado, tenemos 64 píxeles en cualquiera de los sitios. Entonces voy a seguir adelante y añadir un relleno de 64 píxeles a ambos lados. NYT 64 en la parte superior. Izquierda derecha, abajo en. Duh. Correcto. Está bien, genial. Entonces ahora vamos a sumar en este texto. Ahora bien, esto puede ser un bloque de texto porque no tiene que hacerlo, ya sabes que no importa para la emisión, así que solo voy a usar un bloque de texto en lugar de un encabezado. Y creo que ya tenemos rumbo a esto Así que esto es rumbo 24 picks Is, um correcto. Ahí vamos. Voy a copiar esto, y, uh, pegarlo. De acuerdo, no lo haremos. Seguiremos adelante y nos aseguraremos de que sean 24. Hubo un fallo, supongo. En fin, Onda, queremos seguir adelante y hacer este tazón. ¿ Todo bien? Por lo que se ve bonito y audaz. ¿ De acuerdo? Y ahora si tipo de observas lo que estamos haciendo aquí es que la distancia entre esto es recta Si 64 picks es y ese es el tipo de estilo que estoy siguiendo independientemente. Entonces, lo que básicamente significa es que la altura está cambiando en función de la altura del contenedor. No es una altura fija, verdad, Porque estamos así de explicar, en este caso, ¿ verdad? Esto fue Ya sabes, aunque se trate de 56 líneas, la altura de esto va a ser la misma de 600 porque yo lo había definido para ser de 600 píxeles de alto. Pero en este caso, no quiero que sea una altura definida. Quiero ocultar el cambio dependiendo del tamaño apagado. Conoces este texto. Entonces lo que estamos haciendo es ya que tenemos como, 64 picks es Onda. Ya tenemos 16. Voy a crear una nueva clase de coma y llamar a este 64 fijador fondo Underscore m. Ok. Y voy a decir que esto sea de 64 píxeles. Entonces ahora tenemos 64. Entonces la próxima vez que seas este pequeño pedazo de vida Así que voy a añadir en nuevo bloque de texto, ¿ verdad? Y este bloque de texto va a estar encabezando 18 píxeles. Sólo voy a decir que rumbo, um no tenemos un rumbo 18 picks está bien, así que esa es una nueva clase. Entonces sigamos adelante y creemos éste. Apenas 24 1 y luego vamos a duplicar clase para que todas las propiedades sigan igual . Y solo voy a seguir adelante y renombrar esto a 18 correcciones, y entonces realmente voy a ser el tamaño extraño hasta que en píxeles. Y estamos también necesitamos un color. Y creo que este color, creo que iss uva ligera. Entonces voy a crear una nueva clase y llamar a esta uva ligera, y ellos iban a aplicar la luz. Gran clase debería estar bien. Genial. Ahora este va a ser el párrafo 16. Entonces va a seguir adelante y copiar esto. Y esto va a ser Ah, párrafo 16 picos es Y otra vez, esto va a ser, como, un gran color. Basta con seguir adelante y copiar la información y bestia en y una copia y bestia. Ahora, la distancia es más o menos, que es como cuatro picos es. Pero aquí, esto tiene alrededor de 16 píxeles. Entonces voy a ir a crear una nueva clase de comas y llamar a este margen inferior de cuatro píxeles, ¿de acuerdo? ¿ Y lo que ya está pasando es que esto se reduce a, sabes, por arreglaciones? Y aquí tampoco tenemos nada, que tenemos margen de píxel cero. Entonces eso es bastante bueno. También puedes ver que tenemos esta frontera, ya sabes, y como que queremos aplicar eso también. Por lo que este borde es en realidad de color gris más oscuro. Entonces cuando iba a seleccionar el bloque de texto testimonial y ah, voy a bajar a la sección de fronteras y voy a elegir estos tres la izquierda, la inferior o vamos a la izquierda. Y me cambiaron el color de este para ser gris oscuro, cuál es éste? Está bien en. Voy a dar clic en esto también y cambiarlo a Dr y voy a seleccionar el correcto y vender eso demasiado oscuro. Entonces básicamente lo estoy haciendo es que estoy aplicando fronteras sólo en ya sabes, estos tres lados, bien, y no en la parte superior ahora mismo. Puedes seguir adelante y sumado en la parte superior de los tuyos, pero solo voy a dejarlo como está, ¿ verdad? Y eso es más o menos. Ahora necesitamos este espaciado de 1 20 píxeles. Entonces lo que puedo hacer es ir a seleccionar el bloque testimonial en sí, todo el asunto. Voy a añadir una nueva clase de comas y llamar a este guión de 1 20 píxeles. También me pregunto si fija bottom underscore m para margen, y voy a bajar aquí y voy a poner esto en 1 20 picks está bien. Y ahora tenemos este 1 26 es. Entonces lo único que voy a hacer es seleccionar este testimonio del rock y basarlo tres veces. Por lo que 123 básico dos veces, en realidad. Y voy a venir aquí y cambiar rápidamente esta información seleccionará esto y pegaré y, como pueden ver porque no definimos cierta altura. El alto ocupa, la altura está definida por el contenido. Está bien. Y voy a empezar seleccionando a esta Emily Parker. Copia eso basado en todo aquí. Y va a ser la compañía número dos. Está bien. Y bajemos. O aquí. Ah, vamos a copiar esta copia y a destajo. Y va a haber vin cent rod, y esa va a ser la compañía número tres. Está bien. Y ahora vamos a seguir adelante y sólo cambiar las imágenes para seleccionar la imagen. Haga clic en el icono de engranaje, elija reemplazar imagen, y voy a bajar y eso elija, um, um, Testimonial tres, que está por aquí. Está bien. Y eso va a ser testimonio. Sólo uno. Selecciona que reemplace imagen y, ah, testimonial a Todo bien, así que eso es mucho. Ahora, echemos un vistazo y veamos cómo se siente esto, como , está bien, voy a establecer como 40 y 40 arreglos. Y ahora si la cago, está bien. Um, correcto. Y funciona. Bien. Ahora, la idea es como que se pegue esto a la cima. Ahora, antes de que haga eso, sólo quiero asegurarme de que tenemos Así como pueden ver, tengo algo de espaciado a la izquierda por aquí y ya saben, porque no quiero que esté tan cerca. Entonces y también el espaciado de 64 en realidad. Entonces voy a cambiar eso rápidamente a 64. Seleccione esta. Y en el Gapen dijo que a 64. De acuerdo, así que esto es más o menos donde estamos buscando ahora. Lo que hacemos no es solo seleccionar a este rapero normal que tenemos, ¿de acuerdo? Y en realidad, lo que voy a hacer es ir adelante y darle a esto una nueva clase, porque este es el único elemento que va a estar atascado bien Va a haber pegajoso. Y como muchos otros elementos tienen la clase rapero normal, no queremos aplicar ninguna propiedad. No vamos a aplicar sólo esto. Entonces voy a seguir adelante y sólo quitar esta clase y dar una nueva clase y llamar a esta prueba. El bloque más pegajoso Nhial, ¿de acuerdo? Y lo que sí sabemos, voy a venir aquí. No hagas posiciones ahora. Aquí en las posiciones, tenemos estática. Tenemos relativo. Tenemos absoluto. Tenemos fijo y tenemos pegajoso. Lo que voy a hacer es decir pegajoso. Y si realmente miras Dice pegajoso corrige un elemento al lienzo solo después de que el usuario desplaza más allá de una ubicación específica en la página. Ahora lo que pasa es que cuando juego bien esto, no pasa nada. Todo sigue igual, ¿verdad? Pero lo que quiero hacer es si voy adelante y digo pegajoso y pongo un valor de cero. Lo que quiero decir es que cuando la distancia entre este elemento en la parte superior fuera de la pantalla es cero stick. De acuerdo, entonces lo que voy a hacer es ahora puedes ver que hay algo de distancia. ¿ Verdad? Pero cuando esa distancia que usa 20 esto se queda atascado al esquema, ¿ verdad? Porque la distancia ahora es cero. Y ahora puedo seguir desplazándome y seguir desplazándome y seguir adelante. El de la izquierda se va a quedar ahí mismo. De acuerdo, Ahora, no quiero tocar toda la sección superior. Entonces lo que voy a hacer es que voy a darle un poco de Spacing off. Let's 100 y 20 picks is Okay, Así que este 120 picks es de esta distancia de esta distancia, y ahora esto es no. Ahora inicialmente se va a ver así cuando me desplace, se va a quedar atascado. Y así es como se va a ver ahora mismo. Podríamos reducir esto a 64 o 48 o 18. Voy a ponerlo en 64. Creo que 64 es un buen número en. Sí, eso es más o menos. Correcto. Y así se crea un efecto hermoso y pegajoso. Entonces al siguiente vamos a seguir adelante y hacer de esto una respuesta. Entonces los veré en el siguiente video. 30. Cómo hacer la sección de testimonios: Está bien. Entonces en esto realmente, vamos a seguir adelante y hacer de esto un patrocinador para otros puntos de descanso. Entonces empecemos realmente saltando a la vista de tableta ahora en la tableta, obviamente quieres empezar seleccionando, ya sabes, los elementos, y están usando el relleno en la parte superior. Esto se había acabado. 80 píxeles van a hacer lo mismo aquí. 80 píxeles en la parte superior en, ya sabes, 80 píxeles en la parte inferior y en la izquierda. Y aquí mismo ya se puede es que a 40 y 40. Y también el espaciado por aquí es podría ser un poco demasiado. Entonces podemos radios que de 64 a 24 eso debería estar bien. Um, hasta el relleno de aquí es un poco demasiado, así que probablemente no estemos listos. Es esto a 32 32 32 y ah, 30. Hacer plomo. Esto se ve bastante mal. Incluso la distancia por aquí, mi podría querer dedo del pie, ya sabes, cambiar esto. Entonces si dije como el bloque testimonial, ya tenemos 21. ¿ Eso se reduce a 64? Y creo que ese es un buen número. Y Sí, creo que estaba en bastante bien. Ahora, el problema es que cuando se trata del punto de ruptura del paisaje, en realidad no se ve bien. Entonces lo que tenemos que hacer es deshacernos del elemento pegajoso, la funcionalidad. Entonces lo que haces con el primero de todo es el rapero de Cynthia es una columna de dos. Genial. De acuerdo, voy a eliminar esa eliminar una columna y convertirla en una cuadrícula de una sola columna. Entonces ahora así como se ve, y yo también voy a ir a cambiar la brecha por aquí. El desfase vial de 16 a 48. De acuerdo, entonces tenemos algo. Parece que esto, y ah, podemos hacer es que esto ya no va a ser un pegajoso bloques. Voy a establecer la posición de este demasiado pegajoso de pegajoso a estático. Entonces es normal y nuestro normalmente se desplaza Y también queremos que la distancia por aquí en la parte superior sea 64 en la parte superior 64 en la parte inferior y, ya sabes, la izquierda y a la derecha. No podemos querer que esto sea, um 20 correcciones a la izquierda y 20 picks está a la derecha y va a ser un bloque muy simple, directo, ¿ verdad? Lo mismo aplica para más por paisaje, para punto de ruptura móvil. Y sí, creo que para las plantas móviles, pobres, creo que para el retrato móvil o que podemos hacer es probablemente radios abajo esto de 30 a 24 en la mano izquierda. A la derecha en eso podemos mantener 32 en la parte superior no debe ser un tema. Y creo que esto se ve bastante bien, ¿verdad? Eso es mucho. Nada demasiado complicado. ¿ Son ah complejos al respecto? Entonces a menos que ustedes en el próximo video 31. Construir la sección de pestañas: Muy bien, chicos. Entonces en este video, vamos a seguir adelante y crear esta sección y será muy divertido porque estaremos usando un nuevo componente llamado puñalada porque queremos que esta sea una estructura de tabuladores y entienda cómo funciona el viejo grifos. Entonces, antes de empezar, vamos a entender rápidamente la estructura. Entonces vamos a empezar con una sección y luego tendremos un rapero adentro, y luego vamos a tener un bloque def, que va a ser para el título y el texto, y el otro desarrollado va a ser para las pestañas mismas. ¿ Verdad? Entonces todo esto va a ser la estructura de tabuladores, y eso es más o menos todo. Y también he definido la altura fuera 420 picks es para cada off estas imágenes. Entonces saltemos en el flujo de aire. Entonces aquí voy a empezar seleccionando el cuerpo, y voy a empezar leyendo en nueva sección Animal call a esta sección sección tabs porque apuñala a Aziz realmente quiere tener amontonado 1 20 pixeles a cada lado para empezar con relleno poniendo con ah planeación a la izquierda y relleno a la derecha. ¿ Verdad? Entonces, empecemos creando un punto muerto. Y este punto muerto va a ser nuestro envoltorio que nos dieron tan punto Ah, lo siguiente va a seguir adelante y creó esta sección. Entonces, ¿qué impresiona control e mete en una la cuadra? Este va a ser mi rapero normal. Y lo que podemos hacer es que sólo podemos recoger estas cosas también lo mismo. Copiar eso. Basado en copia y lo mejor. Muy bien, Debería ser más o menos lo mismo. Y voy a seguir adelante y cambiar esto a fotografía, y podemos tener algo de Dexter aquí. Voy a copiar eso y uno de béisbol aquí y lo que puedo hacer es que puedo romper la línea y decir mientras viajaba para poder seguir adelante y romper eso en dos líneas, y eso debería ser bastante bueno. Ahora agregamos este rapero normal por dentro, pero realmente no creo que necesitemos la superior normal. Entonces lo que puedo hacer es en realidad, vamos a cerrar todo esto y en realidad podríamos tener el encabezado por sí mismo y el párrafo por sí mismo y ya sabes, debilitar borrar al rapero normal porque todo va a estar en una línea vertical derecha ahí, porque así y entonces tenemos algún margen de bateo por aquí y por aquí. Nosotros como que queríamos ser 64. Entonces, ¿qué? Iba a seguir adelante y duplicar esta clase, ¿de acuerdo? Y en lugar de llamarlo 40 pixel bottom, voy a llamarlo 64 picks de Baden y cambié esto para ser 64. Está bien. Y ahora vamos a usar un nuevo elemento. Bastante tabulador. Entonces si vas al panel de elementos, en realidad puedes ver que tenemos. Y Lemon llamó puñaladas no solo tomaría eso arrastrado y lo pondría dentro del rapero, ¿ verdad? Entonces ahora esto es lo que obtenemos, y yo solo voy a seguir adelante y llamarlo apuñaladas, Ok. Ahora, antes de editar o hacer algo que tenga entender la estructura fuera de esto Ok, entonces cuando abres las pestañas, vemos que tenemos, como, el padre principal, que se llama grifos. Y luego para que tengamos dos Niños. Un menú de pestañas de escolta. Y cuando contacten las puñaladas, ¿dónde está? Un menú completo de pestañas verdes y trampas menú de pestañas de contenido. ¿ Son estos tres botones? ¿ Verdad? Y si miras por aquí, si te abres, vemos que tienes bloque de enlace de tabulación, y tienes una pestaña. Texto. Tienes una pestaña Bloque de enlace, y tienes un texto, y luego tienes un bloque de enlaces, y luego tienes un texto. ¿ Verdad? Entonces este elemento o este padre, es básicamente el contenedor para tres grifos, ¿no? Simplemente tomó tener más top. Entonces en este caso, quisiéramos más veces porque tenemos cuatro gatos cuando una copia de descenso lo basaba. Correcto. Y eso suma un nuevo top. Muy bien, entonces esto es lo que tenemos ahora. Tabuladores. Continente es la zona donde tenemos cuatro Niños. De acuerdo, ahora, estos básicamente definen lo que va Toby dentro de una ficha en particular. Justo en. En nuestro caso, tenemos estas cuatro imágenes. Así son cuatro imágenes es lo que va a estar aquí en esta cabaña. ¿ Verdad? Entonces eso es lo que así es su estructura. Entonces, empecemos por personalizar estas apuñalaciones. ¿ De acuerdo? Ahora, cuando haga clic en la parada, lo que voy a hacer va a seguir adelante y llamar a esta pestaña, ¿de acuerdo? Eso se puede ver en orden. Agrega automáticamente una llamada de clase combo s actual. ¿ Todo bien? Pero si vengo aquí y voy a seguir adelante y sólo llamar a la puñalada, ¿de acuerdo? No va a pasar nada. No hay clase de coma, pero cuando hago clic aquí, hay una clase de coma. El motivo es que cuando miras una página que tiene puñaladas algún top se va a seleccionar automáticamente a la derecha, Eso va a ser en algún momento que se va a seleccionar. No puede haber un ataque que no esté seleccionado, correcto. Entonces esa es la razón por la que estamos flujo automáticamente agrega un estado actual a esto. Ahora, cuando quieres editar esto ahora sabemos obviamente queremos seguir adelante y editar el Stein porque esto se ve completamente diferente a lo que tenemos como predeterminado. Entonces si quieres seguir adelante y personalizar esto, no empieces con la pestaña que tiene este estado actual bien, no lo hagas, porque cualquier cambio que hagas efecto el estado actual derecho, queremos empezar con esto, que no está en el estado actual, y luego queremos seguir adelante y personalizar el estado actual. Vale, Ahora, si vas a estos ajustes cuando también puedes ver muchos ajustes donde puedes decidir cuál es el tableau activo. Obviamente, puedes elegir ninguno también como la pestaña activa. Pero eso realmente no tiene sentido. Por lo que puedes seguir adelante y elegir apuñalado uno o tap to o tap tres o tap para elegir entre . No serás el primero en subir. En mi caso, solo voy a fijar la primera para ser la cuarta parada, ¿ verdad? Bastante sencillo. Está bien, así que sigamos adelante y en realidad renombrar esto ahora, Renombrar no tiene nada que ver con clase. Entonces voy a seguir adelante y llamar a esto Italia. Voy a llamar a esto Australia. Um, esto va a ser India y luego Dios de Brasil, ¿ verdad? Correcto. Ahora voy a poner el elemento de puñalada. También voy a conseguir una clase llamada puñalada siguiente, bien, porque ese es nuestro texto superior, y voy a empezar con el último elemento y asegurarme de que aplicamos las mismas clases a todo. Entonces el padre va a ser la pestaña, y luego el texto va a ser el texto del tap. Esto va a ser tab y luego el Este va a ser dab siguiente. Ah, saudita cuando sería esta ficha. Siguiente, um, esto va a ser dab, y otro va a ser dob siguiente, y va a haber otra vez dab siguiente. Muy bien, Ahora que tan bisecando esto, tenemos la puñalada. Y lo que haces es ver que tenemos una frontera por aquí, acuerdo? Y es morado, y es justo qué? Es muy sencillo. Entonces sigamos adelante. Y con el selector superior, se puede ver que tenemos esta imagen y respaldo y tiene un color de fondo. No necesito nada de eso. Voy a seguir adelante y dijo el AL lejos a cero porque queremos que la capacidad sea cero ¿ verdad? Y como puedes ver, cambia para todas las pestañas excepto la puñalada, porque esto tiene un combo close. Vamos a lidiar con eso más tarde y también con el siguiente dentro por aquí. Pero primero, sigamos adelante y sumamos una frontera. Así que adelante y cambia el color de estos dos morados. Entonces conseguimos una linda frontera. Eso es bueno. Y ahora tenemos la estructura dentro, que es de 6 a 18 picks es así que voy a seguir adelante y cambiar el tamaño de fuente para ser 18 correcciones. Y dije esto demasiado audaz. Y también el color va a ser blanco. De acuerdo, Ahora, también tenemos algo de distancia distancia entre arriba y abajo, que es Dr Pixels en la parte superior y 16 picks está a la izquierda y a la derecha. Incluso un seleccionar la pestaña aquí en el relleno. Pondré esto a 12 y twas y ah,ya sabes, ya sabes, la izquierda y a la derecha es 16 y 16 una vez dijo esto a 16 sobre 60. Está bien. Bastante cool. También tenemos una distancia por aquí entre dos pestañas, que es, como 24 picks es así que también voy a seleccionar la pestaña del lado derecho. Yo le voy a dar una clase. Voy a darle un margen de 24 píxeles, así que ese tipo de empuja las cosas. Está bien, ahora, eso se ve bastante bien. Ahora queremos seleccionar este material, que tiene la clase combo llamada actual, y ahora queremos personalizarlo para que vea cómo se va a ver cuando se selecciona. Cuando está en estado activo o cortan en estado. Empezaremos por seguir adelante y cambiar el color de fondo de esto a Papa. Perdón, no el texto. Cambio urbano, el color de fondo para ser morado, correcto, Y eso es más o menos. Entonces ahora si vamos y previsualizamos, en realidad puedes hacer click en él de ella, y puedes ver que ya sabes, tienen este efecto y te miraba. Luce perfecta. Ahora, si quieres, también puedes seguir adelante y llevar esto a un siguiente nivel. Entonces digamos que tenemos un grifo. Adelante y sumamos un estado portuario justo en el tener un estado. Voy a seguir adelante y tenemos este color. Voy a elegir morado, y ya estoy es la capacidad de gustar 20%. Entonces simplemente obtenemos, como, un ligero efecto flotante. ¿ De acuerdo? En eso, voy a volver al estado monja, y obviamente queremos transición. Entonces voy a ir a hacer las transiciones ascendentes y vamos a elegir de nuevo alrededor del color, y vamos a fijar la duración a 3 50 milisegundos y la flexibilización va a ser cancha de caballete. Está bien, así que ahora echemos un vistazo rápidamente. Entonces ahora puedes ver que cuando lo tienes en las pestañas, obtienes este bonito efecto, y luego haces clic a tu derecha, Puedes ver que tipo de cambios, y se ve bastante bien. Sí. De acuerdo, uh, rápido quiero cambios. Ortografía de fuente de este e l I Todo en este momento el menú de pestañas. Tenemos, como, espaciando 40 píxeles, yendo a seleccionar el menú de pestañas. ¿ Verdad? Vamos a llamar a este menú de pestañas, ¿de acuerdo? Y vamos a seguir adelante y romper en el margen inferior de 40 píxeles, para que eso empuje al personal. Está bien, vamos a seguir adelante y llamar a este contenido de pestaña, porque este va a ser nuestro país de tap. Y lo que vamos a hacer va a seguir adelante y crear un nuevo “did block”, verdad? Y a este punto muerto, vamos a llamar a este tabulador grilla. De acuerdo, entonces lo que sí sabemos es que voy a seguir adelante y darle un bombo a esto, ¿ verdad? Queremos que esta sea una altura de 4 20 píxeles. ¿ Quieres seguir adelante a los dos altos por 20 píxeles? Se ve bien. Y no voy a hacer clic en esto para convertirlo en una cuadrícula. Está bien. Y vamos a seguir adelante y sumar 232 columnas y borrar maravilla. Oh, está bien, así que va a verse así. Y además, el espaciado va a ser de 24 entre los dos. Entonces el hueco de columna va a ser de 24 salidas, y eso se ve bastante bien. Ahora, todo lo que tenemos que hacer es ir a las imágenes, y tú quieres agarrar nuestras imágenes para que podamos empezar con las que han marcado el viaje. Entonces va a haber viajado uno, arrastrar eso y soltar esa perspicacia. Y tú lo dijiste a h I D p. Yo bien, y seleccionaré el siguiente, que va a estar por aquí, que va a ser viajado. Do dicho esto do h i d p i. Y entonces se va a recorrer el siguiente. Tres. De acuerdo, excepto H i v p i o.Así que obtuvimos la imagen equivocada. Voy a seguir adelante y reemplazar esto por el correcto, que es, um, um, viajó tres, que está por aquí. Lo dijo H i d b I. Y la siguiente va a ser imagen de viaje número cuatro. Y Dios dijo esto a h i d. Estar bien. Ahora el problema es que ya sabes, no está ocupando toda la altura. Y además, el hecho de que decida es diferente. Entonces, ¿cómo arreglamos esto? Muy sencillo. Para seguir adelante y seleccionar la imagen. Voy a darle una clase y llamar a esta imagen de puñalada. Vale, Ahora, lo que voy a hacer es que ya hemos definido la altura, que es de 4 20 píxeles. Entonces aquí en el ajuste, lo voy a cambiar de Phil. Y yo dije eso para cubrir. ¿ De acuerdo? Y también dijo que la altura sea del 100% para que eso ocupe toda la altura. Si controlo el eso, se puede ver que es escalado mientras se mantiene la relación de aspecto. Entonces eso es realmente bueno. Por lo que queríamos mantener el tema de aspecto, y para la imagen será Vela es que podemos llamar lo mismo. Entonces llamemos a esta imagen de tabulador Para que destrezas y mantenga la relación de aspecto. Llama a esta imagen de puñalada. Ahí vamos y construye también y llamamos a esta ficha imagen derecha. Tienen una bastante buena Ahora sigamos adelante y echemos un vistazo y veamos cómo esto y esto se ve bastante bien. Y si toco en Australia. Se puede ver que se derrumba porque no hay contenido en el top de Australia y presidente indio . Ocurre cosa. Entonces, ¿qué? Tenemos a Australia por aquí, y sigamos adelante y veamos esto. Cómo se ve en una pantalla de 1920 se ve bastante bien. Se ve bonito e interesante. OK, ahora se puede ver que en una pantalla de 1920, se puede ver que la altura se apaga, ya sabes, se vuelve casi como una relación cuadrada. Y si bien eso es bueno, Pero suponiendo que digamos que siempre queríamos ser, ya sabes, como esta altura vertical. Lo que podemos hacer es que en realidad podemos seleccionar la pestaña. Genial. Y aquí definimos la altura fuera para 20 píxeles. Ahora queremos que el alto cambie en base al puerto de vista con él. Muy bien, tablero de vista. No estamos vista altura del puerto. De acuerdo, entonces voy a ver 30 v w Vale, ahora lo que va a hacer es que se va de pie. Definir la altura en función del puerto de vista con, Así que si el peso del puerto de vista aumenta, la altura también aumenta. Probablemente voy a decir esto a 35 o tal vez a 30. 30 a, supongo que creo que fue un buen número. Y ahora si realmente vas adelante y mira esto, vamos a 14 40. Se puede ver que sigue siendo vertical, ya sabes, como la tasa deportiva de ti, porque la altura depende de la vista puerto Worth. De acuerdo, si vengo aquí en vista previa, podemos ver eso. Y si voy a 1920 ya puedes ver que el palo de altura es la altura se basa en la palabra fuera de la pantalla, y eso es exactamente lo que quieres. Y si se va adelante y le dijo esto a 38 40 se puede ver que tenemos esto, que es enorme. Entonces no queremos este derecho. No queremos que pase el tipo de cosa que el dedo del pie. Entonces lo que podemos hacer es puntera para decir, OK, no quiero que te vayas tan grande. Quiero que conozcas a Max a un valor de píxel en particular. Así que digamos que digamos 500 correcciones son Digamos ser, digamos 600 correcciones son Digamos que digamos 6 40 picks es o yo 600 es un buen número, así que vamos a decir, Sigue aumentando la altura, Sigue aumentando la altura, pero detente cuando llegue a los 600 pixeles encendidos, lo mejor considera a 620 0 R. 630. De acuerdo, entonces esto es con lo que como que queremos ir. Voy a seguir adelante y le dije esto a 14. 40 de nuevo. Entonces esto es lo que tenemos, y esto se ve bastante bien. Ahora, lo que actuamos él puede hacer es si vengo aquí a las imágenes, empecé al navegador, y vamos al contenido de las pestañas para que puedas ver eso en el contenido de las pestañas. Tenemos un tabulador. Bien. Y dentro de eso tenemos. Estas cuatro imágenes que podemos hacer es que podríamos simplemente copiar esto y debilitar basado esto en todas las demás también. Y podemos seguir adelante y cambiar las imágenes más adelante. Y además, voy a seguir adelante y nombrar rápidamente estos y llamar a este contenido dab, contenido laboral y conducta laboral. Correcto. Y se va a revisar esto. Entonces si él ve esto, si solo haces clic en las diferentes pestañas, puedes ver que las imágenes tipo de cambio. Y ahora mismo todas las imágenes son iguales. Entonces va a ser lo mismo, para que puedas seguir adelante y cambiarlo y se va a quedar realmente bien. Está bien, así que hay algo que se ve realmente genial y realmente impresionante. Por lo que ahora en el siguiente video, vamos a seguir adelante y hacer que esto responda y mostrar y ver cómo se ve responsivo esto. Entonces como ustedes chicos en el siguiente video. 32. Cómo hacer la sección de pestas: Cierto, chicos. Entonces en el video anterior, donde seguí adelante e hice esta sección de tabuladores y en esto no seguimos adelante y hacemos que esto respondiera para en el punto de descanso. Entonces hagámoslo. Vamos por todo el punto de ruptura de la tableta en def. Tienes local aquí. Es algo que depende de cómo quieras exhibir es ahora. Ya que estas son imágenes nos gustaría tener Ah, buena cantidad fuera de espacio para esto. Entonces, obviamente, ¿va a empezar usando el tamaño de fuente fuera de este estudio? El en una despedida de esto a 80 80 ya sabes, 40 y 40. Um, cualquier cosa. Lo que me gustaría hacer es, ya que esto es una tableta, puedo querer cambiar la cuadrícula. Entonces para convertir esto en un grado de dos por dos columnas, Así que para comprar grados turo tan amable, configurarlo así en DA Ya sabes, podríamos tal vez incluso reducir aumentar la brecha de regalo vial a 24 hecho. Y ahora este tipo de sí se ve raro. Pero piense es que ya que habíamos definido el estudio de altura, veamos la cuadrícula. El alto fuera este para ser 32 VW en una máxima it off 6 30 Como que queremos cambiar esto, correcto, porque ahora la tableta va a ser más pequeña. No va a ser bastante grande, y así podemos definir un valor fijo. Entonces voy a seguir adelante y quitar el max mojado. Yo sólo voy a decir ninguna. ¿ De acuerdo? Y por la altura, lo voy a establecer en términos de píxeles. Así que probablemente algo así como 3 60 arreglos. Uh, tal vez supongo que podríamos chocar esto hasta 6 40 picks es aunque quisieras ser un poco más, podríamos seguir adelante y saltar esto hasta, ya sabes, 808 100 algo. Esto es algo que ustedes tienen que decidir. 8 40 Derecha. Por lo que esto se ve bastante bien y lo suficientemente decente. Podríamos ir del dedo del pie el punto de ruptura del paisaje, y eso será Puede hacer es usar el margen superior fuera de esto a 64. Acolchado inferior a 64. 20 a la izquierda y 20 a la derecha en. Y esto se ve bastante bien. Ahora, una cosa que podemos hacer por aquí algo interesante es que en realidad podemos quitar el bateo que teníamos para cada uno de estos elementos, ¿ verdad? Para que podamos configurar el bateo fuera de esto a auto. Y ahora lo que podemos hacer es ya que este es un menú de pestañas, podemos cambiar esto a un flex box, acuerdo? Y una vez que lo cambie o flex box, en realidad puedo decir justificar el espacio entre para que los elementos desaparezcan el espacio estos fuera. Ahora, la razón ahora, la razón por la que no es Brasil no está tocando el borde es por el hecho de que lo pusimos a auto. Queremos poner ese dedo cero, y así se va a ver. Entonces ahora tenemos estas pestañas que están ocupando igual espacio, y estas imágenes también se ven, Pero creo que esto se ve un poco raro porque no es quiero decir, se ajusta demasiado espaciado. Entonces creo que cuando un control de prensa Z sólo para especie de, ya sabes, traerlo de vuelta a su estado original, De acuerdo, Similar. Al igual que esto. Creo que esto es lo que esto se veía bastante bien. Entonces solo lo voy a dejar como esto. Um sí tenemos un pequeño tema donde este tipo de pasa a la siguiente línea. Entonces lo que podríamos hacer es probablemente reducir el con. O sea, el relleno del 24 al 20 tal vez incluso 16 lo son. Vamos a probarlo. Supongo que conseguimos radios esto abajo a cero. ¿ Eso funciona? Está bien, Así que funciona con ceros de tal vez, digamos al máximo, supongo, um o seis. De acuerdo, nos pusimos a lleno. Sí, más o menos así. Y, um, creo que sería una buena opción es seleccionar el menú de pestañas y en realidad dijo eso en una cuadrícula. Y luego tenemos que comprar para colaborar, y esto es lo que obtenemos. Y creo que esta es una forma mucho mejor de representar eso. Y lo que podríamos hacer es esta pestaña podríamos decir flex on, decimos un centro de línea y justificamos medio para que el texto esté en el centro. Creo que esta es una representación mucho mejor. Y si vas al retrato móvil, conseguimos esto. Y creo que esto también se ve bastante bien a 40 es demasiado pequeño. Entonces creo que podemos quedarnos con 3 60 que es el predeterminado. Y estamos por el grado superior es porque esto está demasiado abarrotado. Voy a seguir adelante y quitar estas dos columnas y convertirla en una sola columna, y deberían quedar bastante bien. Y podemos especie off bache arriba la altura de cada uno fuera de los elementos de manera significativa y en lugar , ya sabes, agregar una altura a la cuadrícula de tabuladores. Y aquí también, creo que agregamos una altura al grado de tabulador. Lo que voy a hacer es que voy a quitar la altura para la tablet on dicho que auto y vamos a hacer es que voy a venir a cada uno de los elementos. Esa es la imagen de tabulador y dale una altura a esa. Ahora, lo habíamos dado al 100% pero al 100% de descuento. ¿ Qué? Ahora mismo es 100% de Zito, ¿verdad? Porque no tenemos ah altura dada al tabulador. Genial. Entonces podemos decir es podemos decir 840 nos recoge ¿verdad? Y tal vez eso sea demasiado. Digamos que 6 40 picks es correcto. O tal vez eso sea cierto, Pero digamos 6 30 píxeles, ¿ verdad? Creo que este es un buen número, y ahora le estamos dando una altura a la ficha individual y no a la grande. Y volvamos a la vista móvil, y creo que esto también se ve bastante bien. Y creo que se ve realmente bonito. Entonces eso es más o menos sobre cómo hacer que esto sea sensible. Creo que una cosa genial que podríamos hacer es quizá por el paisaje. Podríamos despejar el hueco para que, ya sabes, se toquen. Está bien. Y tal vez esta es una dirección genial que podemos tomar. No realmente seguro, pero creo que voy a seguir adelante y mantenerlos como de costumbre como es. Y sí, esto se ve bastante bien. Entonces eso es todo para este video y un PSA. ¿ Ustedes chicos en el siguiente video? 33. Construir la sección de formularios: Muy bien, chicos. Por lo que en este video seguiremos adelante y crearemos esta sección de formulario. Básicamente, lo que pasa es que las personas que visitan tu sitio web en realidad pueden ingresar el nombre, dirección de correo electrónico y un mensaje y pueden enviarte un formulario. Y cuando esto terminó, recibes un correo electrónico y obtienes información al respecto. Es como que se almacena de nuevo en la plata de flujo web, y te voy a mostrar dónde se va a almacenar y cómo puedes configurarlo y parar ahora. Una vez más cosa a notar aquí, es que el tamaño fuera de este el contenedor es en realidad más pequeño que el que lo hemos usado similar al que usamos en regate, correcto, correcto, Así que el otro con es 1076 Ese es el contenedor con el que es diferente a todos los demás que hemos estado creando hasta ahora, porque todos estos tienen un poco de 1920 max, pero esto es limitado 21076 Así que la forma también va a estar en ese formato, ¿no? Entonces sigamos adelante y la sangre fluye, ¿verdad? Entonces antes que nada, sigamos adelante y dijimos esto a 14 40. Y voy a seleccionar el cuerpo y presionar control E y escribir en sección y va a ser la sección de formularios. Está bien. Voy a tener un relleno apagado 1 20 en la parte superior, 1 20 en la parte inferior. Ahora las palmaditas de izquierda y derecha. OK, sigamos adelante y agreguemos eso, Pero realmente no importaría. En este caso, digamos 72. Está bien. Y lo que podemos hacer es que estoy en una E. controlada por la prensa Vamos a conseguir un punto muerto, que va a ser un rapero. Y voy a decir rapero V dos porque el V dos tiene un máximo con un 1076 porque eso es lo que queremos. De acuerdo, entonces ahora, básicamente, es muy sencillo. Todo lo que tienes que hacer es crear una gran columna de dos. Genial. Entonces va a haber la columna uno y va a ser columna a, y tenemos distancia de 24 píxeles de la columna. Sogard Spacing off 24 picks está entre estos dos, así que podemos seguir adelante y usar eso también. ¿ Verdad? Entonces, empecemos por crear. Entonces lo que podemos hacer es en realidad en un buen y voy a llamar a esto cuadrícula formularios, ¿de acuerdo? y voy a decir,ya sabes, ya sabes, convertir esto en una cuadrícula y vamos a quitar dos filas porque sólo necesitamos maravillarnos y tendremos dos columnas. Muy bien, Bastante bien. Y vamos a seguir adelante y voy a copiar este bloque normal. O podríamos simplemente copiar este rubro. Copia eso y nuestro debilita léxico aquí y selecciona al rapero. Y en curso, En primer lugar, mi bloque creativo. Correcto, Porque necesitamos que este sea el primer bloque izquierdo y queremos llamar a este crapper normal e impresionar pasta de veto de control. Entonces tienen eso, y voy a copiar este texto de párrafo, y vamos a seguir adelante y colocar eso también. Entonces así es como se ve. Está bien, ahora tenemos ah, muchas clases de combate. Simplemente voy a borrar todo esto. No necesitamos todo eso. Sólo necesitamos el que diga como uva porque es probable que el color de la fuente. Y copiar este texto, y voy a seguir adelante y basarlo, y voy a copiar esto y uno seguir adelante y basar esto también. ¿ Verdad? Entonces lo siguiente es asegurarnos de que sabemos es que la cuadrícula necesita ser 24 picks es blanco. Alguien dice columnas 24 columna Gap pecan hecho. Y aquí vamos a seguir adelante y agregar en un nuevo elemento college, las granjas, prensa de lectura, país e investigación para formas. Entonces tenemos algo de bloque Nicholas Reforma. Voy a seguir adelante y sólo arrastrar eso adentro, y ahora así es como se va a ver. Vale, entonces lo primero es que sigamos adelante y,ya sabes, ya sabes, solo llama a este bloque de granja, ¿de acuerdo? Y podemos seguir adelante y empezar a personalizar esto de inmediato. Entonces ese tipo de con el nombre y, uh, si miras la configuración un párrafo de 16 píxeles, correcto. Entonces voy a seleccionar el nombre y voy a decir 16 picks de párrafo. Eso es lo que se ha estado usando Vamos a hacer lo mismo para el correo electrónico y el mensaje, así que voy a decir dirección de correo electrónico 16 picks de párrafo. Y la cosa aquí es que el color es uva clara, pero queremos que esto sea blanco. Vamos a seguir adelante y añadir una clase combo y nos llamó blancos. Um, así que queríamos que esto fuera blanco. Adelante y di esto, Dwight, y adelante. Y dije esto para esperar. ¿ Verdad? Excelente. Ahora hay un poco de distancia, que es alrededor de ocho píxeles. Entonces voy a ir a seleccionar el campo de texto. Sólo voy a llamar a cada uno de estos campos de texto, y voy a tener un margen superior de ocho píxeles. Entonces tenemos algo de espaciado va a hacer lo mismo aquí. Llamamos a este campo de texto, ¿de acuerdo? Y este campo de texto tiene un color diferente off l uno. Entonces voy a seleccionar esto y añadir el color que queremos, que es L uno. Está bien. Y eso en última instancia te cambia. Esto también tiene frontera. Eso se puede ver aquí mismo. No hay nada ahí así que a veces como un bicho. Entonces todo lo que tienes que hacer es seleccionar el campo de texto y agregar uno y luego simplemente eliminarlo así Y, ya sabes, podemos establecer el ancho de esto para que sea cero, Así que solo quita eso y se ve bastante bien. Ahora tenemos té, que es correo electrónico de nombre, y tenemos mensaje y la distancia entre el correo electrónico y los mensajes son de 40 píxeles. Voy a vender el campo de texto, y voy a añadir un margen inferior de 40 picks es correcto. Así va a ser y voy a seleccionar el párrafo ah. Voy a copiar eso y pegarlo. Y cuando mueva esto hacia abajo y voy a seleccionar este también, copiarlo y pegarlo y vamos a mover éste hacia arriba, ¿de acuerdo? Y va a haber un mensaje, ¿de acuerdo? Y estamos texto abajo aquí ahora con Gordon. Personaliza esto y agrega las propiedades. Entonces tenemos un campo de texto por aquí, y cuando vengo aquí en la configuración, tenemos algunas opciones. Entonces, en primer lugar, ¿cuál es el nombre que íbamos a dejar esto? Vamos a llamar a esto nombre de persona, Ok. Y si desea agregar un marcador de posición filetes, puede agregar eso para que pueda ver cosas como introducir su nombre para que pueda ser un texto de marcador de posición. Y qué tipo de texto se siente es Es una simple contraseña de correo electrónico para el número número número. Podríamos decir que es un bazo y tú quieres decidir sobre su Este es un campo de texto obligatorio y puedes decir que sí. Queremos que este sea un experto requerido. Bastante simple. Vayamos al siguiente. Ah, aquí podemos ver entrar correo electrónico de patio y podemos seguir adelante y visiblemente volver a requerir. Podemos ver el tipo de texto para ser correo electrónico. Va a haber un mensaje, y este va a ser mensaje. Y, uh, lo que vamos a hacer es ir adelante y cambiar esto a un texto plano porque esto va a ser, como, como, texto enorme y sin formato donde la gente puede escribir cosas y en realidad podemos seguir adelante y hacer esto bastante grande, que está en 100 píxeles. Entonces voy a añadir una clase de comas y decir estos 100 pixeles por si acaso, y luego iremos dentro de la altura de estos 200 pixeles, ¿ verdad? Ah, eso es más o menos. Ahora tenemos este botón, que es bastante grande y grande, Así que tenemos el botón enviar y voy a añadir la clase de botón. Creo que lo llamamos CD, y cuando hago eso, esto es lo que obtenemos. Pero lo que voy a hacer es ir adelante y crear una nueva clase y llamar a este botón de formulario porque esto es bastante diferente a todos los demás botones que están muertos. Eso el 1er 1 me voy dijo el con off esto al 100%. Entonces toma todo el ingenio, entonces tenemos el texto, que es de 18 píxeles. Entonces voy a seleccionar el texto y vamos a ir a poner esto en 18 picks es vamos a poner el peso frontal hervido. Y también vamos a decir, Empecemos para que podamos dar click en esto. Y al hacer clic en el botón, realidad tienes que en editar informacional aquí. Entonces vamos a decir, Empecemos Y cuando cuando te plus en el botón puedes tener algún estado de lording y debilitarte. Entonces en este momento, dice, Por favor, espere, podemos esta cosa como presentar todo bien. Y los tres puntos que deberían funcionar. Y además tenemos algo de relleno superior e inferior de 24 para que podamos seleccionar la finca. Burton y Weaken dicen, 24 en la parte superior y 24 en la inferior. Correcto. Y además, el color, por supuesto, tiene que cambiarse a nuestro Este ahora mismo se ve bastante bien para este caso. Lo que voy a hacer es que sólo voy a quitar el texto de marcador de posición porque el diseño no tiene ninguno, así que solo quiero seguir adelante y quitar esto por ahora. Y eso es más o menos como se ve. Y si sigues adelante y tocas el botón de vista previa y haces clic en él, puedes ver que dice, por favor rellena los campos y va a seguir adelante e ingresa aleatoriamente algún texto. Ahora, se puede ver eso cuando yo aleatoriamente hasta que se pueda ver que hay algún texto que está por aquí . Entonces va a seguir adelante y decir Chilton, KBS Y ahora como que formamos editar esta tecnología. Entonces lo que quieres hacer es escribir el texto, luego quieres volver al flujo Web. Entonces lo que vamos a hacer es ir adelante y simplemente cambiar el color de este do blanco. Y este es el color de la tipografía. Y ahora eso debería funcionar. Entonces vamos a seguir adelante y sólo decir Niños, KBS y funciona. Eso es que en el correo electrónico, me d bien y no del todo seguro qué estado y vamos a añadir en algún mensaje, sólo voy a saludar ahora si ven aquí, el problema aquí es que este texto siente su tipo de partir de aquí y lo que que queremos hacer es vamos a seguir adelante y usar un nuevo componente el cual es área de texto enrollado, ¿ verdad? Vamos a tomar eso y vamos a traer eso dentro por aquí. Y creo que esta es una representación mucho mejor. Y aquí podemos ver en un texto de marcador de posición y podemos decir que requirió. Y podemos eliminar este campo de texto. Y para esto solo voy a decir, Ah, Ah, campo de texto y darle a esto una altura de 100 pixeles clase dicamba ritual que agregamos. Y esto debería estar bien. Y el texto de marcador de posición uno va adelante y el líder que no necesitamos ningún texto de marcador de posición tan rápido. Adelante y agreguemos algo de información. Sólo voy a decir que incluso voy a decir abc en gmail dot com ¿verdad? Y quiero saludar es el mensaje. Y cuando yo siga adelante y toque eso empezar, usted considera que dice probar el formulario en su lado publicado. Entonces lo hice. Olvidé mencionar que Sigamos adelante y publiquemos esto a Dominios Seleccionados y su avance y previsualice este derecho. Vayamos rápido por el tema. Va a decir algunas cosas al azar ABC en la comida punto com on y podemos decir hola, ¿ verdad? Entonces ahora sigamos adelante y empecemos a contener dice enviando. Y dice, gracias. Tu envío ha recibido Bean. Ahora mismo hay otra cosa. Un par de cosas que podemos hacer es ir a seleccionar el bloque de formulario y vamos a dar click en. Entonces cuando haces clic en el icono de engranaje, obtenemos tres estados, nos pusimos normales. Obtenemos éxito y obtenemos mejor click en el éxito lo y podemos especie de personalizar cómo se ve todo este asunto. Entonces, por ejemplo, podemos agregar una nueva clase y llamar a esto éxito y lo que me gustaría hacer con ojos que tipo de quiero agregar un color verde al fondo. Por lo que se ve así y hasta el texto puedo decir texto de éxito. Y podríamos seguir adelante y hacer esto, ya sabes, como, ya sabes, como 18 arreglos y ya sabes, audaz y que puedes decir lo que quieras e incluso cambiar el color a esto como algo como esto debería funcionar ahora. También podemos seguir adelante e ir a la interestatal y la interestatal se ve algo así . Por lo que aquí de nuevo puedes seguir adelante y agregar la clase personalizada de la manera que quieras. A lo mejor podríamos seguir adelante y hacer eso. Seleccionemos el mensaje del editor. Y digamos que somos como una especie de color rojo oscuro. Muy bien, algo así. Y podemos establecer el texto y cambiar el color de esto a blanco. Entonces algo como esto encendido ahora puedes volver atrás y volver al estado normal. Y así es más o menos como se ve. Para que más o menos para este video en el siguiente video, vamos a seguir adelante y hacer de esto un responsive. Entonces son ustedes chicos en el siguiente video. 34. Cómo hacer que la sección de formularios sea responsivo: derecho. Entonces en este video, estamos para seguir adelante y hacer que esta forma responsiva, seguramente súper simple. Entonces, empecemos. Entonces ve a la vista de tableta, y eso es lo que tenemos. Y, sí, así que empieza. Obviamente, al reducir el tamaño de aquí. Entonces voy a poner esto en 60 u 80 en el top 80 en la parte inferior, 40 en la izquierda y 40 en la derecha. Creo que esto debería estar bien para la vista de tableta. Creo que esto es lo más pequeño, Y a medida que aumentamos, creo que deberían estar bastante bien, supongo, en mi opinión. Entonces, entremos al paisaje. Y aquí es donde podemos. Yo quiero cambiar cosas por ahí. El primero de todo, vamos a estar listos es esto a 64 en el top 64 en el inferior 20 a la izquierda y girando a la derecha. Ahora, personalmente quiero hacer de esto una sola columna. Más grande. Voy a seguir adelante y quitar la columna para que tengamos todo en una sola gota. ¿ Vamos a tener un hueco fuera? 48 picks es para la rosa para que ya lo sepas, tenemos alguna buena distancia y creo que esto ya se ve bastante genial. Siempre mira un retrato móvil. Y, um, creo que esto se ve genial. Nada demasiado de qué preocuparse. Eso es más o menos para este video on en el próximo futuro. Cuando sigas adelante y diseñas, construyes el pie, así que sois vosotros chicos en el siguiente video. 35. Construir el pie del pie: Correcto, chicos. Entonces en este video, vamos a seguir adelante y construir el pie de página. Ahora bien, este no es el final del curso, porque vas a crear muchas interacciones divertidas y hacer que este sitio web se sienta muy animado. Entonces esta es la última parte que vamos a ir donde vamos a estar construyendo cosas y probablemente en los próximos realmente va a seguir adelante y agregar interacciones y animaciones y hacer que el sitio web se vea mucho más divertido. Entonces, ¿cómo estructuramos esto? Empecemos desde lo básico. Obviamente, vamos a tener una sección, y en esta sección vamos a tener un pie de página Y va a haber un rapero que de nuevo va a ser nuestro rapero predeterminado. Y lo otro que no aquí es que si se encienden bien las calificaciones, esto se ha estructurado de cierta manera. ¿ Verdad? Entonces tenemos 123456789 10 11 12 Tenemos 12 columnas ahora. Cinco de estas columnas están ocupando espacio para, ya sabes, los enlaces de navegación y el resto es por el nombre Y ya sabes, los iconos y algunos textiles aquí en este momento, podríamos seguir adelante y construir esta columna 12. Genial. Está bien, lo cual es totalmente posible. O lo que podemos hacer es que se pueden tener dos columnas pero cambiar la relación si es correcto así que tenemos 12 y cinco por 12 es alrededor del 40% ¿verdad? Es 41.6, pero es como un 40%. Por lo que podemos decir que esto puede tomar hasta 46 40% y esta lata kit puede tomar hasta 60%. Por lo que hay dos formas de hacer esto. O usar 12 columnas o usar dos columnas y darle una relación diferente, ¿ verdad? Entonces sigamos adelante y construyamos nuestro flujo de trabajo en. Entonces voy a ir a un flotador Web y volvamos. Entonces digamos esto a 14. 41 todo bien? Y vamos a seleccionar exigente Osama presionando, creando una nueva sección llamada esta sección, y voy a seguir adelante y llamar a esto fota. Vale, Ahora, lo otro a tener en cuenta es que he ido adelante y dado esto una altura fija o 422 picks está bien, así que voy a ir y conseguir un apretado fijo fuera 422 picks está bien. Y también queremos un poco de relleno en la parte superior e inferior. Por lo que es 80 en la parte superior. El mismo. No es 20 Es 80 en la parte superior. Es 80 en la parte inferior otra vez. 72 a la izquierda, 72 a la derecha en. Además, el color es diferente. El color de fondo es, um ya sabes esto fuera de un, uh, nivel uno color púrpura color que hemos estado usando. Y ahora vamos a seguir adelante y crear un rapero para los condones internos. Por lo que se crea un bloque. Si alguien llama a este rapero, va a haber nuestro rapero regular de anulación, ¿ verdad? Se ve fantástico. Y ahora vamos a seguir adelante y convertir esto en una grilla, ¿ verdad? Alguien crea una nueva clase y llama a esta fotografía. Está bien, por lo que en el pie, Acordado. Voy a seguir adelante y convertir esto en una zanahoria, y obviamente solo queremos Wonder off Dos columnas y maravilla Y el espaciado de columnas va a ser de 24. Ahora, ¿oyes eso? Tenemos algo llamado fr, que básicamente es fracción. Lo que puedo hacer es que en realidad puedo cambiar esto de 0.1 fr y dijo esto a 0.4 esfuerzo. Muy bien, Y cuando digo punto cero para eso significa que este es un f r y 0.4. Pero yo como que quiero que esto sea 0.6 fr para que esto haya un punto para un lejano al final, F r significa fracción, y al final, queremos que todo sea uno. Por lo que 0.6 más 0.4 es uno. Entonces básicamente, lo estamos dividiendo en la proporción 40 60. ¿ Todo bien? Podría hacerlo. Ahora, sigamos adelante y creemos un bloque, acuerdo? Y sólo vamos a llamar a esto normal de Brock Normal rapero normal. Y aquí vamos a empezar trayendo el logo que teníamos. Entonces voy a agarrar el logo justo sobre este SVG local. Ahora queremos que este logotipo esté dentro de un bloque de enlaces, porque cuando hago clic en esto, como que quiero navegar hasta la parte superior fuera del terreno de juego. Entonces voy a presionar el control, comer y a crear una la cuadra. Perdón. Bloque de enlace y pondré esta imagen dentro del bloque de enlace. ¿ De acuerdo? Y quiero seleccionar el bloque de enlaces, y voy a llamar a este logo fotográfico. ¿ De acuerdo? Ahora, veamos el tamaño de esto en la fig MMA, tiene alrededor de 40 píxeles de alto. Entonces voy a establecer, um, um, la altura de la imagen hacer 40 picks está bien. Eso se ve bastante bien. También tenemos a estos iconos en la parte inferior, así que voy a crear un nuevo bloque de, acuerdo? Y va a haber por el va a llamar normal, Rapid. Y esto va a ser por los iconos. Entonces sigamos adelante y agarramos los iconos. Entonces tenemos que llegar a Witter. Tenemos LinkedIn y tenemos un regate. Adelante y conseguir regate. Ahí vas. Ahora, sigamos adelante. Y sólo rápidamente, voy a llamar a esto iconos sociales. Ahora, hay un espaciado por aquí, que es alrededor están comiendo, que está en 16 fotos. Entonces voy a ir y añadir un margen de 16 píxeles, y yo estaba en la misma clase a los otros dos también para llamar a esto iconos sociales y seguir adelante y seleccionar no se llama iconos sociales. Muy bien, ahora, por aquí, también tenemos algo de espaciado de la parte inferior, que está en 32 píxeles del logo. Entonces voy a seleccionar el bloque de enlaces, que es el logotipo de la foto y en un margen inferior fuera de los píxeles de Reto. ¿ Verdad? Y eso se ve bastante bien. Muy bien, ahora vamos a agregar este texto también, así que voy a crear por empezar creando un nuevo bloque de texto. Entonces voy a crear un nuevo bloque de texto, y aquí sólo vamos a copiar esta información, y luego vamos a seguir adelante y basarla y escuchar lo que voy a hacer es esto de párrafos de 16 píxeles . Voy a decir párrafo 16 píxeles, y queremos que sea de color, que sea como uva, y eso se parece más o menos a eso. Está bien. Otra cosa es que pudimos ver que estas dos secciones se ven obligadas a la parte superior, y estas dos son, afortunadamente abajo. Por lo que estaremos usando la propiedad flex para especie de espaciado uniformemente mañana. Por lo que obviamente quieren seleccionar el elemento padre, que es el rapero normal. Y ahora quiero darle una clase flex. Entonces si digo flex, se podría ver que tenemos flex vertical top izquierdo. Eso es lo único que hemos hecho. Pero vamos a usar otro. Vamos a usar uno diferente. Alguien llamó genial a este flex vertical. Y voy a decir izquierda y voy a decir espacio entre, ¿ verdad? ¿ Qué significa todo esto? Entonces voy a empezar por seguir adelante y cambiar esto a un flex box, ¿de acuerdo? Y queremos que la dirección sea vertical, ¿de acuerdo? Y obviamente queremos que la alineación hacia la izquierda sobre la justificación va a ser espacio entre, lo que significa que va al espacio. Cada uno de los elementos, ya sabes, hacia el borde de la piel va a empujarlo hasta el borde de la pantalla. Ahora, la cosa es que no queremos que estos iconos también sean empujados. Entonces nosotros tipo de club estos dos. Entonces otro club, estos dos, voy a crear un nuevo bloque Dev, acuerdo? Y va a haber unrapero simple y normal, rapero simple y normal, y vamos a tomar Veamos realmente la navegación para entender mejor esto. Entonces tienes un pie arriba, que es una sección, y luego tenemos un rapero normal, y luego tenemos dentro que tenemos al rapero izquierdo, que es el rapero normal, y que tiene el espacio entre propiedad flex y abajo contra. Por lo que tenemos el logo de la foto. Ahora, ya que esta siesta rapero normal tiene un flex entre propiedad, se va a flexionar lo inmediato Niños e inmediatos Niños que queremos es la comida ¿Un logo ? Muy bien, en las redes sociales iconos en uno y párrafo para ser el segundo hijo. Entonces tenemos normalidad. El rapero. El inmediatamente a Niños es el rápido normal por aquí. El cual tiene estos dos Todo bien ahí. Se puede ver uno en el otro Uno es éste. Y ahora lo que está pasando es que desde estos otros dos medios Niños, está empujando a estos dos Niños inmediatos hacia el borde del contenedor. ¿ Verdad? Esto es más o menos, uh, lo que queremos. Genial. Entonces se hace otro esto. También queremos asegurarnos de que se puedan hacer clic en estos iconos. Entonces lo que tenemos que hacer de nuevo es añadir un bloque de enlaces, acuerdo? Y vamos a poner estos iconos dentro del bloque de enlaces. ¿ Verdad? Um, y vamos a crear un nuevo bloque de enlaces. Pongamos este ícono dentro del bloque de enlaces y tenemos necesitamos otro bloque de enlace. Y ponemos esta, uh, uh, Linda Nikon dentro, y podemos seleccionar cada uno de estos bloques de enlaces y dar una clase, podemos decir bloque de enlace social. Y para ello podemos decir esfuerzos de bloqueo de vínculo social. Además, podemos decir bloque de enlace social solo para asegurarnos de que tenemos un nombre para todo. Está bien, Bastante bien. Entonces ahora todo lo que tienes que hacer es si no le das un enlace, solo puedes hacer clic en la configuración del elemento, y puedes agregar el enlace después de estar solo aquí. Muy bien, entonces para el siguiente, um, tenemos dos elementos ahora. A la valiosa instrucción le va a ir 50% de espacio a esto y 50% de espacio a éste. De acuerdo, Ahora, si lo miras el enlace, puedes ver que este enlace está ocupando todo este espacio. Y lo que está pasando es que cuando pasé por encima de esta zona, me gustaría que el enlace también estuviera activo. Simplemente no quiero que sea dedo del pie esté activo cuando lo tenga en el texto. No puedo querer que esté activo. Y yo flotaba en toda esta sección. Correcto. Entonces lo que podemos hacer es crear múltiples bloques de enlace y poner el texto dentro. ¿ Verdad? Entonces sigamos adelante y hagamos eso. Van a empezar creando un nuevo bloque, que va a ser la sección correcta. Y sólo voy a decir Rapid normal, porque esa es una clase normal que estamos dando. Y por dentro, voy a crear un bloque de enlaces. ¿ Todo bien? Y este va a ser bloque de enlace fotográfico. ¿ De acuerdo? Y lo que está a punto de hacer es que voy a empezar agregando en un enlace de texto. Primero alguien presiona control E y agregando un enlace de texto. Oh, sólo podemos decir un bloque de texto en ese caso porque, uh, está bien, y aquí lo que voy a hacer es llamar a este enlace de fotos, ¿de acuerdo? Este es un pie un enlace, por lo que podemos seleccionar para que podamos ver que tenemos algún relleno en la parte superior e inferior, que es alrededor de ocho píxeles para que podamos ir y configurar el relleno fuera éste para que sea de ocho píxeles en la parte superior en ocho píxeles en la parte inferior . Creo que vamos a seguir adelante y hacer de este un 12. Vamos a hacer un 16 en la parte superior y 16 en la inferior 16 en la parte superior y 16 en la inferior. Se ve bastante bien. Y también para el bloque de enlace fotográfico lo que podemos hacer es podemos quitar esta declaración o aquí para que no se vea así. Y también para el pie un eslabón. Sigamos adelante y veamos este ajuste. Entonces es blanco. 16 pixels, párrafo listo, Simple. Entonces podemos seguir adelante y cambiar el tamaño de fuente fuera de esto para ser 16 encendido, podemos seguir adelante y hacer que esto sea blanco, derecha Ellos van, vamos adelante y solo hacemos cuatro copias para que podamos seleccionar el pie un enlace para que podamos decir copy Pegar basado y basado, ¿verdad? Entonces sigamos adelante y cambiemos estos. Vamos a ver a casa. Va a haber sobre que va a ser trabajo. Y a continuación tenemos proceso. Genial. Entonces si tipo de mirar la estructura, lo que tenemos es así que tienes un rapero normal y dentro de eso tenemos estos cuatro enlaces ahora mismo, el problema aquí es que queremos sets. Entonces lo que voy a hacer es ir adelante y seleccionar este bloque de enlaces y duplicado ahora mismo. Esto es lo que obtenemos ahora para mí. No quiero ser último Link Block alguien Adelante y borra eso por ahora. Necesitamos solo bloque de tienda y lista de lectura. Voy a decir tienda que voy a ver en blawg. Voy a ver lista de lectura. De acuerdo, ahora vemos algunos problemas, ¿verdad? Entonces sigamos adelante y arreglémoslo. El primero es que tenemos derecho este bloque de enlace fotográfico, cual tiene, ya sabes, cuatro enlaces que vamos a hacer es voy a seguir adelante y darle un mojado 50% ¿verdad? Lo que significa que va a ocupar un 50% de descuento en el espacio. Y lo mismo va a pasar aquí es que va a tomar un 50% de descuento en el espacio, que es exactamente lo que queremos. Ahora, la cosa es que esto está en el centro, acuerdo? Pero queremos que esto esté en la cima. Entonces lo que puedo hacer es agregar una clase de coma y podemos ver selecciones. Muy bien, ahora tenemos esta cláusula común que dice flex vertical izquierda arriba, pero queremos una nueva clase de combate porque flex vertical los va a poner uno por debajo del otro. Necesitamos que sean uno al lado del otro, ¿verdad? Voy a empezar uno nuevo y llamar a este flex horizontal ¿bien? Y subrayado. Queremos que se vaya a Toby y queríamos ser de arriba, ¿ verdad? Así que adelante y flexiona esto. ¿ Todo bien? Y luego vamos a decir flex horizontal va a decir arriba online y voy a decir justificar izquierda, derecha, Esto es lo que queremos. Y ahora esto se hace más o menos. Entonces lo que trato de decir es, si voy a la vista previa y si me muevo sobre alguna de estas áreas, bien, se puede ver que aunque no estoy pasando en el texto porque toda esta sección es un área de enlace, Yo soy capaz de activar esto. De acuerdo, ahora, una cosa rápida que podemos hacer es añadir un estado flotante a esto. Entonces vamos a seleccionar realmente el pie un enlace. ¿ De acuerdo? Vamos a entrar en un estado flotante y en el preaviso. Lo que voy a hacer es ir adelante, hacer el color y cambiar que hacen este color cian que tenemos, ¿ verdad? Y vamos a seguir adelante y voy a volver a lo no estatal e ir rápidamente a las transiciones poner esto en 3 50 y en la flexibilización, voy a seguir adelante y poner esto para que sea fácil o cancha. Y también vamos a ir a la opacidad. Onda, cambia esa propiedad. Hacer el color de la fuente, ¿verdad? Y ahora debería lucir cuál estábamos perfectamente. Por lo que al pasar el rato, se puede ver que éstos no se pueden resaltar. ¿ Verdad? Y, uh, eso es realmente genial, ¿verdad? Entonces ahora tenemos algo que se parece a esto. Por lo que en el siguiente video, vamos a seguir adelante y hacer que esto sea sensible. Entonces los veré chicos en el próximo video. 36. Cómo hacer el pie de pie: derecho. Entonces en este video, vamos a seguir adelante y hacer que este pie sensible para otros puntos de descanso. Entonces, empecemos. Va primero al punto de ruptura de la tableta, y eso es lo que tenemos. Ahora esto se ve bastante bien, diría yo, pero tal vez podríamos seguir adelante y solo asegurarnos de que nuestros patrones regulares en ambos lados sean los mismos. Um, ochenta. Bien por esto debería ser lo suficientemente bueno. Um, creo que lo que me gustaría hacer es, en este caso, el rapero que teníamos, como, una cuadrícula 60 40. ¿ Puedo querer hacer que uno fr y uno fr o lo siento, uno de lejos y Europa o en seis fr Para que tengamos algún espaciado como este. Thea, otra cosa que podríamos hacer es probablemente decir esto a una distancia otra vez. Por lo que como que aceleramos esto en 1/2. ¿ Verdad? Si vas adelante y escalas esto hasta los otros grandes clientes, vemos que obtenemos algo como esto, simplemente estamos bien. Supongo que dependiendo de cómo queramos que esto sea, podrías seguir adelante y estructurarlo. Podrías mantenerlo igual. Una proporción de 60 40 sí mismo tocando trabajo. Ve el punto de paisaje móvil aquí. Nosotros queremos hacer algo diferente. Vamos a crear algo que se parezca al punto de ruptura móvil que hemos creado, que tipo de luce así es porque la sección superior y después tenemos enlaces, y luego tenemos esta información. Entonces sigamos adelante y dijimos que así aquí, o se supone que se caiga lo que podemos hacer. Adelante y quitemos al rapero y que sea una cuadrícula de una sola columna. Está bien. Y eso es lo que obtenemos. Y ahora el aquí, si lo miras. Pero también, queremos asegurarnos de que el no es altura fija porque sí dimos una altura en algún lugar Teoh el creo que se lo damos al pie, creo que sí. Voy a quitar esta altura y dije que Do auto. Está bien, así que ya sabes, nos ponemos bien en el espacio ahora. El problema aquí es el hecho de que estos tres son clubes juntos en lo que probablemente significa que queremos que el orden sea diferente. ¿ Verdad? Entonces, ¿cómo vamos a arreglar eso? Para que tengamos que arreglarlo es a través de la estructura fuera de los elementos. Entonces si miras el navegacional aquí, Así que tenemos al rapero normal, que es el rápido normal. Y entonces tenemos esto, que va a ser para todos los enlaces ahora mismo, por aquí, aquí, Estos tres están juntos, pero esto en realidad tiene que ser un ítem separado. ¿ Verdad? Entonces lo que podemos hacer es que podemos seguir adelante de nuevo al punto de ruptura del escritorio, porque queremos asegurarnos de que hacemos los cambios por ahí. Aquí tenemos esta envoltura normal ahora mismo. Incidente fuera de esto. Está fuera poner este elemento dentro del rapero normal. Podemos ponerlo afuera, ¿verdad? Y cuando lo ponemos afuera, quiero decir, déjame simplemente seguir adelante y hacer eso correctamente si me llevo aquí el Romero normal. Entonces aquí tenemos el terreno fértil. Tenemos algo de texto. Voy a hacer que esto salga afuera, ¿de acuerdo? Y voy a poner esto afuera también. ¿ Todo bien? Y ahora lo que ha pasado es que hemos creado esta especie de 22 por dos columnas de grado on. Ahora. Se ve perfecto, ¿verdad? Se ve bien. Por lo que vuelves al punto de ruptura de la tableta se puede ver que se ve bien. Tenemos un punto de ruptura paisajística, está bien. Y ahora vemos que en realidad conseguimos lo que queríamos, verdad? Porque la cosa es que este es un elemento. Todo esto es otro elemento. Y este es otro elemento, ¿no? Entonces eso es lo que teníamos que hacer. Y cuando vas a la capacidad de respuesta, cuando vas a cuando haces cambios, esa capacidad de respuesta, no afectan la estructura fuera de la navegación. La estructura de navegación sigue siendo la misma. Y ese algo que estabas guardando mi Ahora, veamos el espaciado. Por lo que tenemos bastante espaciado en los temas que son 40 píxeles en la parte superior y 40 píxeles en la parte inferior. Entonces lo voy a hacer con la ayuda fuera de la columna son los Roberts. Voy a poner esto en 40 y vamos a tener algo que se parece a esto. Está bien, eso se ve bien. Obviamente, queremos cambiar esto. Hacer 20 a la izquierda, entrenar a la derecha, um, 64. O podemos decir 48 en la parte superior y todos los 30 64 en la parte superior. me olvidó lo que estábamos usando. Sí, estábamos usando 64 64 en la parte superior y 64 en la inferior. Y esto parece bastante va a ser más o menos va a verse igual en punto de descanso móvil también. Otra cosa que podríamos hacer es en realidad seguir adelante y agregar todos estos enlaces en una sola línea. Esa es una preferencia personal al beso, si ves u oyes aquí, no hicimos eso. Pero en caso de que quieras tener todo uno debajo del otro, todo lo que tienes que hacer es ya que sólo tenemos esta clase extra, puedo seguir adelante y dije el taburete vertical encendido. Ya sabes, deberíamos conseguir algo que se vea así, y va a verse casi igual en todos los demás puntos de ruptura porque estamos haciendo los cambios solo para digerir el retrato móvil big break point. Pero sólo voy a quedármela. En cuanto al diseño y control Z, eso es ¿Vamos a conseguir algo que se vea así, verdad? Entonces eso es más o menos por esto, ¿sabes? Y los veo en el siguiente video 37. Crear una animación en sección de recorridos de sección: Muy bien, así que prácticamente hemos ido adelante y construimos toda la página web, y se ve fenomenal. Y se ve genial. Tenemos un par genial de interacciones geniales aquí y allá, y vamos a hacer que esto sea aún más divertido e interactivo, y va a haber realmente impresionante. Entonces como puedes ver, se ve como fantástico. En realidad puedes, ya sabes, publicar esto al dominio seleccionado. Y, ya sabes, incluso podrías ver esto en tu dispositivo móvil. O si tienes un iPad o tablet, puedes ver eso y para comprobarlo, cómo se ve, porque este es un sitio web real. Muy bien, esta es fantástica página web de área. Ahora. Lo que vamos a hacer es seguir adelante y empezar a agregar un par de interacciones y animaciones y hacer que sea divertido. Lo primero que hay que hacer es agregar enlaces, hacer estos enlaces para que tipo de desplazamiento a una sección en particular fuera del sitio web. ¿ A qué me refiero con eso? Entonces vamos a hacer es tenemos tres enlaces o aquí, ¿ verdad? Fuimos experiencia. Tenemos trabajo, y luego tenemos fotografía. Lo que va a pasar es cuando haga clic en experiencia, la derecha la página se va a desplazar por esta sección, acuerdo? Y voy a seleccionar esta sección de conveniencia que tenemos, está bien, y voy a venir aquí y aquí. Tengo algo llamado el I. D. Enseguida D. . Esto es como un consenso para en el enlace de páginas. Yo solo voy adelante y llama a este E X p por experiencia, ¿de acuerdo? Y quiero entrar en el enlace de navegación de experiencia, y aquí vamos a elegir este que dice sección grande, y voy a elegir una sección de pago y voy a elegir E XP. Entonces lo que va a pasar es cuando vaya a la vista previa más y cuando toque la conveniencia, se puede ver que la página escuelas a la sección expediente. ¿ Verdad? Y eso es y eso es bastante guay. Hagamos lo mismo por el trabajo y la fotografía. Entonces para el trabajo, voy a ir aquí y elegir la sección de proyectos, y sólo voy a llamar a esto trabajo, ¿de acuerdo? Y voy a bajar aquí a la sección de fotografía y seleccionar esta sección y llamar a esta foto recién fuera de foto universitaria. Ahora mismo. Volvamos a subir y seleccionaremos el enlace de gallina de trabajo y vengamos a la sección de páginas, y aquí en la sección de pago, voy a elegir trabajo y para fotografía. Voy a seguir adelante y elegir fotografía ahora mismo para el contacto. Podría tener una idea de correo electrónico, un número de teléfono que los lleve, o en realidad podría hacer que se jodan todo el camino hacia abajo. Hacer la sección de negocios Let's Talk. Entonces sigamos adelante y hagamos eso en la sección de formularios. Vamos a llamar a este contacto bien, y podemos volver arriba y podemos ir a la sección de contactos, y aquí podemos dar click en Sección Pagada y puedes guardar contacto de Paige y luego vamos a la derecha. Entonces si vas adelante y previsualiza esto, puedes ver que cuando hago clic en conveniencia, puede ir a la sección de conveniencia. Cuando hago clic en trabajo, está cerca de la sección de trabajo en. Cuando hago clic en Fort of Photography, está cerca de la sección de fotografía a menos que y eso sea bastante cool e impresionante. También puedes seguir adelante y hacer lo mismo para estos enlaces inferiores también. Entonces cuando haga clic en casa, me va a llevar a la pantalla de inicio para el sobre el proceso de trabajo de sección sobre. Pero voy a dejarlo tal como está, porque cuando estés construyendo esto, podrías tener tus propias páginas. Podría tener sus propios enlaces y secciones diferentes de su página web, así que quiero dejar eso como ese IHS Ahora, lo otro es que tenemos este logo en este Obviamente, quiero que toe re lord toe the homepage. Entonces voy a ir y dar clic en un enlace son así voy a dar clic en páginas y voy a decir Elegir página y voy a elegir casa. Por lo que cada vez que hago clic en esto, se puede ver que tipo de recarga actualiza el navegador y te lleva de vuelta a la página principal. ¿ Verdad? Esto es lo que queremos, ¿verdad? Entonces eso se trata mucho de agregar thes página de sección como secciones, enlaces crédulos. En el siguiente video, vamos a salir, seguir adelante y hacer algunos elementos. Animador. Entonces son ustedes chicos en el siguiente video 38. Cómo usar crear y usar símbolos: Muy bien, chicos, antes de entrar en las interacciones, sólo quiero explicar un nuevo concepto rápidamente. Sólo voy a tomar un par de minutos y eso se trata de crear componentes. Ahora, por ejemplo, digamos que tienes múltiples páginas en un sitio web y tienes, como, como, 10 páginas diferentes en tu sitio web. Y en primer lugar, la forma de agregar una página es ir a la página de aquí y puedes hacer clic en Crear nueva página y eso va a crear todas las páginas que tengas. Ahora digamos que tienes esta barra de navegación e incluso,ya sabes, ya sabes, el pie de página arriba justo en la parte inferior, ya sabes, que va a ser lo mismo en todo el sitio Web. Pero en caso de que decidas hacer un cambio en particular, el problema es que tendrás que seguir adelante y hacer ese cambio en todas las otras 10 páginas. Y eso es realmente una gran molestia. Y eso es un gran problema. Entonces donde Flo tiene algo llamado como componentes y podemos seguir adelante y crear algo como componente, me voy a meter así ahora, pero oh, aquí y voy a seguir adelante y click derecho y voy a decir crear símbolo en este momento, simple y componente son más o menos términos que se utilizan indistintamente. Pero sólo voy a decir crear símbolo y eso va a hacer es que nos va a decir a Neymar similar. Vamos a llamar a esta barra Na'vi Gatien, y voy a seguir adelante y hacer clic en Crear símbolo. Por lo que ahora se puede ver que estamos dentro del componente más donde podemos seguir adelante y hacer los cambios que queramos. Entonces voy a seguir adelante y hacer clic en Hecho, y eso va a crear esto en la especie de barra de color verde, lo que significa que es un símbolo y voy a hacer lo mismo aquí abajo también. Voy a seguir adelante y seleccionar el pie arriba y voy a seguir adelante y hacer click derecho, y dirá, crear símbolo y llamaremos a este pie arriba y ya sabes que tenemos un símbolo. Ahora, se puede acceder a todos tus símbolos en el, ya sabes , en el panel de anuncios , donde tenemos elementos , tenemos diseños, y luego tenemos símbolos. Ahí es donde salen todos tus símbolos. Y también te muestra el número de instancias que se ha utilizado un símbolo en particular, así que eso es bastante bueno. Ir honestamente, no se puede hacer ahora. Esto tampoco es una especie de esta caja verde. Por lo que la próxima vez que crees una página nueva, toda tu foto es solo arrastrar y soltar este símbolo que tienes en la página y sabes que estás bien para ir. Entonces eso se trata mucho de símbolos, y los veré en el siguiente video. 39. Crear una animación con carga de página: Muy bien, chicos. Entonces en esto poder seguir adelante y animar la sección de héroes en algunas animaciones divertidas realmente geniales . Entonces, empecemos. Y la cosa es que es súper sencillo de hacer. Todo lo que tienen que hacer es entender la lógica fuera de cómo funcionan las interacciones. Voy a empezar por sólo asegurarme de que esto sean 14 40 píxeles porque me gustaría mantenerlo a los 14. 40 correcciones. Y lo que vamos a hacer ahora es que vamos a empezar decidiendo cómo quiere pasar la animación . El primero es esta barra de navegación que tenemos quiero seguir adelante y falló esto desde 0% de capacidad hasta 100% de capacidad. Y por cierto, estamos haciendo esto cuando el Señor de la Página. Entonces, ¿qué va a pasar cuando los Señores de la Página, cuando los Señores de la Página, quiero que la barra de navegación se desvanezca de 0% de capacidad a 100% de capacidad. Quiero que este cuadro de imagen héroe se mueva del lado izquierdo de la pantalla al lado derecho de la pantalla y quiero este texto que diga que soy Robin Williams y tenemos los gráficos españoles para pasar desde el lado derecho de la pantalla hacia el lado izquierdo de esto. Entonces así es como queremos seguir adelante y estructurar nuestra animación. Entonces, empecemos ahora. Podríamos estar lidiando mucho con la parte superior de interacción, y ojalá ustedes obtengan lo justo y sobre la lógica de cómo funciona todo. En primer lugar, tenemos que selector trigger saber lo que es un artículo de disparador es básicamente una acción que desencadena la animación principal, correcto. Y en este caso, queremos el gatillo Toby page load. Entonces cuando los señores de la página iban a activar algún tipo de una animación a la que hemos llegado con nosotros cuando se paga, empieza a cargar. Y cuando la página termine de aprender, ahora vamos a elegir la página del evento termine de cargarse. Voy a seguir adelante, seleccionar la acción y decir, Iniciar una animación, Ok. Y ahora ya superamos la animación existente que tenemos. Voy a seguir adelante y dar clic en el icono más, que se va de pie crear una nueva animación. Voy a llamar a esta edad, Lord Animation. Está bien. Y aquí lo que voy a hacer es que voy a empezar a definir los elementos. 1er 1 va a recoger el elemento en este caso. Queremos tomar la navegación, pero y dar click en el plus. Pero lo lamentable es que por el momento no podemos agregar animaciones a los símbolos. Entonces lo que tendrías que hacer es que tendríamos que hacer doble click para ir dentro de eso y luego click en el icono más y luego voy a elegir capacidad para el TLCAN, ¿de acuerdo? Y solo podemos seguir adelante y dar click en el símbolo maestro de edición terminado para que podamos volver. Entonces volvamos a nuestra página, nuestra animación. Entonces conseguimos el nab nuestra capacidad ahora en las otras interacciones. Lo que hicimos fue que acabamos de crear un estado, que es el instante en que estamos en este caso. Tenemos que crear dos estados. Uno es el estado de inicio y otro es el siguiente ocho. ¿ Por qué tenemos que hacer eso? El motivo es que en este caso, ya que mi primer estado inicial va a ser 0% de opacidad, este duelo están en la pantalla ya es del 100%. Por lo que tengo dedo del pie anular esta propiedad al ver flujo web. Escucha, cuando bajé el sitio web, quiero que esto sea 0% de opacidad cuando empiece. ¿ Verdad? Entonces lo que voy a hacer es seleccionar esta capacidad novedosa, y estoy buscando en el interruptor que dice set como estado inicial. Entonces a pesar de que en el diseñador esto es 100% de opacidad cuando las armas de página señores van a asumir que esto era 0% de capacidad todo el tiempo, ¿ verdad? Gravemente. Adelante y establece que esta capacidad sea cero. Ahora bien, no se puede ver el cambio porque el cambio no afecta a los símbolos, pero cuando recargamos la página, se puede ver. De acuerdo, entonces vamos a seguir adelante y fijar el estado inicial para que sea cero. Ahora, vamos a seguir adelante y duplicar esto, ¿de acuerdo? Y aquí, vamos a seguir adelante y dijo la capacidad al 100% porque queríamos pasar del 0% al 100% en adelante. Podemos seguir adelante y cambiar la duración para decir algo así como tres segundos y también cambiar El dedo del pie relajado es nuestra cancha, ¿ verdad? Esto es más o menos lo que queremos. Ahora, si vas adelante y juegas esto, puedes ver que tardan tres segundos en desvanecerse. Correcto. Ahí vamos. Ahora. El siguiente es, queremos animar la caja de imagen del calentador. Entonces vamos tristemente, él daña caja. Vengamos aquí a las acciones. Da click en el icono más y queremos elegir Mover. OK, ahora, podría tener un enlace este movimiento junto con esto porque quiero que estos dos comiencen al mismo tiempo, ¿ verdad? Y lo primero que hacemos es por la mudanza. Voy a agregar el valor X ahora mismo el valor X básicamente la posición izquierda y derecha porque está en el eje izquierdo. Ahora, no voy a usar un valor de píxel porque la cosa es con el valor de píxel, se va a ver raro en diferentes puntos de ruptura. Porque si digo, por ejemplo, 100 píxeles van a estar 100 fotos encendidas para 14 40 picks de break 400.1920 pixels reportan y los otros grandes puntos, que no es algo que queremos. Entonces lo que quiero hacer es ir adelante y poner el valor X en negativo 100% ¿verdad? Entonces cuando digo posit, se aleja al 100% de su posición inicial. ¿ Verdad? Entonces se está moviendo básicamente dos veces este ingenio bien, y lo vamos a establecer al 100% para que esté exactamente fuera del puerto de vista fuera de la pantalla. Y yo seguiría adelante y duplicaría esto una vez un duplicado. Y voy a fusionar esto con esto. Está bien, porque queríamos que los NAB sean los y el cuadro de imagen iniciaran al mismo tiempo. Y como que también lo quieres y al mismo tiempo lo que todo el mundo necesita ser animado al mismo tiempo. Ahora para el cuadro de imagen de héroe, lo que va a pasar es que voy a volver y poner esto para que sea cero persona porque queremos que sea el estado predeterminado. De acuerdo, entonces cero persona y la duración, probablemente voy a ponerlo en 1.5. Está bien. Y también cambio de flexibilización para facilitar fuera de la cancha. De acuerdo, Ahora, echemos un vistazo rápidamente. Correcto. Eso se ve bastante guay, ¿verdad? Se ve fantástico. Vamos a seguir adelante y a jugar esto otra vez. Fantástico. Se ve bien. Ahora, la otra cosa que quiero hacer es ir adelante y también agregar capacidad. Podría haber querido desvanecerme y moverme al mismo tiempo. Por lo que sobre monitor va a empezar seleccionando el número uno click en el icono más y voy a elegir capacidad. De acuerdo, Ahora, voy a fusionar esto con esto porque queremos que el movimiento y la capacidad empiece al mismo tiempo. Y obviamente nos va a poner el estado inicial, y voy a leer usar la opacidad hasta el 0%. ¿ De acuerdo? Y voy a seguir adelante y duplicar esto. Esto va a ser mucho con esto, y va a ser el estado final, pero voy a decir opacidad, Estás 100% bien? Y también la duración. Esta vez voy a retroceder a uno. No quiero que sean 11.5 y la flexibilización va a ser fácil fuera de la cancha, como siempre. Entonces ahora juguemos rápidamente esto y echemos un vistazo. Correcto. Por lo que esto se ve super. Podría como que se desvanece y se mueve. Y en el mismo día ahora mismo, vamos a hacer lo mismo por estos también. Rápidamente. Kilómetros, adelante y dijo esto a 14. 40. Ahora, vamos a seguir adelante y cambiar estos también. Entonces ahora todo ya está definido, ¿verdad? Pero lo único es que necesitamos cambiar el movimiento. Entonces en lugar de crear tu rasguño de triunfo. Voy a seguir adelante y seleccionar estos dos elementos, que es el cuadro de imagen de héroe. Voy a seguir adelante y duplicar esto, y voy a fusionarlo con esto, ¿de acuerdo? Y lo único que tenemos que hacer es ir adelante y desde el 100% voy a hacer de esto el 100% positivo y voy a seguir adelante, ¿ verdad? Haga clic y cambie Destino al encabezado. Está bien. Ahora, la cosa es que se movió exactamente al 100% pero como que queríamos movernos un poco más, que es 110 más él. Está bien, así que está un poco afuera, ¿de acuerdo? Y además, vamos a seguir adelante y cambiar la opacidad. Target ha construido ¿verdad? Haga clic en cambiar, tigre. Ahora, esto está fuera de mi vista puertos. No soy capaz de seleccionarlo, así que puedo ir al navegador y dar click en encabezado. Y eso va a cambiar eso también. Genial. Perfecto. Ahora voy a seleccionar estos para hacer clic derecho duplicar y fusionarlo con esto. Y todas las propiedades son iguales. El único después de hacer es ir adelante y cambiar objetivos o cambiar clic derecho. Encabezamiento objetivo clic derecho, cambio, objetivo y pesado. De acuerdo, entonces Ahora, vamos a seguir adelante y a creer esto, ¿ verdad? Entonces esto es lo que obtenemos, ¿verdad? Se ve bastante guay ahora. También queremos que esto también sea animador. Entonces lo único que perdemos voy a seguir adelante y seleccionar estos para intentar click Duplicar combinado. Esto y las propiedades vuelven a ser las mismas. El único es, el es cambiar el elemento que alguien haga clic derecho, cambiar objetivo y cambiarlo al párrafo 18. Haga clic derecho cambiar objetivo. Ahora el párrafo 18 se ha ido porque está fuera de la pantalla. Entonces voy a seguir adelante y pincharé por aquí, acuerdo? Es lo mismo aquí. Encabezamiento. Demos clic derecho Duplicar. Trae eso y haga clic derecho Cambiar objetivo. Párrafo 18. Pulse con el botón derecho Cambiar Soccer párrafo 80. Ahora mismo juguemos a esto. Ahora mismo se está rezagando un poquito porque eso es porque fuera del hundimiento e Internet Pero si vas adelante y lo ves por aquí, puedes ver la diferencia, y lo haremos. Ahora. Algo que quiero cambiar, ya sabes, para que sea un poco más divertido es que todos estos se animan al mismo tiempo exacto , correcto. Pero vamos a tener un poco de retraso. Entonces lo que quiero hacer es pelear este rubro. ¿ Todo bien? Ahora nosotros Dice que se inicia con la acción anterior, que es ésta. Pero a pesar de que empieza con la acción anterior, queremos un poco de retraso. Voy a darle un retraso de 0.2. Está bien. Y para el párrafo. Está bien, voy a darle un retraso de 0.4. Correcto. Por lo que empieza con por aquí. Entonces de aquí para aquí, hay un retraso de 0.4. Y luego suceden estas animaciones. Y para el rubro, iniciamos cero y hay un retraso de 20.2 segundos. Y luego ocurrió la animación. Entonces ahora si tocas esto, ves que los elementos vienen uno tras otro, y eso es realmente genial. Por lo que podemos seguir adelante y publicar esto a nuestro presagio seleccionado y vamos a la página web y prensa control son o mando arte de recarga. Y echemos un vistazo a cómo se ve bien esto. Esto se ve súper suave. Y Sivarasa, sigamos adelante y recarguemos esto de nuevo. Y se ve fenomenal, ¿verdad? Esto se ve realmente, realmente genial. Ahora, una cosa que quiero mencionar es en este caso, todos los elementos que nosotros animador sólo se estaban animando cuando el Page Lord En este momento estos son los únicos elementos se están animando. Ahora, elementos como el epígrafe 76 pixel y el párrafo 18 pixel se están utilizando en múltiples lugares fuera la página web. Por lo que no queremos que esos también sean efectivos. Entonces queremos hacer va a seleccionar todo esto y asegurarnos de que tu efecto sea el elemento seleccionado . Porque si seguimos adelante y, por ejemplo, cambios a clase, eso va a afectar a todos los elementos que estaban ahí en la página que tienen la misma clase. Pero eso no es lo que queremos. Queremos animar sólo estos elementos seleccionados. Entonces voy a seguir adelante y elegir elemento seleccionado. Asegúrate de que esto es todo, está bien, y eso es más o menos todo. Y en el siguiente video, vamos a seguir adelante. Y si vuelves al diseñador dicho, todo se vuelve normal y lo que vamos a hacer es en el siguiente video, vamos a seguir adelante y animar esta sección. Entonces cuando me desplazé por esta sección. Tenemos estos, ya sabes, estos que tipo apagado animan. Entonces son ustedes chicos en el siguiente video. 40. Animación de la sección de la experiencia: Correcto, chicos. Muy bien, chicos. Por lo que en este video, vamos a seguir adelante y animar esta sección de la página web. Entonces obviamente voy a empezar con un gatillo. ¿ Cuál es el gatillo para nosotros? Tenemos un gatillo que si vengo aquí al elemento disparador, um, tengo una opción que dice scroll into view. Entonces para especie de explicar esto. Entonces cuando me desplace y esta sección de experiencias salga a la vista, quiero que sigas adelante animar algo, ¿ verdad? Ese es el gatillo. Entonces cuando la sección Experiencia desplaza entrevista, quieres animar elementos, así que vamos a seguir adelante y elegir desplazado a la vista. Ahora, tenemos dos opciones cuando entrevista de desplazamiento y una fue jodida de ti, correcto, correcto, Así que estamos por el 1er 1 que es cuando se desplaza a la vista. Entonces vamos a dar click en iniciar una animación, y tenemos toda nuestra animación. Lister creará una animación totalmente nueva, y llamaremos a este scroll sección de conveniencia. De acuerdo, así que vamos a hacer es que quieras animar estas tres cajas, que es este bloque de experiencia. Queremos que animen, ya sabes, de izquierda a derecha. Similar a la forma en que hicimos esto, pero se va a ver. Se va a ver bastante divertido. Entonces lo que voy a hacer es ir adelante y empezar una animación. Entonces vamos a empezar con el 1er 1 Es el movimiento, obviamente. Y vamos a empezar por establecer esto en estado inicial porque este no es el estado inicial , ¿ verdad? Este es el estado final. Entonces voy a seleccionar el 1er 1 y decir naciones del sábado aquí. Y para esto, lo que voy a hacer es que en realidad vamos a usar valores de píxel para esto, ¿ verdad? Porque para mí, esto no quiero que esto salga lejos de la pantalla. Totalmente. Porque quiero que esto se anime en base a un poco de valor de píxel, no algo que debería depender de la pantalla con. Pero antes de que hagamos eso, sigamos adelante y dijimos esto a 14. 40 y solo hacer es obviamente vamos a mover esto hacia la salida. Vamos a sumar valor negativo. De acuerdo, Ahora, ¿ qué ves aquí? Es que todos los elementos se están moviendo Y la razón es porque aquí los estaban efectuando ahora mismo la clase, deberíamos usar esto? debería serlo. Vamos a ver de eso. Pero por ahora, voy a seguir adelante y dije esto para seleccionar elemento. Y voy a seguir adelante y me voy a apañar, mover esto hacia un lado. Así que decir algo así como 70 píxeles negativos. ¿ Todo bien? Está bien. Y lo que vamos a hacer es tal vez podrías seguir adelante y decir tal vez hacer esto negativo 100 picks está totalmente bien. Sigamos adelante y duplicemos esto. Y esta va a ser nuestra interestatal donde vamos a fijar la duración de esto para que sea un segundo. Y va a ser facilidad fuera de cuart como de costumbre. Y el valor va a ser cero, correcto, Porque volvimos a la atención Estado. Esto se ve bien. Ahora vamos a seguir adelante y capacidad animada también. Entonces sigamos adelante y sumamos la opacidad. Voy a añadir la opacidad con la inicial. Voy a establecer eso en cuanto al estado inicial y dejan la capacidad a cero y luego clic derecho IQ cambió un duplicado, y vamos a combinar este con el segundo set on. Va a haber 100% y la duración va a ser de un segundo y el preset va a ser comer fuera de cancha. Correcto. Entonces ahora echemos un vistazo rápidamente. Entonces voy a volver al principio y tenemos esta animación encendida. Adelante y desplázate. Correcto. Entonces cuando me desplaza, no vemos nada. ¿ Verdad? Porque lo que está pasando es dejame mostrarte Si vuelvo a tocar esto y si me desplaza un poco más rápido, podrías ver que resultaron animaciones, ¿ verdad? ¿ Dónde? El caso es que la sección Eso es así aquí empieza justo por aquí. Como un poco de pergamino. Se inicia, correcto, correcto, Y la animación ya está iniciada. Pero no lo vemos, porque para el momento es desplazar de nuevo hacia abajo la animación más. Entonces, ¿cómo nos aseguramos de que lleguemos a ver la animación? Entonces lo que vamos a hacer es que vamos a seguir adelante parando, volver a hacer. Y aquí tenemos algo Torres offset. ¿ Verdad? Entonces voy a seguir adelante y dijo el offset a algo así como 50%. Entonces lo que significa es, pesar de que esta sección ha sido visible, que se ha desplazado hacia el puerto de vista, quiero que la animación comience después de haber desplazado 50% después de que el elemento es cruel. en la vista, per Entonces lo que quiero decir es que ahora, si vamos adelante, y si lentamente nos movemos hacia abajo en este momento, se puede ver la animación realmente sucede. Porque después de desplazarnos 50% pudimos verlo. Ahora podríamos seguir adelante y subir bastante esto. Podríamos seguir adelante y hacer de este 75%. Está bien, Y veamos cómo se ve eso. De acuerdo, así que tenemos esto y voy a joderlo. Y tú vete, Dave. Oh, llegamos a ver eso, ¿verdad? Si quieres hacerlo aún más mejor, sigamos adelante y hagamos esto al 85%. Está bien, sigamos adelante y echemos un vistazo ahora mismo. Ahí vas. Ahora, tal vez si tanto lo voy a decir probablemente esto abajo al 75%. Ese es un número que me gusta. Genial. Ahora, lo otro es que queremos que estos también sean animados. Entonces lo que podría hacer, Podemos seleccionar el primero para y podemos seleccionar el 1er 1 en debilitar decir clase de efecto. Y eso debería funcionar. ¿ Verdad? Entonces sigamos adelante y echemos un vistazo ahora mismo. Pero el problema aquí es que quiero que estos tengan su propio retraso. Correcto. Yo quiero que esto empiece un poco después del otro. Al igual que yo quiero que esto venga. Y entonces quiero que vengamos. Y entonces quería venir. Eso lo hace un poco más divertido. Entonces lo que vamos a hacer es realmente podemos usar clase, ¿ verdad? Porque todos ellos se van a activar al mismo tiempo. Entonces voy a seguir adelante y decir, elemento seleccionado, y voy a ir y duplicar estos para decir cambiar objetivo. De acuerdo, combinaré estos dos y aquí voy a decir cambio de objetivo, y voy a elegir este set, que es la experiencia Bloque número dos. Correcto. Y tenemos que elegir el equivocado. Entonces voy a escribir, como, como, cambiar objetivo en DA elegir Experience block. Ahora mismo de nuevo, no queremos que esto afecte a la clase. Queremos hacer efecto sólo ese elemento seleccionado. Está bien, genial. Adelante y duplicemos estos de nuevo, ¿de acuerdo? Y estos dos van a ser para el 3er 1 que es su bloque de experiencia, ¿ verdad? Y de nuevo, no queremos que sea clase. Queremos que se seleccione elemento en este momento. Entonces básicamente, hemos definido el estado inicial para todo esto. Ahora necesitamos definir el estado final para todo esto. Alguien seleccione duplicado. Combina esto y sigue adelante y duplica y combina esto. De acuerdo, así que voy a seleccionar estos para hacer clic derecho cambiar objetivo y elegir este bloque de experiencia, seleccionarlos para hacer clic derecho cambiar objetivos y seleccionar este bloque de experiencia. Ahora, todos estos no queremos que sean de clase. Voy a seguir adelante y decir elemento seleccionado. Este también va a ser elemento sexual. OK, ahora, sigamos adelante y jugemos esto. Se podía ver que todos suceden al mismo tiempo. Entonces lo que tenemos que hacer es crear un retraso menor. Entonces cuando seleccione esta opacidad en movimiento y voy a decir DeLay cero point do y el tercer set, que son estos dos, ¿ verdad? Voy a poner esto para que se vea un punto para Ok, Así que ahora si tocas esto, esta es la animación que obtenemos. Otras miradas super podría. Ahora, sigamos adelante y publiquemos esto en nuestra página web y veamos la vida. De acuerdo, entonces vamos a nuestro portafolio. Por supuesto. Y eso es recargar la playa. ¿ Verdad? Esto se ve fantástico. Voy a desplazarme despacio. Está bien, tenemos esto. Y ahora esto comenzará. Noche. Esto se ve increíble. Ahora mismo, volvamos a subir, acuerdo? Y sólo vuelve a bajar. Ya sucedió la animación, ¿verdad? Todo ha pasado. Pero digamos que quieres restablecerlo para que cada vez que te desplazas, ya sabes, la animación reemplace. ¿ Cómo hacemos eso? Correcto. Entonces eso es con lo que tenemos esta cosa, esta otra opción con un click en hecho, puedes verlo dice cuando Scroll out off you. ¿ Qué pasa cuando salgo de ti? De acuerdo, podemos seguir adelante y restablecer toda esta animación, así que voy a empezar por ir a empezar una animación, ¿de acuerdo? Y ahora ya tenemos este 1er 1 derecho? En realidad voy a duplicar esto, acuerdo? Entonces no tenemos que volver a despejar todo. Asegúrate de seleccionar el 2do 1 Porque para el 1er 1 seleccionamos el top y para éste vendiendo el 2do 1 Y por aquí, vamos a seguir adelante y decir scroll out. ¿ De acuerdo? ahora ya tenemos muchos de estos. Ahora vamos a hacer es una especie de reiniciarlo todo ahora, ya que todos estos son los que no podemos ameritar el reinicio del dedo del pie. Al igual que porque todos estos son 0% de capacidad y, ya sabes, mover 100 correcciones a la izquierda. Podríamos haber querido traerlo de vuelta a disposición. Entonces, ¿qué hacer? Voy a seguir adelante y seleccionar todos estos borrados represivos. De acuerdo, Ahora siempre tenemos un estado inicial. Voy a retirar los dedos del pie del estado inicial. ¿ De acuerdo? Y para este, centrar la duración. Cero. Porque quería convertirme de inmediato en 0% de opacidad y mover 100 pixel a la izquierda tan pronto como me desplaza fuera de ti. De acuerdo, ¿ entonces qué quiero decir con eso? Adelante y publiquemos esto y luego podamos entender. Por lo que realmente portafolio curso. Vayamos a recargar el discurso. De acuerdo, entonces ahora esto ha pasado, ¿verdad? Entonces cuando vuelvas aquí y tenemos esta animación, correcto, es perfecta. Es fantástico. Ahora en un pergamino fuera de ti. Entonces ahora es un pergamino fuera de ti. ¿ Qué significa que por ahora todos los elementos deberían haber sido 0% de capacidad y deberían haber sido 100 pixeles con izquierda no? Vamos a revisar. Porque cuando vuelvo a desplazarse a la vista, son visibles. ¿ Verdad? Entonces te desplaza un nuevo pergamino en ese todo lo que te desplaza el reseteo, vuelve, lo desplazan a la derecha. Volvamos otra vez. ¿ Quién aquí? Correcto. De eso estamos hablando, ¿verdad? Entonces volvamos atrás y se puede ver esto. Eso se ve fantástico. ¿ Verdad? Entonces así es más o menos cómo se restablece la animación. Por lo que pasando a las siguientes secciones fuera del curso, nosotros Esto está bien. No queremos agregar ninguna interacción porque ya tenemos esta hermosa interacción que está ahí. Podríamos agregar una interacción similar a la sección de conjuntos de habilidades también. De acuerdo, pero para la escuela dijo, voy a agregar un tipo diferente de animación off. Entonces en el siguiente video, vamos a seguir adelante y animar esto. Entonces son ustedes chicos en el siguiente video 41. Animación de la sección de habilidades: De acuerdo, Entonces en este video, vamos a seguir adelante y simplemente añadir una interacción muy simple a esto No demasiado elegante. Entonces, empecemos. Entonces volvamos a nuestro Oh, aquí hay un poco de vuelta a donde estábamos inicialmente y llegamos aquí. Ahora lo que quiero hacer es cuando pase el rato sobre este elemento, acuerdo? Quiero activar una animación a escala simple para el ícono que tenemos por aquí, ¿ verdad? Entonces voy a seguir adelante y empezar seleccionando al nominado. Rapero. Entonces otra cosa es que este rápido normal se ha utilizado en toda la página web, y no queremos amparar gatillo, ya sabes, ningún otro elemento. Entonces sólo para estar del lado seguro de lo que voy a hacer es que me sienta honrado, en realidad, sólo rápido adelante y duplicar la clase, y es de color normal, Pero voy a llamar a este rapero escaso, vale, Tan solo para estar en la caja fuerte, una talla dos que nos aseguramos de no hacer ningún cambio necesario a las animaciones fuera ningún otro componente. ¿ Verdad? Entonces vamos a tener que vamos a seleccionar esta brecha de habilidades, y voy a ir aquí en el paso de interacción Y ahora vamos a necesitar una simple interacción hover . Entonces si llamas al icono más y eliges y mouse Hola, Así voy a dar clic en seleccionar Acción en Ir a Empezar una nueva animación Y estas son toda la animación existente No hagas click, crea una nueva Y llamamos a esta escala de iconos excusa en OK y da click en Plus y apenas estamos dando click en la propiedad de habilidad Y obviamente no queremos activar la escala Rapper queremos hacer clic derecho, Cambiar objetivo y estás efecto el icono de habilidad. De acuerdo, Y ahora lo que quieres hacer es asegurarte de que afectes a la clase, ¿de acuerdo? Y cuál es el icono de habilidad de clase, ¿verdad? Y también quieres afectar solo a Niños con esta clase. Entonces, básicamente, si este icono de matar es un niño fuera de cualquier elemento padre, entonces adelante y afecte esto ahora mismo. Aquí no queremos seguir adelante y agregar un estado inicial porque el estado inicial sobre el estado original fuera de la animación va a ser el mismo. Entonces voy a seguir adelante y basta con dar click en esto y voy a teclear en uno. Entonces ya sabes, uno es estado normal, y voy a seguir adelante y cambiar esto de 1 a 0.2. De acuerdo, Tal vez hasta 0.1. Adelante y digamos 0.2. De acuerdo, así que asusta un poco grande, y voy a dar click a la derecha. Eso es más o menos. OK? Y no sé por qué no tomaste el nombre de alguien. Está bien. Ahí lo tienes. Y por hover fuera, Lo que quiero hacer es ir adelante y elegir empezar una animación, y vamos a seguir adelante y duplicar esto porque no queremos repetir el mismo paso otra vez. Asegúrate de seleccionar el 2do 1 Entonces sigue adelante y configura esto para escalar hacia fuera. ¿ De acuerdo? Y tenía la habilidad que puedo voy a volver y volver a usar esto de vuelta a qué? Está bien. Ahora, una vez queriendo me olvidé va a cambiar la duración. Entonces voy a poner esto en 0.4 y dije esto para aliviar el cuarto. Volvamos atrás y hagamos lo mismo para escalar también. Entonces, así dijo la duración a punto cero lleno. Y también la flexibilización va a ser fácil o cancha. OK, así que ahora sigamos adelante y echemos un vistazo. ¿ Todo bien? Entonces cuando tienes una obtenemos una simple interacción divertida Howard, acuerdo? De locos funciona. Ahora, creo que la flexibilización necesita un poco más arreglada. Alguien dijo la duración a cero punto do. Ah, esto tiene que ser aliviado. Corte. Ahí vamos. Ese es el problema. Por lo que esto al reporte para de nuevo está fuera de la cancha Onda para escalar fuera. Queremos asegurarnos de que sea más fácil cancha. Está bien, así que echemos un vistazo. Sí, mira, luce genial. De acuerdo, Ahora, la cosa es, que no está afectando a ninguno de estos, acuerdo? Porque tenemos. Entonces si en realidad lo miras, la animación Vale, esta animación de hover está siendo un factor. Sólo dedo del pie este elemento en particular si vas adelante y cambias esta clase de dedo, lo que significa que va a afectar a cada elemento y vamos a elegir habilidades Rapper, ¿ verdad? Esa es la clase base, ¿verdad? Tampoco lo hizo el de clase combo. Bueno, es que va a afectar sólo a los que tienen la clase combo, pero no queremos que haga eso. Queríamos realizar habilidades. El rapero, ¿verdad? Esa es la clase base. Entonces si sigo adelante y se cierne sobre alguno del otro elemento todavía no pasa nada. Eso se debe a que esto tiene una clase diferente por completo. A esto todavía se le llama raperos normales. Entonces me voy a deshacer de esto y voy a seguir adelante y decir Habilidades, Trapper. Y también queremos sumar los 48 pixeles. ¿ Verdad? La despedida. Eso es así. Adelante y llamemos a esto habilidades rápidas y luego sigamos adelante y digamos 48 pixeles, margen derecho y también seleccionemos este y llamemos a este rapero habilidades on Adelante y en los 40 pixeles. Derecha bateo ahora mismo. Echemos un vistazo a las oficinas. Sí, ahora funciona en todo lo demás en. Es una interacción muy sencilla, fresca y divertida. No hay nada genial que ponerte. Simplemente hace que sea más animado y divertido para seguir adelante. Entonces, sí, así que eso es más o menos para este video. Y en el siguiente video, vamos a seguir adelante. Y ya hicimos esto, lo cual está bien. Ah, ya los animamos también. De acuerdo, um pero lo que voy a hacer es que tipo de deseo cuando cubrí por aquí cuando me desplace por aquí, como que quiero agregar una animación de fundido simple a cada uno de estos. Entonces vamos a hacer eso en el próximo año. Entonces son ustedes chicos en el siguiente video. 42. Animación de la sección de proyectos: bien chicos, así podríamos crear una interacción genial para esto. Donde lo que sucede es cuando cada una de estas tarjetas son visibles en el puerto de vista o cuando son entrevista escolar, vamos a escalar de pequeñas a grandes. Ahora, sólo hicimos una interacción similar por aquí, ¿verdad? ¿ Dónde? Cuando esta sección se desplaza entrevista, vamos a animar esto y esto y esto, ¿no? Pero ¿y si hay una mejor manera son una manera más fácil de hacerlo? Porque cada vez que voy adelante y elijo un elemento, no quiero que se base en la sección. ¿ Y si hay un elemento que está justo ahí y cuando se desplaza entrevista, quiero animador, realidad puedo definir eso sin siquiera agregar el gatillo. Hacer la sección derecha. Entonces, ¿qué? Es decir, sigamos adelante y averiguarlo. Seguiremos adelante y dijimos esto a 14. 40. ¿ Todo bien? Sólo para tipo de entender y lo que voy a hacer, debe seleccionar el proyecto Thebe envuelto. De acuerdo, Entonces para el rapero de Project, que es todo este bloque, voy a seguir adelante y crear una interacción y esto va a ser entrevista de scroll Así que cuando la entrevista de Project Rapper Scrolls, estamos va a crear una animación. Voy a seguir adelante y decir, Empieza una animación Genial. Ahora en todas partes y crear una nueva animación. Y voy a llamar a esto piel en Global. De acuerdo, Ahora voy a hacer es un must select la propiedad de escala, ¿de acuerdo? Y queremos que la escala fuera de esto tenga un estado inicial. ¿ De acuerdo? Y voy a decir algo así como 0.7. De acuerdo, tal vez sigamos adelante y que sea un 0.85 Vale, Algo así. De acuerdo, vamos adelante y duplicamos esto, y voy a seguir adelante y volver a poner esto a uno. Ahora, esto va a ser cualquier palo de porquería y que esto va a ser que hagamos este pequeño 0.5 y decimos que está fuera de la cancha. ¿ De acuerdo? Ahora, también queremos animar la opacidad porque va a parecer rara si es muy pequeña cuando empieza. Entonces voy a seleccionar esto. Voy a seguir adelante y voy a decir capacidad. Está bien. Vamos a seguir adelante y aplicamos esta puerta aquí. Ahora, esto obviamente va a ser un estado de emisión, así que voy a volver a cero. Voy a seguir adelante y duplicar esto y voy a traer la opacidad. Y, uh, la báscula va a estar en uno. El opacidad va a ser del 100% y el preset va a serlo. Está fuera de un cuatrimestre y 0.5. OK, así que ahora echemos un vistazo y algo así entenderemos. Si ven aquí que cada uno de estos elementos está afectando el gatillo de interacción en este momento, es el proyecto rápido. Pero, ¿a qué te refieres con gatillo de interacción? Lo que significa que si agrego esta escala y propiedad global al elemento en sí, y estoy animando el elemento, no tengo que borrar múltiples copias. Sólo tengo que hacer esto una vez, sólo una vez, y va a afectar cualquier elemento. Añado este dedo de interacción porque lo que pasó antes fue aquí El gatillo fue la sección derecha, pero lo elemental, si se infectó o algo más, pero aquí, el gatillo y el elemento que se está infectando son exactamente las mismas cosas. Entonces, en realidad echemos un vistazo rápidamente y veamos cómo funciona esto. Está bien, Entonces cuando escale entrevista, se puede ver ese tipo de habilidades en lo correcto, pero no funciona aquí porque no aplicamos a esto. Entonces lo que podemos hacer es que todo lo que tengo que hacer es ahora, ya que todo esto es la misma clase, ¿no? Porque todos estos son Project rapero. De acuerdo, me voy a ir. Y en la entrevista de pergamino, voy a decir clase de efectos. De acuerdo, entonces ahora cada elemento, Ok, eso tiene esta clase, acuerdo? Y podemos decir Project rapero, porque esa es la clase base se va a poner efectiva con esta escala y animación global . De acuerdo, entonces todo este elemento va a asustar ¿verdad? Porque esto en sí mismo es el detonante sobre esto mismo es el elemento que está siendo afectado. Está bien, ahora sigamos adelante y echemos un vistazo a esto. Entonces ahora puedes ver que este asustado y este chico Ahora voy a joderme un poco más. Se puede ver esto también asustado. Y esto también asustó que empezó. Ahora bien, aunque si miras por aquí que configuramos Project Rapper, en realidad puedo seleccionar incluso este elemento. Muy bien, las habilidades rapero Ok. Y puedo añadir Vamos a seguir adelante y seleccionar eso de nuevo. Habilidades rapero. Puedo seleccionar desplazado a la vista, ¿de acuerdo? Y Cuando digo entrevista de desplazamiento, inicia una animación. Yo puedo elegir eso. mismo, ¿verdad? Y ahora cuando voy dentro de ella, se puede ver que la clase ha cambiado. Se lo cambió automáticamente porque estoy afectando el gatillo de interacción. Correcto, Así que esto lo cambia automáticamente. Esta es una forma realmente genial de duplicar animaciones en todo tu sitio web. Entonces ahora si sigo adelante y echo un vistazo, está bien. Y lo otro es que también quiero hacer efecto a la clase. De acuerdo, Así que vamos a desplazarnos hacia abajo, y se puede ver que este tipo de derecho animado, Vamos a echar un vistazo otra vez. Voy a volver a subir y voy a previsualizar de nuevo, y se puede ver que tipo de escalado. Pero queríamos hacer efecto a todos los demás como pero correcto. también lo somos. Haz esto bastante sencillo. Tenemos al Howard Mouse. No obstante, lo siento. No la mayor parte de lo que queremos a la entrevista escolar. Y ni siquiera soy un offset liberal. Está bien, voy a ir con un offset off, Diga 20% ¿verdad? Y puedo ir y decir clase de efectos. Entonces ahora y puedo elegir una clase para ser rapero habilidades ahora cada uno de estos elementos se va a animar. Esto en sí es un disparador, y esta en sí misma es la animación que se va a ver afectada. Así que adelante y previsualiza este derecho. Se puede ver que eso se ve afectado ahora mismo. A pesar de que cuando estábamos configurando la animación, agregamos esta clase, ¿no? Pero ahora sigue afectando a esta clase porque el disparador de interacción es el mismo que el elemento que se está animando, ¿ verdad? Correcto. Ahora, ¿qué pasa si salimos de ti, verdad? Queremos tener una animación para eso también. Entonces sigamos adelante y hagamos eso. Entonces cuando salgamos, si vas a decir, empieza una animación y aquí, voy a duplicar esto Ok on, voy a decir escala, y voy a vender el 2do 1 y voy a decir escala en global y se va a escalar globalmente, ¿verdad? Está bien. Y ahora queríamos por defecto a su estado original, que va a ser este, que es 0.85 y cero. De acuerdo, así que voy a seguir adelante y borrar estos dos. Y para estos dos, voy a quitar el dedo del pie el estado inicial, y voy a seguir adelante y poner la duración a cero. Porque en cuanto te salgan estos pergaminos, les quiero el dedo del pie. Quiero que los dedos del pie al instante. Adelante y vuelve a ser 85% y a volver atrás siendo 0% opacidad. Correcto. Entonces echemos un vistazo. De acuerdo, entonces aquí vamos. OK, Esto anima en esto anima en Fantástico. Está bien. O sea, te saco escala. No pasa nada. No estoy muy seguro de cuál elemento. Yo lo agregué para hacerlo Waas por este elemento, ¿no? Entonces vamos a seguir adelante y aquí voy a decir clase, lo cual está bien. Voy a bajar por aquí también y seleccionar el proyecto Rapid. Y aquí tienes desplazamiento hacia fuera de ti. Voy a decir iniciar una animación y vamos a elegir la escala fuera de global. Y ahora debería funcionar perfectamente. Correcto. Entonces ahora estos funcionan, Cuando vuelvo y vuelvo en el animado otra vez, vuelvo y vuelvo y nunca me vuelvo a encontrar. Lo mismo con esto. Entonces ahora preguntándonos estos viniendo al puerto de vista se escalan en Todo bien. Y si vuelvo, otra vez hay matanzas. derecho. Entonces salgo ahí fuera, reinicio, y ellos vuelven ahora mismo. Algo que quiero hacer aquí es que para esto quiero contra set 20 como el offset y otra vez por aquí. Probablemente quiero poner 10 como el oficial para escalar fuera. También para escalar fuera. Yo quería ser cero, verdad, porque quería dispararme instantáneamente para esto. Podemos venderlo por 20. Entonces volvamos a echar un vistazo rápidamente. Muy bien, aquí vamos. Fantástico. Volvamos a subir. Sí. Aquí vamos. Justo en esto. Pero en este hallazgo ¿ya? Está bien. Por lo que esto se hace más o menos. A continuación, tenemos esto también, que se hizo bastante. Tenemos esto de nuevo, que también se hace bastante. No quiero agregar ninguna animación a esto. ¿ Sabes qué? Podríamos hacer eso. Adelante y seleccionemos la imagen testimonial, ¿de acuerdo? O sea, el bloque testimonial y sigamos adelante y agreguemos el gatillo de entrevista de pergamino. Y vamos a seleccionar la escala en global, y vamos a establecer que esto sea 20 y voy a bajar. A lo mejor voy a poner este 1 a 10 en realidad. Está bien. Y el desplazamiento hacia fuera para ti en un selecto, selecciona animación y elige escalar global. Y no vamos a afectar a la clase también. Para que todos los demás elementos con el testimonio de tipo de la clase en bloque obtengan un factor. Entonces veamos cómo se ve esto. Correcto. Entonces me voy a desplazar, y se podría ver tipo apagado visible justo en. Este también entra a la vista. El puerto y su caso. Correcto. Fantástico. Ahora queremos dedo del pie. Asegúrese de que funcione correctamente. No estoy seguro de por qué esto no se está afectando. Ah, necesitamos la razón por la que no está funcionando porque necesitamos elegir la clase base. Y ahora va a funcionar porque esto no tiene el combo Plus Así que volvamos a echar un vistazo rápidamente . Entonces vamos a desplazarnos vamos a desplazarnos, y esto es visible. Esto sería visible. Y esto también se vuelve visible ahora mismo para la fotografía de nuevo. Creo que no quiero cambiar nada. This luce bastante bien. Esto también se ve bastante genial. Y esto también se ve bastante genial. Ahora que hemos hecho los que están ahí van a crear un poco más interacciones y animaciones, y vamos a añadir más elementos para hacerlo mucho mejor. Entonces los veo en el siguiente video. 43. Crear una animación de barras de progreso: Muy bien, chicos. Entonces de esta manera vas a seguir adelante y crear son realmente cool y divertido progreso. Pero lo que básicamente sucede es como los pergaminos pagados que se puede ver una parte de progreso en la superior de la pantalla que se mueve de izquierda a derecha. Correcto. Entonces sigamos adelante y acumulemos. Entonces vamos a dar primero la barra Progreso y el progreso, pero es un bloque sordo muy simple, ¿ verdad? Eso es todo. No hay nada. morteros quieren seguir adelante y seleccionar el que conoces, el cuerpo. Está bien, voy a colapsar todo y voy a crear un nuevo bloque div, ¿ verdad? Y solo voy a mover este punto muerto justo a la cima porque quería estar encima de todo, realidad, Realmente No importa. Muy tous off American apenas incluso por debajo de la barra de navegación, porque lo vamos a mover en base ZIS. Entonces primero voy a seguir adelante y llamar a esta barra de Progreso, y voy a darle un con descuento al 100%. Por lo que se quita un 100% de descuento del valor de la pantalla y estaban dando una altura de cinco picks es solo un valor de píxel muy pequeño y voy a seguir adelante y añadir un color. Y en este caso, voy a añadir este color CNN. Si es un $2 tal vez podrías simplemente ir por el gris claro o el doctorado. Lo que sea que pienses, Werksman, Eso es todo. hace una barra de progreso. Ahora, lo que voy a hacer es que me voy a ir y voy a elegir posición. Y tenemos cinco propiedades. Miramos a Sticky. Echemos un vistazo a las posiciones fijas y al elemento relativo a la ventana del navegador. Por lo que se mantiene en su lugar ya que las páginas atornillaron algo bueno por delante y sólo dicen fijo. De acuerdo, Así que lo iba a hacer es que se va a quitar eso de la a la superficie y se va a poner en un avión tres D. Está bien, entonces lo que significa que está encima de los otros elementos. Pero antes de hacer eso, necesitamos definir dónde se va a colocar. Ahora, flujo de aire nos da ocho presets. Voy a elegir el que dice arriba. Por lo que ahora el esto va a ir encima del terreno de juego en la derecha, como dice una buena acción, la posición es fija con relación al cuerpo. Está bien. Y lo que significa esa dirección, Cruel. Se puede ver que su progreso. Pero, ¿eso está en la parte superior para que sea mucho más visible? Lo que voy a hacer es ir adelante y cambiar el color Teoh este color público para que podamos verlo mejor. También puedes agregar ingrediente si quieres, pero en este caso, solo voy a hacer que sea un color sólido, ¿de acuerdo? Y sí, eso sí parece bastante bueno. Ahora, lo que tienes que hacer es añadir un gatillo. ¿ Todo bien? Tenemos que enemigo. Entonces vamos al personal de interacción. Y luego voy a decir Page trigger, acuerdo? Y elegiré el que diga mientras la página se desplaza. Entonces mientras esta página se desplaza, quiero que la barra de progreso se anime. OK, así que cuando haga clic en comodín páginas desplazando ahora vamos a elegir una acción en Fueron animación de desplazamiento segura en. No tenemos ninguna animación de desplazamiento. Así que adelante y elige una, y voy a decir habilidad. De acuerdo, entonces obviamente nosotros así como puedes ver, tenemos 0% de descuento en la página y luego tenemos 100% de descuento en la página. Puedes seguir adelante, seguir adelante y sumar cualquiera de ellos en el medio si realmente quieres. Pero lo que voy a hacer es que voy a seguir adelante y sólo elegir cero y 100 porque eso es más o menos lo que necesitamos ahora para el progreso. Pero 0%. ¿ Cómo va a ser así? Como puedes ver Oh, aquí tenemos la X y y y Z en la X e y y son muchas veces pueden enlazarse, correcto, Porque tenemos este enlace, el primero reutilizable desvinculado. Está bien. Y luego voy a ir al valor X, acuerdo? Y voy a bajar eso a cero y por el progreso. Pero voy a volver a revisarlo, y voy a poner el valor X a qué? Ok, entonces ahora veamos cómo se ve esto. Entonces cuando empiezo, no hay nada ahí. Y como escuela se puede ver que tenemos este progreso, pero, ya sabes, eso es algo así. Pero la cosa es, se puede ver que la promesa, pero se está escondiendo, ¿ verdad? Es que es una especie de estar escondido por los elementos o que, como puedes ver, está detrás de esta imagen. Entonces ese es un tema que tenemos que arreglar justo en. El segundo es que se está escalando desde el centro. Pero, ¿cómo se hace una escala de izquierda a derecha? Correcto. ¿ Cómo hacemos eso? OK, así como puedes ver, aquí va detrás de todos estos elementos. De acuerdo, entonces, ¿cómo arreglas eso? Entonces sigamos adelante y arreglemos primero el valor Z. Lo primero que quieres hacer es aquí en las propiedades. Tenemos esta opción llamada Z Value. En este momento, está establecido Índice. Lo que queremos hacer es realmente darle un número muy alto. Por lo que está encima de todos los elementos. Entonces digamos que lo dijimos dedo del pie 100. este momento 100 es un número de valor Z, que es bastante alto, y está bastante por encima de todos los demás elementos. Ese palo. Mira. Está bien, Así que empezó esto, y ahora se puede ver que se está superponiendo la imagen porque está arriba, bien. Y se está superponiendo a todos los demás elementos porque es bastante alto en la noche de valor Z . Entonces ahí vamos. Se ve perfecto. Ahora. Queríamos escalarlo desde la izquierda, ¿verdad? No queremos que escale desde el centro. Entonces, ¿cómo hacemos eso? Nos vamos a ir, es podemos bajar aquí, hacer las opciones, Corliss transformar. Y puedo hacer click en este ícono y en la estética de origen de transformación voy a elegir el que dice izquierda, Muy bien, Muy bien, porque quiero que el punto de anclaje Toby se quede. Y ahora lo que va a pasar es que va a empezar desde el borde izquierdo fuera de la pantalla, ¿ verdad? Ahí vamos, y se va a atornillar todo el camino hasta el fondo de la pantalla, acuerdo? Y va a seguir moviéndose, acuerdo? Y obtenemos algo como esto, ¿verdad? Y esto más o menos de cómo despejamos esta bonita parte de progreso de fantasía, ¿ verdad? En el próximo año, vamos a sumar otra interacción. Entonces son ustedes chicos en el siguiente video 44. Crear una interacción con hover en el componente de proyecto: Muy bien, chicos. Entonces en este video, lo que vamos a hacer va a entender concepto muy importante. Ahora, haz este diseño. He ido adelante y he hecho un cambio más pequeño donde acabo de localizar esta interacción donde cuando me coloqué sobre cada una de estas cartas, aparece este cuadro sort off y tiene esta flecha. Eso lo tengo bien. Y queremos tener esto para cualquier elemento. Podríamos tenerlo en todas estas tarjetas. Podemos tenerlo probablemente en esta tarjeta también. No estoy realmente seguro de dónde quieres usarlo, pero acabo de ponerlo aquí por si acaso. Correcto. Y estaremos explicando un concepto muy sencillo. Ahora. Algo que anunciaste una cosa que no estamos aquí es que, como puedes ver, estos elementos de texto que están ahí dentro tienen un, ya sabes, un espaciado adecuado de 40 píxeles en la laptop y 32 en la parte inferior. Pero este elemento, o sí desafía todo eso. Está bien. Se va en contra de todo esto contra las reglas que se han aplicado a la casilla. Muy bien, ¿ cuál es este golpeando tan duro? En realidad vamos adelante y desafiamos esto y también decidimos dónde decidimos dónde queremos colocar esto, ¿ verdad? Entonces vamos a seguir adelante y averiguarlo, y vamos a estar aprendiendo un concepto muy nuevo, que es súper importante. Entonces entrémonos en esto. Entonces un búfalo romano y lo que hacemos es así voy a seleccionar este cuadro descriptivo del proyecto que tenemos, ¿ verdad? Y aquí es donde queremos poner en ese elemento. Tan impresionado. Control, Ian. Creador sí bloqueó primero. Está bien. Y este es el bloque es de 48 por 48. El sistema de pick va a decir, ya sabes, muerte de Adol, acuerdo? Y voy a hacer este ancho y alto fuera 48 por 48 bien? Y seguiré adelante y cambiaré el color de fondo para que sea este. De acuerdo, entonces ahora tenemos esto, Adam. Ahora, esta caja está siguiendo claramente los valores en las propiedades fuera de esto, ya sabes, teniendo ese bateo inferior y superior. Y ahora voy a seguir adelante y agarrar el ícono de flecha, que es que tengo una habitación que va a agarrar este svg arte adulto y para ello dentro. Obviamente, queremos centrar esto, así que voy a seguir adelante y seleccionar al adulto sordo, y voy a flexionar esto para que todo esté en el centro y el se vea bastante bien. Ahora vamos a hacer es voy a seleccionar la flecha, Dev. ¿ De acuerdo? Y voy a bajar aquí para posicionar ahora voy a crear en posición primero, y luego voy a seguir adelante y explicar lo que significa. Entonces voy a seguir adelante y seleccionar Absoluto ok, Cuando digo absolutamente puedo ver que sucedió algo que este adulto de bloque está ahora en el espacio Z , lo que significa que no se está limitando a ninguna de las propiedades de esta caja. De acuerdo, ahora, lo que voy a hacer es que voy a elegir una de estas propiedades a la 1/2. Ahora, quiero que esto esté en el fondo, ¿verdad? Fondo significativo. Correcto. De acuerdo, ahora ¿qué ha pasado? Ha desaparecido por completo. En realidad, no lo ha hecho. Entonces veamos realmente dónde está esto, ¿verdad? Entonces vamos a ir aquí y vamos a ver en su got se han ido a algún lado. Es que es todo está aquí, como la palabra está haciendo por aquí? Si digo a la parte superior izquierda, va a la parte superior izquierda. Si digo abajo a la izquierda, viene a abajo a la izquierda Lo que vamos a hacer es ir a ver la información o aquí. Entonces, como se puede ver, dice posición. Por lo que la flecha sorda bien, se está posicionando a la parte inferior izquierda del cuerpo porque dice relativo al cuerpo. De acuerdo, Ahora, lo que queremos hacer es que queremos cambiar esto. Un objeto relativo. Entonces lo que vamos a hacer va a ir al elemento de periodo, que es esta descripción del proyecto, y voy a cambiar la posición de eso de estática a relativa. Ahora, esta flecha def ahora se está posicionando al fondo izquierdo absoluto del bloque de descripción del proyecto porque dice que es un relativo a. ¿ Y cómo hicimos eso? Al hacer la descripción del proyecto noche relativa. Por lo que el padre siempre debe ser relativo con el niño. En este caso, que es este bloque narrativo necesita ser absoluto. Ahora queremos que esto esté arriba abajo, ¿ verdad? Haga clic en abajo, ¿verdad? Correcto. Estado que voy a hacer es que sólo voy a seguir adelante, copiar esto y basarlo en cada uno de estos. Está bien, Ve a baste y basarlo. Ahora mismo. El caso es que Nosotros no queremos ver a este adulto sordo en eso todo el tiempo. Queríamos estar ahí cuando pasáramos sobre él. Entonces, ¿cómo creamos la animación? Podemos ir al asunto de la interacción, ¿verdad? Así que realmente rondaba la interacción. Ahora, si le echan un vistazo al rapero normal Lo sentimos, no al rapero normal, al Project Rapper. Agregamos, ya sabes, algunas animaciones en esto. De acuerdo, ahora vamos a tener una nueva animación. Eso es un hover mouse hover. De acuerdo, así que aquí uno es que cuando vayamos seleccionamos y digamos, iniciamos una animación, ¿de acuerdo? Y voy a crear uno nuevo. Voy a llamar a esta animación addle. Está bien, Tienes más icono. Y ahora voy a decir mueva porque quiero mover esto así a medida que se mueven. Y obviamente no queremos animar al rapero proyecto. Queremos escribir, como, cambiar objetivo, y queremos animar la flecha, def. Vale, Ahora vamos a crear toe to off ellos porque uno va a estar fuera de ti y uno va a estar dentro de este derecho, Entonces el estado inicial va a ser diferente, así que tenemos que seguir adelante y decir set como inicial estado y quiero hacer es voy a mover la X por 48 arreglos bien, en la Y también por 48 picks ahora está bien, Y voy a seguir adelante y duplicar esto, ¿de acuerdo? Y esto ahora va a ser normal, que va a ser cero, y va a ser cero, acuerdo? Y vamos a sumar una transición fuera. Está fuera de cuarto, acuerdo? Y, ya sabes, acaba de dar un desplazamiento de radio normal aparte ahora mismo. Vamos a jugar esto. ¿ Todo bien? Se puede ver que son 48 picks está bien, y como que brota dentro. Correcto. Echemos un vistazo otra vez. Muy bien, Así que está afuera por aquí. Está afuera por aquí. Entonces, ¿cómo te aseguras de que no lo sea? No es visible. Si recuerdas, usamos un inmueble College desbordamiento que vamos a hacer es voy a seleccionar este proyecto. Rapero, ven aquí y aquí. Queremos ver el dedo del pie de desbordamiento. Golpearlo. De acuerdo, Ahora, la cosa es, tenemos esta clase combo, ¿ verdad? Y queremos hacer efecto solo al rapero del proyecto. No queremos disparar para que el fondo del píxel esté separado. Tener esta propiedad de desbordamiento. Entonces cuando haga clic en este botón que dice heredar cuatro selectores y voy a elegir Project Rapper Y ahora, cualquier cambio que haga afecta sólo al rapero del proyecto. Entonces vamos a seguir adelante y decir Desbordamiento oculto. Muy bien, y luego volveremos con espalda. Y ahora este rapero proyecto sólo tiene el flujo de petróleo en fondo de 24 píxeles. Arjun sólo tiene esto en este momento. Vayamos a echar un vistazo. Entonces ahora eso es realmente Dios. Voy a tenerlo adentro. Se puede ver que ese botón entra bellamente. Genial. Ahora vamos a seguir adelante y revertir esto también. Entonces voy a ir a Mouse hover y voy a elegir hover fuera y voy a decir que empezó animación. Y aquí en Hubbard, no hago animación en Ammán para duplicar esto Va a decir hover animación hacia fuera. Está bien. Y ahora vamos a seguir adelante y borrar éste, acuerdo? Y vamos a quitar esto como estado inicial. Ahora esto otra vez. Queríamos restablecer para ser 48 48 Quiero establecer la duración de este para que sea cero, porque quiero que se animen instantáneamente a 48 40 que está fuera de la caja. Entonces ahora si le echas un vistazo bien, cuando lo tengas y puedes ver esto, y cuando te vayas, apaga ahora mismo, creo que lo que hicimos fue, uh no debí haber hecho este punto cero cero. Debería volver a hacer un 0.5 y también decir que es nuestra corte. De acuerdo, Ahora, echemos un vistazo. ¿ Todo bien? Está bien. Se ve impresionante. Ahora, la cosa es que no funciona en ninguno de los otros, porque necesitamos definirlo. Entonces lo que vamos a hacer es que voy a seguir adelante desde que definimos esto. Queremos cambiar esta clase del dedo del pie, acuerdo? Y la clase debería ser Project rapero. Y ahora, si le echas un vistazo, debería funcionar en todo de la derecha. ¿ Verdad? Y eso es realmente, realmente genial Una emisión. Ahora, lo que podríamos hacer es seleccionar esta flecha, bloque Dev, derecha. Y podemos seguir adelante y mover esto a la cima, ¿ verdad? Además, si quieres. Correcto, entonces va a estar en la parte superior, ¿verdad? Lo que sea que necesites. Pero en este caso se va a decir abajo a la derecha, verdad, Y ese tipo de mueve todo al fondo, ¿ verdad? Entonces eso es más o menos sobre absoluto y relativo. Y sigamos adelante y publiquemos esto rápidamente. Y echemos un vistazo a cómo se ve esto en su sitio web completamente cargado. Yo quiero ir a puerto para su curso y control son para re lord derecho y bajar. Y luego nos vamos. Entonces cuando yo rondo, lo puedes ver maravillosamente, entra y sale, y se ve super cool, como si solo pudieras sentir las animaciones y es súper impresionante. Está bien, así que eso es todo para este video, y los veo en el siguiente video. 45. Envoltura del sitio web: Muy bien, chicos. Entonces en este video, por fin vamos a terminar el proyecto. Les voy a mostrar un par de cosas que ustedes que quizá nos hayamos perdido o algo que quizá deban usar cuando están construyendo su sitio web. Entonces voy a seguir adelante y no puedo explicar y simplemente terminar este video. Entonces lo primero aquí es que tenemos cuatro grifos, ¿ verdad? Tenemos las propiedades. ¿ Cuál de la pestaña de estilo? Entonces tenemos estos ajustes y luego tenemos éste que se llama gestor de estilos, que básicamente tiene una lista fuera de todas tus clases, correcto. Y algunos días antes de crear, es posible que no hayas usado un par de clases para un par de elementos. Entonces por eso tenemos este botón donde puedes limpiar. Entonces, como pueden ver, tener 12 clases que no he usado. Y qué montón de estas diferentes, que no he usado por lo que quieres hacer va a seguir adelante y primero eliminar todas estas clases porque tal vez no estés usando estas escrituras saldrá adelante y optará por quitar clase, Está bien, y ahora todo va a estar bien. porque los árbitros en última instancia van a ver lo que no agrega. Y cuál es la clase extra y se va a quitar todo ese gran impresionante. Entonces ese es el número uno. El número dos está aquí. Podemos decir publicar. Y si quieres agregar un dominio personalizado, canaliza un dominio personalizado y también tienes ajustes avanzados y estos son los ajustes predeterminados . Te sugeriría que lo dejaras tal como es y no lo que tú demasiado al respecto. Pero asegúrate de que si quieres en un dominio personalizado, vamos a dar click aquí. Vamos en realidad a eso y veamos cómo el, uh, uh, cuadro de sección de dominio Muy bien. El siguiente es Puedes compartir tu proyecto, lo que significa que si quieres mostrarle este proyecto en particular a alguien, está bien, y como que quieren ver cómo se ve, en realidad puedes enviarle un enlace, ¿ verdad? Si enciendes esto, entonces puedes copiar esta web fluyendo. Ahora podrán hacer otras cosas. Pero los cambios que hagan no se salvarán, ¿verdad? Cualquier cambio que realices en tu proyecto se va a compartir. Todo lo demás no es así si quieres mostrar tu trabajo son el progreso realmente puedes compartir este enlace con ellos. Está bien. A continuación, si terminas subiendo por el plan de cebo y sí tengo plan de ayuda profunda, puedes seguir adelante y exportar la esquina. flujo web te da hermoso html CSS, JavaScript y los activos, que, que son, ya sabes, ordenadamente armados y en realidad puedes prepararte, es pelea la cual obtienes un zip y puedes hospedarlo en cualquier otra plataforma fuera de tu elección. Si no quieres hospedar en niveles que esto es muy exportas la cancha. Está bien. Subiendo al siguiente es que ahora tenemos múltiples puntos de ruptura. Nos fijamos en cuatro puntos de ruptura, que es sólo detener la tableta de la mafia del paisaje por paisaje y más cuarto por donde también te da tres puntos de ruptura adicionales para la fregona para el punto de ruptura del escritorio en sí. Correcto. Entonces tienes por 10. 80 tienes a 12. 80. Tenemos un 14 40 fin de jardín 1920. Ahora puedes seguir adelante y personalizar el look para cada off estos puntos de descanso, pesar de que todos son la misma parte de break de escritorio, ¿ verdad? Porque cualesquiera cambios que hicimos no hemos venido haciendo hasta ahora están afectando a todos estos tres puntos de ruptura. Cierto, porque estos son puntos de ruptura para portátiles. Pero si quieres seguir adelante y cambiarlos por estos dos puntos de ruptura, tal vez 1920 14 40 van a tener un estilo particular, pero 1920 va a tener una diferencia de tiempo. A lo mejor tienes cinco columnas en 1920 14 40 donde estás. 10 columnas en 1920. Puedes hacer eso, verdad? Entonces eso es otra cosa genial. Genial. Ahora lo otro es que aquí en el panel de activos, si haces clic en el icono, nuestro icono de engranaje, vamos a ver que tenemos algo llamado o texto Ahora los profesores de Aleka terminaron una descripción fuera esta imagen para lectores de pantalla o si la imagen no logra señalizar. Entonces básicamente lo que pasa es que a veces hay personas que son ciegas y no serían capaces de leer página web. Entonces hay una tecnología llamada los lectores de pantalla, que van a leer este texto que asignan para que la gente entienda qué es este objeto o qué es este elemento o qué es esta imagen. Por lo que siempre se quiere agregar nuestros tecnicos, y esto es extremadamente bueno para un CEO también tiene ir adelante y agregar en todo el Así, por ejemplo, yo diría que yo diría proyecto en un enlace. Ahí es donde yo llamaría a esto. Está bien. Y para esto diría logo épico, Correcto. Entonces, ya sabes, adelante y agrega un texto engrasado a todas y cada una de las imágenes que tengas y eso va a hacer que tu sitio web sea mucho mejor en términos de CEO y en términos de usabilidad también. Muy bien, Fantástico. Ahora aquí tienes todas tus páginas. Ahora no vamos a estar cubriendo las páginas de CMS o de comercio electrónico. Entonces vamos a estar viviendo eso por ahora, y tú puedes elegir. Y si haces clic en el icono de configuración, vas a conseguir una gran cantidad de ajustes. Y esto es lo que quieres hacer, ¿ verdad? Entonces aquí en ASIO, estableciendo la orden especificada información, Así etiquetas de título. Entonces voy a llamar a este Robin Williams Robin Williams y decir, diseñador de productos, Así es como se va a ver en tu sitio web en Google y alguien tan desesperado, y puedes agregar alguna metadescripción diciendo que Robin Williams es un diseñador de productos de Milán, Italia, y sabes que puedes decir lo que quieras, justo ahí vamos. A continuación, tenemos imagen gráfica abierta títulos gráficos abiertos son los que podríamos. Si no sabes lo que es, está totalmente bien. Se puede tener, se puede decir lo mismo que la etiqueta de título CEO, y se puede decir Samos como su descripción de materia. Entonces, básicamente, lo que significa la configuración de gráficos abiertos es que cuando se debe, cuando alguien comparte esto en WhatsApp o Facebook o Instagram o cualquier cosa, esta forma, como un enlace con la imagen de una empresa, ¿verdad? Y tenemos esta imagen gráfica abierta. Asegúrate de que tus imágenes sean 1200 píxeles por 6 30 píxeles y tienen una relación de aspecto de 19.1 es a uno . Ahora he ido adelante y he creado uno, pero puedes seguir adelante y crear cualquier cosa que quieras. Entonces déjame solo mostrarte cómo se ve rectal. Aquí. Estoy en fig MMA, y esta es la imagen gráfica abierta que he hecho. También vamos a estar necesitando estas telas sobre iconos e iconos Web click, pero hablaré de esto más adelante, pero para Now, esta es la imagen gráfica abierta que quieres, obviamente, como puedes ver que talla 6200 por 630 así que queremos hacer es una vez que lo exportes, puedes poner lo que quieras en este. Quieres volver al flujo Web y vendrás aquí a la sección de imágenes y luego dar click en subir y vamos a seguir adelante y subir la imagen gráfica abierta. Y como puedes ver, ahora se está subiendo. Ahora vamos a hacer es hacer click en el icono de engranaje y aquí al lado del nombre. Tienes un enlace, ¿verdad? Ahí es exactamente donde se almacena la imagen. Entonces, ya sabes, copia eso y vuelve a la configuración de página. Y aquí en la configuración de imagen de gráfico abierto que quieras, solo tienes que seguir adelante y basar eso bien. Y ahora también tienes la configuración de búsqueda del sitio, que, y si lo deseas, puedes excluir la pala de los resultados de búsqueda. Por lo que Google excluirá este pitch en particular si eso es algo que necesitas. Pero no creo que alguna vez hiciera eso. Y también tienes código personalizado, que no vamos a hablar. Entonces todo lo que voy a hacer es concebir, y eso va a seguir adelante y salvarlo. No, echemos un vistazo rápidamente. Howard, mira. Entonces así fueron las vistas previas de gráficos abiertos. Mira donde tienes algún texto o información y tienes tres. Estás bajo aquí. Y, ya sabes, también tienes la imagen gráfica abierta, ¿ verdad? Entonces eso es más o menos sobre la configuración del hogar. Ahora, una vez hecho eso, no vamos a entrar en la sección de avance, vamos a ir dentro de los ajustes del proyecto, ¿ verdad? Y aquí, vamos a hacer un par de otras cosas. Está bien, Así que tenemos el 1er 1 eso es todo, General, he ido adelante y sólo cambiarme el tema me por curso de portafolio R w para Robin Williams . Y puedes cambiarlo por lo que quieras. Y puedes hospedarlo en el piso y también conseguiste tela en y premio a los replicantes. ¿ Qué? Básicamente estos son estos pequeños iconos que ven por aquí, ¿ verdad? Y estos son la pila de iconos. Se quiere tener. Entonces voy a seguir adelante y exportar esos también y subirme, y he ido adelante y acabo de subir estos bien y Obviamente tienes veces. Y por aquí ahora, también tienes este branding de flujo de trabajo. Y lo que mejor quema es básicamente esta etiqueta que dice hecha en Buffalo. Ahora, una vez que te levantas vas por un plan de pago, puedes apagar esto ¿verdad? Y eso ya no estará ahí. Pero si estás usando Web cerca abdomen que esto estará ahí, ¿ verdad? Excelente. Ok, ahora vamos al hosting abajo Ahora, aquí en la pestaña de hosting. Obviamente, donde quieras hacer va a seguir adelante y elegir tu plan particular que quieres un negocio o empresa de CMS básico. Y una vez hecho eso, conseguirás muchos ajustes por aquí. Ahora, en realidad recomiendo revisar cada uno de estos enlaces que no están ahí, porque cada servicio, cada plataforma de hosting tiene un asunto diferente fuera de vinculación con flujo de pozo. Entonces como que quieres revisar documentación o eso y revisar documentación por aquí donde Flo tiene un par de tutoriales y estoy seguro de que estos enlaces definitivamente te ayudarán a conseguirlos optronics o definitivamente sí echa un vistazo a esto si esto es consideración y si tienes cualquier duda sobre hosting bien, entonces tienes el editor editor es un lugar donde puedes agregar colaboradores para que dos personas puedan tener acceso a un solo proyecto. No mucho a ella. Y luego tienes que construir. Ahora mismo. Esto es algo que realmente no queremos echar un vistazo porque no tiene nada que ver con nuestro portafolio. Sí, tú como tu es importante ahora mismo. Ahora estamos más o menos hecho un montón de cosas con respecto a s CEO, y te quiero fuera de la vista plan. Es posible que tengas un par de configuraciones y solo puedes llenarlas. Va a ser muy sencillo aquí. Y como puedes ver, puedes establecer metaetiquetas y descripciones que ya hemos hecho y abrir imágenes gráficas, que ya hemos hecho. Entonces esto se hace más o menos. Lo siguiente son las granjas. Ahora mismo, seguimos adelante y en realidad creamos una granja. ¿ Verdad? Y en realidad puedes agregar todos los ajustes están aquí ahora te concedes dice cuando una granja se envía a un sitio web de editor donde flow recopila automáticamente el envío y lo muestra aquí, correo electrónico o defecación es opcionalmente puede ser habilitar y vendrá de un le marca mucho correo electrónico. Lo que significa que cuando alguien envió, cuando alguien envía algo en tu página web, recibes un correo electrónico o defecación para que puedas elegir definir toda esa información por aquí, ¿ verdad? Y tienes muchas otras cosas que puedes hacer ahora. Estas son cosas bastante avanzadas, por lo que puedes consultar todos los videos que están relacionados con las granjas. Está bien. Todos los enlaces estarán ahí en la descripción fuera del video para que puedas echar un vistazo a esos en . También tienes, como, como, presentaciones de formularios donde puedes ocultar los envíos de granjas y todos los envíos que significan van a venir aquí. Entonces, como puedes ver, hicimos algo donde agregamos un nombre de post esa humildad y la sensación particular que dice hola luz. Por lo que toda esta información es el abad tú y tú condonas o la C s. nosotros apagamos todo esto si necesitas. Por lo que todos estos envíos de formularios van a estar aquí. Se puede dar click en show mas, pero no tenemos ninguno. Entonces eso es mucho. No, ya vamos a ver fondo así que no queremos ir allí. Vamos a volver a las copias de seguridad en las copias de seguridad. Tenemos somos piso automáticamente. Es mucho respaldo. Por lo que en caso de que cometieras algún error, puedes seguir adelante y previsualizar o restaurar esos. Entonces tienes integraciones e integraciones es bastante complejo. Por si estás usando alguna fuera estas cosas que agarran papa A ser accedo go go cantidades y cosas esta cosa bastante avanzada. Entonces no nos vamos a molestar por eso también. Y si Dios, te has acostumbrado. Entonces una vez, tienes casi todo esto hecho, básicamente lo hiciste. Todo lo que tienes que hacer es simplemente ir a publicar y decir, Publicar a la ref Dominio bajo en un dominio personalizado y eres bastante bueno para ir. Entonces eso es mucho para este video. Y son ustedes chicos en el siguiente video. 46. ¿Qué sigue?: Oh, hey, hola. Estudio no te vio del todo que no esperaba que nadie llegara al final. Por supuesto. De acuerdo, aquí están. Eso es genial. Eso es fantástico. Pasaste por todo el curso. Sé que ha sido un largo viaje. Ha sido un largo viaje en Finalmente lo hizo hasta el final. No mucha gente está haciendo eso. Tan buen trabajo. Hablemos de lo que sigue. Ahora estamos a través de ofertas mucho más que solo agua corta en el curso. Hay tantas cosas que no hablé de tal caja de luz, como videos a video de YouTube. Tanto. El animación, una tonelada de cosas que eran cloruros de flujo, que no están cubiertas en esta figura porque no quería que se sintiera como una especie de manual para fluir. Más bien, esto te daría una buena comprensión de lo básico y, ya sabes, asegurarte de que tu fundación sea fuerte. cualquier momento que quieras construir algo que sea diferente a lo que deberías poder seguir adelante y hacer eso, debes entender cómo funciona. Ahora. Te recomiendo encarecidamente revisar la Universidad de Florida oscura. Yo Oh, lo siento, doctor universitario sobre Flora Yo enlace estaría en la descripción fuera del curso de todos modos. Puedes comprobarlo, y Web slow te proporciona tutoriales para todos y cada uno de los aspectos y componentes desactivados. Se acabó prácticamente todo sobre el flujo de trabajo que se parece mucho a un manual masivo, y te recomiendo encarecidamente que lo revises si alguna vez quieres. Ya sabes, diseño son muy algo que realmente se sabía que algo que no cubrí en el curso. Ahora mismo somos gripe también tiene la especie fuera. Muchos cursos, que son como de 5 a 6 videos y ellos Facturan Digital, un sitio web de una sola página son muy sencillos , ya sabes, que son muy complejos y cosas, por lo que puedes revisar esos también. Y, por supuesto, que una tonelada de tutoriales de YouTube en línea donde su gripe te enseña a hacer muchas cosas divertidas . Yo sí tengo unas cuantas Pretoria regulares fuera de mi cuenta, relativamente difícil de crear ciertos tipos de animaciones e interacciones muy estresadas, arregladas para que puedas consultar esas en mi página web más tarde. Entonces eso es más o menos para esta base de video. 10 años. Tanto por venir y ver todo mi curso. Enhorabuena una vez más por el final del curso on ¿Ustedes chicos en mi próximo video se sientan en la guardería y adiós?