From db15d0f5d280043564e27d687aa92c9ec8b3515f Mon Sep 17 00:00:00 2001
From: Nicolas Garnier <ngarnier@users.noreply.github.com>
Date: Wed, 26 Apr 2017 11:24:57 +0200
Subject: [PATCH] Added MJML as an XML extension (#3582)

---
 lib/linguist/languages.yml   |   1 +
 samples/XML/racoon.mjml      | 240 +++++++++++++++++++++++++++++++++++
 samples/XML/real-estate.mjml | 182 ++++++++++++++++++++++++++
 3 files changed, 423 insertions(+)
 create mode 100644 samples/XML/racoon.mjml
 create mode 100644 samples/XML/real-estate.mjml

diff --git a/lib/linguist/languages.yml b/lib/linguist/languages.yml
index 22d513e9..342bb823 100755
--- a/lib/linguist/languages.yml
+++ b/lib/linguist/languages.yml
@@ -4721,6 +4721,7 @@ XML:
   - ".kml"
   - ".launch"
   - ".mdpolicy"
+  - ".mjml"
   - ".mm"
   - ".mod"
   - ".mxml"
diff --git a/samples/XML/racoon.mjml b/samples/XML/racoon.mjml
new file mode 100644
index 00000000..e297407c
--- /dev/null
+++ b/samples/XML/racoon.mjml
@@ -0,0 +1,240 @@
+<mjml>
+  <mj-body>
+    <mj-container background-color="#d6dde5">
+      <mj-section full-width="full-width" padding-bottom="20">
+      </mj-section>
+      <mj-navbar background-color="#ffffff">
+        <mj-column width="50%">
+          <mj-image href="https://mjml.io" src="http://191n.mj.am/img/191n/3s/x4u.png" alt="Racoon logo" align="center" padding="10">
+          </mj-image>
+        </mj-column>
+        <mj-column width="50%">
+          <mj-inline-links base-url="https://mjml.io" hamburger="hamburger" ico-color="#fa8739" padding-top="5px">
+            <mj-link href="https://mjml.io" color="#000000">home</mj-link>
+            <mj-link href="https://mjml.io" color="#000000">blog</mj-link>
+            <mj-link href="https://mjml.io" color="#000000">store</mj-link>
+          </mj-inline-links>
+        </mj-column>
+      </mj-navbar>
+      <mj-section background-color="#fa8739" padding-bottom="0" padding-top="0">
+        <mj-column width="200">
+          <mj-text align="left" color="#fff" font-size="40" padding-left="25" padding-right="25" padding-bottom="10" padding-top="10">
+            <p style="font-size: 17px;">SPRING PROMO</p>
+            <p>50%</p>
+            <p>OFFER</p>
+            <p style="font-size: 13px">Lorem ipsum dolor sit amet, consectetur adipiscing elit<br /></p>
+          </mj-text>
+          <mj-button background-color="#fff" color="#fa8739" font-size="16px" align="center" padding="15px 30px" border-radius="3px" href="https://mjml.io" padding-left="25" padding-right="25" padding-bottom="10" padding-top="10">
+            SHOP NOW
+          </mj-button>
+        </mj-column>
+        <mj-column width="400">
+          <mj-image src="http://191n.mj.am/img/191n/3s/xjg.jpg" alt="Clothes set" align="center" border="none" width="400" padding-left="0" padding-right="0" padding-bottom="0" padding-top="0">
+
+          </mj-image>
+        </mj-column>
+      </mj-section>
+      <mj-section background-color="#2f323b" padding-bottom="0" padding-top="0">
+        <mj-column width="25%">
+          <mj-image src="http://191n.mj.am/img/191n/3s/x4t.png" alt="Box free shipping" align="center" border="none" width="42" padding-left="0" padding-right="0" padding-bottom="10" padding-top="10">
+
+          </mj-image>
+        </mj-column>
+        <mj-column width="75%">
+          <mj-text align="left" color="#fff" font-size="18" padding-left="25" padding-right="25" padding-bottom="10" padding-top="10">
+            <p>FREE SHIPPING ON ORDER <span style="font-weight: bold;color: rgb(250, 135, 57);">OVER 55&#x20AC;</span></p>
+          </mj-text>
+        </mj-column>
+      </mj-section>
+      <mj-section background-color="#fff" padding-bottom="20" padding-top="10">
+        <mj-column vertical-align="bottom">
+          <mj-image src="http://191n.mj.am/img/191n/3s/x4v.jpg" alt="Chesterk tank" align="center" border="none" width="209" padding-left="0" padding-right="0" padding-bottom="20" padding-top="30">
+
+          </mj-image>
+          <mj-text font-weight="bold" align="center" color="#000" font-size="15" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
+            <p>CHESTERK TANK</p>
+            <p style="color: rgb(250, 135, 57);">15&#x20AC;</p>
+          </mj-text>
+          <mj-button background-color="#fa8739" color="#fff" font-size="13" align="center" padding="15px 30px" border-radius="3px" href="https://mjml.io" padding-bottom="10" padding-top="0">
+            BUY NOW
+          </mj-button>
+        </mj-column>
+        <mj-column vertical-align="bottom">
+          <mj-image src="http://191n.mj.am/img/191n/3s/x4g.jpg" alt="Beyond backpack" align="center" border="none" width="178" padding-left="0" padding-right="0" padding-bottom="20" padding-top="30">
+
+          </mj-image>
+          <mj-text font-weight="bold" align="center" color="#000" font-size="15" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
+            <p>BEYOND BACKPACK</p>
+            <p style="color: rgb(250, 135, 57);">20&#x20AC;</p>
+          </mj-text>
+
+          <mj-button background-color="#fa8739" color="#fff" font-size="13" align="center" padding="15px 30px" border-radius="3px" href="https://mjml.io" padding-bottom="10" padding-top="0">
+            BUY NOW
+          </mj-button>
+        </mj-column>
+        <mj-column vertical-align="bottom">
+          <mj-image src="http://191n.mj.am/img/191n/3s/x46.jpg" alt="Jensen shorts" align="center" border="none" width="182" padding-left="0" padding-right="0" padding-bottom="20" padding-top="30">
+
+          </mj-image>
+          <mj-text font-weight="bold" align="center" color="#000" font-size="15" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
+            <p>JENSEN SHORTS</p>
+            <p style="color: rgb(250, 135, 57);">28&#x20AC;</p>
+          </mj-text>
+          <mj-button background-color="#fa8739" color="#fff" font-size="13" align="center" padding="15px 30px" border-radius="3px" href="https://mjml.io" padding-bottom="10" padding-top="0">
+            BUY NOW
+          </mj-button>
+        </mj-column>
+      </mj-section>
+      <mj-section background-color="#fff" padding-bottom="20" padding-top="10">
+        <mj-column vertical-align="bottom">
+          <mj-image src="http://191n.mj.am/img/191n/3s/x4h.jpg" alt="Verdant cap" align="center" border="none" width="129" padding-left="0" padding-right="0" padding-bottom="20" padding-top="20">
+
+          </mj-image>
+          <mj-text font-weight="bold" align="center" color="#000" font-size="15" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
+            <p>VERDANT CAP</p>
+            <p style="color: rgb(250, 135, 57);">20&#x20AC;</p>
+          </mj-text>
+          <mj-button background-color="#fa8739" color="#fff" font-size="13" align="center" border="none" padding="15px 30px" border-radius="3px" href="https://mjml.io" padding-left="25" padding-right="25" padding-bottom="10" padding-top="0">
+            BUY NOW
+          </mj-button>
+        </mj-column>
+        <mj-column vertical-align="bottom">
+          <mj-image src="http://191n.mj.am/img/191n/3s/x4i.jpg" alt="Blake polo shirt" align="center" border="none" width="208" padding-left="0" padding-right="0" padding-bottom="20" padding-top="20">
+
+          </mj-image>
+          <mj-text font-weight="bold" align="center" color="#000" font-size="15" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
+            <p>BLAKE POLO SHIRT</p>
+            <p style="color: rgb(250, 135, 57);">25&#x20AC;</p>
+          </mj-text>
+          <mj-button background-color="#fa8739" color="#fff" font-size="13" align="center" padding="15px 30px" border-radius="3px" href="https://mjml.io" padding-bottom="10" padding-top="0">
+            BUY NOW
+          </mj-button>
+        </mj-column>
+        <mj-column vertical-align="bottom">
+          <mj-image src="http://191n.mj.am/img/191n/3s/x4j.jpg" alt="Sketch floral" align="center" border="none" width="72" padding-left="0" padding-right="0" padding-bottom="20" padding-top="20">
+
+          </mj-image>
+          <mj-text font-weight="bold" align="center" color="#000" font-size="15" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
+            <p>SKETCH FLORAL</p>
+            <p style="color: rgb(250, 135, 57);">23&#x20AC;</p>
+          </mj-text>
+          <mj-button background-color="#fa8739" color="#fff" font-size="13" align="center" padding="15px 30px" border-radius="3px" href="https://mjml.io" padding-bottom="10" padding-top="0">
+            BUY NOW
+          </mj-button>
+        </mj-column>
+      </mj-section>
+      <mj-section background-color="#fa8739" padding-bottom="0" padding-top="0">
+        <mj-column>
+          <mj-image src="http://191n.mj.am/img/191n/3s/x4k.jpg" alt="Man 1" width="301" padding-left="0" padding-right="0" padding-bottom="0" padding-top="0">
+          </mj-image>
+        </mj-column>
+        <mj-column width="50%">
+          <mj-text align="left" color="#fff" font-size="13" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
+            <p style="font-size: 19px;">ANDERSON SWEATER</p>
+            <p style="font-size: 36px;">75&#x20AC;</p>
+            <p>The Anderson Sweater features a floral all-over print with contrast colour.</p>
+          </mj-text>
+          <mj-button background-color="#fff" color="#fa8739" padding="15px 30px" border-radius="3px" href="https://mjml.io" padding-bottom="10" padding-top="0">
+            BUY NOW
+          </mj-button>
+        </mj-column>
+      </mj-section>
+      <mj-section background-color="#2f323b" padding-bottom="0" padding-top="0">
+        <mj-column>
+          <mj-text align="left" color="#fff" font-size="13" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
+            <p style="font-size: 19px;">ALDER TWO JONES JACKET</p>
+            <p style="font-size: 36px;">100&#x20AC;</p>
+            <p>Colour-block design, zip entry, oxford hood lining, side pockets &amp; TC lining.</p>
+          </mj-text>
+          <mj-button background-color="#fa8739" color="#fff" padding="15px 30px" border-radius="3px" href="https://mjml.io" padding-bottom="10" padding-top="0">
+            BUY NOW
+          </mj-button>
+        </mj-column>
+        <mj-column>
+          <mj-image src="http://191n.mj.am/img/191n/3s/xj6.jpg" alt="Man 2" align="center" border="none" width="302" padding-left="0" padding-right="0" padding-bottom="0" padding-top="0">
+
+          </mj-image>
+        </mj-column>
+      </mj-section>
+      <mj-section background-color="#fa8739" padding-bottom="0" padding-top="0">
+        <mj-column>
+          <mj-text align="center" color="#fff" font-size="13" padding-left="25" padding-right="25" padding-bottom="10" padding-top="10">
+            <p style="font-size: 14px;">DISCOVER OUR</p>
+            <p style="font-size: 27px;">SUMMER COLLECTION</p>
+          </mj-text>
+        </mj-column>
+      </mj-section>
+      <mj-section background-color="#fff" padding-bottom="20" padding-top="20">
+        <mj-column>
+          <mj-image src="http://191n.mj.am/img/191n/3s/x4q.jpg" alt="Topaz C3 shoes" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
+          </mj-image>
+          <mj-text align="center" color="#000" font-size="15" font-weight="bold" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
+            <p>TOPAZ C3 SHOES</p>
+            <p style="color: rgb(250, 135, 57);">70&#x20AC;</p>
+          </mj-text>
+          <mj-button background-color="#fa8739" color="#fff" font-size="13" align="center" padding="15px 30px" border-radius="3px" href="https://mjml.io" padding-bottom="10" padding-top="0">
+            BUY NOW
+          </mj-button>
+        </mj-column>
+        <mj-column>
+          <mj-image src="http://191n.mj.am/img/191n/3s/x4r.jpg" alt="Camden backpack" align="center" border="none" width="199" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
+
+          </mj-image>
+          <mj-text align="center" color="#000" font-size="15" font-weight="bold" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
+            <p>CAMDEN BACKPACK</p>
+            <p style="color: rgb(250, 135, 57);">50&#x20AC;</p>
+          </mj-text>
+          <mj-button background-color="#fa8739" color="#fff" padding="15px 30px" border-radius="3px" href="https://mjml.io" padding-bottom="10" padding-top="0">
+            BUY NOW
+          </mj-button>
+        </mj-column>
+      </mj-section>
+      <mj-section background-color="#2f323b" padding-bottom="20" padding-top="20">
+        <mj-column>
+          <mj-image src="http://191n.mj.am/img/191n/3s/x47.png" alt="Cards" width="72">
+          </mj-image>
+          <mj-text align="center" color="#fff" font-size="13" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
+            <p style="font-size: 15px;font-weight: bold;">PAYMENT METHODS</p>
+            <p>We accept all majors payments options</p>
+          </mj-text>
+        </mj-column>
+        <mj-column>
+          <mj-image src="http://191n.mj.am/img/191n/3s/x48.png" alt="Currencies" align="center" border="none" width="70" padding-left="25" padding-right="25" padding-bottom="0" padding-top="10">
+
+          </mj-image>
+          <mj-text align="center" color="#fff" font-size="13" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
+            <p style="font-size: 15px;font-weight: bold;">CURRENCIES CHOICE</p>
+            <p>You have the choice to pay with your own currencies</p>
+          </mj-text>
+        </mj-column>
+        <mj-column>
+          <mj-image src="http://191n.mj.am/img/191n/3s/x4y.png" alt="Express" align="center" border="none" width="82" padding-left="25" padding-right="25" padding-bottom="8" padding-top="10">
+
+          </mj-image>
+          <mj-text align="center" color="#fff" font-size="13" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
+            <p style="font-size: 15px;font-weight: bold;">EXPRESS SHIPPING</p>
+            <p>Delivered tomorrow before noon</p>
+          </mj-text>
+        </mj-column>
+      </mj-section>
+      <mj-section background-color="#fa8739" padding-bottom="0" padding-top="0">
+        <mj-column>
+          <mj-image src="http://191n.mj.am/img/191n/3s/x49.png" alt="Racoon logo" align="center" border="none" width="180" padding-left="0" padding-right="0" padding-bottom="0" padding-top="10">
+          </mj-image>
+        </mj-column>
+        <mj-column>
+          <mj-text align="center" color="#fff" font-size="13" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
+            <p><a href="https://mjml.io" style="text-decoration: none; color: inherit;">Privacy policy</a></p>
+          </mj-text>
+        </mj-column>
+        <mj-column>
+          <mj-social font-size="13" text-mode="false" facebook-href="[[SHORT_PERMALINK]]" twitter-href="[[SHORT_PERMALINK]]" google-href="[[SHORT_PERMALINK]]" mode="horizontal" display="facebook twitter google" padding-left="25" padding-right="25" padding-bottom="10"
+            padding-top="10">
+          </mj-social>
+        </mj-column>
+      </mj-section>
+      <mj-section padding-bottom="20" padding-top="20">
+      </mj-section>
+    </mj-container>
+  </mj-body>
+</mjml>
diff --git a/samples/XML/real-estate.mjml b/samples/XML/real-estate.mjml
new file mode 100644
index 00000000..48f7fa37
--- /dev/null
+++ b/samples/XML/real-estate.mjml
@@ -0,0 +1,182 @@
+<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>