-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
90 lines (86 loc) · 2.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interactive 60% Keyboard</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="keyboard">
<div class="row">
<kbd tabindex=1 data-key="`" data-alt="~"></kbd>
<kbd data-key="1" data-alt="!"></kbd>
<kbd data-key="2" data-alt="@"></kbd>
<kbd data-key="3" data-alt="#"></kbd>
<kbd data-key="4" data-alt="$"></kbd>
<kbd data-key="5" data-alt="%"></kbd>
<kbd data-key="6" data-alt="^"></kbd>
<kbd data-key="7" data-alt="&"></kbd>
<kbd data-key="8" data-alt="*"></kbd>
<kbd data-key="9" data-alt="("></kbd>
<kbd data-key="0" data-alt=")"></kbd>
<kbd data-key="-" data-alt="_"></kbd>
<kbd data-key="=" data-alt="+"></kbd>
<kbd data-key="backspace"></kbd>
</div>
<div class="row">
<kbd data-key="tab"></kbd>
<kbd data-key="q"></kbd>
<kbd data-key="w"></kbd>
<kbd data-key="e"></kbd>
<kbd data-key="r"></kbd>
<kbd data-key="t"></kbd>
<kbd data-key="y"></kbd>
<kbd data-key="u"></kbd>
<kbd data-key="i"></kbd>
<kbd data-key="o"></kbd>
<kbd data-key="p"></kbd>
<kbd data-key="[" data-alt="{"></kbd>
<kbd data-key="]" data-alt="}"></kbd>
<kbd data-key="\" data-alt="|" id='backslash'></kbd>
</div>
<div class="row">
<kbd data-key="caps"></kbd>
<kbd data-key="a"></kbd>
<kbd data-key="s"></kbd>
<kbd data-key="d"></kbd>
<kbd data-key="f"></kbd>
<kbd data-key="g"></kbd>
<kbd data-key="h"></kbd>
<kbd data-key="j"></kbd>
<kbd data-key="k"></kbd>
<kbd data-key="l"></kbd>
<kbd data-key=";" data-alt=":"></kbd>
<kbd data-key="'" data-alt='"' id='quote'></kbd>
<kbd data-key="enter"></kbd>
</div>
<div class="row">
<kbd data-key="lshift"></kbd>
<kbd data-key="z"></kbd>
<kbd data-key="x"></kbd>
<kbd data-key="c"></kbd>
<kbd data-key="v"></kbd>
<kbd data-key="b"></kbd>
<kbd data-key="n"></kbd>
<kbd data-key="m"></kbd>
<kbd data-key="," data-alt="<"></kbd>
<kbd data-key="." data-alt=">"></kbd>
<kbd data-key="/" data-alt="?"></kbd>
<kbd data-key="rshift"></kbd>
</div>
<div class="row">
<kbd data-key="lctrl"></kbd>
<kbd data-key="lwin"></kbd>
<kbd data-key="lalt"></kbd>
<kbd data-key="space"></kbd>
<kbd data-key="ralt"></kbd>
<kbd data-key="rwin"></kbd>
<kbd data-key="rctx"></kbd>
<kbd data-key="rctrl"></kbd>
</div>
</div>
<em>Press a key</em>
<script src="./script.js"></script>
</body>
</html>