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,