aboutsummaryrefslogtreecommitdiff
path: root/index.html
diff options
context:
space:
mode:
authorHakim El Hattab <hakim.elhattab@gmail.com>2014-11-05 12:54:00 +0100
committerHakim El Hattab <hakim.elhattab@gmail.com>2014-11-05 12:54:00 +0100
commit3126db0a460dcfa4bf7b51555180263c6e8832dd (patch)
tree64fa1dc774ac68502eec4204ffbac7fef65ba24f /index.html
parentd84233df98e92b08004d427da2ec9c0887ac4fef (diff)
downloadfosdem-2018-presentation-3126db0a460dcfa4bf7b51555180263c6e8832dd.tar
fosdem-2018-presentation-3126db0a460dcfa4bf7b51555180263c6e8832dd.tar.gz
update order of default slides
Diffstat (limited to 'index.html')
-rw-r--r--index.html177
1 files changed, 89 insertions, 88 deletions
diff --git a/index.html b/index.html
index 0fca2cb..98fc49b 100644
--- a/index.html
+++ b/index.html
@@ -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>&lt;head&gt;</code> using a <code>&lt;link&gt;</code>.
+ * Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the &lt;head&gt; using a &lt;link&gt;.
</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>&lt;section data-background="image.png"&gt;</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;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</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">