зеркало из https://github.com/mozilla/deepdev.git
809 строки
48 KiB
HTML
Executable File
809 строки
48 KiB
HTML
Executable File
<!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 inline.-->
|
||
<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>
|