topical media & game development

talk show tell print

mobile-query-three-plugins-flamethrower-examples-slides-template-index.htm / htm



  <!DOCTYPE html>
  
  <!--
    Google HTML5 slide template
  
    Authors: Luke Mahé (code)
             Marcin Wichary (code and design)
             
             Dominic Mazzoni (browser compatibility)
             Charles Chen (ChromeVox support)
  
    URL: http://code.google.com/p/html5slides/
  -->
  
  <html>
    <head>
      <title>Presentation</title>
  
      <meta charset='utf-8'>
      <script
        src='http://html5slides.googlecode.com/svn/trunk/slides.js'></script>
    </head>
    
    <style>
      /* Your individual styles here, or just use inline styles if that’s
         what you want. */
      
      
    </style>
  
    <body style='display: none'>
  
      <section class='slides layout-regular template-default'>
        
        <!-- Your slides (<article>s) go here. Delete or comment out the
             slides below. -->
          
          
        
        <article class='biglogo'>
        </article>
  
        <article>
          <h1>
            Title Goes Here Up
            <br>
            To Two Lines
          </h1>
          <p>
            Sergey Brin
            <br>
            May 10, 2011
          </p>
        </article>
        
        <article>
          <p>
            This is a slide with just text. This is a slide with just text.
            This is a slide with just text. This is a slide with just text.
            This is a slide with just text. This is a slide with just text.
          </p>
          <p>
            There is more text just underneath.
          </p>
        </article>
  
        <article>
          <h3>
            Simple slide with header and text
          </h3>
          <p>
            This is a slide with just text. This is a slide with just text.
            This is a slide with just text. This is a slide with just text.
            This is a slide with just text. This is a slide with just text.
          </p>
          <p>
            There is more text just underneath with a <code>code sample: 5px</code>.
          </p>
        </article>
  
        <article class='smaller'>
          <h3>
            Simple slide with header and text (small font)
          </h3>
          <p>
            This is a slide with just text. This is a slide with just text.
            This is a slide with just text. This is a slide with just text.
            This is a slide with just text. This is a slide with just text.
          </p>
          <p>
            There is more text just underneath with a <code>code sample: 5px</code>.
          </p>
        </article>
  
        <article>
          <h3>
            Slide with bullet points and a longer title, just because we
            can make it longer
          </h3>
          <ul>
            <li>
              Use this template to create your presentation
            </li>
            <li>
              Use the provided color palette, box and arrow graphics, and
              chart styles
            </li>
            <li>
              Instructions are provided to assist you in using this
              presentation template effectively
            </li>
            <li>
              At all times strive to maintain Google's corporate look and feel
            </li>
          </ul>
        </article>
  
        <article>
          <h3>
            Slide with bullet points that builds
          </h3>
          <ul class="build">
            <li>
              This is an example of a list
            </li>
            <li>
              The list items fade in
            </li>
            <li>
              Last one!
            </li>
          </ul>
  
          <div class="build">
            <p>Any element with child nodes can build.</p>
            <p>It doesn't have to be a list.</p>
          </div>
        </article>
  
        <article class='smaller'>
          <h3>
            Slide with bullet points (small font)
          </h3>
          <ul>
            <li>
              Use this template to create your presentation
            <li>
              Use the provided color palette, box and arrow graphics, and
              chart styles
            <li>
              Instructions are provided to assist you in using this
              presentation template effectively
            <li>
              At all times strive to maintain Google's corporate look and feel
          </ul>
        </article>
  
        <article>
          <h3>
            Slide with a table
          </h3>
          
          <table>
            <tr>
              <th>
                Name
              <th>
                Occupation
            <tr>
              <td>
                Luke Mahé
              <td>
                V.P. of Keepin’ It Real
            <tr>
              <td>
                Marcin Wichary
              <td>
                The Michael Bay of Doodles
          </table>
        </article>
        
        <article class='smaller'>
          <h3>
            Slide with a table (smaller text)
          </h3>
          
          <table>
            <tr>
              <th>
                Name
              <th>
                Occupation
            <tr>
              <td>
                Luke Mahé
              <td>
                V.P. of Keepin’ It Real
            <tr>
              <td>
                Marcin Wichary
              <td>
                The Michael Bay of Doodles
          </table>
        </article>
        
        <article>
          <h3>
            Styles
          </h3>
          <ul>
            <li>
              <span class='red'>class="red"</span>
            <li>
              <span class='blue'>class="blue"</span>
            <li>
              <span class='green'>class="green"</span>
            <li>
              <span class='yellow'>class="yellow"</span>
            <li>
              <span class='black'>class="black"</span>
            <li>
              <span class='white'>class="white"</span>
            <li>
              <b>bold</b> and <i>italic</i>
          </ul>
        </article>
        
        <article>
          <h2>
            Segue slide
          </h2>
        </article>
  
        <article>
          <h3>
            Slide with an image
          </h3>
          <p>
            <img style='height: 500px' src='images/example-graph.png'>
          </p>
          <div class='source'>
            Source: Sergey Brin
          </div>
        </article>
  
        <article>
          <h3>
            Slide with an image (centered)
          </h3>
          <p>
            <img class='centered' style='height: 500px' src='images/example-graph.png'>
          </p>
          <div class='source'>
            Source: Larry Page
          </div>
        </article>
  
        <article class='fill'>
          <h3>
            Image filling the slide (with optional header)
          </h3>
          <p>
            <img src='images/example-cat.jpg'>
          </p>
          <div class='source white'>
            Source: Eric Schmidt
          </div>
        </article>
  
        <article>
          <h3>
            This slide has some code
          </h3>
          <section>
          <pre>
  &lt;script type='text/javascript'&gt;
    // Say hello world until the user starts questioning
    // the meaningfulness of their existence.
    function helloWorld(world) {
      for (var i = 42; --i &gt;= 0;) {
        alert('Hello ' + String(world));
      }
    }
  &lt;/script&gt;
  &lt;style&gt;
    p { color: pink }
    b { color: blue }
    u { color: 'umber' }
  &lt;/style&gt;
  </pre>
          </section>
        </article>
        
        <article class='smaller'>
          <h3>
            This slide has some code (small font)
          </h3>
          <section>
          <pre>
  &lt;script type='text/javascript'&gt;
    // Say hello world until the user starts questioning
    // the meaningfulness of their existence.
    function helloWorld(world) {
      for (var i = 42; --i &gt;= 0;) {
        alert('Hello ' + String(world));
      }
    }
  &lt;/script&gt;
  &lt;style&gt;
    p { color: pink }
    b { color: blue }
    u { color: 'umber' }
  &lt;/style&gt;
  </pre>
          </section>
        </article>
        
        <article>
          <q>
            The best way to predict the future is to invent it.
          </q>
          <div class='author'>
            Alan Kay
          </div>
        </article>
        
        <article class='smaller'>
          <q>
            A distributed system is one in which the failure of a computer 
            you didn’t even know existed can render your own computer unusable.
          </q>
          <div class='author'>
            Leslie Lamport
          </div>
        </article>
        
        <article class='nobackground'>
          <h3>
            A slide with an embed + title
          </h3>
          
          <iframe src='http://www.google.com/doodle4google/history.html'></iframe>
        </article>
  
        <article class='nobackground'>
          <iframe src='http://www.google.com/doodle4google/history.html'></iframe>
        </article>
  
        <article class='fill'>
          <h3>
            Full-slide embed with (optional) slide title on top
          </h3>
          <iframe src='http://www.google.com/doodle4google/history.html'></iframe>
        </article>
        
        <article>
          <h3>
            Thank you!
          </h3>
          
          <ul>
            <li>
              <a href='http://www.google.com'>google.com</a>
          </ul>
        </article>
  
      </section>
  
    </body>
  </html>
  


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.