Skip to content

Instantly share code, notes, and snippets.

@midu
Created September 8, 2014 16:53
Show Gist options
  • Save midu/ec4eab9bbdc993cd9973 to your computer and use it in GitHub Desktop.
Save midu/ec4eab9bbdc993cd9973 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta charset="utf-8">
<style type="text/css">
/* based on: http://zurb.com/playground/responsive-email-templates */
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin:0;
padding:0;
font-family: sans-serif;
color: #615f5a;
}
img {
max-width: 100%;
}
body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width: 100%!important;
height: 100%;
background-color: #f0efed;
}
table {
margin: 0 auto;
border-collapse: collapse;
}
td {
text-align: center;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,h2,h3,h4,h5,h6 {
font-family: sans-serif;
color:#33312d;
}
h1 {
font-weight: bold;
font-size: 30px;
line-height: 1.3;
}
td.h1 {
padding-bottom: 8px;
}
td.project-title {
background-color: #f0efed;
padding: 12px 0;
}
td.project-title h1 {
font-size: 16px;
}
h2 {
font-size: 20px;
line-height: 1.4;
}
h2.italics{
font-weight: normal;
font-style: italic;
}
h3 {
font-weight: bold;
font-size: 14px;
line-height: 1.4;
letter-spacing: 1px;
text-transform: uppercase;
}
td.h3 {
padding-top: 30px;
}
p {
font-weight: normal;
font-size: 16px;
line-height: 1.5;
color: #615f5a;
}
p.small {
font-size: 14px;
}
td.p {
padding-bottom: 16px;
}
a {
color: #0088cc;
text-decoration: none;
}
strong {
color:#33312d;
}
/* -------------------------------------
HEADER
------------------------------------- */
table.head-wrap { width: 100%;}
.head-wrap .container {
padding: 16px 0;
text-align: center;
}
/* -------------------------------------
BODY
------------------------------------- */
.body-wrap {
width: 100%;
background: white;
text-align: center;
}
.body-wrap .container {
padding: 20px 0;
text-align: center;
}
.avatar img {
border-radius: 130px;
}
td.avatar {
padding-bottom: 12px;
}
td.challenge-image,
td.project-image {
padding-bottom: 12px;
}
td.tags span {
background-color: #f0efed;
font-size: 14px;
padding: 4px 6px;
margin-top: 5px;
display: inline-block;
}
td.button {
padding-top: 30px;
}
td.button-less-padding {
padding-top: 14px;
}
td.user-summary {
padding-top: 20px;
}
td.user-summary td.avatar {
padding-bottom: 9px;
}
td.user-summary td.h2 {
padding-bottom: 4px;
}
td.stats {
padding-top: 10px ;
}
td.stats .divider {
color: #dbdad5;
padding: 0 5px;
}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap {
width: 100%;
clear:both!important;
}
.footer-wrap .container {
padding: 20px 0;
text-align: center;
}
.footer-wrap .container p {
color: #a1a09a;
font-size: 12px;
}
.footer-wrap .container p a:link,
.footer-wrap .container p a:visited, /* Yahoo! Mail Override */
.footer-wrap .container p a .yshortcuts /* Yahoo! Mail Override */ {
color: #a1a09a;
font-weight: normal;
text-decoration: underline;
}
/* ---------------------------------------------------
RESPONSIVENESS
------------------------------------------------------ */
/* 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;
}
/* -------------------------------------------
PHONE
-------------------------------------------- */
@media only screen and (max-width: 600px) {
.head-wrap .container,
.footer-wrap .container {
padding: 10px 10px!important;
}
.body-wrap .container {
padding: 16px 10px!important;
}
}
</style>
</head>
<body bgcolor="#f0efed">
<!-- HEADER -->
<table class="head-wrap" bgcolor="#f0efed" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="container">
<a href="http://challengepost.com" target="_blank" style="border: none;"><img src="http://challengepost.s3.amazonaws.com/email-newsletter/we-miss-you/challengepost.png" width="164" height="27" alt="ChallengePost" style="margin: 0; padding: 0; border: none;" /></a>
</td>
</tr>
</table>
<!-- /HEADER -->
<!-- BODY -->
<table class="body-wrap" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="container" bgcolor="#FFFFFF">
<table border="0" cellspacing="0" cellpadding="0" style="max-width: 600px" align="center">
<tbody><tr>
<td class="p" align="top">
<p>AshK followed you on ChallengePost.</p>
</td>
</tr>
<tr>
<td class="avatar" align="top">
<a href="http://staging.challengepost.com/users/AshK?ref_content=new-follower&amp;ref_feature=follow&amp;ref_medium=email&amp;utm_campaign=new_follower&amp;utm_content=new_follower&amp;utm_medium=email&amp;utm_source=transactional"><img src="https://s3.amazonaws.com/challengepost/photos/staging/user_photos/000/011/164/datas/profile.gif?1407963893" width="120" height="120" style="border: none;"></a>
</td>
</tr>
<tr>
<td class="h1" align="top">
<h1><a href="http://staging.challengepost.com/users/AshK?ref_content=new-follower&amp;ref_feature=follow&amp;ref_medium=email&amp;utm_campaign=new_follower&amp;utm_content=new_follower&amp;utm_medium=email&amp;utm_source=transactional">AshK</a></h1>
</td>
</tr>
<tr>
<td class="h2" align="top">
<h2 class="italics">Developer and Designer from Jackson, KY, US</h2>
</td>
</tr>
<tr>
<td class="h3" align="top">
<h3>BIO:</h3>
</td>
</tr>
<tr>
<td>
<p>I wanna be the very best that no one ever was.</p>
</td>
</tr>
<tr>
<td class="h3" align="top">
<h3>SKILLS:</h3>
</td>
</tr>
<tr>
<td class="tags" align="top">
<p>pokeball, pokedex, and pokemon</p>
</td>
</tr>
<tr>
<td class="button" align="top">
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://staging.challengepost.com/users/AshK?ref_content=new-follower&ref_feature=follow&ref_medium=email&utm_campaign=new_follower&utm_content=new_follower&utm_medium=email&utm_source=transactional" style="height:45px;v-text-anchor:middle;width:320px;" arcsize="12%" stroke="f" fillcolor="#0088cc">
<w:anchorlock></w:anchorlock>
<center>
<![endif]-->
<a href="http://staging.challengepost.com/users/AshK?ref_content=new-follower&amp;ref_feature=follow&amp;ref_medium=email&amp;utm_campaign=new_follower&amp;utm_content=new_follower&amp;utm_medium=email&amp;utm_source=transactional" style="background-color:#0088cc;border-radius:6px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:45px;text-align:center;text-decoration:none;-webkit-text-size-adjust:none;padding: 0 20px;">Follow AshK</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>
</td>
</tr>
<tr>
<td align="top">
<br>
<p class="small"><em>Follow hackers on ChallengePost to learn about their latest projects and when they sign up for challenges or hackathons.</em></p>
</td>
</tr>
</tbody></table>
</td>
</tr>
</table>
<!-- /BODY -->
<!-- FOOTER -->
<table class="footer-wrap" border="0" cellspacing="0" cellpadding="0" bgcolor="#f0efed">
<tr>
<td class="container">
<p>&copy; 2014 ChallengePost. All rights reserved. <a href="http://challengepost.com/settings/notifications">Edit your notification settings</a>.</p>
</td>
</tr>
</table>
<!-- /FOOTER -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment