Keyboard Html And Css

Keyboard:-

Hello friends, as you know that we upload many coding projects, that too for free so that you can learn coding easily. Let us discuss the topic of today's coding project. If you want to create project html and css as shown in the image above then copy the code below and paste it on your code runner.

Source Code:-

<!DOCTYPE html>

<html>

<li><a href="#" class="key fn">Eject</a></li>

</ul>

<li><a href="#" class="key c46" id="delete">Delete</a></li>

</ul>

</ul>

<li><a href="#" class="key c13 alt" id="enter">return</a></li>

</ul>

<li><a href="#" class="key c16 shiftleft">Shift</a></li>

<li><a href="#" class="key c16 shiftright">Shift</a></li>

</ul>

<li><a href="#" class="key command" id="commandleft">insert</a></li>

<li>

</li>

</ol>

</ul>

</div>

<cite>

</cite>

<div class="footer">Created By <a href="" class="footer-link">Priyanshu Sharma</a></div>

<style>

body {background: #333;}

#keyboard {

margin: 50px auto;

width: 794px;

height: 315px;

background: #d5d9dc url('') repeat-x;

-moz-border-radius-topleft: 7px 21px;

-moz-border-radius-topright: 7px 21px;

-moz-border-radius-bottomright: 10px;

-moz-border-radius-bottomleft: 10px;

border-top-left-radius: 7px 21px;

border-top-right-radius: 7px 21px;

border-bottom-right-radius: 10px;

border-bottom-left-radius: 10px;

padding: 50px 0 0 10px;

-webkit-box-shadow:

inset 0 0 8px #bbb,

0 1px 0 #aaa,

0 4px 0 #bbb,

0 10px 30px #111;

-moz-box-shadow:

inset 0 0 8px #bbb,

0 1px 0 #aaa,

0 4px 0 #bbb,

0 10px 30px #111;

box-shadow:

inset 0 0 8px #bbb,

0 1px 0 #aaa,

0 4px 0 #bbb,

0 10px 30px #111;}

ul {list-style-type: none; width: 784px; margin: 0 auto;}

li {float: left;}

.key{

display: block;

color: #aaa;

font: bold 9pt arial;

text-decoration: none;

text-align: center;

width: 44px;

height: 41px;

margin: 5px;

background: #222;

-moz-border-radius: 4px;

border-radius: 4px;

border-top: 1px solid #222;

-webkit-box-shadow:

inset 0 0 25px #333,

0 1px 0 #000,

0 2px 0 #222,

0 2px 3px #333;

-moz-box-shadow:

inset 0 0 25px #333,

0 1px 0 #000,

0 2px 0 #222,

0 2px 3px #333;

box-shadow:

inset 0 0 25px #333,

0 1px 0 #000,

0 2px 0 #222,

0 2px 3px #333;

text-shadow: 0px -1px 0px #000;}

.key:active, .keydown {

color: #888;

background: #222;

margin: 7px 5px 3px;

-webkit-box-shadow:

inset 0 0 25px #333,

0 0 3px #333;

-moz-box-shadow:

inset 0 0 25px #333,

0 0 3px #333;

box-shadow:

inset 0 0 25px #333,

0 0 3px #333;

border-top: 1px solid #000;}

.fn span {

display: block;

margin: 14px 5px 0 0;

text-align: right;

font: bold 6pt arial;

text-transform: uppercase;}

#esc {

margin: 6px 15px 0 0;

font-size: 7.5pt;

text-transform: lowercase;}

#numbers li a span {

display: block;}

#numbers li a b {

margin: 3px 0 3px;

display: block;}

#numbers li .alt b {display: block;margin: 0 0 3px;}

#numbers li #delete span {

text-align: right;

margin: 23px 10px 0 0;

font-size: 7.5pt;

text-transform: lowercase;}

#qwerty li a span {

display: block;

margin: 13px 0 0;

text-transform: uppercase;}

#qwerty li #tab span {

text-align: left;

margin: 23px 0 0 10px;

font-size: 7.5pt;

text-transform: lowercase;}

#qwerty li .alt b {display: block; margin: 3px 0 0;}

#qwerty li .alt span {margin: 2px 0 0;}

#asdfg li a span {

display: block;

margin: 13px 0 0;

text-transform: uppercase;}

#asdfg li .alt span {margin: 0; text-transform: lowercase;}

#asdfg li .alt b {display: block; margin: 3px 0 0;}

#asdfg li #caps b {

display: block;

background: #999;

width: 4px;

height: 4px;

border-radius: 10px;

margin: 9px 0 0 10px;

-webkit-box-shadow: inset 0 1px 0 #666;

-moz-box-shadow:inset 0 1px 0 #666;

box-shadow:inset 0 1px 0 #666;}

#asdfg li #caps span {

text-align: left;

margin: 10px 0 0 10px;

font-size: 7.5pt;}

#asdfg li #enter span {

text-align: right;

margin: 23px 10px 0 0;

font-size: 7.5pt;}

#zxcvb li a span {

display: block;

margin: 13px 0 0;

text-transform: uppercase;}

#zxcvb li .shiftleft span {

text-align: left;

margin: 23px 0 0 10px;

font-size: 7.5pt;

text-transform: lowercase;}

#zxcvb li .shiftright span {

text-align: right;

margin: 23px 10px 0 0;

font-size: 7.5pt;

text-transform: lowercase;}

#zxcvb li .alt b {display: block;margin: 4px 0 0;}

#zxcvb li .alt span {margin: 0;}

#bottomrow li #fn span, #bottomrow li #control span, #bottomrow li #optionleft span, #bottomrow li #commandleft span {

display: block;

text-align: left;

margin: 31px 0 0 8px;

font-size: 7.5pt;

text-transform: lowercase;}

#bottomrow li #optionright span, #bottomrow li #commandright span {

display: block;

text-align: right;

margin: 31px 8px 0 0;

font-size: 7.5pt;

text-transform: lowercase;}

#bottomrow ol li #left span, #bottomrow ol li #right span, #bottomrow ol li #up span, #bottomrow ol li #down span {

display: block;

margin: 9px 0 0;}

.fn {height: 26px; width: 46px;}

#delete {width: 72px;}

#tab {width: 72px;}

#caps {width: 85px;}

#enter {width: 85px;}

.shiftleft, .shiftright {width: 112px;}

#fn, #control, .option, .command, #spacebar {height: 49px;}

#control {width: 56px;}

.option {width: 46px;}

.command {width: 67px;}

#spacebar {width: 226px;}

#left img, #up img, #down img, #right img {border: none;}

ul ol {list-style-type: none;}

#down {height: 23px;}

#up, #left, #right {height: 24px;}

#left, #right {margin: 30px 5px 5px;}

#left:active, #right:active {margin: 32px 5px 3px;}

#up {margin: 5px 5px 1px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;}

#up:active {margin: 8px 5px -2px;}

#down {margin: 0 5px 5px; border-top-left-radius: 0px; border-top-right-radius: 0px;}

#down:Active {margin: 3px 5px 4px;}

#main {

width: 700px;

padding: 20px 50px;

margin: 0 auto 50px;

background: #fff;

border-radius: 5px;

-webkit-box-shadow: 0 1px 2px #aaa;}

h1 {

color: #888;

text-align: center;

font: bold 25pt/25pt arial;

margin: 30px 0 60px;}

h2 {

color: #666;

font: 13pt/0pt arial;}

p {

color: #999;

font: 9pt/17pt arial;

margin: 0 0 50px;}

small {

font: italic 8pt/12pt arial;

color: #aaa;

padding: 0 130px 0 0;

display: block;}

cite {

display: block;

padding: 0 0 30px;

margin: 0 auto;

text-align: center;

color: #ccc;

font: italic bold 8pt arial;}

cite a {

color: #e5e5e5;

text-decoration: underline;}

#main a {color: #007fff;}

ul, ol {padding: 0px; margin: 0;}

.cf:before, .cf:after {content:""; display:table;}

.cf:after {clear:both;}

/* For IE 6/7 (trigger hasLayout) */

.cf {zoom:1;}

.footer{

position: fixed;

left: 0;

bottom: 0;

width: 100%;

margin: 10px 0 10px 0;

font-size: 20px;

text-align:center;

color: white;

box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),

-6px -6px 10px -1px rgba(255,255,255,0.7);

border: 1px solid rgba(0,0,0,0);

transition: transform 0.5s;

background: #24cfaa;

border: 1px solid #24cfaa;

}

.footer:hover{

background-color: #fa6060;

}

.footer-text{

margin: 10.1px 0;

font-family: sans-serif;

}

.footer-link{

color: #ffffff;

text-decoration: none;

margin-right:5px;

}

.footer-link:hover{

color:#24cfaa;

}

</style>

</html>

If you want input of any other project, then visit our website and if any project which you think should be in our website, then comment and if you want to share your project with us, then email it to us.

Let us tell you that when you send your project to us, then send a screenshot of the project with it and send a photo and name along with it that you want to show to the public.

Published By:-

Tech Samrat Priyanshu KUmar

WBPS Code

Recent-Post

WBPS Code

Keyboard Html And Css

Post a Comment

1 Comments

Popular Posts

Neumorphism Login Form

Happy Birthday 3d Card

Neumorphism Log In & Registration Form

Login & Signup Form

Random Posts

Neumorphism

Popular Posts

Neumorphism Login Form

Happy Birthday 3d Card

Neumorphism Log In & Registration Form

Recent-Post

Keyboard Html And Css

You may like these posts

Post a Comment

1 Comments

Social Plugin

Popular Posts

Login & Signup Form

Random Posts

Neumorphism

Popular Posts