This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html lang="en"> | |
<head> | |
<!-- | |
Hello HTML email developers! | |
The code in this email is based on Salted, | |
a responsive email template approach | |
Developed by Kevin Mandeville (@KEVINgotbounce), | |
Cleaned up by Jason Rodriguez (@rodriguezcommaj) | |
Presented by A List Apart (@alistapart) | |
Find out more at https://github.com/rodriguezcommaj/salted | |
And adjusted for Training team's needs. | |
--> | |
<meta charset="UTF-8"> | |
<!--Lets user to ise their own zoom in/out --> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<!--[if !mso]> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<![endif]--> | |
<!-- Adds support for Outlook at 120 dpi --> | |
<!--[if mso]> | |
<html xmlns:o="urn:schemas-microsoft-com:office:office"> | |
<xml> | |
<o:OfficeDocumentSettings> | |
<o:PixelsPerInch>96</o:PixelsPerInch> | |
</o:OfficeDocumentSettings> | |
</xml> | |
<![endif]--> | |
<meta content="telephone=no" name="format-detection"> | |
<title>Your Training Website Is Created</title> | |
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap" rel="stylesheet"> | |
<!-- <link rel="stylesheet" href="style.css"> --> | |
<style> | |
/* SETS DEFAULT STYLES */ | |
img { | |
border: 0; | |
height: auto; | |
line-height: 100%; | |
outline: none; | |
text-decoration: none; | |
} | |
table { | |
border-collapse: collapse!important; | |
} | |
body, | |
#emailBodyTable { | |
height: 100% !important; | |
margin: 0 !important; | |
padding: 0 !important; | |
width: 100% !important; | |
font-family: 'Open Sans', sans-serif; | |
font-size: 13px; | |
} | |
/* ======================= | |
Client specific styles | |
=========================== */ | |
/* Outlook.com/Hotmail appends any styling in the email to external class */ | |
.ExternalClass { | |
width: 100%; | |
} | |
.ExternalClass, | |
.ExternalClass p, | |
.ExternalClass font, | |
.ExternalClass td { | |
line-height: 100%; | |
} | |
/* Text resizing fix | |
1. Fixes text resizing by WebKit | |
2. Fixes text resizing on Windows Mobile clients | |
*/ | |
body, | |
table, | |
td, | |
div, | |
a { | |
-webkit-text-size-adjust: 100%; | |
-ms-text-size-adjust: 100%; | |
} | |
/* Removes resizing of fluid images in IE-based browsers */ | |
img { | |
-ms-interpolation-mode: bicubic; | |
} | |
/* Forces Read email in browser message in < Outlook 2013 */ | |
#outlook a { | |
padding: 0; | |
} | |
.ReadMsgBody { | |
width: 100%; | |
} | |
/* Adjusts extra spaces automatically added by Outlook */ | |
table, | |
td { | |
mso-table-lspace: 0pt; | |
mso-table-rspace: 0pt; | |
} | |
/* Fixes iOS blue links */ | |
a[x-apple-data-detectors] { | |
color: inherit !important; | |
text-decoration: underline !important; | |
font-size: inherit !important; | |
font-family: inherit !important; | |
line-height: inherit !important; | |
} | |
.iOSFooter a { | |
color: inherit !important; | |
text-decoration: none !important; | |
} | |
.iOSBody a { | |
color: inherit !important; | |
text-decoration: none !important; | |
} | |
/* Fixes blue/violet links in Outlook */ | |
a.MsoHyperlink { | |
mso-style-priority: 99; | |
color: inherit; | |
} | |
a.MsoHyperlinkFollowed { | |
mso-style-priority: 99; | |
color: inherit; | |
} | |
/* Fixes blue links in Gmail */ | |
.gmail-links { | |
color: #001d33 !important; | |
text-decoration: underline !important; | |
} | |
/* Fixes right space in Gmail and iOS */ | |
u+.body .responsive-table { | |
width: 100% !important; | |
width: 100vw !important; | |
} | |
/* ======================= | |
End of Client specific styles | |
=========================== */ | |
/* Hides the preheader in browser view */ | |
.preheader { | |
display: none !important; | |
font-size: 1px; | |
color: #fefefe; | |
line-height: 1px; | |
font-family: sans-serif; | |
max-height: 0; | |
max-width: 0; | |
opacity: 0; | |
overflow: hidden !important; | |
mso-hide: all; | |
} | |
/*Imports font in specific format */ | |
@font-face { | |
font-family: 'Open Sans'; | |
font-style: normal; | |
font-weight: 300; | |
src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN_r8OXOhpOqc.woff2) format('woff2'); | |
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; | |
} | |
@font-face { | |
font-family: 'Open Sans'; | |
font-style: normal; | |
font-weight: 400; | |
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2'); | |
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; | |
} | |
@font-face { | |
font-family: 'Open Sans'; | |
font-style: normal; | |
font-weight: 700; | |
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOXOhpOqc.woff2) format('woff2'); | |
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; | |
} | |
/* Mobile specific styles */ | |
@media only screen and (max-width: 640px) { | |
/** Using fluid tables */ | |
.container { | |
width: 100% !important; | |
} | |
/* Adjust header image */ | |
.header { | |
text-align: center; | |
padding: 0 !important; | |
} | |
.header img { | |
margin: 0 auto !important; | |
width: 100% !important; | |
height: auto !important; | |
max-width: 640px; | |
display: block; | |
} | |
/* Makes table full width */ | |
.responsive-table { | |
width: 100% !important; | |
} | |
/* Hides content on mobile */ | |
.mobile-hide { | |
display: none !important; | |
} | |
.mobile-hide img { | |
display: none !important; | |
} | |
/*======================= | |
Utility classes for mobile | |
=============================*/ | |
.box-padding { | |
padding: 16px 5% 16px 5% !important; | |
} | |
.email-copy { | |
padding: 10 5% 10 5% !important; | |
text-align: center !important; | |
} | |
.padding-top { | |
padding: 16px 0 0 0 !important; | |
} | |
.padding-bottom { | |
padding: 0 0 16px 0 !important; | |
} | |
.no-padding { | |
padding: 0 !important; | |
} | |
.mobile-container { | |
padding: 15px 5% 15px 5% !important; | |
} | |
.mobile-padding { | |
padding: 16px 20px 20px 16px !important; | |
} | |
.cta-container { | |
margin: 0 auto; | |
width: 100% !important; | |
} | |
.cta-link { | |
width: 70% !important; | |
padding: 16px !important; | |
border: 0!important; | |
font-size: 18px !important; | |
border-radius: 5px; | |
} | |
.footer-copy { | |
font-size: 13px !important; | |
font-weight: 400 !important; | |
color: #001d33 !important; | |
line-height: 1.2 !important; | |
} | |
} | |
</style> | |
<!--[if gte mso 9]><xml> | |
<o:OfficeDocumentSettings> | |
<o:AllowPNG/> | |
<o:PixelsPerInch>96</o:PixelsPerInch> | |
</o:OfficeDocumentSettings> | |
</xml><![endif]--> | |
</head> | |
<!--Solves gmail and iOS padding issues --> | |
<body style="margin: 0 0 0 0; padding: 0 0 0 0;" class="body"> | |
<!--Displays the preheader text inbox view | |
Hides the preheader in email view | |
--> | |
<div class="preheader" | |
style="display:none !important;visibility:hidden;height: 0; max-width: 0; opacity: 0; overflow: hidden;"> | |
<p> | |
Your training website has been created! | |
</p> | |
</div> | |
<!--Preheader hack: HIDDEN: Adds a white space to ensure the HTML text of the email's body doesn't run into the preview if there's a short preheader --> | |
<div style="display:none !important;visibility:hidden;max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all" | |
class="preheader"> | |
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ | |
</div> | |
<!-- Header section --> | |
<header> | |
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" id="#emailBodyTable"> | |
<tr> | |
<td bgcolor="#f5f5f5"> | |
<div align="center" style="padding: 0 15px 0 15px;"> | |
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="640" | |
class="container"> | |
<!-- HEADER image --> | |
<tr> | |
<td style="padding: 0 0 0 0;" class="header" class="mobile-hide"> | |
<table role="presentation" border="0" cellpadding="0" cellspacing="0" | |
style="width: 100%; max-width: 640px;"> | |
<tr> | |
<td width="100%" align="center" valign="top" class="mobile-hide"> | |
<table role="presentation" border="0" cellpadding="0" cellspacing="0"> | |
<tr> | |
<td align="center" valign="middle" height="220" width="640" bgcolor="#efefef" | |
><a href="https://kentico.com" | |
title="Go to Kentico website" target="_blank"> | |
<!--Update the src tag with the Permanent Url of the image in your Kentico instance--> | |
<img src="~/getmedia/4d8ce3c0-5c88-4aa1-879e-e4e52fa14fc1/header-image.jpg" alt=" Kentico Training" | |
width="640px" height="220px" class="header" | |
style="display: block;width:100%; max-width: 640px;font-family: sans-serif; color: #001d33; font-weight: bold; font-style: italic;margin:0;padding:0 0 0 0;border:none; text-align: center;"></a> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</div> | |
</td> | |
</tr> | |
</table> | |
</header> | |
<main> | |
<!-- Top section --> | |
<section> | |
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"> | |
<tr> | |
<td bgcolor="#f5f5f5" align="center" valign="top" style="padding: 0 0 16px 0" class="padding-bottom"> | |
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="640" | |
class="responsive-table"> | |
<tr> | |
<td bgcolor="#ffffff"> | |
<!-- Introduction --> | |
<table role="presentation" style="width: 100%; max-width: 640px;" border="0" | |
cellspacing="0" cellpadding="0"> | |
<tr> | |
<!--Outlook 2016 fix --> | |
<td class="email-copy" align="center" valign="top" | |
style="padding: 16px 0 16px 0; font-family:'Open Sans', sans-serif; color: #001d33; word-break:normal;" | |
> | |
<h1>{% Recipient.FirstName == "" ? "Hi," : "Hi " + Recipient.FirstName + ", "#%} | |
</h1> | |
</td> | |
</tr> | |
<tr> | |
<td class="email-copy no-padding" | |
align="center" valign="top" style="padding: 0 0 0 0; font-family:'Open Sans', sans-serif; color: #001d33; word-break:normal"> | |
<p> | |
Your training website has been created! The | |
website will be automatically deleted after | |
<span style="font-weight: 700" ;>{%deleted.date#%} | |
days</span>.</p> | |
</td> | |
</tr> | |
<tr> | |
<td class="email-copy" align="center" valign="top" | |
style="padding: 16px 16px 16px 16px; font-family:'Open Sans', sans-serif; color: #001d33;" >Your website runs at <a href="{%weburl%}" target="_blank" | |
title="Training website address"> | |
{%weburl%}</a>. | |
</td> | |
</tr> | |
<tr> | |
<td class="email-copy" | |
style="padding: 16px 0 16px 0; font-family:'Open Sans', sans-serif; color: #001d33; word-break:normal;" | |
align="center" valign="top"> | |
<p>To sign into your training | |
website, use:</p> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
<tr> | |
<td> | |
<!-- Two column section --> | |
<table role="presentation" bgcolor="#ffffff" border="0" cellspacing="0" | |
cellpadding="0" width="100%"> | |
<tr> | |
<td valign="top" style="padding: 0 0 0 0;" class="mobile-container"> | |
<!-- LEFT COLUMN --> | |
<table role="presentation" cellpadding="0" cellspacing="0" border="0" | |
width="47%" align="left" valign="top" class="responsive-table"> | |
<tr> | |
<td style="padding: 16px 16px 16px 16px"> | |
<table role="presentation" cellpadding="0" cellspacing="0" | |
border="0" width="100%"> | |
<tr> | |
<td class="mobile-padding" bgcolor="#ffffff" | |
valign="middle" | |
style="padding: 0 0 0 0; font-family: 'Open Sans', sans-serif; color: #001d33; font-size: 16px;" | |
align="center" valign="top">Username | |
</td> | |
</tr> | |
<tr> | |
<td class="mobile-padding" bgcolor="#ffffff" | |
style="padding:0 0 0 0; font-family: 'Open Sans', sans-serif; color: #001d33; font-size: 24px;" | |
align="center" valign="top"> | |
administrator | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
<!-- RIGHT COLUMN --> | |
<table role="presentation" cellpadding="0" cellspacing="0" border="0" | |
width="47%" align="right" valign="top" class="responsive-table"> | |
<tr> | |
<td style="padding: 16px 16px 16px 16px"> | |
<table cellpadding="0" cellspacing="0" border="0" | |
width="100%"> | |
<tr> | |
<td class="mobile-padding" bgcolor="#fff" | |
valign="middle" | |
style="padding: 0 0 0 0; font-family: 'Open Sans', sans-serif; color: #001d33; font-size: 16px;" | |
align="center" valign="top">Password | |
</td> | |
</tr> | |
<tr> | |
<td class="mobile-padding" bgcolor="#ffffff" | |
style="padding: 0 0 0 0; font-family: 'Open Sans', sans-serif; color: #001d33; font-size: 24px;" | |
align="center" valign="top"> | |
generatedpwd | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</section> | |
<section> | |
<!--Bottom section--> | |
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"> | |
<tr> | |
<td bgcolor="#f5f5f5" align="center" valign="top" style="padding: 0" class="no-padding"> | |
<table border="0" cellpadding="0" cellspacing="0" width="640" class="responsive-table"> | |
<tr> | |
<td bgcolor="#ffffff"> | |
<!-- Introduction --> | |
<table role="presentation" style="width:100%;max-width: 640px;" border="0" | |
cellspacing="0" cellpadding="0"> | |
<tr> | |
<td class="email-copy" | |
style="padding: 16px 0 16px 0; font-family:'Open Sans', sans-serif; color: #001d33;" | |
align="center" valign="top"> | |
<h2>Questions</h2> | |
</td> | |
</tr> | |
<tr> | |
<td class="email-copy no-padding" | |
style="padding: 0 0 0 0; font-family:'Open Sans', sans-serif; color: #001d33;" | |
align="center" valign="top"> | |
<p> | |
If you have any questions, contact us at | |
<br /> | |
<a class="gmail-links" href="mailto:training@kentico.com" | |
x-apple-data-detectors="true" target="_blank" | |
title="Contact Kentico training team">training@kentico.com</a>. | |
</p> | |
</td> | |
</tr> | |
<tr> | |
<td> | |
<table role="presentation" border="0" cellspacing="0" cellpadding="0" | |
width="100%" class="cta-container"> | |
<tr> | |
<td class="email-copy padding-top" style="padding: 16px 0 0 0;" | |
align="center" valign="top"> | |
<table role="presentation" border="0" cellspacing="0" | |
cellpadding="0" class="responsive-table"> | |
<tr> | |
<td align="center" valign="top" class="cta-container"> | |
<a href="{%weburl%}/admin" target="_blank" | |
title="Sign in to the training website" | |
style="display: inline-block;font-size: 16px;font-family: 'Open Sans', sans-serif; font-weight: 400; color: #ffffff; text-decoration: none; background-color: #001d33;;border-top: 15px solid #001d33; | |
border-bottom: 15px solid #001d33; | |
border-left: 25px solid #001d33; | |
border-right: 25px solid #001d33; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius:5px;" | |
class="cta-link"> | |
Sign in to | |
the training | |
website | |
</a> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
<tr> | |
<td class="email-copy" | |
style="padding: 16px 0 16px 0; font-family:'Open Sans', sans-serif; color: #001d33;" | |
align="center" valign="top"> | |
<p>Your Kentico Training team</p> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</section> | |
</main> | |
<!--Email footer --> | |
<footer> | |
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"> | |
<tr> | |
<td bgcolor="#f5f5f5" align="center" valign="top" style="padding: 0 0 0 0" class="no-padding"> | |
<table role="presentation" width="640" border="0" cellspacing="0" cellpadding="0" align="center" valign="top" | |
class="responsive-table"> | |
<tr> | |
<td style="padding: 0 0 0 0;" class="no-padding"> | |
<!-- Address - Unsubscribe - Privacy info - View in browser --> | |
<table role="presentation" style="width:100%;max-width: 640px;" border="0" | |
cellspacing="0" cellpadding="0" class="responsive-table"> | |
<tr> | |
<td> | |
<table> | |
<tr> | |
<td bgcolor="#efefef" style="padding: 0 0 16px 0" | |
class="padding-bottom"> | |
<table> | |
<tr> | |
<td class="footer-copy padding-top mobile-padding" | |
valign="top" align="center" valign="top" | |
style="padding: 16px 0 0 0; font-family: 'Open Sans', sans-serif; font-size: 12px; color: #001d33; line-height: 1.2;"> | |
Kentico software s.r.o., Nove sady | |
25, 602 | |
00 Brno, Czech | |
Republic. | |
<a href="https://www.kentico.com" | |
title="www.kentico.com" target="_blank" | |
style="font-family: 'Open Sans', sans-serif; color:#001d33; text-decoration: underline;"> | |
www.kentico.com</a> If | |
you | |
no longer wish to | |
receive this email, please update your | |
preferences by visiting your <a | |
href="{% HashUrl("https://www.kentico.com/consentsettings?email=" + Recipient.Email) #%}" | |
style="font-family:'Open Sans',sans-serif;font-size: 13px;color:#001d33;text-decoration:underline;" | |
title="Go to Kentico.com site">Consent | |
Settings page.</a> | |
</td> | |
</tr> | |
<tr> | |
<td class="footer-copy no-padding" valign="top" | |
align="center" valign="top" | |
style="padding: 0 0 0 0; font-family: 'Open Sans', sans-serif; font-size: 12px; color: #001d33; line-height: 1.2;"> | |
<a href="{% Email.ViewInBrowserUrl #%}" | |
target="_blank" | |
style="font-family:'Open Sans',sans-serif;color:#001d33;text-decoration:underline;">Preview | |
email in browser</a></td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</footer> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment