Fire JS Bin - HTMLPresentations

$(function () {
  $(".slide").s({});
});

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Slippy 10K Demo</title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
  </head>
  <body>
    <div class="slide big">
      <h1>This is <em>Slippy</em></h1>
      <h2>It's an <em>HTML Presentations</em> app</h2>
      <h3>Hit <em class="key">➔</em> to advance</h3>
    </div>
    <div class="slide">
      <h1><em>Neat</em> hu?</h1>
      <p>Keep going...</p>
    </div>
    <div class="slide big">
      <h1>I hope you <em>forgot</em> about <em>PowerPoint</em> by now</h1>
    </div>
    <div class="slide big">
      <h1>Hit <em class="key">esc</em> if you're <em>lost</em></h1>
      <p>..and click a slide</p>
    </div>
    <div class="slide">
      <h1>
        My <em>10K</em> are over, but check out
        <a href="http://seld.be/notes/introducing-slippy-html-presentations">Slippy</a> for
        <em>more</em>!
      </h1>
    </div>
    <div class="layout" name="default">
      <div class="vcenter">
        <content></content>
      </div>
    </div>
    <div class="footer">
      <span class="left">Jordi Boggiano</span>
      <span class="right">Slippy on <a href="http://github.com/Seldaek/slippy/">github</a></span>
      <span class="left">Blog <a href="http://seld.be/">seld.be</a></span>
      <span class="right">Twitter <a href="http://twitter.com/seldaek">@seldaek</a></span>
      <hr class="defloat" />
    </div>
  </body>
</html>

li, ul, ol, sub, strong, img, a, pre, blockquote, p, h6, h5, h4, h3, h2, h1, iframe, object, applet, span, div, body, html, body, html, .defloat { margin:0; padding:0 }
li, ul, ol, sub, strong, img, a, pre, blockquote, p, h6, h5, h4, h3, h2, h1, iframe, object, applet, span, div, body, html { border:0; font-size:100%; vertical-align:baseline; background:transparent }
li, ul, ol, sub, strong, img, a, pre, blockquote, p, h6, h5, h4, h3, h2, h1, iframe, object, applet, span, div, body, html, :focus { outline:0 }
body { line-height:1; vertical-align:middle; background:inherit }
ul, ol { list-style:none }
q, blockquote { quotes:none }
q:after, q:before, blockquote:after, blockquote:before { content:''; content:none }
ins, a:visited, a:active, a:link, a { text-decoration:none }
del { text-decoration:line-through }
table { border-collapse:collapse; border-spacing:0 }
body, html { background:#eee; font-family:Tahoma, Verdana, sans-serif }
body, html, body { overflow:hidden; height:100% }
body, html, body, .footer, .vcenter { width:100% }
body.overview { overflow:auto }
a:visited, a:active, a:link, a { cursor:pointer; color:#844 }
.slide { width:620px; height:476px; margin-left:-310px; margin-top:-238px; left:-100%; text-shadow:#888 0 0 0.3em }
.slide, .footer, .vcenter, .slideDisplay { position:absolute }
.slide, .vcenter { top:50% }
.layout, .overview .slideDisplay { display:none }
.overview .slide, .overviewWrapper, .left { float:left }
.overview .slide, .overviewWrapper, .slideContent, .overviewWrapper:hover { position:relative }
.overview .slide { top:auto !important; left:auto !important; margin:2% !important; opacity:0.1; background:#fff; border-left:0.2em solid #ccc }
.overviewWrapper { margin:2% }
.footer { bottom:0 }
.footer, .vcenter { left:0 }
.left { clear:left }
.right { float:right; clear:right }
.defloat { clear:both; visibility:hidden; height:0 }
.slideDisplay { right:0; top:0; color:#aaa; padding:1em }
.slideContent { padding:0 5% }
.overview .slide.active { border-left:0.5em solid #999 }
.overviewWrapper:hover { top:-.1em; left:-.1em }
.overview .slide:hover { opacity:1 }
.footer, p, h3, h2, h1 { text-align:center }
.footerContent { font-size:.85em; padding:.5em 1em }
.footer span, p { margin:.25em 0 }
.slide.big .slideContent>*:not(.footer) { font-size:1.7em }
p, h3, h2, h1 { margin:.5em 0 .5em; font-weight:bold }
h1 { font-size:1.5em }
h2, h3 { margin-bottom:.25em }
h2 { font-size:1.4em }
h3 { font-size:1.2em }
em { font-style:normal; color:#ca0207 }
em.key { padding:.1em .2em; -webkit-border-radius:.2em; -moz-border-radius:.2em; border-radius:.2em; border: .1em solid #ca0207 }