linguist/samples/XML/real-estate.mjml

<mjml>
  <mj-head>
    <mj-title>Say hello to RealEstate</mj-title>
    <mj-font name="Roboto" href="https://fonts.googleapis.com/css?family=Alice" />
    <mj-font name="Roboto" href="https://fonts.googleapis.com/css?family=Roboto:400,700" />
    <mj-attributes>
      <mj-all font-family="Roboto, Helvetica, Arial, sans-serif" padding="0" />
      <mj-text font-weight="400" font-size="14" color="#000000" line-height="21px" />
    </mj-attributes>
  </mj-head>

  <mj-body>
    <mj-container background-color="#EAE8E5">

      <mj-section padding="20px 0 0 0">
        <mj-column>
          <mj-image src="http://nimus.de/share/tpl-realestate/box-head.png" alt="" align="center" border="none" padding="0"></mj-image>
        </mj-column>
      </mj-section>

      <mj-section padding-top="40px" background-color="#FFFFFF">
        <mj-column width="570px">
          <mj-text align="left" padding="0 20px" color="#1D83A8" font-size="36" line-height="40px" font-family="Alice, Helvetica, Arial, sans-serif">
            Real Estate
          </mj-text>
          <mj-text align="left" padding="0 20px">
            <strong><span style="font-size: 40px;">⚊</span></strong><br /><br /></mj-text>
        </mj-column>
      </mj-section>

      <mj-section background-color="#FFFFFF">
        <mj-column width="300px">
          <mj-text align="left" padding="0 20px 30px 20px">
            <strong>Aliquam lorem ante, dapibus in hasellus viverra nulla</strong> ut metus varius laoreet. Quisque rutrum lorem dellorus. Aenean imperdiet.
          </mj-text>
        </mj-column>
        <mj-column width="260px">
          <mj-image src="http://nimus.de/share/tpl-realestate/icon-1.png" alt="" padding-bottom="30px" width="260" align="center" border="none"></mj-image>
        </mj-column>
      </mj-section>

      <mj-section background-url="http://nimus.de/share/tpl-realestate/img-1.png" vertical-align="middle" background-size="cover" padding="30px" background-repeat="no-repeat">
        <mj-column vertical-align="middle" width="60%">
          <mj-text align="center" padding="40px 30px" color="#FFFFFF" font-size="42px" line-height="48px" font-family="Alice, Helvetica, Arial, sans-serif">
            Villa Semperin
          </mj-text>
        </mj-column>
        <mj-column vertical-align="middle" width="40%" background-color="#FFFFFF">
          <mj-image src="http://nimus.de/share/tpl-realestate/box-top.png" width="220px" alt="" align="center" border="none"></mj-image>
          <mj-text align="center" padding="20px 20px 0 20px" color="#1D83A8" font-size="26" line-height="30px" font-family="Alice, Helvetica, Arial, sans-serif">
            – first offer –
          </mj-text>
          <mj-text align="center" padding="10px 20px" font-size="22" line-height="30px">340,000 $</mj-text>
          <mj-text align="center" padding="0 20px">Nascetur ridiculus mus. Donec quam felis, ultricies nec</mj-text>
          <mj-button background-color="#F44E3C" color="white" padding="20px 20px 30px 20px" border-radius="20px">
            view details
          </mj-button>
        </mj-column>
      </mj-section>


      <mj-section padding="30px" background-color="#FFFFFF">
        <mj-column width="60%">
          <mj-text align="center" padding-bottom="20px" font-size="26" line-height="30px" font-family="Alice, Helvetica, Arial, sans-serif">
            Lorem Ipsum
          </mj-text>
          <mj-text align="center" padding="0 40px">
            Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Lorem Ipsum
          </mj-text>
          <mj-image src="http://nimus.de/share/tpl-realestate/icon-2.png" alt="" padding="30px 0 10px 0" width="50" align="center" border="none"></mj-image>
        </mj-column>
        <mj-column width="40%" background-color="#FFFFFF">
          <mj-image src="http://nimus.de/share/tpl-realestate/img-2.png" width="216px" alt="" align="center" border="none"></mj-image>
        </mj-column>
      </mj-section>

      <mj-section padding="20px" background-color="#FFFFFF">
        <mj-column width="100%">
          <mj-image src="http://nimus.de/share/tpl-realestate/symbol-1.png" alt="" width="292px" align="left" border="none"></mj-image>
        </mj-column>
      </mj-section>

      <mj-section padding="0 20px" background-color="#FFFFFF">
        <mj-column>
          <mj-text align="center" font-size="26" line-height="30px" font-family="Alice, Helvetica, Arial, sans-serif">
            Lorem Ipsum
          </mj-text>
          <mj-divider width="20px" padding="20px 0" border-width="2px" border-color="#000000" />
          <mj-text align="center" padding="0 40px">
            Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Lorem Ipsum
          </mj-text>
          <mj-button background-color="#F44E3C" color="white" padding="20px 20px 10px 20px" border-radius="20px">
            Call to action
          </mj-button>
        </mj-column>
      </mj-section>

      <mj-section padding="20px" background-color="#FFFFFF">
        <mj-column width="100%">
          <mj-image src="http://nimus.de/share/tpl-realestate/symbol-2.png" alt="" width="213px" align="right" border="none"></mj-image>
        </mj-column>
      </mj-section>


      <mj-section padding="0 30px 30px" background-color="#FFFFFF">
        <mj-column width="55%">
          <mj-image src="http://nimus.de/share/tpl-realestate/img-3.png" width="280px" padding-bottom="20px" alt="" align="center" border="none"></mj-image>
        </mj-column>
        <mj-column width="45%" background-color="#FFFFFF">
          <mj-text align="center" padding-bottom="20px" font-size="26" line-height="30px" font-family="Alice, Helvetica, Arial, sans-serif">
            Lorem Ipsum
          </mj-text>
          <mj-text align="center" padding="0 40px">
            Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
          </mj-text>
          <mj-image src="http://nimus.de/share/tpl-realestate/icon-3.png" alt="" padding="30px 0 10px 0" width="50" align="center" border="none"></mj-image>
        </mj-column>
      </mj-section>

      <mj-section padding="0 20px" background-color="#FFFFFF">
        <mj-column>
          <mj-text align="center" font-size="26" line-height="30px" font-family="Alice, Helvetica, Arial, sans-serif">
            Nullam dictum felis eu pede
          </mj-text>
          <mj-divider width="20px" padding="20px 0" border-width="2px" border-color="#000000" />
        </mj-column>
      </mj-section>

      <mj-section padding="0 20px 30px" background-color="#FFFFFF">
        <mj-column width="33%">
          <mj-text align="left" padding="0 15px 15px">
            <strong>Aliquam lorem ante,</strong> dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Lorem Ipsum
          </mj-text>
        </mj-column>
        <mj-column width="34%">
          <mj-text align="left" padding="0 15px 15px">
            <strong>Phasellus viverra null aliquam lorem ante</strong>, dapibus in, viverra quis, feugiat a, tellus ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Lorem Ipsum
          </mj-text>
        </mj-column>
        <mj-column width="33%">
          <mj-text align="left" padding="0 15px 15px">
            <strong>Quisque rutrum.</strong> Aenean imperdiet viverra nulla ut metus varius laoreet. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Lorem Ipsum
          </mj-text>
        </mj-column>
      </mj-section>

      <mj-section background-url="http://nimus.de/share/tpl-realestate/img-4.png" vertical-align="middle" background-size="cover" padding="30px" background-repeat="no-repeat">
        <mj-column vertical-align="middle" width="40%" background-color="#FFFFFF">
          <mj-image src="http://nimus.de/share/tpl-realestate/box-top.png" width="220px" alt="" align="center" border="none"></mj-image>
          <mj-text align="center" padding="20px 20px 0 20px" color="#1D83A8" font-size="26" line-height="30px" font-family="Alice, Helvetica, Arial, sans-serif">
            – 2. offer –
          </mj-text>
          <mj-text align="center" padding="10px 20px" font-size="22" line-height="30px">198,700 $</mj-text>
          <mj-text align="center" padding="0 20px">Donec quam felis, ultricies Nascetur ridiculus mus.</mj-text>
          <mj-button background-color="#F44E3C" color="white" padding="20px 20px 30px 20px" border-radius="20px">
            view details
          </mj-button>
        </mj-column>
        <mj-column vertical-align="middle" width="60%">
          <mj-text align="center" padding="40px 30px" color="#FFFFFF" font-size="42px" line-height="48px" font-family="Alice, Helvetica, Arial, sans-serif">
            Window House 23
          </mj-text>
        </mj-column>
      </mj-section>

      <mj-section padding="40px 20px" background-color="#FFFFFF">
        <mj-column width="100%">
          <mj-image src="http://nimus.de/share/tpl-realestate/icon-1.png" alt="" width="130px" align="center" border="none"></mj-image>
        </mj-column>
      </mj-section>

      <mj-section padding="10px 0 20px 0">
        <mj-column>
          <mj-text align="center" color="#9B9B9B" font-size="11px"><a href="#" style="color: #9B9B9B;">Unsubscribe</a> from this newsletter<br>Icon made by Freepik from <a href="http://www.flaticon.com" target="_blank" style="color: #9B9B9B; text-decoration: none;">www.flaticon.com</a><br>
            <a href="http://svenhaustein.de" style="color: #9B9B9B; text-decoration:none;">Made by svenhaustein.de</a>
          </mj-text>
        </mj-column>
      </mj-section>

    </mj-container>
  </mj-body>
</mjml>