<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<meta name="viewport" content="width=600,initial-scale = 2.3,user-scalable=no">
<!--[if !mso]><!-- -->
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<!--<![endif]-->
<title>HTML Email Template - Blog</title>
<style type="text/css">
html,
body {
-webkit-font-smoothing: antialiased;
width: 100%;
padding: 0;
margin: 0;
}
@media only screen and (max-width: 640px) {
/*------ top header ------ */
.header-main {
font-size: 22px !important;
}
.main-section-header {
font-size: 28px !important;
}
.show {
display: block !important;
}
.hide {
display: none !important;
}
.align-center {
text-align: center !important;
}
.main-image img {
width: 440px !important;
height: auto !important;
}
.container590 {
width: 440px !important;
}
.half-container {
width: 220px !important;
}
.main-button {
width: 220px !important;
}
.section-img img {
width: 320px !important;
height: auto !important;
}
}
@media only screen and (max-width: 479px) {
.header-main {
font-size: 20px !important;
}
.main-section-header {
font-size: 26px !important;
}
.container590 {
width: 280px !important;
}
.container590 {
width: 280px !important;
}
.half-container {
width: 130px !important;
}
.section-img img {
width: 280px !important;
height: auto !important;
}
}
</style>
<!--[if gte mso 9]><style type=”text/css”>
.outlook-font {
font-family: arial, sans-serif!important;
}
</style>
<![endif]-->
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ======= Pre-header ======= -->
<table style="display:none!important;">
<tr>
<td>
<div style="overflow:hidden;display:none;font-size:1px;color:#ffffff;line-height:1px;font-family:Arial;maxheight:0px;max-width:0px;opacity:0;">
Pre-header for the newsletter template
</div>
</td>
</tr>
</table>
<!-- ======= Pre-header end ======= -->
<!-- ======= Header ======= -->
<table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="5c9085">
<tr>
<td align="center" style="background-image: url(http://i.imgur.com/ymD1KR0.jpg); background-size: cover; background-position: top center; background-repeat: no-repeat;" background="http://i.imgur.com/ymD1KR0.jpg">
<table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590">
<tr>
<td height="25" style="font-size: 25px; line-height: 25px;"> </td>
</tr>
<tr>
<td>
<table border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="center">
<a href="#" style="display: block; border-style: none !important; border: 0 !important;"><img width="200" border="0" style="display: block; width: 200px;" src="http://i.imgur.com/zsjieJb.png" alt="Logo" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" align="left" width="5" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590">
<tr>
<td width="5" height="10" style="font-size: 10px; line-height: 10px;"> </td>
</tr>
</table>
<table border="0" align="right" cellpadding="0" width="360" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="hide">
<tr>
<td align="center" class="outlook-font" style="color: #ddefff; font-size: 14px; font-family: 'Titillium Web', Helvetica Neue, Calibri, sans-serif; line-height: 24px;">
<div style=" line-height: 24px;">
<a href="#" style="color: #ddefff; text-decoration: none;">Features</a> <a href="#" style="color: #ddefff; text-decoration: none;">Testimonials</a>
<a href="#" style="color: #ddefff; text-decoration: none;">Contact</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr class="hide">
<td height="35" style="font-size: 35px; line-height: 35px;"> </td>
</tr>
<tr>
<td height="50" style="font-size: 50px; line-height: 50px;"> </td>
</tr>
<tr>
<td align="center">
<table border="0" width="500" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590">
<tr>
<td align="center" style="color: #ffffff; font-size: 45px; font-family: 'Titillium Web', Helvetica Neue, Calibri, sans-serif; line-height: 35px;" class="main-section-header outlook-font">
<div style="line-height: 35px">
HEADLINE HERE
</div>
</td>
</tr>
<tr>
<td height="20" style="font-size: 20px; line-height: 20px;"> </td>
</tr>
<tr>
<td align="center" class="outlook-font" style="color: #eaf5ff; font-size: 15px; font-family: 'Titillium Web', Helvetica Neue, Calibri, sans-serif; line-height: 24px;">
<div style="line-height: 24px">
This month on the blog, we cover how we grew to 1000 customers whilst bootstrapping our business.
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="60" style="font-size: 60px; line-height: 60px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- ======= Header End ======= -->
<!-- ======= Blog 1 Section ======= -->
<table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="ffffff">
<tbody>
<tr>
<td height="50" style="font-size: 50px; line-height: 50px;"> </td>
</tr>
<tr>
<td align="center">
<table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590">
<tbody>
<tr>
<td>
<table border="0" width="590" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590">
<tbody>
<tr>
<td align="center" class="section-img">
<a href="#" style=" border-style: none !important; border: 0 !important;"><img src="http://i.imgur.com/ISCrSZ9.jpg" style="display: block; width: 590px;" width="590" border="0" alt=""></a>
</td>
</tr>
<tr>
<td height="20" style="font-size: 20px; line-height: 20px;"> </td>
</tr>
<tr>
<td align="left" style="color: #212a2e; font-size: 18px; font-family: 'Source Sans Pro', Helvetica, Calibri, sans-serif; font-weight: 500; line-height: 24px;" class="align-center outlook-font">
A round-up of some of the top design trends in email marketing for 2016
</td>
</tr>
<tr>
<td height="15" style="font-size: 15px; line-height: 15px;"> </td>
</tr>
<tr>
<td align="left" style="color: #838383; font-family: 'Source Sans Pro', Helvetica, Calibri, sans-serif; line-height: 20px;font-size:14px;" class="align-center outlook-font">
<div style="line-height: 20px">
Email design has moved forward over the past few years, dramatically. Thanks to some incredibly clever workarounds, a lot of effort and the growth of mobile devices we’re beginning to see some spectacular looking emails.
</div>
</td>
</tr>
<tr>
<td height="15" style="font-size: 15px; line-height: 15px;"> </td>
</tr>
<tr>
<td align="left">
<table border="0" align="left" cellpadding="0" cellspacing="0" class="container590">
<tbody>
<tr>
<td align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="color: #5c9085; font-family: 'Source Sans Pro', Helvetica, Calibri, sans-serif; line-height: 22px;" class="outlook-font">
<div style="line-height: 22px;">
<a href="#" style="color: #5c9085; text-decoration: none;">Read more</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- ======= End Blog 1 Section ======= -->
<!-- ======= Blog 2 Section ======= -->
<table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="ffffff">
<tbody>
<tr>
<td height="50" style="font-size: 50px; line-height: 50px;"> </td>
</tr>
<tr>
<td align="center">
<table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590">
<tbody>
<tr>
<td>
<table border="0" width="264" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590">
<tbody>
<tr>
<td align="center" class="section-img">
<a href="#" style=" border-style: none !important; border: 0 !important;"><img src="http://i.imgur.com/BwEn0Gz.jpg?1" style="display: block; width: 264px;" width="264" border="0" alt=""></a>
</td>
</tr>
<tr>
<td height="20" style="font-size: 20px; line-height: 20px;"> </td>
</tr>
<tr>
<td align="left" style="color: #212a2e; font-size: 18px; font-family: 'Source Sans Pro', Helvetica, Calibri, sans-serif; font-weight: 500; line-height: 24px;" class="align-center outlook-font">
How we saved $8,470 on our startup’s tools
</td>
</tr>
<tr>
<td height="15" style="font-size: 15px; line-height: 15px;"> </td>
</tr>
<tr>
<td align="left" style="color: #838383; font-family: 'Source Sans Pro', Helvetica, Calibri, sans-serif; line-height: 20px;font-size:14px;" class="align-center outlook-font">
<div style="line-height: 20px">
Lorem ipsum dolor sit amet consectetur adipiscing elit Morbi in felis dictum voerra lacus in bibendum nunc Etiam eu dictum magna vvamus et vehi
</div>
</td>
</tr>
<tr>
<td height="15" style="font-size: 15px; line-height: 15px;"> </td>
</tr>
<tr>
<td align="left">
<table border="0" align="left" cellpadding="0" cellspacing="0" class="container590">
<tbody>
<tr>
<td align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" class="outlook-font" style="color: #5c9085; font-family: 'Source Sans Pro', Helvetica, Calibri, sans-serif; line-height: 22px;">
<div style="line-height: 22px;">
<a href="#" style="color: #5c9085; text-decoration: none;">Read more</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" width="5" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590">
<tbody>
<tr>
<td width="5" height="50" style="font-size: 50px; line-height: 50px;"></td>
</tr>
</tbody>
</table>
<table border="0" width="262" align="right" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590">
<tbody>
<tr>
<td align="center" class="section-img">
<a href="#" style=" border-style: none !important; border: 0 !important;"><img src="http://i.imgur.com/VMQAy2m.jpg" style="display: block; width: 264px;" width="264" border="0" alt=""></a>
</td>
</tr>
<tr>
<td height="20" style="font-size: 20px; line-height: 20px;"> </td>
</tr>
<tr>
<td align="left" style="color: #212a2e; font-size: 18px; font-family: 'Source Sans Pro', Helvetica, Calibri, sans-serif; font-weight: 500; line-height: 24px;" class="align-center outlook-font">
<div style="line-height: 24px">
Changes in iOS 10 Mail, and how they’ll affect email marketers
</div>
</td>
</tr>
<tr>
<td height="15" style="font-size: 15px; line-height: 15px;"> </td>
</tr>
<tr>
<td align="left" style="color: #838383; font-family: 'Source Sans Pro', Helvetica, Calibri, sans-serif; line-height: 20px;font-size:14px;" class="align-center outlook-font">
<div style="line-height: 20px">
Lorem ipsum dolor sit amet consectetur adipiscing elit Morbi in felis dictum voerra lacus in bibendum nunc Etiam eu dictum magna vvamus et vehi
</div>
</td>
</tr>
<tr>
<td height="15" style="font-size: 15px; line-height: 15px;"> </td>
</tr>
<tr>
<td align="left">
<table border="0" align="left" cellpadding="0" cellspacing="0" class="container590">
<tbody>
<tr>
<td align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" class="outlook-font" style="color: #5c9085; font-family: 'Source Sans Pro', Helvetica, Calibri, sans-serif; line-height: 22px;">
<div style="line-height: 22px;">
<a href="#" style="color: #5c9085; text-decoration: none;">Read more</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="60" style="font-size: 60px; line-height: 60px;"> </td>
</tr>
</tbody>
</table>
<!-- ======= End Blog 2 Section ======= -->
<!-- ======= Footer ====== -->
<table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="f8f9fa">
<tr>
<td height="25" style="font-size: 25px; line-height: 25px;"> </td>
</tr>
<tr>
<td align="center">
<table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590">
<tr>
<td align="center" style="color: #9c9c9c; font-size: 13px; font-family: 'Titillium Web', Helvetica Neue, Calibri, sans-serif; line-height: 24px;" class="outlook-font align-center">
Address Line 1,</br>
Address Line 2,</br>
Zip Code
</td>
</tr>
<tr>
<td height="30" style="font-size: 30px; line-height: 30px;"> </td>
</tr>
<tr>
<td align="center" style="color: #9c9c9c; font-size: 13px; font-family: 'Titillium Web', Helvetica Neue, Calibri, sans-serif; line-height: 24px;" class="outlook-font align-center">
You're receiving this email because you've signed up to receive updates from Karakol. If you'd prefer not to receive updates you can <a href="#" style="color:#9c9c9c;">unsubscribe from all </a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25" style="font-size: 25px; line-height: 25px;"> </td>
</tr>
</table>
<!-- ======= Footer End ====== -->
</body>
</html>
!
