Commit 96b26514 authored by Hakim El Hattab's avatar Hakim El Hattab
Browse files

default content update; remove image slide, add two new slides

parent b133468f
......@@ -617,7 +617,7 @@ The framework comes with a few different themes included:
- simple: White background, black 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
<link rel="stylesheet" href="css/theme/black.css" id="theme">
......
......@@ -53,10 +53,6 @@
<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.
</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>
<!-- Example of nested vertical slides -->
......@@ -184,27 +180,6 @@
</p>
</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 data-background="#dddddd">
<h2>Slide Backgrounds</h2>
......@@ -247,6 +222,27 @@ Reveal.addEventListener( 'customevent', function() {
<pre><code style="word-wrap: break-word;">&lt;section data-background-transition="zoom"&gt;</code></pre>
</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 &lt; 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>
<h2>Marvelous List</h2>
<ul>
......@@ -308,27 +304,6 @@ Reveal.addEventListener( 'customevent', function() {
</blockquote>
</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 &lt; 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>
<h2>Intergalactic Interconnections</h2>
<p>
......@@ -338,10 +313,13 @@ function linkify( selector ) {
</section>
<section>
<h2>Spectacular image!</h2>
<a href="http://lab.hakim.se/meny/" target="_blank">
<img width="320" height="299" data-src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny">
</a>
<h2>Speaker View</h2>
<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>
<p>Press the <em>S</em> key to try it out.</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>
......@@ -353,6 +331,27 @@ function linkify( selector ) {
</script>
</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>
<h2>Take a Moment</h2>
<p>
......@@ -360,6 +359,15 @@ function linkify( selector ) {
</p>
</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>
<h2>Stellar Links</h2>
<ul>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment