ToekanTicket - E-mail template (v3)

(c) Philip van Heemstra

by PhilQ

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="body">
	<div class="top">
		<div class="centered">
			<table class="col2" width="100%">
			<tr>
			<td class="left"><div class="logo"><span>ToekanTickets</span>.nl</div></td>
			<td class="right"><div class="socials">
			<a href=""><i class="fa fa-facebook-square"></i></a>
			<a href=""><i class="fa fa-youtube"></i></a>
			<a href=""><i class="fa fa-instagram"></i></a>
			<a href=""><i class="fa fa-twitter"></i></a>
			<a href=""><i class="fa fa-github"></i></a>
			</div></td>
			</tr>
			</table>
		</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...

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: 16px;
	color: #c0dcf4;
}
.top {
	position: relative;
	z-index: 5;
	display: 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;
}
table.col2 {
	width: 100%;
	margin: 0px;
	padding: 0px;
	border-collapse: collapse;
}
table.col2 td {
	width: 50%;
	height: 60px;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}
.logo {
	display: inline-block;
	// padding: 12px 0px 0px;
	color: #c0dcf4;
}
.logo span {
	font-family: 'Wellfleet', 'Montserrat', Georgia, Helvetica, Verdana, Arial, sans-serif;
	font-size: 26px;
	color: #fff;
}
.socials {
	display: inline-block;
	// padding: 12px 0px 0px;
	color: #c0dcf4;
}
.socials a {
	display: inline-block;
	//width: 28px;
	font-size: 28px;
	color: #81b9ea;
	//color: #c0dcf4;
	margin-left: 5px;
}
.socials a:hover {
	color: #fff;
}


h1, h2, h3, h4, h5, h6 {
	font-family: 'Wellfleet', 'Montserrat', Helvetica, Verdana, Arial, sans-serif;
	color: #0143A3;
	color: #0273D4;
	font-weight: normal;
	//text-shadow: 0 1px 2px rgba(0,0,0,.3);
	margin: 25px 0px 10px 0px;
}
.main a {
	color: #81b9ea;
	color: #0273D4;
	text-decoration: none;
	border-bottom: 2px solid #c0dcf4;
}
.main a:hover {
	border-bottom-color: #0273D4;
}
.tablewrap {
	padding: 30px 15px 20px;
}
.main 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);
}
.main thead td {
	color: #fff;
	padding: 15px 20px;
	border-bottom: 2px solid #0156b6; //#0143A3;
}
.main tbody td {
	padding: 15px 20px;
	//border-bottom: 1px solid...