Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

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.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <!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;">
																								&nbsp;
																							</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;">
																							&nbsp;
																						</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 &#45; 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&#45;Stern Kai 1
																									<br style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; margin: 0; padding: 0">
																									D&#45;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>

              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console