slides.html

<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 Mahe
      <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 Mahe
      <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>