|
0
|
1 <!DOCTYPE html>
|
|
|
2
|
|
|
3 <!--
|
|
|
4 Google HTML5 slide template
|
|
|
5
|
|
|
6 Authors: Luke Mahé (code)
|
|
|
7 Marcin Wichary (code and design)
|
|
|
8
|
|
|
9 Dominic Mazzoni (browser compatibility)
|
|
|
10 Charles Chen (ChromeVox support)
|
|
|
11
|
|
|
12 URL: http://code.google.com/p/html5slides/
|
|
|
13 -->
|
|
|
14
|
|
|
15 <html>
|
|
|
16 <head>
|
|
|
17 <title>Presentation</title>
|
|
|
18
|
|
|
19 <meta charset='utf-8'>
|
|
|
20 <script
|
|
|
21 src='http://html5slides.googlecode.com/svn/trunk/slides.js'></script>
|
|
|
22 </head>
|
|
|
23
|
|
|
24 <style>
|
|
|
25 /* Your individual styles here, or just use inline styles if that’s
|
|
|
26 what you want. */
|
|
|
27
|
|
|
28
|
|
|
29 </style>
|
|
|
30
|
|
|
31 <body style='display: none'>
|
|
|
32
|
|
|
33 <section class='slides layout-regular template-default'>
|
|
|
34
|
|
|
35 <!-- Your slides (<article>s) go here. Delete or comment out the
|
|
|
36 slides below. -->
|
|
|
37
|
|
|
38
|
|
|
39
|
|
|
40 <article class='biglogo'>
|
|
|
41 </article>
|
|
|
42
|
|
|
43 <article>
|
|
|
44 <h1>
|
|
|
45 Title Goes Here Up
|
|
|
46 <br>
|
|
|
47 To Two Lines
|
|
|
48 </h1>
|
|
|
49 <p>
|
|
|
50 Sergey Brin
|
|
|
51 <br>
|
|
|
52 May 10, 2011
|
|
|
53 </p>
|
|
|
54 </article>
|
|
|
55
|
|
|
56 <article>
|
|
|
57 <p>
|
|
|
58 This is a slide with just text. This is a slide with just text.
|
|
|
59 This is a slide with just text. This is a slide with just text.
|
|
|
60 This is a slide with just text. This is a slide with just text.
|
|
|
61 </p>
|
|
|
62 <p>
|
|
|
63 There is more text just underneath.
|
|
|
64 </p>
|
|
|
65 </article>
|
|
|
66
|
|
|
67 <article>
|
|
|
68 <h3>
|
|
|
69 Simple slide with header and text
|
|
|
70 </h3>
|
|
|
71 <p>
|
|
|
72 This is a slide with just text. This is a slide with just text.
|
|
|
73 This is a slide with just text. This is a slide with just text.
|
|
|
74 This is a slide with just text. This is a slide with just text.
|
|
|
75 </p>
|
|
|
76 <p>
|
|
|
77 There is more text just underneath with a <code>code sample: 5px</code>.
|
|
|
78 </p>
|
|
|
79 </article>
|
|
|
80
|
|
|
81 <article class='smaller'>
|
|
|
82 <h3>
|
|
|
83 Simple slide with header and text (small font)
|
|
|
84 </h3>
|
|
|
85 <p>
|
|
|
86 This is a slide with just text. This is a slide with just text.
|
|
|
87 This is a slide with just text. This is a slide with just text.
|
|
|
88 This is a slide with just text. This is a slide with just text.
|
|
|
89 </p>
|
|
|
90 <p>
|
|
|
91 There is more text just underneath with a <code>code sample: 5px</code>.
|
|
|
92 </p>
|
|
|
93 </article>
|
|
|
94
|
|
|
95 <article>
|
|
|
96 <h3>
|
|
|
97 Slide with bullet points and a longer title, just because we
|
|
|
98 can make it longer
|
|
|
99 </h3>
|
|
|
100 <ul>
|
|
|
101 <li>
|
|
|
102 Use this template to create your presentation
|
|
|
103 </li>
|
|
|
104 <li>
|
|
|
105 Use the provided color palette, box and arrow graphics, and
|
|
|
106 chart styles
|
|
|
107 </li>
|
|
|
108 <li>
|
|
|
109 Instructions are provided to assist you in using this
|
|
|
110 presentation template effectively
|
|
|
111 </li>
|
|
|
112 <li>
|
|
|
113 At all times strive to maintain Google's corporate look and feel
|
|
|
114 </li>
|
|
|
115 </ul>
|
|
|
116 </article>
|
|
|
117
|
|
|
118 <article>
|
|
|
119 <h3>
|
|
|
120 Slide with bullet points that builds
|
|
|
121 </h3>
|
|
|
122 <ul class="build">
|
|
|
123 <li>
|
|
|
124 This is an example of a list
|
|
|
125 </li>
|
|
|
126 <li>
|
|
|
127 The list items fade in
|
|
|
128 </li>
|
|
|
129 <li>
|
|
|
130 Last one!
|
|
|
131 </li>
|
|
|
132 </ul>
|
|
|
133
|
|
|
134 <div class="build">
|
|
|
135 <p>Any element with child nodes can build.</p>
|
|
|
136 <p>It doesn't have to be a list.</p>
|
|
|
137 </div>
|
|
|
138 </article>
|
|
|
139
|
|
|
140 <article class='smaller'>
|
|
|
141 <h3>
|
|
|
142 Slide with bullet points (small font)
|
|
|
143 </h3>
|
|
|
144 <ul>
|
|
|
145 <li>
|
|
|
146 Use this template to create your presentation
|
|
|
147 <li>
|
|
|
148 Use the provided color palette, box and arrow graphics, and
|
|
|
149 chart styles
|
|
|
150 <li>
|
|
|
151 Instructions are provided to assist you in using this
|
|
|
152 presentation template effectively
|
|
|
153 <li>
|
|
|
154 At all times strive to maintain Google's corporate look and feel
|
|
|
155 </ul>
|
|
|
156 </article>
|
|
|
157
|
|
|
158 <article>
|
|
|
159 <h3>
|
|
|
160 Slide with a table
|
|
|
161 </h3>
|
|
|
162
|
|
|
163 <table>
|
|
|
164 <tr>
|
|
|
165 <th>
|
|
|
166 Name
|
|
|
167 <th>
|
|
|
168 Occupation
|
|
|
169 <tr>
|
|
|
170 <td>
|
|
|
171 Luke Mahé
|
|
|
172 <td>
|
|
|
173 V.P. of Keepin’ It Real
|
|
|
174 <tr>
|
|
|
175 <td>
|
|
|
176 Marcin Wichary
|
|
|
177 <td>
|
|
|
178 The Michael Bay of Doodles
|
|
|
179 </table>
|
|
|
180 </article>
|
|
|
181
|
|
|
182 <article class='smaller'>
|
|
|
183 <h3>
|
|
|
184 Slide with a table (smaller text)
|
|
|
185 </h3>
|
|
|
186
|
|
|
187 <table>
|
|
|
188 <tr>
|
|
|
189 <th>
|
|
|
190 Name
|
|
|
191 <th>
|
|
|
192 Occupation
|
|
|
193 <tr>
|
|
|
194 <td>
|
|
|
195 Luke Mahé
|
|
|
196 <td>
|
|
|
197 V.P. of Keepin’ It Real
|
|
|
198 <tr>
|
|
|
199 <td>
|
|
|
200 Marcin Wichary
|
|
|
201 <td>
|
|
|
202 The Michael Bay of Doodles
|
|
|
203 </table>
|
|
|
204 </article>
|
|
|
205
|
|
|
206 <article>
|
|
|
207 <h3>
|
|
|
208 Styles
|
|
|
209 </h3>
|
|
|
210 <ul>
|
|
|
211 <li>
|
|
|
212 <span class='red'>class="red"</span>
|
|
|
213 <li>
|
|
|
214 <span class='blue'>class="blue"</span>
|
|
|
215 <li>
|
|
|
216 <span class='green'>class="green"</span>
|
|
|
217 <li>
|
|
|
218 <span class='yellow'>class="yellow"</span>
|
|
|
219 <li>
|
|
|
220 <span class='black'>class="black"</span>
|
|
|
221 <li>
|
|
|
222 <span class='white'>class="white"</span>
|
|
|
223 <li>
|
|
|
224 <b>bold</b> and <i>italic</i>
|
|
|
225 </ul>
|
|
|
226 </article>
|
|
|
227
|
|
|
228 <article>
|
|
|
229 <h2>
|
|
|
230 Segue slide
|
|
|
231 </h2>
|
|
|
232 </article>
|
|
|
233
|
|
|
234 <article>
|
|
|
235 <h3>
|
|
|
236 Slide with an image
|
|
|
237 </h3>
|
|
|
238 <p>
|
|
|
239 <img style='height: 500px' src='images/example-graph.png'>
|
|
|
240 </p>
|
|
|
241 <div class='source'>
|
|
|
242 Source: Sergey Brin
|
|
|
243 </div>
|
|
|
244 </article>
|
|
|
245
|
|
|
246 <article>
|
|
|
247 <h3>
|
|
|
248 Slide with an image (centered)
|
|
|
249 </h3>
|
|
|
250 <p>
|
|
|
251 <img class='centered' style='height: 500px' src='images/example-graph.png'>
|
|
|
252 </p>
|
|
|
253 <div class='source'>
|
|
|
254 Source: Larry Page
|
|
|
255 </div>
|
|
|
256 </article>
|
|
|
257
|
|
|
258 <article class='fill'>
|
|
|
259 <h3>
|
|
|
260 Image filling the slide (with optional header)
|
|
|
261 </h3>
|
|
|
262 <p>
|
|
|
263 <img src='images/example-cat.jpg'>
|
|
|
264 </p>
|
|
|
265 <div class='source white'>
|
|
|
266 Source: Eric Schmidt
|
|
|
267 </div>
|
|
|
268 </article>
|
|
|
269
|
|
|
270 <article>
|
|
|
271 <h3>
|
|
|
272 This slide has some code
|
|
|
273 </h3>
|
|
|
274 <section>
|
|
|
275 <pre>
|
|
|
276 <script type='text/javascript'>
|
|
|
277 // Say hello world until the user starts questioning
|
|
|
278 // the meaningfulness of their existence.
|
|
|
279 function helloWorld(world) {
|
|
|
280 for (var i = 42; --i >= 0;) {
|
|
|
281 alert('Hello ' + String(world));
|
|
|
282 }
|
|
|
283 }
|
|
|
284 </script>
|
|
|
285 <style>
|
|
|
286 p { color: pink }
|
|
|
287 b { color: blue }
|
|
|
288 u { color: 'umber' }
|
|
|
289 </style>
|
|
|
290 </pre>
|
|
|
291 </section>
|
|
|
292 </article>
|
|
|
293
|
|
|
294 <article class='smaller'>
|
|
|
295 <h3>
|
|
|
296 This slide has some code (small font)
|
|
|
297 </h3>
|
|
|
298 <section>
|
|
|
299 <pre>
|
|
|
300 <script type='text/javascript'>
|
|
|
301 // Say hello world until the user starts questioning
|
|
|
302 // the meaningfulness of their existence.
|
|
|
303 function helloWorld(world) {
|
|
|
304 for (var i = 42; --i >= 0;) {
|
|
|
305 alert('Hello ' + String(world));
|
|
|
306 }
|
|
|
307 }
|
|
|
308 </script>
|
|
|
309 <style>
|
|
|
310 p { color: pink }
|
|
|
311 b { color: blue }
|
|
|
312 u { color: 'umber' }
|
|
|
313 </style>
|
|
|
314 </pre>
|
|
|
315 </section>
|
|
|
316 </article>
|
|
|
317
|
|
|
318 <article>
|
|
|
319 <q>
|
|
|
320 The best way to predict the future is to invent it.
|
|
|
321 </q>
|
|
|
322 <div class='author'>
|
|
|
323 Alan Kay
|
|
|
324 </div>
|
|
|
325 </article>
|
|
|
326
|
|
|
327 <article class='smaller'>
|
|
|
328 <q>
|
|
|
329 A distributed system is one in which the failure of a computer
|
|
|
330 you didn’t even know existed can render your own computer unusable.
|
|
|
331 </q>
|
|
|
332 <div class='author'>
|
|
|
333 Leslie Lamport
|
|
|
334 </div>
|
|
|
335 </article>
|
|
|
336
|
|
|
337 <article class='nobackground'>
|
|
|
338 <h3>
|
|
|
339 A slide with an embed + title
|
|
|
340 </h3>
|
|
|
341
|
|
|
342 <iframe src='http://www.google.com/doodle4google/history.html'></iframe>
|
|
|
343 </article>
|
|
|
344
|
|
|
345 <article class='nobackground'>
|
|
|
346 <iframe src='http://www.google.com/doodle4google/history.html'></iframe>
|
|
|
347 </article>
|
|
|
348
|
|
|
349 <article class='fill'>
|
|
|
350 <h3>
|
|
|
351 Full-slide embed with (optional) slide title on top
|
|
|
352 </h3>
|
|
|
353 <iframe src='http://www.google.com/doodle4google/history.html'></iframe>
|
|
|
354 </article>
|
|
|
355
|
|
|
356 <article>
|
|
|
357 <h3>
|
|
|
358 Thank you!
|
|
|
359 </h3>
|
|
|
360
|
|
|
361 <ul>
|
|
|
362 <li>
|
|
|
363 <a href='http://www.google.com'>google.com</a>
|
|
|
364 </ul>
|
|
|
365 </article>
|
|
|
366
|
|
|
367 </section>
|
|
|
368
|
|
|
369 </body>
|
|
|
370 </html>
|
