Una vez finalizada la que es la página principal estaremos trabajando horas con nosotros así que damos
clic aquí.
Puede ser que de momento nada más tenemos esta parte en la que vimos cómo enlazar documentos y la importancia
de utilizar una hoja de estilos externa.
El siguiente paso que vamos a hacer es copiar todo este código y pegarlo en nosotros.
Esto nos lleva a un principio importante cuando estás creando sitios web.
Cuando eres diseñador que se recomienda que no tengas código repetido es decir una de las desventajas
de utilizar HTML como tal es que si por ejemplo yo quisiera agregar un nuevo enlace digamos aquí uno
más que dijera la tienda virtual que obviamente no sería una tienda virtual como tal volvemos hacia
la página de inicio desde el que tenemos tienda virtual.
Pero si voy a nosotros no tengo esa tienda virtual tendría que ir y copiar ese enlace hacia acá y pegarlo
y ahí es donde sí se vería lo que viene siendo tienda mezclar en nosotros lo puse arriba abajo aquí
arriba después de que aparece tienda virtual.
Pero debido a que es HTML y como mencioné anteriormente no es un lenguaje de programación no hay formas
de hacerlo que no haya repetición.
Más adelante mucho más adelante estaremos viendo con PHP cómo puedes ahorrar y evitar estos códigos
duplicados.
Entonces no hay problema no te preocupes al ser puro HTML es la única forma en la que lo podemos hacer.
Regresarle un poco aquí sí mismo a nosotros.
Ahora si vemos el diseño para nosotros puedes ver que lo que es el encabezado es un poco diferente no
aparece esta imagen tan grande.
Seguramente esta barra no sabría lo que viene siendo estudió con nosotros y un poco de scroll puedes
ver que tenemos este H1 este lo vamos a quitar de aquí no va a ser necesario lo quitamos y después el
siguiente paso es si recuerdas que agregamos dos clases hoy GDR inicio de 6 GDR de inicio que aplicamos
estas dos clases.
ésta le define la altura y también la imagen de fondo.
Por lo tanto aquí vamos a quitar de aquí si guardamos cambios que cambian poco poco ya no parece lo
que es la imagen de fondo pero nos hace falta lo que es el color de fondo porque aquí está la navegación
acá está el logotipo pero no se pueden ver pero se va viendo bien.
Siguiente paso esta sección que dice más sobre nosotros toda esta parte de aquí la vamos a cortar hasta
el Führer todo hasta el Führer eso es todo hasta el Führer y lo eliminamos.
Entonces elimino esta parte de aquí por estaremos regresando un poco de este código porque puedes ver
que esta sección de aquí de los iconos es la misma que está en la página principal vamos a abrir lo
que es el código y no es este archivo debe ser de nosotros HTML asegúrate de que está citando ese archivo
y el primer paso que va a crear un main una etiqueta.
Si recuerdas mencioné que debes de tener una por documento por lo tanto esta le va a decir a Google
por ejemplo un buscador que este es el contenido principal.
Colocamos una clase de contenedor para que se entre el contenido.
Se va a centrar.
De momento no hay nada pero se va a centrar y también vamos a crear un H1 recuerda también tienes que
tener un H1 documento para que le digas que este es el contenido principal es agregar aquí un texto
que va a decir conoces sobre nosotros.
Es la parte que está arriba en nuestro diseño.
Aquí guardamos cambios del lado izquierdo.
Si recuerdas habíamos quedado un par de clases en utilidades utilidades para tener un fondo Huay de
300 y centrarlo por lo tanto vamos a utilizarlas.
Las clases de fondue 300 y también central texto central texto resguardamos cambios abrimos el proyecto
y es el que tenemos.
Conoce sobre nosotros el siguiente paso es definir lo que es el contenido que puede ser que tenemos
una imagen que refleja una imagen aquí como apoyo y 25 años de experiencia y un poco de Lauren Ipsum
por lo tanto vamos a dar aquí después de la H1.
Vamos a crear un DIV que va a ser el padre por lo tanto aquí vamos a aplicar un poco y en este caso
estaremos utilizando si es Grit que es también el nuevo estándar junto a Flex Box crear una clase llamada
Imagen y dentro colocón ni MG entonces carpeta de imágenes y después nosotros puntos JPG.
Hay que poner la imagen sobre nosotros en caso de que por algo no cargue la imagen al colocarla y después
vamos a tener que hundir con las caras el texto.
Nosotros vamos a rodear lo que viene siendo este texto 25 años de experiencia nueva cuenta volatilizar
Belocopitt 25 años de experiencia.
El bloqueo se puede utilizar para el texto por ejemplo en un testimonial algo que alguien dice pero
también para algo así como esta parte de aquí donde mencionamos esta parte de aquí que resalta un poco
más sobre el contenido.
También un buen uso del bloqueador necesitamos dos párrafos por lo tanto poner orden y presión nota
eliminar una parte del Horemheb ni ponemos un párrafo cortamos y voy a pegar aquí de hecho voy a generar
otro Loreen que creo que es muy corto y una página que me gusta mucho para generar Lore Ipsum porque
estoy aquí de estudio es un poco corto es Ipsum puntocom o mejor dicho Lipson puntocom.
Entonces puedes por ejemplo aquí en la parte inferior decirle quiero una cantidad de párrafos que inicie
con Horemheb solo en este caso queremos dos párrafos dos párrafos que no hay MICE en colores Missoni
hilamos generar tenemos aquí nuestro Lore Ipsum creo que es un poco mejor simular un poco el texto que
tendríamos en esta sección intentar un poco.
Probablemente sea mucho código orita vemos cómo se ve y lo podemos quitar o poner esa es una de las
ventajas del Ipsum podemos ir viendo por ejemplo con contexto aunque el cliente a uno nos mande nada
como se diría viendo el diseño.
Entonces creo que se ve bien la cantidad de texto que lo posicionamos con CSS.
Vamos a verlo mucho mejor.
Para finalizar lo que viene siendo el HTML es el que tenemos aquí más sobre nosotros con los iconos
entonces todo este que está aquí lo vamos a copiar y pegar de nueva cuenta esto es repetir código pero
de momento con puro HTML que es lo que sabemos hasta ahorita es la única forma de hacerlo.
Obviamente ya con PHP lo podrías hacer que solamente un archivo lo pudieras incluir en otro.
Eso no es soportado aún por HTML después de que se posiciona correctamente y debido a la forma en la
que estamos escribiendo el código se copia y lo pegamos acá y se ve bastante bien no tenemos que hacer
nada más debido a la forma en la que estamos escribiendo en nuestras clases está listo el HTML en el
siguiente vídeo vamos a trabajar con el CSS.
Puedes ver que tenemos que crear la barra de arriba con este color y posicionar la imagen y esto de
aquí de esta forma así que veámoslo en el siguiente vídeo.