{% extends 'base.html.twig' %}

{% block body %}

<div id="colors">

</div>
<div id="topography">
  <h1>H1. This is a Page Title.</h1>
  <h2>H2. This is a header.</h2>
  <h3>H3. This is a medium header.</h3>
  <h4>H4. This is a sidebar header.</h4>
  <h5>H5. This is a small header.</h5>
  <h6>H6. This is a tiny header.</h6>
  <p>A general paragraph will look like this.</p>  
</div>

<div id="inlineElements">
  <p><a href="#">This is a text link</a></p>
  <p><strong>Strong is used to indicate strong importance</strong></p>
  
  <p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>
  
  <p>The <em>i element</em> is text that is set off from the normal text</p>
  
  <p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>

  <p>The <s>s element</s> is text with a strike through denoting cancelization</p>
  
  <p><small>This small text is small for for fine print, etc.</small></p>
  
  <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>
  
  <p><cite>This is a citation</cite>
</div>


{# <!-- change the HEX values here -->
<div class="sectionHeading">
  <span class="sectionTitle">COLORS</span>
  <div class="sectionSeperator"></div>
</div>

<ul id="colors">
  <li class="colorCircle color-1">
      <div class="colorHex">#C7D6BA</div>
  </li>
  <li class="colorCircle color-2">
      <div class="colorHex">#BAE3C2</div>
  </li>
  <li class="colorCircle color-3">
      <div class="colorHex">#C7EDC2</div>
  </li>
   <li class="colorCircle color-4">
      <div class="colorHex">#E5EDC2</div>
  </li>
  <li class="colorCircle color-5">
      <div class="colorHex">#E3E1BA</div>
  </li>  
</ul>   #}

{# <div class="sectionHeading">
  <span class="sectionTitle">FORM ELEMENTS</span>
  <div class="sectionSeperator"></div>
</div> #}

{# <div id="formElements">
  <form>
		<div class="form-item">
			<input type="text" placeholder="text field" name="" id="">
		</div>
		<div class="form-item">
			<input type="text" required="required" placeholder="required text field" name="" id="">
		</div>
		<div class="form-item">
			<textarea name="" id="" cols="40" rows="5"></textarea>
	  </div>
    
		<div class="form-item">
			<select name="" id="">
				<option value="default">-- Select --</option>
				<option value="">Only</option>
				<option value="">One</option>
				<option value="">Item</option>
			</select>
		</div>
    
		<div class="form-item">
			<select multiple name="" id="">
				<option value="">Select</option>
				<option value="">Multiple</option>
				<option value="">Items</option>
			</select>
		</div>
    
		<div class="form-item form-type-radios">
			<div class="form-item"><input type="radio" name="example-radios" id=""><label for="" class="option">Radio One</label></div>
			<div class="form-item"><input type="radio" name="example-radios" id=""><label for="" class="option">Radio Two</label></div>
			<div class="form-item"><input type="radio" name="example-radios" id=""><label for="" class="option">Radio Three</label></div>
			<div class="form-item"><input type="radio" name="example-radios" id=""><label for="" class="option">Radio Four</label></div>
		</div>
    
		<div class="form-item form-type-checkboxes">
			<div class="form-item"><input type="checkbox" name="" id=""><label for="">checkbox 1</label></div>
			<div class="form-item"><input type="checkbox" name="" id=""><label for="">checkbox 2</label></div>
			<div class="form-item"><input type="checkbox" name="" id=""><label for="">checkbox 3</label></div>
			<div class="form-item"><input type="checkbox" name="" id=""><label for="">checkbox 4</label></div>
		</div>
    
		<div class="form-actions">
			<input type="submit" class="form-submit">
			<input type="button" value="Cancel" class="form-submit">
		</div>
	</form>
</div>   #}
{% endblock %}