ToekanTicket - E-mail template (v2)

(c) Philip van Heemstra

by PhilQ

HTML

<div class="body">
	<div class="top">
		<div class="centered logo"><span>ToekanTickets</span>.nl</div>
	</div>

	<div class="centered main">
	<h1>Title</h1>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
	<h2>Sub title 1</h2>
	<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio <a href="#">dignissim</a> qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
	<div class="tablewrap">
	<table>
		<thead>
			<tr><td>Product</td><td>Prijs/stuk</td><td>Aantal</td><td>Subtotaal</td></tr>
		</thead>
		<tbody>
			<tr><td>Normale ticket</td><td>&#128; 12,50</td><td>2</td><td>&#128; 25,-</td></tr>
			<tr><td>Early bird ticket</td><td>&#128; 10,-</td><td>3</td><td>&#128; 30,-</td></tr>
			<tr><td>Still an egg ticket</td><td>&#128; 7,50</td><td>1</td><td>&#128; 7,50</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">Totaal</td><td>&#128; 62,50</td></tr>
		</tfoot>
	</table>
	</div>
	<h2>Sub title 2</h2>
	<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse <a href="#">molestie consequat</a>, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
	<p class="center">
		<a href="" class="button">Call to action</a>
	</p>
	<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
	</div>
	<div class="footer">
		<p class="centered center">&copy;2016 ToekanTickets v.o.f. &bull; KvK 8888888 &bull; BTW NL888888888888 &bull; +31 (0) 6 4548 0016</p>
	</div>
</div>

CSS

html, body {margin:0;padding:0;width:100%;height:100%;}
.body {
	display: inline-block;
	min-width: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	background-color: #0143A3;
	font-family: 'Montserrat', Georgia, Helvetica, Verdana, Arial, sans-serif;
	font-size: 18px;
	color: #c0dcf4;
}
.top {
	display: inline-block;
	width: 100%;
	height: 60px;
	color: #fff;
	background-color: #0273D4;
	box-shadow: 0 1px 5px 0 rgba(0,0,0,.5);
}
.centered {
	width: 600px;
	display: block;
	margin: 0px auto;
	padding: 0px 15px;
}
.logo {
	padding: 12px 15px;
	color: #c0dcf4;
}
.logo span {
	font-family: 'Wellfleet', 'Montserrat', Georgia, Helvetica, Verdana, Arial, sans-serif;
	font-size: 26px;
	color: #fff;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Wellfleet', 'Montserrat', Helvetica, Verdana, Arial, sans-serif;
	color: #0143A3;
	font-weight: normal;
	//text-shadow: 0 1px 2px rgba(0,0,0,.3);
	margin: 25px 0px 10px;
}
a {
	color: #81b9ea;
	text-decoration: none;
	border-bottom: 2px solid #c0dcf4;
}
a:hover {
	border-bottom-color: #0273D4;
}
.tablewrap {
	padding: 30px 15px 20px;
}
table {
	width: 100%;
	color: #c0dcf4;
	border-collapse: collapse;
	background-color: #0273D4;
	border-radius: 5px;
	overflow: hidden;
	//margin: 20px 15px;
	box-shadow: 0 2px 1px -1px rgba(0,0,0,.3);
}
thead td {
	color: #fff;
	padding: 15px 20px;
	border-bottom: 2px solid #0156b6; //#0143A3;
}
tbody td {
	padding: 15px 20px;
	//border-bottom: 1px solid #0156b6; //#0143A3;
}
tfoot td {
	color: #fff;
	padding: 15px 20px;
	border-top: 2px solid #0156b6; //#0143A3;
}
tbody tr:nth-child(odd) {
	background-color: #0062c2;
}
p {
	margin: 0px;
}
.main {
	color: #0273D4;
	background-color: #fff;
	line-height: 1.5;
	text-align: justify;
	padding: 10px 25px 25px 25px;
	//padding-top: 10px;
	//padding-bottom: 50px;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	box-shadow: 0 1px 5px 0 rgba(0,0,0,.5);
}
.center {
	text-align: center;
}
.left {
	text-align:...