Skip to content
Snippets Groups Projects
Commit 3126db0a authored by Hakim El Hattab's avatar Hakim El Hattab
Browse files

update order of default slides

parent d84233df
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 89 additions and 88 deletions
index.html
+ 89
− 88
View file @ 3126db0a
......@@ -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,10 +238,59 @@ 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>
......@@ -303,34 +332,6 @@ function linkify( selector ) {
</p>
</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">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment