The Liar

Estudiante de Primer año de Diseño Web. Super Amateur.

[butimabadliar]

(El fondo cuadriculado no es parte de la tablilla, solo la presentación)

Tablilla 21: Mountain - Apertura y Post

Descarga: Apertura - Post

Los colores están en el style con variables, ambas tablillas, tanto post como apertura llevan la misma estructura, si se cambia el color de una, se cambia de todas las que lo usen allí mismo. La único forma de que esto no suceda es cambiando la segunda class en esta parte:

<div class="mountain var">

De este modo (pongo la palabra helado como ejemplo, pero ponen la que gustan):

<div class="mountain helado">

Y para que el css nuevo solo afecte a esta agregar o cambiar el css de este modo:

.mountain.helado{--negrorgb: 10, 10, 10;--ddd: #ddd;--accentoa: #7291ae;--accentob: #284f73;--letra: "Alegreya Sans SC", sans-serif;}

[butimabadliar]

(El fondo cuadriculado no es parte de la tablilla, solo la presentación)

Tablilla 20: Loser - Apertura y Post

Descarga: Apertura - Post

Los colores están en el style con variables, ambas tablillas, tanto post como apertura llevan la misma estructura, si se cambia el color de una, se cambia de todas las que lo usen allí mismo. La único forma de que esto no suceda es cambiando la segunda class en esta parte:

<div class="loser var">

De este modo (pongo la palabra helado como ejemplo, pero ponen la que gustan):

<div class="loser helado">

Y para que el css nuevo solo afecte a esta agregar o cambiar el css de este modo:

.loser.helado{--blanco: #fafafa;--ccc: #ccc;--444: #444;--blancorgb: 255, 255, 255;--negrorgb: 1, 1, 1;--accentoa: #495fa6;--accentob: #202c53;--border:1px solid var(--ccc);--letra: "Comfortaa", sans-serif;--letrab: "Maven Pro", sans-serif;}

[butimabadliar]

(El fondo cuadriculado no es parte de la tablilla, solo la presentación)

Tablilla 19: Shadow - Lista de Personajes

Descarga: Código

Los colores están en el style con variables, ambas tablillas, tanto post como apertura llevan la misma estructura, si se cambia el color de una, se cambia de todas las que lo usen allí mismo. La único forma de que esto no suceda es editando la segunda class en esta parte:

<div class="shadow var">

De este modo (pongo la palabra helado como ejemplo, pero ponen la que gustan):

<div class="shadow helado">

Y para que el css nuevo solo afecte a esta agregar o cambiar el css de este modo:

.shadow.helado {--blanco: #fafafa;--eee: #eee;--ccc: #ccc;--blancorgb: 255, 255, 255;--negrorgb: 1, 1, 1;--accentoa: #495fa6;--accentob: #202c53;--letra: "Roboto Flex", sans-serif;--letrab: "Inter", sans-serif;}

[butimabadliar]

(El fondo cuadriculado no es parte de la tablilla, solo la presentación)

Tablilla 18: Instawish - Wishlist

Descarga: Código

Nota: En ".instawish-top:before" pueden cambiar el fondo que se transparenta en el verde.

Los colores están en el style con variables, ambas tablillas, tanto post como apertura llevan la misma estructura, si se cambia el color de una, se cambia de todas las que lo usen allí mismo. La único forma de que esto no suceda es editando la segunda class en esta parte:

<div class="instawish var">

De este modo (pongo la palabra helado como ejemplo, pero ponen la que gustan):

<div class="instawish helado">

Y para que el css nuevo solo afecte a esta agregar o cambiar el css de este modo:

.instawish.helado{--blanco: #fafafa;--smoke: #f5f5f5;--eee: #eee;--ccc: #ccc;--444: #444;--blancorgb: 255, 255, 255;--accentoa: #60965c;--accentob: #134c08;--letra: "Roboto Flex", sans-serif;--letrab: "Inter", sans-serif;}

[butimabadliar]

(El fondo cuadriculado no es parte de la tablilla, solo la presentación)

Tablilla 17: Jill - Ficha (o búsqueda)

Descarga: Código

Los colores están en el style con variables, ambas tablillas, tanto post como apertura llevan la misma estructura, si se cambia el color de una, se cambia de todas las que lo usen allí mismo. La único forma de que esto no suceda es editando la segunda class en esta parte:

<div class="jill var">

De este modo (pongo la palabra helado como ejemplo, pero ponen la que gustan):

<div class="jill helado">

Y para que el css nuevo solo afecte a esta agregar o cambiar el css de este modo:

.jill.helado{--blancorgb:255,255,255;--blanco: #fafafa;--smoke: #f5f5f5;--eee: #eee;--444: #444;--border: 1px solid #dadada;--accentoa: #495fa6;--accentob: #202c53;--letra: "Roboto Flex", sans-serif;--letrab: "Inter", sans-serif;--radius:5px;}

[butimabadliar]

(El fondo cuadriculado no es parte de la tablilla, solo la presentación)

Tablilla 16: Marvel - Lista de Personajes

Descarga: Código

Los colores están en el style con variables, ambas tablillas, tanto post como apertura llevan la misma estructura, si se cambia el color de una, se cambia de todas las que lo usen allí mismo. La único forma de que esto no suceda es editando la segunda class en esta parte:

<div class="marvel var">

De este modo (pongo la palabra helado como ejemplo, pero ponen la que gustan):

<div class="marvel helado">

Y para que el css nuevo solo afecte a esta agregar o cambiar el css de este modo:

.marvel.helado {--eee: #eee;--444: #444;--negrorgb: 0, 0, 0;--blancorgb: 255, 255, 255;--border: 1px solid #dadada;--accentoa: #dc8a1b;--accentob: #963b08;--letra: "Roboto Flex", sans-serif;--letrab: "Inter", sans-serif;}

[butimabadliar]

(El fondo cuadriculado no es parte de la tablilla, solo la presentación)

Tablilla 15: Hannigram- Apertura y Post

Descarga: Apertura - Post

Nota: A diferencia de la mayoría de los packs, la apertura y el post no comparte base de estructura.

Los colores están en el style con variables, ambas tablillas, tanto post como apertura llevan la misma estructura, si se cambia el color de una, se cambia de todas las que lo usen allí mismo. La único forma de que esto no suceda es cambiando la segunda class en esta parte:

<div class="hannigram var">

De este modo (pongo la palabra helado como ejemplo, pero ponen la que gustan):

<div class="hannigram helado">

Y para que el css nuevo solo afecte a esta agregar o cambiar el css de este modo:

.hannigram.helado{--blanco: #fafafa;--smoke: #f5f5f5;--ccc: #ccc;--negrorgb: 0, 0, 0;--border: 1px solid #dadada;--444: #444;--accentoa: #953a48;--accentob: #651823;--letra: "Roboto", sans-serif;--letrab: "Ramabhadra", sans-serif;}

[butimabadliar]

(El fondo cuadriculado no es parte de la tablilla, solo la presentación)

Tablilla 14: Sam - Ficha (o búsqueda)

Descarga: Código

Los colores están en el style con variables, ambas tablillas, tanto post como apertura llevan la misma estructura, si se cambia el color de una, se cambia de todas las que lo usen allí mismo. La único forma de que esto no suceda es editando la segunda class en esta parte:

<div class="sam var">

De este modo (pongo la palabra helado como ejemplo, pero ponen la que gustan):

<div class="sam helado">

Y para que el css nuevo solo afecte a esta agregar o cambiar el css de este modo:

.sam.helado {--blanco: #f7f7f7;--smoke: #f0f0f0;--ddd: #ddd;--444:#444;--border: 1px solid #dadada;--accentoa:#495fa6;--accentob:#202c53;--letra: "Roboto Flex", sans-serif;--letrab: "Inter", sans-serif;}

[butimabadliar]

(El fondo cuadriculado no es parte de la tablilla, solo la presentación)

Tablilla 13: Elmo - Ficha (o búsqueda)

Descarga: Código

Los colores están en el style con variables, ambas tablillas, tanto post como apertura llevan la misma estructura, si se cambia el color de una, se cambia de todas las que lo usen allí mismo. La único forma de que esto no suceda es editando la segunda class en esta parte:

<div class="elmo var">

De este modo (pongo la palabra helado como ejemplo, pero ponen la que gustan):

<div class="elmo helado">

Y para que el css nuevo solo afecte a esta agregar o cambiar el css de este modo:

.elmo.helado {--blanco: #f7f7f7;--eee: #eee;--444:#444;--border: 1px solid #dadada;--accentoa:#495fa6;--accentob:#202c53;--letra: "Roboto Flex", sans-serif;--letrab: "Inter", sans-serif;}

[butimabadliar]

(El fondo cuadriculado no es parte de la tablilla, solo la presentación)

Tablilla 12: Cillian - Wishlist (u otros)

Descarga: Código

Nota: Cuenta con iconografía de FontAwesome, tienen el pack premium 5, no la versión 6, insertada.

Los colores están en el style con variables, ambas tablillas, tanto post como apertura llevan la misma estructura, si se cambia el color de una, se cambia de todas las que lo usen allí mismo. La único forma de que esto no suceda es cambiando la segunda class en esta parte:

<div class="cillian var">

De este modo (pongo la palabra helado como ejemplo, pero ponen la que gustan):

<div class="cillian helado">

Y para que el css nuevo solo afecte a esta agregar o cambiar el css de este modo:

.cillian.helado{--blanco: #f7f7f7;--eee: #eee;--ddd: #ddd;--444:#444;--blancorgb:255,255,255;--border: 1px solid #dadada;--accentoa:#495fa6;--accentob:#202c53;--letra: "Roboto Flex", sans-serif;--letrab: "Inter", sans-serif;}

[butimabadliar]

(El fondo cuadriculado no es parte de la tablilla, solo la presentación)

Tablilla 11: Pilot - Wishlist (u otros)

Descarga: Código

Nota: Cuenta con iconografía de FontAwesome, tienen el pack premium 5, no la versión 6, insertada.

Los colores están en el style con variables, ambas tablillas, tanto post como apertura llevan la misma estructura, si se cambia el color de una, se cambia de todas las que lo usen allí mismo. La único forma de que esto no suceda es cambiando la segunda class en esta parte:

<div class="pilot var">

De este modo (pongo la palabra helado como ejemplo, pero ponen la que gustan):

<div class="pilot helado">

Y para que el css nuevo solo afecte a esta agregar o cambiar el css de este modo:

.pilot.helado{--blancorgb:255,255,255;--negrorgb:0,0,0;--blanco:#fafafa;--eee:#eee;--ddd:#ddd;--444:#444;--111:#0a0a0a;--accentoa:#993B3B;--accentob:#bf5b5b;--letra: "Anton", sans-serif;--letrab: "Comfortaa", sans-serif;}

[butimabadliar]

(El fondo cuadriculado no es parte de la tablilla, solo la presentación)

Tablilla 10: Galatea- Apertura y Post

Descarga: Apertura - Post

Los colores están en el style con variables, ambas tablillas, tanto post como apertura llevan la misma estructura, si se cambia el color de una, se cambia de todas las que lo usen allí mismo. La único forma de que esto no suceda es cambiando la segunda class en esta parte:

<div class="galatea var">

De este modo (pongo la palabra helado como ejemplo, pero ponen la que gustan):

<div class="galateahelado">

Y para que el css nuevo solo afecte a esta agregar o cambiar el css de este modo:

.galatea.helado{--blanco: #fafafa;--eee: #eee;--444:#444;--blancorgb:255,255,255;--border: 1px solid #dadada;--accentoa:#dc8a1b;--accentob:#963b08;--letra: "Roboto Flex";--letrab: "Inter"}

[butimabadliar]

(El fondo cuadriculado no es parte de la tablilla, solo la presentación)

Tablilla 9: McDanno - Apertura y Post

Descarga: Apertura - Post

Los colores están en el style con variables, ambas tablillas, tanto post como apertura llevan la misma estructura, si se cambia el color de una, se cambia de todas las que lo usen allí mismo. La único forma de que esto no suceda es cambiando la segunda class en esta parte:

<div class="mcdanno var">

De este modo (pongo la palabra helado como ejemplo, pero ponen la que gustan):

<div class="mcdanno helado">

Y para que el css nuevo solo afecte a esta agregar o cambiar el css de este modo:

.mcdanno.helado{--blancorgb:255,255,255;--blanco:#fafafa;--smoke:#f5f5f5;--eee:#eee;--ddd:#ddd;--444:#444;--accentoa: #548fe6;--accentob: #15397b;--letra: "Roboto", sans-serif;--letrab: "Ramabhadra", sans-serif;}

[butimabadliar]

(El fondo cuadriculado no es parte de la tablilla, solo la presentación)

Tablilla 8: Buddie - Apertura y Post

Descarga: Apertura - Post

Los colores están en el style con variables, ambas tablillas, tanto post como apertura llevan la misma estructura, si se cambia el color de una, se cambia de todas las que lo usen allí mismo. La único forma de que esto no suceda es cambiando la segunda class en esta parte:

<div class="buddie var">

De este modo (pongo la palabra helado como ejemplo, pero ponen la que gustan):

<div class="buddie helado">

Y para que el css nuevo solo afecte a esta agregar o cambiar el css de este modo:

.buddie.helado{--blanco:#fafafa;--eee:#eee;--ddd:#ddd;--444:#444;--accentob:#823639;--accentoa:#a94b5b;--letra: "Inter", sans-serif;--letrab: "Montserrat", sans-serif;}

[butimabadliar]

(El fondo cuadriculado no es parte de la tablilla, solo la presentación)

Tablilla 7: Sylar - ¿Presentación de Personaje?

Descarga: HTML+CSS

Nota: Cuenta con iconografía de FontAwesome, tienen el pack premium 5, no la versión 6, insertada.

Los colores están en el style con variables, ambas tablillas, tanto post como apertura llevan la misma estructura, si se cambia el color de una, se cambia de todas las que lo usen allí mismo. La único forma de que esto no suceda es editando la segunda class en esta parte:

<div class="zylar vars">

De este modo (pongo la palabra helado como ejemplo, pero ponen la que gustan):

<div class="zylar helado">

Y para que el css nuevo solo afecte a esta agregar o cambiar el css de este modo:

.zylar.helado {--negrorgb:0,0,0;--blanco:#fafafa;--eee:#eee;--ccc:#ccc;--444:#444;--accentoa: #0b1c39;--accentob: #273e66;--letra: "Raleway", sans-serif;--grad:linear-gradient(90deg,var(--accentoa), var(--accentob));}

[butimabadliar]

(El fondo cuadriculado no es parte de la tablilla, solo la presentación)

Tablilla 6: Starship - Apertura y Post

Descarga: Apertura - Post

Nota: Cuenta con dos animaciones. El circulo que gira al rededor de las imagenes representativas del personaje en la Apertura y Post, y en el Post tiene un plus de circulos que aparecen y desaparecen como si estuviera "procesando" la información.

El fondo principal es negro con un gif animado, puede quitarse el gif o reemplazar por algo similar; se recomienda una animación sutil.

Los colores están en el style con variables, ambas tablillas, tanto post como apertura llevan la misma estructura, si se cambia el color de una, se cambia de todas las que lo usen allí mismo. La único forma de que esto no suceda es editando la segunda class en esta parte:

<div class="dvc vars">

De este modo (pongo la palabra helado como ejemplo, pero ponen la que gustan):

<div class="dvc helado">

Y para que el css nuevo solo afecte a esta agregar o cambiar el css de este modo:

.dvc .helado {--blancorgb:255,255,255;--negrorgb:5,5,5;--blanco:#fafafa;--111:#111;--accentoa: #11698E;--accentob: #16C79A;--radius:10px;--letra: "Outfit";--letrab: "Hepta Slab";--borde:1px solid rgba(var(--negrorgb),0.75);--gradi:45deg, var(--accentoa), var(--accentob);--imgs:url(https://blenderartists.org/uploads/default/original/4X/b/d/5/bd5b474cdd2b619a9654825b85608c5b74e93071.gif);}

[butimabadliar]

(El fondo cuadriculado no es parte de la tablilla, solo la presentación)

Tablilla 5: Violetita - Post

Descarga: Post

Nota: Los colores están en el style con variables, si dos usan la misma tablilla en el mismo post los colores de la última publicada afectara a todas. La único forma de que esto no suceda es cambiando la segunda class en esta parte:

<div class="grindeldore act">

De este modo (pongo la palabra helado como ejemplo, pero ponen la que gustan):

<div class="grindeldore helado">

Y para que el css nuevo solo afecte a esta agregar o cambiar el css de este modo:

.grindeldore.helado{--blancorgb:255,255,255;--negrorgb:0,0,0;--blanco:#fafafa;--eee:#eee;--ddd:#ddd;--333:#303030;--444:#444;--accentoa:#713770;--accentob:#E95670;--letra: "Outfit";--letrab: "Hepta Slab";--borde:1px solid rgba(var(--negrorgb),0.8);}