Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

JavaScript

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

Add External Scripts/Pens

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

+ add another resource

Behavior

Save Automatically?

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

Auto-Updating Preview

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML Settings

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

HTML

            
              <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>🌡 temps are dropping, but we’re bringing the heat</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;
    		}
    		.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;">
  <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;">
      <tbody>
        <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;">
              <tbody>
                <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;">
                      <tbody>
                        <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>
                      </tbody>
                    </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;">
                      <tbody>
                        <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="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&amp;utm_campaign=7f1793adb1-Weather_Email_ALL_East+Coast_CHI_2016_12_19&amp;utm_medium=email&amp;utm_term=0_e1d0c747e3-7f1793adb1-20305709" 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/7492adda-1fc4-4411-a38e-cb50b3d89054.gif" 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>
                      </tbody>
                    </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;">
                      <tbody>
                        <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&amp;utm_campaign=7f1793adb1-Weather_Email_ALL_East+Coast_CHI_2016_12_19&amp;utm_medium=email&amp;utm_term=0_e1d0c747e3-7f1793adb1-20305709" 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/a76ea050-2ce6-44bf-89af-7fed6a1ef9af.png" 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>
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnDividerBlock" 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="mcnDividerBlockOuter">
                                <tr>
                                  <td class="mcnDividerBlockInner" style="min-width: 100%;padding: 18px;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                    <table class="mcnDividerContent" border="0" cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%;border-top: 2px none #EAEAEA;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="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                            <span></span>
                                          </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                    <!--
                <td class="mcnDividerBlockInner" style="padding: 18px;">
                <hr class="mcnDividerContent" style="border-bottom-color:none; border-left-color:none; border-right-color:none; border-bottom-width:0; border-left-width:0; border-right-width:0; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0;" />
-->
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </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;">
                      <tbody>
                        <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="mcnTextBlock" 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="mcnTextBlockOuter">
                                <tr>
                                  <td valign="top" class="mcnTextBlockInner" style="padding-top: 9px;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                    <!--[if mso]>
				<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
				<tr>
				<![endif]-->

                                    <!--[if mso]>
				<td valign="top" width="600" style="width:600px;">
				<![endif]-->
                                    <table align="left" border="0" cellpadding="0" cellspacing="0" style="max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" width="100%" class="mcnTextContentContainer">
                                      <tbody>
                                        <tr>

                                          <td valign="top" class="mcnTextContent" style="padding-top: 0;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #606060;font-family: Helvetica;font-size: 11px;line-height: 125%;text-align: left;">

                                            <center>
                                              <div style="font-family:arial,helvetica neue,helvetica,sans-serif; font-size:10px; text-align:center">
                                                <a href="https://www.facebook.com/sweetgreen?utm_campaign=5491eef0d4-sweetlife_2014-merch&amp;utm_medium=email&amp;utm_source=sweetgreen+vip&amp;utm_term=0_e1d0c747e3-5491eef0d4-16025161" style="color: #606060;font-family: Helvetica;font-size: 11px;line-height: 13.75px;text-align: -webkit-center;word-wrap: break-word;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-weight: normal;text-decoration: underline;"
                                                  target="_blank"><img align="none" border="0" src="https://ci4.googleusercontent.com/proxy/wgudqZfC8YapDg8pojxuJ-pTO6yRZU46FssZSgCBLuwajfVDbwpolPrABr6CrhozAGnQRKFyLKC8LQZO0Yj-Kp985BaZd5ri48iUbxaWv6IiXmmAXk96DHvpXmEfa0ONtD71Yj_fzEWh_6km027xuexgdAvGjGfFmXKsJQ=s0-d-e1-ft#http://gallery.mailchimp.com/935cde8faa405d2d908226449/images/3f09e56d-6c68-4bd8-9c83-f83c8bbea1d9.png"
                                                    style="width: 22.546875px;margin: 2px;border: 0px;outline: none;text-decoration: none;line-height: 11px;-ms-interpolation-mode: bicubic;height: auto !important;"></a><span style="color: #606060;font-family: helvetica;font-size: 11px;line-height: 13.75px;text-align: -webkit-center;">&nbsp;</span>
                                                <a
                                                  href="https://www.instagram.com/sweetgreen/?utm_campaign=5491eef0d4-sweetlife_2014-merch&amp;utm_medium=email&amp;utm_source=sweetgreen+vip&amp;utm_term=0_e1d0c747e3-5491eef0d4-16025161" style="color: #606060;font-family: Helvetica;font-size: 11px;line-height: 13.75px;text-align: -webkit-center;word-wrap: break-word;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-weight: normal;text-decoration: underline;"
                                                  target="_blank"><img align="none" border="0" src="https://ci5.googleusercontent.com/proxy/Dzguft5UI7aHhuR-7wV9e1OQCUrsM_-zZVitoXSY0yO0LL9b8Vf8Iarj_-pd7SXYl6NxVWkHPnu0S8HZmvvUEzKUb15VotDFrFga93GHhkOBNosbyW6fzumuRJHWHmKZPcBmncp1px378NVU4oQ5gn6AzUC9ydICC6gxVg=s0-d-e1-ft#http://gallery.mailchimp.com/935cde8faa405d2d908226449/images/fcf9dbda-b7d4-4b22-9edd-2276ac5300a7.png"
                                                    style="line-height: 1.6em;text-align: left;width: 22.546875px;margin: 2px;border: 0px;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;height: auto !important;"></a><span style="color: #606060;font-family: helvetica;font-size: 11px;line-height: 13.75px;text-align: -webkit-center;">&nbsp;</span>
                                                  <a
                                                    href="https://twitter.com/sweetgreen?utm_campaign=5491eef0d4-sweetlife_2014-merch&amp;utm_medium=email&amp;utm_source=sweetgreen+vip&amp;utm_term=0_e1d0c747e3-5491eef0d4-16025161" style="color: #606060;font-family: Helvetica;font-size: 11px;line-height: 1.6em;word-wrap: break-word;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-weight: normal;text-decoration: underline;"
                                                    target="_blank"><img align="none" border="0" src="https://ci4.googleusercontent.com/proxy/_AbGIeLqbKt9WjdlTYXic33UkiWPUo7Ze8kju4Vb3NE-iK0vxX8YtO2CguPn1wOo5VPF52ovauGDy6WZwKHH56mCPUV7GyS9oT5U_5UYg7ofXAv6QwWzEgIAKJqQr6VV9mvG3X8-PpjmnHyFAAZ3mGSJjScgUDVseCi76Q=s0-d-e1-ft#http://gallery.mailchimp.com/935cde8faa405d2d908226449/images/6c3eb381-e2af-49bf-85eb-130539e5bbd3.png"
                                                      style="width: 22.546875px;margin: 2px;border: 0px;outline: none;text-decoration: none;line-height: 11px;-ms-interpolation-mode: bicubic;height: auto !important;"></a><br> warm up with a warm bowl<br>                                                    copyright © 2016 sweetgreen<br> 8840 washington blvd, culver city, ca 90232</div>
                                              <a class="utilityLink" href="#" style="font-family: arial, 'helvetica neue', helvetica, sans-serif;font-size: 10px;text-align: center;word-wrap: break-word;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #606060;font-weight: normal;text-decoration: underline;"
                                                target="_blank">unsubscribe</a><span style="font-family:arial,helvetica neue,helvetica,sans-serif; font-size:10px; text-align:center">&nbsp;|&nbsp;</span><a href="#"
                                                style="font-family: arial, 'helvetica neue', helvetica, sans-serif;font-size: 10px;text-align: center;word-wrap: break-word;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #606060;font-weight: normal;text-decoration: underline;"
                                                target="_blank">view in browser</a></center>

                                          </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                    <!--[if mso]>
				</td>
				<![endif]-->

                                    <!--[if mso]>
				</tr>
				</table>
				<![endif]-->
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <!-- // END FOOTER -->
                  </td>
                </tr>
              </tbody>
            </table>
            <!-- // END TEMPLATE -->
          </td>
        </tr>
      </tbody>
    </table>
  </center>
  <img src="http://sweetgreen.us5.list-manage.com/track/open.php?u=935cde8faa405d2d908226449&amp;id=7f1793adb1&amp;e=b62691fbc9" height="1" width="1">
</body>
            
          
!

CSS

            
              
            
          
!

JS

            
              
            
          
!
999px

Console