|
31
|
1 <!DOCTYPE html>
|
|
|
2 <html>
|
|
|
3 <head>
|
|
|
4 <meta charset='utf-8'>
|
|
|
5 <title>Sample S6 Presentation</title>
|
|
|
6 <script src='slides.js'></script>
|
|
|
7 <style media='screen,projection'>
|
|
|
8 /****
|
|
|
9 * Add your styles here.
|
|
|
10 */
|
|
|
11
|
|
|
12 body { font-size: 175%; }
|
|
|
13
|
|
|
14 .step { color: silver; } /* or hide next steps e.g. .step { visibility: hidden; } */
|
|
|
15
|
|
|
16 .slide {
|
|
|
17 font-family: 'Open Sans', Arial, sans-serif;
|
|
|
18
|
|
|
19 color: rgb(102, 102, 102);
|
|
|
20 text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
|
|
|
21 }
|
|
|
22
|
|
|
23 .slide h1, .slide h2, .slide h3 {
|
|
|
24 color: rgb(51, 51, 51);
|
|
|
25 }
|
|
|
26
|
|
|
27 .slide pre {
|
|
|
28 font-family: 'Droid Sans Mono', 'Courier New', monospace;
|
|
|
29 font-size: 80%;
|
|
|
30
|
|
|
31 padding: 5px 10px;
|
|
|
32
|
|
|
33 margin-top: 40px;
|
|
|
34 margin-bottom: 40px;
|
|
|
35
|
|
|
36 color: black;
|
|
|
37 background: rgb(240, 240, 240);
|
|
|
38 border: 1px solid rgb(224, 224, 224);
|
|
|
39 box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);
|
|
|
40 overflow: hidden;
|
|
|
41 }
|
|
|
42
|
|
|
43 .slide code {
|
|
|
44 font-family: 'Droid Sans Mono', 'Courier New', monospace;
|
|
|
45 color: black;
|
|
|
46 }
|
|
|
47 </style>
|
|
|
48 </head>
|
|
|
49 <body>
|
|
|
50
|
|
|
51 <section class='slides'>
|
|
|
52 <!-- Add your slides here. Delete or comment out the slides below. -->
|
|
|
53
|
|
|
54 <article class='cover'>
|
|
|
55 <h1>
|
|
|
56 Title Goes Here Up
|
|
|
57 <br>
|
|
|
58 To Two Lines
|
|
|
59 </h1>
|
|
|
60 <p>
|
|
|
61 Carlos Ruby
|
|
|
62 <br>
|
|
|
63 November 11, 2011
|
|
|
64 </p>
|
|
|
65 </article>
|
|
|
66
|
|
|
67 <article>
|
|
|
68 <p>
|
|
|
69 This is a slide with just text. This is a slide with just text.
|
|
|
70 This is a slide with just text. This is a slide with just text.
|
|
|
71 This is a slide with just text. This is a slide with just text.
|
|
|
72 </p>
|
|
|
73 <p>
|
|
|
74 There is more text just underneath.
|
|
|
75 </p>
|
|
|
76 </article>
|
|
|
77
|
|
|
78 <article>
|
|
|
79 <h3>
|
|
|
80 Simple slide with header and text
|
|
|
81 </h3>
|
|
|
82 <p>
|
|
|
83 This is a slide with just text. This is a slide with just text.
|
|
|
84 This is a slide with just text. This is a slide with just text.
|
|
|
85 This is a slide with just text. This is a slide with just text.
|
|
|
86 </p>
|
|
|
87 <p>
|
|
|
88 There is more text just underneath with a <code>code sample: 5px</code>.
|
|
|
89 </p>
|
|
|
90 </article>
|
|
|
91
|
|
|
92 <article class='smaller'>
|
|
|
93 <h3>
|
|
|
94 Simple slide with header and text (small font)
|
|
|
95 </h3>
|
|
|
96 <p>
|
|
|
97 This is a slide with just text. This is a slide with just text.
|
|
|
98 This is a slide with just text. This is a slide with just text.
|
|
|
99 This is a slide with just text. This is a slide with just text.
|
|
|
100 </p>
|
|
|
101 <p>
|
|
|
102 There is more text just underneath with a <code>code sample: 5px</code>.
|
|
|
103 </p>
|
|
|
104 </article>
|
|
|
105
|
|
|
106 <article>
|
|
|
107 <h3>
|
|
|
108 Slide with bullet points and a longer title, just because we
|
|
|
109 can make it longer
|
|
|
110 </h3>
|
|
|
111 <ul>
|
|
|
112 <li>
|
|
|
113 Use this template to create your presentation
|
|
|
114 </li>
|
|
|
115 <li>
|
|
|
116 Another item here
|
|
|
117 </li>
|
|
|
118 <li>
|
|
|
119 Another item here
|
|
|
120 </li>
|
|
|
121 <li>
|
|
|
122 Another item here
|
|
|
123 </li>
|
|
|
124 </ul>
|
|
|
125 </article>
|
|
|
126
|
|
|
127 <article>
|
|
|
128 <h3>
|
|
|
129 Slide with bullet points that builds
|
|
|
130 </h3>
|
|
|
131 <ul class="build">
|
|
|
132 <li>
|
|
|
133 This is an example of a list
|
|
|
134 </li>
|
|
|
135 <li>
|
|
|
136 The list items fade in
|
|
|
137 </li>
|
|
|
138 <li>
|
|
|
139 Last one!
|
|
|
140 </li>
|
|
|
141 </ul>
|
|
|
142
|
|
|
143 <div class="build">
|
|
|
144 <p>Any element with child nodes can build.</p>
|
|
|
145 <p>It doesn't have to be a list.</p>
|
|
|
146 </div>
|
|
|
147 </article>
|
|
|
148
|
|
|
149 <article class='smaller'>
|
|
|
150 <h3>
|
|
|
151 Slide with bullet points (small font)
|
|
|
152 </h3>
|
|
|
153 <ul>
|
|
|
154 <li>
|
|
|
155 Use this template to create your presentation
|
|
|
156 </li>
|
|
|
157 <li>
|
|
|
158 Another item here
|
|
|
159 </li>
|
|
|
160 <li>
|
|
|
161 Another item here
|
|
|
162 </li>
|
|
|
163 <li>
|
|
|
164 Another item here
|
|
|
165 </li>
|
|
|
166 </ul>
|
|
|
167 </article>
|
|
|
168
|
|
|
169 <article>
|
|
|
170 <h3>
|
|
|
171 Slide with a table
|
|
|
172 </h3>
|
|
|
173
|
|
|
174 <table>
|
|
|
175 <tr>
|
|
|
176 <th>
|
|
|
177 Name
|
|
|
178 <th>
|
|
|
179 Occupation
|
|
|
180 <tr>
|
|
|
181 <td>
|
|
|
182 Luke Mahé
|
|
|
183 <td>
|
|
|
184 V.P. of Keepin’ It Real
|
|
|
185 <tr>
|
|
|
186 <td>
|
|
|
187 Marcin Wichary
|
|
|
188 <td>
|
|
|
189 The Michael Bay of Doodles
|
|
|
190 </table>
|
|
|
191 </article>
|
|
|
192
|
|
|
193 <article class='smaller'>
|
|
|
194 <h3>
|
|
|
195 Slide with a table (smaller text)
|
|
|
196 </h3>
|
|
|
197
|
|
|
198 <table>
|
|
|
199 <tr>
|
|
|
200 <th>
|
|
|
201 Name
|
|
|
202 <th>
|
|
|
203 Occupation
|
|
|
204 <tr>
|
|
|
205 <td>
|
|
|
206 Luke Mahé
|
|
|
207 <td>
|
|
|
208 V.P. of Keepin’ It Real
|
|
|
209 <tr>
|
|
|
210 <td>
|
|
|
211 Marcin Wichary
|
|
|
212 <td>
|
|
|
213 The Michael Bay of Doodles
|
|
|
214 </table>
|
|
|
215 </article>
|
|
|
216
|
|
|
217 <article>
|
|
|
218 <h2>
|
|
|
219 Segue slide
|
|
|
220 </h2>
|
|
|
221 </article>
|
|
|
222
|
|
|
223 <article>
|
|
|
224 <h3>
|
|
|
225 Slide with an image
|
|
|
226 </h3>
|
|
|
227 <p>
|
|
|
228 <img style='height: 500px' src='images/example-graph.png'>
|
|
|
229 </p>
|
|
|
230 <div class='source'>
|
|
|
231 Source: Carlos Ruby
|
|
|
232 </div>
|
|
|
233 </article>
|
|
|
234
|
|
|
235 <article>
|
|
|
236 <h3>
|
|
|
237 Slide with an image (centered)
|
|
|
238 </h3>
|
|
|
239 <p>
|
|
|
240 <img class='centered' style='height: 500px' src='images/example-graph.png'>
|
|
|
241 </p>
|
|
|
242 <div class='source'>
|
|
|
243 Source: Carlos Ruby
|
|
|
244 </div>
|
|
|
245 </article>
|
|
|
246
|
|
|
247 <article class='fill'>
|
|
|
248 <h3>
|
|
|
249 Image filling the slide (with optional header)
|
|
|
250 </h3>
|
|
|
251 <p>
|
|
|
252 <img src='images/example-cat.jpg'>
|
|
|
253 </p>
|
|
|
254 <div class='source white'>
|
|
|
255 Source: Carlos Ruby
|
|
|
256 </div>
|
|
|
257 </article>
|
|
|
258
|
|
|
259 <article>
|
|
|
260 <h3>
|
|
|
261 This slide has some code
|
|
|
262 </h3>
|
|
|
263 <section>
|
|
|
264 <pre>
|
|
|
265 # The Greeter class
|
|
|
266 class Greeter
|
|
|
267 def initialize(name)
|
|
|
268 @name = name.capitalize
|
|
|
269 end
|
|
|
270
|
|
|
271 def salute
|
|
|
272 puts "Hello #{@name}!"
|
|
|
273 end
|
|
|
274 end
|
|
|
275
|
|
|
276 # Create a new object
|
|
|
277 g = Greeter.new("world")
|
|
|
278
|
|
|
279 # Output "Hello World!"
|
|
|
280 g.salute
|
|
|
281 </pre>
|
|
|
282 </section>
|
|
|
283 </article>
|
|
|
284
|
|
|
285 <article class='smaller'>
|
|
|
286 <h3>
|
|
|
287 This slide has some code (small font)
|
|
|
288 </h3>
|
|
|
289 <section>
|
|
|
290 <pre>
|
|
|
291 # The Greeter class
|
|
|
292 class Greeter
|
|
|
293 def initialize(name)
|
|
|
294 @name = name.capitalize
|
|
|
295 end
|
|
|
296
|
|
|
297 def salute
|
|
|
298 puts "Hello #{@name}!"
|
|
|
299 end
|
|
|
300 end
|
|
|
301
|
|
|
302 # Create a new object
|
|
|
303 g = Greeter.new("world")
|
|
|
304
|
|
|
305 # Output "Hello World!"
|
|
|
306 g.salute
|
|
|
307 </pre>
|
|
|
308 </section>
|
|
|
309 </article>
|
|
|
310
|
|
|
311 <article>
|
|
|
312 <q>
|
|
|
313 The best way to predict the future is to invent it.
|
|
|
314 </q>
|
|
|
315 <div class='author'>
|
|
|
316 Alan Kay
|
|
|
317 </div>
|
|
|
318 </article>
|
|
|
319
|
|
|
320 <article class='smaller'>
|
|
|
321 <q>
|
|
|
322 A distributed system is one in which the failure of a computer
|
|
|
323 you didn’t even know existed can render your own computer unusable.
|
|
|
324 </q>
|
|
|
325 <div class='author'>
|
|
|
326 Leslie Lamport
|
|
|
327 </div>
|
|
|
328 </article>
|
|
|
329
|
|
|
330 <article class='nobackground'>
|
|
|
331 <h3>
|
|
|
332 A slide with an embed + title
|
|
|
333 </h3>
|
|
|
334
|
|
|
335 <iframe src='http://slideshow-s9.github.io'></iframe>
|
|
|
336 </article>
|
|
|
337
|
|
|
338 <article class='slide nobackground'>
|
|
|
339 <iframe src='http://slideshow-s9.github.io'></iframe>
|
|
|
340 </article>
|
|
|
341
|
|
|
342 <article class='fill'>
|
|
|
343 <h3>
|
|
|
344 Full-slide embed with (optional) slide title on top
|
|
|
345 </h3>
|
|
|
346 <iframe src='http://slideshow-s9.github.io'></iframe>
|
|
|
347 </article>
|
|
|
348
|
|
|
349 <article>
|
|
|
350 <h3>
|
|
|
351 Thank you!
|
|
|
352 </h3>
|
|
|
353
|
|
|
354 <ul>
|
|
|
355 <li>
|
|
|
356 <a href='http://www.example.com'>example.com</a>
|
|
|
357 </li>
|
|
|
358 </ul>
|
|
|
359 </article>
|
|
|
360
|
|
|
361 </section>
|
|
|
362
|
|
|
363 </body>
|
|
|
364 </html> |
