flayks/housesof-newsletters
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update 1

Browse Source
This commit is contained in:
Félix Péault
2020-06-02 22:40:17 +02:00
parent 0c3de96530
commit f12202e7ec
8 changed files with 486 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

353
housesof-confirmation.html Normal file
View File

@@ -0,0 +1,353 @@
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Houses Of — Confirm your subscription</title>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 100%;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if !mso]><!-->
<style type="text/css">
@media only screen and (max-width:480px) {
@-ms-viewport {
width: 320px;
}
@viewport {
width: 320px;
}
}
</style>
<!--<![endif]-->
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://static.housesof.world/fonts/webfont-sans.css" rel="stylesheet" type="text/css">
<link href="https://static.housesof.world/fonts/webfont-serif.css" rel="stylesheet" type="text/css">
<style type="text/css">
@import url(https://static.housesof.world/fonts/webfont-sans.css);
@import url(https://static.housesof.world/fonts/webfont-serif.css);
</style>
<!--<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
}
</style>
<style type="text/css">
@media only screen and (max-width:480px) {
table.full-width-mobile {
width: 100% !important;
}
td.full-width-mobile {
width: auto !important;
}
}
</style>
<style type="text/css">
.footer-link {
color: #9D729D;
text-decoration: underline;
}
.footer-link:hover {
color: #C7AEC7;
}
</style><!-- Font families -->
<!-- CSS classes (usually for links) -->
</head>
<body style="background-color:#2D0458;">
<div style="background-color:#2D0458;">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#3C0576;background-color:#3C0576;Margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
style="background:#3C0576;background-color:#3C0576;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0;text-align:center;vertical-align:top;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="Margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
style="width:100%;">
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:0;padding-bottom:96px;text-align:center;vertical-align:top;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 outlook-group-fix"
style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0"
role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center"
style="font-size:0px;padding:0;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0"
role="presentation"
style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:600px;"><img alt=""
height="auto" src="https://static.housesof.world/emails/title-houses.png"
style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;"
width="600"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#3C0576;background-color:#3C0576;Margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
style="background:#3C0576;background-color:#3C0576;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0 24px;text-align:center;vertical-align:top;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div
style="background:#ffffff;background-color:#ffffff;Margin:0px auto;border-radius:6px;max-width:552px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
style="background:#ffffff;background-color:#ffffff;width:100%;border-radius:6px;">
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:13% 0;text-align:center;vertical-align:top;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:552px;" ><![endif]-->
<div class="mj-column-per-100 outlook-group-fix"
style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0"
role="presentation" style="vertical-align:top;" width="100%">
<!-- New Photos -->
<tr>
<td align="center"
style="font-size:0px;padding:0 8% 10%;word-break:break-word;">
<div
style="font-family:HOW-Serif;font-size:32px;font-weight:200;line-height:1;text-align:center;color:#FF6C89;">
Thanks for dropping by!</div>
</td>
</tr>
<tr>
<td align="center"
style="font-size:0px;padding:0 10%;padding-bottom:32px;word-break:break-word;">
<div
style="font-family:HOW-Sans;font-size:18px;font-weight:300;line-height:32px;text-align:center;color:#333333;">
In order to receive fresh photos and locations via
the Houses Of newsletter, please click below to
confirm your subscription.</div>
</td>
</tr>
<tr>
<td align="center" vertical-align="middle"
style="font-size:0px;padding:16px 0 0;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0"
role="presentation"
style="border-collapse:separate;line-height:100%;">
<tr>
<td align="center" bgcolor="#FF6C89"
role="presentation"
style="border:none;border-radius:24px;cursor:auto;height:48px;padding:0 24px;background:#FF6C89;"
valign="middle">
<a href="{{ doubleoptin }}" style="background:#FF6C89;color:#ffffff;font-family:HOW-Sans;font-size:18px;font-weight:600;line-height:120%;Margin:0;text-decoration:none;text-transform:none;" target="_blank">
Confirm my subscription
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- Footer -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#3C0576;background-color:#3C0576;Margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
style="background:#3C0576;background-color:#3C0576;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:13% 0 6%;text-align:center;vertical-align:top;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="Margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
style="width:100%;">
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:0;text-align:center;vertical-align:top;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 outlook-group-fix"
style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0"
role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center"
style="font-size:0px;padding:0 0 16px;word-break:break-word;">
<div
style="font-family:HOW-Sans;font-size:16px;font-weight:300;line-height:1;text-align:center;color:#ffffff;">
&copy; Houses Of – 2020</div>
</td>
</tr>
<tr>
<td align="center"
style="font-size:0px;padding:16px 0 12px;word-break:break-word;">
<div
style="font-family:HOW-Sans;font-size:16px;font-weight:300;line-height:1;text-align:center;color:#ffffff;">
A project by</div>
</td>
</tr>
<tr>
<td align="center"
style="font-size:0px;padding:0;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0"
role="presentation"
style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:140px;"><a href="https://cetrucflotte.com"
target="_blank"><img
alt="Cetrucflotte logo"
height="auto"
src="https://static.housesof.world/emails/logo-cetrucflotte.png"
style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;"
width="140"></a></td>
</tr>
</tbody>
</table>
</td>
</tr><!-- Links -->
<tr>
<td align="center"
style="font-size:0px;padding:4px 0;padding-top:48px;word-break:break-word;">
<div
style="font-family:HOW-Sans;font-size:14px;font-weight:300;line-height:18px;text-align:center;color:#9D729D;">
<a href="{{ update_profile }}" class="footer-link">Manage subscribe
preferences</a></div>
</td>
</tr>
<tr>
<td align="center"
style="font-size:0px;padding:4px 0;word-break:break-word;">
<div
style="font-family:HOW-Sans;font-size:14px;font-weight:300;line-height:18px;text-align:center;color:#9D729D;">
<a href="{{ unsubscribe }}" class="footer-link">Unsubscribe</a>
</div>
</td>
</tr>
<tr>
<td align="center"
style="font-size:0px;padding:4px 0;word-break:break-word;">
<div
style="font-family:HOW-Sans;font-size:14px;font-weight:300;line-height:18px;text-align:center;color:#9D729D;">
See this email as a <a href="{{ mirror }}"
class="footer-link">web page</a>.</div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
</body>
</html>

4
housesof-newsletter-template.mjml
View File

@@ -40,7 +40,7 @@
<mj-wrapper> <mj-wrapper>
<mj-section> <mj-section>
<mj-column width="100%"> <mj-column width="100%">
<mj-image src="images/title.png" alt="" /> <mj-image src="images/title-houses.png" alt="" />
</mj-column> </mj-column>
</mj-section> </mj-section>
@@ -106,7 +106,7 @@
<mj-text mj-class="footer-text" padding="16px 0 12px"> <mj-text mj-class="footer-text" padding="16px 0 12px">
A project by A project by
</mj-text> </mj-text>
<mj-image src="images/ctf.png" alt="Cetrucflotte logo" href="/" align="center" width="140px" /> <mj-image src="images/logo-cetrucflotte.png" alt="Cetrucflotte logo" href="https://cetrucflotte.com" align="center" width="140px" />
<!-- Links --> <!-- Links -->
<mj-text mj-class="footer-info" padding-top="48px"> <mj-text mj-class="footer-info" padding-top="48px">

4
housesof-newsletter-text.mjml
View File

@@ -39,7 +39,7 @@
<mj-wrapper> <mj-wrapper>
<mj-section padding-bottom="96px"> <mj-section padding-bottom="96px">
<mj-column width="100%"> <mj-column width="100%">
<mj-image src="images/title.png" alt="" /> <mj-image src="images/title-houses.png" alt="" />
</mj-column> </mj-column>
</mj-section> </mj-section>
</mj-wrapper> </mj-wrapper>
@@ -72,7 +72,7 @@
<mj-text mj-class="footer-text" padding="16px 0 12px"> <mj-text mj-class="footer-text" padding="16px 0 12px">
A project by A project by
</mj-text> </mj-text>
<mj-image src="images/ctf.png" alt="Cetrucflotte logo" href="/" align="center" width="140px" /> <mj-image src="images/logo-cetrucflotte.png" alt="Cetrucflotte logo" href="https://cetrucflotte.com" align="center" width="140px" />
<!-- Links --> <!-- Links -->
<mj-text mj-class="footer-info" padding-top="48px"> <mj-text mj-class="footer-info" padding-top="48px">

0
images/ctf.png → images/logo-cetruccflotte.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

0
images/title.png → images/title-houses.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.3 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

129
update-1/housesof-newsletter-update-1.mjml Normal file
View File

@@ -0,0 +1,129 @@
<mjml lang="en">
<mj-head>
<!-- Font families -->
<mj-font name="HOW-Sans" href="https://static.housesof.world/fonts/webfont-sans.css" />
<mj-font name="HOW-Serif" href="https://static.housesof.world/fonts/webfont-serif.css" />
<mj-attributes>
<!-- Global attributes -->
<mj-all font-family="HOW-Sans, Helvetica-Neue, Helvetica, Arial, sans-serif" />
<mj-wrapper padding="0" background-color="#3C0576" />
<mj-section padding="0" />
<mj-text font-weight="300" padding="0" />
<mj-image padding="0" />
<mj-button font-weight="600" />
<mj-divider border-color="#E6E6E6" border-width="2px" padding="13% 0" />
<!-- Classes -->
<mj-class name="intro-text" color="#9D729C" font-size="16px" padding-bottom="0" />
<mj-class name="title" align="center" padding="0 8% 10%" color="#FF6C89" font-size="32px" font-family="HOW-Serif, serif" font-weight="200" />
<mj-class name="subtitle" align="center" font-size="16px" font-weight="600" color="#999" letter-spacing="1px" text-transform="uppercase" />
<mj-class name="text" align="center" padding="0 10%" font-size="18px" color="#333" line-height="32px" />
<mj-class name="button" padding="16px 0 0" background-color="#FF6C89" color="#fff" height="48px" inner-padding="0 24px" border-radius="24px" font-size="18px" />
<mj-class name="footer-text" color="#fff" font-size="16px" align="center" />
<mj-class name="footer-info" color="#9D729D" font-size="14px" line-height="18px" align="center" padding="4px 0" />
</mj-attributes>
<!-- CSS classes (usually for links) -->
<mj-style>
.footer-link {
color: #9D729D;
text-decoration: underline;
}
.footer-link:hover {
color: #C7AEC7;
}
</mj-style>
</mj-head>
<mj-body background-color="#2D0458">
<!-- Header -->
<mj-wrapper>
<mj-section>
<mj-column width="100%">
<mj-image src="https://static.housesof.world/emails/title-houses.png" alt="" />
</mj-column>
</mj-section>
<!-- Informations -->
<mj-section padding="96px 24px 32px">
<mj-column>
<mj-text align="left" mj-class="intro-text">
Houses Of – Update #1
</mj-text>
</mj-column>
<mj-column>
<mj-text align="right" mj-class="intro-text">
June 2<sup>nd</sup>, 2020
</mj-text>
</mj-column>
</mj-section>
</mj-wrapper>
<!-- Content -->
<mj-wrapper padding="0 24px">
<mj-section background-color="#fff" border-radius="6px" padding="13% 0">
<mj-column>
<!-- New Location(s) -->
<mj-text mj-class="title" >
New Location!
</mj-text>
<mj-image src="https://static.housesof.world/emails/update-1/location-sete.png" alt="" width="480px" padding="0 24px" />
<mj-text mj-class="text" padding-top="32px" padding-bottom="32px">
Post-lockdown in France means opportunities to capture new locations! Our latest exploration to Sète, a Mediterranean city of South of France.
</mj-text>
<mj-button mj-class="button" href="https://housesof.world/location/france/sete?ref=newsletter">
Discover Sète homes
</mj-button>
<!-- Divider -->
<mj-divider />
<!-- New Photos -->
<mj-text mj-class="title">
New Photos!
</mj-text>
<mj-image src="https://static.housesof.world/emails/update-1/photos.jpg" alt="" padding="0 16px" />
<mj-text mj-class="subtitle" padding-top="32px">
Montpellier and Brisbane
</mj-text>
<mj-text mj-class="text" padding-top="32px" padding-bottom="32px">
Additional photos have been added to these locations &nbsp;&nbsp;👀
</mj-text>
<mj-button mj-class="button" href="https://housesof.world/location/france/montpellier?ref=newsletter">
Discover Montpellier photos
</mj-button>
<mj-button mj-class="button" href="https://housesof.world/location/australia/brisbane?ref=newsletter">
Discover Brisbane photos
</mj-button>
</mj-column>
</mj-section>
</mj-wrapper>
<!-- Footer -->
<mj-wrapper padding="13% 0 6%">
<mj-section>
<mj-column>
<mj-text mj-class="footer-text" padding="0 0 16px">
&copy; Houses Of – 2020
</mj-text>
<mj-text mj-class="footer-text" padding="16px 0 12px">
A project by
</mj-text>
<mj-image src="https://static.housesof.world/emails/logo-cetrucflotte.png" alt="Cetrucflotte logo" href="https://cetrucflotte.com" align="center" width="140px" />
<!-- Links -->
<mj-text mj-class="footer-info" padding-top="48px">
<a href="/" class="footer-link">Manage subscribe preferences</a>
</mj-text>
<mj-text mj-class="footer-info">
<a href="/" class="footer-link">Unsubscribe</a>
</mj-text>
<mj-text mj-class="footer-info">
See this email as a <a href="/" class="footer-link">web page</a>.
</mj-text>
</mj-column>
</mj-section>
</mj-wrapper>
</mj-body>
</mjml>

BIN
update-1/location-sete.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
update-1/photos.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 163 KiB