kbdfun/index.html

88 lines
2.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: &lt;kbd&gt; for fun &amp; profit</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="assets/css/site.css" />
</head>
<body>
<header>
<hgroup>
<h1>&lt;kbd&gt;</h1>
<p>for fun &amp; profit</p>
<p id="alltogether"><kbd>Light</kbd> <kbd class="dark">Dark</kbd> <kbd class="ios">iOS</kbd> <kbd class="android">An</kbd> <kbd class="android dark">dro</kbd> <kbd class="android color">id</kbd></p>
</hgroup>
</header>
<article>
<section id="keysdefault">
<header>
<h2>Light</h2>
</header>
<p>
<kbd>Q</kbd> <kbd>W</kbd> <kbd>E</kbd> <kbd>R</kbd> <kbd>T</kbd> <kbd>Y</kbd>
</p>
<p>
<code>&lt;kbd&gt;Q&lt;/kbd&gt;</code>
</p>
</section>
<section id="keysdark">
<header>
<h2>Dark</h2>
</header>
<p>
<kbd class="dark">Q</kbd> <kbd class="dark">W</kbd> <kbd class="dark">E</kbd> <kbd class="dark">R</kbd> <kbd class="dark">T</kbd> <kbd class="dark">Y</kbd>
</p>
<p>
<code>&lt;kbd class="dark"&gt;Q&lt;/kbd&gt;</code>
</p>
</section>
<section id="keysios">
<header>
<h2>iOS</h2>
</header>
<p>
<kbd class="ios">Q</kbd> <kbd class="ios">W</kbd> <kbd class="ios">E</kbd> <kbd class="ios">R</kbd> <kbd class="ios">T</kbd> <kbd class="ios">Y</kbd>
</p>
<p>
<code>&lt;kbd class="ios"&gt;Q&lt;/kbd&gt;</code>
</p>
</section>
<section id="keysandroid">
<header>
<h2>Android</h2>
</header>
<p>
<kbd class="android">q</kbd> <kbd class="android">w</kbd> <kbd class="android">e</kbd> <kbd class="android">r</kbd> <kbd class="android">t</kbd> <kbd class="android">y</kbd> <kbd class="android dark">/</kbd> <kbd class="android dark">.</kbd> <kbd class="android color">Go</kbd>
</p>
<p>
<code>&lt;kbd class="android"&gt;q&lt;/kbd&gt;</code>
<code>&lt;kbd class="android dark"&gt;q&lt;/kbd&gt;</code>
<code>&lt;kbd class="android color"&gt;q&lt;/kbd&gt;</code>
</p>
</section>
</article>
<footer>
<p>A fun project by <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a> | <a href="https://twitter.com/kremalicious">@kremalicious</a></p>
</footer>
<div class="navbar">
<p><a href="http://kremalicious.com/using-kbd-for-fun-and-profit/">&larr; Back to article</a> <a class="github" href="https://github.com/kremalicious/kbdfun/">Download or Fork on GitHub</a></p>
</div>
</body>
</html>