Skip to content

Instantly share code, notes, and snippets.

@TheGP
Created October 28, 2016 10:42
Show Gist options
  • Save TheGP/840fceec4d1beba526c9dd753d503e83 to your computer and use it in GitHub Desktop.
Save TheGP/840fceec4d1beba526c9dd753d503e83 to your computer and use it in GitHub Desktop.
css inliner's mistake
<!DOCTYPE html>
<html>
<head><meta name="charset" content="utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&amp;subset=cyrillic" rel="stylesheet" /><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta charset="UTF-8">
<style type="text/css">* {
font-size: 16px;
line-height: 150%;
}
body, a, p, h1, h2, h3, h4, span, div {
font-family: 'Open Sans', 'OpenSans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body {
padding: 0;
margin: 0;
}
.main_div {
width: 100%; max-width: 500px; padding: 0 18px;
}
p, div {
box-sizing: border-box;
}
p {
padding-bottom: 1em; /* fuck you yahoo */
}
a {
color: #5acc6a;
}
a.button {
font-weight: bold;
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
background-color: #5acc6a;
border-top: 8px solid #5acc6a;
border-bottom: 8px solid #5acc6a;
border-left: 14px solid #5acc6a;
border-right: 14px solid #5acc6a;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
display: inline-block;
}
div.unsubscribe {
margin-top: 50px;
font-size: 12px;
color: grey;
}
div.unsubscribe a {
font-size: 12px;
color: grey;
}
.header a, .social a {
text-decoration: none;
}
.social img {
margin-top: 11px;
}
.forgot_me {
font-size: 12px;
border-radius: 5px;
color: #929292;
background: #f2fff2;
border-top: 5px solid #f2fff2;
border-bottom: 5px solid #f2fff2;
border-left: 9px solid #f2fff2;
border-right: 9px solid #f2fff2;
padding-bottom: 0;
}
.forgot_me a {
font-size: 12px;
color: #929292;
}
</style>
<!--[if gte mso 9]>
<style type="text/css">
body, a, p, h1, h2, h3, h4, span, div {
font-family: Helvetica, Arial, sans-serif !important;
}
</style>
<![endif]-->
<title></title>
</head>
<body style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;padding:0;margin:0"><!--[if (gte mso 9)|(IE)]>
<table width="500" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<div class="main_div" style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;width:100%;max-width:500px;padding:0 18px;box-sizing:border-box">
<p class="header" style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;box-sizing:border-box;padding-bottom:1em"><a href="http://makedreamprofits.ru/?utm_source=email&amp;utm_medium=link&amp;utm_content=logo-link&amp;utm_campaign=email" style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;color:#5acc6a;text-decoration:none" target="_blank"><img alt="MakeDreamProfits" src="http://makedreamprofits.ru/wp-includes/images/emails/mdp-logo.png" style="font-size:16px;line-height:150%" width="200" /></a></p>
<p style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;box-sizing:border-box;padding-bottom:1em">Привет,</p>
<p style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;box-sizing:border-box;padding-bottom:1em">Я очень благодарен вам, что вы решили присоединиться к нашей пробной версии JumpOut.</p>
<p style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;box-sizing:border-box;padding-bottom:1em">Если вы не возражаете, я хочу задать вам один маленький вопрос: почему вы решили попробовать JumpOut?</p>
<p style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;box-sizing:border-box;padding-bottom:1em">Я спрашиваю, потому что хочу убедиться, что делаю продукт, который хотят пользователи. Просто нажмите "ответить" и дайте мне знать, буду вам очень благодарен :)</p>
<p style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;box-sizing:border-box;padding-bottom:1em"> </p>
<p style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;box-sizing:border-box;padding-bottom:1em">У JumpOut есть куча интересных функций, и в этой серии писем я хочу вас с ними ознакомить, чтобы вы смогли использовать продукт по максимуму.</p>
<p style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;box-sizing:border-box;padding-bottom:1em">Ссылка входа: <a href="http://jumpout.makedreamprofits.ru" style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;color:#5acc6a">jumpout.makedreamprofits.ru</a></p>
<p style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;box-sizing:border-box;padding-bottom:1em">Сегодня у меня <strong style="font-size:16px;line-height:150%">2 совета</strong>:</p>
<h2 style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif">1. Спасательный круг</h2>
<p style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;box-sizing:border-box;padding-bottom:1em"><img alt="" src="http://makedreamprofits.ru/wp-includes/images/emails/jo/jo-lifebuoy.png" style="width:250px;height:53px;font-size:16px;line-height:150%" /></p>
<p style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;box-sizing:border-box;padding-bottom:1em">Сверху сайта, вы можете увидеть спасательный круг. Это раздел помощи. Там вы можете найти не только как использовать тот или иной функционал, но и написать нам.</p>
<h2 style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif">2. Ваши подписчики</h2>
<p style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;box-sizing:border-box;padding-bottom:1em">У вас уже есть подписчики и вы хотите добавить себе на сайт попап сбора подписчиков?</p>
<p style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;box-sizing:border-box;padding-bottom:1em">У нас есть легкий путь <strong style="font-size:16px;line-height:150%">отключить попап для тех</strong>, кто уже подписан. Какой смысл показывать попап тем, кто и так уже подписан, верно?</p>
<p style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;box-sizing:border-box;padding-bottom:1em">После того, как вы создадите попап, в списке вы увидите иконку в форме цепи:</p>
<p style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;box-sizing:border-box;padding-bottom:1em"><img alt="" src="http://makedreamprofits.ru/wp-includes/images/emails/jo/jo-chain-icon.png" style="width:450px;height:67px;font-size:16px;line-height:150%" /></p>
<p style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;box-sizing:border-box;padding-bottom:1em">Нажмите на нее, и получите несколько вариантов ссылок отключения попапа. Потом вставьте ссылку в письмо и готово! :)</p>
<div style="color:#e6e6e6;font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;box-sizing:border-box">____________</div>
<p class="ending" style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;box-sizing:border-box;padding-bottom:1em">Eugene Bos<br style="font-size:16px;line-height:150%" />
<a href="http://makedreamprofits.ru" style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;color:#5acc6a">MakeDreamProfits</a><br style="font-size:16px;line-height:150%" />
<span class="social" style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif"><a href="http://vk.com/makedreamprofits" style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;color:#5acc6a;text-decoration:none" target="_blank"><img alt="Vkontakte" src="http://makedreamprofits.ru/wp-includes/images/emails/vk.png" style="font-size:16px;line-height:150%;margin-top:11px" width="32" /></a>   <a href="https://twitter.com/MakeDreamProfit" style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;color:#5acc6a;text-decoration:none" target="_blank"> <img alt="Twitter" src="http://makedreamprofits.ru/wp-includes/images/emails/tw.png" style="font-size:16px;line-height:150%;margin-top:11px" width="32" /></a>   <a href="http://www.facebook.com/MakeDreamProfits" style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;color:#5acc6a;text-decoration:none" target="_blank"> <img alt="Facebook" src="http://makedreamprofits.ru/wp-includes/images/emails/fb.png" style="font-size:16px;line-height:150%;margin-top:11px" width="32" /></a>   <a href="http://www.youtube.com/user/MakeDreamProfits" style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;color:#5acc6a;text-decoration:none" target="_blank"> <img alt="YouTube" src="http://makedreamprofits.ru/wp-includes/images/emails/yt.png" style="font-size:16px;line-height:150%;margin-top:11px" width="32" /></a> </span></p>
<div class="unsubscribe" style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;box-sizing:border-box;margin-top:50px;color:grey">Если вы хотите отписаться от рассылки, <a href="[UNSUBSCRIBE_URL]" style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;color:#5acc6a">нажмите сюда</a>.</div>
<div class="unsubscribe" style="font-size:16px;line-height:150%;font-family:'Open Sans','OpenSans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;box-sizing:border-box;margin-top:50px;color:grey">[COMPANY_FULL_ADDRESS]</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment