Hello Viewer, Here you’ll Find Code 7 Best keyboard html code
HTML CODE -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>7 Best keyboard html code | HTML and CSS Keyboard | keyboard design in html</title>
</head>
<body>
<figure class="keyboard">
<div class="key key-function key-small-type">esc</div>
<div class="key key-function key-small-type key-right">F1</div>
<div class="key key-function key-small-type key-right">F2</div>
<div class="key key-function key-small-type key-right">F3</div>
<div class="key key-function key-small-type key-right">F4</div>
<div class="key key-function key-small-type key-right">F5</div>
<div class="key key-function key-small-type key-right">F6</div>
<div class="key key-function key-small-type key-right">F7</div>
<div class="key key-function key-small-type key-right">F8</div>
<div class="key key-function key-small-type key-right">F9</div>
<div class="key key-function key-small-type key-right">F10</div>
<div class="key key-function key-small-type key-right">F11</div>
<div class="key key-function key-small-type key-right">F12</div>
<div class="key key-function">⏏</div>
<div class="key">§</div>
<div class="key">1</div>
<div class="key">2</div>
<div class="key">3</div>
<div class="key">4</div>
<div class="key">5</div>
<div class="key">6</div>
<div class="key">7</div>
<div class="key">8</div>
<div class="key">9</div>
<div class="key">0</div>
<div class="key">+</div>
<div class="key">´</div>
<div class="key key-size-2 key-small-type key-right">delete</div>
<div class="key key-size-2 key-small-type">tab</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">[</div>
<div class="key">]</div>
<div class="key">\</div>
<div class="key key-size-3 key-small-type key-caps-lock">caps lock</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">;</div>
<div class="key">'</div>
<div class="key key-size-3 key-small-type key-right">return</div>
<div class="key key-size-4 key-small-type">shift</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">,</div>
<div class="key">.</div>
<div class="key">/</div>
<div class="key key-size-5 key-small-type key-right">shift</div>
<div class="key key-size-6 key-small-type">ctrl</div>
<div class="key key-size-6 key-small-type">option</div>
<div class="key key-size-2 key-small-type">command ⌘</div>
<div class="key key-size-7"></div>
<div class="key key-size-2 key-small-type key-right">⌘ command</div>
<div class="key key-size-6 key-small-type key-right">option</div>
<div class="key key-size-6 key-small-type key-right">ctrl</div>
</figure>
</body>
</html>
CSS CODE -
<style>
@import url(https://fonts.googleapis.com/css?family=Duru+Sans);
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
display: block;
box-shadow: inset 0px 0px 100px rgba(0,0,0,0.6);
background-image: linear-gradient(to right top, #f4f416, #ffa000, #ff0051, #ff00a2, #5d12eb);
}
figure.keyboard {
position: absolute;
left: 50%;
top: 50%;
margin-left: -377px;
margin-top: -150px;
width: 751px;
height: 305px;
font-family: "Duru Sans", Arial, sans-serif;
padding: 8px 10px;
border: 1px solid rgb(160,160,160);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
box-shadow:
0px 1px 0px rgb(140, 140, 140),
0px 2px 0px rgb(130, 130, 130),
0px 3px 0px rgb(125, 125, 125),
0px 4px 0px rgb(150, 150, 150),
0px 5px 0px rgb(100, 100, 100),
0px -10px 40px rgba(0, 0, 0, 0.4);
border-radius: 7px;
background: rgb(239,239,239);
background: url('https://d36xtkk24g8jdx.cloudfront.net/bluebar/f0c1312/images/shared/noise-2.png'), -moz-linear-gradient(top, rgb(220,220,220) 0%, rgb(216,216,216) 95%, rgb(226,226,226) 100%);
background: url('https://d36xtkk24g8jdx.cloudfront.net/bluebar/f0c1312/images/shared/noise-2.png'), -webkit-gradient(linear, left top, left bottom, color-stop(0%rgb(220,220,220)), color-stop(95%,rgb(216,216,216)), color-stop(100%,rgb(226,226,226)));
background: url('https://d36xtkk24g8jdx.cloudfront.net/bluebar/f0c1312/images/shared/noise-2.png'), -webkit-linear-gradient(top, rgb(220,220,220) 0%,rgb(216,216,216) 95%,rgb(226,226,226) 100%);
background: url('https://d36xtkk24g8jdx.cloudfront.net/bluebar/f0c1312/images/shared/noise-2.png'), -o-linear-gradient(top, rgb(220,220,220) 0%,rgb(216,216,216) 95%,rgb(226,226,226) 100%);
background: url('https://d36xtkk24g8jdx.cloudfront.net/bluebar/f0c1312/images/shared/noise-2.png'), -ms-linear-gradient(top, rgb(220,220,220) 0%,rgb(216,216,216) 95%,rgb(226,226,226) 100%);
background: url('https://d36xtkk24g8jdx.cloudfront.net/bluebar/f0c1312/images/shared/noise-2.png'), linear-gradient(to bottom, rgb(220,220,220) 0%,rgb(216,216,216) 95%,rgb(226,226,226) 100%);
}
figure.keyboard .key {
width: 40px;
height: 40px;
display: block;
float: left;
margin: 5px;
margin-bottom: 6px;
color: rgb(80,80,80);
box-shadow:
0px 1px 0px rgb(250, 250, 250),
0px 2px 0px rgb(250, 250, 250),
0px 3px 0px rgb(250, 250, 250),
0px 4px 0px 1px rgb(130, 130, 130),
0px 4px 0px 2px rgb(70, 70, 70);
background: rgb(249,249,249);
background: -moz-linear-gradient(top, rgb(249,249,249) 0%, rgb(239,239,239) 95%, rgb(226,226,226) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(249,249,249)), color-stop(95%,rgb(239,239,239)), color-stop(100%,rgb(226,226,226)));
background: -webkit-linear-gradient(top, rgb(249,249,249) 0%,rgb(239,239,239) 95%,rgb(226,226,226) 100%);
background: -o-linear-gradient(top, rgb(249,249,249) 0%,rgb(239,239,239) 95%,rgb(226,226,226) 100%);
background: -ms-linear-gradient(top, rgb(249,249,249) 0%,rgb(239,239,239) 95%,rgb(226,226,226) 100%);
background: linear-gradient(to bottom, rgb(249,249,249) 0%,rgb(239,239,239) 95%,rgb(226,226,226) 100%);
border-radius: 3px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
overflow: hidden;
text-align: center;
padding-top: 13px;
}
/* SIZES */
figure.keyboard .key-function {
padding-top: 4px;
width: 42px;
height: 20px;
font-size: 0.9em;
}
figure.keyboard .key-size-2 {
width: 68px;
}
figure.keyboard .key-size-3 {
width: 79px;
}
figure.keyboard .key-size-4 {
width: 104px;
}
figure.keyboard .key-size-5 {
width: 105px;
}
figure.keyboard .key-size-6 {
width: 58px;
}
figure.keyboard .key-size-7 {
width: 291px;
}
/* SPECIAL */
figure.keyboard .key.key-caps-lock:before {
display: block;
position: absolute;
margin-left: 0px;
margin-top: -10px;
content: " ";
width: 5px;
height: 5px;
background: rgb(50, 75, 60);
border-radius: 100%;
}
/* STYLES */
figure.keyboard .key-small-type {
font-size: 0.5em;
line-height: 40px;
vertical-align: bottom;
text-align: left;
padding-left: 0.4em;
}
figure.keyboard .key-small-type.key-right {
text-align: right;
padding-right: 0.4em;
}
figure.keyboard .key-function.key-small-type {
font-size: 0.7em;
padding-right: 2px;
padding-top: 2px;
text-align: center;
line-height: 18px;
}
figure.keyboard .key-function.key-small-type.key-right {
font-size: 8px;
padding-top: 5px;
text-align: right;
}
</style>
0 Comments