/dabblet.css

## dabblet.css
/**
 * Flexbox demo
 */
footer {
	background-image: url(http://mirrorfashion.net/loja/img/fundo-rodape.png);
	width: 100%;
	text-align: center; /* Para centralizar o container */
}

.container {
	width: 940px;
	/*
	 * O container vira um container flex.
	 * Os filhos dele terão o tamanho flexível,
	 * de acordo com as regras que escrevermos
	 */
	display: box;
	/*
	 * Os filhos desse container devem ficar
	 * centralizados verticalmente. Outras possibilidades:
	 * - stretch: estica as caixas
	 * - start: as caixas ficam grudadas no topo
	 * - end: as caixas ficam grudadas na base
	 */
	box-align: center;
}

footer h1 {
	height: 52px;
	text-indent: -9999px;
	background-image: url(http://mirrorfashion.net/loja/img/logo-rodape.png);
	background-repeat: no-repeat;
	/*
	 * Essa caixa deve ocupar um espaço com uma proporção
	 * 1 dentro do footer. Como a lista .social não tem
	 * essa proporção definida, isso faz com que esse
	 * elemento ocupe todo o espaço disponível antes do
	 * .social
	 */
	box-flex: 1;
}

.social li {
	display: inline-block;
	list-style: none;
	margin-left: 25px;
}

.social li a {
	height: 32px;
	width: 32px;
	display: block;
	text-indent: -9999px;
}

.social li a[href*="facebook.com"] {
	background-image: url(http://mirrorfashion.net/loja/img/facebook.png);
}
.social li a[href*="twitter.com"] {
	background-image: url(http://mirrorfashion.net/loja/img/twitter.png);
}
.social li a[href*="plus.google.com"] {
	background-image: url(http://mirrorfashion.net/loja/img/googleplus.png);
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<footer>
	<div class="container">
		<h1>Mirror Fashion</h1>
		<ul class="social">
			<li><a href="http://facebook.com/mirrorfashion">Facebook</a></li>
			<li><a href="http://twitter.com/mirrorfashion">Twitter</a></li>
			<li><a href="http://plus.google.com/mirrorfashion">Google+</a></li>
		</ul>
	</div>
</footer>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* Flexbox demo
	*/
	footer {
	background-image: url(http://mirrorfashion.net/loja/img/fundo-rodape.png);
	width: 100%;
	text-align: center; /* Para centralizar o container */
	}

	.container {
	width: 940px;
	/*
	* O container vira um container flex.
	* Os filhos dele terão o tamanho flexível,
	* de acordo com as regras que escrevermos
	*/
	display: box;
	/*
	* Os filhos desse container devem ficar
	* centralizados verticalmente. Outras possibilidades:
	* - stretch: estica as caixas
	* - start: as caixas ficam grudadas no topo
	* - end: as caixas ficam grudadas na base
	*/
	box-align: center;
	}

	footer h1 {
	height: 52px;
	text-indent: -9999px;
	background-image: url(http://mirrorfashion.net/loja/img/logo-rodape.png);
	background-repeat: no-repeat;
	/*
	* Essa caixa deve ocupar um espaço com uma proporção
	* 1 dentro do footer. Como a lista .social não tem
	* essa proporção definida, isso faz com que esse
	* elemento ocupe todo o espaço disponível antes do
	* .social
	*/
	box-flex: 1;
	}

	.social li {
	display: inline-block;
	list-style: none;
	margin-left: 25px;
	}

	.social li a {
	height: 32px;
	width: 32px;
	display: block;
	text-indent: -9999px;
	}

	.social li a[href*="facebook.com"] {
	background-image: url(http://mirrorfashion.net/loja/img/facebook.png);
	}
	.social li a[href*="twitter.com"] {
	background-image: url(http://mirrorfashion.net/loja/img/twitter.png);
	}
	.social li a[href*="plus.google.com"] {
	background-image: url(http://mirrorfashion.net/loja/img/googleplus.png);
	}
	<!-- content to be placed inside <body>…</body> -->
	<footer>
	<div class="container">
	<h1>Mirror Fashion</h1>
	<ul class="social">
	<li><a href="http://facebook.com/mirrorfashion">Facebook</a></li>
	<li><a href="http://twitter.com/mirrorfashion">Twitter</a></li>
	<li><a href="http://plus.google.com/mirrorfashion">Google+</a></li>
	</ul>
	</div>
	</footer>