Skip to content

Instantly share code, notes, and snippets.

@khuongyolo

khuongyolo/index.html

Created February 12, 2022 04:35
Show Gist options
  • Save khuongyolo/00c024d3a5109d6f5e3d813355d5d8ef to your computer and use it in GitHub Desktop.
Save khuongyolo/00c024d3a5109d6f5e3d813355d5d8ef to your computer and use it in GitHub Desktop.
Download ZIP
Mechanical Keyboard
Raw
index.html
<head>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body>
<div class="keyboard">
<div class="row">
<div class="key key__esc">
<i data-feather="x"></i>
</div>
<div class="key key__symbols">
! <span> 1
</div>
<div class="key key__symbols">
@ <span> 2
</div>
<div class="key key__symbols">
# <span> 3
</div>
<div class="key key__symbols">
$ <span> 4
</div>
<div class="key key__symbols">
% <span> 5
</div>
<div class="key key__symbols">
^ <span> 6
</div>
<div class="key key__symbols">
& <span> 7
</div>
<div class="key key__symbols">
* <span> 8
</div>
<div class="key key__symbols">
( <span> 9
</div>
<div class="key key__symbols">
) <span> 0
</div>
<div class="key key__symbols">
_ <span> -
</div>
<div class="key key__symbols">
+ <span> =
</div>
<div class="key key__delete key__icon">
<i data-feather="delete"></i>
</div>
</div>
<div class="row">
<div class="key key__oneandhalf">
<i data-feather="log-in"></i>
</div>
<div class="key">
Q
</div>
<div class="key">
W
</div>
<div class="key">
E
</div>
<div class="key">
R
</div>
<div class="key">
T
</div>
<div class="key">
Y
</div>
<div class="key">
U
</div>
<div class="key">
I
</div>
<div class="key">
O
</div>
<div class="key">
P
</div>
<div class="key key__symbols">
{ <span> [
</div>
<div class="key key__symbols">
} <span> ]
</div>
<div class="key key__symbols key__oneandhalf">
| <span> \
</div>
</div>
<div class="row">
<div class="key key__caps">
<i data-feather="meh"></i>
</div>
<div class="key">
A
</div>
<div class="key">
S
</div>
<div class="key">
D
</div>
<div class="key">
F
</div>
<div class="key">
G
</div>
<div class="key">
H
</div>
<div class="key">
J
</div>
<div class="key">
K
</div>
<div class="key">
L
</div>
<div class="key key__symbols">
: <span> ;
</div>
<div class="key key__symbols">
" <span> '
</div>
<div class="key key__enter">
<i data-feather="corner-down-left"></i>
</div>
</div>
<div class="row">
<div class="key key__shift-left">
<i data-feather="arrow-up-circle"></i>
</div>
<div class="key">
Z
</div>
<div class="key">
X
</div>
<div class="key">
C
</div>
<div class="key">
V
</div>
<div class="key">
B
</div>
<div class="key">
N
</div>
<div class="key">
M
</div>
<div class="key key__symbols">
> <span> .
</div>
<div class="key key__symbols">
< <span> .
</div>
<div class="key key__symbols">
? <span> /
</div>
<div class="key">
<i data-feather="arrow-up-circle"></i>
</div>
<div class="key key__arrow">
<i data-feather="arrow-up"></i>
</div>
<div class="key">
<i data-feather="trash-2"></i>
</div>
</div>
<div class="row">
<div class="key key__bottom-funct">
^
</div>
<div class="key key__bottom-funct">
<i data-feather="activity"></i>
</div>
<div class="key key__bottom-funct">
<i data-feather="command"></i>
</div>
<div class="key key__spacebar">
</div>
<div class="key">
<i data-feather="command"></i>
</div>
<div class="key">
<i data-feather="activity"></i>
</div>
<div class="key key__arrow">
<i data-feather="arrow-left"></i>
</div>
<div class="key key__arrow">
<i data-feather="arrow-down"></i>
</div>
<div class="key key__arrow">
<i data-feather="arrow-right"></i>
</div>
</div>
</div>
</body>
Raw
mechanical-keyboard.markdown

Mechanical Keyboard

Mechanical Keyboard created with CSS for the January 2019 Codepen Challenge

A Pen by khuongyolo on CodePen.

License.

Raw
script.js
feather.replace();
Raw
style.css
:root {
--green: #A2CCB6;
--yellow: #FCEEB5;
--peach: #EE786E;
--off-white: #FFFFF4;
}
body {
background-color: #FFFFFF;
margin-top: 50px;
font-family: Arial;
}
span {
display: block;
margin-top: -5px;
}
.keyboard {
width: 780px;
height: 262px;
margin: 0px auto;
border: 3px solid #000000;
border-radius: 10px;
background: #000000;
}
.row {
margin-top: 2px;
overflow: hidden;
}
.key {
width: 50px;
height: 50px;
float: left;
cursor: pointer;
background-color: var(--off-white);
color: #000000;
line-height: 48px;
text-align: center;
margin-left: 2px;
border-radius: 4px;
}
.key__symbols {
line-height: 28px;
}
.key__delete {
width: 100px;
}
.key__oneandhalf {
width: 75px;
}
.key__esc {
background: var(--peach);
}
.key__enter {
width: 112px;
}
.key__caps {
width: 90px;
}
.key__shift-left {
width: 100px;
}
.key__spacebar {
width: 300px;
}
.key__bottom-funct {
width: 70px;
}
.key__arrow {
background: var(--green);
}
.feather {
margin-top: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment