Mercurial > hg > Members > oc > slide

comparison sample.html @ 0:67f3e23bf09a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add lab intro
author oc
date Thu, 06 Nov 2014 11:46:54 +0900
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:67f3e23bf09a
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>