<body spellcheck="false">
<div class="editor">
<div class="editable-area">
<style>
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
a:link,
a:visited,
a:hover,
a:active {
color: #706FD3;
}
</style>
<table style="background-color: #f2f2f2; width: 100%;" border="0">
<tbody>
<tr>
<td align="center" cellpadding="16px" style="padding: 16px;">
<table border="0" width="100%" style="max-width: 600px; width: 100%; background-color: #ffffff; border-top-left-radius: 16px; border-top-right-radius: 16px; padding-top: 32px; padding-left: 32px; padding-right: 32px;">
<tbody>
<tr>
<td width="64px">
<img src="https://www.tiny.cloud/storage/codepens/email-marketing/vcf-logo-2.png" width="64" height="64" alt="Logo">
</td>
<td align="right">
<p style="font-family: 'Fira Sans', sans-serif; font-size: 17px; font-weight: bold;"><strong>Monthly Newsletter</strong></p>
</td>
</tr>
</tbody>
</table>
<table border="0" width="100%" style="max-width: 600px; width: 100%; background-color: #ffffff; padding-left: 32px; padding-right: 32px; padding-bottom: 32px;">
<tbody>
<tr>
<td>
<div id="tinymce" class="tinymce mce-content-body" style="font-family: "Fira Sans", sans-serif; color: rgb(34, 34, 34); font-size: 15px; line-height: 1.5; position: relative;" contenteditable="true" spellcheck="false">
<h1 style="font-size: 32px; font-weight: bold;" data-mce-style="font-size: 32px; font-weight: bold;">Looking back at the original Olympus OM1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a molestie nisl, at sodales diam. Vivamus ullamcorper convallis odio, ut lacinia sem. Proin in dui sit amet justo hendrerit imperdiet. Nullam ante felis, tincidunt et bibendum ut, pellentesque sit amet est. Proin cursus varius lorem ut porttitor.</p>
<p>Duis ac velit eget purus vestibulum finibus. Nulla facilisi. Donec sit amet erat metus. Phasellus id ullamcorper sapien, eget vehicula lectus. Integer at mi id sapien dignissim gravida id ac metus. Duis vel varius quam. Donec rhoncus nunc id arcu molestie, a auctor ipsum viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas id interdum lorem.</p>
<p><a style="background-color: #706fd3; padding: 12px 16px; color: #ffffff; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; text-decoration: none; display: inline-block;" href="https://tiny.cloud" data-mce-href="https://tiny.cloud" data-mce-style="background-color: #706fd3; padding: 12px 16px; color: #ffffff; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; text-decoration: none; display: inline-block;">Take me to the Olympus OM1</a></p>
</div>
</td>
</tr>
</tbody>
</table>
<table border="0" width="100%" style="max-width: 600px; width: 100%; background-color: #ffffff;">
<tbody>
<tr>
<td width="50%" style="padding-left: 32px; padding-right: 8px; padding-bottom: 32px; padding-top: 16px; vertical-align: top;">
<div class="tinymce mce-content-body" style="font-family: "Fira Sans", sans-serif; color: rgb(34, 34, 34); font-size: 15px; line-height: 1.5; position: relative;" id="mce_1" contenteditable="true" spellcheck="false">
<p><img src="https://www.tiny.cloud/storage/codepens/email-marketing/feature_0.png" alt="" width="100%" data-mce-src="images/feature_0.png"></p>
<h2 style="font-size: 18px;" data-mce-style="font-size: 18px;">Featured: Kodak Instamatic</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a molestie nisl, at sodales diam.</p>
<p><em><a href="https://unsplash.com/photos/ETRn6yJN5SM" data-mce-href="https://unsplash.com/photos/ETRn6yJN5SM">Photo by Britt Geiser, Unsplash</a></em></p>
</div>
</td>
<td width="50%" style="padding-right: 32px; padding-left: 8px; padding-bottom: 32px; padding-top: 16px; vertical-align: top;">
<div class="tinymce mce-content-body" style="font-family: "Fira Sans", sans-serif; color: rgb(34, 34, 34); font-size: 15px; line-height: 1.5; position: relative;" id="mce_2" contenteditable="true" spellcheck="false">
<p><img src="https://www.tiny.cloud/storage/codepens/email-marketing/feature_1.png" alt="" width="100%" data-mce-src="images/feature_1.png"></p>
<h2 style="font-size: 18px;" data-mce-style="font-size: 18px;">Featured: Pony 828</h2>
<p>Vestibulum a molestie nisl, at sodales diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><em><a href="https://unsplash.com/photos/ETRn6yJN5SM" data-mce-href="https://unsplash.com/photos/ETRn6yJN5SM">Photo by Markus Spiske on Unsplash</a></em></p>
</div>
</td>
</tr>
</tbody>
</table>
<table border="0" width="100%" style="max-width: 600px; width: 100%; background-color: #ffffff; padding-top: 32px; padding-left: 32px; padding-right: 32px; padding-bottom: 32px; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;">
<tbody>
<tr>
<td align="center">
<img src="https://www.tiny.cloud/storage/codepens/email-marketing/logo.jpg" width="48">
<p style="font-family: 'Fira Sans', sans-serif; font-size: 14px; color: #222222;">VintageCameraFoundation</p>
</td>
</tr>
<tr>
<td align="center">
<h3 style="font-family: 'Fira Sans', sans-serif; font-size: 14px; color: #aaaaaa;">Follow us on</h3>
<table>
<tbody>
<tr>
<td><a href="#"><img src="https://www.tiny.cloud/storage/codepens/email-marketing/social-fb.jpg" width="32"></a></td>
<td><a href="#"><img src="https://www.tiny.cloud/storage/codepens/email-marketing/social-twitter.jpg" width="32"></a></td>
<td><a href="#"><img src="https://www.tiny.cloud/storage/codepens/email-marketing/social-flickr.jpg" width="32"></a></td>
<td><a href="#"><img src="https://www.tiny.cloud/storage/codepens/email-marketing/social-instagram.jpg" width="32"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="width: 100%; margin-top: 32px" border="0">
<tbody>
<tr>
<td align="center">
<a href="#" style="font-family: 'Fira Sans', sans-serif; font-size: 14px; color: #5464BF;">Unsubscribe from this list</a>
<p style="font-family: 'Fira Sans', sans-serif; font-size: 14px; color: #aaaaaa;">© Vintage Camera Foundation, All rights reserved<br>Renmarkstorget 6, 90326 Umeå</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div role="application" class="tox tox-tinymce tox-tinymce-inline tox-tinymce--toolbar-sticky-off" style="visibility: hidden; display: none; position: absolute; top: 149px; left: 457px;">
<div class="tox-editor-container">
<div data-alloy-vertical-dir="toptobottom" tabindex="-1" class="tox-editor-header" style="max-width: 954.5px;">
<div role="group" class="tox-toolbar-overlord" aria-disabled="false">
<div role="group" class="tox-toolbar__primary">
<div title="" role="toolbar" data-alloy-tabstop="true" tabindex="-1" class="tox-toolbar__group"><button title="Formats" aria-label="Formats" aria-haspopup="true" type="button" unselectable="on" tabindex="-1" class="tox-tbtn tox-tbtn--select tox-tbtn--bespoke" aria-expanded="false" style="user-select: none;"><span class="tox-tbtn__select-label">Paragraph</span>
<div class="tox-tbtn__select-chevron"><svg width="10" height="10">
<path fill-rule="nonzero" d="M5.2 5.8l2.4-2.5a.8.8 0 011 1L5.3 8 1.6 4.4a.8.8 0 011-1l2.6 2.4z"></path>
</svg></div>
</button></div>
<div title="" role="toolbar" data-alloy-tabstop="true" tabindex="-1" class="tox-toolbar__group"><button aria-label="Bold" title="Bold" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false" aria-pressed="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path d="M5.7 15c-.3 0-.4 0-.5-.2l-.2-.4V3.6c0-.2 0-.4.2-.5l.5-.1H10c1.3 0 2.3.3 3 .8.6.6 1 1.3 1 2.2 0 .6-.2 1.1-.6 1.6-.4.5-.8.8-1.3 1v.1c.3 0 .7.2 1 .5.4.2.7.6 1 1 .2.4.3.8.3 1.3 0 1.2-.3 2-1 2.6-.8.6-1.9.9-3.3.9H5.7zm4.2-7c.6 0 1-.2 1.4-.5.4-.3.6-.7.6-1.1 0-1-.7-1.5-2-1.5H7v3h3zm.5 5c.6 0 1.1 0 1.5-.4.3-.2.5-.7.5-1.2s-.2-.9-.6-1.2c-.4-.2-1-.4-1.7-.4H7v3.3h3.4z" fill-rule="evenodd"></path>
</svg></span></button><button aria-label="Italic" title="Italic" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false" aria-pressed="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path d="M12.4 3l-.1.7H12c-.6 0-1 .1-1.2.3-.2.2-.4.5-.5 1l-1.7 8.2v.4c0 .5.3.7 1.1.7h.2l-.1.7H5l.1-.7h.3c.9 0 1.4-.4 1.6-1.2l1.8-8.3v-.4c0-.5-.4-.7-1.2-.7h-.2l.1-.7h5z" fill-rule="evenodd"></path>
</svg></span></button><button aria-label="Underline" title="Underline" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false" aria-pressed="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path d="M13 3c.6 0 1 .4 1 1v4.5a4 4 0 01-.4 1.8l-1 1.4a5.3 5.3 0 01-5.5 1 5 5 0 01-1.6-1c-.5-.4-.8-.9-1.1-1.4A4 4 0 014 8.4V4c0-.6.4-1 1-1s1 .4 1 1v4.5c0 .3 0 .6.2 1l.6.7A3.3 3.3 0 009 11a3.4 3.4 0 002.2-.8c.3-.2.4-.5.6-.8l.2-.9V4c0-.6.4-1 1-1zM5 14h8c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 010-2z" fill-rule="evenodd"></path>
</svg></span></button></div>
<div title="" role="toolbar" data-alloy-tabstop="true" tabindex="-1" class="tox-toolbar__group"><button aria-label="Insert/edit link" title="Insert/edit link" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false" aria-pressed="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<g fill-rule="nonzero">
<path d="M8 8h1a2 2 0 110 4H5a2 2 0 01-.7-3.9l.5-.2-.6-1.8-.5.1A4 4 0 005 14h4a4 4 0 100-8H8v2z"></path>
<path d="M10 9H9a2 2 0 110-4h4a2 2 0 01.7 3.9l-.5.2.6 1.8.5-.1A4 4 0 0013 3H9a4 4 0 100 8h1V9z"></path>
</g>
</svg></span></button><button aria-label="Insert/edit image" title="Insert/edit image" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false" aria-pressed="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path fill-rule="nonzero" d="M6 15l2.4-2.5L7 11.1 3 15h3zm2 0h7v-2l-2.5-2.4L8.1 15zm7-4V3H3v10l4-4 2.5 2.4 3-3L15 11zM3 1h12a2 2 0 012 2v12a2 2 0 01-2 2H3a2 2 0 01-2-2V3c0-1.1.9-2 2-2zm6 5a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg></span></button><button aria-label="Emoticons" title="Emoticons" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path fill-rule="nonzero" d="M6 8c.5 0 1-.5 1-1s-.5-1-1-1a1 1 0 00-1 1c0 .5.5 1 1 1zm6 0c.6 0 1-.5 1-1s-.4-1-1-1a1 1 0 00-1 1c0 .5.4 1 1 1zm-3 5.5c2.1 0 4-1.5 4.4-3.5H4.6c.5 2 2.3 3.5 4.4 3.5zM9 1a8 8 0 100 16A8 8 0 009 1zm0 14.5a6.5 6.5 0 110-13 6.5 6.5 0 010 13z"></path>
</svg></span></button></div>
<div title="" role="toolbar" data-alloy-tabstop="true" tabindex="-1" class="tox-toolbar__group"><button title="Align" aria-label="Align" aria-haspopup="true" type="button" unselectable="on" tabindex="-1" class="tox-tbtn tox-tbtn--select" aria-expanded="false" style="user-select: none;"><span class="tox-icon tox-tbtn__icon-wrap"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path fill-rule="nonzero" d="M4 6a1 1 0 110-2h10a1 1 0 010 2H4zm0 4a1 1 0 110-2h6a1 1 0 010 2H4zm0 4a1 1 0 010-2h10a1 1 0 010 2H4z"></path>
</svg></span></span>
<div class="tox-tbtn__select-chevron"><svg width="10" height="10">
<path fill-rule="nonzero" d="M5.2 5.8l2.4-2.5a.8.8 0 011 1L5.3 8 1.6 4.4a.8.8 0 011-1l2.6 2.4z"></path>
</svg></div>
</button><button aria-label="Bullet list" title="Bullet list" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false" aria-pressed="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path fill-rule="nonzero" d="M8 7a1 1 0 110-2h6a1 1 0 010 2H8zm0 6a1 1 0 010-2h6a1 1 0 010 2H8zM2.5 6c0-.4.1-.8.4-1 .3-.4.7-.5 1.1-.5.4 0 .8.1 1 .4.4.3.5.7.5 1.1 0 .4-.1.8-.4 1-.3.4-.7.5-1.1.5-.4 0-.8-.1-1-.4-.4-.3-.5-.7-.5-1.1zm0 6c0-.4.1-.8.4-1 .3-.4.7-.5 1.1-.5.4 0 .8.1 1 .4.4.3.5.7.5 1.1 0 .4-.1.8-.4 1-.3.4-.7.5-1.1.5-.4 0-.8-.1-1-.4-.4-.3-.5-.7-.5-1.1z"></path>
</svg></span></button><button aria-label="Numbered list" title="Numbered list" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false" aria-pressed="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path fill-rule="nonzero" d="M8 7a1 1 0 110-2h6a1 1 0 010 2H8zm0 6a1 1 0 010-2h6a1 1 0 010 2H8zM4 4v3.5a.5.5 0 01-1 0V5h-.5a.5.5 0 010-1H4zm-1 8.8l.2.2h1.3a.5.5 0 110 1H2.9a1 1 0 01-.9-1V13c0-.4.3-.8.6-1l1.2-.4.2-.3a.2.2 0 00-.2-.2H2.5a.5.5 0 01-.5-.5c0-.3.2-.5.5-.5h1.6c.5 0 .9.4.9 1v.1c0 .4-.3.8-.6 1l-1.2.4-.2.3z"></path>
</svg></span></button></div>
<div title="" role="toolbar" data-alloy-tabstop="true" tabindex="-1" class="tox-toolbar__group"><button aria-label="Source code" title="Source code" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<g fill-rule="nonzero">
<path d="M6.8 12.7c.3.3.3.8 0 1-.4.4-.9.4-1.2 0L1.2 9.7a.8.8 0 010-1.2l4.4-4.2c.3-.3.8-.3 1.2 0 .3.3.3.8 0 1.1L3 9l3.8 3.7zM11.2 12.7c-.3.3-.3.8 0 1 .4.4.9.4 1.2 0l4.4-4.1c.3-.3.3-.8 0-1.2l-4.4-4.2a.8.8 0 00-1.2 0c-.3.3-.3.8 0 1.1L15 9l-3.8 3.7z"></path>
</g>
</svg></span></button><button aria-label="Clear formatting" title="Clear formatting" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path fill-rule="nonzero" d="M13 13l1.7-1.8a.8.8 0 011 1L14.2 14l1.7 1.7a.8.8 0 01-1 1L13 15.2l-1.7 1.7a.8.8 0 01-1-1l1.6-1.8-1.7-1.7a.8.8 0 011-1l1.8 1.6zM9 3h4a1 1 0 010 2H9.8L8 11.3a1 1 0 01-2-.6L7.7 5H5a1 1 0 110-2h4zM4 15a1 1 0 010-2h5a1 1 0 010 2H4z"></path>
</svg></span></button></div>
</div>
</div>
<div class="tox-anchorbar"></div>
</div>
</div>
<div aria-hidden="true" class="tox-throbber" style="display: none;"></div>
</div>
<div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative; display: none;"></div>
<div role="application" class="tox tox-tinymce tox-tinymce-inline tox-tinymce--toolbar-sticky-off" style="visibility: hidden; display: none; position: absolute; top: 668px; left: 314px;">
<div class="tox-editor-container">
<div data-alloy-vertical-dir="toptobottom" tabindex="-1" class="tox-editor-header" style="max-width: 814px;">
<div role="group" class="tox-toolbar-overlord" aria-disabled="false">
<div role="group" class="tox-toolbar__primary">
<div title="" role="toolbar" data-alloy-tabstop="true" tabindex="-1" class="tox-toolbar__group"><button title="Formats" aria-label="Formats" aria-haspopup="true" type="button" unselectable="on" tabindex="-1" class="tox-tbtn tox-tbtn--select tox-tbtn--bespoke" aria-expanded="false" style="user-select: none;"><span class="tox-tbtn__select-label">Paragraph</span>
<div class="tox-tbtn__select-chevron"><svg width="10" height="10">
<path fill-rule="nonzero" d="M5.2 5.8l2.4-2.5a.8.8 0 011 1L5.3 8 1.6 4.4a.8.8 0 011-1l2.6 2.4z"></path>
</svg></div>
</button></div>
<div title="" role="toolbar" data-alloy-tabstop="true" tabindex="-1" class="tox-toolbar__group"><button aria-label="Bold" title="Bold" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false" aria-pressed="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path d="M5.7 15c-.3 0-.4 0-.5-.2l-.2-.4V3.6c0-.2 0-.4.2-.5l.5-.1H10c1.3 0 2.3.3 3 .8.6.6 1 1.3 1 2.2 0 .6-.2 1.1-.6 1.6-.4.5-.8.8-1.3 1v.1c.3 0 .7.2 1 .5.4.2.7.6 1 1 .2.4.3.8.3 1.3 0 1.2-.3 2-1 2.6-.8.6-1.9.9-3.3.9H5.7zm4.2-7c.6 0 1-.2 1.4-.5.4-.3.6-.7.6-1.1 0-1-.7-1.5-2-1.5H7v3h3zm.5 5c.6 0 1.1 0 1.5-.4.3-.2.5-.7.5-1.2s-.2-.9-.6-1.2c-.4-.2-1-.4-1.7-.4H7v3.3h3.4z" fill-rule="evenodd"></path>
</svg></span></button><button aria-label="Italic" title="Italic" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false" aria-pressed="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path d="M12.4 3l-.1.7H12c-.6 0-1 .1-1.2.3-.2.2-.4.5-.5 1l-1.7 8.2v.4c0 .5.3.7 1.1.7h.2l-.1.7H5l.1-.7h.3c.9 0 1.4-.4 1.6-1.2l1.8-8.3v-.4c0-.5-.4-.7-1.2-.7h-.2l.1-.7h5z" fill-rule="evenodd"></path>
</svg></span></button><button aria-label="Underline" title="Underline" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false" aria-pressed="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path d="M13 3c.6 0 1 .4 1 1v4.5a4 4 0 01-.4 1.8l-1 1.4a5.3 5.3 0 01-5.5 1 5 5 0 01-1.6-1c-.5-.4-.8-.9-1.1-1.4A4 4 0 014 8.4V4c0-.6.4-1 1-1s1 .4 1 1v4.5c0 .3 0 .6.2 1l.6.7A3.3 3.3 0 009 11a3.4 3.4 0 002.2-.8c.3-.2.4-.5.6-.8l.2-.9V4c0-.6.4-1 1-1zM5 14h8c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 010-2z" fill-rule="evenodd"></path>
</svg></span></button></div>
<div title="" role="toolbar" data-alloy-tabstop="true" tabindex="-1" class="tox-toolbar__group"><button aria-label="Insert/edit link" title="Insert/edit link" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false" aria-pressed="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<g fill-rule="nonzero">
<path d="M8 8h1a2 2 0 110 4H5a2 2 0 01-.7-3.9l.5-.2-.6-1.8-.5.1A4 4 0 005 14h4a4 4 0 100-8H8v2z"></path>
<path d="M10 9H9a2 2 0 110-4h4a2 2 0 01.7 3.9l-.5.2.6 1.8.5-.1A4 4 0 0013 3H9a4 4 0 100 8h1V9z"></path>
</g>
</svg></span></button><button aria-label="Insert/edit image" title="Insert/edit image" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false" aria-pressed="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path fill-rule="nonzero" d="M6 15l2.4-2.5L7 11.1 3 15h3zm2 0h7v-2l-2.5-2.4L8.1 15zm7-4V3H3v10l4-4 2.5 2.4 3-3L15 11zM3 1h12a2 2 0 012 2v12a2 2 0 01-2 2H3a2 2 0 01-2-2V3c0-1.1.9-2 2-2zm6 5a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg></span></button><button aria-label="Emoticons" title="Emoticons" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path fill-rule="nonzero" d="M6 8c.5 0 1-.5 1-1s-.5-1-1-1a1 1 0 00-1 1c0 .5.5 1 1 1zm6 0c.6 0 1-.5 1-1s-.4-1-1-1a1 1 0 00-1 1c0 .5.4 1 1 1zm-3 5.5c2.1 0 4-1.5 4.4-3.5H4.6c.5 2 2.3 3.5 4.4 3.5zM9 1a8 8 0 100 16A8 8 0 009 1zm0 14.5a6.5 6.5 0 110-13 6.5 6.5 0 010 13z"></path>
</svg></span></button></div>
<div title="" role="toolbar" data-alloy-tabstop="true" tabindex="-1" class="tox-toolbar__group"><button title="Align" aria-label="Align" aria-haspopup="true" type="button" unselectable="on" tabindex="-1" class="tox-tbtn tox-tbtn--select" aria-expanded="false" style="user-select: none;"><span class="tox-icon tox-tbtn__icon-wrap"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path fill-rule="nonzero" d="M4 6a1 1 0 110-2h10a1 1 0 010 2H4zm0 4a1 1 0 110-2h6a1 1 0 010 2H4zm0 4a1 1 0 010-2h10a1 1 0 010 2H4z"></path>
</svg></span></span>
<div class="tox-tbtn__select-chevron"><svg width="10" height="10">
<path fill-rule="nonzero" d="M5.2 5.8l2.4-2.5a.8.8 0 011 1L5.3 8 1.6 4.4a.8.8 0 011-1l2.6 2.4z"></path>
</svg></div>
</button><button aria-label="Bullet list" title="Bullet list" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false" aria-pressed="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path fill-rule="nonzero" d="M8 7a1 1 0 110-2h6a1 1 0 010 2H8zm0 6a1 1 0 010-2h6a1 1 0 010 2H8zM2.5 6c0-.4.1-.8.4-1 .3-.4.7-.5 1.1-.5.4 0 .8.1 1 .4.4.3.5.7.5 1.1 0 .4-.1.8-.4 1-.3.4-.7.5-1.1.5-.4 0-.8-.1-1-.4-.4-.3-.5-.7-.5-1.1zm0 6c0-.4.1-.8.4-1 .3-.4.7-.5 1.1-.5.4 0 .8.1 1 .4.4.3.5.7.5 1.1 0 .4-.1.8-.4 1-.3.4-.7.5-1.1.5-.4 0-.8-.1-1-.4-.4-.3-.5-.7-.5-1.1z"></path>
</svg></span></button><button aria-label="Numbered list" title="Numbered list" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false" aria-pressed="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path fill-rule="nonzero" d="M8 7a1 1 0 110-2h6a1 1 0 010 2H8zm0 6a1 1 0 010-2h6a1 1 0 010 2H8zM4 4v3.5a.5.5 0 01-1 0V5h-.5a.5.5 0 010-1H4zm-1 8.8l.2.2h1.3a.5.5 0 110 1H2.9a1 1 0 01-.9-1V13c0-.4.3-.8.6-1l1.2-.4.2-.3a.2.2 0 00-.2-.2H2.5a.5.5 0 01-.5-.5c0-.3.2-.5.5-.5h1.6c.5 0 .9.4.9 1v.1c0 .4-.3.8-.6 1l-1.2.4-.2.3z"></path>
</svg></span></button></div>
<div title="" role="toolbar" data-alloy-tabstop="true" tabindex="-1" class="tox-toolbar__group"><button aria-label="Source code" title="Source code" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<g fill-rule="nonzero">
<path d="M6.8 12.7c.3.3.3.8 0 1-.4.4-.9.4-1.2 0L1.2 9.7a.8.8 0 010-1.2l4.4-4.2c.3-.3.8-.3 1.2 0 .3.3.3.8 0 1.1L3 9l3.8 3.7zM11.2 12.7c-.3.3-.3.8 0 1 .4.4.9.4 1.2 0l4.4-4.1c.3-.3.3-.8 0-1.2l-4.4-4.2a.8.8 0 00-1.2 0c-.3.3-.3.8 0 1.1L15 9l-3.8 3.7z"></path>
</g>
</svg></span></button><button aria-label="Clear formatting" title="Clear formatting" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path fill-rule="nonzero" d="M13 13l1.7-1.8a.8.8 0 011 1L14.2 14l1.7 1.7a.8.8 0 01-1 1L13 15.2l-1.7 1.7a.8.8 0 01-1-1l1.6-1.8-1.7-1.7a.8.8 0 011-1l1.8 1.6zM9 3h4a1 1 0 010 2H9.8L8 11.3a1 1 0 01-2-.6L7.7 5H5a1 1 0 110-2h4zM4 15a1 1 0 010-2h5a1 1 0 010 2H4z"></path>
</svg></span></button></div>
</div>
</div>
<div class="tox-anchorbar"></div>
</div>
</div>
<div aria-hidden="true" class="tox-throbber" style="display: none;"></div>
</div>
<div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative; display: none;"></div>
<div role="application" class="tox tox-tinymce tox-tinymce-inline tox-tinymce--toolbar-sticky-off" style="visibility: hidden; display: none; position: absolute; top: 668px; left: 923px;">
<div class="tox-editor-container">
<div data-alloy-vertical-dir="toptobottom" tabindex="-1" class="tox-editor-header" style="max-width: 873px;">
<div role="group" class="tox-toolbar-overlord" aria-disabled="false">
<div role="group" class="tox-toolbar__primary">
<div title="" role="toolbar" data-alloy-tabstop="true" tabindex="-1" class="tox-toolbar__group"><button title="Formats" aria-label="Formats" aria-haspopup="true" type="button" unselectable="on" tabindex="-1" class="tox-tbtn tox-tbtn--select tox-tbtn--bespoke" aria-expanded="false" style="user-select: none;"><span class="tox-tbtn__select-label">Paragraph</span>
<div class="tox-tbtn__select-chevron"><svg width="10" height="10">
<path fill-rule="nonzero" d="M5.2 5.8l2.4-2.5a.8.8 0 011 1L5.3 8 1.6 4.4a.8.8 0 011-1l2.6 2.4z"></path>
</svg></div>
</button></div>
<div title="" role="toolbar" data-alloy-tabstop="true" tabindex="-1" class="tox-toolbar__group"><button aria-label="Bold" title="Bold" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false" aria-pressed="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path d="M5.7 15c-.3 0-.4 0-.5-.2l-.2-.4V3.6c0-.2 0-.4.2-.5l.5-.1H10c1.3 0 2.3.3 3 .8.6.6 1 1.3 1 2.2 0 .6-.2 1.1-.6 1.6-.4.5-.8.8-1.3 1v.1c.3 0 .7.2 1 .5.4.2.7.6 1 1 .2.4.3.8.3 1.3 0 1.2-.3 2-1 2.6-.8.6-1.9.9-3.3.9H5.7zm4.2-7c.6 0 1-.2 1.4-.5.4-.3.6-.7.6-1.1 0-1-.7-1.5-2-1.5H7v3h3zm.5 5c.6 0 1.1 0 1.5-.4.3-.2.5-.7.5-1.2s-.2-.9-.6-1.2c-.4-.2-1-.4-1.7-.4H7v3.3h3.4z" fill-rule="evenodd"></path>
</svg></span></button><button aria-label="Italic" title="Italic" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false" aria-pressed="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path d="M12.4 3l-.1.7H12c-.6 0-1 .1-1.2.3-.2.2-.4.5-.5 1l-1.7 8.2v.4c0 .5.3.7 1.1.7h.2l-.1.7H5l.1-.7h.3c.9 0 1.4-.4 1.6-1.2l1.8-8.3v-.4c0-.5-.4-.7-1.2-.7h-.2l.1-.7h5z" fill-rule="evenodd"></path>
</svg></span></button><button aria-label="Underline" title="Underline" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false" aria-pressed="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path d="M13 3c.6 0 1 .4 1 1v4.5a4 4 0 01-.4 1.8l-1 1.4a5.3 5.3 0 01-5.5 1 5 5 0 01-1.6-1c-.5-.4-.8-.9-1.1-1.4A4 4 0 014 8.4V4c0-.6.4-1 1-1s1 .4 1 1v4.5c0 .3 0 .6.2 1l.6.7A3.3 3.3 0 009 11a3.4 3.4 0 002.2-.8c.3-.2.4-.5.6-.8l.2-.9V4c0-.6.4-1 1-1zM5 14h8c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 010-2z" fill-rule="evenodd"></path>
</svg></span></button></div>
<div title="" role="toolbar" data-alloy-tabstop="true" tabindex="-1" class="tox-toolbar__group"><button aria-label="Insert/edit link" title="Insert/edit link" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false" aria-pressed="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<g fill-rule="nonzero">
<path d="M8 8h1a2 2 0 110 4H5a2 2 0 01-.7-3.9l.5-.2-.6-1.8-.5.1A4 4 0 005 14h4a4 4 0 100-8H8v2z"></path>
<path d="M10 9H9a2 2 0 110-4h4a2 2 0 01.7 3.9l-.5.2.6 1.8.5-.1A4 4 0 0013 3H9a4 4 0 100 8h1V9z"></path>
</g>
</svg></span></button><button aria-label="Insert/edit image" title="Insert/edit image" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false" aria-pressed="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path fill-rule="nonzero" d="M6 15l2.4-2.5L7 11.1 3 15h3zm2 0h7v-2l-2.5-2.4L8.1 15zm7-4V3H3v10l4-4 2.5 2.4 3-3L15 11zM3 1h12a2 2 0 012 2v12a2 2 0 01-2 2H3a2 2 0 01-2-2V3c0-1.1.9-2 2-2zm6 5a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg></span></button><button aria-label="Emoticons" title="Emoticons" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path fill-rule="nonzero" d="M6 8c.5 0 1-.5 1-1s-.5-1-1-1a1 1 0 00-1 1c0 .5.5 1 1 1zm6 0c.6 0 1-.5 1-1s-.4-1-1-1a1 1 0 00-1 1c0 .5.4 1 1 1zm-3 5.5c2.1 0 4-1.5 4.4-3.5H4.6c.5 2 2.3 3.5 4.4 3.5zM9 1a8 8 0 100 16A8 8 0 009 1zm0 14.5a6.5 6.5 0 110-13 6.5 6.5 0 010 13z"></path>
</svg></span></button></div>
<div title="" role="toolbar" data-alloy-tabstop="true" tabindex="-1" class="tox-toolbar__group"><button title="Align" aria-label="Align" aria-haspopup="true" type="button" unselectable="on" tabindex="-1" class="tox-tbtn tox-tbtn--select" aria-expanded="false" style="user-select: none;"><span class="tox-icon tox-tbtn__icon-wrap"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path fill-rule="nonzero" d="M4 6a1 1 0 110-2h10a1 1 0 010 2H4zm0 4a1 1 0 110-2h6a1 1 0 010 2H4zm0 4a1 1 0 010-2h10a1 1 0 010 2H4z"></path>
</svg></span></span>
<div class="tox-tbtn__select-chevron"><svg width="10" height="10">
<path fill-rule="nonzero" d="M5.2 5.8l2.4-2.5a.8.8 0 011 1L5.3 8 1.6 4.4a.8.8 0 011-1l2.6 2.4z"></path>
</svg></div>
</button><button aria-label="Bullet list" title="Bullet list" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false" aria-pressed="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path fill-rule="nonzero" d="M8 7a1 1 0 110-2h6a1 1 0 010 2H8zm0 6a1 1 0 010-2h6a1 1 0 010 2H8zM2.5 6c0-.4.1-.8.4-1 .3-.4.7-.5 1.1-.5.4 0 .8.1 1 .4.4.3.5.7.5 1.1 0 .4-.1.8-.4 1-.3.4-.7.5-1.1.5-.4 0-.8-.1-1-.4-.4-.3-.5-.7-.5-1.1zm0 6c0-.4.1-.8.4-1 .3-.4.7-.5 1.1-.5.4 0 .8.1 1 .4.4.3.5.7.5 1.1 0 .4-.1.8-.4 1-.3.4-.7.5-1.1.5-.4 0-.8-.1-1-.4-.4-.3-.5-.7-.5-1.1z"></path>
</svg></span></button><button aria-label="Numbered list" title="Numbered list" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false" aria-pressed="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path fill-rule="nonzero" d="M8 7a1 1 0 110-2h6a1 1 0 010 2H8zm0 6a1 1 0 010-2h6a1 1 0 010 2H8zM4 4v3.5a.5.5 0 01-1 0V5h-.5a.5.5 0 010-1H4zm-1 8.8l.2.2h1.3a.5.5 0 110 1H2.9a1 1 0 01-.9-1V13c0-.4.3-.8.6-1l1.2-.4.2-.3a.2.2 0 00-.2-.2H2.5a.5.5 0 01-.5-.5c0-.3.2-.5.5-.5h1.6c.5 0 .9.4.9 1v.1c0 .4-.3.8-.6 1l-1.2.4-.2.3z"></path>
</svg></span></button></div>
<div title="" role="toolbar" data-alloy-tabstop="true" tabindex="-1" class="tox-toolbar__group"><button aria-label="Source code" title="Source code" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<g fill-rule="nonzero">
<path d="M6.8 12.7c.3.3.3.8 0 1-.4.4-.9.4-1.2 0L1.2 9.7a.8.8 0 010-1.2l4.4-4.2c.3-.3.8-.3 1.2 0 .3.3.3.8 0 1.1L3 9l3.8 3.7zM11.2 12.7c-.3.3-.3.8 0 1 .4.4.9.4 1.2 0l4.4-4.1c.3-.3.3-.8 0-1.2l-4.4-4.2a.8.8 0 00-1.2 0c-.3.3-.3.8 0 1.1L15 9l-3.8 3.7z"></path>
</g>
</svg></span></button><button aria-label="Clear formatting" title="Clear formatting" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false"><span class="tox-icon tox-tbtn__icon-wrap"><svg width="18" height="18">
<path fill-rule="nonzero" d="M13 13l1.7-1.8a.8.8 0 011 1L14.2 14l1.7 1.7a.8.8 0 01-1 1L13 15.2l-1.7 1.7a.8.8 0 01-1-1l1.6-1.8-1.7-1.7a.8.8 0 011-1l1.8 1.6zM9 3h4a1 1 0 010 2H9.8L8 11.3a1 1 0 01-2-.6L7.7 5H5a1 1 0 110-2h4zM4 15a1 1 0 010-2h5a1 1 0 010 2H4z"></path>
</svg></span></button></div>
</div>
</div>
<div class="tox-anchorbar"></div>
</div>
</div>
<div aria-hidden="true" class="tox-throbber" style="display: none;"></div>
</div>
<div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative; display: none;"></div>
</body>@import url("https://fonts.googleapis.com/css?family=Work+Sans:400,900&display=swap");
body {
font-family: "Work Sans", sans-serif;
font-size: 16px;
line-height: 1.4;
padding: 0;
margin: 0 2rem;
box-sizing: border-box;
}
.editor {
max-width: 1200px;
margin: 2rem auto 2rem;
position: relative;
}
.tinymce:focus {
border-radius: 0.5px;
box-shadow: 0 0 0 4px #fff, 0 0 0 7px #706fd333;
outline: 0;
}
tinymce.init({
selector: ".tinymce",
// Enable inline mode
// https://www.tiny.cloud/docs/configure/editor-appearance/#inline
inline: true,
// Tip! To make TinyMCE leaner, only include the plugins you actually need.
plugins: "link lists image emoticons code",
// This option allows you to specify the buttons and the order that they
// will appear on TinyMCE’s toolbar.
// https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
toolbar:
"styleselect | bold italic underline | link image emoticons | align bullist numlist | code removeformat",
// Toggle the menubar off to get a leaner visual experience
// https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
menubar: false,
// To make the toolbar take up a bit less space we use the Small
// premium skin and the small premium icon pack (this is completely
// optional). You can also create your own small skin and icon pack.
// https://www.tiny.cloud/docs/enterprise/premium-skins-and-icon-packs/snow-demo/
// https://www.tiny.cloud/docs/configure/editor-appearance/#skin
// https://www.tiny.cloud/docs/advanced/creating-a-skin/
// https://www.tiny.cloud/docs/configure/editor-appearance/#icons
// https://www.tiny.cloud/docs/advanced/creating-an-icon-pack/
skin: "small",
icons: "small",
// In emails we rarely use target for links so we hide the
// target drop down in the link dialog
// https://www.tiny.cloud/docs/plugins/link/#target_list
target_list: false,
// We don't want users to be able to resize images by using
// drag and drop because it can break layout templates.
// https://www.tiny.cloud/docs/configure/advanced-editing-behavior/#object_resizing
object_resizing: false,
// The formats option is where custom formatting options are defined.
// In this case we define a couple of headings and a button appearance
// for links. HTML Emails require inlining the CSS. Fortunately the
// styles property makes that easy.
// https://www.tiny.cloud/docs/configure/content-formatting/#formats
formats: {
h1: { block: "h1", styles: { fontSize: "32px" } },
h2: { block: "h2", styles: { fontSize: "18px" } },
cta: {
selector: "a",
styles: {
backgroundColor: "#706FD3",
padding: "12px 16px",
color: "#ffffff",
borderRadius: "4px",
textDecoration: "none",
display: "inline-block"
}
}
},
// The style_formats option controls the styleformat toolbar button menu
// https://www.tiny.cloud/docs/configure/editor-appearance/#style_formats
style_formats: [
{ title: "Paragraph", format: "p" },
{ title: "Heading 1", format: "h1" },
{ title: "Heading 2", format: "h2" },
{ title: "Button styles" },
{ title: "Call-to-action", format: "cta" }
]
});
External CSS
This Pen doesn't use any external CSS resources.