<html>
<head>
<title>Keyboard | Fahadabe</title>
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<style>
*{
text-decoration:none;color:white;font-family: 'Nunito', sans-serif;}
@font-face {font-family: wingding;src: url("https://www.dropbox.com/pri/get/public/wingding.ttf");}
body{background:#262626;}
table{display:inline-block;border-collapse: separate;border-spacing: 3px 6px;}
.wrapper{width:1220px;box-shadow:0.5px 3px 1px #262626,inset 0.1px 0.10px 1px white;padding:10px;background:#696969;margin:0 auto;border-radius:10px}
td > a > span{font-size:12px;}
td > a{font-size:15px;}
td:active{box-shadow:0.5px 3px 0.2px #262626,inset 0.1px 0.10px 1px white;}
td{background:#262626;padding:10px;width:30px;height:60px;text-align:center;margin:10px;
border-radius:10px;box-shadow:0.01px 5px 0.2px #262626,inset 0.1px 0.10px 1px white;}
style="color:#5886a6;"
</style>
</head>
<body>
<div class="wrapper">
<table>
<tr>
<td><a href="">Esc</a></td>
<td><a href="">F1<br><span style="color:#5886a6;margin-left:5px;margin-top:2px;position:absolute;">◀</span></a></td>

<td><a href="">F2<br><span style="color:#5886a6;margin-left:5px;margin-top:2px;position:absolute;">▶</span></a></td>

<td><a href="">F3<br><span style="color:#5886a6;margin-left:5px;margin-top:2px;position:absolute;">🗺</span></a></td>

<td><a href="">F4<br><span style="color:#5886a6;margin-left:5px;margin-top:2px;position:absolute;">&#57620;</span></a></td>

<td><a href="">F5<br><span style="color:#5886a6;margin-left:5px;margin-top:2px;position:absolute;">⏮</span></a></td>

<td><a href="">F6<br><span style="color:#5886a6;margin-left:5px;margin-top:2px;position:absolute;">⏭</span></a></td>

<td><a href="">F7<br><span style="color:#5886a6;margin-left:5px;margin-top:2px;position:absolute;">𝅘𝅥𝅮</span></a></td>

<td><a href="">F8<br><span style="color:#5886a6;margin-left:-5px;margin-top:2px;position:absolute;">⏵/⏸</span></a></td>

<td><a href="">F9<br><span style="color:#5886a6;margin-left:5px;margin-top:2px;position:absolute;">⏹</span></a></td>

<td><a href="">F10<br><span style="color:#5886a6;margin-left:5px;margin-top:2px;position:absolute;">🕨</span></a></td>

<td><a href="">F11<br><span style="color:#5886a6;margin-left:5px;margin-top:2px;position:absolute;">🕩</span></a></td>

<td><a href="">F12<br><span style="color:#5886a6;margin-left:5px;margin-top:2px;position:absolute;">🕪</span></a></td>

<td><a href="">PrtSc<br>SysRq</a></td>
<td><a href="">Scroll<br>Lock</a></td>
<td><a href="">Delete</a></td>

<td class="social" style="width:78px;background:#dd4b39;box-shadow:0.01px 5px 0.2px #262626;"><a target="_blank" href="https://plus.google.com/">Google +</a></td>

</tr>
<tr>
<td><a href="">`<br><span>~</span></a></td>
<td><a href="">1<br><span>!</span></a></td>
<td><a href="">2<br><span>@</span></a></td>
<td><a href="">3<br><span>#</span></a></td>
<td><a href="">4<br><span>$</span></a></td>
<td><a href="">5<br><span>%</span></a></td>
<td><a href="">6<br><span>^</span></a></td>
<td><a href="">7<br><span>&</span></a></td>
<td><a href="">8<br><span>*</span></a></td>
<td><a href="">9<br><span>(</span></a></td>
<td><a href="">0<br><span>)</span></a></td>
<td><a href="">_<br><span>-</span></a></td>
<td><a href="">+<br><span>=</span></a></td>
<td colspan="2"><a href="">◀  BackSpace</a></td>
<td><a href="">Home</a></td>

<td class="social" style="width:78px;background:#3b5998;box-shadow:0.01px 5px 0.2px #262626;"><a target="_blank" href="https://www.facebook.com">Facebook</a></td>

</tr>
<tr>
<td colspan="2" ><a href="">◀ Tab ▶</a></td>
<td><a href="">Q</a></td>
<td><a href="">W</a></td>
<td><a href="">E</a></td>
<td><a href="">R</a></td>
<td><a href="">T</a></td>
<td><a href="">Y</a></td>
<td><a href="">U</a></td>
<td><a href="">I</a></td>
<td><a href="">O</a></td>
<td><a href="">P</a></td>
<td><a href="">{<br>[</a></td>
<td><a href="">}<br>]</a></td>
<td><a href="">¦<br>\</a></td>
<td><a href="">PgUp</a></td>
<td class="social" style="width:78px;background:#fccc63;box-shadow:0.01px 5px 0.2px #262626;"><a target="_blank" href="https://www.instagram.com">Instagram</a></td>
</tr>
<tr>
<td colspan="2" ><a href="">Caps<br>Lock</a></td>
<td><a href="">A</a></td>
<td><a href="">S</a></td>
<td><a href="">D</a></td>
<td><a href="">F</a></td>
<td><a href="">G</a></td>
<td><a href="">H</a></td>
<td><a href="">J</a></td>
<td><a href="">K</a></td>
<td><a href="">L</a></td>
<td><a href="">:<br>;</a></td>
<td><a href="">"<br>'</a></td>
<td colspan="2"><a href="">◀ Enter</a></td>
<td><a href="">PgDn</a></td>
<td class="social" style="width:78px;background:#1da1f2;box-shadow:0.01px 5px 0.2px #262626;"><a target="_blank" href="https://twitter.com">Twitter</a></td>
</tr>
<tr>
<td colspan="3" ><a href="">▲ Shift</a></td>
<td><a href="">Z</a></td>
<td><a href="">X</a></td>
<td><a href="">C</a></td>
<td><a href="">V</a></td>
<td><a href="">B</a></td>
<td><a href="">N</a></td>
<td><a href="">M</a></td>
<td><a href=""><<br>,</a></td>
<td><a href="">><br>.</a></td>
<td><a href="">?<br>/</a></td>
<td ><a href="">▲ Shift</a></td>
<td ><a href="">▲</a></td>
<td><a href="">End</a></td>
<td class="social" style="width:78px;background:#a4c639;box-shadow:0.01px 5px 0.2px #262626;"><a target="_blank" href="https://play.google.com">Google Play</a></td>
</tr>
<tr>
<td colspan="2"><a style="color:#5886a6;padding-right:40px;" href="">Fn</a></td>
<td><a href="">Ctrl</a></td>
<td><a style="font-family: wingdings" href="">ÿ</a></td>
<td><a href="">Alt</a></td>
<td colspan="4"><a href="">Space</a></td>
<td><a href="">Alt</a></td>
<td><a style="font-family: wingdings" href="">ÿ</a></td>
<td><a href="">&#9776;</a></td>
<td><a href="">Ctrl</a></td>
<td><a href="">◀</a></td>
<td><a href="">▼</a></td>
<td><a href="">▶</a></td>
<td class="social" style="width:78px;background:#A80000;box-shadow:0.01px 5px 0.2px #262626;"><a target="_blank" href="https://www.microsoft.com/en-us/">Microsoft</a></td>
</tr>
</table>
<table style="float:right;">
<tr><td colspan="4">Keyboard by <a style="color:#f66e58;" target=_blank href="https://www.facebook.com/fahdABE">Fahadabe</a></tr>
<tr><td><a href="">Num<br>Lock</a></td><td><a href="">/</a></td><td><a href="">*</a></td><td><a href="">-</a></td></tr>
<tr><td><a href="">7<br><span>Home</span></a></td><td><a href="">8<br><span>▲</span></a></td><td><a href="">9<br><span>PgUp</span></a></td><td rowspan="2"><a href="">+</a></td></tr>
<tr><td><a href="">4<br><span>◀</span></a></td><td><a href="">5</a></td><td><a href="">6<br><span>▶</span></a></td></tr>
<tr><td><a href="">1<br><span>End</span></a></td><td><a href="">2<br><span>▼</span></a></td><td><a href="">3<br><span>PgDn</span></a></td><td rowspan="2"><a href="">Enter</a></td></tr>
<tr><td colspan="2"><a href="">0<br><span>Ins</span></a></td><td><a href="">.<br><span>Del</span></a></td></tr>
</table>
</div>
</body>
</html>

/*
* This is not my work..
* Author:
* https://www.sourcecodester.com/htmlcss/11004/create-keyboard-using-html-and-css.html
*/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.