Skip to content

Instantly share code, notes, and snippets.

@hteumeuleu

hteumeuleu/000webhost-gmail-dark-mode.html

Created May 11, 2020 12:47
Show Gist options
  • Save hteumeuleu/d85d39af3737b57087f82b2afd39cedf to your computer and use it in GitHub Desktop.
Save hteumeuleu/d85d39af3737b57087f82b2afd39cedf to your computer and use it in GitHub Desktop.
Download ZIP
000webhost cute email that turns horrible in Gmail's dark mode
Raw
000webhost-gmail-dark-mode.html
<!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>
<meta charset="UTF-8" />
<style>
.ReadMsgBody {
width: 100%;
background-color: #FFFFFF;
}
.ExternalClass {
width: 100%;
background-color: #FFFFFF;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 110%;
}
.ExternalClass * {
line-height: 110%;
}
body {
margin: 0;
padding: 0;
}
body,
table,
td,
p,
a,
li {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table td {
border-collapse: collapse;
}
table {
border-spacing: 0;
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
@media only screen and (max-width: 600px) {
table[class="devicewidth"] {
width: 100% !important;
float: none !important;
margin: 0 auto !important;
}
td[class="fullwidth"] {
min-width: 10% !important;
height: auto !important;
}
table[class="element"],
table[class="social-links"] {
display: block !important;
width: 100% !important;
}
table[class="social-links"] {
margin-bottom: 20px !important
}
td[class="frame"] {
padding-left: 20px !important;
padding-right: 20px !important;
}
td[class="content"] {
padding-top: 20px !important;
padding-left: 20px !important;
padding-bottom: 0px !important;
padding-right: 20px !important;
}
/* Extra */
table[class="none"],
td[class="none"] {
display: none !important;
}
td[class="space"] {
height: 10px !important;
}
td[class="doublespace"] {
height: 20px !important;
}
td[class="button"] {
padding-left: 25px !important;
padding-right: 25px !important;
min-width: 10% !important;
}
td[class="button"] a {
width: auto !important;
}
table[class="social-links"] a {
width: auto !important;
}
td[class="mb25"] {
margin-bottom: 25px !important;
}
table[class="align-center"] {
float: none !important;
margin: 0 auto !important;
}
td[class="align-center"] {
text-align: center !important;
}
td[class="social"] {
display: block !important;
padding: 0px 0px 20px 0px;
}
p {
font-size: 13px;
}
}
</style>
<style>
@media only screen and (max-width: 680px) {
img[class="logo-2"] {
width: 100%;
height: auto;
max-width: 194px;
}
img[class="default-logo"] {
width: 100%;
height: auto;
max-width: 289px;
}
}
</style>
<title>000webhost newsletter</title>
<meta name="robots" content="noindex, nofollow">
</head>
<body style="padding:0; margin:0; width:100% !important; background-color:#FFFFFF"
bgcolor="#FFFFFF">
<table width="100%" cellpadding="30" border="0" cellspacing="0">
<tr>
<td align="center" bgcolor="#eeeeee" class="frame">
<table width="660" cellpadding="0" border="0" cellspacing="0" align="center" class="devicewidth"
bgcolor="#FFFFFF" style="border-radius: 6px; -webkit-borer-radius: 6px; -moz-borer-radius: 6px;">
<tr>
<td style="border-radius: 5px; -webkit-borer-radius: 5px; -moz-borer-radius: 5px;"
class="content">
<style inlince-css="">
#content-5 a {
color: #b80303
}
</style>
<table width="600" cellpadding="0" border="0" cellspacing="0" align="center"
class="devicewidth" bgcolor="#FFFFFF">
<tr>
<td align="center" id="content-5" style="padding: 40px 0">
<img src="https://cdn.000webhost.com/000webhost/logo/000logo-new-colors.png" alt="000Webhost.com"
border="0" style="width: 150px" class="">
</td>
</tr>
</table>
<table width="600" cellpadding="0" border="0" cellspacing="0" align="center" class="devicewidth"
bgcolor="#FFFFFF">
<tr>
<td align="center" style="padding-bottom: 60px; font-size: 14px; font-family: Helvetica, Arial, Verdana sans-serif;"
id="content-5">
<div class="text">
<p style="margin: 0px; font-size: 14px; font-family: Helvetica, Arial, Verdana sans-serif;">
<table width="560" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="color: #32454c; font-family: Helvetica, Arial, Verdana sans-serif;">
<p style="font-size: 42px; line-height: 1.25; margin: 0;"><b>We missed you!</b>
</p>
<p style="font-size: 14px; line-height: 1.71; margin: 20px 0 40px 0;">It’s been 6 months since your last visit. To make sure you’re still actively using
our platform, we encourage you to login.</p>
</td>
</tr>
<!-- CENTERED BUTTON -->
<tr>
<td align="center" style="color:#ff5c62; font-size:14px; line-height:20px;">
<!--[if mso]>
<table align="center" width="220" border="0" cellpadding="0" cellspacing="0" style="width:220px;">
<tr>
<td height="50" valign="middle" style="background-color:#ff5c62; font-family: Verdana, Sans-Serif; height:50px;">
<center>
<![endif]-->
<a href="https://www.000webhost.com/cpanel-login" target="_blank" rel="noopener noreferrer"
style="font-family: Verdana, Sans-Serif; background-color:#ff5c62;border-radius:3px;color:#ffffff;display:inline-block;font-size:14px;line-height:50px;text-align:center;text-decoration:none;width:220px;-webkit-text-size-adjust:none;"><strong>Go To Control Panel</strong>
</a>
<!--[if mso]>
</center>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="560">
<tr>
<td style="padding: 40px 0 0 0;">
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="560">
<tr>
<td style="margin-top: 40px; margin-bottom: 0;">
<![endif]-->
<img src="https://cdn.000webhost.com/000webhost/email/user-inactive-email-header-img.png"
alt="Create an app header image">
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="540">
<tr>
<td align="center" style="color: #32454c; font-family: Helvetica, Arial, Verdana sans-serif; ">
<p style="font-size: 14px; line-height: 1.71; margin: 40px 0 60px 0; ">If you aren’t using our platform anymore simply ignore this email, and your account
will be deleted on <span style="color: #ff5c62;">2020-05-21</span>.</p>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="540">
<tr>
<td align="center" style="color: #32454c; font-family: Helvetica, Arial, Verdana sans-serif;">
<p style="font-size: 24px; line-height: 1.33; margin: 0;"><b>Looking for a more powerful hosting?</b>
</p>
<p style="font-size: 14px; line-height: 1.71; margin: 20px 0 40px 0;">Upgrade to premium to get a 24/7 live support to help you on your journey</p>
</td>
</tr>
<!-- CENTERED BUTTON -->
<tr>
<td align="center" style="color:#ff5c62; font-size:14px; line-height:20px;">
<!--[if mso]>
<table align="center" width="220" border="0" cellpadding="0" cellspacing="0" style="width:220px;">
<tr>
<td height="50" valign="middle" style="background-color:#ff5c62; font-family: Verdana, Sans-Serif; height:50px;">
<center>
<![endif]-->
<a href="https://www.hostinger.com/special/000webhost?utm_source=000webhost&utm_medium=frontend&utm_campaign=rest_app_removal_notification_30_email"
target="_blank" rel="noopener noreferrer" style="font-family: Verdana, Sans-Serif; background-color:#ff5c62;border-radius:3px;color:#ffffff;display:inline-block;font-size:14px;line-height:50px;text-align:center;text-decoration:none;width:220px;-webkit-text-size-adjust:none;"><strong>Upgrade To Premium</strong>
</a>
<!--[if mso]>
</center>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</p>
</div>
</td>
</tr>
</table>
<hr style="border: 1px solid #ededed;">
<table width="600" cellpadding="0" border="0" cellspacing="0" align="center" class="devicewidth"
bgcolor="#FFFFFF">
<tr>
<td align="center" style="padding: 60px 0">
<table cellpadding="0" border="0" cellspacing="0" align="center" class="devicewidth">
<tr>
<td align="center" style="padding-bottom: 10px;">
<a href="https://www.facebook.com/000webhost.Global/" style="padding: 0 5px;">
<img src="https://cdn.000webhost.com/000webhost/icons/email_icons/facebook.png"
alt="Facebook icon" width="24" height="24">
</a>
<a href="https://www.instagram.com/000webhost.global/" style="padding: 0 5px;">
<img src="https://cdn.000webhost.com/000webhost/icons/email_icons/instagram.png"
alt="Instagram icon" width="24" height="24">
</a>
<a href="https://twitter.com/000webhost_com" style="padding: 0 5px;">
<img src="https://cdn.000webhost.com/000webhost/icons/email_icons/twitter.png"
alt="Twitter icon" width="24" height="24">
</a>
</td>
</tr>
<tr>
<td align="center" style="font-size: 14px; font-family: Helvetica, Arial, sans-serif; line-height: 20px;">
<a style="color:#ff5c62; padding: 0 5px;" href="https://www.000webhost.com/cpanel-login?from=panel">Login</a>
<a style="color:#ff5c62; padding: 0 5px;" href="https://www.000webhost.com/forum/c/tutorials">Tutorials</a>
<a style="color:#ff5c62; padding: 0 5px;" href="https://www.000webhost.com/website-faq">FAQ</a>
<a style="color:#ff5c62; padding: 0 5px;" href="https://www.000webhost.com/members/upgrade">Upgrade</a>
</td>
</tr>
<tr>
<td align="center" width="560" style="font-size: 14px; font-family: Helvetica, Arial, sans-serif; line-height: 20px; color:#32454c;"
id="content-9">
<p style="margin: 10px 0;">You have received this email because you are registered at 000webhost.com or subscribed
to the 000webhost Newsletter.</p>
<p style="margin: 10px 0;">&copy; 2004 - 2020 Hostinger International Ltd.</p>
<a style="color: #ff5c62" href="###">Unsubscribe</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment