Hello Viewer, Here you’ll Find Code 7 Best keyboard html code.
SOURCE CODE -
<html>
<head>
<title>7 Best keyboard html code | HTML and CSS Keyboard | keyboard design in html</title>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<style>
:root {
--green: #A2CCB6;
--yellow: #FCEEB5;
--peach: #EE786E;
--off-white: #FFFFF4;
}
body {
background-image: linear-gradient(to right top, #f4f416, #ffa000, #ff0051, #ff00a2, #5d12eb);
align-items: center;
justify-content: center;
display: flex;
height: 100vh;
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;
}
</style>
<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>
<script>
feather.replace();
</script>
</body>
</html>
0 Comments