1
00:00:00,330 --> 00:00:05,740
Bienvenido de nuevo en esta lección vamos a usar el programa de arranque para crear una página de inicio para un inicio ficticio.

2
00:00:06,070 --> 00:00:08,760
Nuestra startup se llama Perfect match.

3
00:00:08,760 --> 00:00:09,210
Muy divertido.

4
00:00:09,210 --> 00:00:15,300
Sé que es una aplicación de citas de felinos humanos y dejaré que tú interpretes qué fecha de felino

5
00:00:15,300 --> 00:00:21,750
humano es que podría ser relativamente inofensivo, solo podría coincidir con los gatos Sheldrick con humanos solitarios que podrían ser

6
00:00:21,750 --> 00:00:22,430
otra cosa.

7
00:00:22,440 --> 00:00:23,260
No lo sé.

8
00:00:23,550 --> 00:00:27,690
Empecemos haciendo un recorrido rápido por el sitio y escribiéndole.

9
00:00:27,690 --> 00:00:29,920
Realmente solo me refiero a señalar algunas características.

10
00:00:29,970 --> 00:00:31,250
No hay mucho aquí.

11
00:00:31,290 --> 00:00:33,780
En realidad, no tenemos esto enganchado, no hace nada todavía.

12
00:00:33,840 --> 00:00:37,770
Así que en realidad solo son personajes de HD, pero eso es todo lo que hemos cubierto hasta ahora.

13
00:00:38,100 --> 00:00:42,510
Así que tenemos suficiente nuestro hogar perfecto sobre longitudes sin contacto.

14
00:00:42,510 --> 00:00:50,100
En realidad, no se van a ninguna parte regístrate e inicia sesión en el lado derecho dos iconos pequeños allí

15
00:00:50,100 --> 00:00:51,030
obtenemos su hamburguesa.

16
00:00:51,180 --> 00:00:52,320
Puedo hacer clic en él.

17
00:00:52,380 --> 00:00:55,980
Todos esos enlaces están ahora dentro de esa hamburguesa.

18
00:00:55,980 --> 00:01:01,650
Entonces tenemos una gran imagen de fondo que permanece centrada y cubre todo el fondo.

19
00:01:01,740 --> 00:01:07,590
Así que en el medio tenemos el nombre de nuestro inicio perfecto con el nuestro y luego tenemos nuestra leyenda La

20
00:01:07,650 --> 00:01:09,750
única aplicación de citas sobre alimentación humana.

21
00:01:09,750 --> 00:01:15,420
Y luego tenemos una pequeña regla H R aquí horizontal y luego un botón para comenzar con un ícono.

22
00:01:15,810 --> 00:01:21,990
Y a medida que reduzco esto, todo se queda en el medio y también se mueve un poco para que no tengamos algún

23
00:01:21,990 --> 00:01:26,960
tipo de diseño incómodo en su dispositivo móvil donde el texto comienza a mitad de camino hacia abajo.

24
00:01:27,060 --> 00:01:29,690
Así que lo movemos un poco y permanece centrado.

25
00:01:29,700 --> 00:01:33,900
Este diseño es realmente fácil de hacer y de arranque, pero es relativamente efectivo para la página de inicio.

26
00:01:33,900 --> 00:01:38,180
Todo lo que tenemos es una sola columna que ocupa todo el ancho.

27
00:01:38,220 --> 00:01:40,850
Entonces esta columna tiene 12 unidades de ancho.

28
00:01:40,860 --> 00:01:46,890
No estamos dividiéndolo en ninguna sección, solo a una columna de 12 unidades de ancho y luego centramos

29
00:01:46,890 --> 00:01:48,510
todo dentro de esa columna.

30
00:01:48,540 --> 00:01:49,860
Entonces empecemos.

31
00:01:49,860 --> 00:01:52,350
Lo primero que debemos hacer es crear un archivo.

32
00:01:52,440 --> 00:01:54,640
Tengo un índice llamado en DML.

33
00:01:54,720 --> 00:01:58,890
Agregaré esto en mi coincidencia perfecta estándar y

34
00:02:01,700 --> 00:02:04,950
luego comenzaré añadiendo Bootstrap y usaré

35
00:02:08,580 --> 00:02:10,410
CDN Bitstrips CDN.

36
00:02:11,490 --> 00:02:14,350
Hagamos el SS y el Javascript aquí.

37
00:02:14,400 --> 00:02:16,860
Necesitaremos ese javascript para la barra de tareas.

38
00:02:17,220 --> 00:02:19,130
Entonces tenemos que vincular la etiqueta.

39
00:02:19,710 --> 00:02:22,770
Entonces tenemos el javascript.

40
00:02:22,770 --> 00:02:24,030
Entendido.

41
00:02:24,090 --> 00:02:32,030
Coloque esto en la parte inferior, que es una etiqueta de script y luego establecemos la fuente igual a la que eres.

42
00:02:32,520 --> 00:02:41,040
Ahora si abrimos esto, abra la consola, tenemos un pequeño problema, es que también necesitamos la consulta de

43
00:02:41,040 --> 00:02:43,390
Jay para el bootstrap javascript.

44
00:02:43,450 --> 00:02:46,290
Recuerde de regreso de la lección de barra de navegación que necesitamos para exigir a J.

45
00:02:46,290 --> 00:02:46,750
Querrey

46
00:02:46,860 --> 00:02:52,500
Entonces obtendremos un CDN por eso.

47
00:02:53,730 --> 00:02:55,290
Haremos la versión modificada.

48
00:02:55,290 --> 00:02:57,500
Copia esa URL

49
00:02:57,600 --> 00:03:04,110
Y finalmente volvemos aquí y tenemos que hacerlo antes del enlace al arranque del javascript.

50
00:03:04,440 --> 00:03:09,360
De lo contrario, todavía no sabrá su consulta, por lo que primero debe cargar la consulta.

51
00:03:09,360 --> 00:03:10,650
Ahora intentémoslo de nuevo.

52
00:03:10,870 --> 00:03:11,960
Refresco de fuego

53
00:03:12,520 --> 00:03:17,490
Está bien, no vemos nada que sea una buena señal porque no vemos ningún error.

54
00:03:18,570 --> 00:03:20,850
Comencemos con el texto en el medio.

55
00:03:20,850 --> 00:03:22,480
Todo este contenido aquí.

56
00:03:22,620 --> 00:03:29,570
el contenedor ECO de la clase div y luego, dentro de allí, tenemos otro div. Siempre necesitamos esa fila.

57
00:03:30,870 --> 00:03:35,870
Entonces, necesitamos crear un contenedor y luego, dentro del contenedor, necesitamos una fila para

58
00:03:35,930 --> 00:03:45,780
Cada vez que estamos usando el sistema de grillas y luego nuestro div que va a ser de clase igual a la columna dash

59
00:03:46,230 --> 00:03:47,220
large 12.

60
00:03:48,240 --> 00:03:50,750
Y eso abarcará todo el camino a través de ese contenedor.

61
00:03:51,210 --> 00:03:59,330
Y luego dentro si van a tener un H1 que diga pareja perfecta y guarde.

62
00:03:59,520 --> 00:04:02,280
Y dejémoslo en esa actualización.

63
00:04:02,580 --> 00:04:06,660
Y no es realmente lo que queremos todavía y es porque hay algunas cosas que debemos hacer.

64
00:04:06,660 --> 00:04:09,010
El primero es que debemos centrar todo en esa columna.

65
00:04:09,300 --> 00:04:16,700
Entonces, si inspeccionamos con qué estamos tratando aquí, podríamos ver que la H1 cruza todo y

66
00:04:16,710 --> 00:04:19,190
solo debemos centrarnos en eso.

67
00:04:19,410 --> 00:04:21,680
Y el segundo es que tenemos que bajar un poco.

68
00:04:21,720 --> 00:04:26,250
Necesitamos agregar algo de relleno o margen para que no vaya directamente a la parte superior de nuestra página.

69
00:04:26,250 --> 00:04:28,480
Comencemos por agregar el resto del contenido.

70
00:04:28,830 --> 00:04:36,180
Así que también tenemos la única aplicación de citas de felinos humanos y eso será solo un H

71
00:04:36,180 --> 00:04:46,110
3 y podríamos jugar con eso, podría ser cualquier elemento que queramos, pero lo convertiré en una H-3, la única aplicación de citas felinas

72
00:04:46,590 --> 00:04:47,730
con humanos.

73
00:04:48,090 --> 00:04:54,060
Y luego podemos agregar esa regla horizontal que no se verá demasiado, pero la haremos con estilo

74
00:04:54,060 --> 00:04:59,180
después del hecho y luego también agregaremos un botón en la clase en ese botón.

75
00:04:59,240 --> 00:05:01,680
Echemos un vistazo.

76
00:05:02,100 --> 00:05:06,010
Este es un botón de arranque predeterminado y es un botón grande.

77
00:05:06,330 --> 00:05:07,830
Volvamos.

78
00:05:07,830 --> 00:05:18,120
Entonces necesitamos PTEN y luego el color predeterminado y luego el tamaño entre LG para grande y aquí

79
00:05:18,120 --> 00:05:20,520
simplemente agregaremos el texto

80
00:05:24,290 --> 00:05:29,320
que se inicia y guardaremos veamos con qué terminamos.

81
00:05:29,340 --> 00:05:30,330
Todo bien.

82
00:05:30,330 --> 00:05:34,270
Entonces tenemos nuestro contenido ahora siguiente pero Center dentro de la grilla.

83
00:05:34,470 --> 00:05:36,920
Y luego nos enfocaremos en el relleno y lo moveremos hacia abajo.

84
00:05:36,930 --> 00:05:41,430
Pero para comenzar con el centro dentro de esta cuadrícula y para facilitar eso, voy a agruparlo todo

85
00:05:41,430 --> 00:05:44,720
dentro de un div para que no tengamos que centrar cada cosa individualmente.

86
00:05:44,760 --> 00:05:49,680
Tenemos que centrar el H-1 y luego los tres y luego el botón, más bien podemos agrupar en un div y

87
00:05:49,680 --> 00:05:51,430
simplemente centrar ese div con una línea.

88
00:05:51,750 --> 00:06:01,490
Hagamos un div y le daremos una identificación de Cantet y luego pondremos todo dentro de allí.

89
00:06:01,560 --> 00:06:08,340
Entonces el H-1 a la edad de 3 años el H. R. y el botón sangrará y guardará correctamente.

90
00:06:08,580 --> 00:06:13,420
Entonces, nada debería ser diferente si actualizo la página antes de hacerlo, vamos a agregarla en nuestra hoja de estilos.

91
00:06:14,340 --> 00:06:18,840
Así que agregué una etiqueta de enlace y llamaré a mi aplicación de hojas de estilo.

92
00:06:18,920 --> 00:06:20,920
SS No existe todavía.

93
00:06:21,120 --> 00:06:24,220
Entonces necesito hacer que lo guarde.

94
00:06:24,230 --> 00:06:27,060
Veo SS en el mismo directorio.

95
00:06:27,420 --> 00:06:31,550
Y comencemos con algo simple como todas las h que son moradas.

96
00:06:31,680 --> 00:06:35,030
Solo para asegurarme de que funciona bien.

97
00:06:35,400 --> 00:06:37,060
Volvamos a actualizar

98
00:06:37,390 --> 00:06:39,100
Andrew obtiene un H-1 púrpura.

99
00:06:39,180 --> 00:06:39,670
Estupendo.

100
00:06:39,870 --> 00:06:44,970
Entonces, seleccionemos Dave, agregamos la idea del contenido y lo centramos.

101
00:06:45,030 --> 00:06:53,620
Así que desháganse de eso y necesitamos un contenido de identificación y omitir hacer es alinear texto en el centro.

102
00:06:54,210 --> 00:06:56,430
Volvamos.

103
00:06:56,430 --> 00:06:57,110
Aquí vamos.

104
00:06:57,120 --> 00:06:59,490
Así que las cosas están alineadas al centro hasta ahora.

105
00:06:59,490 --> 00:07:06,720
A continuación, haremos clic un 25 por ciento más abajo en la página para ser exactos, con un relleno equivalente al 25 por ciento.

106
00:07:07,470 --> 00:07:15,270
Así que aquí haremos un colchón superior al 25 por ciento.

107
00:07:16,270 --> 00:07:21,720
Y en lugar de darle una cantidad de píxeles difícil si lo mantenemos como un porcentaje, es

108
00:07:21,720 --> 00:07:22,870
un poco más receptivo.

109
00:07:22,890 --> 00:07:24,790
Así que eso está justo en el centro.

110
00:07:25,230 --> 00:07:29,940
Y luego el 25 por ciento cambia a medida que cambiamos el tamaño de la pantalla.

111
00:07:29,940 --> 00:07:30,540
Estupendo.

112
00:07:30,540 --> 00:07:32,480
Ahora agreguemos en la imagen de fondo.

113
00:07:32,670 --> 00:07:38,460
Entonces, la imagen que estoy usando es adorable y la interacción humana que está ocurriendo aquí proviene de este en el sitio

114
00:07:38,460 --> 00:07:43,280
web de Splash que presenté en el último video donde creamos la cuadrícula de la imagen de arranque.

115
00:07:43,680 --> 00:07:48,300
Y tienen todo tipo de imágenes de gran calidad que puedes usar sin ningún problema.

116
00:07:48,480 --> 00:07:54,110
Y el que yo uso está justo aquí. Busco enlaces de gatos en esa descripción también.

117
00:07:54,450 --> 00:08:00,230
Aquí está el Aro de esta imagen, simplemente haz clic derecho en copiar la imagen que eres.

118
00:08:00,360 --> 00:08:06,310
Ahora regresemos y lo agregaré al cuerpo como una imagen de fondo.

119
00:08:06,800 --> 00:08:13,830
Así que de fondo y luego darle una URL que es ese gigante. Estás ahí.

120
00:08:13,830 --> 00:08:22,530
o actualización, obtenemos una imagen de fondo gigantesca y todo lo que podemos decir es que este es un tipo de arranque para las uñas.

121
00:08:22,530 --> 00:08:26,010
Y si lo dejamos en su forma en este nivel

122
00:08:26,010 --> 00:08:36,060
Entonces tenemos que redimensionarlo y para hacer eso usamos el tamaño de fondo y lo cambiamos para cubrirlo nuevamente.

123
00:08:36,060 --> 00:08:39,230
De nuevo, nos estamos acercando.

124
00:08:39,270 --> 00:08:44,430
Esto hará que la imagen sea lo más pequeña posible mientras se cubre todo el ancho y alto de

125
00:08:44,430 --> 00:08:44,950
la pantalla.

126
00:08:45,240 --> 00:08:50,820
Por lo tanto, no cambiará la relación de aspecto, ya que no sesgará la imagen de ninguna manera, pero se estirará en

127
00:08:50,850 --> 00:08:52,240
ambas direcciones tanto como sea necesario.

128
00:08:52,350 --> 00:08:57,060
Pero la cantidad mínima que necesita para caber en nuestra pantalla y aún no es perfecta.

129
00:08:57,210 --> 00:09:01,900
Y lo que queremos hacer no es cambiar el tamaño sino cambiar la posición.

130
00:09:02,190 --> 00:09:10,280
Vamos a centrar el centro de posición de fondo, pero ahorraremos que estemos más cerca.

131
00:09:10,290 --> 00:09:13,320
Pero todavía no es una pareja perfecta en lo que respecta a la imagen.

132
00:09:13,800 --> 00:09:15,510
Y esos cambios vendrán más tarde.

133
00:09:15,510 --> 00:09:21,540
Por ahora quiero enfocarme en agregar en la barra de navegación y hacer eso cuando vaya a los documentos de

134
00:09:21,540 --> 00:09:24,650
Boucek y vaya a los componentes y ya lo mencioné antes.

135
00:09:25,080 --> 00:09:27,690
Siempre hago esto si agrego una barra de navegación de bootstrap.

136
00:09:27,810 --> 00:09:29,850
Son demasiadas cosas para recordar lo contrario.

137
00:09:30,230 --> 00:09:32,070
Y solo copio esto aquí mismo.

138
00:09:32,370 --> 00:09:39,630
Tomará todo el navegador para comenzar, regrese a nuestra aplicación aquí y simplemente colóquelo en la parte superior.

139
00:09:39,630 --> 00:09:46,110
Esta definitivamente no es la NAF que queremos, pero contiene las piezas que queremos actualizar.

140
00:09:46,380 --> 00:09:47,380
Está lo suficientemente cerca.

141
00:09:47,610 --> 00:09:49,360
Entonces, hay algunos cambios que queremos hacer.

142
00:09:49,470 --> 00:09:55,890
La primera y más fácil es que nuestro contenido en la solución se encuentre en un contenedor, por lo que

143
00:09:55,890 --> 00:09:58,570
no llega hasta los bordes como lo hace aquí.

144
00:09:59,100 --> 00:10:05,670
ver que debido a que agregamos en ese contenedor ahora tenemos un espacio tal como lo hacemos aquí en la solución.

145
00:10:07,290 --> 00:10:13,020
Entonces podemos volver e insertar o simplemente cambiamos esto para ser un contenedor de clase div y si

146
00:10:13,260 --> 00:10:14,250
retrocedemos ahora puede

147
00:10:14,250 --> 00:10:16,920
Ahora vamos a trabajar en el contenido real del Nev. Así que lo más fácil es cambiar la

148
00:10:17,070 --> 00:10:26,520
marca que ahora mismo dice Brand aquí. Esta clase de línea es igual a la marca de barra de neth y la cambiaremos por una coincidencia y guarda fijas.

149
00:10:26,550 --> 00:10:33,950
Pruébalo.

150
00:10:33,940 --> 00:10:34,990
Bien.

151
00:10:35,490 --> 00:10:37,500
Ahora vamos a deshacernos de esta forma.

152
00:10:37,500 --> 00:10:39,050
No necesitamos esto en absoluto.

153
00:10:39,060 --> 00:10:41,150
Así que nuestra forma todo comienza aquí.

154
00:10:41,310 --> 00:10:45,030
Deshazte de esa cosa completa de actualización.

155
00:10:45,030 --> 00:10:50,490
También eliminemos el menú desplegable.

156
00:10:50,860 --> 00:10:52,560
No necesitas eso.

157
00:10:52,560 --> 00:10:54,570
Entonces eso comienza aquí.

158
00:10:54,570 --> 00:10:56,680
Esta mentira que termina allí

159
00:10:56,680 --> 00:10:58,680
está fresca de nuevo.

160
00:11:01,770 --> 00:11:02,810
Ahora tenemos un solo enlace.

161
00:11:03,120 --> 00:11:04,540
Comenzaremos con estos dos enlaces, que se supone que deben registrarse y registrarse.

162
00:11:04,710 --> 00:11:10,910
Ese es el enlace aquí, así que podemos cambiarlo para que se registre y luego lo duplique.

163
00:11:11,360 --> 00:11:18,110
Solo un aliado con una etiqueta de anclaje dentro.

164
00:11:18,390 --> 00:11:21,450
Y este estará conectado.

165
00:11:21,450 --> 00:11:23,840
Vamos a ver.

166
00:11:24,750 --> 00:11:26,640
Estupendo.

167
00:11:26,700 --> 00:11:27,260
Entonces los íconos llegarán al final.

168
00:11:27,270 --> 00:11:29,100
Tenemos los dos enlaces.

169
00:11:29,100 --> 00:11:30,380
Ahora necesitamos tres enlaces aquí.

170
00:11:30,450 --> 00:11:32,320
Ya tenemos dos de ellos y nos desharemos de ese menú desplegable.

171
00:11:32,340 --> 00:11:35,500
Entonces, necesitamos estar en contacto con nosotros.

172
00:11:35,610 --> 00:11:38,560
Entonces, busque ese menú desplegable que está aquí.

173
00:11:38,600 --> 00:11:41,490
La clase es igual a la lista desplegable.

174
00:11:41,490 --> 00:11:43,100
Deshagámoslo y ahora Akbar está simplificado mucho.

175
00:11:43,140 --> 00:11:49,070
Ahora tenemos dos longitudes diferentes.

176
00:11:49,080 --> 00:11:50,370
Realmente nos desharemos de ambos y lo haremos desde cero.

177
00:11:50,390 --> 00:11:53,760
Así que agregaremos un aliado con una etiqueta de anclaje y luego lo haremos tres veces.

178
00:11:53,760 --> 00:12:00,120
Este primero debería decir hogar.

179
00:12:00,120 --> 00:12:02,260
El próximo es sobre.

180
00:12:02,550 --> 00:12:04,100
Y el último es contacto.

181
00:12:04,320 --> 00:12:06,530
Vamos a ver.

182
00:12:07,020 --> 00:12:08,760
Ahí vamos tenemos tres longitudes.

183
00:12:08,760 --> 00:12:11,050
Una cosa menor.

184
00:12:11,070 --> 00:12:11,970
Se supone que Home debe estar activo y un bootstrap realmente fácil.

185
00:12:11,970 --> 00:12:16,830
Todo lo que tenemos que hacer es agregar la clase igual activa al

186
00:12:16,980 --> 00:12:24,860
aliado, no a la etiqueta de anclaje, sino al aliado principal y ahora terminamos siendo el enlace activo el hogar.

187
00:12:26,220 --> 00:12:29,390
Estupendo.

188
00:12:29,400 --> 00:12:29,960
OK, así

189
00:12:30,200 --> 00:12:36,900
que esa es nuestra barra de navegación y si cambiamos de tamaño verás que ya tenemos esta hamburguesa funcionando bien.

190
00:12:36,900 --> 00:12:37,940
Tenemos un problema, es que nuestra imagen de fondo está en mal estado.

191
00:12:38,520 --> 00:12:42,420
Cubriremos eso en un momento, pero tenemos el Hamberger funcionando bien.

192
00:12:42,420 --> 00:12:45,750
Todo se ve bien.

193
00:12:45,750 --> 00:12:47,400
Ahora abordemos la fuente para que la fuente que utilicé aquí sea Ledo L. A. Es de fuentes de Google así que iré a las fuentes de Google y buscaré a Ledo.

194
00:12:47,430 --> 00:12:53,360
LA T-O cada ir a la colección.

195
00:12:53,430 --> 00:12:57,900
Vamos a usarlo si se vuelve normal y audaz.

196
00:12:58,010 --> 00:13:02,720
También queremos que nuestro H-1 sea audaz.

197
00:13:03,180 --> 00:13:06,820
Bueno.

198
00:13:06,840 --> 00:13:10,050
Y luego agregaremos este enlace directamente a su aplicación.

199
00:13:10,590 --> 00:13:11,040
Arriba arriba aquí, ahora ingrese las aplicaciones. Evaluemos que vamos a aplicar esa fuente a todo.

200
00:13:11,070 --> 00:13:16,290
Así que voy a seleccionar dentro de la familia de fuentes del cuerpo el Ledo y vamos a asegurarnos de que se está cargando correctamente.

201
00:13:16,290 --> 00:13:24,090
Mira lo que tenemos actualizado

202
00:13:24,270 --> 00:13:33,720
Y nuestros cambios frontales son difíciles de ver porque el texto está oscuro pero modificado, también puedes

203
00:13:34,050 --> 00:13:36,780
verlo en el NFR aquí.

204
00:13:37,520 --> 00:13:43,000
Ha cambiado

205
00:13:43,000 --> 00:13:43,990
Concuerda con lo que tenemos en esta solución.

206
00:13:44,160 --> 00:13:44,790
 

207
00:13:44,790 --> 00:13:47,510