En este íbamos a crear lo que viene siendo esta parte de aquí puedes ver algo importante es que lo que
viene siendo este dispositivo grande tenemos el blog que toma más espacio lo que viene siendo los talleres
del lado derecho.
Pero si lo hacemos más pequeño puedes ver cómo se posicionan los talleres arriba y el blog abajo es
algo que puedes lograr con Flex Books muy fácilmente.
Entonces vamos a construir todo este HTML.
Nos esperan mucho HTML en este video y hemos dado un poco de scroll después del Jader voy a colocar
un tip primero un dip que va a decir contenido principal y también contenedor doble clase y eso pasa
porque vamos a aplicar Flags Books tanto al mail como Alcibar entonces por eso tenemos un tip que rodea
ambos el con la clase de blog y lo que viene siendo una Seid con la clase de cursos por lo tanto éste
de aquí va a aplicarle un display Flex tanto al main como el aceite y es la única forma de hacerlo en
realidad.
Por lo tanto se lo vamos a colocar así en H2 que va a hacer aquí nuestro blog tal vez si es bueno por
qué otro H2.
Ya tenemos uno arriba bueno el blog es parte importante casi igual de importante que esto de aquí porque
este es un blog y esto es lo que indica que esto es un blog.
Por lo tanto los pongo al mismo nivel y de nueva cuenta como mencioné anteriormente las entradas de
blog son artículos de blog para poder darle estilos como si fuera un componente propio.
Desde aquí estaremos dando el estilo a cada entrada para hacerlo más fácil de utilizar.
Después imagen y M.G..
Usualmente cuando le pones Flex Books utilizas Flags Book se recomienda una imagen que rodea a un dip
que rodea la imagen.
Va a ser lo más sencillo de otra forma puede tener resultados un poco inesperados y ponemos blog uno
y aquí ponemos imagen blog después ya fuera de la imagen y puedes poner un comentario de nueva cuenta
pegás.
Por ejemplo aquí imagen después todo el contenido ver con contenido blog y una CH3 que va a decir tipos
de grano de café es una entrada de blog y un párrafo.
Vamos a utilizar un poco de ipsum para no estar escribiendo tanto texto en la página de Loreen vamos
a generar digamos cinco párrafos está bien generar y vamos a copiar una pequeña parte de uno aquí lo
pego y después abajo voy a colocar un enlace que nos va a llevar la entrada a punta HTML y va a tener
un par de clases Class botón y botón primario.
La misma forma que muestra otros frameworks crean sus botones vamos a hacer lo mismo y ponemos leer
entrada.
Si guardas cambios y abres tu proyecto puedes ver que aparece esta imagen en el título aquí un poco
de descripción y leer entrada copiar todo este texto.
Aquí todo este artículo vamos a crear dos copias Zona 2.
Pensar que tenemos aquí 1.
Este va a ser Blog 2 y aquí vamos a ponerle el texto va a decir 3 deliciosas recetas para café para
el café y lo demás lo dejamos como está no hay problema.
Un poco de scroll que va a ser Block 3 y pegamos aquí el H3 beneficios del café si guardamos cambios
abrimos el proyecto de nueva cuenta puede ser que tenemos diferentes imágenes con diferentes encabezados
y se va viendo bien.
Siguientes la sección de nuestros cursos y talleres.
Aquí por ejemplo voy a dar un poco de scroll voy a poner de nueva cuenta una H2 para que tenga el mismo
tamaño que el otro.
Nuestros cursos y talleres íbamos a colocar un orden vamos a utilizar una lista esto perfectamente puede
ser una lista son elementos relacionados.
C Son lista.
En este caso son elementos relacionados pero cada elemento habla por sí mismo.
Por lo tanto se utiliza el artículo cursos lista y aquí ponemos cursos lista de esta forma y ponemos
un eloi con la clase de curso y llegamos a poner un H3 ponerle aquí.
De hecho esto va a ser una CH4 no tiene la misma importancia que las entradas de blog pero es importante
técnicas de extracción de café y un párrafo que va a decir precio dos puntos y luego tenemos una Span
que hace gratis y vamos a poner de esta forma.
Le pongo spam porque si ves el diseño que estamos tratando de lograr puedes ver que lo que es precio
y cupo por ejemplo están en negritas el texto está en Fuente normal cupo 2 puntos de spam que ponemos
20 y finalmente puedes ver que tenemos aquí un botón a copiar éste puede ser que esté ese botón primario
esto va a ser botón secundario vamos a crear un par de botones y aquí va a decir más información más
más información de esta forma y nos lleva a cursos cursos.
De esta forma creamos una copia de este curso que vamos a tener al menos dos y el encabezado el título
este otro curso taller 4 recetas de café para principiantes el precio lo vamos a dejar igual gratis
20 está bien.
Más información si guardamos cambios puedes ver que tenemos las entradas y más abajo tenemos los talleres
de búsqueda de algunos estilos.
Que veámoslo en el siguiente video.