116 lines
3.8 KiB
Twig
116 lines
3.8 KiB
Twig
|
{% 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 %}
|