HTML
  <div id="keyboard" >
    <ul class="cf" >
      <li><a href="#" class="key esc"><span>esc</span></a></li>
      <li><a href="#" class="key fn"><span>F1</span></a></li>
      <li><a href="#" class="key fn"><span>F2</span></a></li>
      <li><a href="#" class="key fn"><span>F3</span></a></li>
      <li><a href="#" class="key fn"><span>F4</span></a></li>
      <li><a href="#" class="key fn"><span>F5</span></a></li>
      <li><a href="#" class="key fn"><span>F6</span></a></li>
      <li><a href="#" class="key fn"><span>F7</span></a></li>
      <li><a href="#" class="key fn"><span>F8</span></a></li>
      <li><a href="#" class="key fn"><span>F9</span></a></li>
      <li><a href="#" class="key fn"><span>F10</span></a></li>
      <li><a href="#" class="key fn"><span>F11</span></a></li>
      <li><a href="#" class="key fn"><span>F12</span></a></li>
      <li><a href="#" class="key fn"><span>Eject</span></a></li>
    </ul>
    <ul class="cf" >
      <li><a href="#" class="key number"><b>~</b><span>`</span></a></li>
      <li><a href="#" class="key number"><b>!</b><span>1</span></a></li>
      <li><a href="#" class="key number"><b>@</b><span>2</span></a></li>
      <li><a href="#" class="key number"><b>#</b><span>3</span></a></li>
      <li><a href="#" class="key number"><b>$</b><span>4</span></a></li>
      <li><a href="#" class="key number"><b>%</b><span>5</span></a></li>
      <li><a href="#" class="key number"><b>^</b><span>6</span></a></li>
      <li><a href="#" class="key number"><b>&</b><span>7</span></a></li>
      <li><a href="#" class="key number"><b>*</b><span>8</span></a></li>
      <li><a href="#" class="key number"><b>(</b><span>9</span></a></li>
      <li><a href="#" class="key number"><b>)</b><span>0</span></a></li>
      <li><a href="#" class="key number alt"><b>_</b><span>-</span></a></li>
      <li><a href="#" class="key number"><b>+</b><span>=</span></a></li>
      <li><a href="#" class="key delete"><span>Delete</span></a></li>
    </ul>
    <ul class="cf" >
      <li><a href="#" class="key tab"><span>tab</span></a></li>
      <li><a href="#" class="key qwerty"><span>q</span></a></li>
      <li><a href="#" class="key qwerty"><span>w</span></a></li>
      <li><a href="#" class="key qwerty"><span>e</span></a></li>
      <li><a href="#" class="key qwerty"><span>r</span></a></li>
      <li><a href="#" class="key qwerty"><span>t</span></a></li>
      <li><a href="#" class="key qwerty"><span>y</span></a></li>
      <li><a href="#" class="key qwerty"><span>u</span></a></li>
      <li><a href="#" class="key qwerty"><span>i</span></a></li>
      <li><a href="#" class="key qwerty"><span>o</span></a></li>
      <li><a href="#" class="key qwerty"><span>p</span></a></li>
      <li><a href="#" class="key qwerty alt"><b>{</b><span>[</span></a></li>
      <li><a href="#" class="key qwerty alt"><b>}</b><span>]</span></a></li>
      <li><a href="#" class="key qwerty alt"><b>|</b><span>\</span></a></li>
    </ul>
    <ul class="cf" >
      <li><a href="#" class="key caps" ><b></b><span>caps lock</span></a></li>
      <li><a href="#" class="key asdfg"><span>a</span></a></li>
      <li><a href="#" class="key asdfg"><span>s</span></a></li>
      <li><a href="#" class="key asdfg"><span>d</span></a></li>
      <li><a href="#" class="key asdfg"><span>f</span></a></li>
      <li><a href="#" class="key asdfg"><span>g</span></a></li>
      <li><a href="#" class="key asdfg"><span>h</span></a></li>
      <li><a href="#" class="key asdfg"><span>j</span></a></li>
      <li><a href="#" class="key asdfg"><span>k</span></a></li>
      <li><a href="#" class="key asdfg"><span>l</span></a></li>
      <li><a href="#" class="key asdfg alt"><b>:</b><span>;</span></a></li>
      <li><a href="#" class="key asdfg alt"><b>"</b><span>'</span></a></li>
      <li><a href="#" class="key enter" ><span>return</span></a></li>
    </ul>
    <ul class="cf" >
      <li><a href="#" class="key shiftleft"><span>Shift</span></a></li>
      <li><a href="#" class="key zxcvb"><span>z</span></a></li>
      <li><a href="#" class="key zxcvb"><span>x</span></a></li>
      <li><a href="#" class="key zxcvb"><span>c</span></a></li>
      <li><a href="#" class="key zxcvb"><span>v</span></a></li>
      <li><a href="#" class="key zxcvb"><span>b</span></a></li>
      <li><a href="#" class="key zxcvb"><span>n</span></a></li>
      <li><a href="#" class="key zxcvb"><span>m</span></a></li>
      <li><a href="#" class="key zxcvb alt"><b><</b><span>,</span></a></li>
      <li><a href="#" class="key zxcvb alt"><b>></b><span>.</span></a></li>
      <li><a href="#" class="key zxcvb alt"><b>?</b><span>/</span></a></li>
      <li><a href="#" class="key shiftright"><span>Shift</span></a></li>
    </ul>
    <ul class="cf" >
      <li><a href="#" class="key bottomrow fn" ><span>fn</span></a></li>
      <li><a href="#" class="key bottomrow control"><span>control</span></a></li>
      <li><a href="#" class="key bottomrow optionleft"><span>option</span></a></li>
      <li><a href="#" class="key bottomrow commandleft"><span>command</span></a></li>
      <li><a href="#" class="key bottomrow spacebar"></a></li>
      <li><a href="#" class="key bottomrow commandright"><span>command</span></a></li>
      <li><a href="#" class="key bottomrow optionright"><span>option</span></a></li>
      <ol class="cf">
        <li><a href="#" class="key left" ><span></span></a></li>
        <li>
          <a href="#" class="key up" ><span></span></a>
          <a href="#" class="key down" ><span></span></a>
        </li>
        <li><a href="#" class="key right" ><span></span></a></li>
      </ol>
    </ul>
  </div>
* {
  margin: 0;
  padding: 0;
}

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

#display {
    margin: 30px auto 0;
    width: 70px;
    height: 50;
    background: none repeat-x scroll 0 0 #d0d0d0;
}
#keyboard {
  margin: 15px auto 0;
  width: 794px;
  height: 315px;
  background:	none repeat-x scroll 0 0 #d5d9dc;
  -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 #ddd;
  -moz-box-shadow: inset 0 0 8px #bbb, 0 1px 0 #aaa, 0 4px 0 #bbb, 0 10px 30px #ddd;
  box-shadow: inset 0 0 8px #bbb, 0 1px 0 #aaa, 0 4px 0 #bbb, 0 10px 30px #ddd;
}

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

#keyboard li {
  float: left;
}

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

/*!
 * less-keyboard v1.0.0 (http://emalherbi.github.io/less-keyboard/)
 * Copyright 2015-2015 emalherbi
 * Licensed under MIT (http://en.wikipedia.org/wiki/MIT_License)
 */

/* key */
.key {
  display: block;
  color: #aaaaaa;
  font: bold 9pt arial;
  text-decoration: none;
  text-align: center;
  width: 44px;
  height: 41px;
  margin: 5px;
  background: #eff0f2;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border-top: 1px solid #f5f5f5;
  -webkit-box-shadow: inset 0 0 25px #e8e8e8,
    0 1px 0 #c3c3c3,
    0 2px 0 #c9c9c9,
    0 2px 3px #333;
  -moz-box-shadow: inset 0 0 25px #e8e8e8,
    0 1px 0 #c3c3c3,
    0 2px 0 #c9c9c9,
    0 2px 3px #333;
  box-shadow: inset 0 0 25px #e8e8e8,
    0 1px 0 #c3c3c3,
    0 2px 0 #c9c9c9,
    0 2px 3px #333;
  text-shadow: 0px 1px 0px #f5f5f5;
}
.key:active {
  color: #888;
  background: #ebeced;
  margin: 7px 5px 3px;
  -webkit-box-shadow: inset 0 0 25px #ddd,
      0 0 3px #333;
  -moz-box-shadow: inset 0 0 25px #ddd,
      0 0 3px #333;
  box-shadow: inset 0 0 25px #ddd,
      0 0 3px #333;
  border-top: 1px solid #eee;
}
.key > span,
.key > b {
  background: inherit;
}
/* fn */
.fn {
  height: 26px;
  width: 46px;
}
.fn > span {
  display: block;
  text-align: right;
  margin: 14px 5px 0 0;
  font: bold 6pt arial;
  text-transform: uppercase;
}
/* esc */
.esc {
  height: 26px;
  width: 46px;
}
.esc > span {
  display: block;
  text-align: right;
  margin: 6px 15px 0 0;
  font-size: 7.5pt;
  text-transform: lowercase;
}
/* numbers */
.number > span {
  display: block;
}
.number > b {
  margin: 3px 0 3px;
  display: block;
}
.number.alt > b {
  display: block;
  margin: 0 0 3px;
}
/* delete */
.delete {
  width: 72px;
}
.delete > span {
  display: block;
  text-align: right;
  margin: 23px 10px 0 0;
  font-size: 7.5pt;
  text-transform: lowercase;
}
/* qwerty, asdfg, zxcvb */
.qwerty > span,
.asdfg > span,
.zxcvb > span {
  display: block;
  margin: 13px 0 0;
  text-transform: uppercase;
}
.qwerty > b,
.asdfg > b,
.zxcvb > b {
  display: block;
  margin: 3px 0 0;
}
.qwerty.alt > span,
.asdfg.alt > span,
.zxcvb.alt > span {
  text-transform: lowercase;
}
.asdfg.alt > span,
.zxcvb.alt > span {
  margin: 0;
}
.qwerty.alt > span {
  margin: 2px 0 0;
}
.zxcvb.alt > b {
  margin: 4px 0 0;
}
/* tab */
.tab {
  width: 72px;
}
.tab > span {
  display: block;
  text-align: left;
  margin: 23px 0 0 10px;
  font-size: 7.5pt;
  text-transform: uppercase;
}
/* caps */
.caps {
  width: 85px;
}
.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;
}
.caps > span {
  display: block;
  text-align: left;
  margin: 10px 0 0 10px;
  font-size: 7.5pt;
  text-transform: lowercase;
}
/* enter */
.enter {
  width: 85px;
}
.enter > span {
  display: block;
  text-align: right;
  margin: 23px 10px 0 0;
  font-size: 7.5pt;
}
/* shift */
.shiftleft,
.shiftright {
  width: 112px;
}
.shiftleft > span,
.shiftright > span {
  display: block;
  font-size: 7.5pt;
  text-transform: lowercase;
}
.shiftleft > span {
  text-align: left;
  margin: 23px 0 0 10px;
}
.shiftright > span {
  text-align: right;
  margin: 23px 10px 0 0;
}
/* bottomrow */
.bottomrow {
  height: 49px;
}
.bottomrow.fn {
  height: 49px;
}
.bottomrow.fn > span {
  display: block;
  font-size: 7.5pt;
  margin: 31px 0 0 5px;
  text-transform: lowercase;
  text-align: left;
}
.bottomrow.optionleft,
.bottomrow.optionright {
  width: 46px;
}
.bottomrow.optionleft > span,
.bottomrow.optionright > span {
  display: block;
  font-size: 7.5pt;
  text-transform: lowercase;
}
.bottomrow.commandleft,
.bottomrow.commandright {
  width: 67px;
}
.bottomrow.commandleft > span,
.bottomrow.commandright > span {
  display: block;
  font-size: 7.5pt;
  text-transform: lowercase;
}
.bottomrow.optionleft > span,
.bottomrow.commandleft > span {
  margin: 31px 0 0 5px;
  text-align: left;
}
.bottomrow.optionright > span,
.bottomrow.commandright > span {
  margin: 31px 5px 0 0;
  text-align: right;
}
.bottomrow.spacebar {
  width: 226px;
}
.bottomrow.control {
  width: 54px;
}
.bottomrow.control > span {
  display: block;
  font-size: 7.5pt;
  margin: 31px 0 0 5px;
  text-transform: lowercase;
  text-align: left;
}
/* up, down, left, right */
.down {
  height: 23px;
  margin: 0 5px 5px;
}
.down:active {
  margin: 3px 5px 4px;
}
.up {
  height: 24px;
  margin: 5px 5px 1px;
}
.up:active {
  margin: 8px 5px -2px;
}
.down,
.up {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
.left,
.right {
  height: 24px;
  margin: 30px 5px 5px;
}
.left:active,
.right:active {
  margin: 32px 5px 3px;
}
.cf {
  zoom: 1;
}
.cf:before,
.cf:after {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}

JavaScript

				

Recently Added

Box animation

Hover over the div element above, to see the transition effect.

WeB Page

Basics of an html weboage

keyboard should have sone JavaScript --> start of change

keyboard should have sone JavaScript --> but now without -- start of change

keyboard should have sone JavaScript --> start of change

keyboard should have sone JavaScript --> but now without -- start of change

keyboard should have sone JavaScript --> but now without

keyboard should have sone JavaScript --> but now without

dev

vvvvt6t6t6t6 kjiojio jui

Table

Example explained: Tables are defined with the <table> tag. Tables are divided into table rows with the <tr> tag. Table rows are divided into table data with the <td> tag. A table row can also be divided into table headings with the <th> tag.

CSS Only Responsive Pinterest Style Grid

Working on CSS Only Responsive Pinterest Style Grid for the conferences page

Horizontal Timeline

Horizontal timeline used for displaying the conferences on the homepage

Randomize Div Elements

Randomize div elements using jQuery