HTML
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,300);
html,
body {
margin: 0;
padding: 0;
background: #151515;
}
@media screen and (max-width: 770px) {
table[width="712"],
table[width="620"] {
width: 90%;
}
table[width="620"] h2 {
width: calc(100% - 192px) !important;
}
}
@media screen and (max-width: 640px) {
table[width="620"] h2,
table[width="620"] .logo,
table[width="620"] .social {
display: block !important;
width: 100% !important;
float: left !important;
text-align: center !important;
}
table[width="620"] h2 {
margin: 10px 0 20px !important;
}
table[width="620"] .logo img {
display: inline-block !important;
}
table[width="620"] .social a {
display: inline-block !important;
width: auto !important;
float: none !important;
}
.bf-text img {
width: 400px;
}
.bf-deal img {
width: 180px;
}
.sale-big-box {
width: 430px;
}
.sale-box img {
width: 200px;
}
.description {
font-size: 20px !important;
}
td[height="70"] {
height: 50px !important;
}
}
</style>
</head>
<body bgcolor="#151515">
<table cellpadding="0" bgcolor="#151515" style="background:#151515" cellspacing="0" border="0" width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="712" align="center" style="margin:0 auto; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/black-friday-bg.png); background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto">
<!-- ///////// -->
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="620" align="center" style="margin: 0 auto">
<tr>
<td height="35"></td>
</tr>
<tr>
<td valign="middle">
<a href="https://designmodo.com/" class="logo" style="display: block; float: left; width: 96px;">
<img width="25" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/designmodo-logo.png" style="display: block; padding: 6px 0;">
</a>
<h2 style="text-align: center; margin:0; padding: 4px 0; width:428px; font-weight: normal; font-family: Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 16px; color: #797979; line-height: 1; float: left;">
This email contains many cool images.
<a href="*|ARCHIVE|*" style="text-decoration: none; margin: 5px 0 0; color: #b2b2b2; display: block; width: 100%;">
<strong style="font-weight: bold;">No images?</strong> View online.
</a>
</h2>
<div class="social" style="float: right;">
<a style="display: block; float: left; margin: 0 8px 0 0;" href="https://twitter.com/designmodo">
<img width="44" style="display: block" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/twitter.png">
</a>
<a style="display: block; float: left;" href="https://www.facebook.com/designmodo">
<img width="44" style="display: block" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/facebook.png">
</a>
</div>
</td>
</tr>
<tr>
<td height="30"></td>
</tr>
</table>
</td>
</tr>
<!-- ///////// -->
<!-- ///////// -->
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="text-align: center">
<td><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/black-friday-top-line.png" style="display: inline-block; width: 90%;"></td>
</tr>
<tr>
<td>
<table class="stroke_background" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="80"></td>
</tr>
<tr>
<td style="text-align: center;">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/by-designmodo.png"/>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td style="text-align: center;">
<a href="https://designmodo.com/black-friday-2016/" style="display: block; width: 100%;" class="bf-text">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/black-friday-text.png">
</a>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td style="text-align: center" class="bf-deal">
<a href="https://designmodo.com/black-friday-2016/">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/black-friday-deal.png"/>
</a>
</td>
</tr>
<tr>
<td height="20"></td>
</tr>
<tr>
<td>
<p class="description" style="text-align: center; display: block; margin: 0 auto; width: 450px; padding: 0; font-family: Source Sans Pro, Helvetica-Neue, Helvetica, Arial, sans-serif; font-weight: lighter; font-size: 26px; line-height: 30px; color: #d8d8d8;">
The huge sale is here! For only <strong>5 days</strong>, we <br>dropped the prices for all of our popular <br> products and Market goods.
</p>
</td>
</tr>
<tr>
<td height="40"></td>
</tr>
<tr>
<td>
<a href="https://designmodo.com/black-friday-2016/" style="display: block; width: 100%; text-align: center;">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/bf-btn-align.png" width="214"/>
</a>
</td>
</tr>
<tr>
<td height="55"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- ///////// -->
<!-- ///////// -->
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="522" align="center" bgcolor="#151515" style="margin: 0 auto" class="sale-big-box">
<tr style="text-align: center;">
<td width="250">
<a href="https://designmodo.com/black-friday-2016/" style="display: block; width: 100%;" class="sale-box">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/black-friday-slides-sale.png"/>
</a>
</td>
<td width="10"></td>
<td width="250">
<a href="https://designmodo.com/black-friday-2016/" style="display: block; width: 100%;" class="sale-box">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/black-friday-quards-sale.png"/>
</a>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr style="text-align: center;">
<td width="250">
<a href="https://designmodo.com/black-friday-2016/" style="display: block; width: 100%;" class="sale-box">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/black-friday-startup-sale.png"/>
</a>
</td>
<td width="10"></td>
<td width="250">
<a href="https://designmodo.com/black-friday-2016/" style="display: block; width: 100%;" class="sale-box">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/black-friday-flat-sale.png"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- ///////// -->
<tr>
<td height="80"></td>
</tr>
<!-- ///////// -->
<tr>
<td>
<table class="stroke_background" width="100%" cellpadding="0" cellspacing="0" border="0" style="text-align:center;">
<tr>
<td style="padding:0 10px;font-family: Source Sans Pro, Helvetica, Arial, sans-serif;font-size: 16px;color: #797979;">
Made for you by <a href="https://designmodo.com/" style="color: #b0b0b0;text-decoration: none;">Designmodo Team</a>. We appreciate You!
</td>
</tr>
<tr>
<td height="3">
</td>
</tr>
<tr>
<td style="font-family: Source Sans Pro, Helvetica, Arial, sans-serif; font-size: 16px; color: #797979;">
<a style="color: #797979" href="*|UPDATE_PROFILE|*">Manage subscription</a>, <a href="*|UNSUB|*" style="color: #797979">Unsubscribe</a>
</td>
</tr>
<tr>
<td height="25">
</td>
</tr>
</table>
</td>
</tr>
<!-- ///////// -->
</table>
</td>
</tr>
</table>
</body>
</html>
1 Response