Skip to content

Instantly share code, notes, and snippets.

@franvarney

franvarney/index.html

Created February 27, 2015 23:16
Show Gist options
  • Save franvarney/cc01524d67ed3635342d to your computer and use it in GitHub Desktop.
Save franvarney/cc01524d67ed3635342d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style id="jsbin-css">
#container {
width: 100%;
margin: 0 auto;
padding: 20px;
font-size: 12px;
}
#container #key-container > .col {
display: inline-block;
margin: 0 20px;
}
#container #key-container #col-0 #inner-row-0 {
margin-bottom: 10px;
}
#container #key-container #col-1 #inner-row-0 {
margin-bottom: 10px;
}
#container #key-container #col-1 #inner-row-3 {
display: inline-block;
margin: 47px auto 0;
width: 100%;
text-align: center;
}
#container #key-container #col-2 #inner-row-0 {
display: none;
margin-bottom: 10px;
}
#container #key-container #col-2 #inner-row-2,
#container #key-container #col-2 #inner-row-4 {
position: relative;
}
#container #key-container .key {
border: 1px solid #cdcdcd;
border-radius: 4px;
height: 40px;
width: 40px;
display: inline-block;
margin: 2px;
background-color: #efefef;
}
#container #key-container .key:hover {
cursor: pointer;
background-color: #e2e2e2;
}
#container #key-container .key .bordered {
display: inline-block;
border: 1px solid #ababab;
border-radius: 4px;
height: 98%;
width: 98%;
margin: 1px;
position: relative;
}
#container #key-container .key .bordered .letter {
position: absolute;
bottom: 1px;
right: 0;
left: 0;
text-align: center;
text-transform: uppercase;
}
#container #key-container #escape {
margin-right: 40px;
}
#container #key-container #f4,
#container #key-container #f8,
#container #key-container #F12 {
margin-right: 25px;
}
#container #key-container .outer {
background-color: #dedede;
}
#container #key-container .outer:hover {
background-color: #d4d4d4;
}
#container #key-container .outer-fourth {
width: 50px;
}
#container #key-container .outer-half {
width: 60px;
}
#container #key-container .outer-three-fourth {
width: 70px;
}
#container #key-container .outer-two {
width: 95px;
}
#container #key-container .outer-two-fifth {
width: 113px;
}
#container #key-container .outer-weird {
width: 80px;
}
#container #key-container .outer-weirder {
width: 84px;
}
#container #key-container .space {
width: 274px;
}
#container #key-container .arrow {
font-size: 18px;
}
#container #key-container #plus,
#container #key-container #num-enter {
position: absolute;
top: 0;
right: 0;
height: 87px;
}
</style>
</head>
<body>
<div id="container">
<div id="key-container">
<div id="col-0" class="col">
<div id="inner-row-0" class="row">
<div id="inner-col-0" class="col">
<div id="escape" class="key">
<p class="bordered"><span class="letter">esc</span></p>
</div>
<div id="f1" class="key">
<p class="bordered"><span class="letter">f1</span></p>
</div>
<div id="f2" class="key">
<p class="bordered"><span class="letter">f2</span></p>
</div>
<div id="f3" class="key">
<p class="bordered"><span class="letter">f3</span></p>
</div>
<div id="f4" class="key">
<p class="bordered"><span class="letter">f4</span></p>
</div>
<div id="f5" class="key">
<p class="bordered"><span class="letter">f5</span></p>
</div>
<div id="f6" class="key">
<p class="bordered"><span class="letter">f6</span></p>
</div>
<div id="f7" class="key">
<p class="bordered"><span class="letter">f7</span></p>
</div>
<div id="f8" class="key">
<p class="bordered"><span class="letter">f8</span></p>
</div>
<div id="f9" class="key">
<p class="bordered"><span class="letter">f9</span></p>
</div>
<div id="f10" class="key">
<p class="bordered"><span class="letter">f10</span></p>
</div>
<div id="f11" class="key">
<p class="bordered"><span class="letter">f11</span></p>
</div>
<div id="f12" class="key">
<p class="bordered"><span class="letter">f12</span></p>
</div>
</div>
</div>
<div id="inner-row-1" class="row">
<div id="`" class="key">
<p class="bordered"><span class="letter">`</span></p>
</div>
<div id="1" class="key">
<p class="bordered"><span class="letter">1</span></p>
</div>
<div id="2" class="key">
<p class="bordered"><span class="letter">2</span></p>
</div>
<div id="3" class="key">
<p class="bordered"><span class="letter">3</span></p>
</div>
<div id="4" class="key">
<p class="bordered"><span class="letter">4</span></p>
</div>
<div id="5" class="key">
<p class="bordered"><span class="letter">5</span></p>
</div>
<div id="6" class="key">
<p class="bordered"><span class="letter">6</span></p>
</div>
<div id="7" class="key">
<p class="bordered"><span class="letter">7</span></p>
</div>
<div id="8" class="key">
<p class="bordered"><span class="letter">8</span></p>
</div>
<div id="9" class="key">
<p class="bordered"><span class="letter">9</span></p>
</div>
<div id="0" class="key">
<p class="bordered"><span class="letter">0</span></p>
</div>
<div id="-" class="key">
<p class="bordered"><span class="letter">-</span></p>
</div>
<div id="=" class="key">
<p class="bordered"><span class="letter">=</span></p>
</div>
<div id="backspace" class="key outer outer-weird">
<p class="bordered"><span class="letter">bck</span></p>
</div>
</div>
<div id="inner-row-2" class="row">
<div id="tab" class="key outer outer-half">
<p class="bordered"><span class="letter">tab </span></p>
</div>
<div id="q" class="key">
<p class="bordered"><span class="letter">q</span></p>
</div>
<div id="w" class="key">
<p class="bordered"><span class="letter">w</span></p>
</div>
<div id="e" class="key">
<p class="bordered"><span class="letter">e</span></p>
</div>
<div id="r" class="key">
<p class="bordered"><span class="letter">r</span></p>
</div>
<div id="t" class="key">
<p class="bordered"><span class="letter">t</span></p>
</div>
<div id="y" class="key">
<p class="bordered"><span class="letter">y</span></p>
</div>
<div id="u" class="key">
<p class="bordered"><span class="letter">u</span></p>
</div>
<div id="i" class="key">
<p class="bordered"><span class="letter">i</span></p>
</div>
<div id="o" class="key">
<p class="bordered"><span class="letter">o</span></p>
</div>
<div id="p" class="key">
<p class="bordered"><span class="letter">p</span></p>
</div>
<div id="[" class="key">
<p class="bordered"><span class="letter">[</span></p>
</div>
<div id="]" class="key">
<p class="bordered"><span class="letter">]</span></p>
</div>
<div id="back-slash" class="key outer outer-half">
<p class="bordered"><span class="letter">\</span></p>
</div>
</div>
<div id="inner-row-3" class="row">
<div id="caps" class="key outer outer-three-fourth">
<p class="bordered"><span class="letter">caps</span></p>
</div>
<div class="key">
<p class="bordered"><span class="letter">a</span></p>
</div>
<div class="key">
<p class="bordered"><span class="letter">s</span></p>
</div>
<div class="key">
<p class="bordered"><span class="letter">d</span></p>
</div>
<div class="key">
<p class="bordered"><span class="letter">f</span></p>
</div>
<div class="key">
<p class="bordered"><span class="letter">g</span></p>
</div>
<div class="key">
<p class="bordered"><span class="letter">h</span></p>
</div>
<div class="key">
<p class="bordered"><span class="letter">j</span></p>
</div>
<div class="key">
<p class="bordered"><span class="letter">k</span></p>
</div>
<div class="key">
<p class="bordered"><span class="letter">l</span></p>
</div>
<div class="key">
<p class="bordered"><span class="letter">;</span></p>
</div>
<div class="key">
<p class="bordered"><span class="letter">.</span></p>
</div>
<div id="enter" class="key outer outer-two">
<p class="bordered"><span class="letter">enter</span></p>
</div>
</div>
<div id="inner-row-4" class="row">
<div id="l-shift" class="key outer outer-two">
<p class="bordered"><span class="letter">shift</span></p>
</div>
<div class="key">
<p class="bordered"><span class="letter">z</span></p>
</div>
<div class="key">
<p class="bordered"><span class="letter">x</span></p>
</div>
<div class="key">
<p class="bordered"><span class="letter">c</span></p>
</div>
<div class="key">
<p class="bordered"><span class="letter">v</span></p>
</div>
<div class="key">
<p class="bordered"><span class="letter">b</span></p>
</div>
<div class="key">
<p class="bordered"><span class="letter">n</span></p>
</div>
<div class="key">
<p class="bordered"><span class="letter">m</span></p>
</div>
<div class="key">
<p class="bordered"><span class="letter">,</span></p>
</div>
<div class="key">
<p class="bordered"><span class="letter">.</span></p>
</div>
<div class="key">
<p class="bordered"><span class="letter">/</span></p>
</div>
<div id="r-shift" class="key outer outer-two-fifth">
<p class="bordered"><span class="letter">shift</span></p>
</div>
</div>
<div id="inner-row-5" class="row">
<div id="l-ctrl" class="key outer outer-fourth">
<p class="bordered"><span class="letter">ctrl</span></p>
</div>
<div id="l-win" class="key outer outer-fourth">
<p class="bordered"><span class="letter">win</span></p>
</div>
<div id="l-alt" class="key outer outer-fourth">
<p class="bordered"><span class="letter">alt</span></p>
</div>
<div id="space" class="key outer space">
<p class="bordered"><span class="letter">space</span></p>
</div>
<div id="r-alt" class="key outer outer-fourth">
<p class="bordered"><span class="letter">alt</span></p>
</div>
<div id="r-win" class="key outer outer-fourth">
<p class="bordered"><span class="letter">win</span></p>
</div>
<div id="fn" class="key outer outer-fourth">
<p class="bordered"><span class="letter">fn</span></p>
</div>
<div id="r-ctrl" class="key outer outer-fourth">
<p class="bordered"><span class="letter">ctrl</span></p>
</div>
</div>
</div>
<div id="col-1" class="col">
<div id="inner-row-0" class="row">
<div id="inner-col-0" class="col">
<div id="psc" class="key">
<p class="bordered"><span class="letter">psc</span></p>
</div>
<div id="slk" class="key">
<p class="bordered"><span class="letter">slk</span></p>
</div>
<div id="ps" class="key">
<p class="bordered"><span class="letter">ps</span></p>
</div>
</div>
</div>
<div id="inner-row-1" class="row">
<div id="inner-col-0" class="col">
<div id="ins" class="key">
<p class="bordered"><span class="letter">ins</span></p>
</div>
<div id="hm" class="key">
<p class="bordered"><span class="letter">hm</span></p>
</div>
<div id="up" class="key">
<p class="bordered"><span class="letter">up</span></p>
</div>
</div>
</div>
<div id="inner-row-2" class="row">
<div id="inner-col-0" class="col">
<div id="del" class="key">
<p class="bordered"><span class="letter">del</span></p>
</div>
<div id="end" class="key">
<p class="bordered"><span class="letter">end</span></p>
</div>
<div id="dn" class="key">
<p class="bordered"><span class="letter">dn</span></p>
</div>
</div>
</div>
<div id="inner-row-3" class="row">
<div id="inner-col-0" class="col">
<div id="up" class="key arrow">
<p class="bordered"><span class="letter">&#65514;</span></p>
</div>
</div>
</div>
<div id="inner-row-4" class="row">
<div id="inner-col-0" class="col">
<div id="left" class="key arrow">
<p class="bordered"><span class="letter">&#65513;</span></p>
</div>
<div id="down" class="key arrow">
<p class="bordered"><span class="letter">&#65516;</span></p>
</div>
<div id="right" class="key arrow">
<p class="bordered"><span class="letter">&#65515;</span></p>
</div>
</div>
</div>
</div>
<div id="col-2" class="col">
<div id="inner-row-0" class="row">
<div id="inner-col-0" class="col">
<div id="opt1" class="key">
<p class="bordered"><span class="letter">opt1</span></p>
</div>
<div id="opt2" class="key">
<p class="bordered"><span class="letter">opt2</span></p>
</div>
<div id="opt3" class="key">
<p class="bordered"><span class="letter">opt3</span></p>
</div>
<div id="opt4" class="key">
<p class="bordered"><span class="letter">opt4</span></p>
</div>
</div>
</div>
<div id="inner-row-1" class="row">
<div id="inner-col-0" class="col">
<div id="num" class="key">
<p class="bordered"><span class="letter">num</span></p>
</div>
<div id="/" class="key">
<p class="bordered"><span class="letter">/</span></p>
</div>
<div id="*" class="key">
<p class="bordered"><span class="letter">*</span></p>
</div>
<div id="-" class="key">
<p class="bordered"><span class="letter">-</span></p>
</div>
</div>
</div>
<div id="inner-row-2" class="row">
<div id="inner-col-0" class="col">
<div id="7" class="key">
<p class="bordered"><span class="letter">7</span></p>
</div>
<div id="8" class="key">
<p class="bordered"><span class="letter">8</span></p>
</div>
<div id="9" class="key">
<p class="bordered"><span class="letter">9</span></p>
</div>
</div>
<div id="plus" class="key">
<p class="bordered"><span class="letter">+</span></p>
</div>
</div>
<div id="inner-row-3" class="row">
<div id="inner-col-0" class="col">
<div id="4" class="key">
<p class="bordered"><span class="letter">4</span></p>
</div>
<div id="5" class="key">
<p class="bordered"><span class="letter">5</span></p>
</div>
<div id="6" class="key">
<p class="bordered"><span class="letter">6</span></p>
</div>
</div>
</div>
<div id="inner-row-4" class="row">
<div id="inner-col-0" class="col">
<div id="1" class="key">
<p class="bordered"><span class="letter">1</span></p>
</div>
<div id="2" class="key">
<p class="bordered"><span class="letter">2</span></p>
</div>
<div id="3" class="key">
<p class="bordered"><span class="letter">3</span></p>
</div>
</div>
<div id="num-enter" class="key">
<p class="bordered"><span class="letter"><</span></p>
</div>
</div>
<div id="inner-row-5" class="row">
<div id="inner-col-0" class="col">
<div id="zero" class="key outer outer-weirder">
<p class="bordered"><span class="letter">0</span></p>
</div>
<div id="dot" class="key">
<p class="bordered"><span class="letter">.</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
<script id="jsbin-source-html" type="text/html">doctype html
html(lang="en")
head
title= pageTitle
body
#container
#key-container
.col#col-0
.row#inner-row-0
.col#inner-col-0
.key#escape
p.bordered
span.letter esc
each key in ['f1','f2','f3','f4','f5','f6','f7','f8','f9','f10','f11','f12']
.key(id= key)
p.bordered
span.letter= key
.row#inner-row-1
each key in ['`','1','2','3','4','5','6','7','8','9',0,'-','=']
.key(id= key)
p.bordered
span.letter= key
.key(class='outer outer-weird' id='backspace')
p.bordered
span.letter bck
.row#inner-row-2
.key(class='outer outer-half' id='tab')
p.bordered
span.letter tab
each key in ['q','w','e','r','t','y','u', 'i','o','p','[',']']
.key(id= key)
p.bordered
span.letter= key
.key(class='outer outer-half' id='back-slash')
p.bordered
span.letter \
.row#inner-row-3
.key(class='outer outer-three-fourth' id='caps')
p.bordered
span.letter caps
each key in ['a','s','d','f','g','h','j','k','l',';','.']
.key
p.bordered
span.letter= key
.key(class='outer outer-two' id='enter')
p.bordered
span.letter='enter'
.row#inner-row-4
.key(class='outer outer-two' id='l-shift')
p.bordered
span.letter shift
each key in ['z','x','c','v','b','n','m',',','.','/']
.key
p.bordered
span.letter= key
.key(class='outer outer-two-fifth' id='r-shift')
p.bordered
span.letter shift
.row#inner-row-5
.key(class='outer outer-fourth' id='l-ctrl')
p.bordered
span.letter ctrl
.key(class='outer outer-fourth' id='l-win')
p.bordered
span.letter win
.key(class='outer outer-fourth' id='l-alt')
p.bordered
span.letter alt
.key(class='outer space' id='space')
p.bordered
span.letter space
.key(class='outer outer-fourth' id='r-alt')
p.bordered
span.letter alt
.key(class='outer outer-fourth' id='r-win')
p.bordered
span.letter win
.key(class='outer outer-fourth' id='fn')
p.bordered
span.letter fn
.key(class='outer outer-fourth' id='r-ctrl')
p.bordered
span.letter ctrl
.col#col-1
.row#inner-row-0
.col#inner-col-0
each key in ['psc','slk','ps']
.key(id= key)
p.bordered
span.letter= key
.row#inner-row-1
.col#inner-col-0
each key in ['ins','hm','up']
.key(id= key)
p.bordered
span.letter= key
.row#inner-row-2
.col#inner-col-0
each key in ['del','end','dn']
.key(id= key)
p.bordered
span.letter= key
.row#inner-row-3
.col#inner-col-0
.key(id='up' class='arrow')
p.bordered
span.letter &#65514;
.row#inner-row-4
.col#inner-col-0
.key(id='left' class='arrow')
p.bordered
span.letter &#65513;
.key(id='down' class='arrow')
p.bordered
span.letter &#65516;
.key(id='right' class='arrow')
p.bordered
span.letter &#65515;
.col#col-2
.row#inner-row-0
.col#inner-col-0
each key in ['opt1','opt2','opt3','opt4']
.key(id= key)
p.bordered
span.letter= key
.row#inner-row-1
.col#inner-col-0
each key in ['num','/','*','-']
.key(id= key)
p.bordered
span.letter= key
.row#inner-row-2
.col#inner-col-0
each key in ['7','8','9']
.key(id= key)
p.bordered
span.letter= key
.key(id='plus')
p.bordered
span.letter +
.row#inner-row-3
.col#inner-col-0
each key in ['4','5','6']
.key(id= key)
p.bordered
span.letter= key
.row#inner-row-4
.col#inner-col-0
each key in ['1','2','3']
.key(id= key)
p.bordered
span.letter= key
.key(id='num-enter')
p.bordered
span.letter <
.row#inner-row-5
.col#inner-col-0
.key(class='outer outer-weirder' id='zero')
p.bordered
span.letter 0
.key(id='dot')
p.bordered
span.letter .
script(src="//code.jquery.com/jquery.min.js")
link(href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css",rel="stylesheet",type="text/css")
script(src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js")
</script>
<script id="jsbin-source-css" type="text/css">#container {
width: 100%;
margin: 0 auto;
padding: 20px;
font-size: 12px;
#key-container {
> .col {
display: inline-block;
margin: 0 20px;
}
#col-0 {
#inner-row-0 {
margin-bottom: 10px;
}
}
#col-1 {
#inner-row-0 {
margin-bottom: 10px;
}
#inner-row-3 {
display: inline-block;
margin: 47px auto 0;
width: 100%;
text-align: center;
}
}
#col-2 {
#inner-row-0 {
display: none;
margin-bottom: 10px;
}
#inner-row-2, #inner-row-4 {
position: relative;
}
}
.key {
border: 1px solid #cdcdcd;
border-radius: 4px;
height: 40px;
width: 40px;
display: inline-block;
margin: 2px;
background-color: #efefef;
&:hover {
cursor: pointer;
background-color: darken(#efefef, 5%);
}
.bordered {
display: inline-block;
border: 1px solid #ababab;
border-radius: 4px;
height: 100%-2px;
width: 100%-2px;
margin: 1px;
position: relative;
.letter {
position: absolute;
bottom: 1px;
right: 0;
left: 0;
text-align: center;
text-transform: uppercase;
}
}
}
#escape {
margin-right: 40px;
}
#f4, #f8, #F12 {
margin-right: 25px;
}
.outer {
background-color: #dedede;
&:hover {
background-color: darken(#dedede, 4%);
}
}
.outer-fourth {
width: 50px;
}
.outer-half {
width:60px;
}
.outer-three-fourth {
width:70px;
}
.outer-two {
width:95px;
}
.outer-two-fifth {
width:113px;
}
.outer-weird {
width: 80px;
}
.outer-weirder {
width: 84px;
}
.space {
width: 274px;
}
.arrow {
font-size: 18px;
}
#plus, #num-enter {
position: absolute;
top: 0;
right: 0;
height: 87px;
}
}
}</script>
</body>
</html>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
Raw
jsbin.guwece.css
#container {
width: 100%;
margin: 0 auto;
padding: 20px;
font-size: 12px;
}
#container #key-container > .col {
display: inline-block;
margin: 0 20px;
}
#container #key-container #col-0 #inner-row-0 {
margin-bottom: 10px;
}
#container #key-container #col-1 #inner-row-0 {
margin-bottom: 10px;
}
#container #key-container #col-1 #inner-row-3 {
display: inline-block;
margin: 47px auto 0;
width: 100%;
text-align: center;
}
#container #key-container #col-2 #inner-row-0 {
display: none;
margin-bottom: 10px;
}
#container #key-container #col-2 #inner-row-2,
#container #key-container #col-2 #inner-row-4 {
position: relative;
}
#container #key-container .key {
border: 1px solid #cdcdcd;
border-radius: 4px;
height: 40px;
width: 40px;
display: inline-block;
margin: 2px;
background-color: #efefef;
}
#container #key-container .key:hover {
cursor: pointer;
background-color: #e2e2e2;
}
#container #key-container .key .bordered {
display: inline-block;
border: 1px solid #ababab;
border-radius: 4px;
height: 98%;
width: 98%;
margin: 1px;
position: relative;
}
#container #key-container .key .bordered .letter {
position: absolute;
bottom: 1px;
right: 0;
left: 0;
text-align: center;
text-transform: uppercase;
}
#container #key-container #escape {
margin-right: 40px;
}
#container #key-container #f4,
#container #key-container #f8,
#container #key-container #F12 {
margin-right: 25px;
}
#container #key-container .outer {
background-color: #dedede;
}
#container #key-container .outer:hover {
background-color: #d4d4d4;
}
#container #key-container .outer-fourth {
width: 50px;
}
#container #key-container .outer-half {
width: 60px;
}
#container #key-container .outer-three-fourth {
width: 70px;
}
#container #key-container .outer-two {
width: 95px;
}
#container #key-container .outer-two-fifth {
width: 113px;
}
#container #key-container .outer-weird {
width: 80px;
}
#container #key-container .outer-weirder {
width: 84px;
}
#container #key-container .space {
width: 274px;
}
#container #key-container .arrow {
font-size: 18px;
}
#container #key-container #plus,
#container #key-container #num-enter {
position: absolute;
top: 0;
right: 0;
height: 87px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment