xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

serve demo assets from cdn, logo on first slide in demo.html

Browse Source
This commit is contained in:
Hakim El Hattab 2020-05-27 15:51:05 +02:00
parent eb026f79b4
commit a65e96fbc6
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
demo.html
View File

@ -29,7 +29,7 @@
<!-- Any section element inside of this container is displayed as a slide --> <!-- Any section element inside of this container is displayed as a slide -->
<div class="slides"> <div class="slides">
<section> <section>
<h1>Reveal.js</h1> <img src="https://static.slid.es/reveal/logo-v1/reveal-white-text.svg" alt="reveal.js logo" style="height: 180px; margin: 0 auto 4rem auto; background: transparent;" class="demo-logo">
<h3>The HTML Presentation Framework</h3> <h3>The HTML Presentation Framework</h3>
<p> <p>
<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> and <a href="https://github.com/hakimel/reveal.js/graphs/contributors">contributors</a></small> <small>Created by <a href="http://hakim.se">Hakim El Hattab</a> and <a href="https://github.com/hakimel/reveal.js/graphs/contributors">contributors</a></small>
@ -51,7 +51,7 @@
<p>Use the <em>Space</em> key to navigate through all slides.</p> <p>Use the <em>Space</em> key to navigate through all slides.</p>
<br> <br>
<a href="#" class="navigate-down"> <a href="#" class="navigate-down">
<img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow"> <img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow">
</a> </a>
</section> </section>
<section> <section>
@ -63,7 +63,7 @@
<p>That's it, time to go back up.</p> <p>That's it, time to go back up.</p>
<br> <br>
<a href="#/2"> <a href="#/2">
<img class="r-frame" style="background: rgba(255,255,255,0.1); transform: rotate(180deg);" width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow"> <img class="r-frame" style="background: rgba(255,255,255,0.1); transform: rotate(180deg);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Up arrow">
</a> </a>
</section> </section>
</section> </section>
@ -256,18 +256,18 @@
Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported. Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported.
</p> </p>
<a href="#" class="navigate-down"> <a href="#" class="navigate-down">
<img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow"> <img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow">
</a> </a>
</section> </section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png"> <section data-background="https://static.slid.es/reveal/image-placeholder.png">
<h2>Image Backgrounds</h2> <h2>Image Backgrounds</h2>
<pre><code class="hljs html">&lt;section data-background="image.png"&gt;</code></pre> <pre><code class="hljs html">&lt;section data-background="image.png"&gt;</code></pre>
</section> </section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px"> <section data-background="https://static.slid.es/reveal/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
<h2>Tiled Backgrounds</h2> <h2>Tiled Backgrounds</h2>
<pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre> <pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
</section> </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"> <section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-background-color="#000000">
<div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;"> <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
<h2>Video Backgrounds</h2> <h2>Video Backgrounds</h2>
<pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre> <pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>