Skip to content

Instantly share code, notes, and snippets.

@ngarnier
Created Oct 18, 2016
Embed
What would you like to do?
<mjml>
<mj-head>
<mj-attributes>
<mj-all font-family="'Open Sans', Verdana, Arial" />
<mj-class name="theme-text-capitalize" text-transform="capitalize" />
<mj-class name="theme-bg" background-color="#18C197" />
<mj-class name="theme-text" color="#18C197" />
<mj-class name="theme-text-bold" font-weight="bold" />
<mj-class name="theme-text-reverse" color="white" />
<mj-class name="theme-title-reverse" color="white" line-height="46px" font-size="36px" text-transform="uppercase" font-weight="bold" />
<mj-class name="theme-bg-ghost-button" background-color="transparent" color="white" border="2px solid white" font-weight="bold" text-transform="uppercase" />
</mj-attributes>
</mj-head>
<mj-body>
<mj-container>
<!-- first promo block -->
<mj-section mj-class="theme-bg" padding="0" direction="rtl">
<mj-column>
<mj-image src="http://www.freetemplates.bz/design/notemail/preview/images/offer-image3.png" width="350" padding="0 0 20px" />
</mj-column>
<mj-column>
<mj-text mj-class="theme-text-reverse theme-text-capitalize" align="left" padding="40px 30px 0px" font-size="24px" line-height="24px">THIS WEEK</mj-text>
<mj-text mj-class="theme-title-reverse" padding="15px 30px 0px" align="left">50% FLOT OFFER</mj-text>
<mj-text mj-class="theme-text-reverse theme-text-capitalize" align="left" padding="0px 30px 15px" padding="15px 30px 0px" font-size="16px" line-height="36px">ALL MENS WEAR</mj-text>
<mj-button mj-class="theme-bg-ghost-button" padding="25px 30px 20px" font-size="18px">SHOP NOW</mj-button>
</mj-column>
</mj-section>
<!-- first promo block -->
<mj-section mj-class="theme-bg" padding="0">
<mj-column>
<mj-image src="http://www.freetemplates.bz/design/notemail/preview/images/offer-image2.png" width="350" padding="0 0 20px" />
</mj-column>
<mj-column>
<mj-text mj-class="theme-text-reverse theme-text-capitalize" align="left" padding="40px 30px 0px" font-size="24px" line-height="24px">THIS WEEK</mj-text>
<mj-text mj-class="theme-title-reverse" padding="15px 30px 0px" align="left">30% FLOT OFFER</mj-text>
<mj-text mj-class="theme-text-reverse theme-text-capitalize" align="left" padding="15px 30px 0px" font-size="16px" line-height="36px">ALL WOMEN <br /> ACCESSORIES</mj-text>
<mj-button mj-class="theme-bg-ghost-button" padding="25px 30px 20px" font-size="18px">SHOP NOW</mj-button>
</mj-column>
</mj-container>
</mj-body>
</mjml>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment