Fire JS Bin - MemoryGame

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

Find

⟲

Replace

<!DOCTYPE html>

<html lang="en">
  <head>
    <title>HTML5 Memory Game</title>
    <meta charset="utf-8">
    <meta name = "viewport" content = "width = device-width">
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
  </head>
  <body>
    <header>
      <h1>Memory Game <em>With a Twist of Html5!</em></h1>
    </header>
    <div id="wrapper">
      <section id="table"></section>
      <section id="display">
        <details><h3> </h3></details>
        <p></p>
        <button onclick="reset()">Give it another try</button>
      </section>
      <footer>
        <p>
          This simple memory game is best enjoyed in an HTML5 browser such as:
          <a href="http://www.mozilla.com/en-US/firefox/firefox.html">Firefox</a>,
          <a href="http://www.apple.com/safari/">Safari</a>, 
          <a href="http://www.google.com/chrome/index.html">Chrome</a>
          or <a href="http://ie.microsoft.com/testdrive/">IE9 Developer Preview</a>.
        </p>
        <p>Designed & developed by <a href="http://www.bananica.com/">Bane</a>.</p>
      </footer>
    </div>
  </body>
</html>

body, td, th, h1, h2, h3, h4, h5, h6, input, textarea, select, button {
  font-size:62.5%;
  font-family: "Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  color: #828988;
}
td, th, h1, h2, h3, h4, h5, h6, input, textarea, select {
  font-size:1em;
}
body,html{
  margin: 0;
  padding: 0;
  background: url(/assets/back.jpg) #dee6e5;
}
p,h3,h1 {
  margin: 0;
  padding: 0;
}
a {
  color: #6d7c7a;
}
a:hover {
  color: #000;
  text-decoration: none;
}
#wrapper {
  width: 42em;
  margin:0 auto;
}
h1 {
  text-shadow: #fff 0 1px 0;
  text-align: center;
  width: 100%;
  padding: 0.4em 0;
  font-size: 2.6em;
  color: #1d2423;
  font-weight: normal;
}
h1 em {
  color: #434d4c;
  font-size: 0.8em;
}
#display {
  width: 100%;
  float: left;
  text-align: center;
}
#table {
  width: 100%;
  float: left;
  padding: 1.4em 0 0.2em;
  margin: 0 0 1.4em;
  -moz-border-radius: 2em;  
     border-radius: 2em;  
    -webkit-border-radius: 2em;
    border: 0.1em solid rgba(0,0,0,0.12);
    box-shadow: 0 0.1em 0  rgba(255,255,255,0.5);
  -moz-box-shadow: 0 0.1em 0  rgba(255,255,255,0.5);
  -webkit-box-shadow: 0 0.1em 0  rgba(255,255,255,0.5);
}
#table div {
  float: left;
  width: 8.8em;
  margin: 0 0 0 1.4em;
  height: 9.8em;
  position: relative;
}
#table figure {
  font-size: 4em;
  width: 2.15em;
  height: 87%;
  text-align: center;
  position: absolute;
  background: url(/assets/card.png) #b5157b;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b5157b', endColorstr='#880e4f');
        background-image:url(/assets/card.png), -webkit-gradient(linear, left top, left bottom, from(#b5157b), to(#880e4f));
  background-image:url(/assets/card.png), -moz-linear-gradient(top,  #b5157b,  #880e4f);
  box-shadow: 0.03em 0.03em 0.1em rgba(0,0,0,0.5);
  -moz-box-shadow: 0.03em 0.03em 0.1em rgba(0,0,0,0.5);
  -webkit-box-shadow: 0.03em 0.03em 0.1em rgba(0,0,0,0.5);
  -moz-border-radius: 0.3em;  
     border-radius: 0.3em;  
    -webkit-border-radius: 0.3em;    
  overflow: hidden;
  white-space: nowrap;
  color: #791f53;
  text-shadow: rgba(255,255,255,0.2) 0 1px 0;
}
figure p {
  margin: 0;
  line-height:1.2em;
  padding: 0.5em 0;
}
#table figure.open,#table figure.done {
  background: #78bddd;
  color: rgba(0,0,0,0.15);
}
#table figure.done {
  background: url(/assets/card.png) #b2b6b6;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b2b6b6', endColorstr='#868d8c');
  background-image:url(/assets/card.png),-webkit-gradient(linear, left top, left bottom, from(#b2b6b6), to(#868d8c));
  background-image:url(/assets/card.png),-moz-linear-gradient(top,  #b2b6b6,  #868d8c);
}
#table figure.open p,#table figure.done p{
  color: #292929;
  text-shadow: rgba(255,255,255,0.8) 0 1px 0;
  padding: 3em 0;
  font: 0.29em Monaco,"Courier New", Courier, mono;
}
#table figure.done p {
  color: #dfe3e2;
  text-shadow: rgba(0,0,0,0.3) 0 -1px 0;
}
#table .header figure.open { background-color:#989ae5; }
#table .section figure.open { background-color:#c198ff; }
#table .footer figure.open { background-color:#e792ff; }
#table .figure figure.open { background-color:#ff97d4; }
#table .canvas figure.open { background-color:#ffa2a2; }
#table .video figure.open { background-color:#ffdd95; }
#table .audio figure.open { background-color:#bbe8a3; }
footer {
  border-top: 0.1em solid rgba(0,0,0,0.1);
  font-size: 1.2em;
  line-height: 1.4em;
  float: left;
  clear: both;
  width: 100%;
  padding: 1.5em 0;
  text-align: center;
  margin: 4em 0;
  text-shadow: #fff 0 1px 0;
}
footer p{
  margin: 0 0 0.8em;
}
#display p {
  width: 60%;
  float: right;
  background: rgba(54,255,0,0.1);
  color: #566754;
  margin: -1em 0 0 0;
  border-color: #fffeff;
}
#display p em {
  color: #000;
}
details p{
  margin: 0;
}
details {
  width: 80%;
  background: rgba(0,148,255,0.15);
  display: block;
  font-style: italic;
}
details, #display p, button {
  padding: 1.4em 0.5em;
  font-size: 1.4em;
  -moz-border-radius: 0.5em;  
     border-radius: 0.5em;  
    -webkit-border-radius: 0.5em;
  box-shadow:inset 0 0 2em rgba(0,0,0,0.1);
  -moz-box-shadow:inset 0 0 2em rgba(0,0,0,0.1);
  -webkit-box-shadow:inset 0 0 2em rgba(0,0,0,0.1);
  text-shadow: #fff 0 1px 0;
}
details h3 strong {
  color: #2c312c;
  font: 0.8em Monaco,"Courier New", Courier, mono;
}
details h3 {
  color: #4f6069;
}
button:active {
  color: #fff;
  text-shadow: #000 0 -1px 0;
  background: #696969;
  box-shadow:inset 0.1em 0.1em 0.3em rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0.1em 0.1em 0.3em rgba(0,0,0,0.4);
  -webkit-box-shadow:inset 0.1em 0.1em 0.3em rgba(0,0,0,0.4);
}
button {
  color: #282828;
  width: 40%;
  float: left;
  clear: both;
  font-size: 1.3em;
  padding: 0.8em 0;
  margin: -0.8em 0 0 20%;
  background-color: rgba(249,186,27,0.15);
  border: none;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#ccc));
  background: -moz-linear-gradient(top, #eee, #ccc);  
    box-shadow: 0.1em 0.1em 0.3em rgba(0,0,0,0.4);
  -moz-box-shadow: 0.1em 0.1em 0.3em rgba(0,0,0,0.4);
  -webkit-box-shadow: 0.1em 0.1em 0.3em rgba(0,0,0,0.4);
}

Pop out