andrewhoule
5/2/2013 - 1:32 PM

HTML: Kitchen Sink for Testing

HTML: Kitchen Sink for Testing

<h1>This is the primary heading and there should only be one of these per page</h1>
  		    <p>A small paragraph to <em>emphasis</em> and show <strong>important</strong> bits.</p>
			    <ul>
			        <li>This is a list item</li>
			        <li>So is this - there could be more</li>
			        <li>Make sure to style list items to:
			            <ul>
			                <li>Not forgetting child list items</li>
			                <li>Not forgetting child list items</li>
			                <li>Not forgetting child list items</li>
			                <li>Not forgetting child list items</li>
			            </ul>
			        </li>
			        <li>A couple more</li>
			        <li>top level list items</li>
			    </ul>
			    <p>Don't forget <strong>Ordered lists</strong>:</p>
			    <ol>
			       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
			       <li>Aliquam tincidunt mauris eu risus.
			        <ol>
			            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
			            <li>Aliquam tincidunt mauris eu risus.</li>
			        </ol>
			        </li>
			       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
			       <li>Aliquam tincidunt mauris eu risus.
			    </ol>
			    <h2>A sub heading which is not as important as the first, but is quite imporant overall</h2>
			    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
			    <table>
			        <tr>
			            <th>Table Heading</th>
			            <th>Table Heading</th>
			        </tr>
			        <tr>
			            <td>table data</td>
			            <td>table data</td>
			        </tr>
			        <tr>
			            <td>table data</td>
			            <td>table data</td>
			        </tr>
			        <tr>
			            <td>table data</td>
			            <td>table data</td>
			        </tr>
			        <tr>
			            <td>table data</td>
			            <td>table data</td>
			        </tr>
			    </table>    
					
			    <h3>A sub heading which is not as important as the second, but should be used with consideration</h3>
			    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
			    <blockquote><p>“Ooh - a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.”</p></blockquote>
			    <h4>A sub heading which is not as important as the second, but should be used with consideration</h4>
			    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
			    <pre><code>
			#header h1 a { 
			    display: block; 
			    width: 300px; 
			    height: 80px; 
			}
			</code></pre>
			    <h5>A sub heading which is not as important as the second, but should be used with consideration</h5>
			    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
			    <dl>
			   <dt>Definition list</dt>
			   <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 
				aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
				commodo consequat.</dd>
				   <dt>Lorem ipsum dolor sit amet</dt>
				   <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 
				aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
				commodo consequat.</dd>
				</dl>
				<h6>This heading plays a relatively small bit part role, if you use it at all</h6>
			    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
			    <h3>Left Aligned Image</h3>
			    <p><img src="img/logo.png" class="left">In lorem sapien, hendrerit vel ultrices quis, porta in neque. Integer quam leo, consequat sit amet feugiat vel, sollicitudin at ipsum. Aliquam ultrices condimentum commodo. Cras sapien risus, vehicula non lacinia a, aliquet id orci. Mauris imperdiet facilisis varius. Donec ultrices varius tincidunt. Donec euismod libero nec nisi mattis ut cursus ante dignissim. Integer id ante eget ante semper dictum. In lorem sapien, hendrerit vel ultrices quis, porta in neque. Integer quam leo, consequat sit amet feugiat vel, sollicitudin at ipsum. Aliquam ultrices condimentum commodo. Cras sapien risus, vehicula non lacinia a, aliquet id orci. Mauris imperdiet facilisis varius. Donec ultrices varius tincidunt. Donec euismod libero nec nisi mattis ut cursus ante dignissim. Integer id ante eget ante semper dictum. In lorem sapien, hendrerit vel ultrices quis, porta in neque. Integer quam leo, consequat sit amet feugiat vel, sollicitudin at ipsum. Aliquam ultrices condimentum commodo. Cras sapien risus, vehicula non lacinia a, aliquet id orci. Mauris imperdiet facilisis varius. Donec ultrices varius tincidunt. Donec euismod libero nec nisi mattis ut cursus ante dignissim. Integer id ante eget ante semper dictum.</p>
			    <h3>Right Aligned Image</h3>
			    <p><img src="img/logo.png" class="right">In lorem sapien, hendrerit vel ultrices quis, porta in neque. Integer quam leo, consequat sit amet feugiat vel, sollicitudin at ipsum. Aliquam ultrices condimentum commodo. Cras sapien risus, vehicula non lacinia a, aliquet id orci. Mauris imperdiet facilisis varius. Donec ultrices varius tincidunt. Donec euismod libero nec nisi mattis ut cursus ante dignissim. Integer id ante eget ante semper dictum. In lorem sapien, hendrerit vel ultrices quis, porta in neque. Integer quam leo, consequat sit amet feugiat vel, sollicitudin at ipsum. Aliquam ultrices condimentum commodo. Cras sapien risus, vehicula non lacinia a, aliquet id orci. Mauris imperdiet facilisis varius. Donec ultrices varius tincidunt. Donec euismod libero nec nisi mattis ut cursus ante dignissim. Integer id ante eget ante semper dictum. In lorem sapien, hendrerit vel ultrices quis, porta in neque. Integer quam leo, consequat sit amet feugiat vel, sollicitudin at ipsum. Aliquam ultrices condimentum commodo. Cras sapien risus, vehicula non lacinia a, aliquet id orci. Mauris imperdiet facilisis varius. Donec ultrices varius tincidunt. Donec euismod libero nec nisi mattis ut cursus ante dignissim. Integer id ante eget ante semper dictum.</p>
			    <h3>Left Alone Image</h3>
			    <p><img src="img/logo.png" class="leftAlone">In lorem sapien, hendrerit vel ultrices quis, porta in neque. Integer quam leo, consequat sit amet feugiat vel, sollicitudin at ipsum. Aliquam ultrices condimentum commodo. Cras sapien risus, vehicula non lacinia a, aliquet id orci. Mauris imperdiet facilisis varius. Donec ultrices varius tincidunt. Donec euismod libero nec nisi mattis ut cursus ante dignissim. Integer id ante eget ante semper dictum. In lorem sapien, hendrerit vel ultrices quis, porta in neque. Integer quam leo, consequat sit amet feugiat vel, sollicitudin at ipsum. Aliquam ultrices condimentum commodo. Cras sapien risus, vehicula non lacinia a, aliquet id orci. Mauris imperdiet facilisis varius. Donec ultrices varius tincidunt. Donec euismod libero nec nisi mattis ut cursus ante dignissim. Integer id ante eget ante semper dictum. In lorem sapien, hendrerit vel ultrices quis, porta in neque. Integer quam leo, consequat sit amet feugiat vel, sollicitudin at ipsum. Aliquam ultrices condimentum commodo. Cras sapien risus, vehicula non lacinia a, aliquet id orci. Mauris imperdiet facilisis varius. Donec ultrices varius tincidunt. Donec euismod libero nec nisi mattis ut cursus ante dignissim. Integer id ante eget ante semper dictum.</p>
			    <h3>Center Aligned Image</h3>
			    <p><img src="img/logo.png" class="center">In lorem sapien, hendrerit vel ultrices quis, porta in neque. Integer quam leo, consequat sit amet feugiat vel, sollicitudin at ipsum. Aliquam ultrices condimentum commodo. Cras sapien risus, vehicula non lacinia a, aliquet id orci. Mauris imperdiet facilisis varius. Donec ultrices varius tincidunt. Donec euismod libero nec nisi mattis ut cursus ante dignissim. Integer id ante eget ante semper dictum. In lorem sapien, hendrerit vel ultrices quis, porta in neque. Integer quam leo, consequat sit amet feugiat vel, sollicitudin at ipsum. Aliquam ultrices condimentum commodo. Cras sapien risus, vehicula non lacinia a, aliquet id orci. Mauris imperdiet facilisis varius. Donec ultrices varius tincidunt. Donec euismod libero nec nisi mattis ut cursus ante dignissim. Integer id ante eget ante semper dictum. In lorem sapien, hendrerit vel ultrices quis, porta in neque. Integer quam leo, consequat sit amet feugiat vel, sollicitudin at ipsum. Aliquam ultrices condimentum commodo. Cras sapien risus, vehicula non lacinia a, aliquet id orci. Mauris imperdiet facilisis varius. Donec ultrices varius tincidunt. Donec euismod libero nec nisi mattis ut cursus ante dignissim. Integer id ante eget ante semper dictum.</p>