library-mirrors/normalize.css
1
0
Fork 0
mirror of https://github.com/necolas/normalize.css.git synced 2024-12-25 15:14:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
7c32ea1bf2
normalize.css/demo.html

177 lines
8.1 KiB
HTML
Raw Normal View History

Edit demo file; addition of <form> elements, <mark>, <blockquote>, and clearer inline element tests.
2011-05-17 10:00:06 +00:00
<!DOCTYPE html>
Updated demo.html
2011-05-03 21:34:55 +00:00
<html>
Edit demo file; addition of <form> elements, <mark>, <blockquote>, and clearer inline element tests.
2011-05-17 10:00:06 +00:00
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
<title>Normalize CSS</title>
<link rel="stylesheet" href="normalize.css">
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
</head>
<body>
<header>
<hgroup>
<h1>Grouped Heading 1</h1>
<h2>Grouped Heading 2</h2>
</hgroup>
<nav>
<ul>
Remove link to normalize.metrics.css - move away from 'black boxing' the 'normalizing' styles.
2011-05-17 16:37:35 +00:00
<li><a href="h">navigation item #1</a></li>
Edit demo file; addition of <form> elements, <mark>, <blockquote>, and clearer inline element tests.
2011-05-17 10:00:06 +00:00
<li><a href="#">navigation item #2</a></li>
<li><a href="#">navigation item #3</a></li>
</ul>
</nav>
</header>
<section>
<h1>Section Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
<p>Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.</p>
<h2>Section Heading 2</h2>
<p>Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.</p>
<h3>Section Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
</section>
<article>
<h4>Article Heading 4</h4>
<p>Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.</p>
<h5>Article Heading 5</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
<h6>Article Heading 6</h6>
<p>Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.</p>
</article>
<p>
The <a href="#">a element</a> example<br>
The <abbr title="Title text">abbr element</abbr> example<br>
The <b>b element</b> example<br>
The <cite>cite element</cite> example<br>
The <code>code element</code> example<br>
The <del>del element</del> example<br>
The <dfn>dfn element</dfn> example<br>
The <em>em element</em> example<br>
The <i>i element</i> example<br>
The img element <img src="http://placehold.it/16x16" alt=""> example<br>
The <ins>ins element</ins> example<br>
The <kbd>kbd element</kbd> example<br>
The <mark>mark element</mark> example<br>
The <q>q element <q>inside</q> a q element</q> example<br>
The <s>s element</s> example<br>
The <samp>samp element</samp> example<br>
The <small>small element</small> example<br>
The <span>span element</span> example<br>
The <strike>strike element</strike> example<br>
The <strong>strong element</strong> example<br>
The <sub>sub element</sub> example<br>
The <sup>sup element</sup> example<br>
The <var>var element</var> example<br>
The <u>u element</u> example
</p>
<address>Address: somewhere, World</address>
<blockquote>
<p>Some sort of famous witty quote marked up with a &lt;blockquote> and a child &lt;p> element.</p>
</blockquote>
<blockquote>Even better philosophical quote marked up with just a &lt;blockquote> element.</blockquote>
<ol>
<li>Sed ut perspiciatis unde</li>
<li>omnis iste natus error</li>
<li>sit voluptatem accusantium</li>
</ol>
<ul>
<li>doloremque laudantium</li>
<li>totam rem aperiam eaque</li>
<li>ipsa quae ab illo</li>
</ul>
<dl>
<dt>Definition list term #1</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
<dt>Definition list term #2</dt>
<dd>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
</dl>
<pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.</pre>
<pre><code>&lt;html></code>
<code>&lt;head></code>
<code>&lt;/head></code>
<code>&lt;body></code>
<code>&lt;div class="main"> &lt;div></code>
<code>&lt;/body></code>
<code>&lt;/html></code></pre>
<table summary="Jimi Hendrix albums">
<caption>Jimi Hendrix - albums</caption>
<thead>
<tr>
<th>Album</th>
<th>Year</th>
<th>Price</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Album</th>
<th>Year</th>
<th>Price</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Are You Experienced</td>
<td>1967</td>
<td>$10.00</td>
</tr>
<tr>
<td>Axis: Bold as Love</td>
<td>1967</td>
<td>$12.00</td>
</tr>
<tr>
<td>Electric Ladyland</td>
<td>1968</td>
<td>$10.00</td>
</tr>
<tr>
<td>Band of Gypsys</td>
<td>1970</td>
<td>$12.00</td>
</tr>
</tbody>
</table>
<form action="#">
<fieldset>
<legend>Form legend</legend>
<div><label for="i1">Optional Text input:</label><input type="text" id="i1" value="input text"></div>
<div><label for="i2">Required Text input:</label><input type="text" id="i2" required></div>
<div><label for="i3">Text input with pattern requirement and placeholder:</label><input type="text" id="i3" pattern="\d{5}(-\d{4})?" title="a US Zip code, with or without the +4 exension" placeholder="12345-6789"></div>
<div><label for="i4">Search input:</label><input type="search" id="i4"></div>
<div><label for="i5">Email input:</label><input type="email" id="i5"></div>
<div><label for="i6">URL input:</label><input type="url" id="i6"></div>
<div><label for="i7">Password input:</label><input type="password" id="i7" value="password"></div>
<div><label for="i8">Radio input:</label><input type="radio" id="i8"></div>
<div><label for="i9">Checkbox input:</label><input type="checkbox" id="i9"></div>
<div><input type="radio" id="i10"><label for="i10">Radio input</label></div>
<div><input type="checkbox" id="i11"><label for="i11">Checkbox input</label></div>
<div><label for="i12">Select field:</label><select id="i12"><option>Option 01</option><option>Option 02</option></select></div>
<div><label for="i13">Textarea:</label><textarea id="i13" cols="30" rows="5" >Textarea text</textarea></div>
<div><input type="image" src="http://placehold.it/90x24" alt="Image (input)"></div>
<div><input type="reset" value="Reset (input)"></div>
<div><input type="button" value="Button (input)"></div>
<div><input type="submit" value="Submit (input)"></div>
<div><button type="reset">Reset (button)</button></div>
<div><button type="button">Button (button)</button></div>
<div><button type="submit">Submit (button)</button></div>
</fieldset>
</form>
</body>
Updated demo.html
2011-05-03 21:34:55 +00:00
</html>
Reference in New Issue Copy Permalink