Organizándonos

Tipografía

Para facilitarte el trabajo la apariencia ya está codificada en las siguientes etiquetas y clases:

Tipografía H1

Tipografía H2

Tipografía H3

Tipografía H4

Tipografía p

p class="textopequeno"

p class="piedefoto"

p con etiqueta <em>

p con etiqueta <strong>

Cambiar el color del texto

Lo único que tienes que hacer para cambiar el color del texto es usar una de estas clases

colortexto_pera

colortexto_melon

colortexto_menta

colortexto_cacahuete

colortexto_cacao

colortexto_negro

colortexto_almendra

colortexto_blanco

Iconos

Puedes utilizar iconos en cualquier texto o botón.

Solo tienes que escribir <span class="material-symbols-outlined">nombre del icono</span>

Puedes consultar los nombres de los iconos en la web de material-symbols.



<span class="material-symbols-outlined">download</span>
<span class="material-symbols-outlined">question_mark</span>
<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">shopping_bag</span>
<span class="material-symbols-outlined">add_shopping_cart</span>
<button class="botonazul-secundario grande"><div>botón verde</div> <span class="material-symbols-outlined">settings</span></button>
<button class="botonrojo grande"><div>botón verde</div> <span class="material-symbols-outlined">settings</span></button>
<button class="botonrojo-secundario grande"><div>botón verde</div> <span class="material-symbols-outlined">settings</span></button>
<button class="botonamarillo grande"><div>botón verde</div> <span class="material-symbols-outlined">home</span></button>
<button class="botonamarillo-secundario grande"><div>botón verde</div> <span class="material-symbols-outlined">settings</span></button>

Así se ve el código de ejemplo

download question_mark home shopping_bag add_shopping_cart

Usando LISTAS

Lo único que tienes que hacer para usar una lista es elegir añadiendo una clase a ul, si la quieres horizontal o vertical y después seleccionar el nivel al que corresponde cada li


<ul class="listahorizontal">
    <li class="nivel1">Nivel 1</li>
    <li class="nivel2">Nivel 2</li>
    <li class="nivel1">Nivel 1</li>
    <li class="nivel2">Nivel 2</li>
    <li class="nivel2">Nivel 2</li>
    <li class="nivel3">Nivel 3</li>
    <li class="nivel3">Nivel 3</li>
</ul>

<ul class="listavertical">
    <li class="nivel1">Nivel 1</li>
    <li class="nivel2">Nivel 2</li>
    <li class="nivel1">Nivel 1</li>
    <li class="nivel2">Nivel 2</li>
    <li class="nivel2">Nivel 2</li>
    <li class="nivel3">Nivel 3</li>
    <li class="nivel3">Nivel 3</li>
</ul>

Así se ve el código de ejemplo

LISTA HORIZONTAL

LISTA VERTICAL