<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/emmanuelulloa/pen/aJBJQd?depth=everything&order=popularity&page=4&q=builder&show_forks=false" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro);
/***********************************************************************************************************************
MessageBox - A jQuery Plugin to replace Javascript's window.alert(), window.confirm() and window.prompt() functions
Author : Gaspare Sganga
Version : 2.2.1
License : MIT
Documentation : http://gasparesganga.com/labs/jquery-message-box/
***********************************************************************************************************************/
/*
You can customize your MessageBox style directly in this file
or override some classes/styles using an external CSS file loaded after this.
*/
/* Overlay */
.messagebox_overlay {
background-color: rgba(255, 255, 255, 0.6);
}
.messagebox_overlay *:focus {
outline: 0;
}
/* MessageBox */
.messagebox {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10pt;
font-style: normal;
font-weight: normal;
text-align: left;
color: #303030;
background-color: #fcfcfc;
border: 1px solid #c8c8c8;
box-shadow: 0px 2px 4px #a0a0a0;
max-height: 90%;
/* This value is useful only when "top" option is set to "auto" */
max-width: 90%;
min-width: 300px;
}
/* Content */
.messagebox_content {
padding: 20px;
padding-bottom: 0;
/* In order to preserve "padding-bottom" when the content is taller than the MessageBox and thus scrolled on the Y-axis, use the following :after pseudo-class "height" value instead of "padding-bottom" here! */
}
.messagebox_content:after {
content: "";
display: block;
flex: 0 0 auto;
height: 20px;
/* Use this value as if it was #messagebox_content's "padding-bottom" to preserve it when the content overflows Y-axis and the scrollbar is shown */
}
/* Label for Input */
.messagebox_content_label {
display: block;
width: 100%;
margin: auto;
margin-top: 10px;
font-style: italic;
}
/* Input (it applies to selects too) */
.messagebox_content_input {
display: block;
width: 100%;
margin: auto;
margin-top: 10px;
padding: 3px;
color: #303030;
border: 1px solid #909090;
font-family: inherit;
font-size: inherit;
font-style: normal;
font-weight: inherit;
text-align: left;
}
.messagebox_content_input:hover {
border-color: #707070;
}
.messagebox_content_input:focus {
border-color: #707070;
box-shadow: inset 0px 0px 3px #ffd540;
}
/* Input style when placed inside a label */
.messagebox_content_label .messagebox_content_input {
margin-top: 4px;
}
/* Select's "fake placeholder" */
.messagebox_content_input_selectplaceholder {
color: #909090;
}
/* Error */
.messagebox_content_error {
background-color: #fad0d5;
color: #a02020;
margin-top: 15px;
margin-bottom: -10px;
padding: 4px 6px;
border-radius: 2px;
}
/* Buttons */
.messagebox_buttons {
background-color: #f5f5f5;
border-top: 1px solid #c8c8c8;
padding: 10px 20px 0px 20px;
text-align: center;
}
.messagebox_buttons button {
font-family: inherit;
font-size: inherit;
font-weight: bold;
text-align: center;
min-width: 75px;
margin: 0px 4px 10px 4px;
padding: 5px 10px;
cursor: pointer;
color: #404040;
background-color: #e9e9e9;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0) 100%);
border: 1px solid #c0c0c0;
border-radius: 2px;
}
.messagebox_buttons button:hover {
color: #202020;
background-color: #f0f0f0;
}
.messagebox_buttons button:active {
background-color: #e6e6e6;
border: 1px solid #a0a0a0;
box-shadow: inset 0px 0px 6px #d0d0d0;
}
.messagebox_buttons button::-moz-focus-inner {
padding: 0;
border: 0;
}
pre {
background-color: #eee;
overflow: auto;
margin: 0 0 1em;
padding: .5em 1em;
}
pre code,
pre .line-number {
/* Ukuran line-height antara teks di dalam tag <code> dan <span class="line-number"> harus sama! */
font: normal normal 12px/14px "Courier New",Courier,Monospace;
color: black;
display: block;
}
pre .line-number {
float: left;
margin: 0 1em 0 -1em;
border-right: 1px solid;
text-align: right;
}
pre .line-number span {
display: block;
padding: 0 .5em 0 1em;
}
pre .cl {
display: block;
clear: both;
}
#unclosed-tag-finder-code {
background-color: #eee;
overflow: auto;
margin: 0 0 1em;
padding: .5em 1em;
}
#unclosed-tag-finder-code span,
#unclosed-tag-finder-code .line-number {
/* Ukuran line-height antara teks di dalam tag <code> dan <span class="line-number"> harus sama! */
font: normal normal 12px/14px "Courier New",Courier,Monospace;
color: black;
display: block;
}
#unclosed-tag-finder-code .line-number {
float: left;
margin: 0 1em 0 -1em;
border-right: 1px solid;
text-align: right;
}
#unclosed-tag-finder-code .line-number span {
display: block;
padding: 0 .5em 0 1em;
}
#unclosed-tag-finder-code .cl {
display: block;
clear: both;
}
body {
margin: 10px;
background-color: #CCC;
}
#code {
color: #D8D8D8;
background-color: #1D4E6D;
margin-top: 10px;
margin-bottom: 5px;
padding: 10px;
overflow: auto;
font: 18px 'Source Code Pro', 'Courier New', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
font-weight: bold;
width: 100%;
height: 400px;
resize: none;
outline: none;
border: none;
}
.btn {
cursor: pointer;
margin-bottom: 3px;
}
#logo {
cursor: pointer;
margin: 3px 10px 10px 3px;
display: inline-block;
width: 64px;
height: 64px;
text-shadow: 0px 0px 6px #969696;
border-width: 0px 0px 0px 0px;
border-style: solid solid solid solid;
border-color: #b366b3 #b366b3 #b366b3 #b366b3;
-webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16);
-ms-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16);
-o-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16);
border-radius: 10px;
font-weight: normal;
font-size: 24px;
color: #FFFFFF;
text-align: center;
padding-top: 16px;
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */
background: #1e5799;
/* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
/* IE6-9 */
}
.logo-wrapper h1 {
display: inline-block;
}
input[type=checkbox] {
margin-right: 5px;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
margin: 0;
}
#inliner-options-panel {
display: none;
}
#preview-frame {
display: block;
width: 100%;
height: 600px;
border: 1px solid #333333;
background-color: #ffffff;
overflow: auto;
transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
}
</style></head><body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="logo-wrapper">
<div id="logo">❬✉️❭</div>
<h1>HTML E-mail Builder</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="">Width:</label><input type="number" id="tablewidth" class="form-control" value="600" style="width:100px; display:inline; margin-left: 10px;" /> px.
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h5>Templates</h5>
<button id="html-email" class="btn btn-primary btn-md">HTML e-mail template</button>
<button id="reset-classes" class="btn btn-primary btn-md">Reset CSS</button>
<button id="dev-classes" class="btn btn-primary btn-md">Development Classes</button>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-12">
<h5>Layout</h5>
<button id="create-table" class="btn btn-primary btn-md">Create table</button>
<button id="create-cols" class="btn btn-primary btn-md">Create columns</button>
<button id="create-rows" class="btn btn-primary btn-md">Create rows</button>
<button id="create-link" class="btn btn-primary btn-md">Create link</button>
<button id="create-button" class="btn btn-primary btn-md">Create button</button>
<buttom id="empty-td" class="btn btn-primary btn-md">Empty cell</buttom>
<button id="create-image" class="btn btn-primary btn-md">Image</button>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-12">
<h5>Tools</h5>
<button id="create-hr" class="btn btn-secondary btn-sm">Create spacer</button>
<button id="create-vml-button" class="btn btn-secondary btn-sm">Create VML button</button>
<button id="unclosed-tag-finder-button" class="btn btn-secondary btn-sm">Unclosed tag finder</button>
<button id="media-query" class="btn btn-secondary btn-sm">Media Query</button>
<button id="short-tags" class="btn btn-secondary btn-sm">Apply Snippets</button>
<button id="remove-comments" class="btn btn-secondary btn-sm">Remove comments</button>
<h6>ASCII entities</h6>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&bull\;">•</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&lsquo\; \&rsquo\;">‘ ’</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&ldquo\; \&rdquo\;">“ ”</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&ndash\;">–</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&mdash\;">—</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#10072\;">❘</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\copy\;">©</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\reg\;">®</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&trade\;">™</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\cent\;">¢</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\pound\;">£</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\euro\;">€</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\yen\;">¥</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#9658\;">►</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#10140\;">➜</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\rarr\;">→</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#10093\;">❭</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#10095\;">❯</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#10097\;">❱</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#10006\;">✖</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\star\;">☆</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\starf\;">★</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\phone\;">☎</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\check\;">✓</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\cross\;">✗</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\hearts\;">♥</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#10052\;">❄</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#9729\;">☁</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#9728\;">☀</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#9835\;">♫</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#9776\;">☰</button>
<button class="ascii btn btn-secondary btn-sm" data-ascii="\&\#10005\;">✕</button>
</div>
</div>
<hr />
<!--div class="row" style="display: none;">
https://automattic.github.io/juice/index.build.js
<div class="col-md-12">
<h3>Inliner</h3>
<button id="code-inliner" class="btn btn-primary btn-md">Inline styles</button>
<button id="open-inliner-options" class="btn btn-primary btn-md">Inliner options</button>
</div>
</div -->
<!--div class="row" id="inliner-options-panel">
<div class="col-md-12">
<div class="form-group">
<ul>
<li><label><input type="checkbox" name="applyStyleTags" checked><strong>applyStyleTags</strong> - whether to inline styles in <style></style></label></li>
<li><label><input type="checkbox" name="removeStyleTags" checked><strong>removeStyleTags</strong> - whether to remove the original <style></style> tags after (possibly) inlining the css from them.</label></li>
<li><label><input type="checkbox" name="preserveMediaQueries" checked><strong>preserveMediaQueries</strong> - preserves all media queries (and contained styles) within <style></style> tags as a refinement when removeStyleTags is true. Other styles are removed.</label></li>
<li><label><input type="checkbox" name="preserveFontFaces" checked><strong>preserveFontFaces</strong> - preserves all @font-face within <style></style> tags as a refinement when removeStyleTags is true. Other styles are removed.</label></li>
<li><label><input type="checkbox" name="applyWidthAttributes" checked><strong>applyWidthAttributes</strong> - whether to use any CSS pixel widths to create width attributes on elements set in juice.widthElements.</label></li>
<li><label><input type="checkbox" name="applyHeightAttributes" checked><strong>applyHeightAttributes</strong> - whether to use any CSS pixel heights to create height attributes on elements set in juice.heightElements.</label></li>
<li><label><input type="checkbox" name="applyAttributesTableElements" checked><strong>applyAttributesTableElements</strong> - whether to create attributes for styles in juice.styleToAttribute on elements set in juice.tableElements.</label></li>
<li><label><input type="checkbox" name="inlinePseudoElements"><strong>inlinePseudoElements</strong> - Whether to insert pseudo elements (::before and ::after) as <span> into the DOM. Note: Inserting pseudo elements will modify the DOM and may conflict with CSS selectors elsewhere on the page (e.g., :last-child).</label></li>
<li><label><input type="checkbox" name="xmlMode"><strong>xmlMode</strong> - whether to output XML/XHTML with all tags closed. Note that the input must also be valid XML/XHTML or you will get undesirable results.</label></li>
<li><label><input type="checkbox" name="preserveImportant"><strong>preserveImportant</strong> - preserves !important in values.</label></li>
</ul>
</div>
</div>
</div -->
<div class="row">
<div class="col-md-12">
<div class="form-group" id="code-wrapper">
<textarea name="" id="code" cols="30" rows="10" class="form-control"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="unclosed-tag-finder-results"></div>
<pre id="unclosed-tag-finder-code"></pre>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button id="width-1" class="btn btn-sm btn-secondary">
