Skip to content

Commit 4bd5c79

Browse files
author
Benj Tupas
committed
Started version 2.
1 parent 98d168e commit 4bd5c79

File tree

160 files changed

+17226
-4049
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

160 files changed

+17226
-4049
lines changed

Diff for: ‎copy.html

+323
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,323 @@
1+
<section>
2+
<h2>Hello There</h2>
3+
<p>
4+
reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
5+
</p>
6+
</section>
7+
8+
<!-- Example of nested vertical slides -->
9+
<section>
10+
<section>
11+
<h2>Vertical Slides</h2>
12+
<p>Slides can be nested inside of each other.</p>
13+
<p>Use the <em>Space</em> key to navigate through all slides.</p>
14+
<br>
15+
<a href="#" class="navigate-down">
16+
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
17+
</a>
18+
</section>
19+
<section>
20+
<h2>Basement Level 1</h2>
21+
<p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p>
22+
</section>
23+
<section>
24+
<h2>Basement Level 2</h2>
25+
<p>That's it, time to go back up.</p>
26+
<br>
27+
<a href="#/2">
28+
<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);">
29+
</a>
30+
</section>
31+
</section>
32+
33+
<section>
34+
<h2>Slides</h2>
35+
<p>
36+
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>.
37+
</p>
38+
</section>
39+
40+
<section>
41+
<h2>Point of View</h2>
42+
<p>
43+
Press <strong>ESC</strong> to enter the slide overview.
44+
</p>
45+
<p>
46+
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.
47+
</p>
48+
</section>
49+
50+
<section>
51+
<h2>Touch Optimized</h2>
52+
<p>
53+
Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
54+
</p>
55+
</section>
56+
57+
<section data-markdown>
58+
<script type="text/template">
59+
## Markdown support
60+
61+
Write content using inline or external Markdown.
62+
Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
63+
64+
```
65+
<section data-markdown>
66+
## Markdown support
67+
68+
Write content using inline or external Markdown.
69+
Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
70+
</section>
71+
```
72+
</script>
73+
</section>
74+
75+
<section>
76+
<section id="fragments">
77+
<h2>Fragments</h2>
78+
<p>Hit the next arrow...</p>
79+
<p class="fragment">... to step through ...</p>
80+
<p><span class="fragment">... a</span> <span class="fragment">fragmented</span> <span class="fragment">slide.</span></p>
81+
82+
<aside class="notes">
83+
This slide has fragments which are also stepped through in the notes window.
84+
</aside>
85+
</section>
86+
<section>
87+
<h2>Fragment Styles</h2>
88+
<p>There's different types of fragments, like:</p>
89+
<p class="fragment grow">grow</p>
90+
<p class="fragment shrink">shrink</p>
91+
<p class="fragment roll-in">roll-in</p>
92+
<p class="fragment fade-out">fade-out</p>
93+
<p class="fragment current-visible">current-visible</p>
94+
<p class="fragment highlight-red">highlight-red</p>
95+
<p class="fragment highlight-blue">highlight-blue</p>
96+
</section>
97+
</section>
98+
99+
<section id="transitions">
100+
<h2>Transition Styles</h2>
101+
<p>
102+
You can select from different transitions, like: <br>
103+
<a href="?transition=none#/transitions">None</a> -
104+
<a href="?transition=fade#/transitions">Fade</a> -
105+
<a href="?transition=slide#/transitions">Slide</a> -
106+
<a href="?transition=convex#/transitions">Convex</a> -
107+
<a href="?transition=concave#/transitions">Concave</a> -
108+
<a href="?transition=zoom#/transitions">Zoom</a>
109+
</p>
110+
</section>
111+
112+
<section id="themes">
113+
<h2>Themes</h2>
114+
<p>
115+
reveal.js comes with a few themes built in: <br>
116+
<!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
117+
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/black.css'); return false;">Black (default)</a> -
118+
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/white.css'); return false;">White</a> -
119+
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/league.css'); return false;">League</a> -
120+
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/sky.css'); return false;">Sky</a> -
121+
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/beige.css'); return false;">Beige</a> -
122+
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/simple.css'); return false;">Simple</a> <br>
123+
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/serif.css'); return false;">Serif</a> -
124+
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/night.css'); return false;">Night</a> -
125+
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/moon.css'); return false;">Moon</a> -
126+
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/solarized.css'); return false;">Solarized</a>
127+
</p>
128+
</section>
129+
130+
<section>
131+
<section data-background="#dddddd">
132+
<h2>Slide Backgrounds</h2>
133+
<p>
134+
Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported.
135+
</p>
136+
<a href="#" class="navigate-down">
137+
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
138+
</a>
139+
</section>
140+
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
141+
<h2>Image Backgrounds</h2>
142+
<pre><code>&lt;section data-background="image.png"&gt;</code></pre>
143+
</section>
144+
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
145+
<h2>Tiled Backgrounds</h2>
146+
<pre><code style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
147+
</section>
148+
<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">
149+
<div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
150+
<h2>Video Backgrounds</h2>
151+
<pre><code style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
152+
</div>
153+
</section>
154+
</section>
155+
156+
<section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
157+
<h2>Background Transitions</h2>
158+
<p>
159+
Different background transitions are available via the backgroundTransition option. This one's called "zoom".
160+
</p>
161+
<pre><code>Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
162+
</section>
163+
164+
<section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
165+
<h2>Background Transitions</h2>
166+
<p>
167+
You can override background transitions per-slide.
168+
</p>
169+
<pre><code style="word-wrap: break-word;">&lt;section data-background-transition="zoom"&gt;</code></pre>
170+
</section>
171+
172+
<section>
173+
<h2>Pretty Code</h2>
174+
<pre><code data-trim contenteditable>
175+
function linkify( selector ) {
176+
if( supports3DTransforms ) {
177+
178+
var nodes = document.querySelectorAll( selector );
179+
180+
for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
181+
var node = nodes[i];
182+
183+
if( !node.className ) {
184+
node.className += ' roll';
185+
}
186+
}
187+
}
188+
}
189+
</code></pre>
190+
<p>Code syntax highlighting courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
191+
</section>
192+
193+
<section>
194+
<h2>Marvelous List</h2>
195+
<ul>
196+
<li>No order here</li>
197+
<li>Or here</li>
198+
<li>Or here</li>
199+
<li>Or here</li>
200+
</ul>
201+
</section>
202+
203+
<section>
204+
<h2>Fantastic Ordered List</h2>
205+
<ol>
206+
<li>One is smaller than...</li>
207+
<li>Two is smaller than...</li>
208+
<li>Three!</li>
209+
</ol>
210+
</section>
211+
212+
<section>
213+
<h2>Tabular Tables</h2>
214+
<table>
215+
<thead>
216+
<tr>
217+
<th>Item</th>
218+
<th>Value</th>
219+
<th>Quantity</th>
220+
</tr>
221+
</thead>
222+
<tbody>
223+
<tr>
224+
<td>Apples</td>
225+
<td>$1</td>
226+
<td>7</td>
227+
<tr>
228+
<tr>
229+
<td>Lemonade</td>
230+
<td>$2</td>
231+
<td>18</td>
232+
<tr>
233+
<tr>
234+
<td>Bread</td>
235+
<td>$3</td>
236+
<td>2</td>
237+
<tr>
238+
</tbody>
239+
</table>
240+
</section>
241+
242+
<section>
243+
<h2>Clever Quotes</h2>
244+
<p>
245+
These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
246+
&ldquo;The nice thing about standards is that there are so many to choose from&rdquo;</q> and block:
247+
</p>
248+
<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
249+
&ldquo;For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
250+
reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.&rdquo;
251+
</blockquote>
252+
</section>
253+
254+
<section>
255+
<h2>Intergalactic Interconnections</h2>
256+
<p>
257+
You can link between slides internally,
258+
<a href="#/2/3">like this</a>.
259+
</p>
260+
</section>
261+
262+
<section>
263+
<h2>Speaker View</h2>
264+
<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>
265+
<p>Press the <em>S</em> key to try it out.</p>
266+
267+
<aside class="notes">
268+
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).
269+
</aside>
270+
</section>
271+
272+
<section>
273+
<h2>Export to PDF</h2>
274+
<p>Presentations can be <a href="https://github.com/hakimel/reveal.js#pdf-export">exported to PDF</a>, here's an example:</p>
275+
<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>
276+
</section>
277+
278+
<section>
279+
<h2>Global State</h2>
280+
<p>
281+
Set <code>data-state="something"</code> on a slide and <code>"something"</code>
282+
will be added as a class to the document element when the slide is open. This lets you
283+
apply broader style changes, like switching the page background.
284+
</p>
285+
</section>
286+
287+
<section data-state="customevent">
288+
<h2>State Events</h2>
289+
<p>
290+
Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
291+
</p>
292+
<pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
293+
Reveal.addEventListener( 'customevent', function() {
294+
console.log( '"customevent" has fired' );
295+
} );
296+
</code></pre>
297+
</section>
298+
299+
<section>
300+
<h2>Take a Moment</h2>
301+
<p>
302+
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.
303+
</p>
304+
</section>
305+
306+
<section>
307+
<h2>Much more</h2>
308+
<ul>
309+
<li>Right-to-left support</li>
310+
<li><a href="https://github.com/hakimel/reveal.js#api">Extensive JavaScript API</a></li>
311+
<li><a href="https://github.com/hakimel/reveal.js#auto-sliding">Auto-progression</a></li>
312+
<li><a href="https://github.com/hakimel/reveal.js#parallax-background">Parallax backgrounds</a></li>
313+
<li><a href="https://github.com/hakimel/reveal.js#keyboard-bindings">Custom keyboard bindings</a></li>
314+
</ul>
315+
</section>
316+
317+
<section style="text-align: left;">
318+
<h1>THE END</h1>
319+
<p>
320+
- <a href="http://slides.com">Try the online editor</a> <br>
321+
- <a href="https://github.com/hakimel/reveal.js">Source code &amp; documentation</a>
322+
</p>
323+
</section>

Diff for: ‎css/main.css

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
img {
2+
border: 0 !important;
3+
box-shadow: none !important;
4+
}

0 commit comments

Comments
 (0)