diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 177 |
1 files changed, 89 insertions, 88 deletions
@@ -102,86 +102,66 @@ </section> <section> - <h2>Mobile Support</h2> + <h2>Touch Optimized</h2> <p> - Presentations work on touch devices such as phones and tablets. Simply swipe through your slides. + Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides. </p> </section> - <section> - <h2>Marvelous Unordered List</h2> - <ul> - <li>No order here</li> - <li>Or here</li> - <li>Or here</li> - <li>Or here</li> - </ul> - </section> - - <section> - <h2>Fantastic Ordered List</h2> - <ol> - <li>One is smaller than...</li> - <li>Two is smaller than...</li> - <li>Three!</li> - </ol> - </section> - - <section> - <h2>Superb Tables</h2> - <table> - <thead> - <tr> - <th>Item</th> - <th>Value</th> - <th>Quantity</th> - </tr> - </thead> - <tbody> - <tr> - <td>Apples</td> - <td>$1</td> - <td>7</td> - <tr> - <tr> - <td>Lemonade</td> - <td>$2</td> - <td>18</td> - <tr> - <tr> - <td>Bread</td> - <td>$3</td> - <td>2</td> - <tr> - </tbody> - </table> - </section> - <section data-markdown> <script type="text/template"> ## Markdown support - 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). + Write content using inline or external Markdown. + Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown). ``` <section data-markdown> ## Markdown support - 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). + Write content using inline or external Markdown. + Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown). </section> ``` </script> </section> + <section> + <section id="fragments"> + <h2>Fragments</h2> + <p>Hit the next arrow...</p> + <p class="fragment">... to step through ...</p> + <ol> + <li class="fragment"><code>any type</code></li> + <li class="fragment"><em>of view</em></li> + <li class="fragment"><strong>fragments</strong></li> + </ol> + + <aside class="notes"> + This slide has fragments which are also stepped through in the notes window. + </aside> + </section> + <section> + <h2>Fragment Styles</h2> + <p>There's a few styles of fragments, like:</p> + <p class="fragment grow">grow</p> + <p class="fragment shrink">shrink</p> + <p class="fragment roll-in">roll-in</p> + <p class="fragment fade-out">fade-out</p> + <p class="fragment highlight-red">highlight-red</p> + <p class="fragment current-visible">current-visible</p> + <p class="fragment highlight-current-blue">highlight-current-blue</p> + </section> + </section> + <section id="transitions"> <h2>Transition Styles</h2> <p> You can select from different transitions, like: <br> - <a href="?#/transitions">Default</a> - <a href="?transition=none#/transitions">None</a> - <a href="?transition=fade#/transitions">Fade</a> - <a href="?transition=slide#/transitions">Slide</a> - + <a href="?transition=convex#/transitions">Convex</a> - <a href="?transition=concave#/transitions">Concave</a> - <a href="?transition=zoom#/transitions">Zoom</a> </p> @@ -202,7 +182,7 @@ </p> <p> <small> - * Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <code><head></code> using a <code><link></code>. + * Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link>. </small> </p> </section> @@ -212,12 +192,12 @@ <p> Set <code>data-state="something"</code> on a slide and <code>"something"</code> will be added as a class to the document element when the slide is open. This lets you - apply broader style changes, like switching the background. + apply broader style changes, like switching the page background. </p> </section> <section data-state="customevent"> - <h2>Custom Events</h2> + <h2>State Events</h2> <p> Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name. </p> @@ -243,7 +223,7 @@ Reveal.addEventListener( 'customevent', function() { <pre><code><section data-background="image.png"></code></pre> </section> <section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px"> - <h2>Repeated Image Backgrounds</h2> + <h2>Tile Backgrounds</h2> <pre><code style="word-wrap: break-word;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></code></pre> </section> </section> @@ -258,11 +238,60 @@ Reveal.addEventListener( 'customevent', function() { <section data-transition="slide" data-background="#8c4738" data-background-transition="zoom"> <h2>Background Transitions</h2> <p> - You can override background transitions per slide by using <code>data-background-transition="slide"</code>. + You can override background transitions per slide by using <code>data-background-transition="zoom"</code>. </p> </section> <section> + <h2>Marvelous List</h2> + <ul> + <li>No order here</li> + <li>Or here</li> + <li>Or here</li> + <li>Or here</li> + </ul> + </section> + + <section> + <h2>Fantastic Ordered List</h2> + <ol> + <li>One is smaller than...</li> + <li>Two is smaller than...</li> + <li>Three!</li> + </ol> + </section> + + <section> + <h2>Superb Tables</h2> + <table> + <thead> + <tr> + <th>Item</th> + <th>Value</th> + <th>Quantity</th> + </tr> + </thead> + <tbody> + <tr> + <td>Apples</td> + <td>$1</td> + <td>7</td> + <tr> + <tr> + <td>Lemonade</td> + <td>$2</td> + <td>18</td> + <tr> + <tr> + <td>Bread</td> + <td>$3</td> + <td>2</td> + <tr> + </tbody> + </table> + </section> + + <section> <h2>Clever Quotes</h2> <p> These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations"> @@ -304,34 +333,6 @@ function linkify( selector ) { </section> <section> - <section id="fragments"> - <h2>Fragmented Views</h2> - <p>Hit the next arrow...</p> - <p class="fragment">... to step through ...</p> - <ol> - <li class="fragment"><code>any type</code></li> - <li class="fragment"><em>of view</em></li> - <li class="fragment"><strong>fragments</strong></li> - </ol> - - <aside class="notes"> - This slide has fragments which are also stepped through in the notes window. - </aside> - </section> - <section> - <h2>Fragment Styles</h2> - <p>There's a few styles of fragments, like:</p> - <p class="fragment grow">grow</p> - <p class="fragment shrink">shrink</p> - <p class="fragment roll-in">roll-in</p> - <p class="fragment fade-out">fade-out</p> - <p class="fragment highlight-red">highlight-red</p> - <p class="fragment current-visible">current-visible</p> - <p class="fragment highlight-current-blue">highlight-current-blue</p> - </section> - </section> - - <section> <h2>Spectacular image!</h2> <a href="http://lab.hakim.se/meny/" target="_blank"> <img width="320" height="299" data-src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny"> |