testdata/real-estate.mjml
<mjml>
<mj-head>
<mj-title>Say hello to RealEstate</mj-title>
<mj-font name="Alice" href="https://fonts.googleapis.com/css?family=Alice"></mj-font>
<mj-font name="Roboto" href="https://fonts.googleapis.com/css?family=Roboto:400,700"></mj-font>
<mj-attributes>
<mj-all font-family="Roboto, Helvetica, Arial, sans-serif" padding="0px"></mj-all>
<mj-text font-weight="400" font-size="14px" color="#000000" line-height="21px"></mj-text>
</mj-attributes>
</mj-head>
<mj-body 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="0px"></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="36px" 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="260px" 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="26px" line-height="30px" font-family="Alice, Helvetica, Arial, sans-serif">– first offer –</mj-text>
<mj-text align="center" padding="10px 20px" font-size="22px" 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="26px" 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="50px" 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="26px" 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-divider>
<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="26px" 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="50px" 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="26px" 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-divider>
</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="26px" line-height="30px" font-family="Alice, Helvetica, Arial, sans-serif">– 2. offer –</mj-text>
<mj-text align="center" padding="10px 20px" font-size="22px" 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-body>
</mjml>