ago26 - Tres postales

dabblet.css

/**
 * ago26 - Tres postales
 */

/* aquí va el CSS */

/* colores */
.rojo{ color:#E5080A;}
.fondo-rojo{background-color:#E5080A;}
.blanco{color:white;}

/* dimensiones de la postal */
.postal{
	width:600px;
	height:400px;
	border:1px solid lightgray;
	margin: 100px auto 0 auto;	
}

/* texto centrado */
p{text-align:center;}


/* Postal 1 */
#postal-1{
	font-family:Helvetica;
	font-weight:800;
	font-style:italic;
	font-size:3.75em;
	text-transform:uppercase;
}
#postal-1 p{margin:20px 0;line-height:.85;}
#postal-1 p span{
	display:inline-block;margin:10px 0 40px;
}

/* Postal 2 */
#postal-2{
	text-transform:uppercase;
	font-family:ArialNarrow;
	font-weight:bold;
	font-size:3em;
	letter-spacing:.5em;
}
#postal-2 p{ margin-top:170px;}


/* Postal 3 */

#postal-3{
	font-family:Baskerville, Times, Georgia;
	font-style:italic;
	font-size:3em;
}
#postal-3 p{margin-top:115px;line-height:1.3;}
#postal-3 p span{
	text-transform:uppercase;
	font-style:normal;
}

dabblet.html

<!-- aquí va el HTML -->

<div id="postal-1" class="postal rojo">
  <p><span>The more <br> you put <br> in</span> <br> the <br> more <br> you get out</p>
</div>

<div id="postal-2" class="postal fondo-rojo blanco">
  <p>Critical</p>
</div>

<div id="postal-3" class="postal rojo">
  <p><span>W</span>here <span>d</span>esign <br> and <span>r</span>esearch into <span>c</span>raft <br> <span>c</span>hanges <span>c</span>ultures</p>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"110","seethrough":"","prefixfree":"1","page":"all"}