main-curriculum/12-paper-code.html at master · codewithme/main-curriculum · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>Paper code</title>

		<meta name="description" content="How CSS works">
		<meta name="author" content="Code with me, Tom Giratikanon, Sisi Wei">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

		<link rel="stylesheet" href="css/main.css">
		<link rel="stylesheet" href="css/theme/default.css">
		<link rel="stylesheet" href="css/codewithme.css">

		<!-- For syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<script>
			// If the query includes 'print-pdf' we'll use the PDF print sheet
			document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

			<!-- Used to fade in a background when a specific slide state is reached -->
			<div class="state-background"></div>

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">

				<!-- Any section element inside of this container is displayed as a slide -->
				<section>
					<h1 class="opening special-margin">Paper code</h1>
					<div class="small-logo-container disappear">
						<img src="images/basic-logo-tan-bg.png"/>
						<div class="copyright">&copy; <span>2013</span></div>
					</div>
				</section>

				<section>

					<h2>Assemble your code!</h2>
					<ul>
						<li>Your mentors have written fragments of HTML, CSS and JS on index cards</li>
						<li>Your job is to work in groups and reassemble these fragments into a coherent webpage</li>
						<li>Go!</li>
					</ul>
				</section>

			</div>

			<!-- The navigational controls UI -->
			<aside class="controls">
				<a class="left" href="#">&#x25C4;</a>
				<a class="right" href="#">&#x25BA;</a>
				<a class="up" href="#">&#x25B2;</a>
				<a class="down" href="#">&#x25BC;</a>
			</aside>

			<!-- Presentation progress bar -->
			<div class="progress"><span></span></div>

		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.min.js"></script>

		<script>

			// Full list of configuration options available here:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,

				transition: Reveal.getQueryHash().transition || 'linear', // default/cube/page/concave/linear(2d)

				// Optional libraries used to extend on reveal.js
				dependencies: [
					{ src: 'lib/js/highlight.js', async: true, callback: function() { window.hljs.initHighlightingOnLoad(); } },
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
					{ src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
				]
			});

		</script>

	</body>
</html>