mirror of
https://github.com/kevin-DL/complete-node-bootcamp.git
synced 2026-01-16 13:14:35 +00:00
Initial commit 🚀
This commit is contained in:
Jonas Schmedtmann
314
4-natours/starter/dev-data/templates/emailTemplate.pug
Normal file
314
4-natours/starter/dev-data/templates/emailTemplate.pug
Normal file
@@ -0,0 +1,314 @@
|
||||
//- Email template adapted from https://github.com/leemunroe/responsive-html-email-template
|
||||
//- Converted from HTML using https://html2pug.now.sh/
|
||||
|
||||
doctype html
|
||||
html
|
||||
head
|
||||
meta(name='viewport', content='width=device-width')
|
||||
meta(http-equiv='Content-Type', content='text/html; charset=UTF-8')
|
||||
title= subject
|
||||
|
||||
style.
|
||||
img {
|
||||
border: none;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
max-width: 100%;
|
||||
}
|
||||
body {
|
||||
background-color: #f6f6f6;
|
||||
font-family: sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
table {
|
||||
border-collapse: separate;
|
||||
mso-table-lspace: 0pt;
|
||||
mso-table-rspace: 0pt;
|
||||
width: 100%; }
|
||||
table td {
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.body {
|
||||
background-color: #f6f6f6;
|
||||
width: 100%;
|
||||
}
|
||||
.container {
|
||||
display: block;
|
||||
margin: 0 auto !important;
|
||||
/* makes it centered */
|
||||
max-width: 580px;
|
||||
padding: 10px;
|
||||
width: 580px;
|
||||
}
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 580px;
|
||||
padding: 10px;
|
||||
}
|
||||
.main {
|
||||
background: #ffffff;
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
}
|
||||
.wrapper {
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
}
|
||||
.content-block {
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.footer {
|
||||
clear: both;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.footer td,
|
||||
.footer p,
|
||||
.footer span,
|
||||
.footer a {
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
color: #000000;
|
||||
font-family: sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 35px;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
p li,
|
||||
ul li,
|
||||
ol li {
|
||||
list-style-position: inside;
|
||||
margin-left: 5px;
|
||||
}
|
||||
a {
|
||||
color: #55c57a;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.btn {
|
||||
box-sizing: border-box;
|
||||
width: 100%; }
|
||||
.btn > tbody > tr > td {
|
||||
padding-bottom: 15px; }
|
||||
.btn table {
|
||||
width: auto;
|
||||
}
|
||||
.btn table td {
|
||||
background-color: #ffffff;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.btn a {
|
||||
background-color: #ffffff;
|
||||
border: solid 1px #55c57a;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
color: #55c57a;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding: 12px 25px;
|
||||
text-decoration: none;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.btn-primary table td {
|
||||
background-color: #55c57a;
|
||||
}
|
||||
.btn-primary a {
|
||||
background-color: #55c57a;
|
||||
border-color: #55c57a;
|
||||
color: #ffffff;
|
||||
}
|
||||
.last {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.first {
|
||||
margin-top: 0;
|
||||
}
|
||||
.align-center {
|
||||
text-align: center;
|
||||
}
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
.align-left {
|
||||
text-align: left;
|
||||
}
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
.mt0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.mb0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.preheader {
|
||||
color: transparent;
|
||||
display: none;
|
||||
height: 0;
|
||||
max-height: 0;
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
mso-hide: all;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
}
|
||||
.powered-by a {
|
||||
text-decoration: none;
|
||||
}
|
||||
hr {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #f6f6f6;
|
||||
margin: 20px 0;
|
||||
}
|
||||
@media only screen and (max-width: 620px) {
|
||||
table[class=body] h1 {
|
||||
font-size: 28px !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
table[class=body] p,
|
||||
table[class=body] ul,
|
||||
table[class=body] ol,
|
||||
table[class=body] td,
|
||||
table[class=body] span,
|
||||
table[class=body] a {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
table[class=body] .wrapper,
|
||||
table[class=body] .article {
|
||||
padding: 10px !important;
|
||||
}
|
||||
table[class=body] .content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
table[class=body] .container {
|
||||
padding: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
table[class=body] .main {
|
||||
border-left-width: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
border-right-width: 0 !important;
|
||||
}
|
||||
table[class=body] .btn table {
|
||||
width: 100% !important;
|
||||
}
|
||||
table[class=body] .btn a {
|
||||
width: 100% !important;
|
||||
}
|
||||
table[class=body] .img-responsive {
|
||||
height: auto !important;
|
||||
max-width: 100% !important;
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
@media all {
|
||||
.ExternalClass {
|
||||
width: 100%;
|
||||
}
|
||||
.ExternalClass,
|
||||
.ExternalClass p,
|
||||
.ExternalClass span,
|
||||
.ExternalClass font,
|
||||
.ExternalClass td,
|
||||
.ExternalClass div {
|
||||
line-height: 100%;
|
||||
}
|
||||
.apple-link a {
|
||||
color: inherit !important;
|
||||
font-family: inherit !important;
|
||||
font-size: inherit !important;
|
||||
font-weight: inherit !important;
|
||||
line-height: inherit !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.btn-primary table td:hover {
|
||||
background-color: #2e864b !important;
|
||||
}
|
||||
.btn-primary a:hover {
|
||||
background-color: #2e864b !important;
|
||||
border-color: #2e864b !important;
|
||||
}
|
||||
}
|
||||
|
||||
body
|
||||
table.body(role='presentation', border='0', cellpadding='0', cellspacing='0')
|
||||
tbody
|
||||
tr
|
||||
td
|
||||
td.container
|
||||
.content
|
||||
// START CENTERED WHITE CONTAINER
|
||||
table.main(role='presentation')
|
||||
|
||||
// START MAIN AREA
|
||||
tbody
|
||||
tr
|
||||
td.wrapper
|
||||
table(role='presentation', border='0', cellpadding='0', cellspacing='0')
|
||||
tbody
|
||||
tr
|
||||
td
|
||||
// CONTENT
|
||||
p Hi NAME,
|
||||
p Welcome to Natours, we're glad to have you 🎉🙏
|
||||
p We're all a big familiy here, so make sure to upload your user photo so we get to know you a bit better!
|
||||
table.btn.btn-primary(role='presentation', border='0', cellpadding='0', cellspacing='0')
|
||||
tbody
|
||||
tr
|
||||
td(align='left')
|
||||
table(role='presentation', border='0', cellpadding='0', cellspacing='0')
|
||||
tbody
|
||||
tr
|
||||
td
|
||||
a(href='#', target='_blank') Upload user photo
|
||||
p If you need any help with booking your next tour, please don't hesitate to contact me!
|
||||
p - Jonas Schmedtmann, CEO
|
||||
|
||||
// START FOOTER
|
||||
.footer
|
||||
table(role='presentation', border='0', cellpadding='0', cellspacing='0')
|
||||
tbody
|
||||
tr
|
||||
td.content-block
|
||||
span.apple-link Natours Inc, 123 Nowhere Road, San Francisco CA 99999
|
||||
br
|
||||
| Don't like these emails?
|
||||
a(href='#') Unsubscribe
|
||||
//- td
|
||||
Reference in New Issue
Block a user