camshaft/example-slide.html

## example-slide.html
<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">

    <title>Nujii Studio</title>

    <meta name="description" content="">
    <meta name="author" content="Scott Wall">

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

    <!-- Stylesheets -->
    <link rel="stylesheet" href="http://lab.hakim.se/reveal-js/css/reset.css">
    <link rel="stylesheet" href="http://lab.hakim.se/reveal-js/css/main.css">

  </head>

  <body>

    <div id="reveal">

      <!-- Used to fade in a background when a specific slide state is reached -->
      <div class="state-background"></div>

      <!-- Any section element inside of this container is displayed as a slide -->
      <div class="slides">
        <section>
          <!-- Slide 1 goes here -->
          <h2>Slide One Goes Here</h2>
        </section>


        <!-- Example of nested vertical slides -->
        <section>
          <section>
            <h2>Slide Two is a vertical slide!</h2>
          </section>
          <section>
            <h2>Basement Level 1</h2>
            <p>Press down or up to navigate.</p>
          </section>
          <section>
            <h2>Basement Level 2</h2>
          </section>
          <section>
            <h2>Basement Level 3</h2>
            <p>That's it, time to go back up.</p>
          </section>
        </section>

        <section>
          <!-- Last Slide -->
          <h2>The End</h2>
        </section>
      </div>

      <!-- The navigational controls UI -->
      <aside class="controls">
        <a class="left" href="#">&#x25C4;</a>
        <a class="right" href="#">&#x25BA;</a>
        <a class="up" href="#">&#x25B2;</a>
        <a class="down" href="#">&#x25BC;</a>
      </aside>

      <!-- Displays presentation progress, max value changes via JS to reflect # of slides -->
      <div class="progress"><span></span></div>

    </div>

    <script src="http://lab.hakim.se/reveal-js/js/reveal.js"></script>

    <script>
      // Parse the query string into a key/value object
      var query = {};
      location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
        query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
      } );


      // Fires each time a new slide is activated
      Reveal.addEventListener( 'slidechanged', function( event ) {
        // event.previousSlide, event.currentSlide, event.indexh, event.indexv
      } );

      Reveal.initialize({
        // Display controls in the bottom right corner
        controls: true,

        // Display a presentation progress bar
        progress: true,

        // If true; each slide will be pushed to the browser history
        history: true,

        // Loops the presentation, defaults to false
        loop: false,

        // Flags if mouse wheel navigation should be enabled
        mouseWheel: true,

        // Apply a 3D roll to links on hover
        rollingLinks: true,

        // UI style
        theme: query.theme || 'default', // default/neon

        // Transition style
        transition: query.transition || 'linear' // default/cube/page/concave/linear(2d)
      });

    </script>

  </body>
</html>
	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="utf-8">

	<title>Nujii Studio</title>

	<meta name="description" content="">
	<meta name="author" content="Scott Wall">

	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

	<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

	<!-- Stylesheets -->
	<link rel="stylesheet" href="http://lab.hakim.se/reveal-js/css/reset.css">
	<link rel="stylesheet" href="http://lab.hakim.se/reveal-js/css/main.css">

	</head>

	<body>

	<div id="reveal">

	<!-- Used to fade in a background when a specific slide state is reached -->
	<div class="state-background"></div>

	<!-- Any section element inside of this container is displayed as a slide -->
	<div class="slides">
	<section>
	<!-- Slide 1 goes here -->
	<h2>Slide One Goes Here</h2>
	</section>


	<!-- Example of nested vertical slides -->
	<section>
	<section>
	<h2>Slide Two is a vertical slide!</h2>
	</section>
	<section>
	<h2>Basement Level 1</h2>
	<p>Press down or up to navigate.</p>
	</section>
	<section>
	<h2>Basement Level 2</h2>
	</section>
	<section>
	<h2>Basement Level 3</h2>
	<p>That's it, time to go back up.</p>
	</section>
	</section>

	<section>
	<!-- Last Slide -->
	<h2>The End</h2>
	</section>
	</div>

	<!-- The navigational controls UI -->
	<aside class="controls">
	<a class="left" href="#">◄</a>
	<a class="right" href="#">►</a>
	<a class="up" href="#">▲</a>
	<a class="down" href="#">▼</a>
	</aside>

	<!-- Displays presentation progress, max value changes via JS to reflect # of slides -->
	<div class="progress"><span></span></div>

	</div>

	<script src="http://lab.hakim.se/reveal-js/js/reveal.js"></script>

	<script>
	// Parse the query string into a key/value object
	var query = {};
	location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
	query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
	} );


	// Fires each time a new slide is activated
	Reveal.addEventListener( 'slidechanged', function( event ) {
	// event.previousSlide, event.currentSlide, event.indexh, event.indexv
	} );

	Reveal.initialize({
	// Display controls in the bottom right corner
	controls: true,

	// Display a presentation progress bar
	progress: true,

	// If true; each slide will be pushed to the browser history
	history: true,

	// Loops the presentation, defaults to false
	loop: false,

	// Flags if mouse wheel navigation should be enabled
	mouseWheel: true,

	// Apply a 3D roll to links on hover
	rollingLinks: true,

	// UI style
	theme: query.theme \|\| 'default', // default/neon

	// Transition style
	transition: query.transition \|\| 'linear' // default/cube/page/concave/linear(2d)
	});

	</script>

	</body>
	</html>