En este capítulo estaremos construyendo este Layout había mencionado en el capítulo anterior que estaríamos
construyendo un layout flexible con CSS Grit estaremos creando otro con los floods iba a ser este proyecto
puede ser que en la parte superior tenemos el logotipo después tenemos este gráfico.
Esta es una imagen.
Entonces todo esto es una imagen incluso un texto.
Seamos un poco de scroll puede ser que tenemos un listado de productos y aparece en imágenes el nombre
el precio etcétera.
Es muy sencillo en realidad pero nos va a permitir continuar practicando y ver algunas otras técnicas
para crear Layout con CSS en los archivos del curso de este video.
Vas a encontrar este Front en estor va a ser un archivo ZIP que lo descomprime.
Va a tener la versión final.
En caso de que tengas problemas con el HTML CSS y la versión inicial esta es la que vamos a copiar y
pegar.
En mi caso yo lo voy poner en el escritorio y voy a abrirla en estudio como entonces el índex va a estar
vacío y en CSS tenemos un archivo llamado estilos también que está vacío.
Lo único que va a encontrar o vas a encontrar en esta carpeta de imágenes con muchas imágenes.
Primer paso a en el Indec donde se pone el signo de exclamación y un tab para que nos crea la estructura
básica que vamos a poner frontend.
Estor de esta forma y vamos a enlazar hacia esa hoja de estilos con un link real Tachi está bien CSS
que es la carpeta de una Vesti lospuntos C después vamos a crear vamos a abrir lo que viene siendo el
diseño y puede ser que tenemos este jede Rakhine esta parte con el logotipo número Gelder y dentro una
imagen con la carpeta y MGR con el logo PNG.
Logotipo resguardamos cambios.
No lo he abierto en la observarle damos clic aquí abajo y lo voy a abrir en Mac server.
Continuamos con el proyecto.
Siguiente paso es colocar la imagen que tenemos esta imagen muy grande.
Este tipo de imágenes muy grandes pueden ser como banner etcétera.
Yo voy a nombrarla como Jiro.
Así es también en muchos ejemplo lo vas a encontrar en una imagen grande que es el principal elemento
del sitio web de un archivo apuntó JPG Alt Magen cirros.
Tenemos ya las dos imágenes aquí el siguiente paso es esta parte que dicen nuestros productos y esto
va a ser parte del mail.
Por lo tanto puedes ver como vamos a ir estructurando nuestro proyecto.
Tenemos un GB Tenemos esta imagen que no cabe en ninguna de estas etiquetas semánticas nuevas de HTML5
entonces vamos a poner aquí el main está como no hay en ninguna.
Lo que utilizamos tiene que ser más genérico de todos lo tenemos el main para definir el contenido principal
y aquí vamos a poner un H2 con el texto nuestros productos los cambios en nuestros productos es esta
parte que está aquí y después vamos a crear los productos podés ver que es un listado de productos por
lo tanto vamos a utilizar una lista ordenada con una clase lista productos de esta clase para poder
seleccionar todo esto con CSS y aplicarlo a la clase.
Al ser esta una lista vamos a poner una ley y dentro vamos a poner una imagen no hay ningún problema
puedes colocar una lista y dentro colocar un di un ãrtico o cualquier otro elemento no tiene nada de
o no hay nada de malo en colocar una ley y dentro colocar HTML.
No te preocupes por eso y Emecé diagonal 1 punto JPG que hace bueno el producto.
Y si guardamos cambios y abrimos el proyecto puedes ver que aparece la primera imagen.
Ahora puedes ver que tenemos el nombre de la camiseta así como su precio.
Eso va a ser un párrafo que viene siendo el nombre.
Por ejemplo en la primera se llama Google J.V y dentro vamos a poner una Span con 25 de esa forma voy
a poder seleccionar este elemento con CSS porque puedes ver que lo que viene siendo el precio es un
poco más grande y un color diferente al texto que tenemos aquí.
Si es que vamos a colocar lo que viene siendo ese botón que dice comprar poner un enlace HR-V lo vamos
a poner como signo de gato para que simule un enlace y quiero poner una clase que se llame botón de
esta forma puedo crear un selector que diga botón iba a aplicarse a todos los distintos enlaces que
tengan esta clase.
El texto de comprar si guardas cambios y abres el proyecto puedes ver que dice J.S o Boulle y es €25
y comprar.
Vamos a abrir el código nuevamente y voy a comenzar a crear copias de este.
Entonces por ejemplo comenzar a copiar y crear muchas copias ocupamos como 12 productos donde se crea
varias copias y aquí ponemos por ejemplo dos y luego tres cuatro cinco seis para ir enlazando las diferentes
imágenes que abrimos y MGP ser que tenemos hasta las 12 al colocar hasta las 12
9
11 y 12 y me salieron exactos las cantidad de imágenes 6 Voy a colapsar aquí esta parte para que sea
más fácil de ver que aparecen las distintas camisetas lo único que me falta son los nombres de usar
un poco de scroll hacia arriba.
La primera es que está bien.
La segunda es angular la tercera es React la cuarta es Redux
Redux las siguientes nos
J.S las siguientes Sass incisas.
Luego HTML 5 tenemos geco
y Bulma CSS
infra engordes CSS muy popular hoy en día y tenemos STyPS scrip
después Drupal y finalmente tenemos JavaScript.
Eso nos va a crear o mostrar las diferentes imágenes con el nombre que es el correcto para cada una
de ellas puedes ver lo sencillo que fue el HTML hacer un poco más grande y volver a esta parte más pequeña
no hay problema si la tenemos así no liándola ocupamos entonces esa parte está lista en el siguiente
video vamos a comenzar a escribir un poco de CSS estaremos trabajando buena parte de éste en este archivo
así que continuamos en el próximo video.