2012-07-15 05:27:36 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
2012-07-16 16:33:55 +02:00
< title > Demo: < kbd> for fun & profit< / title >
2012-07-15 05:27:36 +02:00
2012-07-16 17:24:38 +02:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2012-07-15 05:27:36 +02:00
<!-- [if lt IE 9]>
< script src = "http://html5shim.googlecode.com/svn/trunk/html5.js" > < / script >
<![endif]-->
2012-07-16 13:08:34 +02:00
< link rel = "stylesheet" href = "assets/css/site.css" / >
2012-07-15 05:27:36 +02:00
< / head >
< body >
2012-07-16 14:50:02 +02:00
< header >
< hgroup >
2012-07-16 16:33:55 +02:00
< h1 > < kbd> < / h1 >
2012-07-16 14:50:02 +02:00
< p > for fun & profit< / p >
2012-07-16 16:19:45 +02:00
< 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 >
2012-07-16 14:50:02 +02:00
< / hgroup >
< / header >
2012-07-15 05:27:36 +02:00
2012-07-16 14:50:02 +02:00
< article >
2012-07-16 16:19:45 +02:00
< section id = "keysdefault" >
2012-07-16 15:05:44 +02:00
< header >
2012-07-16 16:19:45 +02:00
< h2 > Light< / h2 >
2012-07-16 15:05:44 +02:00
< / header >
2012-07-16 14:50:02 +02:00
< p >
< kbd > Q< / kbd > < kbd > W< / kbd > < kbd > E< / kbd > < kbd > R< / kbd > < kbd > T< / kbd > < kbd > Y< / kbd >
< / p >
< p >
< code > < kbd> Q< /kbd> < / code >
< / p >
< / section >
< section id = "keysdark" >
2012-07-16 15:05:44 +02:00
< header >
< h2 > Dark< / h2 >
< / header >
2012-07-16 14:50:02 +02:00
< 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 > < kbd class="dark"> Q< /kbd> < / code >
< / p >
< / section >
< section id = "keysios" >
2012-07-16 15:05:44 +02:00
< header >
< h2 > iOS< / h2 >
< / header >
2012-07-16 14:50:02 +02:00
< 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 > < kbd class="ios"> Q< /kbd> < / code >
< / p >
< / section >
< section id = "keysandroid" >
2012-07-16 15:05:44 +02:00
< header >
< h2 > Android< / h2 >
< / header >
2012-07-16 14:50:02 +02:00
< 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 > < kbd class="android"> q< /kbd> < / code >
< code > < kbd class="android dark"> q< /kbd> < / code >
< code > < kbd class="android color"> q< /kbd> < / code >
< / p >
< / section >
< / article >
2012-07-15 05:27:36 +02:00
2012-07-16 14:50:02 +02:00
< footer >
2012-07-16 15:40:35 +02:00
< p > A fun project by < a href = "http://matthiaskretschmann.com" rel = "me" > Matthias Kretschmann< / a > | < a href = "https://twitter.com/kremalicious" > @kremalicious< / a > < / p >
2012-07-16 14:50:02 +02:00
< / footer >
2012-07-15 05:27:36 +02:00
2012-07-16 14:50:02 +02:00
< div class = "navbar" >
2012-07-16 16:19:45 +02:00
< p > < a href = "http://kremalicious.com/using-kbd-for-fun-and-profit/" > ← Back to article< / a > < a class = "github" href = "https://github.com/kremalicious/kbdfun/" > Download or Fork on GitHub< / a > < / p >
2012-07-16 14:50:02 +02:00
< / div >
2012-07-16 12:26:28 +02:00
2012-07-15 05:27:36 +02:00
< / body >
< / html >
