default content update; remove image slide, add two new slides
This commit is contained in:
parent
b133468f3e
commit
96b26514e6
@ -617,7 +617,7 @@ The framework comes with a few different themes included:
|
|||||||
- simple: White background, black text, blue links
|
- simple: White background, black text, blue links
|
||||||
- solarized: Cream-colored background, dark green text, blue links
|
- solarized: Cream-colored background, dark green text, blue links
|
||||||
|
|
||||||
Each theme is available as a separate stylesheet. To change theme you will need to replace **default** below with your desired theme name in index.html:
|
Each theme is available as a separate stylesheet. To change theme you will need to replace **black** below with your desired theme name in index.html:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<link rel="stylesheet" href="css/theme/black.css" id="theme">
|
<link rel="stylesheet" href="css/theme/black.css" id="theme">
|
||||||
|
108
index.html
108
index.html
@ -53,10 +53,6 @@
|
|||||||
<p>
|
<p>
|
||||||
reveal.js is a framework that enables you to create beautiful presentations using HTML. This demo presentation will tell you more about what you can do with it.
|
reveal.js is a framework that enables you to create beautiful presentations using HTML. This demo presentation will tell you more about what you can do with it.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<aside class="notes">
|
|
||||||
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).
|
|
||||||
</aside>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Example of nested vertical slides -->
|
<!-- Example of nested vertical slides -->
|
||||||
@ -184,27 +180,6 @@
|
|||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Global State</h2>
|
|
||||||
<p>
|
|
||||||
Set <code>data-state="something"</code> on a slide and <code>"something"</code>
|
|
||||||
will be added as a class to the document element when the slide is open. This lets you
|
|
||||||
apply broader style changes, like switching the page background.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section data-state="customevent">
|
|
||||||
<h2>State Events</h2>
|
|
||||||
<p>
|
|
||||||
Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
|
|
||||||
</p>
|
|
||||||
<pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
|
|
||||||
Reveal.addEventListener( 'customevent', function() {
|
|
||||||
console.log( '"customevent" has fired' );
|
|
||||||
} );
|
|
||||||
</code></pre>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<section data-background="#dddddd">
|
<section data-background="#dddddd">
|
||||||
<h2>Slide Backgrounds</h2>
|
<h2>Slide Backgrounds</h2>
|
||||||
@ -247,6 +222,27 @@ Reveal.addEventListener( 'customevent', function() {
|
|||||||
<pre><code style="word-wrap: break-word;"><section data-background-transition="zoom"></code></pre>
|
<pre><code style="word-wrap: break-word;"><section data-background-transition="zoom"></code></pre>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Pretty Code</h2>
|
||||||
|
<pre><code data-trim contenteditable>
|
||||||
|
function linkify( selector ) {
|
||||||
|
if( supports3DTransforms ) {
|
||||||
|
|
||||||
|
var nodes = document.querySelectorAll( selector );
|
||||||
|
|
||||||
|
for( var i = 0, len = nodes.length; i < len; i++ ) {
|
||||||
|
var node = nodes[i];
|
||||||
|
|
||||||
|
if( !node.className ) {
|
||||||
|
node.className += ' roll';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Marvelous List</h2>
|
<h2>Marvelous List</h2>
|
||||||
<ul>
|
<ul>
|
||||||
@ -308,27 +304,6 @@ Reveal.addEventListener( 'customevent', function() {
|
|||||||
</blockquote>
|
</blockquote>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Pretty Code</h2>
|
|
||||||
<pre><code data-trim contenteditable>
|
|
||||||
function linkify( selector ) {
|
|
||||||
if( supports3DTransforms ) {
|
|
||||||
|
|
||||||
var nodes = document.querySelectorAll( selector );
|
|
||||||
|
|
||||||
for( var i = 0, len = nodes.length; i < len; i++ ) {
|
|
||||||
var node = nodes[i];
|
|
||||||
|
|
||||||
if( !node.className ) {
|
|
||||||
node.className += ' roll';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</code></pre>
|
|
||||||
<p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Intergalactic Interconnections</h2>
|
<h2>Intergalactic Interconnections</h2>
|
||||||
<p>
|
<p>
|
||||||
@ -338,10 +313,13 @@ function linkify( selector ) {
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Spectacular image!</h2>
|
<h2>Speaker View</h2>
|
||||||
<a href="http://lab.hakim.se/meny/" target="_blank">
|
<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>
|
||||||
<img width="320" height="299" data-src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny">
|
<p>Press the <em>S</em> key to try it out.</p>
|
||||||
</a>
|
|
||||||
|
<aside class="notes">
|
||||||
|
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).
|
||||||
|
</aside>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
@ -353,6 +331,27 @@ function linkify( selector ) {
|
|||||||
</script>
|
</script>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Global State</h2>
|
||||||
|
<p>
|
||||||
|
Set <code>data-state="something"</code> on a slide and <code>"something"</code>
|
||||||
|
will be added as a class to the document element when the slide is open. This lets you
|
||||||
|
apply broader style changes, like switching the page background.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section data-state="customevent">
|
||||||
|
<h2>State Events</h2>
|
||||||
|
<p>
|
||||||
|
Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
|
||||||
|
</p>
|
||||||
|
<pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
|
||||||
|
Reveal.addEventListener( 'customevent', function() {
|
||||||
|
console.log( '"customevent" has fired' );
|
||||||
|
} );
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Take a Moment</h2>
|
<h2>Take a Moment</h2>
|
||||||
<p>
|
<p>
|
||||||
@ -360,6 +359,15 @@ function linkify( selector ) {
|
|||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Much more</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Right-to-left support</li>
|
||||||
|
<li><a href="https://github.com/hakimel/reveal.js#auto-sliding">Auto-progression</a></li>
|
||||||
|
<li><a href="https://github.com/hakimel/reveal.js#parallax-background">Parallax backgrounds</a></li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Stellar Links</h2>
|
<h2>Stellar Links</h2>
|
||||||
<ul>
|
<ul>
|
||||||
|
Loading…
Reference in New Issue
Block a user