<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Basin Autoresponder</title>
<style> @import url("https://use.typekit.net/pbx1jyi.css"); </style>
<style type="text/css">
#outlook a {
padding: 0;
}
body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div,
.ExternalClass blockquote {
line-height: 100%;
}
.ExternalClass p,
.ExternalClass blockquote {
margin-bottom: 0;
margin: 0;
}
#backgroundTable {
margin: 0;
padding: 0;
width: 100% !important;
line-height: 100% !important;
}
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
.image_fix {
display: block;
}
p {
margin: 1em 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: black !important;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: black;
}
h1 a:active,
h2 a:active,
h3 a:active,
h4 a:active,
h5 a:active,
h6 a:active {
color: black;
}
h1 a:visited,
h2 a:visited,
h3 a:visited,
h4 a:visited,
h5 a:visited,
h6 a:visited {
color: black;
}
table td {
border-collapse: collapse;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
a {
color: #3498db;
}
p.domain a {
color: black;
}
hr {
border: 0;
background-color: #d8d8d8;
margin: 0;
margin-bottom: 0;
height: 1px;
}
@media (max-device-width: 667px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: none;
color: #3498db;
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: default;
color: #3498db !important;
pointer-events: auto;
cursor: default;
}
h1[class="profile-name"],
h1[class="profile-name"] a {
font-size: 32px !important;
line-height: 38px !important;
margin-bottom: 14px !important;
}
span[class="issue-date"],
span[class="issue-date"] a {
font-size: 14px !important;
line-height: 22px !important;
}
td[class="description-before"] {
padding-bottom: 28px !important;
}
td[class="description"] {
padding-bottom: 14px !important;
}
td[class="description"] span,
span[class="item-text"],
span[class="item-text"] span {
font-size: 16px !important;
line-height: 24px !important;
}
span[class="item-link-title"] {
font-size: 17px !important;
line-height: 24px !important;
}
span[class="item-header"] {
font-size: 22px !important;
}
span[class="item-link-description"],
span[class="item-link-description"] span {
font-size: 14px !important;
line-height: 22px !important;
}
.link-image {
width: 84px !important;
height: 84px !important;
}
.link-image img {
max-width: 100% !important;
max-height: 100% !important;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: none;
color: #3498db;
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: default;
color: #3498db !important;
pointer-events: auto;
cursor: default;
}
}
</style>
</head>
<body style="width:100% !important;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable" style="margin:0; padding:0; width:100% !important; line-height: 100% !important; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; margin-top:80px;" width="100%">
<tr>
<td width="10" valign="top"> </td>
<td valign="top" align="center">
<table cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%; max-width: 600px; background-color: #FFF; border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;" id="contentTable">
<tr>
<td width="600" valign="top" align="center" style="border-collapse:collapse;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; border: 1px solid #ECEFF3; box-shadow: 0 4px 4px 0 rgba(233,240,243,0.4); border-radius: 12px; padding: 52px;" width="100%">
<tr>
<td align="left" style="padding-bottom: 22px;" valign="top">
<div style="font-family: 'proxima-soft',sans-serif; line-height: 27px;font-size: 17px; color: #24292E;font-weight:bold;">Hey there!</div>
</td>
</tr>
<tr>
<td align="left" style="" valign="top">
<div style="font-family: 'proxima-soft',sans-serif; line-height: 27px;font-size: 17px; color: #24292E;">
<p style="margin-top:0; margin-bottom: 0;">You just received a new submission to your <strong>form_name</strong> form. Here is the data that was collected...</p>
<hr style="background-color: #ECEFF3; margin: 30px 0;" />
<!-- form_params -->
{{#each form_params}}
<p style="font-family: 'proxima-soft',sans-serif; line-height: 26px;font-size: 14px; color: #A0ABB2;font-weight:500; margin-top:0; margin-bottom:0;">{{this.name}}</p>
<p style="font-family: 'proxima-soft',sans-serif; line-height: 27px;font-size: 17px; color: #24292E;font-weight:400; margin-top:0; margin-bottom: 0;">{{this.value}}</p>
<div style="margin-top:20px;"></div>
{{/each}}
<!-- end of form_params -->
<!-- attachments -->
<p style="font-family: 'proxima-soft',sans-serif; line-height: 26px;font-size: 14px; color: #A0ABB2;font-weight:500; margin-top:0; margin-bottom:0;">attachment(s)</p>
{{#each attachment}}
<p style="font-family: 'proxima-soft',sans-serif; line-height: 27px;font-size: 17px; color: #02BAF2;font-weight:400; margin-top:0; margin-bottom: 0;"><a style="text-decoration: none;" href="{{this.public_url}}">{{this.name}}</a><span style="color: #C9CBCD; margin-left: 14px; font-size: 13px;">{{this.file_size}} bytes</span></p>
{{/each}}
<!-- end of attachments -->
<!-- view_in_dashboard button -->
<hr style="background-color: #F2F5F7; margin: 40px 0;" />
<div>
<a style="background-color:#24292E;border-radius:4px;color:#FFFFFF;display:inline-block;font-family: 'proxima-soft', sans-serif;font-size:17px;line-height:36px;text-align:center;text-decoration:none;-webkit-text-size-adjust:none; padding: 4px 15px; font-weight: 400;" href="https://usebasin.com/dashboard/">View in your dashboard</a>
</div>
<!-- end of view_in_dashboard button -->
</div>
</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="padding: 30px 52px 18px 52px;" valign="middle">
<span style="font-family: 'proxima-soft',sans-serif; line-height: 27px;font-size: 14px; color: #A7ADB5; vertical-align: middle;">Submission received at {{timestamp}}</span>
</td>
</tr>
<tr>
<td align="center" style="padding: 0 52px 52px 52px;" valign="middle">
<!-- business logo -->
<img alt="Cool Company Logo" style="vertical-align: middle;" src="logo_url" />
<!-- end of business logo -->
<!-- OR -->
<!-- our standard logo -->
<a style="border: 0;" href="https://usebasin.com">
<img alt="Powered by Basin" width="143" height="32" style="vertical-align: middle;" src="https://usebasin.com/powered_by_basin.png" />
</a>
<!-- end of our standard logo -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="10" valign="top"> </td>
</tr>
</table>
</body>
</html>