Skip to content

Instantly share code, notes, and snippets.

@lukas-xb
Last active March 26, 2020 10:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lukas-xb/c9c08be781850f37228ba75bdfab9dbb to your computer and use it in GitHub Desktop.
Save lukas-xb/c9c08be781850f37228ba75bdfab9dbb to your computer and use it in GitHub Desktop.
<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">
&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;
</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>&nbsp; &nbsp;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