Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

JavaScript

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

Add External Scripts/Pens

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

+ add another resource

Behavior

Save Automatically?

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

Auto-Updating Preview

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML Settings

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

HTML

              
                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 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>hey, what's up farro ;)</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;">
      <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="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="http://www.sweetgreen.com?utm_source=sweetgreen+-+never+miss+a+beet&utm_campaign=751853c070-&utm_medium=email&utm_term=0_653a41a842-751853c070-20272725" 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/5846416b-a61f-42be-a136-9d293d2ca4eb.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>
                      <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="http://www.sweetgreen.com/food-ethos/?utm_source=sweetgreen+-+never+miss+a+beet&utm_campaign=751853c070-&utm_medium=email&utm_term=0_653a41a842-751853c070-20272725" 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/315f680c-1593-4e07-95de-85c729232702.jpeg" width="600" style="max-width: 1195px;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="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="http://www.sweetgreen.com/menu/?utm_source=sweetgreen+-+never+miss+a+beet&utm_campaign=751853c070-&utm_medium=email&utm_term=0_653a41a842-751853c070-20272725" 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/73a6f1b3-2e22-4d03-9267-e227f97c2946.jpeg" width="600" style="max-width: 1196px;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 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://itunes.apple.com/us/app/sweetgreen/id594329490?mt=8&utm_source=sweetgreen+-+never+miss+a+beet&utm_campaign=751853c070-&utm_medium=email&utm_term=0_653a41a842-751853c070-20272725" 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/20cd5a52-a71a-48eb-9ddb-bc2b4ac8e8d8.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="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://itunes.apple.com/us/app/sweetgreen/id594329490?mt=8&utm_source=sweetgreen+-+never+miss+a+beet&utm_campaign=751853c070-&utm_medium=email&utm_term=0_653a41a842-751853c070-20272725" 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/5ab39bca-7773-4506-8f63-f8c3880049b0.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>
                      <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://play.google.com/store/apps/details?id=com.sweetgreen.android.app&hl=en&utm_source=sweetgreen+-+never+miss+a+beet&utm_campaign=751853c070-&utm_medium=email&utm_term=0_653a41a842-751853c070-20272725" 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/c7bedae3-d5a5-460d-9401-deaa26dc6f68.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>
                      <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&utm_medium=email&utm_source=sweetgreen+vip&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: none;"
                                            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&utm_medium=email&utm_source=sweetgreen+vip&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: none;"
                                            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&utm_medium=email&utm_source=sweetgreen+vip&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: none;"
                                            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>welcome to the family
                                          <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;">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>
                </table>
                <!-- // END FOOTER -->
              </td>
            </tr>
          </table>
          <!-- // END TEMPLATE -->
        </td>
      </tr>
    </table>
  </center>
  <img src="http://sweetgreen.us5.list-manage.com/track/open.php?u=935cde8faa405d2d908226449&id=751853c070&e=47cb115bfa" height="1" width="1">
</body>

</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console