index.html

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Flash Cards</title>
  <meta name="description" content="Simple, animated, and imageless flash cards using HTML/CSS/jQuery.">
  <meta name="author" content="Curtis Blackwell&hellip; sorta.">

  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/style.css">
  <link href="http://fonts.googleapis.com/css?family=Schoolbell" rel="stylesheet" type="text/css">
  <script src="js/vendor/modernizr-2.5.3.min.js"></script>
</head>
<body>
  <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

  <h1><a href="https://github.com/curtisblackwell/flash_cards">Flash Cards</a> <small>by <a href="https://github.com/curtisblackwell">curtisblackwell</a></small></h1>

  <ul id="deck">
    <li class="card">
      <div class="side_one">
        <p>Hello</p>
      </div>
      <div class="side_two">
        <p>안녕하세요</p>
      </div>
    </li>

    <li class="card">
      <div class="side_one">
        <p>How many licks does it take to get to the center of a Tootsie Pop?</p>
      </div>
      <div class="side_two">
        <p>The world may never know.</p>
      </div>
    </li>

    <li class="card">
      <div class="side_one">
        <p>Have you been an un-American?</p>
      </div>
      <div class="side_two">
        <p>Ooh-ooh-hoo-ooh!</p>
      </div>
    </li>
  </ul>

  <div id="nav_deck">
    <span class="icon" id="prev" data-icon="<"><span class="visuallyhidden">Previous</span></span>
    <span class="icon" id="flipper" data-icon="/"><span class="visuallyhidden">Flip</span></span>
    <span class="icon" id="next" data-icon=">"><span class="visuallyhidden">Next</span></span>
  </div>

  <div id="keyboard_shortcuts">
    <h1>Keyboard Shortcuts</h1>
    <table>
      <tbody>
        <tr>
          <td>Previous Card</td>
          <td>&larr;</td>
        </tr>
        <tr>
          <td>Next Card</td>
          <td>&rarr;</td>
        </tr>
        <tr>
          <td>Flip Card</td>
          <td>&uarr; <span class="or">/</span> &darr; <span class="or">/</span> Return <span class="or">/</span> Space</td>
        </tr>
        <tr>
          <td>Show/Hide Keyboard Shortcuts</td>
          <td>?</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="icon" id="keyboard_shortcuts_toggle" data-icon="k"><span class="visuallyhidden">Keyboard Shortcuts</span></div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script>

  <script src="js/flash_cards.min.js"></script>
</body>
</html>