7 <title>OPNFV presentation</title>
9 <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
10 <meta name="author" content="Hakim El Hattab">
12 <meta name="apple-mobile-web-app-capable" content="yes" />
13 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
15 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
17 <link rel="stylesheet" href="css/reveal.css">
18 <link rel="stylesheet" href="css/theme/OPNFV.css" id="theme">
20 <!-- Code syntax highlighting -->
21 <link rel="stylesheet" href="lib/css/zenburn.css">
23 <!-- Printing and PDF exports -->
25 var link = document.createElement( 'link' );
26 link.rel = 'stylesheet';
27 link.type = 'text/css';
28 link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
29 document.getElementsByTagName( 'head' )[0].appendChild( link );
33 <script src="lib/js/html5shiv.js"></script>
40 <!-- Any section element inside of this container is displayed as a slide -->
43 <section data-background="../img/title-bg.png" data-background-transition="none">
50 <h5>whenever you want</h5>
57 “Good job. Chris Price - ”
61 <section id="fragments">
64 <li class="fragment">another one</li>
65 <li class="fragment">one more time</li>
72 <section data-markdown>
79 <img width="400" data-src="https://www.opnfv.org/sites/all/themes/opnfv/logo.png" alt="OPNFV">
81 <section data-markdown>
83 ![OPNFV](https://www.opnfv.org/sites/all/themes/opnfv/logo.png "OPNFV")
88 <section style="text-align: left;">
91 - <a href="http://slides.com">Try the online editor</a> <br>
92 - <a href="https://github.com/hakimel/reveal.js">Source code & documentation</a>
99 Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at <a href="http://slides.com" target="_blank">http://slides.com</a>.
104 <h2>Point of View</h2>
106 Press <strong>ESC</strong> to enter the slide overview.
109 Hold down alt and click on any element to zoom in on it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Alt + click anywhere to zoom back out.
114 <h2>Touch Optimized</h2>
116 Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
120 <section id="transitions">
121 <h2>Transition Styles</h2>
123 You can select from different transitions, like: <br>
124 <a href="?transition=none#/transitions">None</a> -
125 <a href="?transition=fade#/transitions">Fade</a> -
126 <a href="?transition=slide#/transitions">Slide</a> -
127 <a href="?transition=convex#/transitions">Convex</a> -
128 <a href="?transition=concave#/transitions">Concave</a> -
129 <a href="?transition=zoom#/transitions">Zoom</a>
133 <section id="themes">
136 reveal.js comes with a few themes built in: <br>
137 <!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
138 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/black.css'); return false;">Black (default)</a> -
139 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/white.css'); return false;">White</a> -
140 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/league.css'); return false;">League</a> -
141 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/sky.css'); return false;">Sky</a> -
142 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/beige.css'); return false;">Beige</a> -
143 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/simple.css'); return false;">Simple</a> <br>
144 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/serif.css'); return false;">Serif</a> -
145 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/blood.css'); return false;">Blood</a> -
146 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/night.css'); return false;">Night</a> -
147 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/moon.css'); return false;">Moon</a> -
148 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/solarized.css'); return false;">Solarized</a>
153 <section data-background="#dddddd">
154 <h2>Slide Backgrounds</h2>
156 Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported.
158 <a href="#" class="navigate-down">
159 <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
162 <section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
163 <h2>Image Backgrounds</h2>
164 <pre><code class="hljs"><section data-background="image.png"></code></pre>
166 <section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
167 <h2>Tiled Backgrounds</h2>
168 <pre><code class="hljs" style="word-wrap: break-word;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></code></pre>
170 <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">
171 <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
172 <h2>Video Backgrounds</h2>
173 <pre><code class="hljs" style="word-wrap: break-word;"><section data-background-video="video.mp4,video.webm"></code></pre>
176 <section data-background="http://i.giphy.com/90F8aUepslB84.gif">
177 <h2>... and GIFs!</h2>
181 <section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
182 <h2>Background Transitions</h2>
184 Different background transitions are available via the backgroundTransition option. This one's called "zoom".
186 <pre><code class="hljs">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
189 <section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
190 <h2>Background Transitions</h2>
192 You can override background transitions per-slide.
194 <pre><code class="hljs" style="word-wrap: break-word;"><section data-background-transition="zoom"></code></pre>
199 <pre><code class="hljs" data-trim contenteditable>
200 function linkify( selector ) {
201 if( supports3DTransforms ) {
203 var nodes = document.querySelectorAll( selector );
205 for( var i = 0, len = nodes.length; i < len; i++ ) {
208 if( !node.className ) {
209 node.className += ' roll';
215 <p>Code syntax highlighting courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
219 <h2>Marvelous List</h2>
221 <li>No order here</li>
229 <h2>Fantastic Ordered List</h2>
231 <li>One is smaller than...</li>
232 <li>Two is smaller than...</li>
238 <h2>Tabular Tables</h2>
268 <h2>Clever Quotes</h2>
270 These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
271 “The nice thing about standards is that there are so many to choose from”</q> and block:
273 <blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
274 “For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
275 reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”
280 <h2>Intergalactic Interconnections</h2>
282 You can link between slides internally,
283 <a href="#/2/3">like this</a>.
288 <h2>Speaker View</h2>
289 <p>There's a <a href="https://github.com/hakimel/reveal.js#speaker-notes">speaker view</a>. It includes a timer, preview of the upcoming slide as well as your speaker notes.</p>
290 <p>Press the <em>S</em> key to try it out.</p>
292 <aside class="notes">
293 Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
298 <h2>Export to PDF</h2>
299 <p>Presentations can be <a href="https://github.com/hakimel/reveal.js#pdf-export">exported to PDF</a>, here's an example:</p>
300 <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>
304 <h2>Global State</h2>
306 Set <code>data-state="something"</code> on a slide and <code>"something"</code>
307 will be added as a class to the document element when the slide is open. This lets you
308 apply broader style changes, like switching the page background.
312 <section data-state="customevent">
313 <h2>State Events</h2>
315 Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
317 <pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
318 Reveal.addEventListener( 'customevent', function() {
319 console.log( '"customevent" has fired' );
325 <h2>Take a Moment</h2>
327 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.
334 <li>Right-to-left support</li>
335 <li><a href="https://github.com/hakimel/reveal.js#api">Extensive JavaScript API</a></li>
336 <li><a href="https://github.com/hakimel/reveal.js#auto-sliding">Auto-progression</a></li>
337 <li><a href="https://github.com/hakimel/reveal.js#parallax-background">Parallax backgrounds</a></li>
338 <li><a href="https://github.com/hakimel/reveal.js#keyboard-bindings">Custom keyboard bindings</a></li>
345 <img src="./img/logo-OPNFV.png" alt="OPNFV logo">
349 <script src="lib/js/head.min.js"></script>
350 <script src="js/reveal.js"></script>
354 // Full list of configuration options available at:
355 // https://github.com/hakimel/reveal.js#configuration
362 transition: 'slide', // none/fade/slide/convex/concave/zoom
364 // Optional reveal.js plugins
366 { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
367 { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
368 { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
369 { src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
370 { src: 'plugin/zoom-js/zoom.js', async: true },
371 { src: 'plugin/notes/notes.js', async: true }