"builder"
Bootstrap 3.0.0 Snippet by evarevirus

<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=5&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\;">&star;</button> <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\starf\;">&starf;</button> <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\phone\;">&phone;</button> <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\check\;">&check;</button> <button class="ascii btn btn-secondary btn-sm" data-ascii="\&\cross\;">&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">

Related: See More


Questions / Comments: