1
00:00:03,300 --> 00:00:08,040
Una vez finalizada la que es la página principal estaremos trabajando horas con nosotros así que damos

2
00:00:08,040 --> 00:00:08,820
clic aquí.

3
00:00:08,880 --> 00:00:14,580
Puede ser que de momento nada más tenemos esta parte en la que vimos cómo enlazar documentos y la importancia

4
00:00:14,580 --> 00:00:17,280
de utilizar una hoja de estilos externa.

5
00:00:17,370 --> 00:00:23,690
El siguiente paso que vamos a hacer es copiar todo este código y pegarlo en nosotros.

6
00:00:23,700 --> 00:00:28,110
Esto nos lleva a un principio importante cuando estás creando sitios web.

7
00:00:28,110 --> 00:00:34,800
Cuando eres diseñador que se recomienda que no tengas código repetido es decir una de las desventajas

8
00:00:34,800 --> 00:00:43,200
de utilizar HTML como tal es que si por ejemplo yo quisiera agregar un nuevo enlace digamos aquí uno

9
00:00:43,200 --> 00:00:48,990
más que dijera la tienda virtual que obviamente no sería una tienda virtual como tal volvemos hacia

10
00:00:48,990 --> 00:00:51,680
la página de inicio desde el que tenemos tienda virtual.

11
00:00:51,690 --> 00:00:57,920
Pero si voy a nosotros no tengo esa tienda virtual tendría que ir y copiar ese enlace hacia acá y pegarlo

12
00:00:59,120 --> 00:01:06,380
y ahí es donde sí se vería lo que viene siendo tienda mezclar en nosotros lo puse arriba abajo aquí

13
00:01:06,570 --> 00:01:10,950
arriba después de que aparece tienda virtual.

14
00:01:11,610 --> 00:01:17,400
Pero debido a que es HTML y como mencioné anteriormente no es un lenguaje de programación no hay formas

15
00:01:17,400 --> 00:01:20,310
de hacerlo que no haya repetición.

16
00:01:20,310 --> 00:01:27,510
Más adelante mucho más adelante estaremos viendo con PHP cómo puedes ahorrar y evitar estos códigos

17
00:01:27,510 --> 00:01:28,710
duplicados.

18
00:01:29,160 --> 00:01:34,760
Entonces no hay problema no te preocupes al ser puro HTML es la única forma en la que lo podemos hacer.

19
00:01:36,430 --> 00:01:39,850
Regresarle un poco aquí sí mismo a nosotros.

20
00:01:40,180 --> 00:01:44,410
Ahora si vemos el diseño para nosotros puedes ver que lo que es el encabezado es un poco diferente no

21
00:01:44,410 --> 00:01:46,260
aparece esta imagen tan grande.

22
00:01:46,390 --> 00:01:53,050
Seguramente esta barra no sabría lo que viene siendo estudió con nosotros y un poco de scroll puedes

23
00:01:53,050 --> 00:02:00,600
ver que tenemos este H1 este lo vamos a quitar de aquí no va a ser necesario lo quitamos y después el

24
00:02:00,600 --> 00:02:07,470
siguiente paso es si recuerdas que agregamos dos clases hoy GDR inicio de 6 GDR de inicio que aplicamos

25
00:02:07,470 --> 00:02:08,660
estas dos clases.

26
00:02:08,880 --> 00:02:11,220
ésta le define la altura y también la imagen de fondo.

27
00:02:11,220 --> 00:02:18,280
Por lo tanto aquí vamos a quitar de aquí si guardamos cambios que cambian poco poco ya no parece lo

28
00:02:18,280 --> 00:02:22,930
que es la imagen de fondo pero nos hace falta lo que es el color de fondo porque aquí está la navegación

29
00:02:23,460 --> 00:02:28,000
acá está el logotipo pero no se pueden ver pero se va viendo bien.

30
00:02:28,000 --> 00:02:33,720
Siguiente paso esta sección que dice más sobre nosotros toda esta parte de aquí la vamos a cortar hasta

31
00:02:33,720 --> 00:02:40,440
el Führer todo hasta el Führer eso es todo hasta el Führer y lo eliminamos.

32
00:02:41,070 --> 00:02:46,500
Entonces elimino esta parte de aquí por estaremos regresando un poco de este código porque puedes ver

33
00:02:46,500 --> 00:02:52,810
que esta sección de aquí de los iconos es la misma que está en la página principal vamos a abrir lo

34
00:02:52,810 --> 00:02:58,260
que es el código y no es este archivo debe ser de nosotros HTML asegúrate de que está citando ese archivo

35
00:02:58,480 --> 00:03:01,840
y el primer paso que va a crear un main una etiqueta.

36
00:03:01,840 --> 00:03:07,770
Si recuerdas mencioné que debes de tener una por documento por lo tanto esta le va a decir a Google

37
00:03:07,800 --> 00:03:11,270
por ejemplo un buscador que este es el contenido principal.

38
00:03:12,150 --> 00:03:16,430
Colocamos una clase de contenedor para que se entre el contenido.

39
00:03:16,640 --> 00:03:17,560
Se va a centrar.

40
00:03:17,600 --> 00:03:22,010
De momento no hay nada pero se va a centrar y también vamos a crear un H1 recuerda también tienes que

41
00:03:22,010 --> 00:03:28,010
tener un H1 documento para que le digas que este es el contenido principal es agregar aquí un texto

42
00:03:28,010 --> 00:03:31,250
que va a decir conoces sobre nosotros.

43
00:03:33,390 --> 00:03:36,650
Es la parte que está arriba en nuestro diseño.

44
00:03:36,730 --> 00:03:40,250
Aquí guardamos cambios del lado izquierdo.

45
00:03:40,250 --> 00:03:47,180
Si recuerdas habíamos quedado un par de clases en utilidades utilidades para tener un fondo Huay de

46
00:03:47,180 --> 00:03:50,720
300 y centrarlo por lo tanto vamos a utilizarlas.

47
00:03:50,720 --> 00:04:00,460
Las clases de fondue 300 y también central texto central texto resguardamos cambios abrimos el proyecto

48
00:04:00,460 --> 00:04:01,460
y es el que tenemos.

49
00:04:01,480 --> 00:04:06,190
Conoce sobre nosotros el siguiente paso es definir lo que es el contenido que puede ser que tenemos

50
00:04:06,190 --> 00:04:13,230
una imagen que refleja una imagen aquí como apoyo y 25 años de experiencia y un poco de Lauren Ipsum

51
00:04:14,370 --> 00:04:17,100
por lo tanto vamos a dar aquí después de la H1.

52
00:04:17,100 --> 00:04:21,960
Vamos a crear un DIV que va a ser el padre por lo tanto aquí vamos a aplicar un poco y en este caso

53
00:04:21,960 --> 00:04:28,110
estaremos utilizando si es Grit que es también el nuevo estándar junto a Flex Box crear una clase llamada

54
00:04:28,110 --> 00:04:35,200
Imagen y dentro colocón ni MG entonces carpeta de imágenes y después nosotros puntos JPG.

55
00:04:35,540 --> 00:04:42,760
Hay que poner la imagen sobre nosotros en caso de que por algo no cargue la imagen al colocarla y después

56
00:04:42,770 --> 00:04:44,530
vamos a tener que hundir con las caras el texto.

57
00:04:44,530 --> 00:04:50,090
Nosotros vamos a rodear lo que viene siendo este texto 25 años de experiencia nueva cuenta volatilizar

58
00:04:50,120 --> 00:04:55,460
Belocopitt 25 años de experiencia.

59
00:04:55,480 --> 00:05:00,040
El bloqueo se puede utilizar para el texto por ejemplo en un testimonial algo que alguien dice pero

60
00:05:00,040 --> 00:05:05,020
también para algo así como esta parte de aquí donde mencionamos esta parte de aquí que resalta un poco

61
00:05:05,020 --> 00:05:07,040
más sobre el contenido.

62
00:05:07,140 --> 00:05:13,170
También un buen uso del bloqueador necesitamos dos párrafos por lo tanto poner orden y presión nota

63
00:05:13,980 --> 00:05:22,530
eliminar una parte del Horemheb ni ponemos un párrafo cortamos y voy a pegar aquí de hecho voy a generar

64
00:05:22,530 --> 00:05:27,750
otro Loreen que creo que es muy corto y una página que me gusta mucho para generar Lore Ipsum porque

65
00:05:27,750 --> 00:05:33,660
estoy aquí de estudio es un poco corto es Ipsum puntocom o mejor dicho Lipson puntocom.

66
00:05:34,230 --> 00:05:39,030
Entonces puedes por ejemplo aquí en la parte inferior decirle quiero una cantidad de párrafos que inicie

67
00:05:39,030 --> 00:05:45,960
con Horemheb solo en este caso queremos dos párrafos dos párrafos que no hay MICE en colores Missoni

68
00:05:46,000 --> 00:05:52,620
hilamos generar tenemos aquí nuestro Lore Ipsum creo que es un poco mejor simular un poco el texto que

69
00:05:52,620 --> 00:05:57,240
tendríamos en esta sección intentar un poco.

70
00:05:57,240 --> 00:06:02,310
Probablemente sea mucho código orita vemos cómo se ve y lo podemos quitar o poner esa es una de las

71
00:06:02,310 --> 00:06:09,810
ventajas del Ipsum podemos ir viendo por ejemplo con contexto aunque el cliente a uno nos mande nada

72
00:06:10,200 --> 00:06:11,950
como se diría viendo el diseño.

73
00:06:12,280 --> 00:06:16,890
Entonces creo que se ve bien la cantidad de texto que lo posicionamos con CSS.

74
00:06:16,890 --> 00:06:19,560
Vamos a verlo mucho mejor.

75
00:06:19,710 --> 00:06:24,480
Para finalizar lo que viene siendo el HTML es el que tenemos aquí más sobre nosotros con los iconos

76
00:06:25,430 --> 00:06:30,990
entonces todo este que está aquí lo vamos a copiar y pegar de nueva cuenta esto es repetir código pero

77
00:06:30,990 --> 00:06:35,570
de momento con puro HTML que es lo que sabemos hasta ahorita es la única forma de hacerlo.

78
00:06:35,580 --> 00:06:40,770
Obviamente ya con PHP lo podrías hacer que solamente un archivo lo pudieras incluir en otro.

79
00:06:40,770 --> 00:06:46,290
Eso no es soportado aún por HTML después de que se posiciona correctamente y debido a la forma en la

80
00:06:46,290 --> 00:06:52,170
que estamos escribiendo el código se copia y lo pegamos acá y se ve bastante bien no tenemos que hacer

81
00:06:52,170 --> 00:06:58,200
nada más debido a la forma en la que estamos escribiendo en nuestras clases está listo el HTML en el

82
00:06:58,200 --> 00:07:00,390
siguiente vídeo vamos a trabajar con el CSS.

83
00:07:00,390 --> 00:07:05,250
Puedes ver que tenemos que crear la barra de arriba con este color y posicionar la imagen y esto de

84
00:07:05,250 --> 00:07:08,780
aquí de esta forma así que veámoslo en el siguiente vídeo.