diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 27 |
1 files changed, 15 insertions, 12 deletions
@@ -75,7 +75,7 @@ <p>That's it, time to go back up.</p> <br> <a href="#/2"> - <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);"> + <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="transform: rotate(180deg); -webkit-transform: rotate(180deg);"> </a> </section> </section> @@ -138,7 +138,6 @@ <p>There's different types 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 current-visible">current-visible</p> <p class="fragment highlight-red">highlight-red</p> @@ -171,6 +170,7 @@ <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/beige.css'); return false;">Beige</a> - <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/simple.css'); return false;">Simple</a> <br> <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/serif.css'); return false;">Serif</a> - + <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/blood.css'); return false;">Blood</a> - <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/night.css'); return false;">Night</a> - <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/moon.css'); return false;">Moon</a> - <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/solarized.css'); return false;">Solarized</a> @@ -189,18 +189,21 @@ </section> <section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png"> <h2>Image Backgrounds</h2> - <pre><code><section data-background="image.png"></code></pre> + <pre><code class="hljs"><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>Tiled Backgrounds</h2> - <pre><code style="word-wrap: break-word;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></code></pre> + <pre><code class="hljs" style="word-wrap: break-word;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></code></pre> </section> <section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-color="#000000"> <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;"> <h2>Video Backgrounds</h2> - <pre><code style="word-wrap: break-word;"><section data-background-video="video.mp4,video.webm"></code></pre> + <pre><code class="hljs" style="word-wrap: break-word;"><section data-background-video="video.mp4,video.webm"></code></pre> </div> </section> + <section data-background="http://i.giphy.com/90F8aUepslB84.gif"> + <h2>... and GIFs!</h2> + </section> </section> <section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom"> @@ -208,7 +211,7 @@ <p> Different background transitions are available via the backgroundTransition option. This one's called "zoom". </p> - <pre><code>Reveal.configure({ backgroundTransition: 'zoom' })</code></pre> + <pre><code class="hljs">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre> </section> <section data-transition="slide" data-background="#b5533c" data-background-transition="zoom"> @@ -216,12 +219,12 @@ <p> You can override background transitions per-slide. </p> - <pre><code style="word-wrap: break-word;"><section data-background-transition="zoom"></code></pre> + <pre><code class="hljs" style="word-wrap: break-word;"><section data-background-transition="zoom"></code></pre> </section> <section> <h2>Pretty Code</h2> - <pre><code data-trim contenteditable> + <pre><code class="hljs" data-trim contenteditable> function linkify( selector ) { if( supports3DTransforms ) { @@ -274,17 +277,17 @@ function linkify( selector ) { <td>Apples</td> <td>$1</td> <td>7</td> - <tr> + </tr> <tr> <td>Lemonade</td> <td>$2</td> <td>18</td> - <tr> + </tr> <tr> <td>Bread</td> <td>$3</td> <td>2</td> - <tr> + </tr> </tbody> </table> </section> @@ -322,7 +325,7 @@ function linkify( selector ) { <section> <h2>Export to PDF</h2> <p>Presentations can be <a href="https://github.com/hakimel/reveal.js#pdf-export">exported to PDF</a>, here's an example:</p> - <iframe src="//www.slideshare.net/slideshow/embed_code/42840540" width="445" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> + <iframe src="https://www.slideshare.net/slideshow/embed_code/42840540" width="445" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> </section> <section> |