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 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

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.

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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  
  <head>
    <!-- NAME: 1 COLUMN -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>yup, we’ve got a “late summer” menu</title>
    <style type="text/css">
      body,#bodyTable,#bodyCell{
      			height:100% !important;
      			margin:0;
      			padding:0;
      			width:100% !important;
      		}
      		table{
      			border-collapse:collapse;
      		}
      		img,a img{
      			border:0;
      			outline:none;
      			text-decoration:none;
      		}
      		h1,h2,h3,h4,h5,h6{
      			margin:0;
      			padding:0;
      		}
      		p{
      			margin:1em 0;
      			padding:0;
      		}
      		a{
      			word-wrap:break-word;
      		}
      		.mcnPreviewText{
      			display:none !important;
      		}
      		.ReadMsgBody{
      			width:100%;
      		}
      		.ExternalClass{
      			width:100%;
      		}
      		.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{
      			line-height:100%;
      		}
      		table,td{
      			mso-table-lspace:0pt;
      			mso-table-rspace:0pt;
      		}
      		#outlook a{
      			padding:0;
      		}
      		img{
      			-ms-interpolation-mode:bicubic;
      		}
      		body,table,td,p,a,li,blockquote{
      			-ms-text-size-adjust:100%;
      			-webkit-text-size-adjust:100%;
      		}
      		#templatePreheader,#templateHeader,#templateBody,#templateFooter{
      			min-width:100%;
      		}
      		#bodyCell{
      			padding:20px;
      		}
      		.mcnImage{
      			vertical-align:bottom;
      		}
      		.mcnTextContent img{
      			height:auto !important;
      		}
      		body,#bodyTable{
      			background-color:#ffffff;
      		}
      		#bodyCell{
      			border-top:0;
      		}
      		#templateContainer{
      			border:0;
      		}
      		h1{
      			color:#606060 !important;
      			display:block;
      			font-family:Helvetica;
      			font-size:40px;
      			font-style:normal;
      			font-weight:bold;
      			line-height:125%;
      			letter-spacing:-1px;
      			margin:0;
      			text-align:left;
      		}
      		h2{
      			color:#404040 !important;
      			display:block;
      			font-family:Helvetica;
      			font-size:26px;
      			font-style:normal;
      			font-weight:bold;
      			line-height:125%;
      			letter-spacing:-.75px;
      			margin:0;
      			text-align:left;
      		}
      		h3{
      			color:#606060 !important;
      			display:block;
      			font-family:Helvetica;
      			font-size:18px;
      			font-style:normal;
      			font-weight:bold;
      			line-height:125%;
      			letter-spacing:-.5px;
      			margin:0;
      			text-align:left;
      		}
      		h4{
      			color:#808080 !important;
      			display:block;
      			font-family:Helvetica;
      			font-size:16px;
      			font-style:normal;
      			font-weight:bold;
      			line-height:125%;
      			letter-spacing:normal;
      			margin:0;
      			text-align:left;
      		}
      		#templatePreheader{
      			background-color:#FFFFFF;
      			border-top:0;
      			border-bottom:0;
      		}
      		.preheaderContainer .mcnTextContent,.preheaderContainer .mcnTextContent p{
      			color:#606060;
      			font-family:Helvetica;
      			font-size:11px;
      			line-height:125%;
      			text-align:left;
      		}
      		.preheaderContainer .mcnTextContent a{
      			color:#606060;
      			font-weight:normal;
      			text-decoration:underline;
      		}
      		#templateHeader{
      			background-color:#FFFFFF;
      			border-top:0;
      			border-bottom:0;
      		}
      		.headerContainer .mcnTextContent,.headerContainer .mcnTextContent p{
      			color:#606060;
      			font-family:Helvetica;
      			font-size:15px;
      			line-height:150%;
      			text-align:left;
      		}
      		.headerContainer .mcnTextContent a{
      			color:#6DC6DD;
      			font-weight:normal;
      			text-decoration:underline;
      		}
      		#templateBody{
      			background-color:#FFFFFF;
      			border-top:0;
      			border-bottom:0;
      		}
      		.bodyContainer .mcnTextContent,.bodyContainer .mcnTextContent p{
      			color:#606060;
      			font-family:Helvetica;
      			font-size:15px;
      			line-height:150%;
      			text-align:left;
      		}
      		.bodyContainer .mcnTextContent a{
      			color:#6DC6DD;
      			font-weight:normal;
      			text-decoration:underline;
      		}
      		#templateFooter{
      			background-color:#FFFFFF;
      			border-top:0;
      			border-bottom:0;
      		}
      		.footerContainer .mcnTextContent,.footerContainer .mcnTextContent p{
      			color:#606060;
      			font-family:Helvetica;
      			font-size:11px;
      			line-height:125%;
      			text-align:left;
      		}
      		.footerContainer .mcnTextContent a{
      			color:#606060;
      			font-weight:normal;
      			text-decoration:underline;
      		}
      	@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){
      		td[id=bodyCell]{
      			padding:10px !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		table[class=mcnTextContentContainer]{
      			width:100% !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		.mcnBoxedTextContentContainer{
      			max-width:100% !important;
      			min-width:100% !important;
      			width:100% !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		table[class=mcpreview-image-uploader]{
      			width:100% !important;
      			display:none !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		img[class=mcnImage]{
      			width:100% !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		table[class=mcnImageGroupContentContainer]{
      			width:100% !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		td[class=mcnImageGroupContent]{
      			padding:9px !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		td[class=mcnImageGroupBlockInner]{
      			padding-bottom:0 !important;
      			padding-top:0 !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		tbody[class=mcnImageGroupBlockOuter]{
      			padding-bottom:9px !important;
      			padding-top:9px !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		table[class=mcnCaptionTopContent],table[class=mcnCaptionBottomContent]{
      			width:100% !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		table[class=mcnCaptionLeftTextContentContainer],table[class=mcnCaptionRightTextContentContainer],table[class=mcnCaptionLeftImageContentContainer],table[class=mcnCaptionRightImageContentContainer],table[class=mcnImageCardLeftTextContentContainer],table[class=mcnImageCardRightTextContentContainer]{
      			width:100% !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		td[class=mcnImageCardLeftImageContent],td[class=mcnImageCardRightImageContent]{
      			padding-right:18px !important;
      			padding-left:18px !important;
      			padding-bottom:0 !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		td[class=mcnImageCardBottomImageContent]{
      			padding-bottom:9px !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		td[class=mcnImageCardTopImageContent]{
      			padding-top:18px !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		td[class=mcnImageCardLeftImageContent],td[class=mcnImageCardRightImageContent]{
      			padding-right:18px !important;
      			padding-left:18px !important;
      			padding-bottom:0 !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		td[class=mcnImageCardBottomImageContent]{
      			padding-bottom:9px !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		td[class=mcnImageCardTopImageContent]{
      			padding-top:18px !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		table[class=mcnCaptionLeftContentOuter] td[class=mcnTextContent],table[class=mcnCaptionRightContentOuter] td[class=mcnTextContent]{
      			padding-top:9px !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		td[class=mcnCaptionBlockInner] table[class=mcnCaptionTopContent]:last-child td[class=mcnTextContent]{
      			padding-top:18px !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		td[class=mcnBoxedTextContentColumn]{
      			padding-left:18px !important;
      			padding-right:18px !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		td[class=mcnTextContent]{
      			padding-right:18px !important;
      			padding-left:18px !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		table[id=templateContainer],table[id=templatePreheader],table[id=templateHeader],table[id=templateBody],table[id=templateFooter]{
      			max-width:600px !important;
      			width:100% !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		h1{
      			font-size:24px !important;
      			line-height:125% !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		h2{
      			font-size:20px !important;
      			line-height:125% !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		h3{
      			font-size:18px !important;
      			line-height:125% !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		h4{
      			font-size:16px !important;
      			line-height:125% !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		table[class=mcnBoxedTextContentContainer] td[class=mcnTextContent],td[class=mcnBoxedTextContentContainer] td[class=mcnTextContent] p{
      			font-size:18px !important;
      			line-height:125% !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		table[id=templatePreheader]{
      			display:block !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		td[class=preheaderContainer] td[class=mcnTextContent],td[class=preheaderContainer] td[class=mcnTextContent] p{
      			font-size:14px !important;
      			line-height:115% !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		td[class=headerContainer] td[class=mcnTextContent],td[class=headerContainer] td[class=mcnTextContent] p{
      			font-size:18px !important;
      			line-height:125% !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		td[class=bodyContainer] td[class=mcnTextContent],td[class=bodyContainer] td[class=mcnTextContent] p{
      			font-size:18px !important;
      			line-height:125% !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		td[class=footerContainer] td[class=mcnTextContent],td[class=footerContainer] td[class=mcnTextContent] p{
      			font-size:9px !important;
      			line-height:115% !important;
      		}
      
      }	@media only screen and (max-width: 480px){
      		td[class=footerContainer] a[class=utilityLink]{
      			display:block !important;
      		}
      
      }
    </style>
  </head>
  
  <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0"
  style="margin: 0;padding: 0;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #ffffff;height: 100% !important;width: 100% !important;">
    <!-- -->
    <!--[if !gte mso 9]>
      <!----><span class="mcnPreviewText" style="display:none; font-size:0px; line-height:0px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; visibility:hidden; mso-hide:all;">summer is still going strong, introducing our late summer menu</span>
    <!--<![endif]-->
    <!-- -->
    <center>
      <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%"
      width="100%" id="bodyTable" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;background-color: #ffffff;height: 100% !important;width: 100% !important;">
        <tr>
          <td align="center" valign="top" id="bodyCell" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 20px;border-top: 0;height: 100% !important;width: 100% !important;">
            <!-- BEGIN TEMPLATE // -->
            <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer"
            style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;border: 0;">
              <tr>
                <td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                  <!-- BEGIN PREHEADER // -->
                  <table border="0" cellpadding="0" cellspacing="0" width="600" id="templatePreheader"
                  style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;min-width: 100%;background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
                    <tr>
                      <td valign="top" class="preheaderContainer" style="padding-top: 9px;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"></td>
                    </tr>
                  </table>
                  <!-- // END PREHEADER -->
                </td>
              </tr>
              <tr>
                <td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                  <!-- BEGIN HEADER // -->
                  <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader"
                  style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;min-width: 100%;background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
                    <tr>
                      <td valign="top" class="headerContainer" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                        <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCodeBlock"
                        style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                          <tbody class="mcnTextBlockOuter">
                            <tr>
                              <td valign="top" class="mcnTextBlockInner" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                <!-- Header Summer -->
                                <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                  <tbody>
                                    <tr>
                                      <td class="content-spacing" style="font-size: 0pt;line-height: 0pt;text-align: left;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"
                                      width="25"></td>
                                      <td class="header" style="padding: 30px 0 20px;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                          <tbody>
                                            <tr>
                                              <td class="logo" style="padding-bottom: 18px;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                <div class="img-center" style="font-size:0pt;line-height:0pt;text-align:center;">
                                                  <a href="#" target="_blank" style="word-wrap: break-word;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                    <img src="https://gallery.mailchimp.com/935cde8faa405d2d908226449/images/23e6b36b-d07a-4fc6-b218-8ed590bc8b39.jpg"
                                                    border="0" width="154" style="max-width: 154px;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
                                                    height="22" alt="">
                                                  </a>
                                                </div>
                                              </td>
                                            </tr>
                                            <tr>
                                              <td class="nav" align="center" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                <!-- Navigation -->
                                                <table border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                  <tbody>
                                                    <tr>
                                                      <td class="img" style="font-size: 0pt;line-height: 0pt;text-align: left;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"
                                                      valign="top">
                                                        <a href="#" target="_blank" style="word-wrap: break-word;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                          <img src="https://gallery.mailchimp.com/935cde8faa405d2d908226449/images/49448d45-d0aa-49a1-a463-5f418b0e622d.jpg"
                                                          border="0" width="57" style="max-width: 57px;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
                                                          height="11" alt="">
                                                        </a>
                                                      </td>
                                                      <td class="content-spacing" style="font-size: 0pt;line-height: 0pt;text-align: left;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"
                                                      width="40"></td>
                                                      <td class="img" style="font-size: 0pt;line-height: 0pt;text-align: left;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"
                                                      valign="top">
                                                        <a href="#" target="_blank" style="word-wrap: break-word;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                          <img src="https://gallery.mailchimp.com/935cde8faa405d2d908226449/images/38e579eb-b477-4991-a58a-52be4b6647fd.jpg"
                                                          border="0" width="69" style="max-width: 69px;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
                                                          height="27" alt="">
                                                        </a>
                                                      </td>
                                                      <td class="content-spacing" style="font-size: 0pt;line-height: 0pt;text-align: left;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"
                                                      width="40"></td>
                                                      <td class="img" style="font-size: 0pt;line-height: 0pt;text-align: left;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"
                                                      valign="top">
                                                        <a href="#" target="_blank" style="word-wrap: break-word;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                          <img src="https://gallery.mailchimp.com/935cde8faa405d2d908226449/images/6f90c938-6b61-44ab-a2f3-255f3e1849c4.jpg"
                                                          border="0" width="36" style="max-width: 36px;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
                                                          height="11" alt="">
                                                        </a>
                                                      </td>
                                                      <td class="content-spacing" style="font-size: 0pt;line-height: 0pt;text-align: left;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"
                                                      width="40"></td>
                                                      <td class="img" style="font-size: 0pt;line-height: 0pt;text-align: left;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"
                                                      valign="top">
                                                        <a href="#" target="_blank" style="word-wrap: break-word;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                          <img src="https://gallery.mailchimp.com/935cde8faa405d2d908226449/images/0c7a6cd9-6b16-4c63-ae3f-454b7002af47.jpg"
                                                          border="0" width="58" style="max-width: 58px;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
                                                          height="11" alt="">
                                                        </a>
                                                      </td>
                                                    </tr>
                                                  </tbody>
                                                </table>
                                                <!-- END Navigation -->
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                      <td class="content-spacing" style="font-size: 0pt;line-height: 0pt;text-align: left;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"
                                      width="25"></td>
                                    </tr>
                                  </tbody>
                                </table>
                                <!-- END Header Summer -->
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </table>
                  <!-- // END HEADER -->
                </td>
              </tr>
              <tr>
                <td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                  <!-- BEGIN BODY // -->
                  <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody"
                  style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;min-width: 100%;background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
                    <tr>
                      <td valign="top" class="bodyContainer" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                        <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageBlock"
                        style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                          <tbody class="mcnImageBlockOuter">
                            <tr>
                              <td valign="top" style="padding: 0px;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"
                              class="mcnImageBlockInner">
                                <table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer"
                                style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                  <tbody>
                                    <tr>
                                      <td class="mcnImageContent" valign="top" style="padding-right: 0px;padding-left: 0px;padding-top: 0;padding-bottom: 0;text-align: center;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                        <a href="https://order.sweetgreen.com/?utm_source=sweetgreen+vip&utm_campaign=ff499a0a49-s4_launch_East_Coast_CHI_minus_DMV&utm_medium=email&utm_term=0_e1d0c747e3-ff499a0a49-22919645"
                                        title="" class="" target="_blank" style="word-wrap: break-word;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                          <img align="center" alt="" src="https://gallery.mailchimp.com/935cde8faa405d2d908226449/images/7b473867-a984-444e-b450-c2124baffd9c.jpg"
                                          width="600" style="max-width: 1200px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
                                          class="mcnImage">
                                        </a>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </table>
                  <!-- // END BODY -->
                </td>
              </tr>
              <tr>
                <td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                  <!-- BEGIN FOOTER // -->
                  <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateFooter"
                  style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;min-width: 100%;background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
                    <tr>
                      <td valign="top" class="footerContainer" style="padding-bottom: 9px;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                        <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCodeBlock"
                        style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                          <tbody class="mcnTextBlockOuter">
                            <tr>
                              <td valign="top" class="mcnTextBlockInner" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                <!-- Footer Green -->
                                <div>
                                  <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#1f4f46"
                                  style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                    <tbody>
                                      <tr>
                                        <td class="footer-green" style="padding: 50px 0 40px;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                          <!-- Footer Green -->
                                          <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                            <tbody>
                                              <tr>
                                                <td style="padding-bottom: 30px;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                  <div class="img-center" style="font-size:0pt;line-height:0pt;text-align:center;">
                                                    <img src="https://gallery.mailchimp.com/935cde8faa405d2d908226449/images/25039009-1a02-45a4-9ec9-75754ebda185.jpg"
                                                    border="0" width="269" style="max-width: 269px;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
                                                    height="16" alt="">
                                                  </div>
                                                </td>
                                              </tr>
                                              <tr>
                                                <td style="padding-bottom: 30px;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"
                                                align="center">
                                                  <table border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                    <tbody>
                                                      <tr>
                                                        <td class="icon" style="font-size: 0pt;line-height: 0pt;text-align: left;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                          <a href="https://www.instagram.com/sweetgreen/?utm_campaign=ff499a0a49-s4_launch_East_Coast_CHI_minus_DMV&utm_medium=email&utm_source=sweetgreen+vip&utm_term=0_e1d0c747e3-ff499a0a49-22919645"
                                                          target="_blank" style="word-wrap: break-word;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                            <img src="https://gallery.mailchimp.com/935cde8faa405d2d908226449/images/eb3cf101-cd69-47ce-879d-a5c9b8bd02e7.jpg"
                                                            border="0" width="41" style="max-width: 41px;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
                                                            height="40" alt="">
                                                          </a>
                                                        </td>
                                                        <td class="content-spacing" style="font-size: 0pt;line-height: 0pt;text-align: left;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"
                                                        width="20"></td>
                                                        <td class="icon" style="font-size: 0pt;line-height: 0pt;text-align: left;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                          <a href="https://www.facebook.com/sweetgreen?utm_campaign=ff499a0a49-s4_launch_East_Coast_CHI_minus_DMV&utm_medium=email&utm_source=sweetgreen+vip&utm_term=0_e1d0c747e3-ff499a0a49-22919645"
                                                          target="_blank" style="word-wrap: break-word;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                            <img src="https://gallery.mailchimp.com/935cde8faa405d2d908226449/images/a8167fa3-2085-45db-8f70-179625ffdbb6.jpg"
                                                            border="0" width="41" style="max-width: 41px;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
                                                            height="40" alt="">
                                                          </a>
                                                        </td>
                                                        <td class="content-spacing" style="font-size: 0pt;line-height: 0pt;text-align: left;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"
                                                        width="20"></td>
                                                        <td class="icon" style="font-size: 0pt;line-height: 0pt;text-align: left;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                          <a href="https://twitter.com/sweetgreen?utm_campaign=ff499a0a49-s4_launch_East_Coast_CHI_minus_DMV&utm_medium=email&utm_source=sweetgreen+vip&utm_term=0_e1d0c747e3-ff499a0a49-22919645"
                                                          target="_blank" style="word-wrap: break-word;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                            <img src="https://gallery.mailchimp.com/935cde8faa405d2d908226449/images/4596ff9e-e93b-45eb-822b-a33932878e2a.jpg"
                                                            border="0" width="41" style="max-width: 41px;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
                                                            height="40" alt="">
                                                          </a>
                                                        </td>
                                                        <td class="content-spacing" style="font-size: 0pt;line-height: 0pt;text-align: left;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"
                                                        width="20"></td>
                                                        <td class="icon" style="font-size: 0pt;line-height: 0pt;text-align: left;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                          <a href="https://sweetgreen.tumblr.com/?utm_source=sweetgreen+vip&utm_campaign=ff499a0a49-s4_launch_East_Coast_CHI_minus_DMV&utm_medium=email&utm_term=0_e1d0c747e3-ff499a0a49-22919645"
                                                          target="_blank" style="word-wrap: break-word;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                            <img src="https://gallery.mailchimp.com/935cde8faa405d2d908226449/images/ed9d5484-b92c-4962-8284-e241d1060b56.jpg"
                                                            border="0" width="41" style="max-width: 41px;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
                                                            height="40" alt="">
                                                          </a>
                                                        </td>
                                                        <td class="content-spacing" style="font-size: 0pt;line-height: 0pt;text-align: left;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"
                                                        width="20"></td>
                                                        <td class="icon" style="font-size: 0pt;line-height: 0pt;text-align: left;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                          <a href="http://www.youtube.com/sweetgreen?utm_campaign=ff499a0a49-s4_launch_East_Coast_CHI_minus_DMV&utm_medium=email&utm_source=sweetgreen+vip&utm_term=0_e1d0c747e3-ff499a0a49-22919645"
                                                          target="_blank" style="word-wrap: break-word;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                            <img src="https://gallery.mailchimp.com/935cde8faa405d2d908226449/images/cc1831f3-5c07-4f68-b259-46b2c80d9f7f.jpg"
                                                            border="0" width="41" style="max-width: 41px;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
                                                            height="40" alt="">
                                                          </a>
                                                        </td>
                                                        <td class="content-spacing" style="font-size: 0pt;line-height: 0pt;text-align: left;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"
                                                        width="20"></td>
                                                        <td class="icon" style="font-size: 0pt;line-height: 0pt;text-align: left;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                          <a href="https://www.snapchat.com/add/sweetgreen?utm_source=sweetgreen+vip&utm_campaign=ff499a0a49-s4_launch_East_Coast_CHI_minus_DMV&utm_medium=email&utm_term=0_e1d0c747e3-ff499a0a49-22919645"
                                                          target="_blank" style="word-wrap: break-word;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                            <img src="https://gallery.mailchimp.com/935cde8faa405d2d908226449/images/b5274c17-c382-423e-99c2-38f607480113.jpg"
                                                            border="0" width="41" style="max-width: 41px;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
                                                            height="40" alt="">
                                                          </a>
                                                        </td>
                                                      </tr>
                                                    </tbody>
                                                  </table>
                                                </td>
                                              </tr>
                                              <tr>
                                                <td style="padding-bottom: 30px;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                  <div class="footer-text-2" style="color:#ffffff;font-family:Arial, sans-serif, Montserrat;font-size:10px;line-height:16px;text-align:center;">
                                                    <div>8840 washington blvd, culver city, ca 90232
                                                      <br>if you prefer not to receive these emails, you can
                                                      <a href="#"
                                                      target="_blank" class="link-green-u" style="color: #00a180;text-decoration: underline;word-wrap: break-word;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"><span class="link-green-u" style="color:#00a180; text-decoration:underline">unsubscribe</span>
                                                      </a>.
                                                      <br>copyright © 2017 sweetgreen</div>
                                                  </div>
                                                </td>
                                              </tr>
                                              <tr>
                                                <td style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                  <div class="img-center" style="font-size:0pt;line-height:0pt;text-align:center;">
                                                    <a href="#" target="_blank" style="word-wrap: break-word;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                      <img src="https://gallery.mailchimp.com/935cde8faa405d2d908226449/images/e8c62840-76b8-4029-b905-872e990f5aee.jpg"
                                                      border="0" width="43" style="max-width: 43px;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
                                                      height="30" alt="">
                                                    </a>
                                                  </div>
                                                </td>
                                              </tr>
                                            </tbody>
                                          </table>
                                          <!-- END Footer Green -->
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </table>
                  <!-- // END FOOTER -->
                </td>
              </tr>
            </table>
            <!-- // END TEMPLATE -->
          </td>
        </tr>
      </table>
    </center>
    
  </body>

</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console