18 lines
59 KiB
HTML
18 lines
59 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<!-- saved from url=(0026)https://revealjs.com/demo/ -->
|
||
|
|
<html lang="en" class="reveal-full-page"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Demo | reveal.js</title><meta name="description" content=""><link rel="stylesheet" href="./Demo _ reveal.js_files/main.css"><meta itemprop="name" content=" | reveal.js"><meta itemprop="description" content=""><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content=" | reveal.js"><meta name="twitter:description" content=""><meta name="twitter:site" content="@hakimel"><meta name="twitter:creator" content="@hakimel"><meta name="twitter:image:src" content="https://revealjs.com/images/meta/reveal-twitter-card-1024x512.png"><meta property="og:title" content=" | reveal.js"><meta property="og:description" content=""><meta property="og:image" name="image" content="https://revealjs.com/images/meta/reveal-og-card-1200-630.png"><meta property="og:url" content="https://revealjs.com/demo/"><meta property="og:site_name" content="reveal.js"><meta property="og:locale" content="en_US"><meta property="og:type" content="website"><link rel="icon" type="image/png" href="https://revealjs.com/images/favicon.svg"><link href="./Demo _ reveal.js_files/css2" rel="stylesheet"><style type="text/css">.hljs-ln{border-collapse:collapse}.hljs-ln td{padding:0}.hljs-ln-n:before{content:attr(data-line-number)}</style></head><body class="h-screen full-page-demo reveal-viewport" data-page="demo" style="transition: transform 0.8s ease 0s; --slide-width:960px; --slide-height:700px; --slide-scale:1.16571;"><div class="reveal slide center focused has-vertical-slides has-horizontal-slides ready" role="application" data-transition-speed="default" data-background-transition="fade" style=""><div class="slides" style="width: 960px; height: 700px; inset: 50% auto auto 50%; transform: translate(-50%, -50%) scale(1.16571);"><section style="top: 89px; display: block;" class="present"><img src="./Demo _ reveal.js_files/reveal-white-text.svg" alt="reveal.js" style="height: 180px; margin: 0 auto 4rem auto; background: transparent;" class="demo-logo"><h3>The HTML Presentation Framework</h3><p><small>Created by <a href="https://twitter.com/hakimel">Hakim El Hattab</a> and <a href="https://github.com/hakimel/reveal.js/graphs/contributors">contributors</a></small></p><div style="display: flex; align-items: center; justify-content: center; gap: 1rem; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 1.5rem; padding-top: 1.5rem;"><small>Sponsored by</small> <a href="https://codeless.co/" rel="dofollow"><img src="./Demo _ reveal.js_files/codeless_light.png" width="227" height="70"></a></div></section><section style="top: 225px; display: block;" hidden="" aria-hidden="true" class="future"><h2>Hello There</h2><p>reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.</p></section><section style="top: 0px; display: block;" hidden="" aria-hidden="true" class="stack future"><section style="top: 77.5px; display: block;"><h2>Vertical Slides</h2><p>Slides can be nested inside of each other.</p><p>Use the <em>Space</em> key to navigate through all slides.</p><br><a href="https://revealjs.com/demo/#" class="navigate-down" disabled="disabled"><img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" alt="Down arrow" src="./Demo _ reveal.js_files/arrow.png" data-lazy-loaded=""></a></section><section class="future" aria-hidden="true" style="top: 350px; display: none;"><h2>Basement Level 1</h2><p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p></section><section class="future" aria-hidden="true" style="top: 350px; display: none;"><h2>Basement Level 2</h2><p>That's it, time to go back up.</p><br><a href="https://revealjs.com/demo/#/2"><img class="r-frame" style="background: rgba(255,255,255,0.1); transform: rotate(180deg);" width="178" height="238" alt="Up arrow" src="./Demo _ reveal.js_files/arrow.png" data-
|
||
|
|
<p>Write content using inline or external Markdown.
|
||
|
|
Instructions and more info available in the <a href="https://revealjs.com/markdown/">readme</a>.</p>
|
||
|
|
<pre class="code-wrapper"><code data-line-numbers="" class="html hljs xml"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">data-markdown</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"> ## Markdown support</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"> Write content using inline or external Markdown.</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"> Instructions and more info available in the [readme](https://revealjs.com/markdown/).</td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6"><span class="hljs-tag"></<span class="hljs-name">section</span>></span></td></tr></tbody></table></code></pre></section><section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><p>Add the <code>r-fit-text</code> class to auto-size text</p><h2 class="r-fit-text">FIT TEXT</h2></section><section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="stack future"><section id="fragments" style="top: 350px; display: none;"><h2>Fragments</h2><p>Hit the next arrow...</p><p class="fragment" data-fragment-index="0">... to step through ...</p><p><span class="fragment" data-fragment-index="1">... a</span> <span class="fragment" data-fragment-index="2">fragmented</span> <span class="fragment" data-fragment-index="3">slide.</span></p><aside class="notes">This slide has fragments which are also stepped through in the notes window.</aside></section><section class="future" aria-hidden="true" style="top: 350px; display: none;"><h2>Fragment Styles</h2><p>There's different types of fragments, like:</p><p class="fragment grow" data-fragment-index="0">grow</p><p class="fragment shrink" data-fragment-index="1">shrink</p><p class="fragment fade-out" data-fragment-index="2">fade-out</p><p><span style="display: inline-block;" class="fragment fade-right" data-fragment-index="3">fade-right, </span><span style="display: inline-block;" class="fragment fade-up" data-fragment-index="4">up, </span><span style="display: inline-block;" class="fragment fade-down" data-fragment-index="5">down, </span><span style="display: inline-block;" class="fragment fade-left" data-fragment-index="6">left</span></p><p class="fragment fade-in-then-out" data-fragment-index="7">fade-in-then-out</p><p class="fragment fade-in-then-semi-out" data-fragment-index="8">fade-in-then-semi-out</p><p>Highlight <span class="fragment highlight-red" data-fragment-index="9">red</span> <span class="fragment highlight-blue" data-fragment-index="10">blue</span> <span class="fragment highlight-green" data-fragment-index="11">green</span></p></section></section><section id="transitions" style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h2>Transition Styles</h2><p>You can select from different transitions, like:<br><a href="https://revealjs.com/demo/?transition=none#/transitions">None</a> - <a href="https://revealjs.com/demo/?transition=fade#/transitions">Fade</a> - <a href="https://revealjs.com/demo/?transition=slide#/transitions">Slide</a> - <a href="https://revealjs.com/demo/?transition=convex#/transitions">Convex</a> - <a
|
||
|
|
<span class="hljs-built_in">console</span>.log( <span class="hljs-string">'"customevent" has fired'</span> );
|
||
|
|
} );</code></pre></section><section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h2>Take a Moment</h2><p>Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.</p></section><section style="top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h2>Much more</h2><ul><li>Right-to-left support</li><li><a href="https://revealjs.com/api/">Extensive JavaScript API</a></li><li><a href="https://revealjs.com/auto-slide/">Auto-progression</a></li><li><a href="https://revealjs.com/backgrounds/#parallax-background">Parallax backgrounds</a></li><li><a href="https://revealjs.com/keyboard/">Custom keyboard bindings</a></li></ul></section><section style="text-align: left; top: 350px; display: none;" hidden="" aria-hidden="true" class="future"><h1>THE END</h1><p>- <a href="https://slides.com/">Try the online editor</a><br>- <a href="https://github.com/hakimel/reveal.js">Source code & documentation</a></p></section></div><div class="backgrounds"><div class="slide-background present" data-loaded="true" style="display: block;"><div class="slide-background-content"></div></div><div class="slide-background future" data-loaded="true" style="display: block;"><div class="slide-background-content"></div></div><div class="slide-background stack future" data-loaded="true" style="display: block;"><div class="slide-background-content"></div><div class="slide-background present" data-loaded="true" style="display: block;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background stack future" style="display: none;"><div class="slide-background-content"></div><div class="slide-background present" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div></div><div class="slide-background future" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background stack future" style="display: none;"><div class="slide-background-content"></div><div class="slide-background present" data-background-hash="#ddddddnullnullnullnullnullnullnullnullnullnull" style="background: rgb(221, 221, 221); display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" data-background-hash="https://static.slid.es/reveal/image-placeholder.pngnullnullnullnullnullnullnullnullnullnull" style="display: none;"><div class="slide-background-content"></div></div><div class="slide-background future" data-background-hash="https://static.slid.es/reveal/image-placeholder.png100pxnullnullnullnullnullrepeatnullnullnull" data-ba
|
||
|
|
<button class="navigate-right enabled highlight" aria-label="next slide"><div class="controls-arrow"></div></button>
|
||
|
|
<button class="navigate-up" aria-label="above slide" disabled="disabled"><div class="controls-arrow"></div></button>
|
||
|
|
<button class="navigate-down" aria-label="below slide" disabled="disabled"><div class="controls-arrow"></div></button></aside><div class="progress" style="display: block;"><span style="transform: scaleX(0);"></span></div><div class="speaker-notes" data-prevent-swipe="" tabindex="0"></div><div class="pause-overlay"><button class="resume-button">Resume presentation</button></div><div class="aria-status" aria-live="polite" aria-atomic="true" style="position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);">The HTML Presentation Framework Created by Hakim El Hattab and contributors Sponsored by </div></div><script src="./Demo _ reveal.js_files/main.js" defer="defer"></script><script async="" src="./Demo _ reveal.js_files/js"></script>
|
||
|
|
<script>
|
||
|
|
window.dataLayer = window.dataLayer || [];
|
||
|
|
function gtag(){dataLayer.push(arguments);}
|
||
|
|
gtag('js', new Date());
|
||
|
|
|
||
|
|
gtag('config', 'UA-43375306-1');
|
||
|
|
</script></body></html>
|