451 lines
13 KiB
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><a></code>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<abbr>Abbr.</abbr><code><abbr></code>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>Bold</strong>
|
||
|
|
<code><strong></code>
|
||
|
|
<code><b></code>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<em>Italic</em>
|
||
|
|
<code><i></code>
|
||
|
|
<code><em></code>
|
||
|
|
<code><cite></code>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<del>Deleted</del>
|
||
|
|
<code><del></code>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<ins>Inserted</ins>
|
||
|
|
<code><ins></code>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<kbd>Ctrl + S</kbd>
|
||
|
|
<code><kbd></code>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<mark>Highlighted</mark>
|
||
|
|
<code><mark></code>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<s>Strikethrough</s>
|
||
|
|
<code><s></code>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<small>Small</small>
|
||
|
|
<code><small></code>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Text <sub>Sub</sub>
|
||
|
|
<code><sub></code>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Text <sup>Sup</sup>
|
||
|
|
<code><sup></code>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<u>Underline</u>
|
||
|
|
<code><u></code>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<code>Code</code>
|
||
|
|
<code><code></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>
|