Skip to content

Commit

Permalink
--
Browse files Browse the repository at this point in the history 
git-svn-id: http://html5slides.googlecode.com/svn/trunk@3 5963eb91-a1a4-c111-6e9c-cdd99a89fa83
  • Loading branch information
mwichary@google.com committed May 20, 2011
1 parent 19d466c commit 8235028
Show file tree
Hide file tree
Showing 5 changed files with 369 additions and 0 deletions.
Binary file added images/colorbar.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/googleio-logo.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added template/images/example-cat.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added template/images/example-graph.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
369 changes: 369 additions & 0 deletions template/index.html
View file
@@ -0,0 +1,369 @@
<!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>Google I/O</title>

<meta charset='utf-8' />
<script
src='http://io-2011-slides.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'>

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

0 comments on commit 8235028

Please sign in to comment.