I am using nodemailer to send a welcome mail after registration, the email template is stored in variable
var template = '</!DOCTYPE html><html><head><meta charset="utf-8"><meta http -equiv="X-UA-Compatible" content="IE=8; IE=edge,chrome=1"> <title> Cushbu Art</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">';
template+= '<style type="text/css"> * {margin: 0; padding: 0; -webkit-box-sizing: border-box; box - sizing: border-box; } p { margin: 0; }';
template+='@font -face{ font - family:"roboto-regular"; src: url("/Roboto-Regular.ttf/"); } body { } main { } . mailer { max - width : 100 %; width: 100 %; margin - left: auto; margin - right: auto; float: left; clear: both; } h2 { font - family: roboto-regular; font - size : 32 px; text - align : center; color: # fff; margin: 0; } h3 { font - family: roboto-regular; font - size : 52 px; text - align : center; color: # fff; margin: 0; } . mailer -head{ width: 100 %; padding: 52px 0; background: url("/mailer-head.png/") no-repeat; background -size: cover; background -color: #fff; } . mailer -body{ width: 100 %; background -color: #fff; float: left; padding: 24px 0; box - shadow : 0 2 px 5 px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } . mailer -body .logo{ height: 60 px; width: 160 px; margin: auto; display: block; background: url("/logo.jpg/") no-repeat center; background -size: contain; } . para { padding: 24px; max - width : 80 %; margin: auto; } . para p { font - size : 20 px; font - family: roboto-regular; text - align : center; color: # 161616; margin: 0; line - height: 34px; } . container-grid{ max - width : 100 %; margin - left: auto; margin - right: auto; width: 100 %; float: left; clear: both; } . grid - 2{ width: 50 %; float: left; padding: 8 px; } . btn { font - family: roboto-regular; font - size : 15 px; text - align : center; color: # fff; border - radius: 2px; text - decoration: none; padding: 8 px 12 px; background -color: #2066df; } . btn - refer{ float: right; } .btn-upload{ float: left; } .signature{ width: 100%; float: left; clear: both; } .signature p{ font-family: roboto-regular; font-size: 15px; text-align: center; padding: 6px 0; } .signature .sign{ height: 60px; width: 160px; margin: auto; display: block; background: url("/sign.png/") no-repeat center; background-size: contain; } .mailer-footer{ width: 100%; float: left; clear: both; padding: 24px 0; background-color: white; /*border-top: 1px solid #ededed;*/ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } .mailer-footer ul{ display: table; margin: auto; padding-bottom: 14px; } .mailer-footer ul li{ float: left; list-style: none; } .mailer-footer ul li a{ height: 47px; width: 47px; line-height: 0; border-radius: 50%; cursor: pointer; vertical-align: middle; margin: 10px; display: block; text-decoration: none; } .mailer-footer ul li a i{ padding: 16px 0; color: #fff; display: block; text-align: center; } .btn-fb { background-color: #3B5998; } .btn-li { background-color: #0082CA; } .btn-tw { background-color: #55ACEE; } .btn-ins { background-color: #3F729B; } .btn-pin { background-color: #C61118; } .btn-gplus { background-color: #DD4B39; } .mailer-footer p{ font-family: roboto-regular; font-size: 15px; text-align: center; }.mailer-footer .p-btm{ padding - bottom: 24px; } . mailer -footer .p-top{ padding - top: 24px; } . mailer -footer span{ font - family: roboto-regular; font - size : 15 px; display: block; text - align : center; } . container-mailer-body{ background: #e5e5e5; float: left; width: 100 %; padding: 0 24 px; clear: both; } footer{ background: #e5e5e5; padding: 10px; clear: both; } footer p { font - family: roboto-regular; font - size : 15 px; text - align : center; } </style></head>';
template+= '<body> <main> <div class="mailer"> <div class="mailer-head"> <h2>Welcome</h2> <h3>user!</h3> </div> <div class="container-mailer-body"> <div class="mailer-body"> <div class="logo"></div> <div class="para"> <p>I am so delighted you have joined us here at www.cushbu.com. Our goal is to create a global platform for artists to exhibit, sell their artworks and worldwide visibility for the International art community. If you are interested in promoting your artworks through our site, instead of the sale, we welcome to do so by an active participation by creating and sharing artworks. We heartily invite you to explore our site with new creative artworks and connect with the talented artists all around the world.</p> </div> <div class="container-grid"> <div class="grid-2"> <a href="" class="btn btn-refer">Refer Now</a> </div> <div class="grid-2"> <a href="" class="btn btn-upload">Ulpoad Art</a> </div> </div> <div class="signature"> <div class="sign"></div> <p>Sanata Balakrishnan</p> <p>COO - Cheif Operating Officer</p> </div> </div> <div class="mailer-footer"> <ul> <li> <a type="button" class="btn-floating btn-small btn-fb" href="https://www.facebook.com/cushbuart/" target="_blank"><i class="fa fa-facebook"></i></a> </li> <li> <a type="button" class="btn-floating btn-small btn-li" href="https://www.linkedin.com/company-beta/13277468/admin/updates/"><i class="fa fa-linkedin"></i></a> </li> <li> <a type="button" class="btn-floating btn-small btn-tw" href="https://twitter.com/cushbuart"><i class="fa fa-twitter"></i></a> </li> <li> <a type="button" class="btn-floating btn-small btn-ins" href="https://www.instagram.com/cushbuartlive/"><i class="fa fa-instagram"></i></a> </li> <li> <a type="button" class="btn-floating btn-small btn-pin" href="https://in.pinterest.com/cushbu/"><i class="fa fa-pinterest"></i></a> </li> <li> <a type="button" class="btn-floating btn-small btn-gplus" href="https://plus.google.com/u/0/communities/112678263549800648922"><i class="fa fa-google-plus"></i></a> </li> </ul> <p class="p-btm">You are receiving this email because you opted in at our website</p> <span>Email your thoughts to,</span> <span>info@cushbu.com</span> <span>contact@cushbu.com</span> <p class="p-top">You are receiving this email because you opted in at our website</p> </div> </div> </div> </main> < footer> < p > Copyright © 2017 Cushbu Art Pvt Ltd rights reserved</p> < / footer></body ></html>';
Email sending code
var transporter = nodemailer.createTransport({
host:'XX',
port :465,
secure: true,
auth: {
user: 'XX',
pass: 'XX'
}
});
var mailOptions = {
from: '<sender>', // sender address
to:'me@me.com', // list of receivers
subject: 'Welcome', // Subject line
html:template
};
transporter.sendMail(mailOptions, function(error, info) {
if (error) {
res.send(error);
return console.log("Error ",error);
}
res.send('Message %s sent: %s', info.messageId, info.response);
});
But the problem is email is not rendering the HTMl properly styles are missing