├── README.md
├── assets
├── .DS_Store
├── images
│ ├── .DS_Store
│ ├── bg-border.svg
│ ├── bg-melee.png
│ ├── bg-run.png
│ ├── bg-shoot.png
│ ├── bg.jpg
│ ├── logo.png
│ ├── zombie-melee.png
│ ├── zombie-melee.svg
│ ├── zombie-run.png
│ ├── zombie-run.svg
│ ├── zombie-shoot.png
│ └── zombie-shoot.svg
└── stylesheets
│ ├── beginning.css
│ ├── end.css
│ └── normalize.css
├── beginning.html
└── end.html
/README.md:
--------------------------------------------------------------------------------
1 | # YouMeSVGBuyingLight
2 | The example code and images used in the screencast for building a fake page for Buying Light.
3 |
--------------------------------------------------------------------------------
/assets/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeschool/WatchUsBuild-WebpageWithSVG/31efb855ddaf5b88ebd985accc77879499523b38/assets/.DS_Store
--------------------------------------------------------------------------------
/assets/images/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeschool/WatchUsBuild-WebpageWithSVG/31efb855ddaf5b88ebd985accc77879499523b38/assets/images/.DS_Store
--------------------------------------------------------------------------------
/assets/images/bg-border.svg:
--------------------------------------------------------------------------------
1 | bg-border
--------------------------------------------------------------------------------
/assets/images/bg-melee.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeschool/WatchUsBuild-WebpageWithSVG/31efb855ddaf5b88ebd985accc77879499523b38/assets/images/bg-melee.png
--------------------------------------------------------------------------------
/assets/images/bg-run.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeschool/WatchUsBuild-WebpageWithSVG/31efb855ddaf5b88ebd985accc77879499523b38/assets/images/bg-run.png
--------------------------------------------------------------------------------
/assets/images/bg-shoot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeschool/WatchUsBuild-WebpageWithSVG/31efb855ddaf5b88ebd985accc77879499523b38/assets/images/bg-shoot.png
--------------------------------------------------------------------------------
/assets/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeschool/WatchUsBuild-WebpageWithSVG/31efb855ddaf5b88ebd985accc77879499523b38/assets/images/bg.jpg
--------------------------------------------------------------------------------
/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeschool/WatchUsBuild-WebpageWithSVG/31efb855ddaf5b88ebd985accc77879499523b38/assets/images/logo.png
--------------------------------------------------------------------------------
/assets/images/zombie-melee.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeschool/WatchUsBuild-WebpageWithSVG/31efb855ddaf5b88ebd985accc77879499523b38/assets/images/zombie-melee.png
--------------------------------------------------------------------------------
/assets/images/zombie-run.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeschool/WatchUsBuild-WebpageWithSVG/31efb855ddaf5b88ebd985accc77879499523b38/assets/images/zombie-run.png
--------------------------------------------------------------------------------
/assets/images/zombie-run.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/assets/images/zombie-shoot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeschool/WatchUsBuild-WebpageWithSVG/31efb855ddaf5b88ebd985accc77879499523b38/assets/images/zombie-shoot.png
--------------------------------------------------------------------------------
/assets/images/zombie-shoot.svg:
--------------------------------------------------------------------------------
1 | zombee-shoot
--------------------------------------------------------------------------------
/assets/stylesheets/beginning.css:
--------------------------------------------------------------------------------
1 | /* Global
2 | ========================================================================== */
3 |
4 | * {
5 | box-sizing: border-box;
6 | }
7 |
8 | html {
9 | background: #010101;
10 | }
11 |
12 | body {
13 | color: #fff;
14 | font-family: 'Oswald', sans-serif;
15 | }
16 |
17 | h1 {
18 | font-weight: normal;
19 | margin: 0;
20 | }
21 |
22 | h2 {
23 | color: #b8b9bb;
24 | font-weight: normal;
25 | font-size: 300%;
26 | margin: 0;
27 | text-transform: uppercase;
28 | }
29 |
30 | h3 {
31 | margin: 0;
32 | }
33 |
34 | ul {
35 | margin-top: 0.5em;
36 | }
37 |
38 | /* Header
39 | ========================================================================== */
40 |
41 | header {
42 | background: #111;
43 | bottom: 0;
44 | left: 0;
45 | position: fixed;
46 | top: 0;
47 | width: 27%;
48 | z-index: 1;
49 | }
50 |
51 | /* Brand */
52 |
53 | .brand {
54 | padding: 0.5em;
55 | width: 100%;
56 | }
57 |
58 | .brand text {
59 | font-family: 'Trade Winds';
60 | fill: #FFF;
61 | }
62 |
63 | /* Nav */
64 |
65 | .nav-item {
66 | cursor: pointer;
67 | padding: 2em 2em 2em 4em;
68 | position: relative;
69 | transition: background 0.25s linear;
70 | }
71 |
72 | .nav-item h2 {
73 | transition: color 0.25s linear;
74 | }
75 |
76 | .nav-item:hover {
77 | background: #090909;
78 | }
79 |
80 | .nav-item:hover h2,
81 | .nav-item.is-active h2 {
82 | color: #ffffff;
83 | }
84 |
85 | .nav-item:hover .zombie {
86 | -webkit-filter: grayscale(0);
87 | filter: grayscale(0);
88 | }
89 |
90 | .nav-item.is-active {
91 | background: #000000;
92 | position: static;
93 | }
94 |
95 | /* Content
96 | ========================================================================== */
97 |
98 | .content {
99 | background: url('../images/bg.jpg') no-repeat center center / cover;
100 | bottom: 0;
101 | left: 27%;
102 | overflow-y: scroll;
103 | position: absolute;
104 | right: 0;
105 | top: 0;
106 | }
107 |
108 | /* Zombie
109 | ========================================================================== */
110 |
111 | .zombie {
112 | bottom: 10%;
113 | filter: grayscale(100%);
114 | height: 80%;
115 | left: 1em;
116 | max-height: 80%;
117 | position: absolute;
118 | transition: all 0.25s linear;
119 | width: auto;
120 | }
121 |
122 | .is-active .zombie {
123 | filter: grayscale(0);
124 | height: 90%;
125 | left: 105%;
126 | max-height: 100%;
127 | top: 5%;
128 | }
129 |
130 | .zombie-title {
131 | left: 27%;
132 | opacity: 0.1;
133 | position: fixed;
134 | top: 0;
135 | width: 73%;
136 | }
137 |
138 | .zombie-title text {
139 | fill: #fff;
140 | }
141 |
142 | .zombie-meta {
143 | left: 40%;
144 | position: absolute;
145 | top: 5%;
146 | z-index: 3;
147 | }
148 |
149 | .zombie-melee,
150 | .zombie-shoot,
151 | .zombie-run {
152 | bottom: 0;
153 | font-size: 125%;
154 | left: 0;
155 | opacity: 0;
156 | position: absolute;
157 | right: 0;
158 | top: 0;
159 | transition: opacity 0.25s linear;
160 | visibility: hidden;
161 | }
162 |
163 | .zombie-melee {
164 | background: url('../images/bg-melee.png') no-repeat center top / 100% auto;
165 | }
166 |
167 | .zombie-shoot {
168 | background: url('../images/bg-shoot.png') no-repeat center top / 100% auto;
169 | }
170 |
171 | .zombie-run {
172 | background: url('../images/bg-run.png') no-repeat center top / 100% auto;
173 | }
174 |
175 | .zombie-melee.is-active,
176 | .zombie-shoot.is-active,
177 | .zombie-run.is-active {
178 | opacity: 1;
179 | visibility: visible;
180 | }
181 |
--------------------------------------------------------------------------------
/assets/stylesheets/end.css:
--------------------------------------------------------------------------------
1 | /* Global
2 | ========================================================================== */
3 |
4 | * {
5 | box-sizing: border-box;
6 | }
7 |
8 | html {
9 | background: #010101;
10 | }
11 |
12 | body {
13 | color: #fff;
14 | font-family: 'Oswald', sans-serif;
15 | }
16 |
17 | h1 {
18 | font-weight: normal;
19 | margin: 0;
20 | }
21 |
22 | h2 {
23 | color: #b8b9bb;
24 | font-weight: normal;
25 | font-size: 300%;
26 | margin: 0;
27 | text-transform: uppercase;
28 | }
29 |
30 | h3 {
31 | font-weight: normal;
32 | margin: 0;
33 | }
34 |
35 | ul {
36 | margin-top: 0.5em;
37 | }
38 |
39 | /* Header
40 | ========================================================================== */
41 |
42 | header {
43 | background: #111;
44 | bottom: 0;
45 | left: 0;
46 | position: fixed;
47 | top: 0;
48 | width: 27%;
49 | z-index: 1;
50 | }
51 |
52 | /* Brand */
53 |
54 | .brand {
55 | padding: 0.5em;
56 | width: 100%;
57 | }
58 |
59 | .brand text {
60 | font-family: 'Trade Winds';
61 | fill: #FFF;
62 | }
63 |
64 | .blood {
65 | opacity: 0;
66 | transform: scale(0);
67 | transform-origin: 90% 50%;
68 | transition: opacity 0.15s linear, transform 0.15s linear;
69 | }
70 |
71 | .brand:hover .blood {
72 | opacity: 1;
73 | transform: scale(1);
74 | }
75 |
76 | /* Nav */
77 |
78 | .nav-item {
79 | cursor: pointer;
80 | padding: 2em 2em 2em 4em;
81 | position: relative;
82 | transition: background 0.25s linear;
83 | }
84 |
85 | .nav-item h2 {
86 | transition: color 0.25s linear;
87 | }
88 |
89 | .nav-item:hover {
90 | background: #090909;
91 | }
92 |
93 | .nav-item:hover h2,
94 | .nav-item.is-active h2 {
95 | color: #ffffff;
96 | }
97 |
98 | .nav-item:hover .zombie {
99 | -webkit-filter: grayscale(0);
100 | filter: grayscale(0);
101 | }
102 |
103 | .nav-item.is-active {
104 | background: url('../images/bg-border.svg') no-repeat center center / cover;
105 | position: static;
106 | }
107 |
108 | /* Content
109 | ========================================================================== */
110 |
111 | .content {
112 | background: url('../images/bg.jpg') no-repeat center center / cover;
113 | bottom: 0;
114 | left: 27%;
115 | overflow-y: scroll;
116 | position: absolute;
117 | right: 0;
118 | top: 0;
119 | }
120 |
121 | /* Zombie
122 | ========================================================================== */
123 |
124 | .zombie {
125 | bottom: 10%;
126 | filter: grayscale(100%);
127 | height: 80%;
128 | left: 1em;
129 | max-height: 80%;
130 | position: absolute;
131 | transition: all 0.25s linear;
132 | width: auto;
133 | }
134 |
135 | .is-active .zombie {
136 | filter: grayscale(0);
137 | height: 90%;
138 | left: 105%;
139 | max-height: 100%;
140 | top: 5%;
141 | }
142 |
143 | .zombie-title {
144 | left: 27%;
145 | opacity: 0.1;
146 | position: fixed;
147 | top: 0;
148 | width: 73%;
149 | }
150 |
151 | .zombie-title text {
152 | fill: #fff;
153 | }
154 |
155 | .zombie-meta {
156 | left: 40%;
157 | position: absolute;
158 | top: 5%;
159 | z-index: 3;
160 | }
161 |
162 | .zombie-melee,
163 | .zombie-shoot,
164 | .zombie-run {
165 | bottom: 0;
166 | font-size: 125%;
167 | left: 0;
168 | opacity: 0;
169 | position: absolute;
170 | right: 0;
171 | top: 0;
172 | transition: opacity 0.25s linear;
173 | visibility: hidden;
174 | }
175 |
176 | .zombie-shoot {
177 | background: url('../images/bg-shoot.png') no-repeat center top / 100% auto;
178 | }
179 |
180 | .zombie-run {
181 | background: url('../images/bg-run.png') no-repeat center top / 100% auto;
182 | }
183 |
184 | .zombie-melee.is-active,
185 | .zombie-shoot.is-active,
186 | .zombie-run.is-active {
187 | opacity: 1;
188 | visibility: visible;
189 | }
190 |
--------------------------------------------------------------------------------
/assets/stylesheets/normalize.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
2 |
3 | /**
4 | * 1. Set default font family to sans-serif.
5 | * 2. Prevent iOS and IE text size adjust after device orientation change,
6 | * without disabling user zoom.
7 | */
8 |
9 | html {
10 | font-family: sans-serif; /* 1 */
11 | -ms-text-size-adjust: 100%; /* 2 */
12 | -webkit-text-size-adjust: 100%; /* 2 */
13 | }
14 |
15 | /**
16 | * Remove default margin.
17 | */
18 |
19 | body {
20 | margin: 0;
21 | }
22 |
23 | /* HTML5 display definitions
24 | ========================================================================== */
25 |
26 | /**
27 | * Correct `block` display not defined for any HTML5 element in IE 8/9.
28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11
29 | * and Firefox.
30 | * Correct `block` display not defined for `main` in IE 11.
31 | */
32 |
33 | article,
34 | aside,
35 | details,
36 | figcaption,
37 | figure,
38 | footer,
39 | header,
40 | hgroup,
41 | main,
42 | menu,
43 | nav,
44 | section,
45 | summary {
46 | display: block;
47 | }
48 |
49 | /**
50 | * 1. Correct `inline-block` display not defined in IE 8/9.
51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
52 | */
53 |
54 | audio,
55 | canvas,
56 | progress,
57 | video {
58 | display: inline-block; /* 1 */
59 | vertical-align: baseline; /* 2 */
60 | }
61 |
62 | /**
63 | * Prevent modern browsers from displaying `audio` without controls.
64 | * Remove excess height in iOS 5 devices.
65 | */
66 |
67 | audio:not([controls]) {
68 | display: none;
69 | height: 0;
70 | }
71 |
72 | /**
73 | * Address `[hidden]` styling not present in IE 8/9/10.
74 | * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
75 | */
76 |
77 | [hidden],
78 | template {
79 | display: none;
80 | }
81 |
82 | /* Links
83 | ========================================================================== */
84 |
85 | /**
86 | * Remove the gray background color from active links in IE 10.
87 | */
88 |
89 | a {
90 | background-color: transparent;
91 | }
92 |
93 | /**
94 | * Improve readability of focused elements when they are also in an
95 | * active/hover state.
96 | */
97 |
98 | a:active,
99 | a:hover {
100 | outline: 0;
101 | }
102 |
103 | /* Text-level semantics
104 | ========================================================================== */
105 |
106 | /**
107 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
108 | */
109 |
110 | abbr[title] {
111 | border-bottom: 1px dotted;
112 | }
113 |
114 | /**
115 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
116 | */
117 |
118 | b,
119 | strong {
120 | font-weight: bold;
121 | }
122 |
123 | /**
124 | * Address styling not present in Safari and Chrome.
125 | */
126 |
127 | dfn {
128 | font-style: italic;
129 | }
130 |
131 | /**
132 | * Address variable `h1` font-size and margin within `section` and `article`
133 | * contexts in Firefox 4+, Safari, and Chrome.
134 | */
135 |
136 | h1 {
137 | font-size: 2em;
138 | margin: 0.67em 0;
139 | }
140 |
141 | /**
142 | * Address styling not present in IE 8/9.
143 | */
144 |
145 | mark {
146 | background: #ff0;
147 | color: #000;
148 | }
149 |
150 | /**
151 | * Address inconsistent and variable font size in all browsers.
152 | */
153 |
154 | small {
155 | font-size: 80%;
156 | }
157 |
158 | /**
159 | * Prevent `sub` and `sup` affecting `line-height` in all browsers.
160 | */
161 |
162 | sub,
163 | sup {
164 | font-size: 75%;
165 | line-height: 0;
166 | position: relative;
167 | vertical-align: baseline;
168 | }
169 |
170 | sup {
171 | top: -0.5em;
172 | }
173 |
174 | sub {
175 | bottom: -0.25em;
176 | }
177 |
178 | /* Embedded content
179 | ========================================================================== */
180 |
181 | /**
182 | * Remove border when inside `a` element in IE 8/9/10.
183 | */
184 |
185 | img {
186 | border: 0;
187 | max-width: 100%;
188 | }
189 |
190 | /**
191 | * Correct overflow not hidden in IE 9/10/11.
192 | */
193 |
194 | svg:not(:root) {
195 | overflow: hidden;
196 | }
197 |
198 | /* Grouping content
199 | ========================================================================== */
200 |
201 | /**
202 | * Address margin not present in IE 8/9 and Safari.
203 | */
204 |
205 | figure {
206 | margin: 1em 40px;
207 | }
208 |
209 | /**
210 | * Address differences between Firefox and other browsers.
211 | */
212 |
213 | hr {
214 | box-sizing: content-box;
215 | height: 0;
216 | }
217 |
218 | /**
219 | * Contain overflow in all browsers.
220 | */
221 |
222 | pre {
223 | overflow: auto;
224 | }
225 |
226 | /**
227 | * Address odd `em`-unit font size rendering in all browsers.
228 | */
229 |
230 | code,
231 | kbd,
232 | pre,
233 | samp {
234 | font-family: monospace, monospace;
235 | font-size: 1em;
236 | }
237 |
238 | /* Forms
239 | ========================================================================== */
240 |
241 | /**
242 | * Known limitation: by default, Chrome and Safari on OS X allow very limited
243 | * styling of `select`, unless a `border` property is set.
244 | */
245 |
246 | /**
247 | * 1. Correct color not being inherited.
248 | * Known issue: affects color of disabled elements.
249 | * 2. Correct font properties not being inherited.
250 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
251 | */
252 |
253 | button,
254 | input,
255 | optgroup,
256 | select,
257 | textarea {
258 | color: inherit; /* 1 */
259 | font: inherit; /* 2 */
260 | margin: 0; /* 3 */
261 | }
262 |
263 | /**
264 | * Address `overflow` set to `hidden` in IE 8/9/10/11.
265 | */
266 |
267 | button {
268 | overflow: visible;
269 | }
270 |
271 | /**
272 | * Address inconsistent `text-transform` inheritance for `button` and `select`.
273 | * All other form control elements do not inherit `text-transform` values.
274 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
275 | * Correct `select` style inheritance in Firefox.
276 | */
277 |
278 | button,
279 | select {
280 | text-transform: none;
281 | }
282 |
283 | /**
284 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
285 | * and `video` controls.
286 | * 2. Correct inability to style clickable `input` types in iOS.
287 | * 3. Improve usability and consistency of cursor style between image-type
288 | * `input` and others.
289 | */
290 |
291 | button,
292 | html input[type="button"], /* 1 */
293 | input[type="reset"],
294 | input[type="submit"] {
295 | -webkit-appearance: button; /* 2 */
296 | cursor: pointer; /* 3 */
297 | }
298 |
299 | /**
300 | * Re-set default cursor for disabled elements.
301 | */
302 |
303 | button[disabled],
304 | html input[disabled] {
305 | cursor: default;
306 | }
307 |
308 | /**
309 | * Remove inner padding and border in Firefox 4+.
310 | */
311 |
312 | button::-moz-focus-inner,
313 | input::-moz-focus-inner {
314 | border: 0;
315 | padding: 0;
316 | }
317 |
318 | /**
319 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in
320 | * the UA stylesheet.
321 | */
322 |
323 | input {
324 | line-height: normal;
325 | }
326 |
327 | /**
328 | * It's recommended that you don't attempt to style these elements.
329 | * Firefox's implementation doesn't respect box-sizing, padding, or width.
330 | *
331 | * 1. Address box sizing set to `content-box` in IE 8/9/10.
332 | * 2. Remove excess padding in IE 8/9/10.
333 | */
334 |
335 | input[type="checkbox"],
336 | input[type="radio"] {
337 | box-sizing: border-box; /* 1 */
338 | padding: 0; /* 2 */
339 | }
340 |
341 | /**
342 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain
343 | * `font-size` values of the `input`, it causes the cursor style of the
344 | * decrement button to change from `default` to `text`.
345 | */
346 |
347 | input[type="number"]::-webkit-inner-spin-button,
348 | input[type="number"]::-webkit-outer-spin-button {
349 | height: auto;
350 | }
351 |
352 | /**
353 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
354 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
355 | */
356 |
357 | input[type="search"] {
358 | -webkit-appearance: textfield; /* 1 */
359 | box-sizing: content-box; /* 2 */
360 | }
361 |
362 | /**
363 | * Remove inner padding and search cancel button in Safari and Chrome on OS X.
364 | * Safari (but not Chrome) clips the cancel button when the search input has
365 | * padding (and `textfield` appearance).
366 | */
367 |
368 | input[type="search"]::-webkit-search-cancel-button,
369 | input[type="search"]::-webkit-search-decoration {
370 | -webkit-appearance: none;
371 | }
372 |
373 | /**
374 | * Define consistent border, margin, and padding.
375 | */
376 |
377 | fieldset {
378 | border: 1px solid #c0c0c0;
379 | margin: 0 2px;
380 | padding: 0.35em 0.625em 0.75em;
381 | }
382 |
383 | /**
384 | * 1. Correct `color` not being inherited in IE 8/9/10/11.
385 | * 2. Remove padding so people aren't caught out if they zero out fieldsets.
386 | */
387 |
388 | legend {
389 | border: 0; /* 1 */
390 | padding: 0; /* 2 */
391 | }
392 |
393 | /**
394 | * Remove default vertical scrollbar in IE 8/9/10/11.
395 | */
396 |
397 | textarea {
398 | overflow: auto;
399 | }
400 |
401 | /**
402 | * Don't inherit the `font-weight` (applied by a rule above).
403 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
404 | */
405 |
406 | optgroup {
407 | font-weight: bold;
408 | }
409 |
410 | /* Tables
411 | ========================================================================== */
412 |
413 | /**
414 | * Remove most spacing between table cells.
415 | */
416 |
417 | table {
418 | border-collapse: collapse;
419 | border-spacing: 0;
420 | }
421 |
422 | td,
423 | th {
424 | padding: 0;
425 | }
426 |
--------------------------------------------------------------------------------
/beginning.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Almanac of the Dead
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
Melee
24 |
25 |
26 |
27 |
28 |
29 |
30 |
Shoot
31 |
32 |
33 |
34 |
35 |
36 |
37 |
Run
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
80 |
81 |
107 |
108 |
138 |
139 |
140 |
141 |
142 |
154 |
155 |
156 |
157 |
158 |
--------------------------------------------------------------------------------