<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/forcodepen1.css">
    <title>keyboard</title>
</head>

<body>
    <div class="container">

        <div class="row zero">
            <button>Esc</button>
            <button>F1</button>
            <button>F2</button>
            <button>F3</button>
            <button>F4</button>
            <button>F5</button>
            <button>F6</button>
            <button>F7</button>
            <button>F8</button>
            <button>F9</button>
            <button>F10</button>
            <button>F11</button>
            <button>F12</button>
            <button>Insect</button>
            <button class="print">printScr</button>
            <button>Delete</button>
        </div>


        <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>10</button>
            <button>-</button>
            <button>=</button>
            <button class="back">Backspace</button>
            <button>Home</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>
            <button>Pg Up</button>
        </div>


        <div class="row three">
            <button class="cap">Caps Lock</button>
            <button>A</button>
            <button>S</button>
            <button>D</button>
            <button>F</button>
            <button>G</button>
            <button>H</button>
            <button>I</button>
            <button>J</button>
            <button>K</button>
            <button>L</button>
            <button>;</button>
            <button>"</button>
            <button class="enter-btn">Enter</button>
            <button>Pg Dn</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>
            <button>↑</button>
            <button>End</button>
        </div>

        <div class="row five">
            <button class="last">Ctrl</button>
            <button class="last">Fn</button>
            <button class="last">Win</button>
            <button class="last">Alt</button>
            <button class="space">space</button>
            <button class="last">Alt</button>
            <button class="last">Fn</button>
            <button class="last">Ctrl</button>
            <button class="last">←</button>
            <button class="last">↓</button>
            <button class="last">→</button>
       </div>
    </div>
</body>
</html>
body {
  background: #c33764;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #1d2671, #c33764);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #1d2671, #c33764);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.container {
  margin: 100px 0 0 200px;
}

.row {
  width: 100%;
  height: 60px;
}

.one,
.two,
.three,
.four,
.five {
  margin: 10px 0 0 0;
}

button {
  color: black;
  font-weight: 500;
  width: 55px;
  height: 55px;
  border: none;
  background: rgb(214, 214, 214);
  box-shadow: 0 0 10px #9521f3, 0 0 40px #c600ee, 0 0 80px #f704f7;

  font-size: 15px;
  margin-left: 5px;
  outline: none;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 20%;
}
button:active {
  box-shadow: 1px 1px 2px #fd0c99, 1px 1px 2px #ff00dd;
}

.print {
  width: 85px;
  border-radius: 10px;
}

.back {
  width: 148px;
  border-radius: 10px;
}

.tab {
  width: 115px;
  border-radius: 10px;
}

.slace {
  width: 90px;
  border: 10px;
}

.cap {
  width: 96px;
  border-radius: 10px;
}

.enter-btn {
  width: 109px;
  border-radius: 10px;
}

.shift {
  width: 135px;
  border-radius: 10px;
 
}

.last {
  width: 56px;
  border-radius: 10px;
}

.space {
  width: 398px;
  border-radius: 10px;

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.