forked from tinmagpie/deepdev
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·808 lines (795 loc) · 48.3 KB
/
index.html
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
<!doctype html>
<html class="no-js animated loading" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>DevTools Challenger</title>
<meta name="description" content="Explore the deepest parts of the ocean and take Firefox Developer Edition's CSS animation tools for a spin. What challenges await you in the vast twilight of the abyssal plain?">
<meta property="og:title" content="Firefox DevTools Challenger" />
<meta property="og:url" content="http://devtoolschallenger.com" />
<meta property="og:image" content="http://devtoolschallenger.com/img/title-card.jpg" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Explore the deepest parts of the ocean and take Firefox Developer Edition's CSS animation tools for a spin. What challenges await you in the vast twilight of the abyssal plain?" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="android-icon-192x192.png">
<meta name="msapplication-TileImage" content="ms-icon-144x144.png">
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,700italic' rel='stylesheet' type='text/css'>
<!-- <link rel="stylesheet" href="css/loading.css"> -->
<!--critical css-->
<style>
.boat:before,.wave:before{content:" "}.loading body,.loading html{overflow:hidden;position:fixed}.Merriweather400 .menu{font-family:Merriweather,serif;font-weight:400}.boat{background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 92'%3E%3Cstyle%3Epath {fill:%23002351;}%3C/style%3E%3Cpath d='M67.6 59.8h15.7l9.2-22.1-9.2-21.1H33.1v23L57.3 46v31.7H0L1 46l25.2-6.9V9.2l64.4-.5 26.2 51.6h13.4L204.7 0H264l18.4 22.1h16.1v14.7L500 14l-78.7 78H83.7z'/%3E%3C/svg%3E") no-repeat;width:12.5%;position:absolute;left:0;bottom:189px;-webkit-animation:boating infinite cubic-bezier(.39,.575,.565,1) 14.4s;animation:boating infinite cubic-bezier(.39,.575,.565,1) 14.4s}.class-dismissed .boat{-webkit-animation:none;animation:none;display:none}.boat:before{display:block;padding-top:18.4%}.menu{font-size:1rem;line-height:2rem;background:#000c1c;box-sizing:border-box;color:#c6f3c7;max-height:100vh;overflow:hidden;position:fixed;bottom:0;left:0;right:0;z-index:30;-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}#surface,.segment{position:relative}#surface{background:#A9DDF2;color:#000c1c;z-index:20}@-webkit-keyframes boating{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}100%{-webkit-transform:translateX(800%);transform:translateX(800%)}}@keyframes boating{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}100%{-webkit-transform:translateX(800%);transform:translateX(800%)}}.segment{opacity:0;-webkit-transition:opacity 2.1s cubic-bezier(.215,.61,.355,1);transition:opacity 2.1s cubic-bezier(.215,.61,.355,1);min-height:100vh;padding:4rem 4rem 4rem 2rem}.wave,.wave:before,.waves,.waves_wrapper{position:absolute;left:0;width:100%}.waves_wrapper{background:-webkit-linear-gradient(top,#39dbb4 0,rgba(0,0,0,0) 100%);background:linear-gradient(to bottom,#39dbb4 0,rgba(0,0,0,0) 100%);height:120px;bottom:-180px;padding-bottom:60px}.waves{background:#39dbb4;height:120px;top:-120px}.wave{bottom:60px;height:130px}.animated .in-zone .wave{-webkit-animation-name:oceanSurge;animation-name:oceanSurge;-webkit-animation-timing-function:cubic-bezier(.645,.045,.355,1);animation-timing-function:cubic-bezier(.645,.045,.355,1);-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.wave:before{-webkit-transform:scale(1.1) translateX(-20px);-ms-transform:scale(1.1) translateX(-20px);transform:scale(1.1) translateX(-20px);bottom:0;padding:0 40px;height:120px}.animated .in-zone .wave:before{-webkit-animation-name:oceanMotion;animation-name:oceanMotion;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.wave-close{-webkit-animation-duration:3.4s;animation-duration:3.4s}.wave-close:before{background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-143 132 672 120'%3E%3Cstyle%3E.st0{fill:%2339DBB4;}%3C/style%3E%3Cpath class='st0' d='M193 183.5c-137 .4-129 44.9-336 45.2V252h672v-23.3c-207-.3-199-44.8-336-45.2z'/%3E%3C/svg%3E") 100% 100% repeat-x;-webkit-animation-duration:2.1s;animation-duration:2.1s}.wave-near{-webkit-animation-duration:5.5s;animation-duration:5.5s}.wave-near:before{background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-278 121 403 120'%3E%3Cstyle%3E.st0{fill:%23007E84;}%3C/style%3E%3Cpath class='st0' d='M-80.1 146c-82.2.2-73.8 20.6-197.9 20.7V241h403v-74.3C.9 166.6 2.1 146.2-80.1 146z'/%3E%3C/svg%3E") 100% 100% repeat-x;-webkit-animation-duration:3.4s;animation-duration:3.4s;-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px)}.wave-mid{background:#002351;height:130px}.wave-mid:before{background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-143 -34 305 120'%3E%3Cpath style='fill:%230B4A61' d='M9.5-34C-52.7-33.8-49-20.1-143-20V86h305V-20C68-20.1 71.7-33.8 9.5-34z'/%3E%3C/svg%3E") 0 10px repeat-x;background-size:305px 120px;-webkit-animation-duration:5.5s;animation-duration:5.5s}@-webkit-keyframes oceanMotion{100%{-webkit-transform:scale(1.1) translateX(30px);transform:scale(1.1) translateX(30px)}}@keyframes oceanMotion{100%{-webkit-transform:scale(1.1) translateX(30px);transform:scale(1.1) translateX(30px)}}@-webkit-keyframes oceanSurge{100%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes oceanSurge{100%{-webkit-transform:translateY(10px);transform:translateY(10px)}}
</style>
<link rel="stylesheet" href="css/main.css">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new
Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-49796218-35', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<script src="https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-561ff7d5e4c14cf7" async="async"></script>
<script src="js/vendor/fontfaceobserver.standalone.js"></script>
<script src="js/preflight.js"></script>
<div class="wrapper">
<nav class="progress" id="progress_bar">
<ul>
<li id="challenge_flashlight-fish" data-creature="flashlight-fish">
<a href="#d400">
<svg><use xlink:href="#s_challenge_flashlight-fish" /></svg>
<span>Playing and Pausing Animations</span>
</a>
</li>
<li id="challenge_nautilus" data-creature="nautilus">
<a href="#d600">
<svg><use xlink:href="#s_challenge_nautilus" /></svg>
<span>Editing Cubic-Beziers</span>
</a>
</li>
<li id="challenge_humboldt-squid" data-creature="humboldt-squid">
<a href="#d800">
<svg><use xlink:href="#s_challenge_humboldt-squid" /></svg>
<span>Scrubbing the Timeline</span>
</a>
</li>
<li id="challenge_orange-roughy" data-creature="orange-roughy">
<a href="#d1600">
<svg><use xlink:href="#s_challenge_orange-roughy" /></svg>
<span>Changing CSS Filters</span></a></li>
<li id="challenge_bloop" data-creature="bloop">
<a href="#d3200">
<svg><use xlink:href="#s_challenge_bloop" /></svg>
<span>Anomolous Bloop</span></a></li>
<li id="challenge_anglerfish" data-creature="anglerfish">
<a href="#d2600">
<svg><use xlink:href="#s_challenge_anglerfish" /></svg>
<span>Using the Eye Dropper Tool</span></a></li>
<!-- <li id="challenge_alarm-jellyfish" data-creature="alarm-jellyfish">
<a href="#d4400">
<svg><use xlink:href="#s_challenge_alarm-jellyfish" /></svg>
<span>Editing Keyframes</span>
</a>
</li> -->
<li id="challenge_vomiting-shrimp" data-creature="vomiting-shrimp">
<a href="#d5000">
<svg><use xlink:href="#s_challenge_vomiting-shrimp" /></svg>
<span>Rewinding Animations and Transitions</span></a></li>
<li id="challenge_hagfish" data-creature="hagfish">
<a href="#d6000">
<svg><use xlink:href="#s_challenge_hagfish" /></svg>
<span>Detecting Obscured Animations</span></a></li>
</ul>
</nav>
<div id="surface" class="zone">
<a class="award" href="http://www.cssdesignawards.com/sites/devtools-challenger/27539/" target="_blank"><img src="img/award-kudos.png" srcset="img/award-kudos2x.png 2x" height="96" width="80" alt="CSS Design Special Kudos Award Winner"></a>
<div class="boat"></div>
<div class="segment" id="title">
<div class="title-card_wrapper">
<h1><img src="img/svg/logo_devtools-challenger.svg" alt="DevTools Challenger"></h1>
<img src="img/svg/sub.svg" alt="Firefox Developer Edition 44 features Play/Pause Animations and Transitions, Rewind, a CSS Filter Editor, Timeline Scrubbing, a Cubic Bezier Editor, Animation Detection, Eyedropper, and Editable Keyframes." class="sub">
<div class="title-wrapper">
<h2 class="subtitle"><em>Explore the deepest secrets of the ocean</em> <span>with some of <a href="https://www.mozilla.org/en-US/firefox/developer/" target="_blank">Firefox Developer Edition 44’s</a> newest tools, designed to take the pain out of <abbr title="Cascading Stylesheet">CSS</abbr> animation.</span></h2>
</div>
</div>
<a id="start" href="#d0">
<img src="img/svg/ui_arrow.svg" class="get-a-move-on" />
</a>
</div>
<div class="waves_wrapper">
<div class="waves">
<div class="wave wave-mid"></div>
<div class="wave wave-near"></div>
<div class="wave wave-close"></div>
</div>
</div>
</div>
<div class="zone" id="epipelagic" data-audio="quad1">
<div class="segment" id="d0">
<h2>Your screen represents 200 meters of sea water. Only 5800 left to go.</h2>
<div class="content">
<blockquote>“The deep sea is an inferior world. All we know of it is all there is to be known.” <cite>Pliny</cite></blockquote>
<p>Before scuba gear, humans weren’t able to dive deeper than the bottom of your browser. For millenia, people assumed that there was no life below 200 meters of the ocean, oblivious to a hidden world we could neither see nor touch.</p>
</div>
</div>
</div>
<div class="zone" id="mesopelagic" data-audio="quad2">
<div class="segment" id="d200">
<h2>Welcome to the Twilight Zone</h2>
<div class="content">
<p>Here in the mesophelagic zone, no photosynthesis happens; most of the sunlight has been filtered out already, starting with the longer wavelengths, the <span class="red">reds</span> and <span class="orange">oranges.</span></p>
<p>With no vegetation to graze upon, all the animals you are about to meet are either commuters, scavengers, or hunters.</p>
<blockquote>“If we knew what was there we wouldn’t have to go.” <cite>Jacques Cousteau</cite></blockquote>
</div>
</div>
<div class="segment bottom" id="d400" data-progress-item="challenge_flashlight-fish">
<div class="challenge_wrapper">
<div class="bonus">
<h3>Flashlight Fish</h3>
<div class="content">
<p>Often deep-sea critters like these tropical <span class="featured">flashlight fish</span> migrate vertically to shallower waters at night to look for food.</p>
<p>Flashlight fish have a bioluminescent pocket under each eye that they use to communicate with each other, disorient predators, and hunt. <span class="rediscover">Rediscover how to play and pause animations.</span></p>
</div>
<div class="schools">
<div id="school_flashlight-fish_bg" class="schooling_flashlight-fish">
<div class="school_flashlight-fish" id="school_flashlight-fish1">
<div class="creature creature_flashlight-fish">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
<div class="creature creature_flashlight-fish">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
<div class="creature creature_flashlight-fish">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
<div class="creature creature_flashlight-fish">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
<div class="creature creature_flashlight-fish">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
<div class="creature creature_flashlight-fish">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
</div>
<div class="school_flashlight-fish" id="school_flashlight-fish2">
<div class="creature creature_flashlight-fish">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
<div class="creature creature_flashlight-fish">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
<div class="creature creature_flashlight-fish">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
<div class="creature creature_flashlight-fish">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
<div class="creature creature_flashlight-fish">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
<div class="creature creature_flashlight-fish">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
</div>
</div>
<div id="school_flashlight-fish_fg" class="schooling_flashlight-fish">
<div class="school_flashlight-fish" id="school_flashlight-fish3">
<div class="creature creature_flashlight-fish">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
<div class="creature creature_flashlight-fish">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
<div class="creature creature_flashlight-fish">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
<div class="creature creature_flashlight-fish">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
<div class="creature creature_flashlight-fish">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
</div>
<div class="school_flashlight-fish" id="school_flashlight-fish4">
<div class="creature creature_flashlight-fish">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
<div class="creature creature_flashlight-fish">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
<div class="creature creature_flashlight-fish">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
<div class="creature creature_flashlight-fish">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
<div class="creature creature_flashlight-fish">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
</div>
</div>
</div>
</div>
<div class="challenge left" data-creature="flashlight-fish">
<h3>Playing and Pausing Animations</h3>
<div class="content">
<video class="video" controls src="videos/flashlight-sm.mp4" preload="metadata"></video>
<div class="keep-together">
<p>This little <span class="featured">flashlight fish</span> is having trouble keeping up with the others. Use your browser’s developer tools to <span class="featured">unpause</span> its swimming animation so it can catch up.</p>
<div class="lost-fish" id="help-fish">
<div class="creature creature_flashlight-fish" id="creature_flashlight-fish1">
<img src="img/bioluminescence/lumi_flashlight-fish.svg" class="lumi" />
</div>
</div>
<ol>
<li><p>On the flashlight fish above, <strong>right-click “inspect element.”</strong></p></li>
<li><p>In the developer tools, navigate to the <strong>Animation tab.</strong></p></li>
<li><p><strong>Press play</strong>
<img src="img/icon_play.png" srcset="img/icon_play2x.png 2x" height="17" width="17" alt="rewind icon">
to start the fish’s swimming animation.</p></li>
</ol>
</div>
</div>
</div>
</div>
</div>
<div class="segment" id="d600" data-progress-item="challenge_nautilus">
<div class="challenge_wrapper">
<div class="bonus">
<h3>The Nautilus</h3>
<div class="content">
<p>There were once six families of Nautilaceae. But only one made it out of the Triassic Period. Here, 600 meters deep, modern descendants of these prehistoric molluscs still prowl. Other cephalopods like octopi have eight arms, but a <span class="featured">nautilus</span> can have 90 or so.</p>
<p>Nautili get around using jet propulsion. This couples with their buoyant, air-filled shells to give them their characteristic bobbing motion as they move through the water.</p>
<p>Nautili are long-lived for cephalopods, taking 15 years to reach sexual maturity. Yet their shells are popular as curiosities and jewelry, where they are made into bluish ‘Osmeña Pearls.’ Harvesting is unregulated and most likely unsustainable. This animal that outlived the dinosaurs is more likely to be driven to extinction by the whims of human fashion. <span class="rediscover">Rediscover the cubic-bezier editor.</span></p>
</div>
</div>
<div class="challenge left" data-creature="nautilus">
<h3>Editing Cubic-Beziers</h3>
<div class="content">
<video class="video" controls src="videos/nautilus-sm.mp4" preload="metadata"></video>
<div class="keep-together">
<p>This <span class="featured">nautilus</span> is moving a little too smoothly through the water. Use the <span class="featured">cubic-bezier editor</span> in your browser’s developer tools to adjust her movement to look more bouncy.</p>
<div class="puzzle">
<div class="creature creature_nautilus" id="creature_nautilus1"></div>
</div>
<ol>
<li><p>On the nautilus, <strong>right-click “inspect element.”</strong></p></li>
<li><p>In the developer tools, click on <strong>the Rules tab.</strong></p></li>
<li><p>Find the nautilus’s <code>animation-timing-function.</code></p></li>
<li><p>Click the
<img src="img/icon_bezier.png" srcset="img/icon_bezier2x.png 2x" height="17" width="17" alt="cubic-bezier editor icon"> next to <code>linear</code> to open the cubic-bezier editor.</p></li>
<li><p><strong>Optional:</strong> Play with the handles.</p></li>
<li><p>Choose a curve with some bounce, like <strong>Backwards.</strong></p></li>
</ol>
</div>
</div>
</div>
</div>
</div>
<div class="segment top" id="d800" data-progress-item="challenge_humboldt-squid">
<div class="challenge_wrapper">
<div class="bonus">
<h3>Humboldt Squid</h3>
<div class="content">
<p>The chromatophores on a <span class="featured">Humboldt squid’s</span> body fade from white to red too rapidly for the human eye to perceive. Scientists think the squid flash as a form of camouflage or to disorient their prey.</p>
<p>These squid can form huge shoals of over 1000 individuals. They take only a year to grow to full size, and that fast growth means a big appetite. Their coloration and aggressive feeding behavior have earned them the nickname “red devils” among Mexican fishermen.</p>
<p>Recently, this species has started spreading northward as far as the coast of Oregon in the United States. If the thought of armies of aggro squid invading your coastline keeps you up at night, take heart: although Humboldts do migrate toward the surface at night to hunt, you’re unlikely to ever encounter one. The upward limit of their migration, 130 meters below the surface, is well below the depth of unassisted divers.</p>
<p class="rediscover">Rediscover how to scrub the animation timeline.</p>
</div>
</div>
<div class="challenge" data-creature="humboldt-squid">
<h3>Scrubbing the Animation Timeline</h3>
<p>These <span class="featured">Humboldt squid</span> are on the hunt! When Humboldt squid feed, they rapidly flash light and dark.</p>
<p>But how are they changing colors so quickly? <span class="featured">Scrub the Animation panel’s timeline</span> to see what’s really going on.</p>
<ol>
<li><p>On one of the squid, <strong>right-click “inspect element.”</strong></p></li>
<li><p>In the developer tools, click on <strong>the Animations tab.</strong></p></li>
<li><p>Click and drag <strong>anywhere inside the timeline</strong> to scrub through the animation.</p></li>
</ol>
<video class="video" controls src="videos/humboldt-sm.mp4" preload="metadata"></video>
</div>
</div>
<div class="puzzle">
<div class="creature_humboldt-squid creature" id="creature_humboldt-squid1">
<div class="darkening"></div>
</div>
<div class="creature_humboldt-squid creature" id="creature_humboldt-squid2">
<div class="darkening"></div>
</div>
</div>
</div>
</div>
<div class="zone" id="bathypelagic" data-audio="quad3">
<div class="segment" id="d1000">
<h2>Now Entering: The Midnight Zone</h2>
<div class="standalone">
<blockquote>“(A)dventuring under the sea is an unearthly experience, and in all except one sense we are actually entering a new world…”
<cite>William Beebe, <em>Half Mile Down</em></cite>
</blockquote>
</div>
</div>
<div class="segment" id="d1200">
<div class="standalone">
<p>Darker than dark. Blacker than black. Even a moonless night sky has the stars, but at noon under a clear sky, not a single ray of sunlight can penetrate the darkness of <em>the Bathypelagic Zone.</em></p>
<p>There is little oxygen. The temperature hovers near freezing. The weight of hundreds of pounds of water crushes down from above.</p>
<p>Yet life finds a way.</p>
</div>
</div>
<div class="segment" id="d1400">
<p class="callout">Half of all species of sharks live here, in the deep sea.</p>
<p class="followup">True story.</p>
</div>
<div class="segment bottom" id="d1600" data-progress-item="challenge_orange-roughy">
<div class="challenge_wrapper">
<div class="bonus">
<h3>Orange Roughy</h3>
<div class="content">
<p><span class="featured">Orange roughy</span> can be found in the blue-lit waters of the Twilight Zone, where <span class="red">red light</span> is filtered out after traveling so far through the water. Only <span class="biolumiColor">blue light</span> is left. With no red light to reflect, red pigments look black, an effective camouflage against a backdrop of eternal darkness.</p>
<p>Many deep-sea fish have slow metabolisms, which make for a long life. Originally the orange roughy was thought to only live to about 20 years. The adults spawn in large groups over underwater mountain tops called seamounts. Catch quotas were set with the expectation that young fish would mature over 20 years to replace the caught fish. Fisheries trawled these breeding grounds repeatedly, hauling up hundreds of thousands of tons of spawning fish.</p>
<p class="rediscover">Rediscover the CSS filters editor.</p>
</div>
</div>
<div class="challenge left" data-creature="orange-roughy">
<h3>Editing CSS Filters</h3>
<div class="content">
<div class="keep-together">
<div class="puzzle">
<div class="creature_orange-roughy creature" id="creature_orange-roughy1">
</div>
</div>
<video class="video" controls src="videos/roughy-sm.mp4" preload="metadata"></video>
</div>
<p>Why is this <span class="featured">orange roughy</span> black? The fish is wearing a CSS filter that screens out all of its red hues, just like ocean water would. <span class="featured">Edit the fish’s filters</span> with your developer tools to see what it really looks like.</p>
<ol>
<li><p>On the fish, <strong>right-click “inspect element.”</strong></p></li>
<li><p>Navigate to the <strong>Rules tab.</strong></p></li>
<li><p>Find the orange roughy’s <code>filter</code> property.</p></li>
<li><p>Click on <strong>the <img src="img/icon_filter.png" srcset="img/icon_filter2x.png 2x" height="17" width="17" alt="filter icon"> next to <code>filter</code></strong> to explore other CSS filters.</p></li>
<li><p><strong>Click the x</strong> next to the custom filter to remove it.</p></li>
<li><p><strong>Optional:</strong> Try adding a greyscale filter. How do the two differ?</p></li>
</ol>
</div>
</div>
</div>
</div>
<div class="segment orange-roughy-revelation" id="d1800">
<p class="callout">Then scientists discovered that the fish actually live to 150 years of age.</p>
</div>
<div class="segment orange-roughy-revelation" id="d2000">
<div class="standalone">
<p>Orange roughy stocks around the world collapsed as catch rates exceeded the rate at which the fish could repopulate.</p>
</div>
</div>
<div class="segment orange-roughy-revelation" id="d2200">
<div class="standalone">
<p>To this day the future of the orange roughy remains uncertain.</p>
</div>
</div>
<div class="segment" id="d2400">
</div>
<div class="segment focus top" id="d2600" data-progress-item="challenge_anglerfish">
<div class="challenge_wrapper">
<div class="challenge" data-creature="anglerfish">
<h3>Matching Colors with the Eyedropper Tool</h3>
<p>Light up the dark. <strong>Match the color of the dragonfish’s photophore</strong> below to the flashlight fish’s from earlier.</p>
<p>Many creatures of the deep create their own light, called <span class="featured">bioluminesence,</span> but it often requires special optics to pick up on film. To view this secret disco scene, use the <span class="featured">eyedropper tool</span> to “calibrate” your browser.</p>
<figure class="photophores">
<div class="specimen_dragonfish">
<div class="dish dish_dragonfish creature">
<svg class="lumi"><use xlink:href="#s_dish_dragonfish" /></svg>
</div>
<label>dragonfish</label>
</div>
<div class="specimen_flashlight-fish">
<div class="dish dish_flashlight-fish creature">
<svg class="lumi"><use xlink:href="#s_dish_flashlight-fish" /></svg>
</div>
<label>flashlight fish</label>
</div>
<img class="pointer" alt=" " src="img/svg/pointer_photophore.svg">
<figcaption>match these <span class="biolumiColor"><strong>photophores</strong></span> specialized organs for producing light</figcaption>
</figure>
<ol>
<li><p>On the dragonfish’s photophore above, <strong>right-click “inspect element.”</strong></p></li>
<li><p>In the <strong>Rules panel,</strong> find the <code>color</code> property and click the <img src="img/icon_color.png" srcset="img/icon_color2x.png 2x" height="17" width="17" alt="color icon"> next to <code>#436c6f</code> to open the color picker.</p></li>
<li><p>Click the <strong>eyedropper <img src="img/icon_eyedropper.png" srcset="img/icon_eyedropper2x.png 2x" height="24" width="24" alt="icon"></strong> in the color picker.</p></li>
<li><p>Click the <strong>flashlight fish’s photophore</strong> with the eyedropper to sample its <span class="biolumiColor">color.</span></p></li>
</ol>
<video class="video" controls src="videos/disco-sm.mp4" preload="metadata"></video>
</div>
<div class="bonus">
<h3>Biolumination</h3>
<p>Sound is not the dominant communication method on this planet. More creatures use light to communicate than sound. The deep may be a quiet place acoustically, but it is lousy with light noise from everything from sparking plankton to glowing coral. Creatures here use their own light to communicate, hunt, mate, hide, and escape from one another.</p>
<p class="jump">They produce bioluminescence in three different ways:</p>
<ol>
<li><p>Harboring symbiotic bacteria.</p></li>
<li><p>Manufacturing bioluminescent chemicals in their bodies.</p></li>
<li><p>Eating bioluminescent creatures and using their chemicals.</p></li>
</ol>
<p class="rediscover">Rediscover using the eyedropper tool.</p>
</div>
</div>
<div class="puzzle">
<div class="creature creature_dragonfish" id="creature_dragonfish1">
<svg class="lumi"><use xlink:href="#s_creature_dragonfish1" /></svg>
</div>
<div class="creature creature_anglerfish" id="creature_anglerfish1">
<svg class="lumi"><use xlink:href="#s_creature_anglerfish1" /></svg>
</div>
<div class="creature creature_gulper-eel" id="creature_gulper-eel1">
<svg class="lumi"><use xlink:href="#s_creature_gulper-eel1" /></svg>
</div>
<div class="creature creature_bristlemouth" id="creature_bristlemouth1">
<svg class="lumi"><use xlink:href="#s_creature_bristlemouth1" /></svg>
</div>
<div class="creature creature_viperfish" id="creature_viperfish1">
<svg class="lumi"><use xlink:href="#s_creature_viperfish1" /></svg>
</div>
</div>
</div>
<div class="segment" id="d2800"></div>
<div class="segment" id="d3000"></div>
<div class="segment" id="d3200" data-progress-item="challenge_bloop"></div>
<div class="segment" id="d3400">
<div class="standalone">
<p>For every 200 meters, the pressure increases by 20 atmospheres. Right now, we’re at about 320 atmospheres.</p>
<p>If you were to throw a styrofoam cup out right now, it would be <em>crushed to the size of a thimble.</em></p>
</div>
<p class="callout">Good thing you’re behind this protective browser.</p>
</div>
<div class="segment" id="d3600">
<p class="callout">The average depth of the world’s oceans, 3700 meters, is right around here. </p>
<p class="followup">Makes you think.</p>
</div>
<div class="segment" id="d3800"></div>
</div>
<div class="zone" id="abyssal" data-audio="quad4">
<div class="segment" id="d4000">
<h2>Last stop: The Abyssal Zone</h2>
<div class="standalone">
<p>The Abyss covers over 50% of the planet’s surface.</p>
<p>Down here, there are no days, no nights, no seasons.</p>
<p>Even the most powerful storm above has no impact down here.</p>
<p>It is a huge land populated by Lilliputian creatures who will never know what the sun is. They could not fathom that the water that surrounds them as casually as the air surrounds us has a surface that can be broken.</p>
</div>
</div>
<div class="segment bottom" id="d4200">
<p class="callout">These are the aliens on our planet.</p>
<p class="followup">And we know as little of them as they do of us.</p>
</div>
<div class="segment" id="d4400">
<!-- <div class="challenge_wrapper">
<div class="bonus">
<h3>The Alarm Jellyfish</h3>
<div class="content">
<p>The alarm jellyfish, scientifically known as <span class="featured">Atolla wyvillei</span>, has evolved a special feature to shake off would-be attackers. Normally it glows <span class="red">red,</span> a color not many deep-sea creatures can see. But when attacked, it switches over to a highly visible blue display that attracts bigger predators like Humboldt squid, who are more interested in the attacker than the jelly.</p>
<p>This display is so visually loud that it has been compared to a car alarm going off across the deep, attracting concerned—and hungry—citizens to intervene. It is so effective that scientists have used LED panels that imitate the distress signal to attract animals to cameras!</p>
<p class="rediscover">Rediscover how to edit keyframes.</p>
</div>
</div>
<div class="challenge" data-creature="alarm-jellyfish">
<h3>Editing CSS Keyframes</h3>
<p>Oh no! A <span class="featured">fangtooth</span> is hassling this jellyfish! But this is no defenseless jellyfish. The bioluminescent <span class="featured">alarm jellyfish</span> can change the color and pattern of its glow to bring even bigger predators to its rescue.</p>
<p>To save the jelly, <span class="featured">change the colors in its <code>@keyframes</code></span> like so:</p>
<ol>
<li><p>On the jellyfish, <strong>right-click “inspect element.”</strong></p></li>
<li><p>In the developer tools, <strong>open the Rules tab</strong>.</p></li>
<li><p>Find the <strong>alarmed <code>keyframes</code></strong> by scrolling to the bottom of the Rules panel.</p></li>
<li><p>Under <code>100%</code>, <strong>replace</strong> <code>fill</code> with <code>color</code>, and <span class="red">#c6244b</span> with <span class="biolumiColor">#56fddb</span>.</p></li>
</ol>
<div class="puzzle" data-creature="alarm-jellyfish">
<div class="creature_alarm-jellyfish creature" id="creature_alarm-jellyfish1">
<svg><use xlink:href="#s_creature_alarm-jellyfish1" /></svg>
</div>
<div class="creature_fangtooth creature" id="creature_fangtooth1"></div>
<div class="creature_rattail creature" id="creature_rattail"></div>
</div>
</div>
</div> -->
</div>
<div class="segment" id="d4600"></div>
<div class="segment" id="d4800"></div>
<div class="segment" id="d5000" data-progress-item="challenge_vomiting-shrimp">
<div class="challenge_wrapper">
<div class="bonus">
<h3>The Vomiting Shrimp</h3>
<div class="content">
<p>The vomiting shrimp, <span class="featured">Acanthephyra purpurea,</span> uses a squirt of glowing goo to confuse and disarm would-be assailants. It might also attract other, larger predators to the scene. Clever.</p>
<p class="rediscover">Rediscover rewinding the animation timeline.</p>
</div>
</div>
<div class="challenge left" data-creature="vomiting-shrimp">
<h3>Rewinding the Animation Timeline</h3>
<div class="content">
<video class="video" controls src="videos/shrimp-sm.mp4" preload="metadata"></video>
<div class="keep-together">
<p>What was that? Some small, quick creature left behind a swirl of bioluminous fluid. <span class="featured">Rewind</span> the scene via the Animation panel to spot the culprit.</p>
<div class="puzzle" data-creature="vomiting-shrimp">
<div class="creature_vomiting-shrimp creature" id="creature_vomiting-shrimp1"></div>
<div class="luminous-spew object"></div>
</div>
<ol>
<li><p>On the glowing fluid above, <strong>right-click “inspect element.”</strong></p></li>
<li><p>Navigate to the <strong>Animations tab.</strong></p></li>
<li><p>Click <strong>rewind</strong>
<img src="img/icon_rewind.png" srcse
t="img/icon_rewind2x.png 2x" height="17" width="17" alt="rewind icon">
to go back to the beginning of the timeline.</p></li>
<li><p>Click <strong>play</strong>
<img src="img/icon_play.png" srcset="img/icon_play2x.png 2x" height="17" width="17" alt="rewind icon">
to replay the transition.</p></li>
</ol>
</div>
</div>
</div>
</div>
</div>
<div class="segment" id="d5200"></div>
<div class="segment" id="d5400">
<p class="callout">The deep ocean isn’t barren.</p>
<p class="followup">But life does get exponentially harder to find.</p>
</div>
<div class="segment" id="d5600"></div>
<div class="segment" id="d5800">
<h2>Welcome to the Abyssal Plain</h2>
<div class="content">
<p>It is wide, flat, and coated in a thick, grey ooze. This ooze comes from what is colorfully referred to as “marine snow”: the leftovers that constantly float down from sunnier waters.</p>
<p>The pressure here is intense. Most abyssal creatures have flabby, gelatinous bodies that explode when brought to the surface. Few fish live here, and those that do are often very small and very efficient.</p>
</div>
</div>
<div class="segment" id="d6000" data-progress-item="challenge_hagfish">
<div class="challenge_wrapper">
<div class="bonus">
<h3>Hagfish</h3>
<div class="content">
<p><span class="featured">Hagfish</span> are known as “slime eels” for the prolific amounts of slime they sling at their enemies. Scientists find them fascinating, not only for their ability to turn water into jelly but also because they haven’t changed much in 300 million years. They are the only animals alive today that have skulls but no spine. They also lack jaws, and their eyes are little more than photosensitive spots on their heads.</p>
<p>This hagfish has tied itself in a knot, a technique these ancient creatures use to shed slime and wriggle away to safety. No wonder it has so few marine predators!</p>
<p class="rediscover">Rediscover how to detect obscured animations.</p>
</div>
</div>
<div class="challenge" data-creature="hagfish">
<h3>Detecting Obscured Animations</h3>
<p>Where’s the <span class="featured">hagfish</span> hiding? It’s moving around, hiding in the ooze. Use the <span class="featured">Animation panel</span> to detect its location and bring it to light.</p>
<video class="video" controls src="videos/hagfish-sm.mp4" preload="metadata"></video>
<ol>
<li><p>On the ocean floor, <strong>right-click “inspect element.”</strong></p></li>
<li><p>In the developer tools, <strong>open the Animation tab</strong> to see what elements are animating.</p></li>
<li><p><strong>Hover over the name</strong> of the element that is <em>wriggling around</em> to see where it is on the page.</p></li>
<li><p>Click to <strong>select the animated element.</strong></p></li>
<li><p>With the hagfish selected, navigate to the <strong>Rules tab.</strong></p></li>
<li><p>Under Rules, <strong>change the hagfish’s <code>bottom</code> property to <code>150px</code></strong> to lift it up out of the ooze.</p></li>
</ol>
</div>
</div>
<div class="creature_hagfish creature" id="creature_hagfish1"></div>
</div>
</div>
<div class="ooze">
<div class="ooze_near"></div>
<div class="ooze_far"></div>
</div>
</div>
</div>
<div id="control-panel" class="menu">
<menu id="menu_options">
<div class="ff-download">
<a href="https://www.mozilla.org/firefox/developer/" target="_blank">
<img class="logo" src="img/logo_dev-ed-white.png" srcset="img/logo_dev-ed-white2x.png 2x" alt="Firefox DevEdition">
</a>
<a class="download non-ff" href="https://www.mozilla.org/firefox/developer/" target="_blank">Free download »</a>
</div>
<div class="controls" id="sensory-controls">
<div class="toggle" role="button" id="audio-toggle">
<div class="toggle_bg">
<svg class="toggle_backdrop"><use xlink:href="#s_toggle_bg" /></svg>
<div class="toggle_button">
<svg class="nob"><use xlink:href="#s_toggle_nob" /></svg>
<svg class="icon"><use xlink:href="#s_toggle_icon_audio" /></svg>
</div>
</div>
</div>
<div class="toggle activated" role="button" id="animation">
<div class="toggle_bg">
<svg class="toggle_backdrop"><use xlink:href="#s_toggle_bg" /></svg>
<div class="toggle_button">
<svg class="nob"><use xlink:href="#s_toggle_nob" /></svg>
<svg class="icon"><use xlink:href="#s_toggle_icon_animation" /></svg>
</div>
</div>
</div>
</div>
<div id="tabs">
<span class="tab crew_tab" data-panel="crew_panel">
<span>Crew</span>
<svg><use xlink:href="#s_icon_crew" /></svg>
</span>
<span class="tab share_tab" data-panel="sharing_panel">
<span>Share</span>
<svg><use xlink:href="#s_icon_sharing" /></svg>
</span>
<span class="tab shh certificate_tab" id="congrats-tab" data-panel="ending_panel">
<span>Achievement Unlocked</span>
<svg><use xlink:href="#s_icon_ending" /></svg>
</span>
</div>
</menu>
<div id="dashboard">
<div class="panel psa" id="onboarding" data-panel="onboarding_panel">
<h3><span>Before you</span><span>dive in…</span></h3>
<div class="psa_wrapper">
<div class="features">
<p id="sound-on" data-target="audio-toggle">
<span class="illo">
<svg><use xlink:href="#s_toggle_icon_audio" /></svg>
</span>
<span class="text"><strong>Activate audio.</strong> This dive is outfitted with sonar equipment best appreciated with the music switched on above.</span></p>
<p id="anim-off" data-target="animation">
<span class="illo">
<svg><use xlink:href="#s_toggle_icon_animation" /></svg>
</span>
<span class="text">If you suffer from <strong>epilepsy or vestibular disorders,</strong> you can reduce animation by switching toggle above off to make your dive more comfortable.</span>
</p>
</div>
<div class="for-browsers">
<p>This expedition showcases Firefox Developer Edition’s latest animation tools. It could be tricky down there without them. So <a href="https://www.mozilla.org/en-US/firefox/developer/" target="_blank">get your free copy</a> before you dive in!</p>
<div class="ff-download">
<a href="https://www.mozilla.org/firefox/developer/">
<img class="logo" src="img/logo_dev-ed-white.png" srcset="img/logo_dev-ed-white2x.png 2x" alt="Firefox DevEdition">
</a>
<a class="download non-ff" href="https://www.mozilla.org/firefox/developer/" target="_blank">Get yours today »</a>
</div>
</div>
</div>
<div class="button" id="dismiss-onboarding">Ok, got it!</div>
</div>
<div class="panel sharing" data-panel="sharing_panel">
<div class="addthis_sharing_toolbox" data-url="http://mzl.la/devtoolschallenger" data-title="DevTools Challenger"></div>
</div>
<div class="panel crew" data-panel="crew_panel">
<ul class="sound-off">
<li><a href="https://twitter.com/rachelnabors" target="_blank">
<div class="porthole captains-porthole">
<div class="captain-rachel">
<div></div>
</div>
</div>
<h4 class="name">Rachel Nabors</h4>
<div class="title">
<strong class="nautical">
Captain
</strong>
<span class="irl">
art direction, storytelling, animation engineering, frontend development
</span>
</div></a>
</li>
<li><a href="http://korybing.com/" target="_blank">
<div class="porthole">
<img src="img/crew/bing.png" srcset="img/crew/bing2x.png 2x" height="100" width="100" alt=" ">
</div>
<h4 class="name">Kory Bing</h4>
<div class="title">
<strong class="nautical">
Resident Ichthyologist
</strong>
<span class="irl">
illustration
</span>
</div></a>
</li>
<li><a href="http://jessicapaoli.com/" target="_blank">
<div class="porthole">
<img src="img/crew/paoli.png" srcset="img/crew/paoli2x.png 2x" height="100" width="100" alt=" ">
</div>
<h4 class="name">Jessica Paoli</h4>
<div class="title">
<strong class="nautical">
Submersible Architect
</strong>
<span class="irl">
logo design
</span>
</div></a>
</li>
<li>
<div class="porthole">
<img src="img/crew/fong.jpg" srcset="img/crew/fong2x.jpg 2x" height="100" width="100" alt=" ">
</div>
<h4 class="name">Jennifer Fong</h4>
<div class="title">
<strong class="nautical">
Sonar Technician
</strong>
<span class="irl">
sound design
</span>
</div>
</li>
<li>
<div class="porthole">
<img src="img/crew/potch.jpg" srcset="img/crew/potch2x.jpg 2x" height="100" width="100" alt=" ">
</div>
<h4 class="name">Matthew Potch</h4>
<div class="title">
<strong class="nautical">
Engineer
</strong>
<span class="irl">
javascript
</span>
</div>
</li>
</ul>
<div class="thanks">
<h4>Special Thanks</h4>
<ul>
<li>Sonya Mann
<span class="title">
<strong class="nautical">
Safety Expert
</strong>
<span class="irl">
proofreading
</span>
</span>
</li>
<li>Mike Cooper
<span class="title">
<strong class="nautical">
Rigger
</strong>
<span class="irl">
javascript development
</span>
</span>
</li>
</ul>
</div>
</div>
<div class="panel ending shh" id="congrats-panel" data-panel="ending_panel">
<div id="certificate" class="accolades">
<h3>Congratulations!</h3>
<p>You’ve traveled deeper than most browsers and seen things most people will never see. You’re a hardened mariner of solid repute. We can tell you like uncovering deep-sea mysteries and finding clever workarounds to complex problems.</p>
<p>The crew is impressed.</p>
<p>Next time, try taking <a href="https://www.mozilla.org/en-US/firefox/developer/" target="_blank">Firefox Developer Edition</a> for a spin, and see what leviathans you might encounter.</p>
<div class="join-the-deep">
<div class="ff-download">
<a href="https://www.mozilla.org/firefox/developer/" target="_blank">
<img class="logo" src="img/logo_dev-ed-white.png" srcset="img/logo_dev-ed-white2x.png 2x" alt="Firefox DevEdition">
</a>
<a class="download" href="https://www.mozilla.org/firefox/developer/" target="_blank">Take Firefox Developer Edition for a dive »</a>
</div>
</div>
<div class="addthis_sharing_toolbox" data-url="http://mzl.la/devtoolschallenger" data-title="DevTools Challenger"></div>
</div>
<div class="rewards">
<a class="spotify" target="_blank" href="https://open.spotify.com/user/rachelnabors/playlist/2wkYBklNLW4i3iNJ7qhNXU">
<svg><use xlink:href="#s_spotify" /></svg>
<span>Enjoy the Playlist on Spotify</span></a>
<a class="github" href="https://github.com/tinmagpie/deepdev/" target="_blank">
<svg><use xlink:href="#s_github" /></svg>
<span>Explore the code on Github</span></a>
</div>
</div>
</div>
</div>
<footer>
<small>Expedition commissioned by <img src="img/svg/ff_wordmark.svg" alt="Firefox Developer Edition" class="wordmark" /> to commemorate the release of version #44, <span class="version">“Challenger”</span></small></footer>
<script src="js/vendor/anchor.1.2.1.min.js"></script>
<script src="js/vendor/waypoints.noframework.4.0.0.min.js"></script>
<script src="js/vendor/waypoints.inview.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
if (typeof jQuery === 'undefined') {
document.write('<script src="js/vendor/jquery-2.1.4.min.js"><\/script>');
}
</script>
<script src="js/goals.js"></script>
<script src="js/ending.js"></script>
<script src="js/audio.js"></script>
<script src="js/main.js"></script>
</body>
</html>