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