1 00:00:01,090 --> 00:00:02,290 ‫Instructor: Empecemos 2 00:00:02,290 --> 00:00:04,750 ‫ahora a crear realmente nuestra plantilla base. 3 00:00:04,750 --> 00:00:07,490 ‫Entonces, la plantilla en la que se basarán todas 4 00:00:07,490 --> 00:00:09,360 ‫las demás plantillas más adelante. 5 00:00:09,360 --> 00:00:12,723 ‫Básicamente, estaremos convirtiendo un archivo html normal, que 6 00:00:12,723 --> 00:00:16,163 ‫está en los archivos de inicio, a una plantilla Pug. 7 00:00:17,840 --> 00:00:19,830 ‫Básicamente, comenzaremos a crear 8 00:00:19,830 --> 00:00:21,850 ‫el diseño de esta página. 9 00:00:21,850 --> 00:00:26,450 ‫Así que este encabezado aquí y también el pie de página. 10 00:00:26,450 --> 00:00:28,650 ‫De acuerdo, no el contenido, por supuesto, 11 00:00:28,650 --> 00:00:31,710 ‫porque luego lo construiremos de manera más dinámica un poco 12 00:00:31,710 --> 00:00:33,440 ‫más tarde, de acuerdo. 13 00:00:33,440 --> 00:00:35,220 ‫Pero dejaremos todo listo, 14 00:00:35,220 --> 00:00:38,920 ‫para que luego podamos inyectar todo este contenido real 15 00:00:38,920 --> 00:00:41,053 ‫en esa plantilla base general. 16 00:00:43,030 --> 00:00:45,440 ‫Entonces, hagámoslo ahora. 17 00:00:45,440 --> 00:00:47,650 ‫Y comencemos por deshacernos de 18 00:00:47,650 --> 00:00:50,090 ‫todo este contenido que teníamos aquí. 19 00:00:50,090 --> 00:00:51,810 ‫Así que esto fue 20 00:00:51,810 --> 00:00:54,550 ‫solo para mostrarte las diferentes características de Pug. 21 00:00:54,550 --> 00:00:58,070 ‫Y ahora, abramos esta descripción general. html, de modo 22 00:00:58,070 --> 00:01:01,463 ‫que básicamente podamos convertirlo aquí a Pug. 23 00:01:02,420 --> 00:01:05,370 ‫Bien, ese fue el archivo html original que 24 00:01:05,370 --> 00:01:08,360 ‫creé para diseñar la página de descripción general que 25 00:01:08,360 --> 00:01:10,610 ‫acabamos de ver renderizada dinámicamente. 26 00:01:10,610 --> 00:01:13,810 ‫Bien, esto es lo que tenemos en la cabeza 27 00:01:13,810 --> 00:01:17,950 ‫y, de hecho, sigamos adelante y copiemos todo este código, para que 28 00:01:17,950 --> 00:01:21,053 ‫luego podamos convertir lo que falta aquí. 29 00:01:22,610 --> 00:01:26,573 ‫Bien, entonces el contenido de nuestro título es 30 00:01:27,420 --> 00:01:29,973 ‫este, entonces copiémoslo, luego eliminémoslo, 31 00:01:33,460 --> 00:01:37,980 ‫y este es el contenido de la página principal, ¿verdad? 32 00:01:37,980 --> 00:01:42,150 ‫Entonces ya tenemos el favicon, y también el estilo. 33 00:01:42,150 --> 00:01:44,980 ‫Entonces, lo que nos falta es básicamente estas 34 00:01:44,980 --> 00:01:46,990 ‫cosas aquí, para la respuesta 35 00:01:46,990 --> 00:01:51,143 ‫del desarrollo web, y también este enlace de fuente de Google, está bien. 36 00:01:52,210 --> 00:01:53,563 ‫Entonces, comenzando 37 00:01:58,280 --> 00:02:00,123 ‫con eso, inculque una 38 00:02:02,830 --> 00:02:05,610 ‫hoja de estilo, y luego tomemos esta 39 00:02:09,040 --> 00:02:11,803 ‫referencia y reemplácela con comillas simples. 40 00:02:13,970 --> 00:02:18,650 ‫Bien, entonces también quiero definir estos dos, así 41 00:02:18,650 --> 00:02:21,273 ‫que cortémoslos aquí, 42 00:02:23,890 --> 00:02:28,323 ‫y simplemente convierta lo que tengamos aquí. 43 00:02:40,099 --> 00:02:40,932 ‫Está bien. 44 00:02:42,960 --> 00:02:44,473 ‫Ah, y también las comillas simples. 45 00:02:50,470 --> 00:02:54,223 ‫Bien, pongamos este al final, 46 00:02:55,780 --> 00:03:00,730 ‫y ese es nuestro sombrero para nuestra plantilla. 47 00:03:00,730 --> 00:03:03,993 ‫A continuación, echemos un vistazo al encabezado. 48 00:03:05,640 --> 00:03:09,143 ‫Bien, básicamente tenemos todo este elemento aquí, con solo 49 00:03:10,100 --> 00:03:14,600 ‫un encabezado, de modo que la barra gris oscura que vio en 50 00:03:14,600 --> 00:03:17,140 ‫la parte superior de la página. 51 00:03:17,140 --> 00:03:18,430 ‫Entonces copiemos 52 00:03:20,500 --> 00:03:22,530 ‫esto y pongámoslo aquí. 53 00:03:22,530 --> 00:03:24,180 ‫Entonces, eso es mucho 54 00:03:24,180 --> 00:03:27,800 ‫código y verá cuán poco código será en realidad más adelante, 55 00:03:27,800 --> 00:03:29,920 ‫una vez que lo traduzcamos a Pug. 56 00:03:29,920 --> 00:03:33,480 ‫De acuerdo, y aquí vamos a poner 57 00:03:33,480 --> 00:03:37,370 ‫un comentario visible en nuestro html, que diga HEADER. 58 00:03:37,370 --> 00:03:41,070 ‫Está bien, y en realidad, eso es sin el guión. 59 00:03:41,070 --> 00:03:44,020 ‫Entonces, en el código VS, cuando presiono el atajo 60 00:03:44,020 --> 00:03:46,860 ‫de comentarios, automáticamente crea un comentario de Pug. 61 00:03:46,860 --> 00:03:49,320 ‫Pero aquí, realmente solo quiero un comentario, 62 00:03:49,320 --> 00:03:51,833 ‫que también está disponible en la salida html. 63 00:03:53,470 --> 00:03:56,690 ‫De todos modos, creemos ahora el elemento de encabezado 64 00:03:56,690 --> 00:03:59,040 ‫y veamos qué tenemos aquí. 65 00:03:59,040 --> 00:04:02,120 ‫Entonces tenemos encabezado con la clase de encabezado. 66 00:04:02,120 --> 00:04:04,680 ‫Y todo lo que tenemos que hacer para especificar 67 00:04:04,680 --> 00:04:07,330 ‫una clase es DOT y luego el nombre de la clase. 68 00:04:07,330 --> 00:04:09,410 ‫Entonces, encabezado de nuevo. 69 00:04:09,410 --> 00:04:12,530 ‫Luego, ahí, tenemos un elemento nav. 70 00:04:12,530 --> 00:04:17,480 ‫Y así, sangría y luego navegación. nav, que es el nombre de la 71 00:04:17,480 --> 00:04:19,537 ‫clase aquí de nuevo, y 72 00:04:19,537 --> 00:04:22,200 ‫luego también tenemos otro nombre de clase, 73 00:04:22,200 --> 00:04:23,880 ‫y así, otro punto. 74 00:04:23,880 --> 00:04:24,713 ‫Y eso es. 75 00:04:25,850 --> 00:04:28,550 ‫Entonces recorridos de navegación. 76 00:04:28,550 --> 00:04:32,290 ‫Entonces, si está familiarizado un poco con la arquitectura CSS, tal 77 00:04:32,290 --> 00:04:35,620 ‫vez esté viendo que estoy usando la arquitectura BEM. 78 00:04:35,620 --> 00:04:37,660 ‫Entonces, nav es el bloque 79 00:04:37,660 --> 00:04:40,260 ‫y luego aquí este tour es un modificador. 80 00:04:40,260 --> 00:04:42,500 ‫Y aquí, estos subrayados subrayados significan que se 81 00:04:42,500 --> 00:04:44,180 ‫trata de un bloque o 82 00:04:44,180 --> 00:04:45,560 ‫en realidad un elemento. 83 00:04:45,560 --> 00:04:49,293 ‫Entonces bloque, elemento y modificador. 84 00:04:50,160 --> 00:04:52,290 ‫Bien, eso no es 85 00:04:52,290 --> 00:04:54,890 ‫realmente importante, pero solo quería mencionarlo. 86 00:04:54,890 --> 00:04:57,120 ‫De todos modos, dentro de la navegación, 87 00:04:57,120 --> 00:04:59,270 ‫tenemos un elemento de enlace. 88 00:04:59,270 --> 00:05:02,920 ‫Entonces, a, con la clase de nav__el. 89 00:05:07,130 --> 00:05:10,330 ‫Entonces aquí, tenemos este atributo href, por lo 90 00:05:10,330 --> 00:05:12,973 ‫que recuerde que usamos paréntesis, y luego 91 00:05:14,230 --> 00:05:15,063 ‫href, 92 00:05:16,930 --> 00:05:18,890 ‫y lo establecemos en nada. 93 00:05:18,890 --> 00:05:22,020 ‫Básicamente, eso es lo que significa este hash aquí. 94 00:05:22,020 --> 00:05:23,470 ‫Y luego, simplemente el contenido, 95 00:05:24,690 --> 00:05:25,673 ‫todos los recorridos. 96 00:05:27,150 --> 00:05:29,450 ‫A continuación, tenemos este formulario aquí, pero 97 00:05:29,450 --> 00:05:31,720 ‫en realidad no lo vamos a 98 00:05:31,720 --> 00:05:33,240 ‫implementar en este momento. 99 00:05:33,240 --> 00:05:34,543 ‫Así que deshagámonos de eso. 100 00:05:36,260 --> 00:05:39,090 ‫Muy bien, esta es nuestra navegación. 101 00:05:39,090 --> 00:05:41,230 ‫Entonces, este código 102 00:05:41,230 --> 00:05:44,200 ‫aquí es básicamente equivalente a esto. 103 00:05:44,200 --> 00:05:46,993 ‫Y a continuación, tenemos este logotipo de encabezado. 104 00:05:48,730 --> 00:05:51,350 ‫Entonces, nueva línea, pero un nivel atrás, en 105 00:05:51,350 --> 00:05:54,100 ‫la sangría para que esté en el mismo 106 00:05:54,100 --> 00:05:55,680 ‫nivel que la navegación. 107 00:05:55,680 --> 00:05:58,930 ‫Entonces, tal como está aquí, correcto. 108 00:05:58,930 --> 00:05:59,980 ‫Ahora, cuando es 109 00:05:59,980 --> 00:06:04,980 ‫un div, ni siquiera tenemos que decir div. headerlogo, en este caso. 110 00:06:07,150 --> 00:06:08,350 ‫Entonces, cuando es 111 00:06:08,350 --> 00:06:11,820 ‫un div, que es una especie de elemento de bloque estándar en 112 00:06:11,820 --> 00:06:13,980 ‫html, todo lo que necesitamos es el 113 00:06:13,980 --> 00:06:16,873 ‫punto y luego eso creará automáticamente un elemento div. 114 00:06:18,930 --> 00:06:20,713 ‫Luego, tenemos esta imagen, y eso, 115 00:06:22,030 --> 00:06:24,980 ‫por supuesto, necesita un par de atributos, que es 116 00:06:24,980 --> 00:06:26,693 ‫el primero, la fuente. 117 00:06:27,560 --> 00:06:31,937 ‫Entonces imagen, logo, blanco. png, y luego también 118 00:06:33,850 --> 00:06:36,433 ‫el texto alternativo, de acuerdo. 119 00:06:40,910 --> 00:06:44,690 ‫A continuación, tenemos esta otra navegación aquí, y nuevamente, está 120 00:06:44,690 --> 00:06:46,820 ‫en el mismo nivel que 121 00:06:46,820 --> 00:06:49,293 ‫la primera navegación y este div. 122 00:06:51,030 --> 00:06:53,750 ‫Así que retroceda un nivel en 123 00:06:53,750 --> 00:06:57,680 ‫la sangría y cree un nuevo elemento de navegación con la 124 00:06:57,680 --> 00:07:00,763 ‫clase nav y el usuario de clase nav. 125 00:07:02,120 --> 00:07:03,950 ‫Luego, hay un enlace, 126 00:07:03,950 --> 00:07:05,130 ‫muy similar 127 00:07:05,130 --> 00:07:09,160 ‫a este, así que copiémoslo para ahorrarnos algo de tiempo. 128 00:07:09,160 --> 00:07:11,293 ‫Y luego aquí dice, Mis reservas. 129 00:07:16,170 --> 00:07:20,470 ‫Luego otro, y de hecho vamos a copiarlo de nuevo 130 00:07:20,470 --> 00:07:23,380 ‫con la diferencia de que no 131 00:07:23,380 --> 00:07:27,070 ‫tiene este contenido, sino que tiene más contenido dentro. 132 00:07:27,070 --> 00:07:28,470 ‫Así que esto. 133 00:07:28,470 --> 00:07:30,023 ‫Entonces, muy fácil de nuevo, imagen, 134 00:07:31,170 --> 00:07:33,633 ‫con la fuente,. jpg. 135 00:07:42,100 --> 00:07:43,853 ‫Y también tiene un nombre 136 00:07:45,060 --> 00:07:47,420 ‫de clase, así que editemos aquí con el punto. 137 00:07:47,420 --> 00:07:51,713 ‫Entonces, nav, imagen de usuario. 138 00:07:53,290 --> 00:07:56,810 ‫Y luego simplemente un lapso diciendo Jonas. 139 00:07:56,810 --> 00:07:58,120 ‫Y, como 140 00:07:58,120 --> 00:08:00,960 ‫puede ver, esta será la parte dinámica 141 00:08:00,960 --> 00:08:02,350 ‫de este encabezado. 142 00:08:02,350 --> 00:08:05,000 ‫Y entonces, en realidad, todo esto aquí se convertirá 143 00:08:05,000 --> 00:08:06,675 ‫en un punto al principio. 144 00:08:06,675 --> 00:08:11,675 ‫Bien, pero de todos modos, terminemos de codificar esta parte aquí. 145 00:08:13,160 --> 00:08:14,620 ‫Básicamente, estos dos botones, el 146 00:08:14,620 --> 00:08:17,520 ‫botón de inicio de sesión y el botón de registro. 147 00:08:17,520 --> 00:08:20,120 ‫Entonces, por supuesto, no tendrá el botón 148 00:08:20,120 --> 00:08:22,920 ‫de inicio de sesión y de registro al mismo 149 00:08:22,920 --> 00:08:25,680 ‫tiempo que tiene esta navegación de usuario aquí. 150 00:08:25,680 --> 00:08:29,590 ‫Entonces mis reservas y luego el nombre del usuario, está bien. 151 00:08:29,590 --> 00:08:32,250 ‫Pero nuevamente, pongamos eso aquí por ahora, y 152 00:08:32,250 --> 00:08:34,553 ‫luego comentemos lo que no necesitamos. 153 00:08:36,860 --> 00:08:41,860 ‫Entonces, botón, elemento de navegación y también elemento de 154 00:08:44,440 --> 00:08:49,043 ‫navegación y luego el modificador cta para registrarse. 155 00:08:50,290 --> 00:08:54,847 ‫Y en realidad también hay uno antes de eso para iniciar sesión, ¿verdad? 156 00:08:56,850 --> 00:08:58,837 ‫Entonces, ese es este. 157 00:09:03,010 --> 00:09:05,730 ‫Está bien y eso es todo. 158 00:09:05,730 --> 00:09:06,940 ‫Así que ese 159 00:09:06,940 --> 00:09:09,010 ‫es el encabezado, y ves que 160 00:09:09,010 --> 00:09:12,550 ‫este código aquí es equivalente a todo lo que tenemos 161 00:09:12,550 --> 00:09:15,070 ‫aquí, que parece mucho más confuso, si 162 00:09:15,070 --> 00:09:16,653 ‫me preguntas al menos. 163 00:09:18,010 --> 00:09:20,690 ‫Entonces, elimine eso, y como dije, esta 164 00:09:20,690 --> 00:09:22,920 ‫navegación de usuario aquí, esta 165 00:09:22,920 --> 00:09:25,200 ‫parte solo estará disponible cuando alguien 166 00:09:25,200 --> 00:09:27,010 ‫haya iniciado sesión. 167 00:09:27,010 --> 00:09:30,123 ‫Y por ahora, comentemos completamente todo esto. 168 00:09:31,370 --> 00:09:36,370 ‫Muy bien, a continuación tenemos el contenido y agreguemos otro comentario aquí y 169 00:09:36,500 --> 00:09:38,350 ‫en nuestro html, 170 00:09:42,130 --> 00:09:44,050 ‫en realidad todo lo que 171 00:09:44,050 --> 00:09:46,010 ‫vamos a agregar ahora es 172 00:09:46,010 --> 00:09:49,350 ‫esta sección aquí con la clase de descripción general. 173 00:09:49,350 --> 00:09:51,430 ‫Porque ahí es donde tenemos 174 00:09:51,430 --> 00:09:53,160 ‫todas estas tarjetas de 175 00:09:53,160 --> 00:09:56,070 ‫contenido, que nuevamente, por ahora, no incluiremos allí. 176 00:09:56,070 --> 00:09:57,400 ‫Entonces, nuevamente, lo que estamos 177 00:09:57,400 --> 00:09:59,623 ‫haciendo ahora es realmente solo un esqueleto, por así decirlo. 178 00:10:00,729 --> 00:10:03,123 ‫Muy bien, sección. visión de conjunto. 179 00:10:07,410 --> 00:10:08,243 ‫Visión general. 180 00:10:09,574 --> 00:10:12,500 ‫Y por ahora, simplemente pongamos un h1 aquí 181 00:10:12,500 --> 00:10:16,040 ‫con el nombre de la gira que viene como variable. 182 00:10:16,040 --> 00:10:18,270 ‫Está bien y, por supuesto, esta 183 00:10:18,270 --> 00:10:22,103 ‫sección aquí debe estar al mismo nivel que este encabezado, genial. 184 00:10:24,130 --> 00:10:26,820 ‫Así que todo lo que nos falta ahora es el pie 185 00:10:26,820 --> 00:10:28,700 ‫de página al final de la página. 186 00:10:28,700 --> 00:10:32,690 ‫Así que vayamos allí y aquí vamos. 187 00:10:32,690 --> 00:10:35,790 ‫Tomemos todo esto. 188 00:10:35,790 --> 00:10:38,040 ‫Y esto debería ser un elemento de pie de página, 189 00:10:39,040 --> 00:10:40,393 ‫no solo un div regular. 190 00:10:45,510 --> 00:10:49,730 ‫Entonces, un elemento de pie de página con la clase de pie de página, luego 191 00:10:49,730 --> 00:10:52,573 ‫un div, con la clase de logotipo de pie 192 00:10:53,850 --> 00:10:57,493 ‫de página, y de nuevo, ni siquiera necesito especificar el elemento div. 193 00:10:58,870 --> 00:11:00,323 ‫Entonces tenemos una imagen aquí. png, por lo 194 00:11:07,917 --> 00:11:12,810 ‫que espero que escribir todo esto usted mismo, básicamente a mano, le ayude a 195 00:11:12,810 --> 00:11:16,820 ‫mantener este conocimiento sobre cómo funciona todo esto un poco mejor. 196 00:11:16,820 --> 00:11:20,030 ‫Bien, entonces esto es alt y ahora esta navegación de 197 00:11:20,030 --> 00:11:22,330 ‫pie de página, entonces una lista desordenada, 198 00:11:23,560 --> 00:11:26,520 ‫y ahora ahí, tenemos un par de elementos de 199 00:11:26,520 --> 00:11:28,033 ‫elementos de lista. 200 00:11:31,260 --> 00:11:35,483 ‫Entonces, enumere el elemento, y luego hay un enlace en 201 00:11:36,580 --> 00:11:38,620 ‫cada uno de ellos. 202 00:11:38,620 --> 00:11:41,470 ‫Entonces, básicamente, con el href de ninguna parte. 203 00:11:41,470 --> 00:11:46,470 ‫Y luego, Acerca de nosotros. 204 00:11:48,410 --> 00:11:51,490 ‫Ahora, aquí en esta situación, necesitar 205 00:11:51,490 --> 00:11:53,170 ‫esta línea adicional 206 00:11:53,170 --> 00:11:57,298 ‫solo para especificar este li, no es realmente ideal. 207 00:11:57,298 --> 00:11:58,640 ‫Entonces, lo que podemos 208 00:11:58,640 --> 00:12:00,010 ‫hacer aquí es usar dos 209 00:12:00,010 --> 00:12:03,310 ‫puntos, como este, y luego básicamente ponerlo todo en la misma línea. 210 00:12:03,310 --> 00:12:05,840 ‫Y entonces esto seguirá funcionando como si hubiera una 211 00:12:05,840 --> 00:12:07,730 ‫nueva línea con una sangría, 212 00:12:07,730 --> 00:12:10,570 ‫pero básicamente permitiéndonos hacerlo todo en la misma línea. 213 00:12:10,570 --> 00:12:13,910 ‫De acuerdo, entonces, por alguna razón, el resaltado 214 00:12:13,910 --> 00:12:15,810 ‫de sintaxis deja de 215 00:12:15,810 --> 00:12:19,180 ‫funcionar, pero bueno, eso no es tan importante. 216 00:12:19,180 --> 00:12:21,343 ‫Así que descarga las aplicaciones, conviértete 217 00:12:22,910 --> 00:12:24,453 ‫en guía, carreras. 218 00:12:26,300 --> 00:12:29,873 ‫Y eso es todo. 219 00:12:39,630 --> 00:12:41,053 ‫A continuación, tenemos este pie de 220 00:12:43,770 --> 00:12:46,520 ‫página, derechos de autor, y aquí solo tenemos un montón de texto. 221 00:12:50,540 --> 00:12:53,100 ‫Entonces especifica el símbolo 222 00:12:53,100 --> 00:12:56,943 ‫de copyright aquí, y es de Jonas Schmedtmann. 223 00:12:58,860 --> 00:13:02,670 ‫Entonces, ese soy yo y, al igual que en todos 224 00:13:02,670 --> 00:13:06,100 ‫mis otros cursos, quiero que sepas que básicamente puedes 225 00:13:06,100 --> 00:13:08,290 ‫usar este proyecto para ti. 226 00:13:08,290 --> 00:13:11,120 ‫Básicamente, para ponerlo en tu portafolio o para 227 00:13:11,120 --> 00:13:13,550 ‫mostrarle a quien quieras, que construiste este 228 00:13:13,550 --> 00:13:15,270 ‫proyecto en mi curso. 229 00:13:15,270 --> 00:13:18,630 ‫Ahora lo que no puede hacer es crear su propio curso 230 00:13:18,630 --> 00:13:20,030 ‫basado en este proyecto. 231 00:13:20,030 --> 00:13:23,310 ‫Y es triste que incluso tenga que decir esto, 232 00:13:23,310 --> 00:13:25,970 ‫pero claro que ha habido personas que 233 00:13:25,970 --> 00:13:28,980 ‫usaron mi proyecto, básicamente para poner algunos cursos 234 00:13:28,980 --> 00:13:32,270 ‫gratuitos en YouTube, donde copiaron mis proyectos, uno por uno. 235 00:13:32,270 --> 00:13:35,410 ‫Bien, déjame escribir eso aquí. 236 00:13:35,410 --> 00:13:38,473 ‫Para sus propios fines, excepto para 237 00:13:42,160 --> 00:13:45,593 ‫producir, por supuesto, sus propios cursos o tutoriales. 238 00:13:49,850 --> 00:13:54,850 ‫Está bien y eso es todo. 239 00:13:59,230 --> 00:14:01,213 ‫Muy bien, esa 240 00:14:06,130 --> 00:14:09,500 ‫es la traducción del esqueleto básicamente que 241 00:14:10,990 --> 00:14:14,400 ‫tenemos aquí, por supuesto, excepto el contenido. 242 00:14:14,400 --> 00:14:17,560 ‫Bien, ya no lo necesitamos. 243 00:14:17,560 --> 00:14:20,753 ‫Y, solo para terminar, echemos un vistazo rápido 244 00:14:21,960 --> 00:14:25,000 ‫y, de hecho, aquí va nuestro contenido. 245 00:14:25,000 --> 00:14:27,640 ‫Ahora bien, esto de aquí parece un poco fuera de lugar porque este 246 00:14:27,640 --> 00:14:29,650 ‫texto de derechos de autor aquí es muy largo. 247 00:14:29,650 --> 00:14:31,883 ‫Entonces, esta navegación de pie de página básicamente. 248 00:14:33,950 --> 00:14:37,330 ‫Pero dado que es un contenedor flexible, 249 00:14:37,330 --> 00:14:39,540 ‫deberíamos poder solucionarlo con 250 00:14:39,540 --> 00:14:42,270 ‫contenido justificado, flex-end, no este. 251 00:14:42,270 --> 00:14:47,270 ‫De acuerdo, y no se preocupe si no está 252 00:14:48,660 --> 00:14:53,660 ‫familiarizado con CSS, o incluso con Flexbox, esto es 253 00:14:53,870 --> 00:14:56,180 ‫solo para solucionar 254 00:14:56,180 --> 00:15:00,200 ‫visualmente el pequeño problema que tuvimos aquí. 255 00:15:00,200 --> 00:15:01,050 ‫Así que busquemos el pie de página aquí. 256 00:15:02,820 --> 00:15:04,723 ‫Aquí estamos. 257 00:15:08,590 --> 00:15:09,893 ‫Arregle eso aquí, y 258 00:15:11,210 --> 00:15:12,303 ‫si ahora 259 00:15:13,690 --> 00:15:15,790 ‫recargamos, sí, entonces estamos bien, perfectos.