mirror of
https://github.com/nairobilug/pelican-alchemy.git
synced 2024-12-30 12:15:06 +01:00
270 lines
No EOL
11 KiB
HTML
Executable file
270 lines
No EOL
11 KiB
HTML
Executable file
<!doctype html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<!-- Required meta tags -->
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
||
<title> HTML5 Element Test | Pelican Alchemy
|
||
</title>
|
||
<link rel="canonical" href="https://nairobilug.github.io/pelican-alchemy/posts/html5-element-test.html">
|
||
|
||
<link rel="apple-touch-icon" href="https://nairobilug.github.io/pelican-alchemy/apple-touch-icon.png" sizes="180x180">
|
||
<link rel="icon" type="image/png" href="https://nairobilug.github.io/pelican-alchemy/favicon-32x32.png" sizes="32x32">
|
||
<link rel="icon" type="image/png" href="https://nairobilug.github.io/pelican-alchemy/favicon-16x16.png" sizes="16x16">
|
||
<link rel="manifest" href="https://nairobilug.github.io/pelican-alchemy/manifest.json">
|
||
<meta name="theme-color" content="#333333">
|
||
|
||
<link rel="stylesheet" href="https://nairobilug.github.io/pelican-alchemy/theme/css/bootstrap.min.css">
|
||
<link rel="stylesheet" href="https://nairobilug.github.io/pelican-alchemy/theme/css/fontawesome.min.css">
|
||
<link rel="stylesheet" href="https://nairobilug.github.io/pelican-alchemy/theme/css/pygments/monokai.min.css">
|
||
<link rel="stylesheet" href="https://nairobilug.github.io/pelican-alchemy/theme/css/theme.css">
|
||
<link rel="stylesheet" href="https://nairobilug.github.io/pelican-alchemy/theme/css/oldstyle.css">
|
||
|
||
<link rel="alternate" type="application/atom+xml" title="Full Atom Feed"
|
||
href="https://nairobilug.github.io/pelican-alchemy/feeds/all.atom.xml">
|
||
<link rel="alternate" type="application/atom+xml" title="Categories Atom Feed"
|
||
href="https://nairobilug.github.io/pelican-alchemy/feeds/html5.atom.xml">
|
||
<meta name="description" content="A example page containing common HTML5 elements for CSS testing purposes. https://github.com/taniarascia/html5-test/">
|
||
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<header class="header">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-sm-4">
|
||
<a href="https://nairobilug.github.io/pelican-alchemy/">
|
||
<img class="img-fluid rounded" src=https://nairobilug.github.io/pelican-alchemy/images/profile.jpg width=200 height=200 alt="Pelican Alchemy">
|
||
</a>
|
||
</div>
|
||
<div class="col-sm-8">
|
||
<h1 class="title"><a href="https://nairobilug.github.io/pelican-alchemy/">Pelican Alchemy</a></h1>
|
||
<p class="text-muted">A magical ✨ Pelican theme</p>
|
||
<ul class="list-inline">
|
||
<li class="list-inline-item"><a href="http://getpelican.com/" target="_blank">Pelican</a></li>
|
||
<li class="list-inline-item"><a href="http://python.org/" target="_blank">Python.org</a></li>
|
||
<li class="list-inline-item"><a href="http://jinja.pocoo.org/" target="_blank">Jinja2</a></li>
|
||
<li class="list-inline-item text-muted">|</li>
|
||
<li class="list-inline-item"><a href="https://nairobilug.github.io/pelican-alchemy/pages/about.html">About</a></li>
|
||
<li class="list-inline-item"><a href="https://nairobilug.github.io/pelican-alchemy/pages/settings.html">Settings</a></li>
|
||
<li class=" list-inline-item text-muted">|</li>
|
||
<li class="list-inline-item"><a class="fas fa-rss" href="https://nairobilug.github.io/pelican-alchemy/feeds/all.atom.xml" target="_blank"></a></li>
|
||
<li class="list-inline-item"><a class="fab fa-github" href="https://github.com/nairobilug/pelican-alchemy" target="_blank"></a></li>
|
||
</ul>
|
||
</div>
|
||
</div> </div>
|
||
</header>
|
||
|
||
<div class="main">
|
||
<div class="container">
|
||
<h1> HTML5 Element Test
|
||
</h1>
|
||
<hr>
|
||
<article class="article">
|
||
<header>
|
||
<ul class="list-inline">
|
||
<li class="list-inline-item text-muted" title="2000-01-01T09:00:00+03:00">
|
||
<i class="fas fa-clock"></i>
|
||
Сб 01 Январь 2000
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<i class="fas fa-folder-open"></i>
|
||
<a href="https://nairobilug.github.io/pelican-alchemy/category/html5.html">HTML5</a>
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<i class="fas fa-user"></i>
|
||
<a href="https://nairobilug.github.io/pelican-alchemy/author/taniarascia.html">@taniarascia</a> </li>
|
||
<li class="list-inline-item">
|
||
<i class="fas fa-tag"></i>
|
||
<a href="https://nairobilug.github.io/pelican-alchemy/tag/html.html">#html</a>, <a href="https://nairobilug.github.io/pelican-alchemy/tag/sample.html">#sample</a>, <a href="https://nairobilug.github.io/pelican-alchemy/tag/test.html">#test</a> </li>
|
||
</ul>
|
||
</header>
|
||
<div class="content">
|
||
<p>Common HTML5 elements for CSS testing purposes.</p>
|
||
<h1>Formatting</h1>
|
||
<p>This sentence is <b>bold</b>. If you like semantics, you might go with
|
||
<strong>strong</strong> or <em>emphasized</em> text. If not, <i>italic</i> is
|
||
still around. <small>Small</small> text is for fine print. Your copy can also
|
||
be <sub>subscripted</sub> and <sup>superscripted</sup>, <ins>inserted</ins>,
|
||
<del>deleted</del>, or <mark>highlighted</mark>. You would use a
|
||
<a href="#!">hyperlink</a> to go to a new page.</p>
|
||
<p>If you like to write about there are plenty of semantic tags for you.
|
||
There's the generic <code>code</code>, as well as <kbd>keyboard input</kbd>,
|
||
<samp>computer output</samp>, and <var>variables</var>.</p>
|
||
<p>You might have need of a <cite>citation</cite>, <q>short quotation</q>,
|
||
<abbr>abbreviation</abbr>, or <dfn>definition</dfn>. It might be
|
||
<time>10:00pm</time>.</p>
|
||
<address><p>123 Fake Street<br/> Springfield, USA</p></address>
|
||
<h2>Blockquote</h2>
|
||
<blockquote class="blockquote">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam
|
||
molestiae et assumenda molestias alias ut saepe doloribus, porro, deleniti
|
||
neque, harum minus, commodi laudantium quod excepturi nam corrupti odit
|
||
provident. <cite>- Blockquote Citation</cite>
|
||
</blockquote>
|
||
<h2>Preformatted Text</h2>
|
||
<pre>class Voila {
|
||
public:
|
||
// Voila
|
||
static const string VOILA = "Voila";
|
||
}</pre>
|
||
<h2>Horizontal Line</h2>
|
||
<hr/>
|
||
<h1>Headings</h1>
|
||
<h1>First Heading h1</h1>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea delectus
|
||
cupiditate minima, magni possimus commodi, eveniet? Rem, adipisci architecto
|
||
pariatur libero aliquid culpa sunt accusantium. Ipsa error aliquid et!
|
||
Animi.</p>
|
||
<h2>Second Heading h2</h2>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia molestias
|
||
ullam quasi est a nemo, accusamus voluptatum autem. Eius explicabo est
|
||
assumenda voluptatem id, hic maxime mollitia facere debitis quos.</p>
|
||
<h3>Third Heading h3</h3>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo deleniti,
|
||
repudiandae rerum nam laborum eligendi aperiam. Autem id, ad necessitatibus
|
||
accusantium, facilis, quae ullam est, voluptates debitis fugiat quos
|
||
inventore!</p>
|
||
<h4>Fourth Heading h4</h4>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cum eum
|
||
eligendi voluptatum quasi nisi doloremque ipsam unde, laboriosam nihil
|
||
voluptatem consequatur quam non similique vero ratione animi sit
|
||
veritatis.</p>
|
||
<h5>Fifth Heading h5</h5>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit voluptatem
|
||
necessitatibus eos iusto nam deserunt, dicta possimus error qui reiciendis,
|
||
aut dolore magnam eligendi maiores expedita commodi perferendis non
|
||
blanditiis.</p>
|
||
<h1>Lists</h1>
|
||
<h2>Unordered list</h2>
|
||
<ul>
|
||
<li>List item one
|
||
<ul>
|
||
<li>Nested list item</li>
|
||
</ul>
|
||
</li>
|
||
<li>List item two</li>
|
||
<li>List item three</li>
|
||
</ul>
|
||
<h2>Ordered list</h2>
|
||
<ol>
|
||
<li>List item one
|
||
<ol>
|
||
<li>Nested list item</li>
|
||
</ol>
|
||
</li>
|
||
<li>List item two</li>
|
||
<li>List item three</li>
|
||
</ol>
|
||
<h2>Definition List</h2>
|
||
<dl>
|
||
<dt>Definition Title One</dt>
|
||
<dd>First definition description</dd> <dt>Definition Title Two</dt>
|
||
<dd>Second definition description</dd>
|
||
</dl>
|
||
<h1>Tables</h1>
|
||
<table class="table-striped table-hover table">
|
||
<thead>
|
||
<tr>
|
||
<th>Head 1</th>
|
||
<th>Head 2</th>
|
||
<th>Head 3</th>
|
||
</tr>
|
||
</thead>
|
||
<tfoot>
|
||
<tr>
|
||
<th>Footer 1</th>
|
||
<th>Footer 2</th>
|
||
<th>Footer 3</th>
|
||
</tr>
|
||
</tfoot>
|
||
<tbody>
|
||
<tr>
|
||
<td>Description 1</td>
|
||
<td>Description 2</td>
|
||
<td>Description 3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Description 1</td>
|
||
<td>Description 2</td>
|
||
<td>Description 3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Description 1</td>
|
||
<td>Description 2</td>
|
||
<td>Description 3</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h1>Forms</h1>
|
||
<form>
|
||
<label for="text">Text Input</label>
|
||
<input id="text" placeholder="Text Input" type="text"/>
|
||
<label for="password">Password</label>
|
||
<input id="password" placeholder="Password" type="password"/>
|
||
<label for="url">URL</label>
|
||
<input id="url" placeholder="http://www.example.com" type="url"/>
|
||
<label for="email">Email Address</label>
|
||
<input id="email" placeholder="email@example.com" type="email"/>
|
||
<label for="phone">Phone Number</label>
|
||
<input id="phone" placeholder="123-123-1234" type="tel"/>
|
||
<label for="search">Search</label>
|
||
<input id="search" placeholder="Search" type="search"/>
|
||
<label for="number">Number</label>
|
||
<input id="number" placeholder="Number" type="number"/>
|
||
<label for="select">Select</label>
|
||
<select id="select">
|
||
<option>Option One</option>
|
||
<option>Option Two</option>
|
||
<option>Option Three</option>
|
||
</select>
|
||
<label for="checkbox1">
|
||
<input checked="checked" id="checkbox1" name="checkbox" type="checkbox"/> Choice A</label>
|
||
<label for="checkbox2">
|
||
<input id="checkbox2" name="checkbox" type="checkbox"/> Choice B</label>
|
||
<label for="radio1">
|
||
<input checked="checked" class="radio" id="radio1" name="radio" type="radio"/> Option 1</label>
|
||
<label for="radio2">
|
||
<input class="radio" id="radio2" name="radio" type="radio"/> Option 2</label>
|
||
<label for="textarea">Textarea</label>
|
||
<textarea cols="30" id="textarea" placeholder="Message" rows="5"></textarea>
|
||
<input type="button" value="Button"/>
|
||
<input type="submit" value="Submit"/>
|
||
<input type="reset" value="Reset"/>
|
||
<button>Button element</button>
|
||
</form>
|
||
<h2>Fieldset and Legend</h2>
|
||
<form>
|
||
<fieldset>
|
||
<legend>Legend</legend>
|
||
<label for="text">Text Input</label>
|
||
<input id="text" placeholder="Text Input" type="text"/>
|
||
<input type="submit" value="Submit"/>
|
||
</fieldset>
|
||
</form>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="row">
|
||
<ul class="col-sm-6 list-inline">
|
||
<li class="list-inline-item"><a href="https://nairobilug.github.io/pelican-alchemy/authors.html">Authors</a></li>
|
||
<li class="list-inline-item"><a href="https://nairobilug.github.io/pelican-alchemy/archives.html">Archives</a></li>
|
||
<li class="list-inline-item"><a href="https://nairobilug.github.io/pelican-alchemy/categories.html">Categories</a></li>
|
||
<li class="list-inline-item"><a href="https://nairobilug.github.io/pelican-alchemy/tags.html">Tags</a></li>
|
||
</ul>
|
||
<p class="col-sm-6 text-sm-right text-muted">
|
||
Generated by <a href="https://github.com/getpelican/pelican" target="_blank">Pelican</a>
|
||
/ <a href="https://github.com/nairobilug/pelican-alchemy" target="_blank">✨</a>
|
||
</p>
|
||
</div> </div>
|
||
</footer>
|
||
|
||
</body>
|
||
|
||
</html> |