HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- NAME: 1:2:1 COLUMN -->
<!--[if gte mso 15]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Future in Frankfurt</title>
<style type="text/css">
p{
margin:10px 0;
padding:0;
}
table{
border-collapse:collapse;
}
h1,h2,h3,h4,h5,h6{
display:block;
margin:0;
padding:0;
}
img,a img{
border:0;
height:auto;
outline:none;
text-decoration:none;
}
body,#bodyTable,#bodyCell{
height:100%;
margin:0;
padding:0;
width:100%;
}
#outlook a{
padding:0;
}
img{
-ms-interpolation-mode:bicubic;
}
table{
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
.ReadMsgBody{
width:100%;
}
.ExternalClass{
width:100%;
}
p,a,li,td,blockquote{
mso-line-height-rule:exactly;
}
a[href^=tel],a[href^=sms]{
color:inherit;
cursor:default;
text-decoration:none;
}
p,a,li,td,body,table,blockquote{
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
.ExternalClass,.ExternalClass p,.ExternalClass td,.ExternalClass div,.ExternalClass span,.ExternalClass font{
line-height:100%;
}
a[x-apple-data-detectors]{
color:inherit !important;
text-decoration:none !important;
font-size:inherit !important;
font-family:inherit !important;
font-weight:inherit !important;
line-height:inherit !important;
}
#bodyCell{
padding:20px;
}
.templateContainer{
max-width:600px !important;
}
a.mcnButton{
display:block;
}
.mcnImage{
vertical-align:bottom;
}
.mcnTextContent{
word-break:break-word;
}
.mcnTextContent img{
height:auto !important;
}
.mcnDividerBlock{
table-layout:fixed !important;
}
/*
@tab Page
@section Background Style
@tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
*/
body,#bodyTable{
/*@editable*/background-color:#000000;
}
/*
@tab Page
@section Background Style
@tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
*/
#bodyCell{
/*@editable*/border-top:0;
}
/*
@tab Page
@section Email Border
@tip Set the border for your email.
*/
.templateContainer{
/*@editable*/border:0;
}
/*
@tab Page
@section Heading 1
@tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
@style heading 1
*/
h1{
/*@editable*/color:#202020;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:26px;
/*@editable*/font-style:normal;
/*@editable*/font-weight:bold;
/*@editable*/line-height:125%;
/*@editable*/letter-spacing:normal;
/*@editable*/text-align:left;
}
/*
@tab Page
@section Heading 2
@tip Set the styling for all second-level headings in your emails.
@style heading 2
*/
h2{
/*@editable*/color:#202020;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:22px;
/*@editable*/font-style:normal;
/*@editable*/font-weight:bold;
/*@editable*/line-height:125%;
/*@editable*/letter-spacing:normal;
/*@editable*/text-align:left;
}
/*
@tab Page
@section Heading 3
@tip Set the styling for all third-level headings in your emails.
@style heading 3
*/
h3{
/*@editable*/color:#202020;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:20px;
/*@editable*/font-style:normal;
/*@editable*/font-weight:bold;
/*@editable*/line-height:125%;
/*@editable*/letter-spacing:normal;
/*@editable*/text-align:left;
}
/*
@tab Page
@section Heading 4
@tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
@style heading 4
*/
h4{
/*@editable*/color:#202020;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:18px;
/*@editable*/font-style:normal;
/*@editable*/font-weight:bold;
/*@editable*/line-height:125%;
/*@editable*/letter-spacing:normal;
/*@editable*/text-align:left;
}
/*
@tab Preheader
@section Preheader Style
@tip Set the background color and borders for your email's preheader area.
*/
#templatePreheader{
/*@editable*/background-color:#FAFAFA;
/*@editable*/border-top:0;
/*@editable*/border-bottom:0;
/*@editable*/padding-top:9px;
/*@editable*/padding-bottom:9px;
}
/*
@tab Preheader
@section Preheader Text
@tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
*/
#templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{
/*@editable*/color:#656565;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:12px;
/*@editable*/line-height:150%;
/*@editable*/text-align:left;
}
/*
@tab Preheader
@section Preheader Link
@tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
*/
#templatePreheader .mcnTextContent a,#templatePreheader .mcnTextContent p a{
/*@editable*/color:#656565;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
/*
@tab Header
@section Header Style
@tip Set the background color and borders for your email's header area.
*/
#templateHeader{
/*@editable*/background-color:#000000;
/*@editable*/border-top:0;
/*@editable*/border-bottom:0;
/*@editable*/padding-top:0px;
/*@editable*/padding-bottom:0;
}
/*
@tab Header
@section Header Text
@tip Set the styling for your email's header text. Choose a size and color that is easy to read.
*/
#templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{
/*@editable*/color:#202020;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:16px;
/*@editable*/line-height:150%;
/*@editable*/text-align:left;
}
/*
@tab Header
@section Header Link
@tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
*/
#templateHeader .mcnTextContent a,#templateHeader .mcnTextContent p a{
/*@editable*/color:#FFFFFF;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
/*
@tab Upper Body
@section Upper Body Style
@tip Set the background color and borders for your email's upper body area.
*/
#templateUpperBody{
/*@editable*/background-color:#000000;
/*@editable*/border-top:0;
/*@editable*/border-bottom:0;
/*@editable*/padding-top:0;
/*@editable*/padding-bottom:0;
}
/*
@tab Upper Body
@section Upper Body Text
@tip Set the styling for your email's upper body text. Choose a size and color that is easy to read.
*/
#templateUpperBody .mcnTextContent,#templateUpperBody .mcnTextContent p{
/*@editable*/color:#202020;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:16px;
/*@editable*/line-height:150%;
/*@editable*/text-align:left;
}
/*
@tab Upper Body
@section Upper Body Link
@tip Set the styling for your email's upper body links. Choose a color that helps them stand out from your text.
*/
#templateUpperBody .mcnTextContent a,#templateUpperBody .mcnTextContent p a{
/*@editable*/color:#FFFFFF;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
/*
@tab Columns
@section Column Style
@tip Set the background color and borders for your email's columns.
*/
#templateColumns{
/*@editable*/background-color:#000000;
/*@editable*/border-top:0;
/*@editable*/border-bottom:0;
/*@editable*/padding-top:0;
/*@editable*/padding-bottom:0;
}
/*
@tab Columns
@section Column Text
@tip Set the styling for your email's column text. Choose a size and color that is easy to read.
*/
#templateColumns .columnContainer .mcnTextContent,#templateColumns .columnContainer .mcnTextContent p{
/*@editable*/color:#202020;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:16px;
/*@editable*/line-height:150%;
/*@editable*/text-align:left;
}
/*
@tab Columns
@section Column Link
@tip Set the styling for your email's column links. Choose a color that helps them stand out from your text.
*/
#templateColumns .columnContainer .mcnTextContent a,#templateColumns .columnContainer .mcnTextContent p a{
/*@editable*/color:#FFFFFF;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
/*
@tab Lower Body
@section Lower Body Style
@tip Set the background color and borders for your email's lower body area.
*/
#templateLowerBody{
/*@editable*/background-color:#000000;
/*@editable*/border-top:0;
/*@editable*/border-bottom:2px solid #EAEAEA;
/*@editable*/padding-top:0;
/*@editable*/padding-bottom:9px;
}
/*
@tab Lower Body
@section Lower Body Text
@tip Set the styling for your email's lower body text. Choose a size and color that is easy to read.
*/
#templateLowerBody .mcnTextContent,#templateLowerBody .mcnTextContent p{
/*@editable*/color:#202020;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:16px;
/*@editable*/line-height:150%;
/*@editable*/text-align:left;
}
/*
@tab Lower Body
@section Lower Body Link
@tip Set the styling for your email's lower body links. Choose a color that helps them stand out from your text.
*/
#templateLowerBody .mcnTextContent a,#templateLowerBody .mcnTextContent p a{
/*@editable*/color:#2BAADF;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
/*
@tab Footer
@section Footer Style
@tip Set the background color and borders for your email's footer area.
*/
#templateFooter{
/*@editable*/background-color:#FAFAFA;
/*@editable*/border-top:0;
/*@editable*/border-bottom:0;
/*@editable*/padding-top:9px;
/*@editable*/padding-bottom:9px;
}
/*
@tab Footer
@section Footer Text
@tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
*/
#templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{
/*@editable*/color:#656565;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:12px;
/*@editable*/line-height:150%;
/*@editable*/text-align:center;
}
/*
@tab Footer
@section Footer Link
@tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/
#templateFooter .mcnTextContent a,#templateFooter .mcnTextContent p a{
/*@editable*/color:#656565;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
@media only screen and (min-width:768px){
.templateContainer{
width:600px !important;
}
} @media only screen and (max-width: 480px){
body,table,td,p,a,li,blockquote{
-webkit-text-size-adjust:none !important;
}
} @media only screen and (max-width: 480px){
body{
width:100% !important;
min-width:100% !important;
}
} @media only screen and (max-width: 480px){
#bodyCell{
padding-top:10px !important;
}
} @media only screen and (max-width: 480px){
.columnWrapper{
max-width:100% !important;
width:100% !important;
}
} @media only screen and (max-width: 480px){
.mcnImage{
width:100% !important;
}
} @media only screen and (max-width: 480px){
.mcnShareContent,.mcnCaptionTopContent,.mcnCaptionBottomContent,.mcnTextContentContainer,.mcnBoxedTextContentContainer,.mcnImageGroupContentContainer,.mcnCaptionLeftTextContentContainer,.mcnCaptionRightTextContentContainer,.mcnCaptionLeftImageContentContainer,.mcnCaptionRightImageContentContainer,.mcnImageCardLeftTextContentContainer,.mcnImageCardRightTextContentContainer{
max-width:100% !important;
width:100% !important;
}
} @media only screen and (max-width: 480px){
.mcnBoxedTextContentContainer{
min-width:100% !important;
}
} @media only screen and (max-width: 480px){
.mcnImageGroupContent{
padding:9px !important;
}
} @media only screen and (max-width: 480px){
.mcnCaptionLeftContentOuter .mcnTextContent,.mcnCaptionRightContentOuter .mcnTextContent{
padding-top:9px !important;
}
} @media only screen and (max-width: 480px){
.mcnImageCardTopImageContent,.mcnCaptionBlockInner .mcnCaptionTopContent:last-child .mcnTextContent{
padding-top:18px !important;
}
} @media only screen and (max-width: 480px){
.mcnImageCardBottomImageContent{
padding-bottom:9px !important;
}
} @media only screen and (max-width: 480px){
.mcnImageGroupBlockInner{
padding-top:0 !important;
padding-bottom:0 !important;
}
} @media only screen and (max-width: 480px){
.mcnImageGroupBlockOuter{
padding-top:9px !important;
padding-bottom:9px !important;
}
} @media only screen and (max-width: 480px){
.mcnTextContent,.mcnBoxedTextContentColumn{
padding-right:18px !important;
padding-left:18px !important;
}
} @media only screen and (max-width: 480px){
.mcnImageCardLeftImageContent,.mcnImageCardRightImageContent{
padding-right:18px !important;
padding-bottom:0 !important;
padding-left:18px !important;
}
} @media only screen and (max-width: 480px){
.mcpreview-image-uploader{
display:none !important;
width:100% !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Heading 1
@tip Make the first-level headings larger in size for better readability on small screens.
*/
h1{
/*@editable*/font-size:22px !important;
/*@editable*/line-height:125% !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Heading 2
@tip Make the second-level headings larger in size for better readability on small screens.
*/
h2{
/*@editable*/font-size:20px !important;
/*@editable*/line-height:125% !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Heading 3
@tip Make the third-level headings larger in size for better readability on small screens.
*/
h3{
/*@editable*/font-size:20px !important;
/*@editable*/line-height:125% !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Heading 4
@tip Make the fourth-level headings larger in size for better readability on small screens.
*/
h4{
/*@editable*/font-size:16px !important;
/*@editable*/line-height:150% !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Heading 4
@tip Make the fourth-level headings larger in size for better readability on small screens.
*/
h5{
/*@editable*/font-size:18px !important;
/*@editable*/line-height:150% !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Boxed Text
@tip Make the boxed text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
.mcnBoxedTextContentContainer .mcnTextContent,.mcnBoxedTextContentContainer .mcnTextContent p{
/*@editable*/font-size:14px !important;
/*@editable*/line-height:150% !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Preheader Visibility
@tip Set the visibility of the email's preheader on small screens. You can hide it to save space.
*/
#templatePreheader{
/*@editable*/display:block !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Preheader Text
@tip Make the preheader text larger in size for better readability on small screens.
*/
#templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{
/*@editable*/font-size:14px !important;
/*@editable*/line-height:150% !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Header Text
@tip Make the header text larger in size for better readability on small screens.
*/
#templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{
/*@editable*/font-size:14px !important;
/*@editable*/line-height:150% !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Upper Body Text
@tip Make the upper body text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
#templateUpperBody .mcnTextContent,#templateUpperBody .mcnTextContent p{
/*@editable*/font-size:14px !important;
/*@editable*/line-height:150% !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Column Text
@tip Make the column text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
#templateColumns .columnContainer .mcnTextContent,#templateColumns .columnContainer .mcnTextContent p{
/*@editable*/font-size:15px !important;
/*@editable*/line-height:150% !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Column Text
@tip Make the column text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
#templateColumns .columnContainer .mcnTextContent,#templateColumns .columnContainer .mcnTextContent p.subtitle{
/*@editable*/font-size:18px !important;
/*@editable*/line-height:150% !important;
}
}
@media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Lower Body Text
@tip Make the lower body text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
#templateLowerBody .mcnTextContent,#templateLowerBody .mcnTextContent p{
/*@editable*/font-size:16px !important;
/*@editable*/line-height:150% !important;
}
} @media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Footer Text
@tip Make the footer content text larger in size for better readability on small screens.
*/
#templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{
/*@editable*/font-size:14px !important;
/*@editable*/line-height:150% !important;
}
@media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Footer Text
@tip Make the footer content text larger in size for better readability on small screens.
*/
#templateColumns .columnContainer .mcnTextContent,#templateColumns .columnContainer .mcnTextContent .border-left {
/*@editable*/border-left: 0 !important;
/*@editable*/line-height:150% !important;
/*@editable*/padding: !important;
}
}
@media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Footer Text
@tip Make the footer content text larger in size for better readability on small screens.
*/
#templateColumns td.columnContainer.padding {
/*@editable*/border-left: 0 !important;
/*@editable*/line-height:150% !important;
/*@editable*/padding-top: 30px!important;
/*@editable*/padding-bottom: 50px!important;
}
}
@media only screen and (max-width: 480px){
/*
@tab Mobile Styles
@section Footer Text
@tip Make the footer content text larger in size for better readability on small screens.
*/
#templateColumns .columnContainer .mcnTextContent a, #templateColumns .columnContainer .mcnTextContent p a.button {
/*@editable*/font-size: 14px!important;
}
}
}
</style>
</head>
<body>
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- BEGIN TEMPLATE // -->
<!--[if gte mso 9]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;">
<tr>
<td align="center" valign="top" width="600" style="width:600px;">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer">
<!-- / ROW 1 - Logo Start -->
<tr>
<td valign="top" id="templateColumns">
<!--[if gte mso 9]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;">
<tr>
<td align="center" valign="top" width="300" style="width:300px;">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="300" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageCardBlock">
<tbody class="mcnImageCardBlockOuter">
<tr>
<td class="mcnImageCardBlockInner" valign="top" style="">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnImageCardBottomContent" width="100%" style="background-color: #000000;">
<tbody>
<tr>
<td class="mcnImageCardBottomImageContent" align="left" valign="top" style="padding-top:0px; padding-right:0px; padding-bottom:0; padding-left:0px;">
<table style="width: 264px;" class="mcpreview-image-uploader" data-mc-id="">
</table>
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="color: #F2F2F2;font-family: Helvetica;font-size: 14px;font-weight: normal;text-align: center;" width="246">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock">
<tbody>
<tr>
<td>
<h3 style="color: #B29550; font-family: 'Whitney-Medium', 'Whitney', 'Calibri', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.1; margin: 0 0 0px; padding: 0 0 0 15px;">
</h3>
<p class="lead" style="color: #FFFFFF; font-family: 'Whitney-Medium', 'Whitney', 'Calibri', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1px; font-weight: normal; line-height: 1.6; margin: 0 0 0px; padding: 0 0 0 15px;">
</p>
</td>
</tr>
</tbody>
</table>
<!-- /column 1 -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td align="center" valign="top" width="300" style="width:300px;">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="300" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageCardBlock">
<tbody class="mcnImageCardBlockOuter">
<tr>
<td class="mcnImageCardBlockInner" valign="top" style="">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnImageCardBottomContent" width="100%" style="background-color: #000000;">
<tbody>
<tr>
<td class="mcnImageCardBottomImageContent" align="left" valign="top" style="padding-top:0px; padding-right:0px; padding-bottom:0; padding-left:0px;">
<table style="width: 264px;" class="mcpreview-image-uploader" data-mc-id="">
</table>
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="color: #FFFFFFF;font-family: Helvetica;font-size: 14px;font-weight: normal;text-align: center;" width="246">
<table>
<tr>
<td>
<a href="http://www.urbanscience.com" style=" display: block;">
<img align="center" alt="Urban Science" src="http://www.roundtable6.com/emails/UrbanScience/0138_FrankfurtInvitation/urban-science-logo.png" width="245" style="max-width:244px; padding-left: 15px; padding-bottom: 10px; display: inline !important; vertical-align: bottom;" class="mcnImage">
</a>
</td>
</tr>
</table>
<!-- /column 2 -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- / ROW 1 - Logo End -->
<!-- / ROW 2 - Title Start -->
<tr>
<td valign="top" id="templateColumns">
<!--[if gte mso 9]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;">
<tr>
<td align="center" valign="top" width="300" style="width:300px;">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="300" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageCardBlock">
<tbody class="mcnImageCardBlockOuter">
<tr>
<td class="mcnImageCardBlockInner" valign="top" style="">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnImageCardBottomContent" width="100%" style="background-color: #000000;">
<tbody>
<tr>
<td class="mcnImageCardBottomImageContent" align="left" valign="top" style="padding-top:0px; padding-right:0px; padding-bottom:0; padding-left:0px;">
<table style="width: 264px;" class="mcpreview-image-uploader" data-mc-id="">
</table>
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="color: #F2F2F2;font-family: Helvetica;font-size: 14px;font-weight: normal;text-align: center;" width="246">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock">
<tbody>
<tr>
<td>
<h3 style="color: #B29550; font-family: 'Whitney-Medium', 'Whitney', 'Verdana', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.1; margin: 0 0 0px; padding: 0 0 0 15px; -webkit-font-smoothing: antialiased;">
THE FUTURE OF
<br>
YOUR RETAIL OPERATIONS
</h3>
<p class="lead subtitle" style="color: #FFFFFF; font-family: 'Whitney-Medium', 'Whitney', 'Verdana', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 17px; font-weight: normal; line-height: 1.6; margin: 0 0 0px; padding: 0 0 0 15px; -webkit-font-smoothing: antialiased;">A special invitation only event</p>
</td>
</tr>
</tbody>
</table>
<!-- /column 1 -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td align="center" valign="top" width="300" style="width:300px;">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="300" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageCardBlock">
<tbody class="mcnImageCardBlockOuter">
<tr>
<td class="mcnImageCardBlockInner" valign="top" style="">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnImageCardBottomContent" width="100%" style="background-color: #000000;">
<tbody>
<tr>
<td class="mcnImageCardBottomImageContent" align="left" valign="top" style="padding-top:0px; padding-right:0px; padding-bottom:0; padding-left:0px;">
<table style="width: 264px;" class="mcpreview-image-uploader" data-mc-id="">
</table>
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="color: #F2F2F2;font-family: Helvetica;font-size: 14px;font-weight: normal;text-align: center;" width="246">
<table>
<tr>
<td>
<p class="lead" style="color: #FFFFFF; font-family: 'Whitney-Medium', 'Whitney', 'Calibri', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1px; font-weight: normal; line-height: 1.6; margin: 0 0 0px; padding: 0 0 0 15px;">
</p>
</td>
</tr>
</table>
<!-- /column 2 -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- / ROW 2 - Title End -->
<!-- / ROW 3 - Header Image Start -->
<tr>
<td valign="top" id="templateHeader">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageBlock" style="min-width:100%;">
<tbody class="mcnImageBlockOuter">
<tr>
<td valign="top" style="padding:0px" class="mcnImageBlockInner">
<table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer" style="min-width:100%;">
<tbody>
<tr>
<td class="mcnImageContent" valign="top" style="background-color: #000000; padding-right: 0px; padding-left: 0px; padding-top: 0; padding-bottom: 30px; text-align:center;">
<a href="http://urbanscience.com/futureinfrankfurt" style=" display: block;">
<img align="center" alt="View Video" src="http://www.kylemisteravich.com/wp-content/uploads/2017/05/chart-final-forever.gif" width="600" style="max-width:600px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" class="mcnImage">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- / ROW 3 - Header Image End -->
<tr>
<td valign="top" id="templateUpperBody">
</td>
</tr>
<tr>
<td valign="top" id="templateColumns">
<!--[if gte mso 9]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;">
<tr>
<td align="center" valign="top" width="300" style="width:300px;">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="300" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageCardBlock">
<tbody class="mcnImageCardBlockOuter">
<tr>
<td class="mcnImageCardBlockInner" valign="top" style="">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnImageCardBottomContent" width="100%" style="background-color: #000000;">
<tbody>
<tr>
<td class="mcnImageCardBottomImageContent" align="left" valign="top" style="padding-top:0px; padding-right:0px; padding-bottom:0; padding-left:0px;">
<table style="width: 264px;" class="mcpreview-image-uploader" data-mc-id="">
</table>
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="color: #F2F2F2;font-family: Helvetica;font-size: 14px;font-weight: normal;text-align: center;" width="246">
<table align="left" class="column" style="float: left; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; min-width: 274px; padding: 0; width: 275px">
<tr style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; padding: 0">
<td style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; padding: 0px 15px;">
<!-- /<h5 style="text-align: left; color: #FFFFFF; font-family: 'Verdana','Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.1; margin: 0 0 5px; padding: 0; -webkit-font-smoothing: antialiased;">Dear *|FNAME|*,</h5> -->
<p class="" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 1.5; margin: 0 0 42px; padding: 0"><span class="soc-btn fb" style="color: #FFF; display: block; font-family: 'Verdana', 'Calibri', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 0px; text-align: left; text-decoration: none; -webkit-font-smoothing: antialiased;">You are invited to join our leading client partners and global COO, Rod Wright, as we uncover your sales opportunity.</span></p>
<p class="" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 1.5; margin: 0 0 0px; padding: 0"><span class="soc-btn fb" style="color: #FFF; display: block; font-family: 'Verdana', 'Calibri', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 0 0px; text-align: left; text-decoration: none">
<a class="button" href="http://urbanscience.com/futureinfrankfurt/" style="background-color: #1a1a1a !important; color: #B29550; display: block; font-family: 'Verdana','Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin: 0 0 0px; padding: 12px 7px; text-align: center; text-decoration: none; border-radius: 7px; -webkit-font-smoothing: antialiased;;">RSVP</a>
</span>
</p>
</td>
</tr>
</table>
<!-- /column 1 -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td align="center" valign="top" width="300" style="width:300px;">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="300" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer padding">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageCardBlock">
<tbody class="mcnImageCardBlockOuter">
<tr>
<td class="mcnImageCardBlockInner" valign="top" style="">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnImageCardBottomContent" width="100%" style="background-color: #000000;">
<tbody>
<tr>
<td class="mcnImageCardBottomImageContent" align="left" valign="top" style="padding-top:0px; padding-right:0px; padding-bottom:0; padding-left:0px;">
<table style="width: 264px;" class="mcpreview-image-uploader" data-mc-id="">
</table>
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="color: #F2F2F2;font-family: Helvetica;font-size: 14px;font-weight: normal;text-align: center;" width="246">
<table align="left" class="column" style="float: left; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; min-width: 279px; padding: 0; width: 280px">
<tr style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; padding: 0">
<td class="border-left" style="border-left: 1px solid #FFFFFF; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; padding: 0px 15px;">
<h5 style="text-align: left; color: #B29550; font-family: 'Whitney-Medium', 'Whitney', 'Verdana', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 300; line-height: 1.1; margin: 0 0 5px; padding: 0; -webkit-font-smoothing: antialiased;">WHEN</h5>
<p style="color: #FFFFFF; font-family: 'Verdana', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 1.6; margin: 0 0 10px; padding: 0; -webkit-font-smoothing: antialiased;"><span class="appleLinksWhite">November 12, 2015</span><br style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; padding: 0"><span class="appleLinksWhite">
16:30 - 19:00</span></p>
<br>
<h5 style="text-align: left; color: #B29550; font-family: 'Whitney-Medium', 'Whitney', 'Verdana', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 300; line-height: 1.1; margin: 0 0 5px; padding: 0; -webkit-font-smoothing: antialiased;">WHERE</h5>
<p style="color: #FFFFFF; font-family: 'Verdana', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 1.6; margin: 0 0 0px; padding: 0; -webkit-font-smoothing: antialiased;;">Urban Science International Gmbh<br style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; padding: 0">
Theodor-Stern Kai 1
<br style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; padding: 0">
D-60596 Frankfurt am Main</p>
</td>
</tr>
</table>
<!-- /column 2 -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
</html>
Also see: Tab Triggers