├── README.md
├── style.css
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | # onscreenkeyboard
2 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;500&display=swap');
2 |
3 | body {
4 | background-color: #f2f2f2;
5 | display: flex;
6 | overflow: hidden;
7 | flex-direction: column;
8 | justify-content: center;
9 | align-items: center;
10 | font-family: 'Roboto', sans-serif;
11 | height: 100vh;
12 | }
13 |
14 | .keys {
15 | display: flex;
16 | list-style: none;
17 | }
18 |
19 | li {
20 | box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.15);
21 | transition: 0.5s;
22 | height: 2.5em;
23 | font-size: 1em;
24 | width: 3em;
25 | margin: 0.3em;
26 | background-color: #f2f2f2;
27 | border-radius: 0.5em;
28 | line-height: 2.5em;
29 | letter-spacing: 1px;
30 | text-align: center;
31 | }
32 |
33 | li:hover {
34 | box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
35 | cursor: pointer;
36 | top: 3px;
37 | }
38 |
39 | #red {
40 | background-color: #a3f7bf;
41 | width: 5em;
42 | }
43 |
44 | #blue {
45 | background-color: #9aebed;
46 | width: 6em;
47 | }
48 |
49 | #rebeca {
50 | background-color: #fecd1a;
51 | width: 8em;
52 | }
53 |
54 | #green {
55 | background-color: #fa86be;
56 | width: 6em;
57 | }
58 |
59 | #up {
60 | background-color: #8594e4;
61 | width: 8em;
62 | }
63 |
64 | #yellow {
65 | background-color: #fffcab;
66 | width: 5em;
67 | }
68 |
69 | #grey {
70 | background-color: #fd3a69;
71 | width: 3.3em;
72 | }
73 |
74 | #one {
75 | background-color: #faafff;
76 | width: 5em;
77 | }
78 |
79 | #two {
80 | width: 24.5em;
81 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Keyboard
9 |
10 |
11 |
12 |
13 | - Esc
14 | - 1
15 | - 2
16 | - 3
17 | - 4
18 | - 5
19 | - 6
20 | - 7
21 | - 7
22 | - 8
23 | - 0
24 | - _
25 | - =
26 | - ←
27 |
28 |
29 | - TAB
30 | - Q
31 | - W
32 | - E
33 | - R
34 | - T
35 | - Y
36 | - U
37 | - I
38 | - O
39 | - P
40 | - [
41 | - ]
42 | - \
43 |
44 |
45 | - CAPSLK
46 | - A
47 | - S
48 | - D
49 | - F
50 | - G
51 | - H
52 | - J
53 | - K
54 | - L
55 | - ;
56 | - ""
57 | - ENTER
58 |
59 |
60 | - SHIFT
61 | - Z
62 | - X
63 | - C
64 | - V
65 | - B
66 | - N
67 | - M
68 | - ,
69 | - .
70 | - ?
71 | - SHIFT
72 |
73 |
74 | - ctrl
75 | - alt
76 | - cmd
77 |
78 | - cmd
79 | - alt
80 |
81 |