index.html

   1 <!doctype html>
   2 <html lang="en">
   3
   4         <head>
   5                 <meta charset="utf-8">
   6
   7                 <title>reveal.js - The HTML Presentation Framework</title>
   8
   9                 <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
  10                 <meta name="author" content="Hakim El Hattab">
  11
  12                 <meta name="apple-mobile-web-app-capable" content="yes" />
  13                 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  14
  15                 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  16
  17                 <link rel="stylesheet" href="css/reveal.min.css">
  18                 <link rel="stylesheet" href="css/theme/default.css" id="theme">
  19
  20                 <!-- For syntax highlighting -->
  21                 <link rel="stylesheet" href="lib/css/zenburn.css">
  22
  23                 <!-- If the query includes 'print-pdf', use the PDF print sheet -->
  24                 <script>
  25                         document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
  26                 </script>
  27
  28                 <!--[if lt IE 9]>
  29                 <script src="lib/js/html5shiv.js"></script>
  30                 <![endif]-->
  31         </head>
  32
  33         <body>
  34
  35                 <div class="reveal">
  36
  37                         <!-- Any section element inside of this container is displayed as a slide -->
  38                         <div class="slides">
  39
  40                                 <section>
  41                                         <h1>Reveal.js</h1>
  42                                         <h3>HTML Presentations Made Easy</h3>
  43                                         <p>
  44                                                 <small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
  45                                         </p>
  46                                 </section>
  47
  48                                 <section>
  49                                         <h2>Heads Up</h2>
  50                                         <p>
  51                                                 reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with
  52                                                 support for CSS 3D transforms to see it in its full glory.
  53                                         </p>
  54
  55                                         <aside class="notes">
  56                                                 Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
  57                                         </aside>
  58                                 </section>
  59
  60                                 <!-- Example of nested vertical slides -->
  61                                 <section>
  62                                         <section>
  63                                                 <h2>Vertical Slides</h2>
  64                                                 <p>
  65                                                         Slides can be nested inside of other slides,
  66                                                         try pressing <a href="#" class="navigate-down">down</a>.
  67                                                 </p>
  68                                                 <a href="#" class="image navigate-down">
  69                                                         <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
  70                                                 </a>
  71                                         </section>
  72                                         <section>
  73                                                 <h2>Basement Level 1</h2>
  74                                                 <p>Press down or up to navigate.</p>
  75                                         </section>
  76                                         <section>
  77                                                 <h2>Basement Level 2</h2>
  78                                                 <p>Cornify</p>
  79                                                 <a class="test" href="http://cornify.com">
  80                                                         <img width="280" height="326" src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt="Unicorn">
  81                                                 </a>
  82                                         </section>
  83                                         <section>
  84                                                 <h2>Basement Level 3</h2>
  85                                                 <p>That's it, time to go back up.</p>
  86                                                 <a href="#/2" class="image">
  87                                                         <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);">
  88                                                 </a>
  89                                         </section>
  90                                 </section>
  91
  92                                 <section>
  93                                         <h2>Point of View</h2>
  94                                         <p>
  95                                                 Press <strong>ESC</strong> to enter the slide overview. Hold down alt and click on any element to zoom in on it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Alt + click anywhere to zoom back out.
  96                                         </p>
  97                                 </section>
  98
  99                                 <section>
 100                                         <h2>rvl.io</h2>
 101                                         <p>
 102                                                 If you don't like writing slides in HTML you can use the online editor <a href="http://www.rvl.io" target="_blank">rvl.io</a>.
 103                                         </p>
 104                                 </section>
 105
 106                                 <section>
 107                                         <h2>Works in Mobile Safari</h2>
 108                                         <p>
 109                                                 Try it out! You can swipe through the slides and pinch your way to the overview.
 110                                         </p>
 111                                 </section>
 112
 113                                 <section>
 114                                         <h2>Marvelous Unordered List</h2>
 115                                         <ul>
 116                                                 <li>No order here</li>
 117                                                 <li>Or here</li>
 118                                                 <li>Or here</li>
 119                                                 <li>Or here</li>
 120                                         </ul>
 121                                 </section>
 122
 123                                 <section>
 124                                         <h2>Fantastic Ordered List</h2>
 125                                         <ol>
 126                                                 <li>One is smaller than...</li>
 127                                                 <li>Two is smaller than...</li>
 128                                                 <li>Three!</li>
 129                                         </ol>
 130                                 </section>
 131
 132                                 <section data-markdown>
 133                                         <script type="text/template">
 134                                                 ## Markdown support
 135
 136                                                 For those of you who like that sort of thing. Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
 137
 138                                                         <section data-markdown>
 139                                                           ## Markdown support
 140
 141                                                           For those of you who like that sort of thing.
 142                                                           Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
 143                                                         </section>
 144                                         </script>
 145                                 </section>
 146
 147                                 <section id="transitions">
 148                                         <h2>Transition Styles</h2>
 149                                         <p>
 150                                                 You can select from different transitions, like: <br>
 151                                                 <a href="?transition=cube#/transitions">Cube</a> -
 152                                                 <a href="?transition=page#/transitions">Page</a> -
 153                                                 <a href="?transition=concave#/transitions">Concave</a> -
 154                                                 <a href="?transition=zoom#/transitions">Zoom</a> -
 155                                                 <a href="?transition=linear#/transitions">Linear</a> -
 156                                                 <a href="?transition=fade#/transitions">Fade</a> -
 157                                                 <a href="?transition=none#/transitions">None</a> -
 158                                                 <a href="?#/transitions">Default</a>
 159                                         </p>
 160                                 </section>
 161
 162                                 <section id="themes">
 163                                         <h2>Themes</h2>
 164                                         <p>
 165                                                 Reveal.js comes with a few themes built in: <br>
 166                                                 <a href="?theme=sky#/themes">Sky</a> -
 167                                                 <a href="?theme=beige#/themes">Beige</a> -
 168                                                 <a href="?theme=simple#/themes">Simple</a> -
 169                                                 <a href="?theme=serif#/themes">Serif</a> -
 170                                                 <a href="?theme=night#/themes">Night</a> -
 171                                                 <a href="?#/themes">Default</a>
 172                                         </p>
 173                                         <p>
 174                                                 <small>
 175                                                         * Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <code>&lt;head&gt;</code> using a <code>&lt;link&gt;</code>.
 176                                                 </small>
 177                                         </p>
 178                                 </section>
 179
 180                                 <section>
 181                                         <section data-state="alert">
 182                                                 <h2>Global State</h2>
 183                                                 <p>
 184                                                         Set <code>data-state="something"</code> on a slide and <code>"something"</code>
 185                                                         will be added as a class to the document element when the slide is open. This lets you
 186                                                         apply broader style changes, like switching the background.
 187                                                 </p>
 188                                                 <a href="#" class="image navigate-down">
 189                                                         <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
 190                                                 </a>
 191                                         </section>
 192                                         <section data-state="blackout">
 193                                                 <h2>"blackout"</h2>
 194                                                 <a href="#" class="image navigate-down">
 195                                                         <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
 196                                                 </a>
 197                                         </section>
 198                                         <section data-state="soothe">
 199                                                 <h2>"soothe"</h2>
 200                                                 <a href="#" class="image navigate-next">
 201                                                         <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(-90deg);">
 202                                                 </a>
 203                                         </section>
 204                                 </section>
 205
 206                                 <section data-state="customevent">
 207                                         <h2>Custom Events</h2>
 208                                         <p>
 209                                                 Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
 210                                         </p>
 211                                         <pre><code data-trim contenteditable style="font-size: 18px; margin-top: 20px;">
 212 Reveal.addEventListener( 'customevent', function() {
 213         console.log( '"customevent" has fired' );
 214 } );
 215                                         </code></pre>
 216                                 </section>
 217
 218                                 <section>
 219                                         <h2>Clever Quotes</h2>
 220                                         <p>
 221                                                 These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
 222                                                 The nice thing about standards is that there are so many to choose from</q> and block:
 223                                         </p>
 224                                         <blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
 225                                                 For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
 226                                                 reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.
 227                                         </blockquote>
 228                                 </section>
 229
 230                                 <section>
 231                                         <h2>Pretty Code</h2>
 232                                         <pre><code data-trim contenteditable>
 233 function linkify( selector ) {
 234   if( supports3DTransforms ) {
 235
 236     var nodes = document.querySelectorAll( selector );
 237
 238     for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
 239       var node = nodes[i];
 240
 241       if( !node.className ) ) {
 242         node.className += ' roll';
 243       }
 244     };
 245   }
 246 }
 247                                         </code></pre>
 248                                         <p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
 249                                 </section>
 250
 251                                 <section>
 252                                         <h2>Intergalactic Interconnections</h2>
 253                                         <p>
 254                                                 You can link between slides internally,
 255                                                 <a href="#/2/3">like this</a>.
 256                                         </p>
 257                                 </section>
 258
 259                                 <section>
 260                                         <section>
 261                                                 <h2>Fragmented Views</h2>
 262                                                 <p>Hit the next arrow...</p>
 263                                                 <p class="fragment">... to step through ...</p>
 264                                                 <ol>
 265                                                         <li class="fragment"><code>any type</code></li>
 266                                                         <li class="fragment"><em>of view</em></li>
 267                                                         <li class="fragment"><strong>fragments</strong></li>
 268                                                 </ol>
 269
 270                                                 <aside class="notes">
 271                                                         This slide has fragments which are also stepped through in the notes window.
 272                                                 </aside>
 273                                         </section>
 274                                         <section>
 275                                                 <h2>Fragment Styles</h2>
 276                                                 <p>There's a few styles of fragments, like:</p>
 277                                                 <p class="fragment grow">grow</p>
 278                                                 <p class="fragment shrink">shrink</p>
 279                                                 <p class="fragment roll-in">roll-in</p>
 280                                                 <p class="fragment fade-out">fade-out</p>
 281                                                 <p class="fragment highlight-red">highlight-red</p>
 282                                                 <p class="fragment highlight-green">highlight-green</p>
 283                                                 <p class="fragment highlight-blue">highlight-blue</p>
 284                                         </section>
 285                                 </section>
 286
 287                                 <section>
 288                                         <h2>Spectacular image!</h2>
 289                                         <a class="image" href="http://lab.hakim.se/meny/" target="_blank">
 290                                                 <img width="320" height="299" src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny">
 291                                         </a>
 292                                 </section>
 293
 294                                 <section>
 295                                         <h2>Export to PDF</h2>
 296                                         <p>Presentations can be <a href="https://github.com/hakimel/reveal.js#pdf-export">exported to PDF</a>, below is an example that's been uploaded to SlideShare.</p>
 297                                         <iframe id="slideshare" src="http://www.slideshare.net/slideshow/embed_code/13872948" width="455" height="356" style="margin:0;overflow:hidden;border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen> </iframe>
 298                                         <script>
 299                                                 document.getElementById('slideshare').attributeName = 'allowfullscreen';
 300                                         </script>
 301                                 </section>
 302
 303                                 <section>
 304                                         <h2>Take a Moment</h2>
 305                                         <p>
 306                                                 Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen
 307                                                 during a presentation.
 308                                         </p>
 309                                 </section>
 310
 311                                 <section>
 312                                         <h2>Stellar Links</h2>
 313                                         <ul>
 314                                                 <li><a href="https://github.com/hakimel/reveal.js">Source code on GitHub</a></li>
 315                                                 <li><a href="http://hakim.se/projects/reveal-js">Leave feedback on my site</a></li>
 316                                                 <li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
 317                                         </ul>
 318                                 </section>
 319
 320                                 <section>
 321                                         <h2>It's free</h2>
 322                                         <p>
 323                                                 reveal.js and <a href="http://www.rvl.io">rvl.io</a> are entirely free but if you'd like to support the projects you can donate below.
 324                                                 Donations will go towards hosting and domain costs.
 325                                         </p>
 326                                         <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
 327                                                 <input type="hidden" name="cmd" value="_donations">
 328                                                 <input type="hidden" name="business" value="hakim.elhattab@gmail.com">
 329                                                 <input type="hidden" name="lc" value="US">
 330                                                 <input type="hidden" name="item_name" value="reveal.js / rvl.io">
 331                                                 <input type="hidden" name="no_note" value="0">
 332                                                 <input type="hidden" name="currency_code" value="USD">
 333                                                 <input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest">
 334                                                 <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
 335                                         </form>
 336                                 </section>
 337
 338                                 <section>
 339                                         <h1>THE END</h1>
 340                                         <h3>BY Hakim El Hattab / hakim.se</h3>
 341                                 </section>
 342
 343                         </div>
 344
 345                 </div>
 346
 347                 <script src="lib/js/head.min.js"></script>
 348                 <script src="js/reveal.min.js"></script>
 349
 350                 <script>
 351
 352                         // Full list of configuration options available here:
 353                         // https://github.com/hakimel/reveal.js#configuration
 354                         Reveal.initialize({
 355                                 controls: true,
 356                                 progress: true,
 357                                 history: true,
 358                                 center: true,
 359
 360                                 theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
 361                                 transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
 362
 363                                 // Optional libraries used to extend on reveal.js
 364                                 dependencies: [
 365                                         { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
 366                                         { src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 367                                         { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 368                                         { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
 369                                         { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
 370                                         { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
 371                                         // { src: 'plugin/search/search.js', async: true, condition: function() { return !!document.body.classList; } }
 372                                         // { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
 373                                 ]
 374                         });
 375
 376                 </script>
 377
 378         </body>
 379 </html>