Skip to content

Instantly share code, notes, and snippets.

@johanmendezb

johanmendezb/email.mjml

Forked from anonymous/email.mjml
Created January 13, 2017 23:41
Show Gist options
  • Save johanmendezb/360e79d65715c2f1755a8e50010bbebd to your computer and use it in GitHub Desktop.
Save johanmendezb/360e79d65715c2f1755a8e50010bbebd to your computer and use it in GitHub Desktop.
Download ZIP
Made with MJML App
Raw
email.mjml
<mjml>
<mj-body>
<mj-container background-color="#ffffff" font-size="13px">
<mj-section background-color="#ffffff" hidden="false" name="Nouvelle section" padding-bottom="0" padding-top="20">
<mj-column vertical-align="top" width="100%">
<mj-text align="center" color="#000000" font-size="13px" word-wrap="break-word" font-family="Open Sans" vertical-align="top" container-background-color="#ffffff" padding-left="10" padding-right="10" padding-bottom="0" padding-top="0">
<h2 style="font-size: 19px; font-weight: 700; line-height: 30px;"><span style="font-size:14.666666666666666px;font-family:'Open Sans';color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span style="font-size:14.666666666666666px;font-family:'Open Sans';color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span style="color: #1ABB73;"><span style="font-family: Open Sans;"><span style="font-size: 20px;"><span style="font-size: 25px;">Estimate request details</span></span></span></span></span></span></h2>
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#ffffff" hidden="false" name="Nouvelle section" image-id="19003" background-url="https://s16.postimg.org/qhpf9dwud/emailbg_min.png" background-size="cover" padding-bottom="20" padding-top="20">
<mj-column vertical-align="top" width="100%">
<mj-image src="http://simplecater.herokuapp.com/assets/logo-c6ecafe9e7da9b1f5bea7de64ed45d35f03c8bf457e825644647338b0a6efc16.png" alt="" align="left" border="none" width="250" vertical-align="top" padding-left="10" padding-right="10" padding-bottom="22" padding-top="22">
</mj-image>
</mj-column>
</mj-section>
<mj-section background-color="#ffffff" hidden="false" vertical-align="middle" name="Section-A" padding-bottom="0" padding-top="20">
<mj-column vertical-align="middle" width="100%">
<mj-text align="left" color="#000000" font-size="13" word-wrap="break-word" font-family="Open Sans" vertical-align="middle" padding-left="10" padding-right="10" padding-bottom="0" padding-top="0">
<span style="display: block; font-size: 28px; font-weight: bold;"><h1 style="font-size: 26px; font-weight: 700; line-height: 30px;"><span style="font-size:14.666666666666666px;font-family:'Open Sans';color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span style="font-size: 25px;"><strong><span style="color: #494D5A;">Hi <%= @user.name %>!</span></strong></span></span></h1></span>
</mj-text>
<mj-text align="left" color="#000000" font-size="13" word-wrap="break-word" font-family="Open Sans" vertical-align="middle" padding-left="10" padding-right="10" padding-bottom="5" padding-top="5">
<p></p><p style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:14.666666666666666px;font-family:'Open Sans';color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span style="color: #6B6B6B">We&apos;re glad you&apos;ve chosen us for your next catering service. Here are your request details:</span></span></p><span style="font-size:14.666666666666666px;font-family:'Open Sans';color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><strong><span style="color: #9B9B9B">Reference: <%= @user.serviceId %></span></strong></span><p></p>
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="rgba(26,187,115,0.05)" hidden="false" name="Nouvelle section" padding-bottom="0" padding-top="0">
<mj-column vertical-align="top" width="33.33333333333333%">
<mj-text align="left" color="rgba(26,187,115,1)" font-size="13px" word-wrap="break-word" font-family="Open Sans" vertical-align="top" padding-left="10" padding-right="10" padding-bottom="5" padding-top="5">
<p style="font-weight:500;">Zip code</p>
</mj-text>
</mj-column>
<mj-column vertical-align="top" width="33.33333333333333%">
<mj-text align="left" color="#6b6b6b" font-size="13px" word-wrap="break-word" font-family="Open Sans" vertical-align="top" padding-left="10" padding-right="10" padding-bottom="5" padding-top="5">
<p> <%= @zip_code %> </p>
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="rgba(26,187,115,0.05)" hidden="false" name="Nouvelle section" padding-bottom="0" padding-top="0">
<mj-column vertical-align="top" width="33.33333333333333%">
<mj-text align="left" color="rgba(26,187,115,1)" font-size="13px" word-wrap="break-word" font-family="Open Sans" vertical-align="top" padding-left="10" padding-right="10" padding-bottom="5" padding-top="5">
<p style="font-weight:500;">Date(s)</p>
</mj-text>
</mj-column>
<mj-column vertical-align="top" width="33.33333333333333%">
<mj-text align="left" color="#6b6b6b" font-size="13px" word-wrap="break-word" font-family="Open Sans" vertical-align="top" padding-left="10" padding-right="10" padding-bottom="5" padding-top="5">
<p> <%= date_string %> </p>
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="rgba(26,187,115,0.05)" hidden="false" name="Nouvelle section" padding-bottom="0" padding-top="0">
<mj-column vertical-align="top" width="33.33333333333333%">
<mj-text align="left" color="rgba(26,187,115,1)" font-size="13px" word-wrap="break-word" font-family="Open Sans" vertical-align="top" padding-left="10" padding-right="10" padding-bottom="5" padding-top="5">
<p style="font-weight:500;">Budget per guest:</p>
</mj-text>
</mj-column>
<mj-column vertical-align="top" width="33.33333333333333%">
<mj-text align="left" color="#6b6b6b" font-size="13px" word-wrap="break-word" font-family="Open Sans" vertical-align="top" padding-left="10" padding-right="10" padding-bottom="5" padding-top="5">
<p> <%= @service.budget %> </p>
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="rgba(26,187,115,0.05)" hidden="false" name="Nouvelle section" padding-bottom="0" padding-top="0">
<mj-column vertical-align="top" width="33.33333333333333%">
<mj-text align="left" color="rgba(26,187,115,1)" font-size="13px" word-wrap="break-word" font-family="Open Sans" vertical-align="top" padding-left="10" padding-right="10" padding-bottom="5" padding-top="5">
<p style="font-weight:500;">Number of guest</p>
</mj-text>
</mj-column>
<mj-column vertical-align="top" width="33.33333333333333%">
<mj-text align="left" color="#6b6b6b" font-size="13px" word-wrap="break-word" font-family="Open Sans" vertical-align="top" padding-left="10" padding-right="10" padding-bottom="5" padding-top="5">
<p> <%= @service.serves %> </p>
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="rgba(26,187,115,0.05)" hidden="false" name="Nouvelle section" padding-bottom="0" padding-top="0">
<mj-column vertical-align="top" width="33.33333333333333%">
<mj-text align="left" color="rgba(26,187,115,1)" font-size="13px" word-wrap="break-word" font-family="Open Sans" vertical-align="top" padding-left="10" padding-right="10" padding-bottom="5" padding-top="5">
<p style="font-weight:500;">Cuisine types</p>
</mj-text>
</mj-column>
<mj-column vertical-align="top" width="33.33333333333333%">
<mj-text align="left" color="#6b6b6b" font-size="13px" word-wrap="break-word" font-family="Open Sans" vertical-align="top" padding-left="10" padding-right="10" padding-bottom="5" padding-top="5">
<p> <%= cuisine_type.name %> </p>
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="rgba(26,187,115,0.05)" hidden="false" name="Nouvelle section" padding-bottom="0" padding-top="0">
<mj-column vertical-align="top" width="33.33333333333333%">
<mj-text align="left" color="rgba(26,187,115,1)" font-size="13px" word-wrap="break-word" font-family="Open Sans" vertical-align="top" padding-left="10" padding-right="10" padding-bottom="5" padding-top="5">
<p style="font-weight:500;">Meals</p>
</mj-text>
</mj-column>
<mj-column vertical-align="top" width="33.33333333333333%">
<mj-text align="left" color="#6b6b6b" font-size="13px" word-wrap="break-word" font-family="Open Sans" vertical-align="top" padding-left="10" padding-right="10" padding-bottom="5" padding-top="5">
<p> <%= course_type.name %> </p>
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="rgba(26,187,115,0.05)" hidden="false" name="Nouvelle section" padding-bottom="0" padding-top="0">
<mj-column vertical-align="top" width="33.33333333333333%">
<mj-text align="left" color="rgba(26,187,115,1)" font-size="13px" word-wrap="break-word" font-family="Open Sans" vertical-align="top" padding-left="10" padding-right="10" padding-bottom="5" padding-top="5">
<p style="font-weight:500;">Drinks and desserts</p>
</mj-text>
</mj-column>
<mj-column vertical-align="top" width="33.33333333333333%">
<mj-text align="left" color="#6b6b6b" font-size="13px" word-wrap="break-word" font-family="Open Sans" vertical-align="top" padding-left="10" padding-right="10" padding-bottom="5" padding-top="5">
<p> <% @drinks_and_desserts %></p>
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="rgba(26,187,115,0.05)" hidden="false" name="Nouvelle section" padding-bottom="0" padding-top="0">
<mj-column vertical-align="top" width="33.33333333333333%">
<mj-text align="left"color="rgba(26,187,115,1)" font-size="13px" word-wrap="break-word" font-family="Open Sans" vertical-align="top" padding-left="10" padding-right="10" padding-bottom="5" padding-top="5">
<p style="font-weight:500;">Observations</p>
</mj-text>
</mj-column>
<mj-column vertical-align="top" width="33.33333333333333%">
<mj-text align="left" color="#6b6b6b" font-size="13px" word-wrap="break-word" font-family="Open Sans" vertical-align="top" padding-left="5" padding-right="5" padding-bottom="5" padding-top="5">
<p><%= @service.observations %></p>
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#ffffff" hidden="false" name="Nouvelle section" padding-bottom="0" padding-top="0">
<mj-column vertical-align="top" width="100%">
<mj-text align="left" color="#000000" font-size="13px" word-wrap="break-word" font-family="Open Sans" vertical-align="top" padding-left="10" padding-right="10" padding-bottom="0" padding-top="0">
<p><span style="font-size: 12px;"><span style="color: #B4B4B4">We're working on your request, ...Disclaimer.</span></span> </p>
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#ffffff" hidden="false" name="Nouvelle section" padding-bottom="0" padding-top="0">
<mj-column vertical-align="top" width="100%">
<mj-text align="left" color="#000000" font-size="13px" word-wrap="break-word" font-family="Open Sans" vertical-align="top" padding-left="10" padding-right="10" padding-bottom="10" padding-top="10">
<p></p><p style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:14.666666666666666px;font-family:'Open Sans';color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span style="color: #1ABB73;">Best,</span></span></p><span style="font-size:14.666666666666666px;font-family:'Open Sans';color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><strong><span style="color: #1ABB73;">The Simple Cater Team</span></strong></span><p></p>
</mj-text>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment