Keyboard In HTML and CSS
How to Create a Keyboard using HTML and CSS
Source Code :-
HTML :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyboard</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row one">
<button>~</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>0</button>
<button>-</button>
<button>=</button>
<button class="back">Backspace</button>
</div>
<div class="row two">
<button class="tab">Tab</button>
<button>Q</button>
<button>W</button>
<button>E</button>
<button>R</button>
<button>T</button>
<button>Y</button>
<button>U</button>
<button>I</button>
<button>O</button>
<button>P</button>
<button>[</button>
<button>]</button>
<button class='slace'>\</button>
</div>
<div class="row three">
<button class="cap">Caps</button>
<button>A</button>
<button>S</button>
<button>D</button>
<button>F</button>
<button>G</button>
<button>H</button>
<button>J</button>
<button>K</button>
<button>L</button>
<button>;</button>
<button>'</button>
<button class="ent-btn">Enter</button>
</div>
<div class="row four">
<button class="shift">Shift</button>
<button>Z</button>
<button>X</button>
<button>C</button>
<button>V</button>
<button>B</button>
<button>N</button>
<button>M</button>
<button><</button>
<button>></button>
<button>?</button>
<button class="shift">Shift</button>
</div>
<div class="row five">
<button class="other">Ctrl</button>
<button class="other">Win</button>
<button class="other">Alt</button>
<button class="space">Space</button>
<button class="other">Alt</button>
<button class="other">Win</button>
<button class="other">Ctrl</button>
</div>
</div>
</body>
</html>
CSS :-
body{
background-color: rgb(0, 0, 0);
}
.container{
margin: 160px 0 0 200px;
}
.row{
width: 100%;
height: 60px;
}
.one,.two,.three,.four,.five{
margin: 10px 0 0 0;
}
button{
color: rgb(255, 255, 255);
width: 55px;
height: 55px;
border: none;
background: rgb(0, 0, 0);
box-shadow: 5px 5px 10px #0a0a0a, -5px -5px 10px #858383;
font-size: 20px;
margin-left: 5px;
outline: none;
font-family: Arial, Helvetica, sans-serif;
border-radius: 20%;
}
button:active{
box-shadow: 1px 1px 2px #858383, -1px -1px 2px #0a0a0a;
}
.back{
width: 115px;
border-radius: 10px;
}
.tab{
width: 85px;
border-radius: 10px;
}
.slace{
width: 85px;
border-radius: 10px;
}
.cap{
width: 100px;
border-radius: 10px;
}
.ent-btn{
width: 135px;
border-radius: 10px;
}
.shift{
width: 150px;
border-radius: 10px;
}
.other{
width: 82px;
border-radius: 10px;
}
.space{
width: 400px;
border-radius: 10px;
}
Comments
Post a Comment