mjml is a lightweight code editor for creating responsive email templates. it’s a neat idea that helps people with a bit of coding knowledge create stunning templates. feel free to use these and modify them!
Mac and Cheeze
modern e-commerce template
<mjml>
<mj-head>
<mj-preview>This is Mac and Cheeze | Tiny Marketing Co.</mj-preview>
<mj-font name="Courier Prime, Cormorant Garamond" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=Courier+Prime&display=swap" />
<mj-attributes>
<mj-text align="center" font-family="Courier Prime, Cormorant Garamond, Helvetica" font-size="15px" />
</mj-attributes>
<mj-style inline="inline">
.uppercase-title { color:#272727; font-size:18px; text-transform:uppercase; }
.lowercase-title { color:#272727; font-size:40px; font-family:Cormorant Garamond;}
.reverse-lowercase-title { color:#ffffff; font-size:40px; font-family:Cormorant Garamond;}
.link { color:#FFBE86; text-transform:uppercase; text-decoration:none; font-size:13px;}
.paragraph { font-size:14px; font-weight:300; line-height:1.5;}
.reverse-paragraph { font-size:12px; font-weight:300; line-height:1.5; color:#272727; } .carousel-image { width:100%; }
.new-products-sub { font-size:34px; line-height:1.2; color:#ffffff; text-align:left; font-family:Courier Prime, Helvetica;}
.new-products { font-size:44px; font-weight:300; line-height:1.2; color:#ffffff; text-align:left; font-family:Cormorant Garamond, Helvetica; font-style:italic;}
.footer-fine-print { color:#272727; font-size:10px;}
.fine-print { color:#ffffff; font-size:9px;}
.coupon-code { font-size:24px; font-weight:600; line-height:1.2; color:#FFBE86; text-transform:uppercase; font-family:Courier Prime, Helvetica;} </mj-style>
</mj-head>
<mj-body background-color="#fff">
<!-- Logo -->
<mj-section background-color="#272727" padding-top="40px" padding-bottom="10px">
<mj-column>
<mj-image src="https://tinymarketing.b-cdn.net/noun_Circle_2717448(1).png" width="90px" alt="tinymarketing logo" align="left"></mj-image>
</mj-column>
<!-- Top Banner -->
</mj-section>
<mj-section background-color="#272727" padding-top="0px" padding-bottom="50px">
<mj-column>
<mj-text>
<p class="new-products">New Products: </p>
<p class="new-products-sub">Sustainable T-Shirts</p>
</mj-text>
</mj-column>
</mj-section>
<!-- Hero -->
<mj-hero mode="fluid-height" background-width="600px" background-height="500px" background-url="https://images.unsplash.com/photo-1564584217132-2271feaeb3c5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" background-color="#222222" background-position="bottom left" padding="100px 0px">
</mj-hero>
<!-- Group -->
<mj-section padding-top="0px" padding-bottom="0px">
<mj-group>
<mj-column>
<mj-image padding="20px 10px 0px 0px" src="https://images.unsplash.com/photo-1603320410149-db26b12d5c2b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</mj-column>
<mj-column>
<mj-image padding="20px 0px 10px 10px" src="https://images.unsplash.com/photo-1503341504253-dff4815485f1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
</mj-column>
</mj-group>
</mj-section>
<!-- Product Section -->
<mj-section padding-top="40px">
<mj-column>
<mj-text>
<p class="lowercase-title">Los Angeles Training Club — 705.</p>
</mj-text>
</mj-text>
</mj-column>
</mj-section>
<mj-section padding-top="0px" padding-bottom="0">
<mj-column>
<mj-text> <img src="https://images.unsplash.com/photo-1618354691373-d851c5c3a990?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8dCUyMHNoaXJ0fGVufDB8fDB8d2hpdGV8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" width="100%" alt="training club t shirt" /> </mj-text>
</mj-column>
</mj-section>
<mj-section>
<mj-column>
<mj-divider border-width="1px" border-style="solid" border-color="#272727" width="100%" padding-top="5px" padding-bottom="5px" />
<mj-text align="left"> Organic + sustainable cotton</mj-text>
<mj-divider border-width="1px" border-style="solid" border-color="#272727" width="100%" padding-top="5px" padding-bottom="5px" />
<mj-text align="left"> Available in short and long sleeve </mj-text>
<mj-divider border-width="1px" border-style="solid" border-color="#272727" width="100%" padding-top="5px" padding-bottom="5px" />
<mj-text align="left">For people sizes XS - XL</mj-text>
<mj-divider border-width="1px" border-style="solid" border-color="#272727" width="100%" padding-top="5px" padding-bottom="5px" />
</mj-column>
</mj-section>
<mj-section padding-top="0px" padding-bottom="0">
<mj-group>
<mj-column width="25%">
<mj-image src="https://images.unsplash.com/photo-1618354691551-44de113f0164?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8dCUyMHNoaXJ0fGVufDB8fDB8d2hpdGV8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />
</mj-column>
<mj-column width="25%">
<mj-image src="https://images.unsplash.com/photo-1618354691438-25bc04584c23?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8dCUyMHNoaXJ0fGVufDB8fDB8d2hpdGV8&auto=format&fit=crop&w=500&q=60" />
</mj-column>
<mj-column width="25%">
<mj-image src="https://images.unsplash.com/photo-1618354691309-b22b0de007eb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=658&q=80" />
</mj-column>
</mj-group>
</mj-section>
<!-- Button -->
<mj-section padding-bottom="50px">
<mj-column>
<mj-button href="https://tinymarketing.co/" background-color="#ffffff" border-radius="0px" padding="10px 0px 20px 0px" inner-padding="20px 50px 20px 50px" text-transform="uppercase" font-size="18px" border="1px solid" color="#272727" font-family="Courier Prime, Helvetica">shop now</mj-button>
</mj-column>
</mj-section>
<!-- Coupon Code -->
<mj-section background-color="#272727">
<mj-column>
<mj-text>
<p class="reverse-lowercase-title">10% off your order</p>
<p class="coupon-code">code: GETMY10 </p>
</mj-text>
<mj-text>
<p class="fine-print"> Get 10% off all regular-price products. Some Restrictions may apply. </p>
</mj-text>
</mj-column>
</mj-section>
<!-- Footer -->
<mj-section padding-top="50px">
<mj-column>
<mj-image src="https://tinymarketing.b-cdn.net/noun_Circle_2717448(1).png" width="50px" alt="logo"></mj-image>
<mj-text>
<p class="reverse-paragraph">hire @ tinymarketing.co </p>
<p class="reverse-paragraph">(605) 610 - 1940 </p>
</mj-text>
<mj-social font-size="11px" icon-size="20px" mode="horizontal" text-padding="5px" padding="0px 25px">
<mj-social-element src=https://image.flaticon.com/icons/png/512/733/733635.png href="https://www.twitter.com/" alt="twitter icon">
</mj-social-element>
<mj-social-element src=https://image.flaticon.com/icons/png/512/733/733614.png href="https://www.instagram.com/" alt="instagram icon">
</mj-social-element>
</mj-social>
<mj-text>
<p class="footer-fine-print">You received this email because you signed up for our newsletter.</p>
<p class="link"><a href="{$unsubscribe}" style="color: #FFBE86;">Unsubscribe</a></p>
</mj-text>
<mj-text>
<p class="footer-fine-print">Sioux Falls SD<br /> 57106 United States</p>
</mj-text>
<mj-text>
<p class="footer-fine-print">Copyright © 2021 Tiny Marketing LLC. All rights reserved. </p>
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>Modify it in the MJML email editor: https://mjml.io/try-it-live