diff options
Diffstat (limited to 'template.html')
-rw-r--r-- | template.html | 137 |
1 files changed, 120 insertions, 17 deletions
diff --git a/template.html b/template.html index a55f3fe..3ac5bf0 100644 --- a/template.html +++ b/template.html | |||
@@ -7,14 +7,15 @@ | |||
7 | </head> | 7 | </head> |
8 | <body style="opacity: 0;"> | 8 | <body style="opacity: 0;"> |
9 | 9 | ||
10 | <slides> | 10 | <slides class="layout-widescreen"> |
11 | <slide class="logoslide"> | 11 | |
12 | <section class="flexcenter"> | 12 | <slide class="logoslide nobackground"> |
13 | <img src="images/google_developers_logo.png"> | 13 | <section class="flexbox vcenter"> |
14 | <span><img src="images/google_developers_logo.png"></span> | ||
14 | </section> | 15 | </section> |
15 | </slide> | 16 | </slide> |
16 | 17 | ||
17 | <slide id="title-slide"> | 18 | <slide id="title-slide" class="nobackground"> |
18 | <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside> | 19 | <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside> |
19 | <hgroup> | 20 | <hgroup> |
20 | <h1>Title Goes Here</h1> | 21 | <h1>Title Goes Here</h1> |
@@ -27,44 +28,145 @@ | |||
27 | </slide> | 28 | </slide> |
28 | 29 | ||
29 | <slide> | 30 | <slide> |
30 | <h2>Presentation Bullet Slide Layout</h2> | 31 | <h2>Slide with Bullets</h2> |
31 | <article> | 32 | <article> |
32 | <ul> | 33 | <ul> |
33 | <li>Bullet 1</li> | 34 | <li>Titles are formatted as Open Sans with bold applied and font size is set at 45</li> |
34 | <li>Bullet 2 | 35 | <li>Title capitalization is title case |
35 | <ul> | 36 | <ul> |
36 | <li>Bullet 3</li> | 37 | <li>Subtitle capitalization is title case</li> |
37 | </ul> | 38 | </ul> |
38 | </li> | 39 | </li> |
39 | <li>Bullet 4</li> | 40 | <li>Subtitle capitalization is title case</li> |
41 | <li>Titles and subtitles should never have a period at the end</li> | ||
40 | </ul> | 42 | </ul> |
41 | </article> | 43 | </article> |
42 | </slide> | 44 | </slide> |
43 | 45 | ||
44 | <slide> | 46 | <slide> |
45 | <hgroup> | 47 | <hgroup> |
46 | <h2>Presentation Bullet Slide Layout</h2> | 48 | <h2>Slide with Bullets that Build</h2> |
47 | <h3>Subtitle Placeholder</h3> | 49 | <h3>Subtitle Placeholder</h3> |
48 | </hgroup> | 50 | </hgroup> |
49 | <article> | 51 | <article> |
50 | A Slide2 | 52 | <p>A list where items build:</p> |
53 | <ul class="build"> | ||
54 | <li>Blah</li> | ||
55 | <li>Blah</li> | ||
56 | <li>Blah</li> | ||
57 | </ul> | ||
58 | <p>Another list, but items fade as they build:</p> | ||
59 | <ul class="build fade"> | ||
60 | <li>Hover over me!</li> | ||
61 | <li>Hover over me!</li> | ||
62 | <li>Hover over me!</li> | ||
63 | </ul> | ||
64 | </article> | ||
65 | </slide> | ||
66 | |||
67 | <slide> | ||
68 | <h2>Slide with Smaller Font</h2> | ||
69 | <article class="smaller"> | ||
70 | <ul> | ||
71 | <li>Titles are formatted as Open Sans with bold applied and font size is set at 45</li> | ||
72 | <li>Title capitalization is title case | ||
73 | <ul> | ||
74 | <li>Subtitle capitalization is title case</li> | ||
75 | </ul> | ||
76 | </li> | ||
77 | <li>Subtitle capitalization is title case</li> | ||
78 | <li>Titles and subtitles should never have a period at the end</li> | ||
79 | </ul> | ||
51 | </article> | 80 | </article> |
52 | </slide> | 81 | </slide> |
53 | 82 | ||
54 | <slide hidden> | 83 | <slide hidden> |
55 | A hidden slide | 84 | Hidden slides are left out of the presentation. |
85 | </slide> | ||
86 | |||
87 | <slide> | ||
88 | <hgroup> | ||
89 | <h2>Code Slide (with Subtitle Placeholder)</h2> | ||
90 | <h3>Subtitle Placeholder</h3> | ||
91 | </hgroup> | ||
92 | <article> | ||
93 | <pre class="prettyprint" data-lang="javascript"> | ||
94 | <script type='text/javascript'> | ||
95 | // Say hello world until the user starts questioning | ||
96 | // the meaningfulness of their existence. | ||
97 | function helloWorld(world) { | ||
98 | for (var i = 42; --i >= 0;) { | ||
99 | alert('Hello ' + String(world)); | ||
100 | } | ||
101 | } | ||
102 | </script> | ||
103 | </pre> | ||
104 | </article> | ||
105 | </slide> | ||
106 | |||
107 | <slide> | ||
108 | <hgroup> | ||
109 | <h2>Code Slide (Smaller Font)</h2> | ||
110 | </hgroup> | ||
111 | <article class="smaller"> | ||
112 | <pre class="prettyprint" data-lang="javascript"> | ||
113 | // Say hello world until the user starts questioning | ||
114 | // the meaningfulness of their existence. | ||
115 | function helloWorld(world) { | ||
116 | for (var i = 42; --i >= 0;) { | ||
117 | alert('Hello ' + String(world)); | ||
118 | } | ||
119 | } | ||
120 | </pre> | ||
121 | <pre class="prettyprint" data-lang="css"> | ||
122 | <style> | ||
123 | p { color: pink } | ||
124 | b { color: blue } | ||
125 | </style> | ||
126 | </pre> | ||
127 | <pre class="prettyprint" data-lang="html"> | ||
128 | <!DOCTYPE html> | ||
129 | <html> | ||
130 | <head> | ||
131 | <title>My Awesome Page</title> | ||
132 | </head> | ||
133 | <body> | ||
134 | <p>Hello world</p> | ||
135 | <body> | ||
136 | </html> | ||
137 | </pre> | ||
138 | </article> | ||
56 | </slide> | 139 | </slide> |
57 | 140 | ||
58 | <!-- Slide with speaker notes. Press 'n' to display.--> | ||
59 | <slide> | 141 | <slide> |
60 | <aside class="note"> | 142 | <aside class="note"> |
61 | <section>Speaker notes can go here!</section> | 143 | <section>Speaker notes can go here!</section> |
62 | </aside> | 144 | </aside> |
63 | <h2>Presentation Bullet Slide Layout</h2> | 145 | <h2>Slide with Speaker Notes</h2> |
64 | <article> | 146 | <article> |
65 | A Slide2 | 147 | Press 'n' |
66 | </article> | 148 | </article> |
67 | </slide> | 149 | </slide> |
150 | |||
151 | <slide class="thank-you-slide nobackground"> | ||
152 | <aside class="gdbar right"><img src="images/google_developers_icon_128.png"></aside> | ||
153 | <section class="flexbox vleft"> | ||
154 | <h1><Thanks You!></h1> | ||
155 | <p>Important contact information goes here.</p> | ||
156 | </section> | ||
157 | <p> | ||
158 | Insert contact info<br> | ||
159 | Insert contact info<br> | ||
160 | Insert contact info | ||
161 | </p> | ||
162 | </slide> | ||
163 | |||
164 | <slide class="logoslide dark nobackground"> | ||
165 | <section class="flexbox vcenter"> | ||
166 | <span><img src="images/google_developers_logo_white.png"></span> | ||
167 | </section> | ||
168 | </slide> | ||
169 | |||
68 | </slides> | 170 | </slides> |
69 | 171 | ||
70 | <script type="text/slide-config"> | 172 | <script type="text/slide-config"> |
@@ -75,7 +177,7 @@ | |||
75 | theme: 'default', | 177 | theme: 'default', |
76 | hashtag: '#html5', //TODO | 178 | hashtag: '#html5', //TODO |
77 | useBuilds: true, | 179 | useBuilds: true, |
78 | usePrettify: true, //TODO | 180 | usePrettify: true, |
79 | enableSideAreas: true, //TODO | 181 | enableSideAreas: true, //TODO |
80 | analytics: 'UA-25678279-1', | 182 | analytics: 'UA-25678279-1', |
81 | favIcon: 'http://bleedinghtml5.appspot.com/images/chrome-logo-tiny2.png', | 183 | favIcon: 'http://bleedinghtml5.appspot.com/images/chrome-logo-tiny2.png', |
@@ -97,6 +199,7 @@ | |||
97 | }; | 199 | }; |
98 | </script> | 200 | </script> |
99 | 201 | ||
202 | <script src="js/prettify/prettify.js"></script> | ||
100 | <script src="js/slides.js"></script> | 203 | <script src="js/slides.js"></script> |
101 | 204 | ||
102 | <!-- TODO: Add to slides.js --> | 205 | <!-- TODO: Add to slides.js --> |