Created
September 8, 2014 16:53
-
-
Save midu/ec4eab9bbdc993cd9973 to your computer and use it in GitHub Desktop.
This file contains hidden or 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> | |
<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&ref_feature=follow&ref_medium=email&utm_campaign=new_follower&utm_content=new_follower&utm_medium=email&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&ref_feature=follow&ref_medium=email&utm_campaign=new_follower&utm_content=new_follower&utm_medium=email&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&ref_feature=follow&ref_medium=email&utm_campaign=new_follower&utm_content=new_follower&utm_medium=email&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>© 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