Veamos como agregar estos iconos que están aquí que nos dicen un poco más de información sobre estas
casos que están en beta y eso lo estaremos haciendo con listas.
Ya no habría estudio codón sólo un poco de scroll hacia arriba y después del precio vamos a colocar
aquí las características a ponerle aquí un listado ahora en HTML creas un listado con un orders List
y después cada elemento se coloca en una Elegy digamos que con el elemento 1 y digamos el Lehi elemento
2 y VDI digamos elemento 3.
Si guardamos cambios y abrimos el diseño puedes ver que aparecen listados de esta forma.
Esto se le conoce como un Order list es decir lista ordenada.
Existe otro llamado Order List entonces Ailey esto si quiere decir lista ordenada y puede ser que coloca
un 1 2 y 3 automáticamente en cada uno de ellos.
También existen algo llamado deístas de definición esas no las veremos en esta parte pero puedes ver
que hay dos tipos de listas las que tienen viñetas o órdenes y las que tienen los números son las.
Order List vas a poner un Order List y usualmente por ejemplo muchos menús de navegación aún se hacen
con listas son muy utilizadas aún hoy en día y una de sus características es que pueden contener código
HTML.
Quiero poner enter y voy a colocar una imagen M.G. diagonal y con un bajo doble.
Con el icono de Bruce.
Entonces puedes ver que tengo un listado le colocó una imagen dentro de que iba a colocar un párrafo
que va a decir 3 si guardamos cambios del que aparece la lista aparece el icono y con un número tres
entonces eliminar esta parte ponemos Emecé y Megía diagonal para el icono y un bajo estacionamiento.
Icono autos y después ponemos un párrafo que va a decir digamos tres también y finalmente copio este
de aquí lo pongo aquí abajo.
Entonces este último va a decir icono yo bajo dormitorio para dos habitaciones que cuenta esta casa
entonces habitaciones tenemos digamos cuatro guardamos cambios y aparecen los iconos y aparecen 3 3
y 4.
Después de agregar cualquier elemento aquí incluso hundir H1 o cualquier cosa dentro de una lista aquí
va a colocar una clase Class iconos características para poderle dar un poco de estilo y vamos a copiar
todo este código de aquí para colocarlo aquí y después de este precio digamos y también aquí abajo pegamos
los tenemos ya tres listas listas en lo que viene siendo estas etiquetas vamos a comenzar con esto de
aquí a copiar y con las características abrimos el estaís junto CSS y que les voy a poner punto.
Y con dos características.
Si abrimos llaves por default puedes ver que se agregan estas viñetas que están aquí.
Eso se conoce como el Liste estáel y existen múltiples opciones liceísta y puede parecer que existen
todas estas opciones.
Digamos por ejemplo Cierco Aquí guardamos cambio si es que cambia el icono.
Entonces eso te permite personalizar un poco el icono que sea mostrar o mostrar al menos otro más digamos
aquí.
El otro es bueno si ya no se que sea este la verdad mal usado.
Bueno se ve medio raro los caracteres tal vez por eso nunca lo había usado uno más de los atronar aquí
les está el
y vamos a poner por ejemplo
Insight se va a colocar lo que viene siendo la viñeta un poco más hacia adentro.
Eso sí en algunos casos llega a ser un poco útil pues sabiendo bien en nuestro caso puedes ver que nuestro
diseño no tiene ninguna viñeta.
Entonces para eliminarlas porque se coloca un par de vacunas non entonces liceísta el nonna solo elimina
ahora por default también los un orden Liz agregan un pequeño margen aquí pequeño para y mejor dicho
por lo tanto solo removemos con cero eso lo va a quitar y puede ser que remaba el espacio entonces se
va viendo bastante bien la verdad.
Siguiente paso es que puedes ver que un Order list es el padre de los Eloisa.
Por lo tanto podemos ponerla aquí.
Display Flex display Flex y guardar cambios puedes ser que va a colocar un elemento junto al otro y
para que cada uno tome todo el tamaño que haya disponible.
Ponemos aquí iconos características e Lehi y ponemos Flex 1 y guardamos cambios que se colocan de esta
forma lo que es el icono y el número deben de estar en el mismo nivel es decir puedes ver que está en
uno frente al otro puedes ver que tenemos en el padre display Flex pero también en el hijo le puedes
poner el display Flex.
No hay ningún problema y eso va a ser que lo que es la imagen y el texto se coloca en uno frente al
otro y se va viendo bastante bien.
Ahora si quieres agregar un poco de separación entre el icono y lo que viene siendo el número pues poner
aquí en Lehi MG márgen right digamos 20 píxeles que será igual a 2 y eso va a agregar un poco de separación
y puedes ver que se ve bastante bien aquí en esta parte por ejemplo puedes ponerle Estefi contén Espais
y vendi y guardar cambios solamente que tendrías que quitar de aquí y puedes ver que se ve un poco más
centrado los iconos un poco más cercano aquí y creo que se entiende un poco mejor que es lo que hace
cada icono y con eso está lista esta parte puedes ver que se ve bastante bien los iconos uno junto al
otro igual que en el diseño entonces en lugar de tener por ejemplo aquí que diga baños contexto pues
ponemos una imagen que hace que el diseño sea más fácil de entender y más sencillo.
En el siguiente vídeo vas a continuar con esta parte pues es que ya casi finalizamos con la página principal
algo que siempre me pasa es que la página principal al ser la más grande de todas usualmente requiere
más tiempo una vez finalizada la página principal te darás cuenta que muchas clases las vamos a reutilizar
y el proceso de desarrollo va a ser mucho más rápido así que vamos a continuar el siguiente vídeo con
la sección de blog y testimoniales.