Last active
December 24, 2015 09:29
-
-
Save mrded/6777921 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml"> | |
<head> | |
<!-- If you delete this meta tag, Half Life 3 will never be released. --> | |
<meta name="viewport" content="width=device-width"/> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> | |
<meta property="og:title" content="*|SUBJECT|*"> | |
<title>*|SUBJECT|*</title> | |
<style type="text/css"> | |
/* ------------------------------------- | |
GLOBAL | |
------------------------------------- */ | |
* { | |
margin:0; | |
padding:0; | |
} | |
* { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; } | |
img { | |
max-width: 100%; | |
} | |
.collapse { | |
margin:0; | |
padding:0; | |
} | |
body { | |
-webkit-font-smoothing:antialiased; | |
-webkit-text-size-adjust:none; | |
width: 100%!important; | |
height: 100%; | |
} | |
/* ------------------------------------- | |
ELEMENTS | |
------------------------------------- */ | |
a { color: #2BA6CB;} | |
.btn { | |
text-decoration:none; | |
color: #FFF; | |
background-color: #666; | |
padding:10px 16px; | |
font-weight:bold; | |
margin-right:10px; | |
text-align:center; | |
cursor:pointer; | |
display: inline-block; | |
} | |
.callout { | |
padding:15px; | |
background-color:#ECF8FF; | |
margin-bottom: 15px; | |
} | |
.callout a { | |
font-weight:bold; | |
color: #2BA6CB; | |
} | |
table.social { | |
/* padding:15px; */ | |
background-color: #ebebeb; | |
} | |
.social .soc-btn { | |
padding: 3px 7px; | |
font-size:12px; | |
margin-bottom:10px; | |
text-decoration:none; | |
color: #FFF;font-weight:bold; | |
display:block; | |
text-align:center; | |
} | |
a.fb { background-color: #3B5998!important; } | |
a.tw { background-color: #1daced!important; } | |
a.gp { background-color: #DB4A39!important; } | |
a.ms { background-color: #000!important; } | |
.sidebar .soc-btn { | |
display:block; | |
width:100%; | |
} | |
/* ------------------------------------- | |
HEADER | |
------------------------------------- */ | |
table.head-wrap { width: 100%;} | |
.header.container table td.logo { padding: 15px; } | |
.header.container table td.label { padding: 15px; padding-left:0px;} | |
/* ------------------------------------- | |
BODY | |
------------------------------------- */ | |
table.body-wrap { width: 100%;} | |
/* ------------------------------------- | |
FOOTER | |
------------------------------------- */ | |
table.footer-wrap { width: 100%; clear:both!important; | |
} | |
.footer-wrap .container td.content p { border-top: 1px solid rgb(215,215,215); padding-top:15px;} | |
.footer-wrap .container td.content p { | |
font-size:10px; | |
font-weight: bold; | |
} | |
/* ------------------------------------- | |
TYPOGRAPHY | |
------------------------------------- */ | |
h1,h2,h3,h4,h5,h6 { | |
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000; | |
} | |
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; } | |
h1 { font-weight:200; font-size: 44px;} | |
h2 { font-weight:200; font-size: 37px;} | |
h3 { font-weight:500; font-size: 27px;} | |
h4 { font-weight:500; font-size: 23px;} | |
h5 { font-weight:900; font-size: 17px;} | |
h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#444;} | |
.collapse { margin:0!important;} | |
p, ul { | |
margin-bottom: 10px; | |
font-weight: normal; | |
font-size:14px; | |
line-height:1.6; | |
} | |
p.lead { font-size:17px; } | |
p.last { margin-bottom:0px;} | |
ul li { | |
margin-left:5px; | |
list-style-position: inside; | |
} | |
/* ------------------------------------- | |
BUTTONS | |
------------------------------------- */ | |
table.button {width: inherit !important; margin-bottom: 15px;} | |
table.button td {padding: 5px 10px; min-height: 32px; background-color: #2e9fff; border-radius: 5px;} | |
table.button td a {color: #fff; text-decoration: none; font-weight: bold;} | |
table.button td.gray {background-color: #ebebeb;} | |
table.button td.gray a {color: #666;} | |
/* ------------------------------------- | |
SIDEBAR | |
------------------------------------- */ | |
ul.sidebar { | |
background:#ebebeb; | |
display:block; | |
list-style-type: none; | |
} | |
ul.sidebar li { display: block; margin:0;} | |
ul.sidebar li a { | |
text-decoration:none; | |
color: #666; | |
padding:10px 16px; | |
/* font-weight:bold; */ | |
margin-right:10px; | |
/* text-align:center; */ | |
cursor:pointer; | |
border-bottom: 1px solid #777777; | |
border-top: 1px solid #FFFFFF; | |
display:block; | |
margin:0; | |
} | |
ul.sidebar li a.last { border-bottom-width:0px;} | |
ul.sidebar li a h1,ul.sidebar li a h2,ul.sidebar li a h3,ul.sidebar li a h4,ul.sidebar li a h5,ul.sidebar li a h6,ul.sidebar li a p { margin-bottom:0!important;} | |
/* --------------------------------------------------- | |
RESPONSIVENESS | |
Nuke it from orbit. It's the only way to be sure. | |
------------------------------------------------------ */ | |
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */ | |
.container { | |
display:block!important; | |
max-width:600px!important; | |
margin:0 auto!important; /* makes it centered */ | |
clear:both!important; | |
} | |
/* This should also be a block element, so that it will fill 100% of the .container */ | |
.content { | |
padding:15px; | |
max-width:600px; | |
margin:0 auto; | |
display:block; | |
} | |
/* Let's make sure tables in the content area are 100% wide */ | |
.content table { width: 100%; } | |
/* Odds and ends */ | |
.column { | |
width: 300px; | |
float:left; | |
} | |
.column tr td { padding: 15px; } | |
.column-wrap { | |
padding:0!important; | |
margin:0 auto; | |
max-width:600px!important; | |
} | |
.column table { width:100%;} | |
.social .column { | |
width: 280px; | |
min-width: 279px; | |
float:left; | |
} | |
/* Be sure to place a .clear element after each set of columns, just to be safe */ | |
.clear { display: block; clear: both; } | |
/* ------------------------------------------- | |
PHONE | |
For clients that support media queries. | |
Nothing fancy. | |
-------------------------------------------- */ | |
@media only screen and (max-width: 600px) { | |
a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;} | |
div[class="column"] { width: auto!important; float:none!important;} | |
table.social div[class="column"] { | |
width:auto!important; | |
} | |
} | |
</style> | |
</head> | |
<body bgcolor="#FFFFFF"> | |
<!-- HEADER --> | |
<table class="head-wrap" bgcolor="#eeeeee"> | |
<tr> | |
<td></td> | |
<td class="header container"> | |
<div class="content"> | |
<table> | |
<tr> | |
<td><img src="https://gallery.mailchimp.com/21514649eff703b429bf39f17/images/wikijob_logo.png"/></td> | |
<td align="right"><h6 class="collapse"></h6></td> | |
</tr> | |
</table> | |
</div> | |
</td> | |
<td></td> | |
</tr> | |
</table><!-- /HEADER --> | |
<!-- BODY --> | |
<table class="body-wrap"> | |
<tr> | |
<td></td> | |
<td class="container" bgcolor="#FFFFFF"> | |
<div class="content"> | |
<table> | |
<tr> | |
<td> | |
<div mc:edit="content"></div> | |
<!-- social & contact --> | |
<table class="social" width="100%"> | |
<tr> | |
<td> | |
<!-- column 1 --> | |
<table align="left" class="column"> | |
<tr> | |
<td> | |
<p>Phone: <strong>0845 625 9454</strong><br/> | |
Email: <strong><a>info@wikijob.co.uk</a></strong></p> | |
</td> | |
</tr> | |
</table><!-- /column 1 --> | |
<!-- column 2 --> | |
<table align="left" class="column"> | |
<tr> | |
<td> | |
<p>WikiJob Ltd 6-8 St John's Square, London, EC1M 4NH</p> | |
</td> | |
</tr> | |
</table><!-- /column 2 --> | |
<span class="clear"></span> | |
</td> | |
</tr> | |
</table><!-- /social & contact --> | |
</td> | |
</tr> | |
</table> | |
</div><!-- /content --> | |
</td> | |
<td></td> | |
</tr> | |
</table><!-- /BODY --> | |
<!-- FOOTER --> | |
<table class="footer-wrap"> | |
<tr> | |
<td></td> | |
<td class="container"> | |
<!-- content --> | |
<div class="content"> | |
<table> | |
<tr><td align="center"> | |
<p>Copyright © WikiJob Ltd, All rights reserved.</p> | |
<p>You are receiving this email because you're registered on WikiJob.<br/>Visit <a href="http://www.wikijob.co.uk">WikiJob</a> to edit your subscription preferences.</p> | |
</td></tr> | |
</table> | |
</div><!-- /content --> | |
</td> | |
<td></td> | |
</tr> | |
</table><!-- /FOOTER --> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment