Fire JS Bin - HowFastYourTyping

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
  
  <head>
    <meta charset="utf-8" />
    <title>How fast your typing - by Didats Triadi</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  </head>
  
  <body>
    <header>
      <h1><a href="">How<span>Fast</span>Your<span>Typing</span></a></h1>
      <p>By: <a href="http://didats.net">Didats Triadi</a></p>
      <div id="score">
        <div id="level">LEVEL 1</div> <small>Your score:</small> <big>0</big>
      </div>
    </header>
    <div id="circle"></div>
    <div id="gamearea">
      <div id="stats" style="display:none"><h2>Game over!</h2></div>
    </div>
    <div id="status">Type 'start' and press Enter to begin playing.</div>
    <div id="typing">
      <div id="live">
        <span class="live"></span>
        <span class="live"></span>
        <span class="live"></span>
      </div>
      <form id="form-typing" method="post" action="">
        <input type="text" class="typing" value="" />
      </form>
    </div>
  </body>

</html>

/* Designed and Developed by Didats Triadi (http://didats.net) */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin:0; padding:0; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal; }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; }
q:before, q:after { content:''; }
abbr, acronym { border:0; }
br.clear { clear:both; }
strong { font-weight:bold; }
em { font-style:italic; }
header, article, section footer { display:block; }
input[type="text"]:focus { outline:0 none; }
body { background:#4974BC; font:0.9em Helvetica, Arial, Sans-serif; }
header { position:fixed; top:5%; left:3%; z-index:1; }
header h1 { font:4.8em Helvetica, Arial, Sans-serif; color:#FFF; text-transform:uppercase; letter-spacing:-0.01em; line-height:0.8em; color:#8EAAD9; z-index:1; position:relative; }
header h1 a { color:#8EAAD9; text-decoration:none; }
header h1 span { display:block; font-weight:bold; color:#FFF; }
header p { color:#FFF; line-height:1.5em; clear:both; padding:0.5em 0; font-size:1.3em; }
header p a { color:#FFF; }
#score { margin-top:3em; text-transform:uppercase; padding:1em 1em 1em 0; color:#B5C2D7; position:fixed; bottom:0; }
#score small { font-size:1.7em; letter-spacing:-0.07em; }
#score big { font-size:6em; display:block; font-weight:bold; color:#FFF; letter-spacing:-0.1em; }
#level { font-size:1.2em; color:#FFF; margin-bottom:0.2em; }
#circle { position:fixed; width:70%; height:110%; right:0; top:0; border-radius:0 0 0 170em; -moz-border-radius:0 0 0 170em; -webkit-border-radius:0 0 0 170em; background:#A2BAE2; background:-webkit-gradient(linear, left top, left bottom, from(#C9D9F3), to(#4974BC)); background:-moz-linear-gradient(top, #C9D9F3, #4974BC); filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#C9D9F3', EndColorStr='#4974BC'); border-width:0 0 2em 2em; border-color:#FFF; border-style:solid; text-align:center; color:#333; box-shadow:0 0 2em #324F7E; -moz-box-shadow:0 0 2em #324F7E; -webkit-box-shadow:0 0 2em #324F7E; overflow:hidden; }
#gamearea { position:absolute; width:70%; height:100%; right:0; top:0; border-radius:0 0 0 170em; -moz-border-radius:0 0 0 170em; -webkit-border-radius:0 0 0 170em; }
#status { width:33%; bottom:20%; right:5%; position:fixed; color:#FFF; font-size:1.1em; }
#typing { width:30%; background:#FFF; background:-webkit-gradient(linear, left top, left bottom, from(#FFF), to(#8C8C8C)); background:-moz-linear-gradient(top, #FFF, #8C8C8C); filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#FFF', EndColorStr='#8C8C8C'); border-radius:0.5em; -moz-border-radius:0.5em; -webkit-border-radius:0.5em; padding:0.9em 1.3em; position:fixed; right:5%; bottom:10%; box-shadow:0.3em 0.3em 1.2em #2B446E; -moz-box-shadow:0.3em 0.3em 1.2em #2B446E; -webkit-box-shadow:0.3em 0.3em 1.2em #2B446E; z-index:5; }
#typing input { font-size:1.2em; background:none; border:0px; text-transform:uppercase; }
#live { position:absolute; right:0.5em; top:0.9em; width:6em; height:2em; }
.live { float:left; width:1.5em; height:1.5em; border-radius:2em; -moz-border-radius:2em; -webkit-border-radius:2em; background:#990000; margin-right:0.4em; background:-webkit-gradient(linear, left top, left bottom, from(#CC0000), to(#990000)); background:-moz-linear-gradient(top, #CC0000, #990000); filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#CC0000', EndColorStr='#990000'); box-shadow:inset 0 0 0.3em #333; -moz-box-shadow:inset 0.15em 0.15em 0.3em #333; -webkit-box-shadow:inset 0 0 2em #333; }
.words { text-transform:uppercase; padding:0.6em; background:#EFEFEF; background:-webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC)); background:-moz-linear-gradient(top, #FFF, #CCC); filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#FFFFFF', EndColorStr='#CCCCCC'); color:#333; box-shadow:0.3em 0.3em 1.2em #2B446E; -moz-box-shadow:0.3em 0.3em 1.2em #2B446E; -webkit-box-shadow:0.3em 0.3em 1.2em #2B446E; float:left; border-radius:0.7em; -moz-border-radius:0.7em; -webkit-border-radius:0.7em; top:-15%; position:absolute; border:0.2em solid #FFF; font-size:1.1em; z-index:6; }
.bonus { border:0.2em solid #CC0000; }
.words span { position:absolute; -moz-border-radius:20px; -webkit-border-radius:20px; width:1.5em; height:1.5em; background:#CC0000; color:#FFF; line-height:1.5em; text-align:center; left:-1em; top:-1em; z-index:1000; display:block; }
#stats { position:relative; left:13%; top:23%; width:80%; font-size:1.8em; color:#497ECE; text-transform:uppercase; }
#stats h2 { font-size:3.2em; font-weight:bold; letter-spacing:-0.1em; color:#4974BC; float:left; }
#stats h2 a { color:#4974BC; }
#stats p { margin-bottom:1em; float:left; margin-left:1em; margin-top:0.4em; }
#stats p a { color:#FFF; text-decoration:none; float:left; background:#6D8EC4; padding:0.3em; border-radius:0.2em; -moz-border-radius:0.2em; -webkit-border-radius:0.2em; }
#stats p a:hover { color:#6D8EC4; background:#FFF; }
#stats h3 { clear:both; }
#stats span { display:block; font-weight:bold; font-size:3em; letter-spacing: -0.1em; }

Pop out