DISONET - DISEÑO LAYOUT

Distribución de elementos

Lo primero que hay que saber sobre la distribución de elementos con el sistema de tarjetas, es que hay que indicar la cantidad de elementos que queremos incluir. Es decir, si tenemos un menu con 5 elementos y queremos que ocupe todo el ancho del navegador, tenemos que añadir en el elemento principal del menu card-1 para ajustarlo a todo el ancho y en cada uno de los items del menu card-5 para que se adapten al tamaño.

<nav class="card card-1 dark"> <input type='button' value='inicio' class="card-sb white button padding-top-bottom card-5"> <input type='button' value='servicios' class="card-sb white button padding-top-bottom card-5"> <input type='button' value='cursos' class="card-sb white button padding-top-bottom card-5"> <input type='button' value='contacto' class="card-sb white button padding-top-bottom card-5"> <input type='button' value='FAQs' class="card-sb white button padding-top-bottom card-5"> </nav>

obtendríamos algo similar a esto:

TIPOS DE TARJETAS

Hay 3 tipos de tarjetas, las cuales se definen con las clases "card", "card-sb" y "card-full".

"card" -> crea una tarjeta con un margen exterior de 2.5% y un sombreado en el borde.

<div class="card card-2 center-content">card</div>

"card-sb" -> crea una tarjeta con un margen exterior de 2.5% y a diferencia de "card", elimina el sombreado

<div class="card-sb card-2 center-content">card-sb</div>

"card-full" -> crea una tarjeta sin un margen exterior y sin borde.

<div class="card-sb card-2 center-content">card-full</div>