Vamos a continuar con nuestro diseño y vamos a crear una copia de nosotros y vamos a crear una Chuquibamba
dos cursos uno HTML que esto ya lo definimos en nuestra navegación pues apuntamos a cursos HTML eliminar
todo lo que está en el main editar lo escribimos desde cero nuevamente y por lo tanto abrimos aquí vamos
a darle click en cursos que tenemos Jader y Fuhrer.
El siguiente paso vamos a crear de nueva cuenta el Main main con una clase contenedor y un HD2 con una
clase de central texto que vimos anteriormente y nuestros próximos cursos y talleres.
Nuestros próximos cursos y talleres y anteriormente habíamos creado los cursos era lo que vendría siendo
por ejemplo aquí la página principal.
Aquí esto era una lista pero en este caso voy a utilizar un artículo o un artículo es un elemento de
nueva cuenta que se explica por sí solo sin depender de lo demás y lo que viene siendo un curso va a
contener toda la información no va a requerir de nadie más.
Si abrimos el Index por ejemplo un poco de scroll puedes ver que agregué aquí la clase de curso por
lo tanto debido a que son clases puedo ponerle ãrtico y luego cursos y eso me va a dar todos los estilos.
Ahora también voy a mezclar lo que viene siendo mi Grit y tengo las dos clases heredo de ambos lados
voy a utilizar una clase llamada columnas 4 no lo hemos creado pero básicamente lo que va a hacer es
tomar cuatro de las 12 es decir una tercera parte y este va a tomar 8 de las 12 entonces va a darnos
un diseño como éste MG y MG diagonal curso 1 punto JPG que vas a poner imagen curso en caso de que la
imagen no cargue por algo nuestro texto alternativo.
Después vamos a colocar columnas ocho estas clases aún no existen las haremos en este mismo video una
CH4 con no margen porque ya vimos esa clase y vimos lo que hace con técnicas de extracción de café y
damos Enter y muy importante si abrimos el Indec si recuerdas ya tenemos estos párrafos aquí definidos
por lo tanto los voy a copiar puede ser que tienen el párrafo con la clase no márgen los Spanx y toda
esta parte se los vamos a utilizar.
Por ejemplo antes de estos párrafos voy a colocar uno más eliminó uno de estos que va a decir fecha
y vamos a poner aquí por ejemplo 20 de agosto de 2019 si guardamos cambios y abrimos el proyecto puedes
ver qué queda de esta forma.
Hay cosas buenas.
De momento puedes ver que se está aplicando correctamente lo que son dos las clases similar a lo que
tenemos en la página de inicio pero la imagen es muy grande no hemos creado lo que viene siendo las
columnas así que por esa parte estamos un poco con trabajo que hacer y también por ejemplo nos hace
falta lo que viene siendo esta descripción de nueva cuenta tomamos un poco de ipsum de cualquier lugar
poco de texto aquí vamos a ponerle un y ponemos la descripción ahora si guardamos cambios y abrimos
el proyecto puede ser que la descripción se pone en negritas eso pasa porque curso P tiene lo que viene
siendo un fondo de 700.
Nosotros le ponemos al hispano un fondo de 400 y bueno tal vez si es bueno poner a quienes sepan todo
esto de aquí y hacer que aplique el FOM Weide un poco más delgado y se vea bien esa opción es una.
Pero también puedes crear una clase ponerla aquí por ejemplo Clas descripción y por ejemplo copiar esta
clase y a quienes es ponerle en el curso punto de descripción y ponerle que sea un fondo de 400 incluso
podrías para no repetir declaraciones podrías cortarlo y ponerle una coma.
Y eliminar estos de aquí creo que esa es una opción mucho más limpia.
Pero por ejemplo si abres tu diseños puedes ver que no se ve ahora si inspeccionamos el código y vemos
cómo se está aplicando el CSS aquí inspeccionar puedes ver que la descripción fondo web dice €400 y
está tachado este dice €700 y se está aplicando.
Por qué pasa esto no.
Bueno esto pasa por una de las reglas de CSS puedes ver que este selector discurso es decir tiene dos
selectores y uno de ellos es una etiqueta eso lo hace un selector más pesado.
Este solamente tiene una clase lo hace un selector más ligero un poco más débil por así decirlo por
lo tanto lo puedes hacer más específico.
Curso y luego p y luego descripciãn es decir que se presente este Dip con esta etiqueta y más específico
con el párrafo tenga esta etiqueta importante que no haya espacio aquí debe ser el mismo elemento y
si por ejemplo abres tu proyecto puedes ver que eso corrige el problema entonces lo habíamos visto anteriormente
que lo podrías aplicar con importan y eso iba a planchar cualquier estilo que hubiera iba a pasar por
encima y aplicar ese pero también si tienes problemas que se está aplicando un estilo puedes escribir
un selector mucho más específico mezclando algunas clases y algunas etiquetas y puedes ver que se va
a corregir ese problema voy a crear un par más de talleres.
Por lo tanto voy a copiar aquí incursos todo este artículo que es bastante grande y vamos a crear un
par de copias más y vamos a ponerle uno y uno más aquí abajo.
Que sean dos el primero ya tiene lo que es el texto así que nos dará un poco escorar el segundo la imagen
va a ser imagen 2 y aquí vamos a cambiar lo que viene siendo el nombre del taller taller para tostar
y moler granos y vamos a poner por ejemplo otra fecha digamos 24 de agosto gratis 20 personas está bien
y un poco más de scroll.
Aquí por ejemplo el 3 y por ejemplo el nombre de este taller va a ser 4 recetas recetas de café para
principiantes y digamos 28.
29 de agosto.
Creo que es buena fecha si guardamos cambios pues tenemos diferentes imágenes diferentes encabezados
y puedes ver que incluso se aplica lo que es el borde y queda bastante bien.
Ahora por ejemplo cada uno de estos tiene la clase de curso aquí por ejemplo me haría falta un poco
de Padín arriba Badín top 3 para que no quede tan pegado lo que es la imagen con la línea que está aquí
creo que se ve mucho mejor y si por ejemplo volvemos a la página principal pues es que no afecta mucho
mejor dicho no afecta nada se ve bien ahora lo único que nos falta es estas clases nuevas no 4 y 8 así
que vamos a ir a Grit y puede ser que tenemos una de 6 de momento como mencioné anteriormente va a ser
4 de 12 es decir una tercera parte y una tercera parte del 100 por ciento es 33 por ciento.
Por lo tanto poner columnas 4 y esto va a ser Flex 0 0 Calc 33.3 por ciento menos un Greim y tenemos
el otro o el otro.
Si recuerdas las columnas 8 entonces va a ser 8 de 12 columnas eso es dos terceras partes de nuevas
cuentas eso sería el 66 .6 por ciento columnas 8 Fleck cero cero Calc 60 y 6.6 por ciento por ciento
importante menos RAM.
Y si guardamos cambios y abrimos el proyecto puedes ver que lo que vienen siendo los cursos se muestran
correctamente era hasta aquí estaba viendo la anterior puedes ver que funciona correctamente y si lo
hacemos pequeño nuestro Grit no aplica en un dispositivo móvil y hace que se vea bastante bien incluso
con las líneas de aquí entonces funciona bastante bien y pudiste ver cómo mezclamos lo que era el curso
que le daba la apariencia de curso pero también la parte de grit para tener acceso a las columnas y
de esa forma puedes crear un sitio en el que no repitas tantas clases ni tanto contenido.
Obviamente estas cosas vienen con la práctica así que recomiendo que practiques mucho lo que estás aprendiendo
y con eso te será más fácil crear sitios web que no repitan tanto código.
Si abrimos nuestro diseño y vamos a contactos puedes ver que tenemos este formulario en el formulario
tenemos la imagen de esta forma como sobrepuestos se ve bastante bien y en pequeño no está sobrepuesto
tiene el botón de enviar y todo lo demás así que esta será la última sección de este proyecto así que
vamos a crearla en el siguiente vídeo.