index.html

   1 <!doctype html>
   2 <html lang="en">
   3
   4         <head>
   5                 <meta charset="utf-8">
   6
   7                 <title>reveal.js</title>
   8
   9                 <meta name="description" content="An easy to use CSS 3D slideshow tool for quickly creating good looking HTML presentations.">
  10                 <meta name="author" content="Hakim El Hattab">
  11
  12                 <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  13
  14                 <link rel="stylesheet" href="css/reset.css">
  15                 <link rel="stylesheet" href="css/main.css">
  16
  17                 <link rel="stylesheet" href="lib/zenburn.css">
  18         </head>
  19
  20         <body>
  21
  22                 <div id="reveal">
  23
  24                         <!-- Any section element inside of this container is displayed as a slide -->
  25                         <div class="slides">
  26                                 <section>
  27                                         <h1>Reveal.js</h1>
  28                                         <h3 class="inverted">A CSS 3D Slideshow</h3>
  29                                         <script>
  30                                                 // Delicously hacky. Look away.
  31                                                 if( navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) )
  32                                                 document.write( '<p style="color: rgba(0,0,0,0.3); text-shadow: none;">('+'Tap to navigate'+')</p>' );
  33                                         </script>
  34                                 </section>
  35
  36                                 <section>
  37                                         <h2>Heads Up</h2>
  38                                         <p>
  39                                                 reveal.js is an easy to use, HTML based, presentation tool. You'll need a modern browser with
  40                                                 support for CSS 3D transforms to see it in its full glory.
  41                                         </p>
  42                                         <p>
  43                                                 <i><small>- <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small></i>
  44                                         </p>
  45                                 </section>
  46
  47                                 <!-- Example of nested vertical slides -->
  48                                 <section>
  49                                         <section>
  50                                                 <h2>Vertical Slides</h2>
  51                                                 <p>
  52                                                         Slides can be nested inside of other slides,<br/>
  53                                                         try pressing <a href="#/2/1">down</a>.
  54                                                 </p>
  55                                                 <a href="#/2/1" class="image">
  56                                                         <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png">
  57                                                 </a>
  58                                         </section>
  59                                         <section>
  60                                                 <h2>Basement Level 1</h2>
  61                                                 <p>Press down or up to navigate.</p>
  62                                         </section>
  63                                         <section>
  64                                                 <h2>Basement Level 2</h2>
  65                                                 <p>Cornify</p>
  66                                                 <a class="test" href="http://cornify.com">
  67                                                         <img width="280" height="326" src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif">
  68                                                 </a>
  69                                         </section>
  70                                         <section>
  71                                                 <h2>Basement Level 3</h2>
  72                                                 <p>That's it, time to go back up.</p>
  73                                                 <a href="#/2" class="image">
  74                                                         <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" style="-webkit-transform: rotate(180deg);">
  75                                                 </a>
  76                                         </section>
  77                                 </section>
  78
  79                                 <section>
  80                                         <h2>Holistic Overview</h2>
  81                                         <p>
  82                                                 Press <strong>SPACE</strong> to enter the slide overview.
  83                                         </p>
  84                                 </section>
  85
  86                                 <section>
  87                                         <h2>Transition Styles</h2>
  88                                         <p>
  89                                                 You can select from different transitions, like:
  90                                         </p>
  91                                         <ul>
  92                                                 <li><a href="http://lab.hakim.se/reveal-js/?transition=cube">Cube</a></li>
  93                                                 <li><a href="http://lab.hakim.se/reveal-js/?transition=page">Page</a></li>
  94                                                 <li><a href="http://lab.hakim.se/reveal-js/?transition=concave">Concave</a></li>
  95                                         </ul>
  96                                 </section>
  97
  98                                 <section>
  99                                         <h2>Marvelous Unordered List</h2>
 100                                         <ul>
 101                                                 <li>No order here</li>
 102                                                 <li>Or here</li>
 103                                                 <li>Or here</li>
 104                                                 <li>Or here</li>
 105                                         </ul>
 106                                 </section>
 107
 108                                 <section>
 109                                         <h2>Fantastic Ordered List</h2>
 110                                         <ol>
 111                                                 <li>One is smaller than...</li>
 112                                                 <li>Two is smaller than...</li>
 113                                                 <li>Three!</li>
 114                                         </ol>
 115                                 </section>
 116
 117                                 <section>
 118                                         <h2>Clever Quotes</h2>
 119                                         <p>
 120                                                 These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
 121                                                 The nice thing about standards is that there are so many to choose from</q> and block:
 122                                         </p>
 123                                         <blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
 124                                                 For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
 125                                                 reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.
 126                                         </blockquote>
 127                                 </section>
 128
 129                                 <section>
 130                                         <h2>Pretty Code</h2>
 131                                         <pre><code contenteditable>
 132         var supports3DTransforms =  document.body.style['webkitPerspective'] !== undefined ||
 133                                         document.body.style['MozPerspective'] !== undefined ||
 134                                         document.body.style['perspective'] !== undefined;
 135
 136         function linkify( selector ) {
 137             if( supports3DTransforms ) {
 138
 139                 var nodes = document.querySelectorAll( selector );
 140
 141                 for( var i = 0, len = nodes.length; i < len; i++ ) {
 142                     var node = nodes[i];
 143
 144                     if( !node.className || !node.className.match( /roll/g ) ) {
 145                         node.className += ' roll';
 146                         node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>';
 147                     }
 148                 };
 149             }
 150         }
 151
 152         linkify( 'a' );
 153                                         </code></pre>
 154                                         <p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
 155                                 </section>
 156
 157                                 <section>
 158                                         <h2>Intergalactic Interconnections</h2>
 159                                         <p>
 160                                                 You can link between slides internally,<br/>
 161                                                 <a href="#/2/3">like this</a>.
 162                                         </p>
 163                                 </section>
 164
 165                                 <section>
 166                                         <h2>Fragmented Views</h2>
 167                                         <p>Hit the next arrow...</p>
 168                                         <p class="fragment">... to step through ...</p>
 169                                         <ol>
 170                                                 <li class="fragment"><code>any type</code></li>
 171                                                 <li class="fragment"><em>of view</em></li>
 172                                                 <li class="fragment"><strong>fragments</strong></li>
 173                                         </ol>
 174                                 </section>
 175
 176                                 <section>
 177                                         <h2>Spectacular image!</h2>
 178                                         <a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
 179                                                 <img width="320" height="412" src="https://s3.amazonaws.com/hakim-static/reveal-js/breakdom.png">
 180                                         </a>
 181                                 </section>
 182
 183                                 <section>
 184                                         <h2>Stellar Links</h2>
 185                                         <ul>
 186                                                 <li><a href="https://github.com/hakimel/reveal.js">Source code on github</a></li>
 187                                                 <li><a href="http://hakim.se/projects/reveal-js">Read more on my site</a></li>
 188                                                 <li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
 189                                         </ul>
 190                                 </section>
 191
 192                                 <section>
 193                                         <h1>THE END</h1>
 194                                         <h3 class="inverted">BY Hakim El Hattab / hakim.se</h3>
 195                                 </section>
 196                         </div>
 197
 198                         <!-- The navigational controls UI -->
 199                         <aside class="controls">
 200                                 <a class="left" href="#">&#x25C4;</a>
 201                                 <a class="right" href="#">&#x25BA;</a>
 202                                 <a class="up" href="#">&#x25B2;</a>
 203                                 <a class="down" href="#">&#x25BC;</a>
 204                         </aside>
 205
 206                         <!-- Displays presentation progress, max value changes via JS to reflect # of slides -->
 207                         <div class="progress"><span></span></div>
 208
 209                 </div>
 210
 211                 <script src="js/reveal.js"></script>
 212                 <script src="lib/highlight.js"></script>
 213                 <script>
 214                         // Parse the query string into a key/value object
 215                         var query = {};
 216                         location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
 217                                 query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
 218                         } );
 219
 220                         Reveal.initialize({
 221                                 // Display controls in the bottom right corner
 222                                 controls: true,
 223
 224                                 // Display a presentation progress bar
 225                                 progress: true,
 226
 227                                 // If true; each slide will be pushed to the browser history
 228                                 history: true,
 229
 230                                 // Flags if mouse wheel navigation should be enabled
 231                                 mouseWheel: true,
 232
 233                                 // Apply a 3D roll to links on hover
 234                                 rollingLinks: true,
 235
 236                                 // UI style
 237                                 theme: query.theme || 'default', // default/neon
 238
 239                                 // Transition style
 240                                 transition: query.transition || 'default' // default/cube/page/concave/linear(2d)
 241                         });
 242
 243                         hljs.initHighlightingOnLoad();
 244                 </script>
 245
 246         </body>
 247 </html>