Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              
					<!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" xmlns:o="urn:schemas-microsoft-com:office:office"><head>
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
<title>Updates to our Privacy Policy & Terms of Service</title>
<style>
    /*////// RESET STYLES //////*/
body, #bodyTable, #bodyCell, #outermost {
    height: 100% !important;
    margin: 0;
    padding: 0;
    width: 100% !important;
    font-family: Helvetica;
}
table {
    border-collapse: collapse;
}
img {
    display: block;
}
img, a img {
    border: 0;
    outline: none;
    text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    text-align: left;
    color: #1B2432; /* grey-10 */
    font-family: Helvetica;
    line-height: 150%;
}
h1 { font-size: 28px; font-weight: 400; line-height: 125%; }
h2 { font-size: 22px; }
h3 { font-weight: 400; line-height: 125%; }
p {
    margin: 1em 0;
}
div, p {
    line-height: 150%;
    font-family: Helvetica;
    font-size: 16px;
    color: #676D76; /* grey-8 */
}
.center {
    text-align: center;
}
/*////// CLIENT-SPECIFIC STYLES //////*/
.ReadMsgBody {
    width: 100%;
}
.ExternalClass {
    width: 100%;
}
/* Force Hotmail/Outlook.com to display emails at full width. */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
    line-height: 100%;
}
/* Force Hotmail/Outlook.com to display line heights normally. */
table, td {
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
}
/* Remove spacing between tables in Outlook 2007 and up. */
#outlook a {
    padding: 0;
}
/* Force Outlook 2007 and up to provide a "view in browser" message. */
img {
    -ms-interpolation-mode: bicubic;
}
/* Force IE to smoothly render resized images. */
body, table, td, p, a, li, blockquote {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
/* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
/*////// FRAMEWORK STYLES //////*/
.flexibleContainerCell {
    padding-top: 30px;
    padding-right: 30px;
    padding-left: 30px;
    line-height: 0px;
    border-image-width: 0;
}
.flexibleContainerCellFullWidth {
    padding-top: 30px;
    padding-right: 0px;
    padding-left: 0px;
    line-height: 0px;
    border-image-width: 0;
}
.flexibleImage {
    height: auto;
}
.bottomShim {
    padding-bottom: 30px;
}
.imageContent, .imageContentLast {
    padding-bottom: 30px;
}
.nestedContainerCell {
    padding-top: 30px;
    padding-right: 30px;
    padding-left: 30px;
}
/*////// GENERAL STYLES //////*/
body, #bodyTable {
    background-color: #FFFFFF;
}
#bodyCell {
    padding-top: 0px;
    padding-bottom: 40px;
}
#emailBody {
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    /*border-top: none;*/
    border-collapse: separate;
    border-radius: 3px;
}
.textContent, .textContentLast {
    color: #676D76; /* grey-8 */
    font-family: Helvetica;
    font-size: 16px;
    line-height: 150%;
    text-align: Left;
    padding-bottom: 30px;
}
.textContent .small, .textContentLast .small {
    color: #A1A4AA; /* grey-6 */
    font-size: 10px;
}
.textContent .label, .textContentLast .label {
    color: #676D76; /* grey-8 */
    font-size: 14px;
    text-transform: uppercase;
}
.textContent a, .textContentLast a, a {
    color: #1AAFD0; /* teal */
    text-decoration: underline;
    font-weight: normal;
}
.textContent a.large, .textContentLast a.large {
    color: #1AAFD0; /* teal */
    font-size: 22px;
    text-decoration: underline;
    font-weight: 400;
}
.nestedContainer {
    background-color: #E5E5E5;
    border: 1px solid #CCCCCC;
}
.emailButton {
    background-color: #6a67ce;
    border-collapse: separate;
    border-radius: 3px;
}
.buttonContent {
    color: #FFFFFF;
    font-family: Helvetica;
    font-size: 18px;
    line-height: 100%;
    padding: 13px;
    text-align: center;
}
.buttonContent a {
    color: #FFFFFF;
    display: block;
    text-decoration: none;
}
.socialLink {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    color: #1E8CD4;
    font-weight: normal;
    text-decoration: none;
    margin-right: 5px;
}
.share-icon {
    -ms-interpolation-mode: bicubic;
    border: 0;
    height: auto;
    line-height: 100%;
    outline: none;
    text-decoration: none;
    display: inline-block;
}
a.asanaButton {
  text-decoration: none;
}
a.asanaButton > table {
    border: 1px solid #6a67ce;
    border-radius: 3px;
    color: #FFFFFF;
    text-decoration: none;
    background-color: #6a67ce;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
}
a.asanaButton > table td {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 25px;
    padding-right: 25px;
    border-radius: 3px;
    color: #FFFFFF;
    background-color: #6a67ce;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
}
table.green {
    background-color: #3BE8B0; /* green */
}
table.purple {
    background-color: #6A67CE; /* purple */
}
table.color tr td.textContent {
    padding: 30px;
    color: #ffffff;
    width: auto;
}
table.color tr td.textContent h3 {
    color: #ffffff;
    font-size: 36px;
    font-weight: 300;
    margin-bottom: 10px;
    line-height: 36px;
    border-radius: 3px;
}
table.color tr td.textContent p {
    color: #ffffff;
}
table.twitter, table.card {
    border: 1px solid #DDDDDD;
    border-radius: 3px;
}
table.twitter tr td.textContent, table.card tr td.textContent {
    padding: 30px;
    width: auto;
}
.preview {
    width: 600px;
    display: block;
    margin: 0px;
    margin-bottom: 15px;
    text-align: right;
}
.footerText {
    font-size: 11px;
    color: #A1A4AA;
}
.footerText a, .footerText a[href^="mailto"] {
  font-weight: normal !important;
}
.preview .footerText {
    color: #FFFFFF;
}
.preview .footerText a {
    color: #A1A4AA;
    text-decoration: underline;
}
/*////// MOBILE STYLES //////*/
@media only screen and (max-width: 480px) {
    /*////// CLIENT-SPECIFIC STYLES //////*/
    body {
        width: 100% !important;
        min-width: 100% !important;
    }
    /* Force iOS Mail to render the email at full width. */
    /*////// FRAMEWORK STYLES //////*/
    /*
      CSS selectors are written in attribute
      selector format to prevent Yahoo Mail
      from rendering media query styles on
      desktop.
    */
    table[id="emailBody"], table[class="flexibleContainer"] {
        width: 100% !important;
    }
    /*
      The following style rule makes any
      image classed with 'flexibleImage'
      fluid when the query activates.
      Make sure you add an inline max-width
      to those images to prevent them
      from blowing out.
    */
    img[class="flexibleImage"] {
        height: auto !important;
        width: 100% !important;
    }
    /*
      Make buttons in the email span the
      full width of their container, allowing
      for left- or right-handed ease of use.
    */
    table[class="emailButton"] {
        width: 100% !important;
    }
    td[class="buttonContent"] {
        padding: 0 !important;
    }
    td[class="buttonContent"] a {
        padding: 15px !important;
    }
    td[class="textContentLast"], td[class="imageContentLast"] {
        padding-top: 30px !important;
        text-align: left !important;
    }
    /*////// GENERAL STYLES //////*/
    td[id="bodyCell"] {
        padding-top: 10px !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
    }
}
  </style>
</head>
<body>
<style ee-render="inline" id="buttonStyles" type="text/css"><!--.button-wrapper {min-width: auto;} 
.button-container {text-align: left;} 
.button-container .button-wrapper {float: left;} 
.button-container.button-left {text-align: left;} 
.button-container.button-left .button-wrapper {float: left;} 
.button-container.button-right {text-align: right;} 
.button-container.button-right .button-wrapper {float: right;} 
.button-container.button-center {text-align: center;} 
.button-container.button-center .button-wrapper {float: none;margin: 0 auto;} 
.button-container.button-full-width {text-align: center;} 
.button-container.button-full-width .button-wrapper {width: 100%;} 
.button-td {border-radius: 3px;background: #346ca5;text-align: center;} 
.button-td p {line-height: 1;} 
.button-td .button-a,.button-td .ee_editable.button-a {color: #ffffff;height: 100%;margin-bottom: 0;text-align: center; line-height: 120%; } 
.button-td .button-a a, .button-td .ee_editable.button-a a {color:inherit; border: 0px solid black;padding: 12px 20px;font-family: Arial, sans-serif;font-size: 14px; text-align: inherit; line-height: inherit;text-decoration: none;display: block;border-radius: 3px;font-weight: bold;} 
.button-td .button-a a font,.button-td .ee_editable.button-a a font {word-wrap: break-word;word-break: break-word;} 
-->
</style>
<style ee-render="block" id="buttonBlockStyles" type="text/css"><!--.button-td:hover .button-a { transition: all 100ms ease-in; background: rgba(255, 255, 255, 0.2) !important; }-->
</style>
<!--[if mso]><style id="msoButtonStyles">   .button-wrapper { padding: 12px 16px 12px 16px; }   .button-td .button-a a, .button-td .button-a a font,.button-td {       word-wrap: break-word;         word-break:break-all;   }</style><![endif]--><!-- Easy Editor --><!-- Classic: 6574254 -->
<div class="ee_noresize" height="100%" id="outermost" style="color:#676D76; font-family:Helvetica; font-size:16px; height:100%; line-height:150%; margin:0; padding-top: 0;padding-right: 0;padding-bottom: 0;padding-left: 0; width:100%" width="100%">
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="ee_noresize" ee-template-version="0.3" style="border-collapse: collapse; table-layout: auto;" width="600">
	<tbody>
		<tr>
			<td style="-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; mso-table-lspace:0; mso-table-rspace:0">
			<table border="0" cellpadding="0" cellspacing="0" class="ee_noresize" height="100%" id="bodyTable" style="border-collapse: collapse; font-family: Helvetica; height: 100%; margin: 0px; padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px; width: 100%;  background-color: rgb(255, 255, 255);table-layout: auto;" width="100%">
				<tbody>
					<tr>
						<td align="center" class="ee_noresize" height="100%" id="bodyCell" style="-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; font-family:Helvetica; height:100%; margin:0; mso-table-lspace:0; mso-table-rspace:0; padding-top: 0;padding-right: 0;padding-bottom: 0;padding-left: 0; padding-bottom:0; padding-top:0; width:100%" valign="top" width="100%">
						<table border="0" cellpadding="0" cellspacing="0" class="ee_noresize" style="border-collapse: collapse; margin: 0px; max-width: 600px; padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px; width: 100%; table-layout: auto;" width="100%">
							<tbody>
								<tr>
									<td align="left" class="ee_noresize ee_dropzone" height="100%" style="-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; margin:0; max-width:600px; mso-table-lspace:0; mso-table-rspace:0; padding-top: 0;padding-right: 0;padding-bottom: 0;padding-left: 0; width:100%" valign="top" width="100%">
									<table border="0" cellpadding="0" cellspacing="0" class="ee_noresize ee_element" data-eewidth="600" ee-type="container" style="border-top: none;border-right: none;border-bottom: none;border-left: none; border-collapse: collapse; width: 600px; table-layout: auto;" width="100%"><!-- MODULE ROW // -->
										<tbody>
											<tr>
												<td align="center" class="ee_noresize" style="padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px; width: 600px;" valign="top"><!-- CENTERING TABLE // -->
												<table border="0" cellpadding="0" cellspacing="0" class="ee_noresize" style="border-collapse: collapse; width: 100%; table-layout: auto;" width="100%">
													<tbody>
														<tr>
															<td align="center" class="ee_noresize" style="-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; mso-table-lspace:0; mso-table-rspace:0" valign="top"><!-- FLEXIBLE CONTAINER // -->
															<table border="0" cellpadding="0" cellspacing="0" class="flexibleContainer ee_noresize" style="border-collapse: collapse; max-width: 600px; width: 100%; table-layout: auto;" width="100%">
																<tbody>
																	<tr>
																		<td align="left" class="flexibleContainerCellFullWidth ee_dropzone ee_noresize" style="-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; border-image-width:0; line-height:0; mso-table-lspace:0; mso-table-rspace:0; padding-left:0; padding-right:0; padding-top:30px; width:100%" valign="top" width="100%"><!-- PREVIEW TEXT -->
																		<div align="right" class="preview" style="color:#676D76; display:block; font-family:Helvetica; font-size:16px; line-height:150%; margin:0; margin-bottom:15px; text-align:right; width:600px" width="600">
																		<div class="footerText ee_editable ee_noresize" style="color:#FFF; font-family:Helvetica; font-size:11px; line-height:150%">
																		<p style="margin: 0px; font-family: arial; font-size: 11px; color: rgb(255, 255, 255);"><span style="color:#696969;">&nbsp;</span><span style="color:#FFFFFF;">Please learn about the changes we've made&nbsp;to our Privacy Policy and&nbsp;Terms of Service.&nbsp;&nbsp;</span><a href="#" style="color: rgb(161, 164, 170); text-decoration: underline;">View in browser</a></p>
																		</div>
																		</div>
																		</td>
																	</tr>
																</tbody>
															</table>
															<!-- // FLEXIBLE CONTAINER --></td>
														</tr>
													</tbody>
												</table>
												<!-- // CENTERING TABLE --></td>
											</tr>
											<!-- // MODULE ROW -->
										</tbody>
									</table>

									<table border="0" cellpadding="0" cellspacing="0" class="ee_noresize" style="border-collapse: collapse; max-width: 600px; width: 100%; table-layout: auto;" width="100%"><!-- Container width bar -->
										<tbody><!-- MODULE ROW // -->
											<tr>
												<td align="center" class="ee_noresize" style="-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; mso-table-lspace:0; mso-table-rspace:0" valign="top"><!-- CENTERING TABLE // -->
												<table border="0" cellpadding="0" cellspacing="0" class="ee_element ee_noresize" data-eewidth="600" style="border-collapse: collapse; width: 600px; table-layout: auto;" width="100%">
													<tbody>
														<tr>
															<td align="left" class="ee_dropzone ee_noresize" style="padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px; width: 600px;" valign="top">
															<table border="0" cellpadding="0" cellspacing="0" class="ee_noresize ee_element" data-eewidth="600" ee-type="container" style="border-top: none;border-right: none;border-bottom: none;border-left: none; border-collapse: collapse; width: 600px; table-layout: auto;" width="100%"><!-- MODULE ROW // -->
																<tbody>
																	<tr>
																		<td align="center" class="ee_noresize" style="padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px; width: 600px;" valign="top"><!-- CENTERING TABLE // -->
																		<table border="0" cellpadding="0" cellspacing="0" class="ee_noresize" style="border-collapse: collapse; width: 100%; table-layout: auto;" width="100%">
																			<tbody>
																				<tr>
																					<td align="center" class="ee_noresize" style="-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; mso-table-lspace:0; mso-table-rspace:0" valign="top"><!-- FLEXIBLE CONTAINER // -->
																					<table border="0" cellpadding="0" cellspacing="0" class="flexibleContainer ee_noresize" style="border-collapse: collapse; max-width: 600px; width: 100%; table-layout: auto;" width="100%">
																						<tbody>
																							<tr>
																								<td align="left" class="flexibleContainerCell ee_dropzone ee_noresize" style="-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; border-image-width:0; line-height:0; max-width:540px; mso-table-lspace:0; mso-table-rspace:0; padding-left:30px; padding-right:30px; padding-top:30px" valign="top" width="600"><!-- CONTENT TABLE // --><!--
  In multi-column content blocks, the
    content tables are given set widths
    and the flexibleContainer class.
-->
																								<table border="0" cellpadding="0" cellspacing="0" class="flexibleContainer ee_element ee_noresize" data-eewidth="600" ee-type="element" style="border-collapse: collapse; width: 260px; table-layout: auto;" width="260">
																									<tbody>
																										<tr>
																											<td class="imageContent ee_noresize" style="-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; mso-table-lspace:0; mso-table-rspace:0; padding-bottom:30px" valign="top"><a href="http://connect2.asana.com/e/232142/2017-10-27/k4lz/74398661" style="-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; color:#636c72; font-weight:normal; text-decoration:none"><!-- https://luna1.co/0c9cff.png blog link header --> <img class="ee_noresize " height="30" src="https://luna1.co/0fc2ef.png" style="-ms-interpolation-mode:bicubic; border-top:0;border-right:0;border-bottom:0;border-left:0; display:block; outline:none; text-decoration:none"> </a></td>
																										</tr>
																									</tbody>
																								</table>
																								<!-- // CONTENT TABLE --></td>
																							</tr>
																						</tbody>
																					</table>
																					<!-- // FLEXIBLE CONTAINER --></td>
																				</tr>
																			</tbody>
																		</table>
																		<!-- // CENTERING TABLE --></td>
																	</tr>
																	<!-- // MODULE ROW -->
																</tbody>
															</table>
															</td>
														</tr>
													</tbody>
												</table>
												<!-- // CENTERING TABLE --></td>
											</tr>
										</tbody>
									</table>

									<table border="0" cellpadding="0" cellspacing="0" class="ee_noresize" id="emailBody" style="border-top: 1px solid rgb(221, 221, 221);border-right: 1px solid rgb(221, 221, 221);border-bottom: 1px solid rgb(221, 221, 221);border-left: 1px solid rgb(221, 221, 221); border-collapse: separate; border-radius: 3px; max-width: 600px; width: 100%;  background-color: rgb(255, 255, 255);table-layout: auto;" width="100%">
										<tbody>
											<tr>
												<td align="left" class="ee_dropzone ee_noresize" style="padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;" valign="top">
												<table cellpadding="0" cellspacing="0" class="ee_element ee_borders eeb_width" data-eewidth="601.0029814453125" style="width: 601.003px; table-layout: auto;">
													<tbody>
														<tr>
															<td class="ee_pad" pardot-data="line-height:0px;" style="padding-left: 30px; padding-bottom: 20px; padding-top: 30px; width: auto; line-height: 0px; font-size: 5px;">&nbsp;</td>
														</tr>
													</tbody>
												</table>

												<table border="0" cellpadding="0" cellspacing="0" class="ee_noresize ee_element" data-eewidth="598" ee-type="container" style="border-top: none;border-right: none;border-bottom: none;border-left: none; border-collapse: collapse; width: 598px; table-layout: auto;" width="100%"><!-- MODULE ROW // -->
													<tbody>
														<tr>
															<td align="center" class="ee_noresize" style="padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px; width: 598px;" valign="top"><!-- CENTERING TABLE // -->
															<table border="0" cellpadding="0" cellspacing="0" class="ee_noresize" style="border-collapse: collapse; width: 100%; table-layout: auto;" width="100%">
																<tbody>
																	<tr>
																		<td align="center" class="ee_noresize" style="-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; mso-table-lspace:0; mso-table-rspace:0" valign="top"><!-- FLEXIBLE CONTAINER // -->
																		<table border="0" cellpadding="0" cellspacing="0" class="flexibleContainer ee_noresize" style="border-collapse: collapse; max-width: 598px; width: 100%; table-layout: auto;" width="100%">
																			<tbody>
																				<tr>
																					<td align="left" class="flexibleContainerCell ee_dropzone ee_noresize" style="-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; border-image-width:0; line-height:0; max-width:540px; mso-table-lspace:0; mso-table-rspace:0; padding-left:30px; padding-right:30px; padding-top:5px" valign="top" width="598">
																					<table border="0" cellpadding="0" cellspacing="0" class="ee_element" ee-type="element" style="width: 540px;table-layout: auto;" width="100%">
																						<tbody>
																						</tbody>
																					</table>
																					<!-- CONTENT TABLE // --><!--
  The content table is the first element
    that's entirely separate from the structural
    framework of the email.
--><!-- // CONTENT TABLE -->

																					<table border="0" cellpadding="0" cellspacing="0" class="ee_element ee_spacer" ee-type="element" style="width: 100%;table-layout: auto;" width="100%">
																						<tbody>
																						</tbody>
																					</table>

																					<table border="0" cellpadding="0" cellspacing="0" class="ee_element ee_noresize" data-eewidth="538" ee-type="element" style="border-collapse: collapse;  background-color: rgb(255, 255, 255);table-layout: auto;" width="538">
																						<tbody>
																							<tr>
																								<td align="Left" class="textContent ee_noresize" style="-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; color:#676D76; font-family:Helvetica; font-size:16px; line-height:150%; mso-table-lspace:0; mso-table-rspace:0; padding-bottom:0px; text-align:Left" valign="top" width="auto">
																								<div class="ee_editable">
																								<p style="margin: 0px; font-family: helvetica;"><span style="color:#696969;">Hi there,<br>
																								&nbsp;<br>
																								As we expand Asana’s service across the globe, we’ve made changes to our Privacy Policy and Terms of Service&nbsp;so they’re easier to read and reflect the growth of our Service. These changes will go into effect for you on November 14, 2017. Here are a couple of the changes you’ll find:<br>
																								&nbsp;</span><br>
																								<br>
																								<a href="http://connect2.asana.com/e/232142/terms-privacy-policy/k4ln/74398661" style="text-decoration:none;color:#1AAFD0;"><strong style="text-decoration: none; color: rgb(26, 175, 208);">Updated Privacy Policy:&nbsp;</strong></a></p>

																								<ul>
																									<li style="margin: 0px; font-family: helvetica;">Added detail explaining the choices you have for how Asana uses your information.</li>
																									<li style="margin: 0px; font-family: helvetica;"><span style="color:#696969;">Re-formatting the policy to make it easier to read and understand.</span></li>
																								</ul>

																								<p style="margin: 0px; font-family: helvetica;"><br>
																								<a href="http://connect2.asana.com/e/232142/terms-terms-of-service/k4lq/74398661" style="text-decoration:none;"><strong style="text-decoration: none; color: rgb(26, 175, 208);">Updated Terms of Service:&nbsp;</strong></a></p>

																								<ul>
																									<li style="margin: 0px; font-family: helvetica;">Tailoring our terms to meet local legal requirements in different countries.</li>
																									<li style="margin: 0px; font-family: helvetica;"><span style="color:#696969;">Clarifying that all users–not just users of the free service–are subject to the Terms.</span></li>
																									<li style="margin: 0px; font-family: helvetica;"><span style="color:#696969;">Re-formatting the document to make it easier to read and understand.</span></li>
																								</ul>

																								<p style="margin: 0px; font-family: helvetica;"><br>
																								<span style="color:#696969;">We encourage you to review and familiarize yourself with these changes. By continuing to use Asana after November 14, 2017, you agree to our updated Privacy Policy and Terms of Service. If you’re interested in more details, </span><a href="http://connect2.asana.com/e/232142/y-policy-and-subscriber-terms-/k4ls/74398661" style="text-decoration:none;"><strong style="text-decoration: none; color: rgb(26, 175, 208);">check out our blog</strong></a><span style="color:#696969;">.</span><br>
																								<br>
																								<span style="color:#696969;">Thanks,&nbsp;<br>
																								The Asana Team</span></p>
																								</div>
																								</td>
																							</tr>
																						</tbody>
																					</table>
																					</td>
																				</tr>
																			</tbody>
																		</table>
																		<!-- // FLEXIBLE CONTAINER --></td>
																	</tr>
																</tbody>
															</table>
															<!-- // CENTERING TABLE --></td>
														</tr>
														<!-- // MODULE ROW -->
													</tbody>
												</table>

												<table border="0" cellpadding="0" cellspacing="0" class="ee_noresize ee_element" data-eewidth="598" ee-type="container" style="border-top: none;border-right: none;border-bottom: none;border-left: none; border-collapse: collapse; width: 598px; table-layout: auto;" width="100%"><!-- MODULE ROW // -->
													<tbody>
														<tr>
															<td align="center" class="ee_noresize" style="padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px; width: 598px;" valign="top"><!-- CENTERING TABLE // -->
															<table border="0" cellpadding="0" cellspacing="0" class="ee_noresize" style="border-collapse: collapse; width: 100%; table-layout: auto;" width="100%">
																<tbody>
																	<tr>
																		<td align="center" class="ee_noresize" style="-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; mso-table-lspace:0; mso-table-rspace:0" valign="top"><!-- FLEXIBLE CONTAINER // -->
																		<table border="0" cellpadding="0" cellspacing="0" class="flexibleContainer ee_noresize" style="border-collapse: collapse; max-width: 598px; width: 100%; table-layout: auto;" width="100%">
																			<tbody>
																				<tr>
																					<td align="left" class="flexibleContainerCell ee_dropzone ee_noresize" style="-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; border-image-width:0; line-height:0; max-width:538px; mso-table-lspace:0; mso-table-rspace:0; padding-left:30px; padding-right:30px; padding-top:30px" valign="top" width="598"><!-- BUTTON // -->
																					<table border="0" cellpadding="0" cellspacing="0" class="ee_noresize" style="border-collapse: collapse; table-layout: auto;" width="538">
																						<tbody>
																						</tbody>
																					</table>
																					<!-- // BUTTON --></td>
																				</tr>
																			</tbody>
																		</table>
																		<!-- // FLEXIBLE CONTAINER --></td>
																	</tr>
																</tbody>
															</table>
															<!-- // CENTERING TABLE --></td>
														</tr>
														<!-- // MODULE ROW -->
													</tbody>
												</table>

												<table cellpadding="0" cellspacing="0" class="ee_element ee_borders" ee-type="element" style="width: 601.444px; table-layout: auto;" width="100%">
													<tbody>
													</tbody>
												</table>

												<table border="0" cellpadding="0" cellspacing="0" class="ee_element ee_spacer" data-eewidth="598" ee-type="element" style="width: 598px; table-layout: auto;" width="100%">
													<tbody>
														<tr>
															<td pardot-data="line-height:12px;" style="font-size: 12px; padding: 0px; width: 598px; line-height: 12px;" class="">&nbsp;</td>
														</tr>
													</tbody>
												</table>
												</td>
											</tr>
										</tbody>
									</table>

									<table border="0" cellpadding="0" cellspacing="0" class="ee_element ee_spacer" data-eewidth="600" ee-type="element" style="width: 600px; table-layout: auto;" width="100%">
										<tbody>
											<tr>
												<td pardot-data="line-height:12px;" style="font-size: 1px; padding: 0px; width: 600px; line-height: 12px;" class=""><img alt="" height="30" src="https://i.emlfiles.com/cmpimg/t/s.gif" style="display: block; height: 30px;" width="10">
												<div style="text-align: center;"><span style="font-size:12px;"><span style="color:#808080;">Zeige allgemeine Geschäftsbedingungen auf <a href="#" style="text-decoration:none;color:#1AAFD0;">deutsch</a> und <a href="#" style="text-decoration:none;color:#1AAFD0;">französisch</a>.<br>
												<br>
												Voir les conditions générales en <a href="#" style="text-decoration:none;color:#1AAFD0;">français</a> et en <a href="#" style="text-decoration:none;color:#1AAFD0;">allemand</a>.</span></span><br>
												&nbsp;</div>
												</td>
											</tr>
										</tbody>
									</table>
									</td>
								</tr>
								<!-- // CONTENT TABLE -->
							</tbody>
						</table>
						<!-- // FLEXIBLE CONTAINER --></td>
					</tr>
				</tbody>
			</table>
			<!-- // CENTERING TABLE --></td>
		</tr>
		<!-- // MODULE ROW -->
	</tbody>
</table>
<!-- // EMAIL CONTAINER -->

<center>
<div class="footerText ee_editable ee_noresize" style="color: rgb(161, 164, 170); font-family: Helvetica; font-size: 11px; line-height: 150%; position: static;">You are signed up for this email as <a href="#" style="-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; color:#1aafd0; font-weight:normal; text-decoration:underline">hello@SmilesDavis.yeah</a><br>
<br/>Asana<br/>1550 Bryant Street<br/>San Francisco, CA 94103<br/></div>
<br>
<a class="socialLink" href="http://connect2.asana.com/e/232142/ve20work20forward20with20Asana/k4m2/74398661" style="-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; color:#1E8CD4; font-weight:normal; margin-right:5px; text-decoration:none"><img class="share-icon ee_noresize" height="auto" src="http://d3qngc7ypzt3ty.cloudfront.net/blog/icon-tweet.png" style="-ms-interpolation-mode:bicubic; border-top:0;border-right:0;border-bottom:0;border-left:0; display:inline-block; height:auto; line-height:100%; outline:none; text-decoration:none"> </a> <a class="socialLink" href="http://connect2.asana.com/e/232142/sharer-sharer-php-u-asana-com/k4m4/74398661" style="-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; color:#1E8CD4; font-weight:normal; margin-right:5px; text-decoration:none"> <img class="share-icon ee_noresize" height="auto"
src="http://d3qngc7ypzt3ty.cloudfront.net/blog/icon-facebook.png" style="-ms-interpolation-mode:bicubic; border-top:0;border-right:0;border-bottom:0;border-left:0; display:inline-block; height:auto; line-height:100%; outline:none; text-decoration:none"> </a></center>
<!-- // FLEXIBLE CONTAINER --><!-- // CENTERING TABLE --><!-- // MODULE ROW --></center>
</div>
</body></html>			
            
          
!

CSS

            
              
            
          
!

JS

            
              
            
          
!
999px

Console