arleym · May 31, 2017 16:20 · arleym · Jun 1, 2016
diff --git a/theme-test.html b/theme-test.html
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus obcaecati eligendi iure labore iste magnam incidunt a voluptates rerum ipsum iusto dignissimos, beatae repudiandae ducimus. Doloribus reiciendis numquam illum, placeat!
 <blockquote><p>Blockquote with P. Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)</p></blockquote>
 <p>…or something like this:</p>
 <blockquote>Blockquote without P. The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</blockquote>
 <p>HR after this P.</p>
 <hr>
 <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-bottom: 2em; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/1QtdPfz_faM' frameborder='0' allowfullscreen></iframe></div>
 <p>Unordered List;</p>
 <ul>
  <li>An unordered list</li>
  <li>An unordered list</li>
  <li>An unordered list</li>
  <li>An unordered list with one item that is much longer than the other so as to wrap onto at least two lines for styling purposes.</li>
  <li>An unordered list</li>
 </ul>
 <p>Ordered List;</p>
 <ol>
  <li>An ordered list</li>
  <li>An ordered list</li>
  <li>An ordered list</li>
  <li>An ordered list with one item that is much longer than the other so as to wrap onto at least two lines for styling purposes.</li>
  <li>An ordered list</li>
 </ol>
 <p>A table:</p>
 <table>
  <thead>
    <tr>
      <th>Table Head Column One</th>
      <th>Table Head Column Two</th>
      <th>Table Head Column Three</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Table Footer Column One</td>
      <td>Table Footer Column Two</td>
      <td>Table Footer Column Three</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Table Row Column One</td>
      <td>Short Text</td>
      <td>Testing a table cell with a longer amount of text to see what happens, you’re not using tables for site layouts are you?</td>
    </tr>
    <tr>
      <td>Table Row Column One</td>
      <td>Table Row Column Two</td>
      <td>Table Row Column Three</td>
    </tr>
    <tr>
      <td>Table Row Column One</td>
      <td>Table Row Column Two</td>
      <td>Table Row Column Three</td>
    </tr>
    <tr>
      <td>Table Row Column One</td>
      <td>Table Row Column Two</td>
      <td>Table Row Column Three</td>
    </tr>
    <tr>
      <td>Table Row Column One</td>
      <td>Table Row Column Two</td>
      <td>Table Row Column Three</td>
    </tr>
  </tbody>
 </table>
 <h1>Level One Heading</h1>
 <h2>Level Two Heading</h2>
 <h3>Level Three Heading</h3>
 <h4>Level Four Heading</h4>
 <h5>Level Five Heading</h5>
 <h6>Level Six Heading</h6>
 <p>This is a standard paragraph. It has a <strong>strong tag</strong>, an <em>em tag</em> and a <del>strikethrough</del> which is actually just the del element. Other tags include<cite>citations</cite>, <b>the b tag</b>, <u>the underline</u>, <i>the i tag</i>, <abbr title="abbreviation">abbr</abbr>, bits of <code>code</code> and <var>variables</var>, <q>inline quotations</q>, <ins datetime="2011-12-08T20:19:53+00:00">inserted text</ins>, text that is <s>no longer accurate</s> or something so important you might want to mark it. We can also style subscript and superscript characters like C0<sub>2</sub>, here is our 2<sup>nd</sup> example. If they are feeling non-semantic they might even use <strong>bold</strong>, <em>italic</em>, <small>small</small> elements too.&nbsp;Incidentally, these HTML4.01 tags have been given new life and semantic meaning in HTML5, you may be interested in reading this <a title="HTML5 Semantics" href="http://csswizardry.com/2011/01/html5-and-text-level-semantics">article by Harry Roberts</a> which gives a nice excuse to test a link.&nbsp;&nbsp;It is also worth noting in the “kitchen sink” view you can also add underline&nbsp;styling and set text color with pesky inline CSS.</p>
 <p style="text-align:left;">Additionally, this left aligned paragraph.&nbsp;Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p>
 <p style="text-align:center;">Additionally, this center aligned paragraph.&nbsp;Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p>
 <p style="text-align:right;">This is a right aligned paragraph.&nbsp;Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p>
 <p>And last, and by no means least, users can also apply the <code>Address</code> tag to text like this:</p>
 <address>123 Example Street,<br>
 Testville,<br>
 West Madeupsburg,<br>
 CSSland,<br>
 1234</address>
 <p>…so there you have it, all our text elements</p>
 <p>How about really long words like&nbsp;Antidisestablishmentarianism&nbsp;I hope line breaking is working! Seriously.&nbsp;<strong><em>Antidisestablishmentarianism</em></strong>. That’s bold and italic.</p>
 <p>Images without caption:</p>
 <p><img src="http://placehold.it/2800x150" alt=""></p>
 <p><img src="http://placehold.it/700x150" alt=""></p>
 <p><img src="http://placehold.it/500x150" alt=""></p>
 <p><img src="http://placehold.it/350x150" alt=""></p>
 <p><img src="http://placehold.it/200x100" alt=""></p>
 <p><img src="http://placehold.it/140x100" alt=""></p>
 <p><a href="#"><img src="http://placehold.it/100x100" alt=""></a></p>

 <h3>SVG</h3>
 <div style="max-width: 500px;">
  <h4>Inline:</h4>
  <svg version="1.1" id="Layer_1_copy" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
  <polygon points="249.954,32 337.866,119.912 222.843,234.933 222.845,234.935 165.894,291.9 220.1,346.092 277.042,289.134
    277.064,289.156 392.088,174.135 480,262.044 480,32 "/>
  <polygon points="400,479.938 32.188,479.938 32.188,128.188 256,128.188 256,160.188 64.188,160.188 64.188,447.938 368,447.938
    368,256 400,256 "/>
  </svg>
 </div>

 <p>&nbsp;</p>
 <h2>Inline images</h2>
 <p><a href="#"><img src="http://placehold.it/100x100" alt="" style="display:inline-block;padding-right:20px;float:left;"></a>Left aligned image before. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor leo, feugiat sit amet fringilla at, aliquet non turpis. Maecenas sollicitudin tincidunt odio eu luctus. Sed hendrerit convallis ullamcorper. Vestibulum nibh dolor, facilisis tincidunt molestie vitae, eleifend sodales purus. Morbi iaculis consequat augue nec tempor. Donec feugiat, dolor in dapibus varius, turpis elit viverra tortor, eget commodo nulla lacus et eros. In eu risus dictum neque faucibus viverra. Maecenas sed lacus vehicula dolor luctus congue ac nec augue. Donec dapibus, diam at convallis condimentum, nibh tortor interdum nisi, ac vestibulum nisi turpis eget dolor. Sed varius faucibus tempor. Mauris porttitor nisl a odio gravida sed pharetra orci scelerisque. Donec sit amet tortor tortor, ac malesuada ipsum.</p>
 <p><a href="#"><img src="http://placehold.it/100x100" alt="" style="display:inline-block;padding-left:20px;float:right;"></a>Right aligned image before. Nunc interdum nulla sed nibh vehicula eget laoreet quam posuere. Mauris ut orci dui, at tincidunt nisi. Nullam nec elit ut justo sollicitudin pharetra. Nulla felis lectus, aliquam vel dictum a, luctus vitae libero. Nam ut nunc ante. Curabitur quis magna vitae urna ullamcorper imperdiet. Integer semper varius lorem sed sagittis. Praesent justo sapien, gravida in feugiat at, sodales quis enim. Duis accumsan nunc ac erat lobortis bibendum. Donec elit metus, ultricies et sagittis a, pulvinar at lacus. Nullam at urna quam, sed dignissim orci. Phasellus et lacus nec elit gravida congue. Curabitur facilisis, mauris non lobortis aliquam, erat mi commodo libero, quis venenatis nunc orci ut eros. Nulla facilisi. Integer mauris neque, viverra non luctus eu, rutrum et leo. Quisque sit amet erat at leo tincidunt fermentum.</p>
 <p>Right aligned during. Morbi eleifend bibendum nisl, scelerisque hendrerit eros consectetur ut. Pellentesque in arcu in felis vestibulum luctus vitae vitae libero. Nam vel ligula mi, sed mattis nulla. <img style="float:right;padding-left:20px" src="http://placehold.it/100x100" alt=""> Maecenas ut leo vitae nibh viverra venenatis a id erat. In imperdiet metus eu dui elementum nec vehicula massa pharetra. Nam gravida elementum turpis vel pulvinar.&nbsp;Nulla ultrices ligula in urna suscipit vestibulum. Nullam congue tristique turpis, ac posuere mi dignissim nec.&nbsp;Nulla ultrices ligula in urna suscipit vestibulum. Nullam congue tristique turpis, ac posuere mi dignissim nec.&nbsp;Nulla ultrices ligula in urna suscipit vestibulum. Nullam congue tristique turpis, ac posuere mi dignissim nec.</p>
 <p>Left aligned during. Quisque faucibus est leo, nec ultrices magna. Donec porttitor, nulla non mollis lobortis, libero ante pellentesque leo, <img style="float:left;padding-right:20px" src="http://placehold.it/100x100" alt=""> nec eleifend nunc augue eu justo. Fusce eleifend, nunc in luctus facilisis, risus justo dapibus neque, non mattis quam ligula iaculis augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla consectetur neque pulvinar quam hendrerit non faucibus mi blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eu quam mauris, vel blandit lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>


 <form id="financing">
  <h2 class="form__title">Apply Now</h2>
  <p class="form__required-notice"><span class="form__required-asterisk">*</span> required</p>
  <div>
    <div>
       <fieldset>
        <legend>General</legend>
          <label class="required"><span class="label-text">First Name:</span>
            <input required name="first_name" type="text" class="text-input">
          </label>
          <label class="required"><span class="label-text">Last Name:</span>
            <input required name="last_name" type="text" class="text-input">
          </label>
          <span>Salutation: <span class="label-optional">(optional)</span></span>
          <div class="form--inline">
            <label>
              <input type="radio" name="salutation" value="Mr."> <span class="label-text">Mr.</span>
            </label>
            <label>
              <input type="radio" name="salutation" value="Mrs."> <span class="label-text">Mrs.</span>
            </label>
            <label>
              <input type="radio" name="salutation" value="Miss"> <span class="label-text">Miss</span>
            </label>
          </div>
        </fieldset>
    </div><!-- column -->
    <div>
      <fieldset>
        <legend>Contact</legend>
        <label class="required"><span class="label-text">Phone:</span>
          <input required type="tel" class="text-input" name="phone" class="text-input">
          <p><small>xxx-xxx-xxxx</small></p>
        </label>
        <label class="required"><span class="label-text">Email:</span>
          <input required type="email" class="text-input" name="email" class="text-input">
          <p><small>name@domain.com</small></p>
        </label>
      </fieldset>
    </div><!-- column -->
  </div><!-- row -->
  <button type="submit" class="button">Send</button>
 </form>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus obcaecati eligendi iure labore iste magnam incidunt a voluptates rerum ipsum iusto dignissimos, beatae repudiandae ducimus. Doloribus reiciendis numquam illum, placeat!
	<blockquote><p>Blockquote with P. Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)</p></blockquote>
	<p>…or something like this:</p>
	<blockquote>Blockquote without P. The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</blockquote>
	<p>HR after this P.</p>
	<hr>
	<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-bottom: 2em; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/1QtdPfz_faM' frameborder='0' allowfullscreen></iframe></div>
	<p>Unordered List;</p>
	<ul>
	<li>An unordered list</li>
	<li>An unordered list</li>
	<li>An unordered list</li>
	<li>An unordered list with one item that is much longer than the other so as to wrap onto at least two lines for styling purposes.</li>
	<li>An unordered list</li>
	</ul>
	<p>Ordered List;</p>
	<ol>
	<li>An ordered list</li>
	<li>An ordered list</li>
	<li>An ordered list</li>
	<li>An ordered list with one item that is much longer than the other so as to wrap onto at least two lines for styling purposes.</li>
	<li>An ordered list</li>
	</ol>
	<p>A table:</p>
	<table>
	<thead>
	<tr>
	<th>Table Head Column One</th>
	<th>Table Head Column Two</th>
	<th>Table Head Column Three</th>
	</tr>
	</thead>
	<tfoot>
	<tr>
	<td>Table Footer Column One</td>
	<td>Table Footer Column Two</td>
	<td>Table Footer Column Three</td>
	</tr>
	</tfoot>
	<tbody>
	<tr>
	<td>Table Row Column One</td>
	<td>Short Text</td>
	<td>Testing a table cell with a longer amount of text to see what happens, you’re not using tables for site layouts are you?</td>
	</tr>
	<tr>
	<td>Table Row Column One</td>
	<td>Table Row Column Two</td>
	<td>Table Row Column Three</td>
	</tr>
	<tr>
	<td>Table Row Column One</td>
	<td>Table Row Column Two</td>
	<td>Table Row Column Three</td>
	</tr>
	<tr>
	<td>Table Row Column One</td>
	<td>Table Row Column Two</td>
	<td>Table Row Column Three</td>
	</tr>
	<tr>
	<td>Table Row Column One</td>
	<td>Table Row Column Two</td>
	<td>Table Row Column Three</td>
	</tr>
	</tbody>
	</table>
	<h1>Level One Heading</h1>
	<h2>Level Two Heading</h2>
	<h3>Level Three Heading</h3>
	<h4>Level Four Heading</h4>
	<h5>Level Five Heading</h5>
	<h6>Level Six Heading</h6>
	<p>This is a standard paragraph. It has a <strong>strong tag</strong>, an <em>em tag</em> and a <del>strikethrough</del> which is actually just the del element. Other tags include<cite>citations</cite>, <b>the b tag</b>, <u>the underline</u>, <i>the i tag</i>, <abbr title="abbreviation">abbr</abbr>, bits of <code>code</code> and <var>variables</var>, <q>inline quotations</q>, <ins datetime="2011-12-08T20:19:53+00:00">inserted text</ins>, text that is <s>no longer accurate</s> or something so important you might want to mark it. We can also style subscript and superscript characters like C0<sub>2</sub>, here is our 2<sup>nd</sup> example. If they are feeling non-semantic they might even use <strong>bold</strong>, <em>italic</em>, <small>small</small> elements too. Incidentally, these HTML4.01 tags have been given new life and semantic meaning in HTML5, you may be interested in reading this <a title="HTML5 Semantics" href="http://csswizardry.com/2011/01/html5-and-text-level-semantics">article by Harry Roberts</a> which gives a nice excuse to test a link.  It is also worth noting in the “kitchen sink” view you can also add underline styling and set text color with pesky inline CSS.</p>
	<p style="text-align:left;">Additionally, this left aligned paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p>
	<p style="text-align:center;">Additionally, this center aligned paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p>
	<p style="text-align:right;">This is a right aligned paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p>
	<p>And last, and by no means least, users can also apply the <code>Address</code> tag to text like this:</p>
	<address>123 Example Street,<br>
	Testville,<br>
	West Madeupsburg,<br>
	CSSland,<br>
	1234</address>
	<p>…so there you have it, all our text elements</p>
	<p>How about really long words like Antidisestablishmentarianism I hope line breaking is working! Seriously. <strong><em>Antidisestablishmentarianism</em></strong>. That’s bold and italic.</p>
	<p>Images without caption:</p>
	<p><img src="http://placehold.it/2800x150" alt=""></p>
	<p><img src="http://placehold.it/700x150" alt=""></p>
	<p><img src="http://placehold.it/500x150" alt=""></p>
	<p><img src="http://placehold.it/350x150" alt=""></p>
	<p><img src="http://placehold.it/200x100" alt=""></p>
	<p><img src="http://placehold.it/140x100" alt=""></p>
	<p><a href="#"><img src="http://placehold.it/100x100" alt=""></a></p>

	<h3>SVG</h3>
	<div style="max-width: 500px;">
	<h4>Inline:</h4>
	<svg version="1.1" id="Layer_1_copy" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
	<polygon points="249.954,32 337.866,119.912 222.843,234.933 222.845,234.935 165.894,291.9 220.1,346.092 277.042,289.134
	277.064,289.156 392.088,174.135 480,262.044 480,32 "/>
	<polygon points="400,479.938 32.188,479.938 32.188,128.188 256,128.188 256,160.188 64.188,160.188 64.188,447.938 368,447.938
	368,256 400,256 "/>
	</svg>
	</div>

	<p> </p>
	<h2>Inline images</h2>
	<p><a href="#"><img src="http://placehold.it/100x100" alt="" style="display:inline-block;padding-right:20px;float:left;"></a>Left aligned image before. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor leo, feugiat sit amet fringilla at, aliquet non turpis. Maecenas sollicitudin tincidunt odio eu luctus. Sed hendrerit convallis ullamcorper. Vestibulum nibh dolor, facilisis tincidunt molestie vitae, eleifend sodales purus. Morbi iaculis consequat augue nec tempor. Donec feugiat, dolor in dapibus varius, turpis elit viverra tortor, eget commodo nulla lacus et eros. In eu risus dictum neque faucibus viverra. Maecenas sed lacus vehicula dolor luctus congue ac nec augue. Donec dapibus, diam at convallis condimentum, nibh tortor interdum nisi, ac vestibulum nisi turpis eget dolor. Sed varius faucibus tempor. Mauris porttitor nisl a odio gravida sed pharetra orci scelerisque. Donec sit amet tortor tortor, ac malesuada ipsum.</p>
	<p><a href="#"><img src="http://placehold.it/100x100" alt="" style="display:inline-block;padding-left:20px;float:right;"></a>Right aligned image before. Nunc interdum nulla sed nibh vehicula eget laoreet quam posuere. Mauris ut orci dui, at tincidunt nisi. Nullam nec elit ut justo sollicitudin pharetra. Nulla felis lectus, aliquam vel dictum a, luctus vitae libero. Nam ut nunc ante. Curabitur quis magna vitae urna ullamcorper imperdiet. Integer semper varius lorem sed sagittis. Praesent justo sapien, gravida in feugiat at, sodales quis enim. Duis accumsan nunc ac erat lobortis bibendum. Donec elit metus, ultricies et sagittis a, pulvinar at lacus. Nullam at urna quam, sed dignissim orci. Phasellus et lacus nec elit gravida congue. Curabitur facilisis, mauris non lobortis aliquam, erat mi commodo libero, quis venenatis nunc orci ut eros. Nulla facilisi. Integer mauris neque, viverra non luctus eu, rutrum et leo. Quisque sit amet erat at leo tincidunt fermentum.</p>
	<p>Right aligned during. Morbi eleifend bibendum nisl, scelerisque hendrerit eros consectetur ut. Pellentesque in arcu in felis vestibulum luctus vitae vitae libero. Nam vel ligula mi, sed mattis nulla. <img style="float:right;padding-left:20px" src="http://placehold.it/100x100" alt=""> Maecenas ut leo vitae nibh viverra venenatis a id erat. In imperdiet metus eu dui elementum nec vehicula massa pharetra. Nam gravida elementum turpis vel pulvinar. Nulla ultrices ligula in urna suscipit vestibulum. Nullam congue tristique turpis, ac posuere mi dignissim nec. Nulla ultrices ligula in urna suscipit vestibulum. Nullam congue tristique turpis, ac posuere mi dignissim nec. Nulla ultrices ligula in urna suscipit vestibulum. Nullam congue tristique turpis, ac posuere mi dignissim nec.</p>
	<p>Left aligned during. Quisque faucibus est leo, nec ultrices magna. Donec porttitor, nulla non mollis lobortis, libero ante pellentesque leo, <img style="float:left;padding-right:20px" src="http://placehold.it/100x100" alt=""> nec eleifend nunc augue eu justo. Fusce eleifend, nunc in luctus facilisis, risus justo dapibus neque, non mattis quam ligula iaculis augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla consectetur neque pulvinar quam hendrerit non faucibus mi blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eu quam mauris, vel blandit lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>


	<form id="financing">
	<h2 class="form__title">Apply Now</h2>
	<p class="form__required-notice"><span class="form__required-asterisk">*</span> required</p>
	<div>
	<div>
	<fieldset>
	<legend>General</legend>
	<label class="required"><span class="label-text">First Name:</span>
	<input required name="first_name" type="text" class="text-input">
	</label>
	<label class="required"><span class="label-text">Last Name:</span>
	<input required name="last_name" type="text" class="text-input">
	</label>
	<span>Salutation: <span class="label-optional">(optional)</span></span>
	<div class="form--inline">
	<label>
	<input type="radio" name="salutation" value="Mr."> <span class="label-text">Mr.</span>
	</label>
	<label>
	<input type="radio" name="salutation" value="Mrs."> <span class="label-text">Mrs.</span>
	</label>
	<label>
	<input type="radio" name="salutation" value="Miss"> <span class="label-text">Miss</span>
	</label>
	</div>
	</fieldset>
	</div><!-- column -->
	<div>
	<fieldset>
	<legend>Contact</legend>
	<label class="required"><span class="label-text">Phone:</span>
	<input required type="tel" class="text-input" name="phone" class="text-input">
	<p><small>xxx-xxx-xxxx</small></p>
	</label>
	<label class="required"><span class="label-text">Email:</span>
	<input required type="email" class="text-input" name="email" class="text-input">
	<p><small>name@domain.com</small></p>
	</label>
	</fieldset>
	</div><!-- column -->
	</div><!-- row -->
	<button type="submit" class="button">Send</button>
	</form>