owl-blogs/testbed.html

451 lines
13 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylesheet Test</title>
<link rel="stylesheet" href="/web/static/style2.css">
</head>
<body>
<header>
<img src="avatar.jpg" alt="Page Logo" />
<hgroup>
<h1>Page Title</h1>
<p>Short description of waht the blog is about. Catchy phrase to remember the blog by!</p>
</hgroup>
<nav>
<ul>
<li>Navigation 1</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
<li>Navigation 4</li>
<li>Navigation 5</li>
</ul>
</nav>
</header>
<main>
<h1>Structure</h1>
<footer>Footer</footer>
<h1>Text</h1>
<h2>Headings</h2>
<h1>Heading 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor
convallis.
Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu
lobortis.
Nam et turpis a leo commodo imperdiet.
</p>
<h2>Heading 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor
convallis.
Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu
lobortis.
Nam et turpis a leo commodo imperdiet.
</p>
<h3>Heading 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor
convallis.
Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu
lobortis.
Nam et turpis a leo commodo imperdiet.
</p>
<h4>Heading 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor
convallis.
Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu
lobortis.
Nam et turpis a leo commodo imperdiet.
</p>
<h5>Heading 5</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor
convallis.
Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu
lobortis.
Nam et turpis a leo commodo imperdiet.
</p>
<h6>Heading 6</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor
convallis.
Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu
lobortis.
Nam et turpis a leo commodo imperdiet.
</p>
<h2>Inline text elements</h2>
<p>
<a href="#">Link</a><code>&lt;a&gt;</code>
</p>
<p>
<abbr>Abbr.</abbr><code>&lt;abbr&gt;</code>
</p>
<p>
<strong>Bold</strong>
<code>&lt;strong&gt;</code>
<code>&lt;b&gt;</code>
</p>
<p>
<em>Italic</em>
<code>&lt;i&gt;</code>
<code>&lt;em&gt;</code>
<code>&lt;cite&gt;</code>
</p>
<p>
<del>Deleted</del>
<code>&lt;del&gt;</code>
</p>
<p>
<ins>Inserted</ins>
<code>&lt;ins&gt;</code>
</p>
<p>
<kbd>Ctrl + S</kbd>
<code>&lt;kbd&gt;</code>
</p>
<p>
<mark>Highlighted</mark>
<code>&lt;mark&gt;</code>
</p>
<p>
<s>Strikethrough</s>
<code>&lt;s&gt;</code>
</p>
<p>
<small>Small</small>
<code>&lt;small&gt;</code>
</p>
<p>
Text <sub>Sub</sub>
<code>&lt;sub&gt;</code>
</p>
<p>
Text <sup>Sup</sup>
<code>&lt;sup&gt;</code>
</p>
<p>
<u>Underline</u>
<code>&lt;u&gt;</code>
</p>
<p>
<code>Code</code>
<code>&lt;code&gt;</code>
</p>
<h1>List</h1>
<h2>Unordered List</h2>
<ul>
<li>Unordered List 1</li>
<ul>
<li>Sub List 1</li>
<li>Sub List 2</li>
<li>Sub List 3</li>
<li>Sub List 4</li>
<ul>
<li>Sub Sub List 1</li>
<li>Sub Sub List 2</li>
<li>Sub Sub List 3</li>
<li>Sub Sub List 4</li>
</ul>
</ul>
<li>Unordered List 2</li>
<li>Unordered List 3</li>
<li>Unordered List 4</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>Ordered List 1</li>
<ol>
<li>Sub List 1</li>
<li>Sub List 2</li>
<li>Sub List 3</li>
<li>Sub List 4</li>
<ol>
<li>Sub Sub List 1</li>
<li>Sub Sub List 2</li>
<li>Sub Sub List 3</li>
<li>Sub Sub List 4</li>
</ol>
</ol>
<li>Ordered List 2</li>
<li>Ordered List 3</li>
<li>Ordered List 4</li>
</ol>
<h1>Quote</h1>
<blockquote>
“Design is a funny word. Some people think
design means how it looks. But of course, if
you dig deeper, it's really how it works.”
<footer>
<cite>— Steve Jobs</cite>
</footer>
</blockquote>
<h1>Horizontal rule</h1>
<hr />
<h1>Table</h1>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</tbody>
</table>
<h1>Buttons</h1>
<button>Button</button>
<button disabled="disabled">Button disabled</button>
<h2>Classes for buttons</h2>
<button type="button" class="primary">Primary</button>
<button type="button" class="secondary">Secondary</button>
<button type="button" class="success">Success</button>
<button type="button" class="danger">Danger</button>
<button type="button" class="warning">Warning</button>
<br><br>
<button type="button" disabled="disabled" class="primary">Primary</button>
<button type="button" disabled="disabled" class="secondary">Secondary</button>
<button type="button" disabled="disabled" class="success">Success</button>
<button type="button" disabled="disabled" class="danger">Danger</button>
<button type="button" disabled="disabled" class="warning">Warning</button>
<h1>Forms</h1>
<h2>Inputs</h2>
<h3>Inputs</h3>
<div>
<label>Button</label>
<input type="button" value="Button" />
</div>
<div>
<label>Submit</label>
<input type="submit" value="Submit" />
</div>
<div>
<label>Checkbox</label>
<input type="checkbox" />
</div>
<div>
<label>Color</label>
<input type="color" />
</div>
<div>
<label>Password</label>
<input type="password" />
</div>
<div>
<label>Date</label>
<input type="date" />
</div>
<div>
<label>Datetime</label>
<input type="datetime-local" />
</div>
<div>
<label>Radio</label>
<input type="radio" />
</div>
<div>
<label>Text</label>
<input type="text" />
</div>
<div>
<label>Password</label>
<input type="password" />
</div>
<div>
<label>Time</label>
<input type="time" />
</div>
<div>
<label>Range</label>
<input type="range" />
</div>
<div>
<label>Textarea</label>
<textarea placeholder="Write a professional short bio...">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor convallis.
Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu
lobortis.
Nam et turpis a leo commodo imperdiet.
</textarea>
</div>
<h3>Inline Inputs</h3>
<div>
<label>Inline Button<input type="button" value="Button" /></label>
</div>
<div>
<label>Inline Submit<input type="submit" value="Submit" /></label>
</div>
<div>
<label>Inline Checkbox<input type="checkbox" /></label>
</div>
<div>
<label>Inline Color<input type="color" /></label>
</div>
<div>
<label>Inline Password<input type="password" /></label>
</div>
<div>
<label>Inline Date<input type="date" /></label>
</div>
<div>
<label>Inline Datetime<input type="datetime-local" /></label>
</div>
<div>
<label>Inline Radio<input type="radio" /></label>
</div>
<div>
<label>Inline Text<input type="text" /></label>
</div>
<div>
<label>Inline Password<input type="password" /></label>
</div>
<div>
<label>Inline Time<input type="time" /></label>
</div>
<div>
<label>Inline Range<input type="range" /></label>
</div>
<h1>Navigation</h1>
<nav>
<ul>
<li>
<a href="#">Nav 1</a>
</li>
<li>
<a href="#">Nav 2</a>
</li>
<li>
<a href="#">Nav 3</a>
</li>
<li>
<a href="#">Nav 4</a>
</li>
</ul>
</nav>
<h1>Detail</h1>
<details>
<summary>Summary</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor
convallis.
Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu
lobortis.
Nam et turpis a leo commodo imperdiet.</p>
</details>
<h1>Pre</h1>
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor convallis.
Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arculobortis.
Nam et turpis a leo commodo imperdiet.
</pre>
</main>
</body>
</html>