<mjml>
  <mj-body background-color="#d6dde5">
    <mj-section padding-bottom="20px" padding-top="20px">
      <mj-column width="66.66666666666666%" vertical-align="middle">
        <mj-text align="left" color="#000000" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="11px" padding-left="25px" padding-right="25px" padding-bottom="0px" padding-top="0"><span style="font-size: 11px">We've got some news to share</span></mj-text>
      </mj-column>
      <mj-column width="33.33333333333333%" vertical-align="middle">
        <mj-text align="right" color="#000000" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="11px" padding-left="25px" padding-right="25px" padding-bottom="0px" padding-top="0"><span style="font-size: 11px">{webview_text}</span></mj-text>
      </mj-column>
    </mj-section>

    <mj-section background-color="#ffffff" background-url="{{ getAssetUrl('themes/'~template~'/assets/brienzlake.jpeg', null, null, true) }}" padding-bottom="20px" padding-top="0">
      <mj-column width="100%" vertical-align="top">
        <mj-text align="center" color="#000000" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="13px" padding-left="25px" padding-right="25px" padding-bottom="0px" padding-top="20px">
          <p><span style="font-size: 16px;"><a href="#" style="text-decoration: none; color: inherit;"><span style="font-weight: bold;"><span style="color: white;">Check out our blog:</span></span>
            </a>
          </p>
          <p><span style="font-weight: bold;color: white;"><span style="font-size: 16px;"></span>
          </p>
          <p><span style="font-size: 28px;"><a href="#" style="text-decoration: none; color: inherit;"><span style="font-weight: bold;"><span style="color: white;">We are half way there!</span></span>
            </a>
            </span>
          </p>
          <p><span style="font-weight: bold;color:white;font-size: 27px;">See our progress!</span>
          </p>
        </mj-text>
        <mj-button background-color="#9E094E" color="#FFFFFF" font-size="15px" align="center" vertical-align="middle" border="none" padding="15px 30px" border-radius="3px" href="#" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif"
          padding-left="25px" padding-right="25px" padding-bottom="10px" padding-top="70px">MORE UPDATES</mj-button>
      </mj-column>
    </mj-section>
    <mj-section background-color="#ffffff" padding-bottom="10px" padding-top="20px">
      <mj-column width="100%" vertical-align="top">
        <mj-text align="left" color="#000000" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="13px" padding-left="25px" padding-right="25px" padding-bottom="0px" padding-top="0">
          <p><span style="color: #404040;"><span style="font-weight: bold;"><span style="font-size: 16px;">This is an eyecatching headline</span></span>
            </span>
          </p>
        </mj-text>
        <mj-text align="justify" color="#000000" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="13px" padding-left="25px" padding-right="25px" padding-bottom="0px" padding-top="0px" line-height="1.5">
          <p><span style="color: rgb(57, 63, 76);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus. Sed eget nulla elit. Nulla aliquet mollis faucibus.</span></p>
        </mj-text>
        <mj-button background-color="#486AE2" color="#FFFFFF" font-size="13px" align="center" vertical-align="middle" border="none" padding="15px 30px" border-radius="3px" href="#" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif"
          padding-left="25px" padding-right="25px" padding-bottom="10px" padding-top="0px">READ MORE</mj-button>
      </mj-column>
    </mj-section>
    <mj-section background-color="#ffffff" padding-bottom="20px" padding-top="20px">
      <mj-column width="100%" vertical-align="top">
        <mj-image src="{{ getAssetUrl('themes/'~template~'/assets/brienz.jpeg', null, null, true) }}" alt="Lake of Brienz - Switzerland" align="center" border="none" width="550px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0">
        </mj-image>
      <mj-text align="justify" color="#000000" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="13px" padding-left="25px" padding-right="25px" padding-bottom="0px" padding-top="0px" line-height="1.5">
          <p><span style="color: rgb(57, 63, 76);" line-height="1.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus. Sed eget nulla elit. Nulla aliquet mollis faucibus.</span></p>
        </mj-text>
        <mj-button background-color="#486AE2" color="#FFFFFF" font-size="13px" align="center" vertical-align="middle" border="none" padding="15px 30px" border-radius="3px" href="#" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif"
          padding-left="25px" padding-right="25px" padding-bottom="10px" padding-top="0px">READ MORE</mj-button>
    </mj-column></mj-section> 
       <mj-section background-color="#ffffff" padding-bottom="20px" padding-top="20px">
      <mj-column width="50%" vertical-align="top">
        <mj-image src="{{ getAssetUrl('themes/'~template~'/assets/sign.jpeg', null, null, true) }}" alt="At the Top Of The Rothorn" align="center" border="none" width="260px" padding-left="10px" padding-right="10px" padding-bottom="0px" padding-top="0">
        </mj-image>
      <mj-text align="justify" color="#000000" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="13px" padding-left="25px" padding-right="25px" padding-bottom="0px" padding-top="0" line-height="1.5">
          <p><span style="color: rgb(57, 63, 76);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus. Sed eget nulla elit. Nulla aliquet mollis faucibus.</span></p>
        </mj-text>
        <mj-button background-color="#486AE2" color="#FFFFFF" font-size="13px" align="center" vertical-align="middle" border="none" padding="15px 30px" border-radius="3px" href="#" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif"
          padding-left="25px" padding-right="25px" padding-bottom="10px" padding-top="10px">READ MORE</mj-button>
    </mj-column>
    <mj-column width="50%" vertical-align="top">
        <mj-image src="{{ getAssetUrl('themes/'~template~'/assets/jungfrau.jpeg', null, null, true) }}" alt="Snow Covered Jungraujoch" align="center" border="none" width="260px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0px">
        </mj-image>
      <mj-text align="justify" color="#000000" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="13px" padding-left="25px" padding-right="25px" padding-bottom="10px" padding-top="0px" line-height="1.5">
          <p><span style="color: rgb(57, 63, 76);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus. Sed eget nulla elit. Nulla aliquet mollis faucibus.</span></p>
        </mj-text>
        <mj-button background-color="#486AE2" color="#FFFFFF" font-size="13px" align="center" vertical-align="middle" border="none" padding="15px 30px" border-radius="3px" href="#" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif"
          padding-left="25px" padding-right="25px" padding-bottom="10px" padding-top="0px">READ MORE</mj-button>
    </mj-column></mj-section>
    <mj-section background-color="#486AE2" padding-bottom="0px" padding-top="0">
      <mj-column width="100%" vertical-align="top">
        <mj-social padding-top="20px">
          <mj-social-element name="facebook" href="[[SHORT_PERMALINK]]"> </mj-social-element>
          <mj-social-element name="twitter" href="[[SHORT_PERMALINK]]"> </mj-social-element>
          <mj-social-element name="google" href="[[SHORT_PERMALINK]]"> </mj-social-element>
        </mj-social>
      </mj-column>
    </mj-section>
    <mj-section background-color="#486AE2" padding-bottom="0px" padding-top="0">
      <mj-column width="25%" vertical-align="top"></mj-column>
      <mj-column width="50%" vertical-align="top">
        <mj-text align="center" color="#000000" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="13px" padding-left="25px" padding-right="25px" padding-bottom="10px" padding-top="0px" line-height="1.2">
          <p><span style="font-weight: bold;"><span style="color: white;">Amazing Company</span></span></p>
          <p><span style="color: white;">11111 Beautiful City, 1212 Nice Street</span></p>
        </mj-text>
      </mj-column>
      <mj-column width="25%" vertical-align="top"></mj-column>
    </mj-section>
    <mj-section padding-bottom="20px" padding-top="20px">
      <mj-column width="100%" vertical-align="middle">
        <mj-text align="center" color="#000000" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="11px" padding-left="25px" padding-right="25px" padding-bottom="0px" padding-top="0">
          <p style="font-size:11px">{unsubscribe_text}</p>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
