mirror of https://github.com/perkeep/perkeep.git
367 lines
8.5 KiB
HTML
367 lines
8.5 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
|||
|
<!--
|
|||
|
Google I/O 2011 HTML slides template
|
|||
|
|
|||
|
Authors: Luke Mahé (code)
|
|||
|
Marcin Wichary (code and design)
|
|||
|
Dominic Mazzoni (browser compatibility)
|
|||
|
Charles Chen (ChromeVox support)
|
|||
|
|
|||
|
URL: http://code.google.com/p/io-2011-slides/
|
|||
|
-->
|
|||
|
|
|||
|
<html>
|
|||
|
<head>
|
|||
|
<title>Camlistore</title>
|
|||
|
|
|||
|
<meta charset='utf-8' />
|
|||
|
<script src='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'>
|
|||
|
|
|||
|
<!-- Your slides (<article>s) go here. Delete or comment out the
|
|||
|
slides below. -->
|
|||
|
|
|||
|
<article>
|
|||
|
<h1>
|
|||
|
Camlistore
|
|||
|
</h1>
|
|||
|
<p>
|
|||
|
Brad Fitzpatrick
|
|||
|
<br>
|
|||
|
2011-05-07
|
|||
|
</p>
|
|||
|
</article>
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
<!-- END -->
|
|||
|
|
|||
|
<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>
|
|||
|
<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://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>
|