| <!DOCTYPE html> |
| |
| <!-- |
| Google HTML5 slide template |
| |
| Authors: Luke Mahé (code) |
| Marcin Wichary (code and design) |
| |
| Dominic Mazzoni (browser compatibility) |
| Charles Chen (ChromeVox support) |
| John Arthorne (Eclipse template) |
| |
| URL: http://code.google.com/p/html5slides/ |
| --> |
| |
| <html> |
| <head> |
| <title>Presentation</title> |
| |
| <meta charset='utf-8'> |
| <script |
| src='http://eclipse.org/eclipse/presentation/html/slides.js'></script> |
| <style> |
| /* Your individual styles here, or just use inline styles if that's |
| what you want. */ |
| |
| |
| </style> |
| </head> |
| |
| |
| <body style='display: none;'> |
| |
| <section class='slides layout-regular template-eclipse'> |
| |
| <!-- Your slides (<article>s) go here. Delete or comment out the |
| slides below. --> |
| |
| |
| <article class='biglogo'> |
| </article> |
| |
| <article> |
| <h1> |
| Title Goes Here |
| <br> |
| Up To Two Lines |
| </h1> |
| <p> |
| Author |
| <br> |
| March, 2012 |
| </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> |
| <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 a table |
| </h3> |
| |
| <table> |
| <tr> |
| <th> |
| Name |
| </th> |
| <th> |
| Occupation |
| </th> |
| </tr> |
| <tr> |
| <td> |
| Luke Mahé |
| </td> |
| <td> |
| V.P. of Keepin It Real |
| </td> |
| </tr> |
| <tr> |
| <td> |
| Marcin Wichary |
| </td> |
| <td> |
| The Michael Bay of Doodles |
| </td> |
| </tr> |
| </table> |
| </article> |
| |
| <article class='smaller'> |
| <h3> |
| Slide with a table (smaller text) |
| </h3> |
| |
| <table> |
| <tr> |
| <th> |
| Name |
| </th> |
| <th> |
| Occupation |
| </th> |
| </tr> |
| <tr> |
| <td> |
| Luke Mahé |
| </td> |
| <td> |
| V.P. of Keepin It Real |
| </td> |
| </tr> |
| <tr> |
| <td> |
| Marcin Wichary |
| </td> |
| <td> |
| The Michael Bay of Doodles |
| </td> |
| </tr> |
| </table> |
| </article> |
| |
| <article> |
| <h3> |
| Styles |
| </h3> |
| <ul> |
| <li> |
| <span class='red'>class="red"</span> |
| </li> |
| <li> |
| <span class='blue'>class="blue"</span> |
| </li> |
| <li> |
| <span class='green'>class="green"</span> |
| </li> |
| <li> |
| <span class='yellow'>class="yellow"</span> |
| </li> |
| <li> |
| <span class='black'>class="black"</span> |
| </li> |
| <li> |
| <span class='white'>class="white"</span> |
| </li> |
| <li> |
| <b>bold</b> and <i>italic</i> |
| </li> |
| </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> |
| <script type='text/javascript'> |
| // Say hello world until the user starts questioning |
| // the meaningfulness of their existence. |
| function helloWorld(world) { |
| for (var i = 42; --i >= 0;) { |
| alert('Hello ' + String(world)); |
| } |
| } |
| </script> |
| <style> |
| p { color: pink } |
| b { color: blue } |
| u { color: 'umber' } |
| </style> |
| </pre> |
| </section> |
| </article> |
| |
| <article class='smaller'> |
| <h3> |
| This slide has some code (small font) |
| </h3> |
| <section> |
| <pre> |
| <script type='text/javascript'> |
| // Say hello world until the user starts questioning |
| // the meaningfulness of their existence. |
| function helloWorld(world) { |
| for (var i = 42; --i >= 0;) { |
| alert('Hello ' + String(world)); |
| } |
| } |
| </script> |
| <style> |
| p { color: pink } |
| b { color: blue } |
| u { color: 'umber' } |
| </style> |
| </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://eclipse.org/'></iframe> |
| </article> |
| |
| <article class='nobackground'> |
| <iframe src='http://eclipse.org/'></iframe> |
| </article> |
| |
| <article class='fill'> |
| <h3> |
| Full-slide embed with (optional) slide title on top |
| </h3> |
| <iframe src='http://eclipse.org/'></iframe> |
| </article> |
| |
| <article> |
| <h3> |
| Thank you! |
| </h3> |
| |
| <ul> |
| <li> |
| <a href='http://www.eclipse.org'>eclipse.org</a> |
| </li> |
| </ul> |
| </article> |
| |
| </section> |
| |
| </body> |
| </html> |