Rancherita Shared Articles Mail Template

dabblet.html

<style>
	html, body { 
		background-image: url(http://rancherita.com.mx/images/bg-tecno-red.jpg);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;		
		margin: 0; 
		padding:0; 
		height: 100%; 
	}
	#mail {
		padding-top: 3em;	
	}
	.widget {
		font-family: sans-serif;
		margin: 0 auto;
		width: 600px;
	}
	.widget .article {
		margin-bottom: 2em;
	}
	.widget .article-content {
		padding-left: 1em;
	}
	.widget .article-content .button {
		background: #a71c1e;
		color: #fff;
		display: block;
		float: left;
		font-size: .8em;
		margin-top: .5em;
		padding: .5em 1em;
		text-decoration: none;
	}
	.widget .article-content h3 {
		margin: 0;
	}
	.widget .article-content small {
		color: #888;
		display: block;
		margin-bottom: 0.5em;
	}
	.widget .body {
		background: #fff;
		border: 1px solid #111;
		padding: 1em;				
	}
	.widget .content-title {
		background: #000;
		color: #fff;
		font-size: 2em;
		font-weight: 300;
		padding: .5em 1em;
		text-align: center;
	}	
	.widget .footer {
		background: #000;
		overflow: hidden;
		padding: .5em 1em;
	}
	.widget .social a {
		color: #fff;
		display: inline-block;
		font-size: .8em;
		margin-right: .3em;
		margin-top: .5em;
	}	
	.widget .footer img {
		float: right;
	}	
	.widget .footer .social {
		color: #fff;
		font-size: 1.1em;
		float: left;
	}
	.widget .social ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}	
	.widget .img-wrapper img {
		max-width: 100%;
	}
	.widget .message {	
		background: #f6f6f6;
		margin-bottom: 1em;
		padding: .5em;
	}
</style>
<div id="mail">
	<div class="widget">		
		<div class="content-title">La Rancherita del Aire</div>
		<div class="body">			
			<div class="message">
				De: <strong>Iván Villamil</strong><br>
				Un amigo tuyo ha compartido una noticia contigo, echale un vistazo.
			</div>
			<div class="article">
				<table width="100%" cellpadding="0" cellspacing="0">
					<tr>
						<td width="25%" valign="top">
							<div class="img-wrapper">
								<img src="http://www.rancherita.mx/uploads/images/img_6184.jpg">
							</div>
						</td>
						<td width="75%" valign="top">
							<div class="article-content">
								<h3>RECAPTURAN A ASESINO DE CONOCIDO COMERCIANTE DE ALLENDE</h3>
								<small>Publicado el 2014-04-18</small>
								<div>
									Se cumplimento orden de recaptura en contra de un homicida de nombre Gilberto Domingo Balderas Jiménez de 25 años de edad, quien después de haber asesinado al señor José María Buentello de varia…
								</div>
								<a href="http://www.rancherita.mx/noticias/detalles/11296/recapturan-a-asesino-de-conocido-comerciante-de-allende-.html" class="button">Ir a la nota →</a>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div class="footer">
			<div class="social">
				<ul>
					<li>
						<a href="https://twitter.com/rancheritaxemu">
							<img src="http://www.rancherita.mx/images/twitter.png" width="24">
						</a>						
						<a href="https://www.facebook.com/rancheritadelaire">
							<img src="http://www.rancherita.mx/images/facebook.png" width="24">
						</a>
					</li>
					<li><a href="http://www.rancherita.mx">www.rancherita.com.mx</a></li>
				</ul>
			</div>
			<img src="http://rancherita.com.mx/images/main-logo.png" width="120">
		</div>
	</div>
</div>

dabblet.js

// alert(Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}