The Preview tab displays the generated html email in iframe.
You an see the generated HTML markup in HTML tab
and the PHP code used to generate this markup in PHP tab.
Click on the view it in your browser link in the email to see it in full screen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Disable auto telephone linking in iOS -->
<meta name="format-detection" content="telephone=no" />
<title>Beautiful html email build with Kristuff/Phtemail</title>
<style type="text/css">
/* --- RESET STYLES --- */
html { background-color:#eeeeee; margin:0; padding:0; }
body, #bodyTable, #bodyCell, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;}
table{border-collapse:collapse;}
table[id=bodyTable] {width:100%!important;margin:auto;max-width:500px!important; color:#56565c;font-weight:normal;}
img, a img{border:0; outline:none; text-decoration:none;height:auto; line-height:100%;}
a {text-decoration:none !important;border-bottom: 1px solid;}
h1, h2, h3, h4, h5, h6 {color:#5F5F5F; font-weight:normal; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-size:20px; line-height:125%; text-align:Left; letter-spacing:normal;
margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;
padding-top:0;padding-bottom:10px;padding-left:0;padding-right:0;}
p {margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;}
p + p {padding-top:10px;}
/* --- CLIENT-SPECIFIC STYLES --- */
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;}/* Force Hotmail/Outlook.com to display emails at full width. */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;}/* Force Hotmail/Outlook.com to display line heights normally. */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;}/* Remove spacing between tables in Outlook 2007 and up. */
#outlook a{padding:0;}/* Force Outlook 2007 and up to provide a "view in browser" message. */
img{-ms-interpolation-mode: bicubic;display:block;outline:none; text-decoration:none;}/* Force IE to smoothly render resized images. */
body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; font-weight:normal!important;}/* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
.ExternalClass td[class="ecxflexibleContainerBox"] h3 {padding-top: 10px !important;} /* Force hotmail to push 2-grid sub headers down */
/* --- FRAMEWORK HACKS & OVERRIDES --- */
h1{display:block;font-size:32px;font-style:normal;font-weight:200!important;line-height:100%;}
h2{display:block;font-size:27px;font-style:normal;font-weight:200!important;line-height:120%;}
h3{display:block;font-size:24px;font-style:normal;font-weight:200!important;line-height:110%;}
h4{display:block;font-size:22px;font-style:normal;font-weight:200!important;line-height:100%;}
h5{display:block;font-size:20px;font-style:normal;font-weight:200!important;line-height:110%;}
h6{display:block;font-size:18px;font-style:normal;font-weight:200!important;line-height:110%;}
.flexibleImage{height:auto;}
.linkRemoveBorder{border-bottom:0 !important;}
table[class=flexibleContainerCellDivider] {padding-bottom:0 !important;padding-top:0 !important;}
body, #bodyTable{background-color:#eeeeee;}
#emailHeader{background-color:#eeeeee;}
#emailBody{background-color:#FFFFFF;}
#emailFooter{background-color:#eeeeee;}
.emailButton{background-color:#3497D9; border-collapse:separate;}
.buttonContent{color:#FFFFFF; font-family:Helvetica; font-size:18px; font-weight:200; line-height:100%; padding:15px; text-align:center;}
.buttonContent a{color:#FFFFFF; display:block; text-decoration:none!important; border:0!important;}
/* --- MOBILE STYLES --- */
@media only screen and (max-width: 540px) {
/* --- CLIENT-SPECIFIC STYLES --- */
body{width:100% !important; min-width:100% !important;}/* Force iOS Mail to render the email at full width. */
/* --- FRAMEWORK STYLES --- */
table[id="emailHeader"],
table[id="emailBody"],
table[id="emailFooter"],
table[class="flexibleContainer"],
td[class="flexibleContainerCell"] {width:100% !important;}
td[class="flexibleContainerBox"],
td[class="flexibleContainerBox"] table {display: block;width: 100%;text-align: left;}
/* The following style rule makes any image classed with 'flexibleImage'fluid
when the query activates. Make sure you add an inline max-width to those
to prevent them from blowing out. */
td[class="imageContent"] img {height:auto !important; width:100% !important; max-width:100% !important; }
img[class="flexibleImage"]{height:auto !important; width:100% !important;max-width:100% !important;}
img[class="flexibleImageSmall"]{height:auto !important; width:auto !important;}
/* Create top space for every second element in a block */
table[class="flexibleContainerBoxNext"]{padding-top: 10px !important;}
/* Make buttons in the email span the full width of their container, allowingfor left- or right-handed ease of use. */
table[class="emailButton"]{width:100% !important;}
td[class="buttonContent"]{padding:0 !important;}
td[class="buttonContent"] a{padding:15px !important;}
}
</style>
<!-- Outlook Conditional CSS.
These two style blocks target Outlook 2007 & 2010 specifically, forcing
columns into a single vertical stack as on mobile clients. This is
primarily done to avoid the 'page break bug' and is optional.
More information here: https://templates.mailchimp.com/development/css/outlook-conditional-css
-->
<!--[if mso 12]>
<style type="text/css">
.flexibleContainer{display:block !important; width:100% !important;}
</style>
<![endif]-->
<!--[if mso 14]>
<style type="text/css">
.flexibleContainer{display:block !important; width:100% !important;}
</style>
<![endif]-->
</head>
<body bgcolor="#eeeeee" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<!-- CENTER THE EMAIL // -->
<center style="background-color:#eeeeee;">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="table-layout: fixed;max-width:100% !important;width: 100% !important;min-width: 100% !important;">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- EMAIL HEADER // -->
<table bgcolor="#eeeeee" width="560" border="0" cellpadding="0" cellspacing="0" id="emailHeader">
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="15" cellspacing="0" width="560" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="560" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" align="center" bgcolor="#eeeeee">
<div style="color:#56565C;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0">
<span>If you can't see this message, </span>
<a class="link" target="_blank" href="https://kristuff.fr/projects/phtemail/email" title="view in browser" style="color:#2E7BA2;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px">
view it in your browser</a>
</div>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
</table>
<!-- // EMAIL HEADER -->
<!-- EMAIL BODY // -->
<table bgcolor="#FFFFFF" width="560" border="0" cellpadding="0" cellspacing="0" id="emailBody">
<!-- ROW TWO COLUMNS CONTAINER // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#2E7BA2">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellspacing="0" cellpadding="30" bgcolor="#2E7BA2" width="560" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="560" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- COLUMN LEFT // -->
<td align="left" valign="top" class="flexibleContainerBox">
<table border="0" cellpadding="0" cellspacing="0" width="90" bgcolor="#2E7BA2" style="max-width:100%;">
<tr>
<td align="left" valign="top" class="textContent">
<!-- IMAGE -->
<img class="flexibleImage" src="https://kristuff.fr/assets/favicon/favicon-150.png" width="70" alt="logo" title="logo" style="max-width:70px;width:100%;display:block;"/>
</td>
</tr>
</table>
</td>
<!-- // COLUMN LEFT -->
<!-- COLUMN RIGHT // -->
<td align="right" valign="top" class="flexibleContainerBox">
<table class="flexibleContainerBoxNext" bgcolor="#2E7BA2" border="0" cellpadding="0" cellspacing="0" width="410" style="max-width:100%;">
<tr>
<td align="left" valign="top" class="textContent">
<h1 style="color:#FFFFFF">Kristuff/Phtemail</h1>
<h5 style="color:#FFFFFF">PHP Html email builder</h5>
</td>
</tr>
</table>
</td>
<!-- // COLUMN RIGHT -->
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // ROW TWO COLUMNS CONTAINER -->
<!-- ROW CONTAINER // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr >
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellspacing="0" cellpadding="30" bgcolor="#FFFFFF" width="560" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="560" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top" style="color:#56565c;" bgcolor="#FFFFFF">
<h4>Message</h4>
<p style="color:#56565c;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pretium ornare ornare. Donec dignissim rhoncus posuere.</p>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // ROW CONTAINER -->
<!-- ROW DIVIDER // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr style="padding-top:0;padding-bottom:0;">
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellspacing="0" cellpadding="30" bgcolor="#FFFFFF" width="560" class="flexibleContainer">
<tr>
<td style="padding-top:0;padding-bottom:0;" align="center" valign="top" width="560" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="border-top:1px solid #DDDDDD;"></td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // ROW DIVIDER -->
<!-- ROW CONTAINER // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr >
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellspacing="0" cellpadding="30" bgcolor="#FFFFFF" width="560" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="560" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top" style="color:#56565c;" bgcolor="#FFFFFF">
<h4>Another Message</h4>
<p style="color:#56565c;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pretium ornare ornare. Donec dignissim rhoncus posuere.</p>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // ROW CONTAINER -->
<!-- ROW BUTTON // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="padding-top:0;">
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="30" cellspacing="0" width="560" class="flexibleContainer">
<tr>
<td style="padding-top:0;" align="center" valign="top" width="560" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="50%" class="emailButton" style="background-color: #FFFFFF;">
<tr>
<td align="center" valign="middle" class="buttonContent" cellpadding="0" bgcolor="#2E7BA2" style="padding-top:15px;padding-bottom:15px;padding-left:15px;padding-right:15px;">
<a style="color:#EEEEEE;text-decoration:none;font-family:;font-size:20px;line-height:135%;" href="#" target="_blank">CONFIRMATION</a>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // ROW BUTTON -->
<!-- ROW IMAGE CONTAINER // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr >
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" width="560" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="560" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="imageContent" color="#56565c" bgcolor="#FFFFFF">
<!-- IMAGE -->
<img class="flexibleImage" src="https://kristuff.fr/assets/img/code-lines-1920x1080.jpg" width="560" alt="logo" title="headerImage" style="max-width:560px;width:100%;display:block;max-height:200px;"/>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // ROW IMAGE CONTAINER -->
<!-- ROW TWO COLUMNS CONTAINER // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellspacing="0" cellpadding="30" bgcolor="#FFFFFF" width="560" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="560" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- COLUMN LEFT // -->
<td align="left" valign="top" class="flexibleContainerBox">
<table border="0" cellpadding="0" cellspacing="0" width="220" bgcolor="#FFFFFF" style="max-width:100%;">
<tr>
<td align="left" valign="top" class="textContent">
<h4>Left column</h4>
<p style="color:#56565c;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pretium ornare ornare. Donec dignissim rhoncus posuere.</p>
</td>
</tr>
</table>
</td>
<!-- // COLUMN LEFT -->
<!-- COLUMN RIGHT // -->
<td align="right" valign="top" class="flexibleContainerBox">
<table class="flexibleContainerBoxNext" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" width="220" style="max-width:100%;">
<tr>
<td align="left" valign="top" class="textContent">
<h4>Right column</h4>
<p style="color:#56565c;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pretium ornare ornare. Donec dignissim rhoncus posuere.</p>
</td>
</tr>
</table>
</td>
<!-- // COLUMN RIGHT -->
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // ROW TWO COLUMNS CONTAINER -->
<!-- ROW DIVIDER // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr style="padding-top:0;padding-bottom:0;">
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellspacing="0" cellpadding="30" bgcolor="#FFFFFF" width="560" class="flexibleContainer">
<tr>
<td style="padding-top:0;padding-bottom:0;" align="center" valign="top" width="560" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="border-top:1px solid #DDDDDD;"></td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // ROW DIVIDER -->
<!-- ROW TWO COLUMNS CONTAINER // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellspacing="0" cellpadding="30" bgcolor="#FFFFFF" width="560" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="560" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- COLUMN LEFT // -->
<td align="left" valign="top" class="flexibleContainerBox">
<table border="0" cellpadding="0" cellspacing="0" width="150" bgcolor="#FFFFFF" style="max-width:100%;">
<tr>
<td align="left" valign="top" class="textContent">
<!-- IMAGE -->
<img class="flexibleImage" src="https://kristuff.fr/assets/img/code-lines-1920x1080.jpg" width="120" alt="logo" title="logo" style="max-width:120px;width:100%;display:block;"/>
</td>
</tr>
</table>
</td>
<!-- // COLUMN LEFT -->
<!-- COLUMN RIGHT // -->
<td align="right" valign="top" class="flexibleContainerBox">
<table class="flexibleContainerBoxNext" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" width="350" style="max-width:100%;">
<tr>
<td align="left" valign="top" class="textContent">
<h4>Right column</h4>
<p style="color:#56565c;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pretium ornare ornare. Donec dignissim rhoncus posuere.</p>
</td>
</tr>
</table>
</td>
<!-- // COLUMN RIGHT -->
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // ROW TWO COLUMNS CONTAINER -->
<!-- ROW DIVIDER // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr style="padding-top:0;padding-bottom:0;">
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellspacing="0" cellpadding="30" bgcolor="#FFFFFF" width="560" class="flexibleContainer">
<tr>
<td style="padding-top:0;padding-bottom:0;" align="center" valign="top" width="560" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="border-top:1px solid #DDDDDD;"></td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // ROW DIVIDER -->
<!-- ROW TWO COLUMNS CONTAINER // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellspacing="0" cellpadding="30" bgcolor="#FFFFFF" width="560" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="560" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- COLUMN LEFT // -->
<td align="left" valign="top" class="flexibleContainerBox">
<table border="0" cellpadding="0" cellspacing="0" width="235" bgcolor="#FFFFFF" style="max-width:100%;">
<tr>
<td align="left" valign="top" class="textContent">
<h4>Left column</h4>
<!-- IMAGE -->
<img class="flexibleImage" src="https://kristuff.fr/assets/img/code-lines-1920x1080.jpg" width="235" alt="image" title="image" style="max-width:235px;width:100%;display:block;"/>
<p style="padding-top:10px;color:#56565c;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pretium ornare ornare. Donec dignissim rhoncus posuere.</p>
</td>
</tr>
</table>
</td>
<!-- // COLUMN LEFT -->
<!-- COLUMN RIGHT // -->
<td align="right" valign="top" class="flexibleContainerBox">
<table class="flexibleContainerBoxNext" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" width="235" style="max-width:100%;">
<tr>
<td align="left" valign="top" class="textContent">
<h4>Right column</h4>
<!-- IMAGE -->
<img class="flexibleImage" src="https://kristuff.fr/assets/img/code-lines-1920x1080.jpg" width="235" alt="image" title="image" style="max-width:235px;width:100%;display:block;"/>
<p style="padding-top:10px;color:#56565c;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pretium ornare ornare. Donec dignissim rhoncus posuere.</p>
</td>
</tr>
</table>
</td>
<!-- // COLUMN RIGHT -->
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // ROW TWO COLUMNS CONTAINER -->
<!-- ROW DIVIDER // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr style="padding-top:0;padding-bottom:0;">
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellspacing="0" cellpadding="30" bgcolor="#FFFFFF" width="560" class="flexibleContainer">
<tr>
<td style="padding-top:0;padding-bottom:0;" align="center" valign="top" width="560" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="border-top:1px solid #DDDDDD;"></td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // ROW DIVIDER -->
<!-- ROW TWO COLUMNS CONTAINER // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellspacing="0" cellpadding="30" bgcolor="#FFFFFF" width="560" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="560" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- COLUMN LEFT // -->
<td align="left" valign="top" class="flexibleContainerBox">
<table border="0" cellpadding="0" cellspacing="0" width="235" bgcolor="#FFFFFF" style="max-width:100%;">
<tr>
<td align="left" valign="top" class="textContent">
<!-- IMAGE -->
<img class="flexibleImage" src="https://kristuff.fr/assets/img/code-lines-1920x1080.jpg" width="235" alt="image" title="image" style="max-width:235px;width:100%;display:block;"/>
</td>
</tr>
</table>
</td>
<!-- // COLUMN LEFT -->
<!-- COLUMN RIGHT // -->
<td align="right" valign="top" class="flexibleContainerBox">
<table class="flexibleContainerBoxNext" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" width="235" style="max-width:100%;">
<tr>
<td align="left" valign="top" class="textContent">
<h4>Right column</h4>
<p style="color:#56565c;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pretium ornare ornare. Donec dignissim rhoncus posuere.</p>
</td>
</tr>
</table>
</td>
<!-- // COLUMN RIGHT -->
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // ROW TWO COLUMNS CONTAINER -->
<!-- ROW TWO COLUMNS CONTAINER // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" width="560" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="560" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- COLUMN LEFT // -->
<td align="left" valign="top" class="flexibleContainerBox">
<table border="0" cellpadding="30" cellspacing="0" bgcolor="#2E7BA2" style="max-width:100%;">
<tr>
<td align="left" valign="top" class="textContent">
<h4 style="color:#EEEEEE">Left column</h4>
<p style="color:#EEEEEE;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:15px"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pretium ornare ornare. Donec dignissim rhoncus posuere.</p>
</td>
</tr>
</table>
</td>
<!-- // COLUMN LEFT -->
<!-- COLUMN RIGHT // -->
<td align="right" valign="top" class="flexibleContainerBox">
<table class="flexibleContainerBoxNext" bgcolor="#26A85C" border="0" cellpadding="30" cellspacing="0" style="max-width:100%;">
<tr>
<td align="left" valign="top" class="textContent">
<h4 style="color:#EEEEEE">Right column</h4>
<p style="color:#EEEEEE;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pretium ornare ornare. Donec dignissim rhoncus posuere.</p>
</td>
</tr>
</table>
</td>
<!-- // COLUMN RIGHT -->
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // ROW TWO COLUMNS CONTAINER -->
<!-- ROW TWO COLUMNS CONTAINER // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellspacing="0" cellpadding="30" bgcolor="#FFFFFF" width="560" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="560" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- COLUMN LEFT // -->
<td align="left" valign="top" class="flexibleContainerBox">
<table border="0" cellpadding="0" cellspacing="0" width="220" bgcolor="#FFFFFF" style="max-width:100%;">
<tr>
<td align="left" valign="top" class="textContent">
<!-- IMAGE -->
<img class="flexibleImage" src="https://kristuff.fr/assets/img/code-lines-1920x1080.jpg" width="220" alt="image" title="image" style="max-width:220px;width:100%;display:block;"/>
<h4 style="padding-top:10px">Left column</h4>
<p style="color:#56565c;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pretium ornare ornare. Donec dignissim rhoncus posuere.</p>
</td>
</tr>
</table>
</td>
<!-- // COLUMN LEFT -->
<!-- COLUMN RIGHT // -->
<td align="right" valign="top" class="flexibleContainerBox">
<table class="flexibleContainerBoxNext" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" width="220" style="max-width:100%;">
<tr>
<td align="left" valign="top" class="textContent">
<!-- IMAGE -->
<img class="flexibleImage" src="https://kristuff.fr/assets/img/code-lines-1920x1080.jpg" width="220" alt="image" title="image" style="max-width:220px;width:100%;display:block;"/>
<h4 style="padding-top:10px">Right column</h4>
<p style="color:#56565c;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pretium ornare ornare. Donec dignissim rhoncus posuere.</p>
</td>
</tr>
</table>
</td>
<!-- // COLUMN RIGHT -->
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // ROW TWO COLUMNS CONTAINER -->
<!-- ROW DIVIDER // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr style="padding-top:0;padding-bottom:0;">
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellspacing="0" cellpadding="30" bgcolor="#FFFFFF" width="560" class="flexibleContainer">
<tr>
<td style="padding-top:0;padding-bottom:0;" align="center" valign="top" width="560" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="border-top:1px solid #DDDDDD;"></td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // ROW DIVIDER -->
<!-- ROW CONTAINER // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr >
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellspacing="0" cellpadding="30" bgcolor="#FFFFFF" width="560" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="560" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="color:#56565c;" bgcolor="#FFFFFF">
<div style="background-color:#2E7BA2;padding-top:10px;padding-bottom:10px;padding-left:10px;padding-right:10px;color:#FFFFFF;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:16px">
<span>I am a SPAN element and </span>
<a class="link" target="_blank" href="#" title="link title" style="color:#FFFFFF;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:16px">
me a LINK element</a>
<span>. We are all in a DIV element with colored background (this is another SPAN who are talking)</span>
</div>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // ROW CONTAINER -->
<!-- ROW CONTAINER // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#141416">
<tr >
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellspacing="0" cellpadding="30" bgcolor="#141416" width="560" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="560" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="color:#6B6F75;" bgcolor="#141416">
<p style="font-size:22px;font-weight:200!important;color:#6B6F75;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif">Kristuff/Phtemail</p>
<p style="font-size:13px;color:#6B6F75;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif">Version <span style="color="#FFFFFF;">1.0</span><br>Made with <span style="color:#CA1F1F;">♥</span> in France</p>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // ROW CONTAINER -->
</table>
<!-- // EMAIL BODY -->
<!-- EMAIL FOOTER // -->
<table bgcolor="#eeeeee" width="560" border="0" cellpadding="0" cellspacing="0" id="emailFooter">
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="20" cellspacing="0" width="560" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="560" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" align="center" bgcolor="#eeeeee">
<div style="color:#56565C;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:13px;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0">
<span>Copyright © 2017-2020 </span>
<a class="link" target="_blank" href="https://kristuff.fr/" title="Kristuff" style="color:#2E7BA2;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:13px">
Kristuff</a>
<span> | All rights reserved<br> If you do not want to recieve emails from us, you can </span>
<a class="link" target="_blank" href="#" title="unsubscribe" style="color:#2E7BA2;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:13px">
unsubscribe</a>
</div>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
</table>
<!-- // EMAIL FOOTER -->
</td>
</tr>
</table>
<!-- // CENTER THE EMAIL -->
</center>
</body>
</html><?php
use Kristuff\Phtemail\HtmlEmailBuilder;
use Kristuff\Phtemail\HtmlElements;
$lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pretium ornare ornare. Donec dignissim rhoncus posuere.";
// Create a new instance of HtmlEmailBuilder
$builder = new HtmlEmailBuilder();
// We want all comments to be rendered in the html output (html comments to better see the
// email structure, and css comments to see why we add some hacks or client specific values)
$builder->renderHtmlComments(true);
$builder->renderCssComments(true);
// Set the meta title
$builder->setTitle('Beautiful html email build with Kristuff/Phtemail');
// overides the default styles
$builder->setEmailBodyWidth(560); // email body width
// $builder->body()->setDefaultRowPadding(30); // just for demo, 30 pixels is already the default value
// $builder->setBacksideDarkTheme(); // this the same as two following lines:
// $builder->setBacksideBackgroundColor(HtmlEmailBuilder::COLOR_DARKGRAY); // main (header, footer) background color
// $builder->setBacksideColor(HtmlEmailBuilder::COLOR_MEDIUMGRAY); // main (header, footer) color
// $builder->setEmailBodyBackgroundColor('#ffffff'); // email body background color
// $builder->setEmailBodyColor('#555555'); // email body text color
// -----------
// header part
// -----------
$builder->header()->setFontSize('14px');
$builder->header()->setPadding(15);
$headerDiv = new HtmlElements\Div();
$headerDiv->add(New HtmlElements\Span('If you can\'t see this message, '));
$headerDiv->add(new HtmlElements\Link('view it in your browser',
'https://kristuff.fr/projects/phtemail/email', 'view in browser', ['color' => HtmlEmailBuilder::COLOR_BLUE]));
$builder->header()->add($headerDiv);
// Tips: If you dont'have header but want to keep space between top window and email body then you can add a break line:
// $builder->header()->add(new HtmlElements\BreakLine);
// ---------
// body part
// ---------
// colored header
$emailHeader = new HtmlElements\RowTwoColumns();
$emailHeader->setBackground(HtmlEmailBuilder::COLOR_BLUE);
$emailHeader->leftColumn()->setColumnWidth(90);
$emailHeader->leftColumn()->add(new HtmlElements\Image(
'https://kristuff.fr/assets/favicon/favicon-150.png', 70,'logo', 'logo')
);
$emailHeader->rightColumn()->setColumnWidth(410);
$emailHeader->rightColumn()->add(new HtmlElements\Heading1('Kristuff/Phtemail', ['color' => "#FFFFFF"]));
$emailHeader->rightColumn()->add(new HtmlElements\Heading5('PHP Html email builder', ['color' => "#FFFFFF"]));
$builder->body()->add($emailHeader);
// normal row align left
$row = new HtmlElements\Row();
$row->add(new HtmlElements\Heading4('Message'));
$row->add(new HtmlElements\Paragraph($lorem));
$builder->body()->add($row);
// divider row
$divider = new HtmlElements\RowDivider();
$divider->removePaddingTop();
$divider->removePaddingBottom();
$divider->setColor('#DDDDDD');
$builder->body()->add($divider);
// normal row align left
$row2 = new HtmlElements\Row();
$row2->add(new HtmlElements\Heading4('Another Message'));
$row2->add(new HtmlElements\Paragraph($lorem));
$builder->body()->add($row2);
// button row align center
$rowButton = new HtmlElements\RowButton('CONFIRMATION', '#');
$rowButton->removePaddingTop(); // no need extra padding before previous element
//$rowButton->setButtonPadding('10');
$rowButton->setButtonBackground(HtmlEmailBuilder::COLOR_BLUE);
$builder->body()->add($rowButton);
// image full row
// TODO public image
$image = new HtmlElements\Image(
'https://kristuff.fr/assets/img/code-lines-1920x1080.jpg', 560, 'headerImage', 'logo');
$image->setMaxHeight(200); // image height is 'auto' so define max height could be set for big images
$imageRow = new HtmlElements\RowImage($image);
$imageRow->setPadding(0);
$builder->body()->add($imageRow); // before
// two columns row with custom width
$row2cols = new HtmlElements\RowTwoColumns();
$row2cols->leftColumn()->setColumnWidth(220);
$row2cols->rightColumn()->setColumnWidth(220);
$row2cols->leftColumn()->add(new HtmlElements\Heading4('Left column'));
$row2cols->leftColumn()->add(new HtmlElements\Paragraph($lorem));
$row2cols->rightColumn()->add(new HtmlElements\Heading4('Right column'));
$row2cols->rightColumn()->add(new HtmlElements\Paragraph($lorem));
$builder->body()->add($row2cols);
// re add previous declared divider
$builder->body()->add($divider);
// two columns row with custom width
$anotherRow2cols = new HtmlElements\RowTwoColumns();
$anotherRow2cols->leftColumn()->setColumnWidth(150);
$anotherRow2cols->rightColumn()->setColumnWidth(350);
$anotherRow2cols->leftColumn()->add(new HtmlElements\Image(
'https://kristuff.fr/assets/img/code-lines-1920x1080.jpg',120,'logo', 'logo'));
$anotherRow2cols->rightColumn()->add(new HtmlElements\Heading4('Right column'));
$anotherRow2cols->rightColumn()->add(new HtmlElements\Paragraph($lorem));
$builder->body()->add($anotherRow2cols);
// re add previous declared divider
$builder->body()->add($divider);
// two columns row with custom width
$row2colswithImage = new HtmlElements\RowTwoColumns();
$row2colswithImage->leftColumn()->setColumnWidth(235);
$row2colswithImage->leftColumn()->add(new HtmlElements\Heading4('Left column'));
$row2colswithImage->leftColumn()->add(new HtmlElements\Image(
'https://kristuff.fr/assets/img/code-lines-1920x1080.jpg',235,'image', 'image'));
$row2colswithImage->leftColumn()->add(new HtmlElements\Paragraph($lorem, ['padding-top' => '10px']));
$row2colswithImage->rightColumn()->setColumnWidth(235);
$row2colswithImage->rightColumn()->add(new HtmlElements\Heading4('Right column'));
$row2colswithImage->rightColumn()->add(new HtmlElements\Image(
'https://kristuff.fr/assets/img/code-lines-1920x1080.jpg',235,'image', 'image'));
$row2colswithImage->rightColumn()->add(new HtmlElements\Paragraph($lorem, ['padding-top' => '10px']));
$builder->body()->add($row2colswithImage);
// re add previous declared divider
$builder->body()->add($divider);
// two columns row with custom width
$anotheRow2colswithImage = new HtmlElements\RowTwoColumns();
$anotheRow2colswithImage->leftColumn()->setColumnWidth(235);
$anotheRow2colswithImage->rightColumn()->setColumnWidth(235);
$anotheRow2colswithImage->leftColumn()->add(new HtmlElements\Image(
'https://kristuff.fr/assets/img/code-lines-1920x1080.jpg',235,'image', 'image'));
$anotheRow2colswithImage->rightColumn()->add(new HtmlElements\Heading4('Right column'));
$anotheRow2colswithImage->rightColumn()->add(new HtmlElements\Paragraph($lorem));
$builder->body()->add($anotheRow2colswithImage);
// two columns row. Keep default column width (0 => auto so 50%)
$cols5050 = new HtmlElements\RowTwoColumns();
$cols5050->setPadding(0);
$cols5050->leftColumn()->setPadding(30);
$cols5050->leftColumn()->setBackground(HtmlEmailBuilder::COLOR_BLUE);
$cols5050->leftColumn()->add(new HtmlElements\Heading4('Left column', ['color' => "#EEEEEE"]));
$cols5050->leftColumn()->add(new HtmlElements\Paragraph(' ' . $lorem, ['color' => "#EEEEEE"]));
$cols5050->rightColumn()->setPadding(30);
$cols5050->rightColumn()->setBackground(HtmlEmailBuilder::COLOR_GREEN);
$cols5050->rightColumn()->add(new HtmlElements\Heading4('Right column', ['color' => "#EEEEEE"]));
$cols5050->rightColumn()->add(new HtmlElements\Paragraph($lorem, ['color' => "#EEEEEE"]));
$builder->body()->add($cols5050);
// two columns row with custom width
$yetAnotheRow2colswithImage = new HtmlElements\RowTwoColumns();
$yetAnotheRow2colswithImage->leftColumn()->setColumnWidth(220);
$yetAnotheRow2colswithImage->rightColumn()->setColumnWidth(220);
$yetAnotheRow2colswithImage->leftColumn()->add(new HtmlElements\Image(
'https://kristuff.fr/assets/img/code-lines-1920x1080.jpg',220,'image', 'image'));
$yetAnotheRow2colswithImage->leftColumn()->add(new HtmlElements\Heading4('Left column', ['padding-top' => '10px']));
$yetAnotheRow2colswithImage->leftColumn()->add(new HtmlElements\Paragraph($lorem));
$yetAnotheRow2colswithImage->rightColumn()->add(new HtmlElements\Image(
'https://kristuff.fr/assets/img/code-lines-1920x1080.jpg',220,'image', 'image'));
$yetAnotheRow2colswithImage->rightColumn()->add(new HtmlElements\Heading4('Right column', ['padding-top' => '10px']));
$yetAnotheRow2colswithImage->rightColumn()->add(new HtmlElements\Paragraph($lorem));
$builder->body()->add($yetAnotheRow2colswithImage);
// re add previous declared divider
$builder->body()->add($divider);
// div elements
$rowDiv = new HtmlElements\Row();
$rowDiv->setFontSize('16px');
$rowDiv->setAlign(HtmlEmailBuilder::H_ALIGN_CENTER);
$div = New HtmlElements\Div(
['background-color' => HtmlEmailBuilder::COLOR_BLUE,
'padding-top' => '10px',
'padding-bottom' => '10px',
'padding-left' => '10px',
'padding-right' => '10px',
]);
$div->setColor(HtmlEmailBuilder::COLOR_WHITE);
$div->add(new HtmlElements\Span('I am a SPAN element and '));
$div->add(new HtmlElements\Link('me a LINK element', '#', 'link title'));
$div->add(new HtmlElements\Span('. We are all in a DIV element with colored background (this is another SPAN who are talking)'));
$rowDiv->add($div);
$builder->body()->add($rowDiv);
// our footer
$footer = new HtmlElements\Row();
$footer->setBackground(HtmlEmailBuilder::COLOR_GRAY_900);
$footer->setAlign(HtmlEmailBuilder::H_ALIGN_CENTER);
$footer->setColor(HtmlEmailBuilder::COLOR_GRAY_500);
$footer->add(new HtmlElements\Paragraph('Kristuff/Phtemail', ['font-size' => '22px', 'font-weight' => '200!important']));
$footer->add(new HtmlElements\Paragraph('Version <span style="color="#FFFFFF;">1.0</span><br>' .
'Made with <span style="color:#CA1F1F;">♥</span> in France', ['font-size' => '13px']));
$builder->body()->add($footer);
// -----------
// footer part
// -----------
$builder->footer()->setPadding(20);
$builder->footer()->setFontSize('13px');
$divFooter = new HtmlElements\Div();
$divFooter->add(new HtmlElements\Span('Copyright © 2017-2020 '));
$divFooter->add(new HtmlElements\Link('Kristuff', 'https://kristuff.fr/', 'Kristuff', ['color' => HtmlEmailBuilder::COLOR_BLUE]));
$divFooter->add(new HtmlElements\Span(' | All rights reserved<br> If you do not want to recieve emails from us, you can '));
$divFooter->add(new HtmlElements\Link('unsubscribe', '#', 'unsubscribe', ['color' => HtmlEmailBuilder::COLOR_BLUE]));
$builder->footer()->add($divFooter);
// done so now get the html string
// and returns this html string for demo
$html = $builder->getHtml();
return $html;