Skip to content

Instantly share code, notes, and snippets.

@tomredsky

tomredsky/Email-template source

Created September 17, 2019 09:26
Show Gist options
  • Save tomredsky/f0e008e6365a4f4266b08dc037b53046 to your computer and use it in GitHub Desktop.
Save tomredsky/f0e008e6365a4f4266b08dc037b53046 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Email-template source
<!doctype html><html style="margin: 0; padding: 0; width: 100%;"><head style="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title style="">Science Photo Library 105102</title>
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:Off
iceDocumentSettings></xml><![endif]-->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" style="" type="text/css">
<style style="" type="text/css">
body, html{
margin: 0;
padding: 0;
width: 100%;
}
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
font-family: 'Montserrat', 'Arial', 'Helvetica', sans-serif;
color: #000;
background: #fff;
}
p, td, th, h3 {
font-size: 14px;
vertical-align: top;
color: #000;
}
th {
text-align: left;
white-space: nowrap;
padding-left: 0px;
padding-right: 4px;
}
tr.bottom-spacer th, tr.bottom-spacer td {
padding-bottom: 2ex;
}
#logo {
margin: 0 auto;
padding-bottom: 20px;
max-width: 440px;
}
#note-contents {
display: flex;
}
#note-body {
width: 55%;
padding-right: 1em;
}
#note-details {
width: 40%;
}
.media-item {
display: flex;
}
.media-item .thumbnail {
width: 225px;
height: auto;
padding-right: 1em;
}
.media-details {
width: 100%;
}
.media-details th, .media-details td {
padding-top: 2ex;
}
#footer > .total, .media-details .price {
text-align: right;
font-weight: bold;
}
#note-body p:first-child,
h2 {
font-weight: bold;
font-size: 16px;
margin-bottom: 1ex;
color: #000;
}
h2 {
text-transform: uppercase;
}
.media-item, h2.count {
border-bottom: 1px solid #ccc;
margin-bottom: 1ex;
}
.media-item:last-child {
border-bottom: none;
}
h3, p.credit {
margin-top: 0px;
margin-bottom: 4px;
}
span.status {
color: red;
}
address {
font-style: normal;
}
#footer {
background-color: #bef2fd;
}
#footer > .total {
padding: 2ex 0px;
border-bottom: 1px solid #666;
}
#footer .social {
padding: 1ex 0px;
display: flex;
}
#footer a {
text-decoration: none;
color: #000;
}
#footer a:hover {
text-decoration: underline;
}
#footer .social > div {
width: 33.333%;
}
#footer .social > div.center {
text-align: center;
}
div.center h3 {
text-align: center;
}
#footer .social > div.right {
text-align: right;
}
div.right h3 {
text-align: right;
}
.social ul {
position: absolute;
right: 0px;
}
.social ul > li {
display: inline-block;
padding-right: 8px;
list-style-type: none;
text-align: right;
text-transform: uppercase;
}
.social ul > li img {
width: 22px;
height: 22px;
}
#copyright {
padding-top: 1em;
background-color: #fff;
font-size: 12px;
text-align: center;
}
span.block {
display: inline-block;
}
span.block:not(:last-of-type):after {
content: ' \ff5c ';
}
span.block br {
display: none;
}
</style>
<style style="" type="text/css">
@media (min-width: 701px) {
#note-contents,
#media-list,
#footer {
padding-left: 3em !important;
padding-right: 3em !important;
}
.social ul {
right: 3em !important;
}
}
@media (max-width: 700px) {
#note-contents,
.media-item {
display: block !important;
}
#note-body, #note-details {
width: 100% !important;
}
span.block {
display: block !important;
white-space: nowrap !important;
}
span.block:after {
content: '' !important;
}
}
@media (max-width: 700px) {
#footer .social {
display: block !important;
}
#footer .social div {
text-align: center !important;
width: 100% !important;
height: auto !important;
}
.social div {
text-align: center !important;
}
.social ul {
position: relative !important;
padding-left: unset !important;
right: unset !important;
margin-left: auto !important;
margin-right: auto !important;
width: 50% !important;
}
.social ul > li {
text-align: left !important;
padding-right: 4px !important;
padding-left: 4px !important;
}
}
</style>
</head>
<body style="background: #fff; color: #000; font-family: 'Montserrat', 'Arial', 'Helvetica', sans-serif; margin: 0; padding: 0; width: 100%;">
<div id="logo" style="margin: 0 auto; max-width: 440px; padding-bottom: 20px;"><a href="" style=""><img alt="Science Photo Library Logo" src="https://media.sciencephoto.co.uk/_assets/logo-spl.png" style=""></a></div>
<div id="note-contents" style="display: flex;">
<div id="note-body" style="padding-right: 1em; width: 55%;">
<p class="greeting" style="color: #000; font-size: 16px; font-weight: bold; margin-bottom: 1ex; vertical-align: top;">Dear DERMOT PAIKKOS,</p>
<p style="color: #000; font-size: 14px; vertical-align: top;">This is a test. Woohoo!</p>
</div>
<div id="note-details" style="width: 40%;">
<h2 style="color: #000; font-size: 16px; font-weight: bold; margin-bottom: 1ex; text-transform: uppercase;"> 105102 <span class="status" style="color: red;"></span></h2>
<table style="">
<tbody style="">
<tr style="">
<th style="color: #000; font-size: 14px; padding-left: 0px; padding-right: 4px; text-align: left; vertical-align: top; white-space: nowrap;">Created:</th>
<td style="color: #000; font-size: 14px; vertical-align: top;">16th Sep 2019</td>
</tr>
<tr style="">
<th style="color: #000; font-size: 14px; padding-left: 0px; padding-right: 4px; text-align: left; vertical-align: top; white-space: nowrap;">Expires:</th>
<td style="color: #000; font-size: 14px; vertical-align: top;">20th Sep 2019</td>
</tr>
<tr class="bottom-spacer" style="">
<th style="color: #000; font-size: 14px; padding-bottom: 2ex; padding-left: 0px; padding-right: 4px; text-align: left; vertical-align: top; white-space: nowrap;">Total&nbsp;(Excl.&nbsp;VAT):</th>
<td style="color: #000; font-size: 14px; padding-bottom: 2ex; vertical-align: top;">TBD</td>
</tr>
<tr style="">
<th style="color: #000; font-size: 14px; padding-left: 0px; padding-right: 4px; text-align: left; vertical-align: top; white-space: nowrap;"> for:</th>
<td style="color: #000; font-size: 14px; vertical-align: top;"> DERMOT PAIKKOS </td>
</tr>
<tr style="">
<th style="color: #000; font-size: 14px; padding-left: 0px; padding-right: 4px; text-align: left; vertical-align: top; white-space: nowrap;">Email:</th>
<td style="color: #000; font-size: 14px; vertical-align: top;">[email protected]</td>
</tr>
<tr style="">
<th style="color: #000; font-size: 14px; padding-left: 0px; padding-right: 4px; text-align: left; vertical-align: top; white-space: nowrap;">Company:</th>
<td style="color: #000; font-size: 14px; vertical-align: top;">SPL</td>
</tr>
<tr style="">
<th style="color: #000; font-size: 14px; padding-left: 0px; padding-right: 4px; text-align: left; vertical-align: top; white-space: nowrap;">Address:</th>
<td style="color: #000; font-size: 14px; vertical-align: top;">
<address style="font-style: normal;"> 42 LODGE LANE<br style=""> NORTH FINCHLEY<br style=""> LONDON<br style=""> north finchley<br style=""> N12 8JJ<br style=""> UK </address>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="footer" style="background-color: #bef2fd;">
<div class="social" style="display: flex; padding: 1ex 0px;">
<div style="width: 33.333%;">
<h3 style="color: #000; font-size: 14px; margin-bottom: 4px; margin-top: 0px; vertical-align: top;">Questions?</h3>
<p style="color: #000; font-size: 14px; vertical-align: top;">Get in touch <br style=""><a href="mailto:salesteam-test&#43;[email protected]" style="color: #000; text-decoration: none;">Robert Rothenberg</a></p>
</div>
<div class="center" style="text-align: center; width: 33.333%;">
<h3 style="color: #000; font-size: 14px; margin-bottom: 4px; margin-top: 0px; text-align: center; vertical-align: top;">Terms &amp; Conditions</h3>
<p style="color: #000; font-size: 14px; vertical-align: top;"><a href="/terms" style="color: #000; text-decoration: none;">Full terms and conditions can be found on our website</a>.</p>
</div>
<div class="right" style="text-align: right; width: 33.333%;">
<h3 style="color: #000; font-size: 14px; margin-bottom: 4px; margin-top: 0px; text-align: right; vertical-align: top;">Let's Connect</h3>
<ul style="position: absolute; right: 0px;">
<li style="display: inline-block; list-style-type: none; padding-right: 8px; text-align: right; text-transform: uppercase;"><a href="/r/twitter" style="color: #000; text-decoration: none;"><img alt="Twitter" src="https://media.sciencephoto.co.uk/_assets/sprite/twitter.png" style="height: 22px; width: 22px;"></a></li>
<li style="display: inline-block; list-style-type: none; padding-right: 8px; text-align: right; text-transform: uppercase;"><a href="/r/youtube" style="color: #000; text-decoration: none;"><img alt="YouTube" src="https://media.sciencephoto.co.uk/_assets/sprite/youtube.png" style="height: 22px; width: 22px;"></a></li>
<li style="display: inline-block; list-style-type: none; padding-right: 8px; text-align: right; text-transform: uppercase;"><a href="/r/instagram" style="color: #000; text-decoration: none;"><img alt="Instagram" src="https://media.sciencephoto.co.uk/_assets/sprite/instagram.png" style="height: 22px; width: 22px;"></a></li>
</ul>
</div>
</div>
</div>
<div id="copyright" style="background-color: #fff; font-size: 12px; padding-top: 1em; text-align: center;">
<p style="color: #000; font-size: 14px; vertical-align: top;"><span class="block" style="display: inline-block;">Copyright © 2019 Science Photo Library Ltd<br style="display: none;"></span><span class="block" style="display: inline-block;">Registered in England and Wales no.1550520.<br style="display: none;"></span><span class="block" style="display: inline-block;">VAT no. GB 340 7410 88<br style="display: none;"></span><span class="block" style="display: inline-block;">327-329 Harrow Road, London, UK, W9 3RB</span></p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment