<div class="colors">
  <div class="color color--a"><span class="color-swatch"></span><span class="hex">#1B518E<br />$blue-dos</span></div>
  <div class="color color--b"><span class="color-swatch"></span><span class="hex">#031A4F<br />$blue-dos-dark</span></div>
  <div class="color color--c"><span class="color-swatch"></span><span class="hex">#82838D<br />$gray-lt</span></div>
  <div class="color color--d"><span class="color-swatch"></span><span class="hex">#505261<br />$gray-dk</span></div>
  <div class="color color--e"><span class="color-swatch"></span><span class="hex">#F6F5F4<br />$gray-bg</span></div>
  <div class="color color--f"><span class="color-swatch"></span><span class="hex">#31AEC2<br />$aqua</span></div>
  <div class="color color--g"><span class="color-swatch"></span><span class="hex">#6A9C5F<br />$green</span></div>
  <div class="color color--h"><span class="color-swatch"></span><span class="hex">#EB8344<br />$orange</span></div>
  <div class="color color--i"><span class="color-swatch"></span><span class="hex">#5587C2<br />$blue</span></div>
  <div class="color color--j"><span class="color-swatch"></span><span class="hex">#7876A4<br />$purple</span></div>
</div>

This is a <a href="">link</a> within a paragraph.<br />
<a href="" class="more">This is a more link<a>

<p class="intro">Intro: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p><p class="promo">Promo: Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. </p><p>Paragraph: Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>

<h1>(h1) Leveraging Scholarships</h1>
<h2>(h2) Financial Aid Search Engines</h2>
<h3>(h3) Workshop on Electronic Communications for Personal Growth and Development</h3>
<h4>(h4) Engage Now</h4>
<h5>(h5) U.S. Higher Education Professionals</h5>
<h6>(h6) Armenia</h6>
<h7>(h7) Description</h7>

<div class="content"><ul>
<li>Community Planning 101</li>
<li>Advocating for Parks</li>
<li>Creating and Preserving Affordable Housing</li>
<li>Advocating for Changes to Streets</li>
<li>Neighborhood-Based Economic Development</li>
<li>Historic Preservation and Protection of Cultural Assets</li>
<li>How to Get it Done: Implementing Small Scale Neighborhood Change</li> <li>Identifying Neighborhood Strengths and Addressing Vulnerabilities</li>
</ul>
<ol>
<li>Focus on the Outliers</li>
<li>Set measurable goals with a scary deadline</li>
<li>Focus on the obvious thing</li>
<li>Build the broadest team possible</li>
<li>Experiment in short cycles</li>
</ol>
</div>

<blockquote>In turn, the opening that this movement creates can allow new vulnerable people to escape homelessness and access permanent supportive housing.</blockquote><p class="attribution">Fatima Hassan, Institution</p>
<blockquote class="alt">In turn, the opening that this movement creates can allow new vulnerable people to escape homelessness and access permanent supportive housing.</blockquote><p class="attribution">Fatima Hassan, Institution</p>

<form>
  <fieldset>
    <p><input type="button" value="Button"></p>
    <p><input type="button" value="Outline" class="outline"></p>
    <p><input type="button" value="Small" class="small"></p>
    <p><input type="button" value="Button disabled" disabled></p>
    <p><input type="button" value="Time Zone: All →" class="time-zone"></p>
  </fieldset>
</form>

<form id="name_of_form">
  <fieldset>
    <legend>Fieldset with legend</legend>
    <p><label for="fieldset_text_input">Text Input</label> <input type="text" name="fieldset_text_input" id="fieldset_text_input"></p>
    <p><input type="submit" value="Submit"></p>
  </fieldset>
  <fieldset>
    <legend>Fieldset with a very, very, very, very, very, long legend that can test the display of word wrapping to see how it looks.</legend>
    <p><label for="fieldset_text_input_2">Text Input</label> <input type="text" name="fieldset_text_input_2" id="fieldset_text_input_2"></p>
    <p><input type="submit" value="Submit"></p>
  </fieldset>
</form> 

<form>
<fieldset>
<div><label for="form_element_1">Text input</label> <input type="text" id="form_element_1"></div>
<div><label for="form_element_2">Text input with placeholder</label> <input type="text" placeholder="I'm placeholder text" id="form_element_2"></div>
<div><label for="form_element_3">Readonly input</label> <input type="text" value="Read only text input" id="form_element_3" readonly></div>
<div><label for="form_element_4">Disabled input</label> <input type="text" value="Disabled text input" id="form_element_4" disabled></div>
<div><label for="form_element_5">Required input <span class="required">*</span></label> <input type="text" id="form_element_5" required></div>
<div><label for="form_element_6">Email input</label> <input type="email" id="form_element_6"></div>
<div><label for="form_element_7">Search input</label> <input type="search" id="form_element_7"></div>
<div><label for="form_element_8">Speech recognition input</label> <input type="text" name="speech" x-webkit-speech="" id="form_element_8"></div>
<div><label for="form_element_9">Tel input</label> <input type="tel" id="form_element_9"></div>
<div><label>Phone (International)</label> <input name="field_country_code" maxlength="3" /> - <input name="field_city_code" maxlength="4" /> - <input name="field_phone_int" maxlength="8" /></div>
<div><label for="form_element_11">URL input</label> <input type="url" placeholder="http://" id="form_element_11"></div>
<div><label for="form_element_12">Password input</label> <input type="password" value="password" id="form_element_12"></div>
<div><label for="form_element_13">Select field</label> <select id="form_element_13"><option>Option 01</option><option>Option 02</option></select></div>
<div><label for="form_element_14">Multiple select field</label><select multiple size="5" id="form_element_14"><option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option><option>Option 5</option><option>Option 6</option><option>Option 7</option><option>Option 8</option><option>Option 9</option><option>Option 10</option></select></div>
<div><label for="form_element_15">Radio input</label> <input type="radio" name="rad" id="form_element_15"></div>
<div><label for="form_element_16">Checkbox input</label> <input type="checkbox" id="form_element_16"></div>
<div><input type="radio" name="rad" id="form_element_17"> <label for="form_element_17">Radio input</label></div>
<div><input type="checkbox" id="form_element_18"> <label for="form_element_18">Checkbox input</label></div>
<div><label for="form_element_19">File input</label> <input type="file" id="form_element_19"></div>
<div><label for="form_element_20">Textarea</label> <textarea cols="30" rows="5" id="form_element_20">Textarea text</textarea></div>
<div><label for="form_element_21">Color input</label> <input type="color" value="#000000" id="form_element_21"></div>
<div><label for="form_element_22">Number input</label> <input type="number" value="5" min="0" max="10" id="form_element_22"></div>
<div><label>Range input</label> <input type="range" id="range" value="0" min="0" max="100"> <output for="range">0</output> 
<script>
if (document.querySelector) {
document.querySelector('#range').onchange = function(e) {
e.target.nextElementSibling.innerText = e.target.value;
}
}
</script>
</div>
<div><label for="form_element_24">Date input</label> <input type="date" id="form_element_24"></div>
<div><label for="form_element_25">Month input</label> <input type="month" id="form_element_25"></div>
<div><label for="form_element_26">Week input</label> <input type="week" id="form_element_26"></div>
<div><label for="form_element_27">Time input</label> <input type="time" id="form_element_27"></div>
<div><label for="form_element_28">Datetime input</label> <input type="datetime" id="form_element_28"></div>
<div><label for="form_element_29">Datetime-local input</label> <input type="datetime-local" id="form_element_29"></div>
</fieldset>
</form>

<div class="messages--error messages error">
<h2 class="element-invisible">Error message</h2>
There was an error processing your form:
<ul>
<li>Your credit card number could not be verified</li>
<li>Your passwords need to include at least one number</li>
</ul>
</div>
<div class="messages--warning messages warning">
<h2 class="element-invisible">Warning message</h2>
Some modules need updates:
<ul>
<li><a href="">Views slideshow</a></li>
<li><a href="">WYSIWYG</a></li>
</ul>
</div>
<div class="messages--ok messages ok">
<h2 class="element-invisible">Message</h2>
<p>Your order has been processed!</p>
</div>

<nav class="breadcrumb" role="navigation">
  <ol>
    <li><a href="/">Home</a> /</li>
    <li><a href="">U.S. Higher Education Professionals</a> /</li>
  </ol>
</nav>