API tools faq
paste
Kchewz

site

Kchewz
Nov 6th, 2018
328
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 67.68 KB | None | 0 0
raw download clone embed print report
  1. <html xmlns:fb="http://www.facebook.com/2008/fbml" class=""><head>
  2. <title>The Young Astronauts</title>
  3. <!-- include meta tags -->
  4. <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  5. <meta name="apple-mobile-web-app-capable" content="yes">
  6. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  7. <meta name="viewport" content="width = device-width, initial-scale = .5, user-scalable = no">
  8.  
  9. <link rel="icon" type="image/x-icon" href="https://theyoungastronauts.com/favicon.ico">
  10.  
  11. <link rel="icon" type="image/png" href="https://theyoungastronauts.com/favicon.png">
  12. <link rel="apple-touch-icon-precomposed" sizes="114x114" href="logo114.png">
  13. <link rel="apple-touch-icon-precomposed" sizes="72x72" href="logo72.png">
  14. <link rel="apple-touch-icon-precomposed" sizes="57x57" href="logo57.png">
  15.  
  16. <!-- for Google -->
  17. <meta name="description" content="The Young Astronauts creates digital experiences for brand engagement. We believe that brands who reach their audiences through creative technology are sure to gain loyalty, memorability, and overall strength. We take a strategy-first approach in our work by combining user research with human-centered design to craft unique experiences. Then we use our proven software development process to build an engaging product that works.">
  18. <meta name="keywords" content="digital agency web development toronto canada interactive">
  19.  
  20. <meta name="author" content="The Young Astronauts Inc.">
  21. <meta name="copyright" content="2018 The Young Astronauts Corp.">
  22. <meta name="application-name" content="The Young Astronauts Inc.">
  23.  
  24. <!-- for Facebook -->
  25. <meta property="og:title" content="The Young Astronauts">
  26. <meta property="og:type" content="website">
  27. <meta property="og:image" content="http://s3.amazonaws.com/YA2014/logo.gif">
  28. <meta property="og:url" content="http://theyoungastronauts.com">
  29. <meta property="og:description" content="The Young Astronauts creates digital experiences for brand engagement. We believe that brands who reach their audiences through creative technology are sure to gain loyalty, memorability, and overall strength. We take a strategy-first approach in our work by combining user research with human-centered design to craft unique experiences. Then we use our proven software development process to build an engaging product that works.">
  30.  
  31. <!-- for Twitter -->
  32. <meta name="twitter:card" content="summary">
  33. <meta name="twitter:title" content="The Young Astronauts">
  34. <meta name="twitter:description" content="The Young Astronauts creates digital experiences for brand engagement. We believe that brands who reach their audiences through creative technology are sure to gain loyalty, memorability, and overall strength. We take a strategy-first approach in our work by combining user research with human-centered design to craft unique experiences. Then we use our proven software development process to build an engaging product that works.">
  35. <meta name="twitter:image" content="http://s3.amazonaws.com/YA2014/logo.gif">
  36.  
  37.  
  38. <link rel="stylesheet" type="text/css" href="build/css/all.min.css?v=2.8">
  39.  
  40.  
  41. </head>
  42.  
  43. <body>
  44.  
  45. <div class="header" style="width: 535px;">
  46.  
  47. <div class="top">
  48. <div class="home">
  49. <div class="black-bg"></div>
  50. <div class="black-bg-lower"></div>
  51. <a href="/" title="home"><img src="images/logo-home-r.png"></a>
  52. </div>
  53. <!-- .MAIN-MENU -->
  54.  
  55. <span id="main-title"><span></span><span></span><span></span>The Young Astronauts</span>
  56.  
  57.  
  58.  
  59.  
  60. </div>
  61. <!-- /.MAIN-MENU -->
  62.  
  63. </div>
  64. <div class="container" style="height: 772px;"><ul class="grid" style="height: 772px; width: 535px; top: 0px; transition-duration: 0.5s;"><li class="row" id="row-0" style="height: 772px; left: 0px; transition-duration: 0.5s;"><ul><li class="cell current" id="cell-0-0" style="background: rgb(0, 0, 0); width: 535px; height: 772px;"><div class="slide" id="overview">
  65. <div class="cover" style="background-color: rgb(0, 0, 0); height: 772px;">
  66.  
  67. <div class="background-container" style="background:url(https://s3.amazonaws.com/cdn.theyoungastronauts.com/home/home3.jpg) no-repeat center center; background-size:cover;"></div>
  68.  
  69. <div class="keys">
  70. <div class="key-icons"></div>
  71. <div class="msg">Use arrow keys to navigate</div>
  72. </div>
  73.  
  74. <div class="tagline">
  75. <span style="color:#cf3937;">+</span> An <strong>interactive media production company.</strong><br>
  76. <span style="color:#5e95c5;">+</span> A collective of innovative artists and engineers.<br>
  77. <span style="color:#d4ca27;">+</span> A team dedicated to pushing the boundaries<br>&nbsp;&nbsp;of the unknown.<br>
  78. </div>
  79.  
  80. </div>
  81. </div>
  82. </li></ul></li><li class="row" id="row-1" style="height: 772px; left: 0px; transition-duration: 0.5s;"><ul><li class="cell" id="cell-1-0" style="width: 535px; height: 772px;"><div class="slide basic">
  83. <div class="cover" style="height: 772px;">
  84. <div class="wrap featured">
  85.  
  86. <div id="featured-image-container">
  87. <a target="_blank" href="https://makeyourdrake.com/">
  88. <img src="/images/featured/makeyourdrake.jpg" class="featured-preview">
  89. </a>
  90.  
  91. <div class="featured-copy">
  92. <p class="featured-copy-big"><a target="_blank" href="https://makeyourdrake.com/" style="color:white; text-decoration:none;">MakeYourDrake.com</a></p>
  93. <!-- <p class="featured-copy-big">2 Gold Clios</p>
  94. <p>In Social Media &amp; Digital/Mobile</p> -->
  95. </div>
  96.  
  97. </div>
  98.  
  99. <!-- <h1>Featured Project</h1>
  100. <h3>"Petting Scorpions"</h3> -->
  101. <!-- <div id="featured-video-container">
  102. <img src="/images/petting-scorpions.jpg" class="featured-preview" />
  103. <div id="featured-video-play"></div>
  104. </div> -->
  105. <script>
  106.  
  107. // function initFeature() {
  108. // window.featuredVideoContent = document.getElementById('featured-video-container').innerHTML;
  109. // window.featuredVideoPlaying = false;
  110. // var iframe = '<iframe width="920" height="517" src="https://www.youtube.com/embed/zU13Ql0HRJc?autoplay=1" frameborder="0" allowfullscreen></iframe>';
  111. // document.getElementById('featured-video-play').onclick = function() {
  112. // document.getElementById('featured-video-container').innerHTML = iframe;
  113. // window.featuredVideoPlaying = true;
  114. // }
  115. // }
  116. // initFeature();
  117. </script>
  118. </div>
  119. </div>
  120. </div>
  121. </li></ul></li><li class="row" id="row-2" style="height: 772px; left: 0px; transition-duration: 0.5s;"><ul><li class="cell" id="cell-2-0" style="width: 535px; height: 772px;"><div class="slide basic">
  122. <div class="cover" style="height: 772px;">
  123. <div class="wrap media">
  124. <div class="media-video-container">
  125.  
  126. <div class="title" id="player-title-99"></div>
  127. <div class="subtitle" id="player-subtitle-99">Interactive Reel</div>
  128.  
  129. <div id="video_99" data-vimeo-initialized="true">
  130. <iframe src="https://player.vimeo.com/video/212943861?app_id=122963" width="900" height="506" frameborder="0" title="120417 - Interactive Demo Reel" allow="autoplay; fullscreen" allowfullscreen="" data-ready="true"></iframe></div>
  131.  
  132. </div>
  133.  
  134. </div>
  135. </div>
  136. </div>
  137.  
  138. <script>
  139.  
  140. App.vimeoPlayers['player_' + 99] = new Vimeo.Player('video_99', {id: 212943861, width: 900 });
  141.  
  142. var color_options = ['#d4ca27', '#5e95c5', '#cf3937'];
  143. App.vimeoPlayers['player_' + 99].setColor(color_options[Math.floor(Math.random()*color_options.length)]);
  144.  
  145.  
  146.  
  147. App.vimeoPlayers['player_' + 99].on('play', function() {
  148. window.focus();
  149. });
  150.  
  151.  
  152.  
  153.  
  154.  
  155. </script>
  156. </li><li class="cell" id="cell-2-1" style="width: 535px; height: 772px;"><div class="slide">
  157. <div class="cover" style="height: 772px;">
  158. <div class="wrap">
  159.  
  160. <div class="cover-bg">
  161. <video class="cover-video" width="100%" height="100%" preload="meta" data-w="1280" data-h="720" style="width: auto; height: 717px; margin-top: 0px; margin-left: -369.5px;">
  162. <source src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/media/cover-bg.webm" type="video/webm">
  163. <source src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/media/cover-bg.mp4" type="video/mp4">
  164.  
  165. <img src="videos/cover.jpg">
  166. </video>
  167. </div>
  168.  
  169. <div class="overview-container">
  170. <div class="overview-image" style="background-image:url(/images/interactive/wantfolio-0.jpg);">
  171. <h3>Wantfolio</h3>
  172. <p>A fresh new website and app for wantfolio.</p>
  173. </div>
  174. <div class="overview-info">
  175. <div class="info-box">
  176. <h4>Client</h4>
  177. <p>Wanfolio Group Inc.</p>
  178. </div>
  179. <div class="info-box">
  180. <h4>Our Role</h4>
  181. <p>Design, Frontend, Backend, Mobile</p>
  182. </div>
  183. <div class="info-box">
  184. <h4>Platforms</h4>
  185. <p>Desktop, iOS, Android</p>
  186. </div>
  187. <div class="info-box">
  188. <a class="launch-button" href="http://wantfolio.com/" target="_blank">Launch <span></span></a>
  189. </div>
  190. </div>
  191.  
  192. </div>
  193.  
  194.  
  195. </div>
  196. </div>
  197. </div>
  198. </li><li class="cell" id="cell-2-2" style="width: 535px; height: 772px;"><div class="slide basic">
  199. <div class="cover" style="height: 772px;">
  200. <div class="wrap">
  201.  
  202. <img src="/images/interactive/wantfolio-1.jpg">
  203.  
  204. </div>
  205. </div>
  206. </div>
  207. </li><li class="cell" id="cell-2-3" style="width: 535px; height: 772px;"><div class="slide basic">
  208. <div class="cover" style="height: 772px;">
  209. <div class="wrap">
  210.  
  211. <img src="/images/interactive/wantfolio-2.jpg">
  212.  
  213. </div>
  214. </div>
  215. </div>
  216. </li><li class="cell" id="cell-2-4" style="width: 535px; height: 772px;"><div class="slide basic">
  217. <div class="cover" style="height: 772px;">
  218. <div class="wrap">
  219.  
  220. <img src="/images/interactive/wantfolio-3.jpg">
  221.  
  222. </div>
  223. </div>
  224. </div>
  225. </li><li class="cell" id="cell-2-5" style="width: 535px; height: 772px;"><div class="slide basic">
  226. <div class="cover" style="height: 772px;">
  227. <div class="wrap">
  228.  
  229. <img src="/images/interactive/wantfolio-4.jpg">
  230.  
  231. </div>
  232. </div>
  233. </div>
  234. </li><li class="cell" id="cell-2-6" style="width: 535px; height: 772px;"><div class="slide">
  235. <div class="cover" style="height: 772px;">
  236. <div class="wrap">
  237.  
  238. <div class="cover-bg">
  239. <video class="cover-video" width="100%" height="100%" preload="meta" data-w="1280" data-h="720" style="width: auto; height: 717px; margin-top: 0px; margin-left: -369.5px;">
  240. <source src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/media/cover-bg.webm" type="video/webm">
  241. <source src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/media/cover-bg.mp4" type="video/mp4">
  242.  
  243. <img src="videos/cover.jpg">
  244. </video>
  245. </div>
  246.  
  247. <div class="overview-container">
  248. <div class="overview-image" style="background-image:url(/images/interactive/drakesviews-0.jpg);">
  249. <h3>Drake's Views</h3>
  250. <p>Viral meme generator.</p>
  251. </div>
  252. <div class="overview-info">
  253. <div class="info-box">
  254. <h4>Client</h4>
  255. <p>-</p>
  256. </div>
  257. <div class="info-box">
  258. <h4>Our Role</h4>
  259. <p>Design, Frontend, Backend, Mobile</p>
  260. </div>
  261. <div class="info-box">
  262. <h4>Platforms</h4>
  263. <p>Desktop, Mobile</p>
  264. </div>
  265. <div class="info-box">
  266. <a class="launch-button" href="http://drakesviews.com/" target="_blank">Launch <span></span></a>
  267. </div>
  268. </div>
  269.  
  270. </div>
  271.  
  272.  
  273. </div>
  274. </div>
  275. </div>
  276. </li><li class="cell" id="cell-2-7" style="width: 535px; height: 772px;"><div class="slide basic">
  277. <div class="cover" style="height: 772px;">
  278. <div class="wrap">
  279.  
  280. <img src="/images/interactive/drakesviews-1.jpg">
  281.  
  282. </div>
  283. </div>
  284. </div>
  285. </li><li class="cell" id="cell-2-8" style="width: 535px; height: 772px;"><div class="slide basic">
  286. <div class="cover" style="height: 772px;">
  287. <div class="wrap">
  288.  
  289. <img src="/images/interactive/drakesviews-2.jpg">
  290.  
  291. </div>
  292. </div>
  293. </div>
  294. </li><li class="cell" id="cell-2-9" style="width: 535px; height: 772px;"><div class="slide basic">
  295. <div class="cover" style="height: 772px;">
  296. <div class="wrap">
  297.  
  298. <img src="/images/interactive/drakesviews-3.jpg">
  299.  
  300. </div>
  301. </div>
  302. </div>
  303. </li><li class="cell" id="cell-2-10" style="width: 535px; height: 772px;"><div class="slide">
  304. <div class="cover" style="height: 772px;">
  305. <div class="wrap">
  306.  
  307. <div class="cover-bg">
  308. <video class="cover-video" width="100%" height="100%" preload="meta" data-w="1280" data-h="720" style="width: auto; height: 717px; margin-top: 0px; margin-left: -369.5px;">
  309. <source src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/media/cover-bg.webm" type="video/webm">
  310. <source src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/media/cover-bg.mp4" type="video/mp4">
  311.  
  312. <img src="videos/cover.jpg">
  313. </video>
  314. </div>
  315.  
  316. <div class="overview-container">
  317. <div class="overview-image" style="background-image:url(/images/interactive/myseum-0.jpg);">
  318. <h3>Myseum</h3>
  319. <p>Mobile App + Website.</p>
  320. </div>
  321. <div class="overview-info">
  322. <div class="info-box">
  323. <h4>Client</h4>
  324. <p>Myseum of Toronto</p>
  325. </div>
  326. <div class="info-box">
  327. <h4>Our Role</h4>
  328. <p>Design, Frontend, Backend, Mobile</p>
  329. </div>
  330. <div class="info-box">
  331. <h4>Platforms</h4>
  332. <p>Desktop, Mobile</p>
  333. </div>
  334. <div class="info-box">
  335.  
  336. </div>
  337. </div>
  338.  
  339. </div>
  340.  
  341.  
  342. </div>
  343. </div>
  344. </div>
  345. </li><li class="cell" id="cell-2-11" style="width: 535px; height: 772px;"><div class="slide basic">
  346. <div class="cover" style="height: 772px;">
  347. <div class="wrap">
  348.  
  349. <img src="/images/interactive/myseum-1.jpg">
  350.  
  351. </div>
  352. </div>
  353. </div>
  354. </li><li class="cell" id="cell-2-12" style="width: 535px; height: 772px;"><div class="slide basic">
  355. <div class="cover" style="height: 772px;">
  356. <div class="wrap">
  357.  
  358. <img src="/images/interactive/myseum-2.jpg">
  359.  
  360. </div>
  361. </div>
  362. </div>
  363. </li><li class="cell" id="cell-2-13" style="width: 535px; height: 772px;"><div class="slide basic">
  364. <div class="cover" style="height: 772px;">
  365. <div class="wrap">
  366.  
  367. <img src="/images/interactive/myseum-3.jpg">
  368.  
  369. </div>
  370. </div>
  371. </div>
  372. </li><li class="cell" id="cell-2-14" style="width: 535px; height: 772px;"><div class="slide basic">
  373. <div class="cover" style="height: 772px;">
  374. <div class="wrap">
  375.  
  376. <img src="/images/interactive/web-1.jpg">
  377.  
  378. </div>
  379. </div>
  380. </div>
  381. </li><li class="cell" id="cell-2-15" style="width: 535px; height: 772px;"><div class="slide basic">
  382. <div class="cover" style="height: 772px;">
  383. <div class="wrap">
  384.  
  385. <img src="/images/interactive/web-2.jpg">
  386.  
  387. </div>
  388. </div>
  389. </div>
  390. </li><li class="cell" id="cell-2-16" style="width: 535px; height: 772px;"><div class="slide basic">
  391. <div class="cover" style="height: 772px;">
  392. <div class="wrap">
  393.  
  394. <img src="/images/interactive/web-3.jpg">
  395.  
  396. </div>
  397. </div>
  398. </div>
  399. </li><li class="cell" id="cell-2-17" style="width: 535px; height: 772px;"><div class="slide basic">
  400. <div class="cover" style="height: 772px;">
  401. <div class="wrap">
  402.  
  403. <img src="/images/interactive/web-4.jpg">
  404.  
  405. </div>
  406. </div>
  407. </div>
  408. </li><li class="cell" id="cell-2-18" style="width: 535px; height: 772px;"><div class="slide basic">
  409. <div class="cover" style="height: 772px;">
  410. <div class="wrap">
  411.  
  412. <img src="/images/interactive/web-5.jpg">
  413.  
  414. </div>
  415. </div>
  416. </div>
  417. </li><li class="cell" id="cell-2-19" style="width: 535px; height: 772px;"><div class="slide basic">
  418. <div class="cover" style="height: 772px;">
  419. <div class="wrap">
  420.  
  421. <img src="/images/interactive/games-1.jpg">
  422.  
  423. </div>
  424. </div>
  425. </div>
  426. </li><li class="cell" id="cell-2-20" style="width: 535px; height: 772px;"><div class="slide basic">
  427. <div class="cover" style="height: 772px;">
  428. <div class="wrap">
  429.  
  430. <img src="/images/interactive/games-2.jpg">
  431.  
  432. </div>
  433. </div>
  434. </div>
  435. </li><li class="cell" id="cell-2-21" style="width: 535px; height: 772px;"><div class="slide basic">
  436. <div class="cover" style="height: 772px;">
  437. <div class="wrap">
  438.  
  439. <img src="/images/interactive/games-3.jpg">
  440.  
  441. </div>
  442. </div>
  443. </div>
  444. </li></ul></li><li class="row" id="row-3" style="height: 772px; left: 0px; transition-duration: 0.5s;"><ul><li class="cell" id="cell-3-0" style="width: 535px; height: 772px;"><div class="slide">
  445. <div class="cover" style="height: 772px;">
  446. <div class="wrap">
  447.  
  448. <div class="cover-bg">
  449. <video class="cover-video" width="100%" height="100%" preload="meta" data-w="1280" data-h="720" style="width: auto; height: 717px; margin-top: 0px; margin-left: -369.5px;">
  450. <source src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/media/cover-bg.webm" type="video/webm">
  451. <source src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/media/cover-bg.mp4" type="video/mp4">
  452.  
  453. <img src="videos/cover.jpg">
  454. </video>
  455. </div>
  456.  
  457. <div class="overview-container">
  458. <div class="overview-image" style="background-image:url(/images/creative/ariana-0.jpg);">
  459. <h3>Ariana Grande</h3>
  460. <p>Creative Management for Ariana Grande.</p>
  461. </div>
  462. <div class="overview-info">
  463. <div class="info-box">
  464. <h4>Client</h4>
  465. <p>Republic Records</p>
  466. </div>
  467. <div class="info-box">
  468. <h4>Our Role</h4>
  469. <p>Creative Management</p>
  470. </div>
  471. <div class="info-box">
  472. <h4>Platforms</h4>
  473. <p>Web, Marketing, Music Videos, Album Artwork</p>
  474. </div>
  475. <div class="info-box">
  476. <a class="launch-button" href="http://dangerouswoman.com/" target="_blank">Launch <span></span></a>
  477. </div>
  478. </div>
  479.  
  480. </div>
  481.  
  482.  
  483. </div>
  484. </div>
  485. </div>
  486. </li><li class="cell" id="cell-3-1" style="width: 535px; height: 772px;"><div class="slide basic">
  487. <div class="cover" style="height: 772px;">
  488. <div class="wrap">
  489.  
  490. <img src="/images/creative/ariana-1.jpg">
  491.  
  492. </div>
  493. </div>
  494. </div>
  495. </li><li class="cell" id="cell-3-2" style="width: 535px; height: 772px;"><div class="slide basic">
  496. <div class="cover" style="height: 772px;">
  497. <div class="wrap">
  498.  
  499. <img src="/images/creative/ariana-2.jpg">
  500.  
  501. </div>
  502. </div>
  503. </div>
  504. </li><li class="cell" id="cell-3-3" style="width: 535px; height: 772px;"><div class="slide basic">
  505. <div class="cover" style="height: 772px;">
  506. <div class="wrap">
  507.  
  508. <img src="/images/creative/ariana-3.jpg">
  509.  
  510. </div>
  511. </div>
  512. </div>
  513. </li><li class="cell" id="cell-3-4" style="width: 535px; height: 772px;"><div class="slide basic">
  514. <div class="cover" style="height: 772px;">
  515. <div class="wrap">
  516.  
  517. <img src="/images/creative/ariana-4.jpg">
  518.  
  519. </div>
  520. </div>
  521. </div>
  522. </li><li class="cell" id="cell-3-5" style="width: 535px; height: 772px;"><div class="slide basic">
  523. <div class="cover" style="height: 772px;">
  524. <div class="wrap">
  525.  
  526. <img src="/images/creative/ariana-5.jpg">
  527.  
  528. </div>
  529. </div>
  530. </div>
  531. </li><li class="cell" id="cell-3-6" style="width: 535px; height: 772px;"><div class="slide basic">
  532. <div class="cover" style="height: 772px;">
  533. <div class="wrap">
  534.  
  535. <img src="/images/creative/ariana-6.jpg">
  536.  
  537. </div>
  538. </div>
  539. </div>
  540. </li><li class="cell" id="cell-3-7" style="width: 535px; height: 772px;"><div class="slide basic">
  541. <div class="cover" style="height: 772px;">
  542. <div class="wrap">
  543.  
  544. <img src="/images/creative/ariana-7.jpg">
  545.  
  546. </div>
  547. </div>
  548. </div>
  549. </li><li class="cell" id="cell-3-8" style="width: 535px; height: 772px;"><div class="slide">
  550. <div class="cover" style="height: 772px;">
  551. <div class="wrap">
  552.  
  553. <div class="cover-bg">
  554. <video class="cover-video" width="100%" height="100%" preload="meta" data-w="1280" data-h="720" style="width: auto; height: 717px; margin-top: 0px; margin-left: -369.5px;">
  555. <source src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/media/cover-bg.webm" type="video/webm">
  556. <source src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/media/cover-bg.mp4" type="video/mp4">
  557.  
  558. <img src="videos/cover.jpg">
  559. </video>
  560. </div>
  561.  
  562. <div class="overview-container">
  563. <div class="overview-image" style="background-image:url(/images/creative/schittscreek-0.jpg);">
  564. <h3>Schitt's Creek</h3>
  565. <p>Marketing and Advertising for CBC's Schitt's Creek</p>
  566. </div>
  567. <div class="overview-info">
  568. <div class="info-box">
  569. <h4>Client</h4>
  570. <p>CBC &amp;amp; PopTV</p>
  571. </div>
  572. <div class="info-box">
  573. <h4>Our Role</h4>
  574. <p>Marketing</p>
  575. </div>
  576. <div class="info-box">
  577. <h4>Platforms</h4>
  578. <p>Strategy, Design, Marketing, Video</p>
  579. </div>
  580. <div class="info-box">
  581.  
  582. </div>
  583. </div>
  584.  
  585. </div>
  586.  
  587.  
  588. </div>
  589. </div>
  590. </div>
  591. </li><li class="cell" id="cell-3-9" style="width: 535px; height: 772px;"><div class="slide basic">
  592. <div class="cover" style="height: 772px;">
  593. <div class="wrap">
  594.  
  595. <img src="/images/creative/schittscreek-1.jpg">
  596.  
  597. </div>
  598. </div>
  599. </div>
  600. </li><li class="cell" id="cell-3-10" style="width: 535px; height: 772px;"><div class="slide basic">
  601. <div class="cover" style="height: 772px;">
  602. <div class="wrap">
  603.  
  604. <img src="/images/creative/schittscreek-2.jpg">
  605.  
  606. </div>
  607. </div>
  608. </div>
  609. </li><li class="cell" id="cell-3-11" style="width: 535px; height: 772px;"><div class="slide basic">
  610. <div class="cover" style="height: 772px;">
  611. <div class="wrap">
  612.  
  613. <img src="/images/creative/schittscreek-3.jpg">
  614.  
  615. </div>
  616. </div>
  617. </div>
  618. </li><li class="cell" id="cell-3-12" style="width: 535px; height: 772px;"><div class="slide basic">
  619. <div class="cover" style="height: 772px;">
  620. <div class="wrap">
  621.  
  622. <img src="/images/creative/schittscreek-4.jpg">
  623.  
  624. </div>
  625. </div>
  626. </div>
  627. </li><li class="cell" id="cell-3-13" style="width: 535px; height: 772px;"><div class="slide basic">
  628. <div class="cover" style="height: 772px;">
  629. <div class="wrap">
  630.  
  631. <img src="/images/creative/schittscreek-5.jpg">
  632.  
  633. </div>
  634. </div>
  635. </div>
  636. </li><li class="cell" id="cell-3-14" style="width: 535px; height: 772px;"><div class="slide basic">
  637. <div class="cover" style="height: 772px;">
  638. <div class="wrap">
  639.  
  640. <img src="/images/creative/schittscreek-6.jpg">
  641.  
  642. </div>
  643. </div>
  644. </div>
  645. </li><li class="cell" id="cell-3-15" style="width: 535px; height: 772px;"><div class="slide basic">
  646. <div class="cover" style="height: 772px;">
  647. <div class="wrap">
  648.  
  649. <img src="/images/creative/schittscreek-7.jpg">
  650.  
  651. </div>
  652. </div>
  653. </div>
  654. </li><li class="cell" id="cell-3-16" style="width: 535px; height: 772px;"><div class="slide basic">
  655. <div class="cover" style="height: 772px;">
  656. <div class="wrap">
  657.  
  658. <img src="/images/creative/schittscreek-8.jpg">
  659.  
  660. </div>
  661. </div>
  662. </div>
  663. </li></ul></li><li class="row" id="row-4" style="height: 772px; left: 0px; transition-duration: 0.5s;"><ul><li class="cell" id="cell-4-0" style="width: 535px; height: 772px;"><div class="slide basic">
  664. <div class="cover" style="height: 772px;">
  665. <div class="wrap media">
  666. <div class="media-video-container">
  667.  
  668. <div class="title" id="player-title-1">The Young Astronauts</div>
  669. <div class="subtitle" id="player-subtitle-1">Demo Reel</div>
  670.  
  671. <div id="video_1" data-vimeo-initialized="true">
  672. <iframe src="https://player.vimeo.com/video/179090288?app_id=122963" width="900" height="506" frameborder="0" title="The Young Astronauts 2017 Reel" allow="autoplay; fullscreen" allowfullscreen="" data-ready="true"></iframe></div>
  673.  
  674. </div>
  675.  
  676. </div>
  677. </div>
  678. </div>
  679.  
  680. <script>
  681.  
  682. App.vimeoPlayers['player_' + 1] = new Vimeo.Player('video_1', {id: 179090288, width: 900 });
  683.  
  684. var color_options = ['#d4ca27', '#5e95c5', '#cf3937'];
  685. App.vimeoPlayers['player_' + 1].setColor(color_options[Math.floor(Math.random()*color_options.length)]);
  686.  
  687.  
  688.  
  689. App.vimeoPlayers['player_' + 1].on('play', function() {
  690. window.focus();
  691. });
  692.  
  693.  
  694.  
  695.  
  696.  
  697. </script>
  698. </li><li class="cell" id="cell-4-1" style="width: 535px; height: 772px;"><div class="slide basic">
  699. <div class="cover" style="height: 772px;">
  700. <div class="wrap media">
  701. <div class="media-video-container">
  702.  
  703. <div class="title" id="player-title-2">Ariana Grande</div>
  704. <div class="subtitle" id="player-subtitle-2">Problem</div>
  705.  
  706. <div id="video_2" data-vimeo-initialized="true">
  707. <iframe src="https://player.vimeo.com/video/211319678?app_id=122963" width="900" height="506" frameborder="0" title="Ariana Grande - Problem ft. Iggy Azalea" allow="autoplay; fullscreen" allowfullscreen="" data-ready="true"></iframe></div>
  708.  
  709. </div>
  710.  
  711. </div>
  712. </div>
  713. </div>
  714.  
  715. <script>
  716.  
  717. App.vimeoPlayers['player_' + 2] = new Vimeo.Player('video_2', {id: 211319678, width: 900 });
  718.  
  719. var color_options = ['#d4ca27', '#5e95c5', '#cf3937'];
  720. App.vimeoPlayers['player_' + 2].setColor(color_options[Math.floor(Math.random()*color_options.length)]);
  721.  
  722.  
  723.  
  724. App.vimeoPlayers['player_' + 2].on('play', function() {
  725. window.focus();
  726. });
  727.  
  728.  
  729.  
  730.  
  731.  
  732. </script>
  733. </li><li class="cell" id="cell-4-2" style="width: 535px; height: 772px;"><div class="slide basic">
  734. <div class="cover" style="height: 772px;">
  735. <div class="wrap media">
  736. <div class="media-video-container">
  737.  
  738. <div class="title" id="player-title-4">Janelle Monáe</div>
  739. <div class="subtitle" id="player-subtitle-4">Heroes</div>
  740.  
  741. <div id="video_4">
  742.  
  743. <iframe width="900" height="506" src="https://www.youtube.com/embed/3HS6Jh3O6r4?controls=1&amp;enablejsapi=1&amp;showinfo=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;disablekb=1&amp;playerapiid=Youtube_4" frameborder="0" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen"></iframe>
  744. </div>
  745.  
  746. </div>
  747.  
  748. </div>
  749. </div>
  750. </div>
  751.  
  752. <script>
  753.  
  754.  
  755.  
  756.  
  757. App.youtubePlayers['player_4'] = {};
  758. App.youtubePlayers['player_4']['iframe'] = $("#youtube_iframe_4");
  759.  
  760. window['onStateChangeYoutube_4'] = function(event) {
  761. window.focus();
  762. }
  763.  
  764.  
  765. </script>
  766. </li><li class="cell" id="cell-4-3" style="width: 535px; height: 772px;"><div class="slide basic">
  767. <div class="cover" style="height: 772px;">
  768. <div class="wrap media">
  769. <div class="media-video-container">
  770.  
  771. <div class="title" id="player-title-5">Ariana Grande</div>
  772. <div class="subtitle" id="player-subtitle-5">Right There</div>
  773.  
  774. <div id="video_5">
  775.  
  776. <iframe width="900" height="506" src="https://www.youtube.com/embed/fhcpubAVdmc?controls=1&amp;enablejsapi=1&amp;showinfo=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;disablekb=1&amp;playerapiid=Youtube_5" frameborder="0" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen"></iframe>
  777. </div>
  778.  
  779. </div>
  780.  
  781. </div>
  782. </div>
  783. </div>
  784.  
  785. <script>
  786.  
  787.  
  788.  
  789.  
  790. App.youtubePlayers['player_5'] = {};
  791. App.youtubePlayers['player_5']['iframe'] = $("#youtube_iframe_5");
  792.  
  793. window['onStateChangeYoutube_5'] = function(event) {
  794. window.focus();
  795. }
  796.  
  797.  
  798. </script>
  799. </li><li class="cell" id="cell-4-4" style="width: 535px; height: 772px;"><div class="slide basic">
  800. <div class="cover" style="height: 772px;">
  801. <div class="wrap media">
  802. <div class="media-video-container">
  803.  
  804. <div class="title" id="player-title-10">Jack &amp; Jack</div>
  805. <div class="subtitle" id="player-subtitle-10">All Weekend Long</div>
  806.  
  807. <div id="video_10">
  808.  
  809. <iframe width="900" height="506" src="https://www.youtube.com/embed/iHdRDD6Zo4U?controls=1&amp;enablejsapi=1&amp;showinfo=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;disablekb=1&amp;playerapiid=Youtube_10" frameborder="0" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen"></iframe>
  810. </div>
  811.  
  812. </div>
  813.  
  814. </div>
  815. </div>
  816. </div>
  817.  
  818. <script>
  819.  
  820.  
  821.  
  822.  
  823. App.youtubePlayers['player_10'] = {};
  824. App.youtubePlayers['player_10']['iframe'] = $("#youtube_iframe_10");
  825.  
  826. window['onStateChangeYoutube_10'] = function(event) {
  827. window.focus();
  828. }
  829.  
  830.  
  831. </script>
  832. </li><li class="cell" id="cell-4-5" style="width: 535px; height: 772px;"><div class="slide basic">
  833. <div class="cover" style="height: 772px;">
  834. <div class="wrap media">
  835. <div class="media-video-container">
  836.  
  837. <div class="title" id="player-title-12">Flosstradamus, GTA &amp; Lil Jon</div>
  838. <div class="subtitle" id="player-subtitle-12">Prison Riot</div>
  839.  
  840. <div id="video_12">
  841.  
  842. <iframe width="900" height="506" src="https://www.youtube.com/embed/OcvunrplrZc?controls=1&amp;enablejsapi=1&amp;showinfo=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;disablekb=1&amp;playerapiid=Youtube_12" frameborder="0" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen"></iframe>
  843. </div>
  844.  
  845. </div>
  846.  
  847. </div>
  848. </div>
  849. </div>
  850.  
  851. <script>
  852.  
  853.  
  854.  
  855.  
  856. App.youtubePlayers['player_12'] = {};
  857. App.youtubePlayers['player_12']['iframe'] = $("#youtube_iframe_12");
  858.  
  859. window['onStateChangeYoutube_12'] = function(event) {
  860. window.focus();
  861. }
  862.  
  863.  
  864. </script>
  865. </li><li class="cell" id="cell-4-6" style="width: 535px; height: 772px;"><div class="slide basic">
  866. <div class="cover" style="height: 772px;">
  867. <div class="wrap media">
  868. <div class="media-video-container">
  869.  
  870. <div class="title" id="player-title-3">Schitt's Creek</div>
  871. <div class="subtitle" id="player-subtitle-3">TV Commercial</div>
  872.  
  873. <div id="video_3" data-vimeo-initialized="true">
  874. <iframe src="https://player.vimeo.com/video/210975098?app_id=122963" width="900" height="506" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="" data-ready="true"></iframe></div>
  875.  
  876. </div>
  877.  
  878. </div>
  879. </div>
  880. </div>
  881.  
  882. <script>
  883.  
  884. App.vimeoPlayers['player_' + 3] = new Vimeo.Player('video_3', {id: 210975098, width: 900 });
  885.  
  886. var color_options = ['#d4ca27', '#5e95c5', '#cf3937'];
  887. App.vimeoPlayers['player_' + 3].setColor(color_options[Math.floor(Math.random()*color_options.length)]);
  888.  
  889.  
  890.  
  891. App.vimeoPlayers['player_' + 3].on('play', function() {
  892. window.focus();
  893. });
  894.  
  895.  
  896.  
  897.  
  898.  
  899. </script>
  900. </li><li class="cell" id="cell-4-7" style="width: 535px; height: 772px;"><div class="slide basic">
  901. <div class="cover" style="height: 772px;">
  902. <div class="wrap media">
  903. <div class="media-video-container">
  904.  
  905. <div class="title" id="player-title-7">Teenage Mutant Ninja Turtles</div>
  906. <div class="subtitle" id="player-subtitle-7">TV Commercial</div>
  907.  
  908. <div id="video_7" data-vimeo-initialized="true">
  909. <iframe src="https://player.vimeo.com/video/210996123?app_id=122963" width="900" height="506" frameborder="0" title="TMNT Commercial" allow="autoplay; fullscreen" allowfullscreen="" data-ready="true"></iframe></div>
  910.  
  911. </div>
  912.  
  913. </div>
  914. </div>
  915. </div>
  916.  
  917. <script>
  918.  
  919. App.vimeoPlayers['player_' + 7] = new Vimeo.Player('video_7', {id: 210996123, width: 900 });
  920.  
  921. var color_options = ['#d4ca27', '#5e95c5', '#cf3937'];
  922. App.vimeoPlayers['player_' + 7].setColor(color_options[Math.floor(Math.random()*color_options.length)]);
  923.  
  924.  
  925.  
  926. App.vimeoPlayers['player_' + 7].on('play', function() {
  927. window.focus();
  928. });
  929.  
  930.  
  931.  
  932.  
  933.  
  934. </script>
  935. </li><li class="cell" id="cell-4-8" style="width: 535px; height: 772px;"><div class="slide basic">
  936. <div class="cover" style="height: 772px;">
  937. <div class="wrap media">
  938. <div class="media-video-container">
  939.  
  940. <div class="title" id="player-title-6">Blasters of the Universe</div>
  941. <div class="subtitle" id="player-subtitle-6">VR Game Trailer</div>
  942.  
  943. <div id="video_6" data-vimeo-initialized="true">
  944. <iframe src="https://player.vimeo.com/video/210996887?app_id=122963" width="900" height="506" frameborder="0" title="Blasters Trailer" allow="autoplay; fullscreen" allowfullscreen="" data-ready="true"></iframe></div>
  945.  
  946. </div>
  947.  
  948. </div>
  949. </div>
  950. </div>
  951.  
  952. <script>
  953.  
  954. App.vimeoPlayers['player_' + 6] = new Vimeo.Player('video_6', {id: 210996887, width: 900 });
  955.  
  956. var color_options = ['#d4ca27', '#5e95c5', '#cf3937'];
  957. App.vimeoPlayers['player_' + 6].setColor(color_options[Math.floor(Math.random()*color_options.length)]);
  958.  
  959.  
  960.  
  961. App.vimeoPlayers['player_' + 6].on('play', function() {
  962. window.focus();
  963. });
  964.  
  965.  
  966.  
  967.  
  968.  
  969. </script>
  970. </li><li class="cell" id="cell-4-9" style="width: 535px; height: 772px;"><div class="slide basic">
  971. <div class="cover" style="height: 772px;">
  972. <div class="wrap media">
  973. <div class="media-video-container">
  974.  
  975. <div class="title" id="player-title-8">City Seed</div>
  976. <div class="subtitle" id="player-subtitle-8">Start-up Explanatory Animation</div>
  977.  
  978. <div id="video_8" data-vimeo-initialized="true">
  979. <iframe src="https://player.vimeo.com/video/210998304?app_id=122963" width="900" height="506" frameborder="0" title="City Seed Animation" allow="autoplay; fullscreen" allowfullscreen="" data-ready="true"></iframe></div>
  980.  
  981. </div>
  982.  
  983. </div>
  984. </div>
  985. </div>
  986.  
  987. <script>
  988.  
  989. App.vimeoPlayers['player_' + 8] = new Vimeo.Player('video_8', {id: 210998304, width: 900 });
  990.  
  991. var color_options = ['#d4ca27', '#5e95c5', '#cf3937'];
  992. App.vimeoPlayers['player_' + 8].setColor(color_options[Math.floor(Math.random()*color_options.length)]);
  993.  
  994.  
  995.  
  996. App.vimeoPlayers['player_' + 8].on('play', function() {
  997. window.focus();
  998. });
  999.  
  1000.  
  1001.  
  1002.  
  1003.  
  1004. </script>
  1005. </li><li class="cell" id="cell-4-10" style="width: 535px; height: 772px;"><div class="slide basic">
  1006. <div class="cover" style="height: 772px;">
  1007. <div class="wrap media">
  1008. <div class="media-video-container">
  1009.  
  1010. <div class="title" id="player-title-9">Cancer Bats</div>
  1011. <div class="subtitle" id="player-subtitle-9">Album Promo Video</div>
  1012.  
  1013. <div id="video_9" data-vimeo-initialized="true">
  1014. <iframe src="https://player.vimeo.com/video/210999232?app_id=122963" width="900" height="506" frameborder="0" title="Cancer Bats" allow="autoplay; fullscreen" allowfullscreen="" data-ready="true"></iframe></div>
  1015.  
  1016. </div>
  1017.  
  1018. </div>
  1019. </div>
  1020. </div>
  1021.  
  1022. <script>
  1023.  
  1024. App.vimeoPlayers['player_' + 9] = new Vimeo.Player('video_9', {id: 210999232, width: 900 });
  1025.  
  1026. var color_options = ['#d4ca27', '#5e95c5', '#cf3937'];
  1027. App.vimeoPlayers['player_' + 9].setColor(color_options[Math.floor(Math.random()*color_options.length)]);
  1028.  
  1029.  
  1030.  
  1031. App.vimeoPlayers['player_' + 9].on('play', function() {
  1032. window.focus();
  1033. });
  1034.  
  1035.  
  1036.  
  1037.  
  1038.  
  1039. </script>
  1040. </li><li class="cell" id="cell-4-11" style="width: 535px; height: 772px;"><div class="slide basic">
  1041. <div class="cover" style="height: 772px;">
  1042. <div class="wrap media">
  1043. <div class="media-video-container">
  1044.  
  1045. <div class="title" id="player-title-11">Lonely Comet</div>
  1046. <div class="subtitle" id="player-subtitle-11">Short Film</div>
  1047.  
  1048. <div id="video_11" data-vimeo-initialized="true">
  1049. <iframe src="https://player.vimeo.com/video/210999655?app_id=122963" width="900" height="506" frameborder="0" title="The Lonely Comet" allow="autoplay; fullscreen" allowfullscreen="" data-ready="true"></iframe></div>
  1050.  
  1051. </div>
  1052.  
  1053. </div>
  1054. </div>
  1055. </div>
  1056.  
  1057. <script>
  1058.  
  1059. App.vimeoPlayers['player_' + 11] = new Vimeo.Player('video_11', {id: 210999655, width: 900 });
  1060.  
  1061. var color_options = ['#d4ca27', '#5e95c5', '#cf3937'];
  1062. App.vimeoPlayers['player_' + 11].setColor(color_options[Math.floor(Math.random()*color_options.length)]);
  1063.  
  1064.  
  1065.  
  1066. App.vimeoPlayers['player_' + 11].on('play', function() {
  1067. window.focus();
  1068. });
  1069.  
  1070.  
  1071.  
  1072.  
  1073.  
  1074. </script>
  1075. </li></ul></li><li class="row" id="row-5" style="height: 772px; left: 0px; transition-duration: 0.5s;"><ul><li class="cell" id="cell-5-0" style="width: 535px; height: 772px;"><div class="slide" id="services-page">
  1076.  
  1077. <div class="cover" style="height: 772px;">
  1078.  
  1079. <div class="services-top" style="height: 386px;">
  1080. <div class="services-copy" id="services-copy-overview">
  1081.  
  1082.  
  1083.  
  1084. <p class="services-title">The Young Astronauts</p>
  1085. <!--<p>One small step for your company, one giant leap for your brand. </p>-->
  1086. <p>We are an interactive media production company that helps artists and clients create exciting sites, products, and content through our creative digital work and vast knowledge of the multimedia universe. We provide technical and aesthetic strategies that bridge all forms of media and blend them seamlessly, from conception all the way through to launch. </p>
  1087.  
  1088. </div>
  1089.  
  1090. <div class="services-copy" id="services-copy-design">
  1091.  
  1092. <div class="services-abstract">
  1093. <img src="/images/services/design.gif">
  1094. </div>
  1095.  
  1096. Whether it's a new logo, the look and feel of a website, or an entirely new brand, we always present clients with work that pushes the boundaries of digital and visual space. When we create, we're always conscious of a design’s context within both the online and physical universe.
  1097. </div>
  1098.  
  1099. <div class="services-copy" id="services-copy-media">
  1100.  
  1101. <div class="services-abstract">
  1102. <img src="/images/services/media.gif" style="margin-top:40px">
  1103. </div>
  1104.  
  1105. The global team of talented and experienced artists in our orbit ensures that we surpass the competition on any video or photography project. We make sure that our employees are experts in every field - whether that means our roster of acclaimed directors or our network of award-winning designers.
  1106. </div>
  1107.  
  1108. <div class="services-copy" id="services-copy-interactive">
  1109.  
  1110. <div class="services-abstract" id="services-abstract-interactive">
  1111. <img src="/images/services/interactive.gif">
  1112. </div>
  1113.  
  1114. The YA workflow makes use of the newest open-source technologies, which allows for a focus on innovation, not mundane tasks. Whether you need an app, game, website, or interactive video, we will deliver online experiences that promise to take you where no user has gone before.
  1115. </div>
  1116.  
  1117. <div class="services-copy" id="services-copy-strategy">
  1118.  
  1119. <div class="services-abstract">
  1120. <img src="/images/services/strategy4.gif">
  1121. </div>
  1122.  
  1123. It's common that clients know they want to take a small step for their company, but accomplish a giant leap for their brand. YA can always propose a unique solution that will attract more visitors, make tasks more efficient, or simply get you on the map. Our multifaceted team draws from a vast array of backgrounds and experience to help offer diverse ideas and solutions for any interactive or media adventure.
  1124. </div>
  1125. </div>
  1126.  
  1127. <div class="services-bottom" style="height: 386px;">
  1128.  
  1129. <div class="wrap clearfix">
  1130.  
  1131. <div class="column strategy" rel="strategy" data-gs-title="strategy">
  1132.  
  1133. <ul>
  1134. <li class="title" style="margin-bottom: 38.5px;"><span style="color:#000">+</span> Strategy</li>
  1135.  
  1136.  
  1137. <li>- Digital Strategy</li>
  1138. <li>- Brand Strategy</li>
  1139. <li>- Social Media Management &amp; Strategy</li>
  1140. <li>- Traditional Advertising Campaigns</li>
  1141. <li>- Live Events</li>
  1142. <li>- Product Development</li>
  1143. <li>- Usability Research</li>
  1144. <li>- Content Strategy</li>
  1145. </ul>
  1146.  
  1147.  
  1148.  
  1149. </div>
  1150.  
  1151. <div class="column interactive" rel="interactive" data-gs-title="interactive">
  1152.  
  1153. <ul>
  1154. <li class="title" style="margin-bottom: 49.5px;"><span style="color:#000">+</span> Interactive</li>
  1155.  
  1156.  
  1157. <li>- Web Applications</li>
  1158. <li>- Frontend Engineering</li>
  1159. <li>- Backend Engineering</li>
  1160. <li>- System Architecture</li>
  1161. <li>- Custom Content Management Systems</li>
  1162. <li>- Native App Development</li>
  1163. <li>- E-Commerce</li>
  1164. <li>- API Integration</li>
  1165. </ul>
  1166.  
  1167. <a class="launch-button" onclick="App.GoToCoords(0,2);">Go To Section <span></span></a>
  1168.  
  1169. </div>
  1170.  
  1171. <div class="column creative" rel="design" data-gs-title="creative">
  1172.  
  1173. <ul>
  1174. <li class="title" style="margin-bottom: 40.5px;"><span style="color:#000;">+</span> Creative</li>
  1175.  
  1176. <li>- Logo Design</li>
  1177. <li>- Branding</li>
  1178. <li>- Illustration</li>
  1179. <li>- User Experience</li>
  1180. <li>- Interface Design</li>
  1181. <li>- Mobile Design</li>
  1182. <li>- App Design</li>
  1183. <li>- Responsive Design</li>
  1184. <li>- Large Scale Print Design</li>
  1185.  
  1186.  
  1187. </ul>
  1188.  
  1189. <a class="launch-button" onclick="App.GoToCoords(0,3);">Go To Section <span></span></a>
  1190.  
  1191. </div>
  1192. <div class="column media" rel="media" data-gs-title="media">
  1193.  
  1194. <ul>
  1195. <li class="title" style="margin-bottom: 42px;"><span style="color:#000">+</span> Media</li>
  1196.  
  1197.  
  1198. <li>- Scriptwriting</li>
  1199. <li>- Production</li>
  1200. <li>- Editing</li>
  1201. <li>- Post Production</li>
  1202. <li>- Color Correction</li>
  1203. <li>- Music Composition &amp; Sound Design</li>
  1204. <li>- 2D &amp; 3D Animation</li>
  1205. <li>- Live Event Coverage &amp; Streaming</li>
  1206.  
  1207. </ul>
  1208.  
  1209. <a class="launch-button" onclick="App.GoToCoords(0,4);">Go To Section <span></span></a>
  1210.  
  1211. </div>
  1212.  
  1213.  
  1214. </div>
  1215. </div>
  1216. </div>
  1217.  
  1218. </div>
  1219. </li></ul></li><li class="row" id="row-6" style="height: 772px; left: 0px; transition-duration: 0.5s;"><ul><li class="cell" id="cell-6-0" style="width: 535px; height: 772px;"><div class="slide" id="team-sub">
  1220.  
  1221. <div class="cover" style="height: 772px;">
  1222.  
  1223. <div class="wrap">
  1224.  
  1225. <div class="team-body">
  1226. <div class="stars"></div>
  1227. <img class="team-title" src="/images/team-page/ya-title.png">
  1228. <div class="moon-bg"></div>
  1229. <ul class="top-row">
  1230. <li onclick="">
  1231. <img src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/team/pixels/nev.png">
  1232. <span class="sprite nev">
  1233. <img class="helmet" src="/images/team-sprites/helmet-covered.png">
  1234. </span>
  1235. </li><!--
  1236. --><li onclick="">
  1237. <img src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/team/pixels/tyler.png">
  1238. <span class="sprite tyler">
  1239. <img class="helmet" src="/images/team-sprites/helmet-covered.png">
  1240. </span>
  1241. </li><!--
  1242. --><li onclick="">
  1243. <img src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/team/pixels/jamied.png">
  1244. <span class="sprite jamied">
  1245. <img class="helmet" src="/images/team-sprites/helmet-covered.png">
  1246. </span>
  1247. </li><!--
  1248. --><li onclick="">
  1249. <img src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/team/pixels/justin.png">
  1250. <span class="sprite justin">
  1251. <img class="helmet" src="/images/team-sprites/helmet-covered.png">
  1252. </span>
  1253. </li><!--
  1254. --><li onclick="">
  1255. <img src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/team/pixels/dilly.png">
  1256. <span class="sprite dilly">
  1257. <img class="helmet" src="/images/team-sprites/helmet-covered.png">
  1258. </span>
  1259. </li><!--
  1260. --><li onclick="">
  1261. <img src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/team/pixels/tucker.png">
  1262. <span class="sprite tucker">
  1263. <img class="helmet" src="/images/team-sprites/helmet-covered.png">
  1264. </span>
  1265. </li><!--
  1266. --><li onclick="">
  1267. <img src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/team/pixels/adam.png">
  1268. <span class="sprite adam">
  1269. <img class="helmet" src="/images/team-sprites/helmet-covered.png">
  1270. </span>
  1271. </li><!--
  1272. --><li onclick="">
  1273. <img src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/team/pixels/john2.png">
  1274. <span class="sprite john">
  1275. <img class="helmet" src="/images/team-sprites/helmet-covered.png">
  1276. </span>
  1277. </li><!--
  1278. --><li onclick="">
  1279. <img src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/team/pixels/mark.png">
  1280. <span class="sprite mark">
  1281. <img class="helmet" src="/images/team-sprites/helmet-covered.png">
  1282. </span>
  1283. </li><!--
  1284. --><li onclick="">
  1285. <img src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/team/pixels/jason.png">
  1286. <span class="sprite jason">
  1287. <img class="helmet" src="/images/team-sprites/helmet-covered.png">
  1288. </span>
  1289. </li><!--
  1290. --><li onclick="">
  1291. <img src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/team/pixels/flo.png">
  1292. <span class="sprite flo">
  1293. <img class="helmet" src="/images/team-sprites/helmet-covered.png">
  1294. </span>
  1295. </li><!--
  1296. --><li onclick="">
  1297. <img src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/team/pixels/hayley.png">
  1298. <span class="sprite hayley">
  1299. <img class="helmet" src="/images/team-sprites/helmet-covered.png">
  1300. </span>
  1301. </li><!--
  1302. --><li onclick="">
  1303. <img src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/team/pixels/taylor.png">
  1304. <span class="sprite taylor">
  1305. <img class="helmet" src="/images/team-sprites/helmet-covered.png">
  1306. </span>
  1307. </li><!--
  1308. --><li onclick="">
  1309. <img src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/team/pixels/la.png">
  1310. <span class="sprite la">
  1311. <img class="helmet" src="/images/team-sprites/helmet-covered.png">
  1312. </span>
  1313. </li><!--
  1314. --><li onclick="">
  1315. <img src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/team/pixels/astro.png" id="pixel-astro">
  1316. <span class="sprite astro">
  1317.  
  1318. </span>
  1319. </li>
  1320. </ul>
  1321. </div>
  1322.  
  1323. <div class="team-footer">
  1324. <img class="start" onclick="App.GoToCoords(0,9);" style="cursor:pointer;" src="/images/team-page/press-start2.gif">
  1325. <div class="team-flag"></div>
  1326. </div>
  1327.  
  1328.  
  1329.  
  1330. </div>
  1331. </div>
  1332. </div>
  1333. </li></ul></li><li class="row" id="row-7" style="height: 772px; left: 0px; transition-duration: 0.5s;"><ul><li class="cell" id="cell-7-0" style="width: 535px; height: 772px;"><div class="slide" id="clients-page">
  1334.  
  1335. <div class="cover" style="height: 772px;">
  1336.  
  1337. <div class="wrap">
  1338.  
  1339. <div id="client-map-container">
  1340. <div id="client-map"></div>
  1341. </div>
  1342.  
  1343. <div class="client-list-bg"></div>
  1344. <div id="client-list-container">
  1345. <ul class="yellow">
  1346. <li>ariana grande</li>
  1347. <li>atlantic records</li>
  1348. <li>bell</li>
  1349. <li>big sean</li>
  1350. <li>cbc</li>
  1351. <li>chango</li>
  1352. <li>childish gambino</li>
  1353. <li>cirque du soleil</li>
  1354. <li>cody simpson</li>
  1355. <li>colony pictures</li>
  1356. <li>dine alone records</li>
  1357. <li>distort</li>
  1358. <li>dove</li>
  1359. <li>emi</li>
  1360. <li>entertainment one</li>
  1361. </ul>
  1362.  
  1363. <ul class="red">
  1364. <li>get fresh co</li>
  1365. <li>intelligent creatures</li>
  1366. <li>jerome jarre</li>
  1367. <li>justin bieber</li>
  1368. <li>live nation</li>
  1369. <li>mozilla</li>
  1370. <li>myseum of toronto</li>
  1371. <li>nickelodeon</li>
  1372. <li>nike</li>
  1373. <li>pepsi</li>
  1374. <li>playfight</li>
  1375. <li>red bull</li>
  1376. <li>republic records</li>
  1377. <li>samsung</li>
  1378. <li>sandals resorts</li>
  1379. </ul>
  1380.  
  1381. <ul class="blue">
  1382. <li>scooter braun projects</li>
  1383. <li>secret location</li>
  1384. <li>steve aoki</li>
  1385. <li>stx entertainment</li>
  1386. <li>trapstar</li>
  1387. <li>tsn</li>
  1388. <li>two bit circus</li>
  1389. <li>universal music</li>
  1390. <li>university of toronto</li>
  1391. <li>viacom</li>
  1392. <li>videri</li>
  1393. <li>waka flocka flame</li>
  1394. <li>wantfolio group</li>
  1395. <li>warner music</li>
  1396. <li>wiz khalifa</li>
  1397. </ul>
  1398. </div>
  1399.  
  1400. <!-- <div id="client-switch" class="">
  1401.  
  1402. </div> -->
  1403.  
  1404.  
  1405.  
  1406. </div>
  1407. <div class="clear"></div>
  1408. </div>
  1409. </div>
  1410. </li></ul></li><li class="row" id="row-8" style="height: 772px; left: 0px; transition-duration: 0.5s;"><ul><li class="cell" id="cell-8-0" style="width: 535px; height: 772px;"><div class="slide" id="press-page">
  1411.  
  1412. <div class="cover" style="height: 772px;">
  1413.  
  1414. <div class="wrap clearfix">
  1415.  
  1416. <div class="column" data-open="url" data-url="http://deadline.com/2016/10/stx-digital-content-deal-the-young-astronauts-1201844673/">
  1417. <div class="thumb" style="background-image:url(/images/press/deadline_color.png)"></div>
  1418.  
  1419. <div class="detail" style="background-image:url(/images/press/deadline_bg.jpg)">
  1420.  
  1421. <div class="thumb-fg" style="background-image:url(/images/press/deadline_black.png)"></div>
  1422.  
  1423. <div class="quote">"STX Entertainment Partners With Toronto Company The Young Astronauts For Digital Content"</div>
  1424. <div class="open">»</div>
  1425.  
  1426. </div>
  1427. </div>
  1428. <div class="column" data-open="url" data-url="http://time.com/4310761/drake-views-from-the-6-cover-meme/">
  1429. <div class="thumb" style="background-image:url(/images/press/time_color.png)"></div>
  1430.  
  1431. <div class="detail" style="background-image:url(/images/press/time_bg.jpg)">
  1432.  
  1433. <div class="thumb-fg" style="background-image:url(/images/press/time_black.png)"></div>
  1434.  
  1435. <div class="quote">"Now You Can Add a Tiny Drake to Any Photo"</div>
  1436. <div class="open">»</div>
  1437.  
  1438. </div>
  1439. </div>
  1440. <div class="column" data-open="url" data-url="http://www.huffingtonpost.com/2014/06/11/janelle-monae-heroes_n_5484123.html">
  1441. <div class="thumb" style="background-image:url(/images/press/huff_color.png)"></div>
  1442.  
  1443. <div class="detail" style="background-image:url(/images/press/huff_bg.jpg)">
  1444.  
  1445. <div class="thumb-fg" style="background-image:url(/images/press/huff_black.png)"></div>
  1446.  
  1447. <div class="quote">"...Inspiring Anthem For Today’s Youth."</div>
  1448. <div class="open">»</div>
  1449.  
  1450. </div>
  1451. </div>
  1452. <div class="column" data-open="url" data-url="http://pitchfork.com/news/64403-watch-ariana-grandes-dangerous-woman-video/">
  1453. <div class="thumb" style="background-image:url(/images/press/pitchfork_black.png)"></div>
  1454.  
  1455. <div class="detail" style="background-image:url(/images/press/pitchfork_bg.jpg)">
  1456.  
  1457. <div class="thumb-fg" style="background-image:url(/images/press/pitchfork_white.png)"></div>
  1458.  
  1459. <div class="quote">"Watch Ariana Grande's "Dangerous Woman" Video"</div>
  1460. <div class="open">»</div>
  1461.  
  1462. </div>
  1463. </div>
  1464. <div class="column" data-open="url" data-url="http://www.rollingstone.com/music/videos/ariana-grande-channels-shakespeare-in-right-there-20131030">
  1465. <div class="thumb" style="background-image:url(/images/press/rollingstone_color.png)"></div>
  1466.  
  1467. <div class="detail" style="background-image:url(/images/press/rollingstone_bg.jpg)">
  1468.  
  1469. <div class="thumb-fg" style="background-image:url(/images/press/rollingstone_white.png)"></div>
  1470.  
  1471. <div class="quote">"...Channels Shakespeare in 'Right There'"</div>
  1472. <div class="open">»</div>
  1473.  
  1474. </div>
  1475. </div>
  1476. <div class="column" data-open="url" data-url="http://www.mtv.com/news/articles/1716709/ariana-grande-right-there-video-secrets.jhtml">
  1477. <div class="thumb" style="background-image:url(/images/press/mtv_color.png)"></div>
  1478.  
  1479. <div class="detail" style="background-image:url(/images/press/mtv_bg.jpg)">
  1480.  
  1481. <div class="thumb-fg" style="background-image:url(/images/press/mtv_white.png)"></div>
  1482.  
  1483. <div class="quote">"Video masterminds, the Young Astronauts..."</div>
  1484. <div class="open">»</div>
  1485.  
  1486. </div>
  1487. </div>
  1488. <div class="column" data-open="url" data-url="http://www.billboard.com/articles/columns/pop-shop/5657765/ariana-grande-nathan-sykes-share-studio-time-in-almost-is-never">
  1489. <div class="thumb" style="background-image:url(/images/press/billboard_color.png)"></div>
  1490.  
  1491. <div class="detail" style="background-image:url(/images/press/billboard_bg.jpg)">
  1492.  
  1493. <div class="thumb-fg" style="background-image:url(/images/press/billboard_white.png)"></div>
  1494.  
  1495. <div class="quote">"...a delicate music video."</div>
  1496. <div class="open">»</div>
  1497.  
  1498. </div>
  1499. </div>
  1500. <div class="column" data-open="url" data-url="http://www.complexmag.ca/sports/2013/12/nba-jerseys-redesigned-donda-supreme-google-hood-by-air">
  1501. <div class="thumb" style="background-image:url(/images/press/complex_black.png)"></div>
  1502.  
  1503. <div class="detail" style="background-image:url(/images/press/complex_bg.jpg)">
  1504.  
  1505. <div class="thumb-fg" style="background-image:url(/images/press/complex_white.png)"></div>
  1506.  
  1507. <div class="quote">"...they called in a bunch of dope designers and let them have their way..."</div>
  1508. <div class="open">»</div>
  1509.  
  1510. </div>
  1511. </div>
  1512.  
  1513. <div class="featured-press">
  1514. <div id="featured-press-title">
  1515. <h3>Featured Press</h3>
  1516. <h4>CBC: On The Money: Young Astronauts "Shooting for the Stars"</h4>
  1517. </div>
  1518. <div id="video_214390164" data-vimeo-initialized="true"><iframe src="https://player.vimeo.com/video/214390164?app_id=122963" width="900" height="506" frameborder="0" title="CBC: On The Money: Young Astronauts &quot;Shooting for the Stars&quot;" allow="autoplay; fullscreen" allowfullscreen="" data-ready="true"></iframe></div>
  1519.  
  1520. <div id="close-featured-press">See More Press</div>
  1521.  
  1522. </div>
  1523.  
  1524. </div>
  1525.  
  1526.  
  1527.  
  1528.  
  1529. </div>
  1530.  
  1531. </div>
  1532.  
  1533. <script>
  1534.  
  1535. App.vimeoPlayers['player_214390164'] = new Vimeo.Player('video_214390164', {id: 214390164, width: 900 });
  1536.  
  1537. var color_options = ['#d4ca27', '#5e95c5', '#cf3937'];
  1538. App.vimeoPlayers['player_214390164'].setColor(color_options[Math.floor(Math.random()*color_options.length)]);
  1539.  
  1540. App.vimeoPlayers['player_214390164'].on('play', function() {
  1541. window.focus();
  1542. });
  1543.  
  1544. $("#close-featured-press").on('click', function() {
  1545. App.vimeoPlayers['player_214390164'].pause();
  1546. $(".featured-press").fadeOut(300);
  1547. });
  1548.  
  1549. </script>
  1550. </li></ul></li><li class="row" id="row-9" style="height: 772px; left: 0px; transition-duration: 0.5s;"><ul><li class="cell" id="cell-9-0" style="background: rgb(0, 0, 0); width: 535px; height: 772px;"><div class="slide" id="contact">
  1551.  
  1552. <div class="cover" style="height: 772px;">
  1553.  
  1554. <div class="contact-bg">
  1555. <video loop="true" width="100%" height="100%" preload="meta" data-w="1280" data-h="720" style="width: auto; height: 717px; margin-top: 0px; margin-left: -369.5px;">
  1556. <source src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/media/contact.webm" type="video/webm">
  1557. <source src="https://s3.amazonaws.com/cdn.theyoungastronauts.com/media/contact.mp4" type="video/mp4">
  1558.  
  1559. <img src="video-thumbs/contact.jpg">
  1560. </video>
  1561.  
  1562. </div>
  1563.  
  1564. <div class="wrap">
  1565.  
  1566. <div class="contact-content">
  1567.  
  1568. <div class="contact-header">
  1569. <span>+</span> Inquiries
  1570. </div>
  1571.  
  1572. <div class="contact-row">
  1573. <div class="contact-left">
  1574. <span class="contact-label">Work With Us</span>
  1575. <span class="contact-address"><a href="mailto:hey@theyoungastronauts.com" target="_blank">hey@theyoungastronauts.com</a></span>
  1576. </div>
  1577.  
  1578. <div class="contact-right">+</div>
  1579. </div>
  1580.  
  1581. <div class="contact-row">
  1582. <div class="contact-left">
  1583. <span class="contact-label">Press Inquiries</span>
  1584. <span class="contact-address"><a href="mailto:press@theyoungastronauts.com" target="_blank">press@theyoungastronauts.com</a></span>
  1585. </div>
  1586.  
  1587. <div class="contact-right">+</div>
  1588. </div>
  1589.  
  1590. <div class="contact-row">
  1591. <div class="contact-left">
  1592. <span class="contact-label">Partner With Us</span>
  1593. <span class="contact-address"><a href="mailto:partners@theyoungastronauts.com" target="_blank">partners@theyoungastronauts.com</a></span>
  1594. </div>
  1595.  
  1596. <div class="contact-right">+</div>
  1597. </div>
  1598.  
  1599. <div class="contact-row">
  1600. <div class="contact-left">
  1601. <span class="contact-label">Job Inquiries</span>
  1602. <span class="contact-address"><a href="mailto:jobs@theyoungastronauts.com" target="_blank">jobs@theyoungastronauts.com</a></span>
  1603. </div>
  1604.  
  1605. <div class="contact-right">+</div>
  1606. </div>
  1607.  
  1608. <div class="contact-row">
  1609. <div class="contact-left social">
  1610. <div class="contact-fb"><a href="https://www.facebook.com/theyoungastros" target="_blank"></a></div>
  1611. <div class="contact-tw"><a href="https://twitter.com/theyoungastros" target="_blank"></a></div>
  1612. <div class="contact-in"><a href="http://instagram.com/theyoungastros" target="_blank"></a></div>
  1613. </div>
  1614.  
  1615. <div class="contact-right">+</div>
  1616. </div>
  1617.  
  1618. </div>
  1619.  
  1620.  
  1621. <div class="contact-content-mobile">
  1622. <p>Send Inquiries To <a href="mailto:hey@theyoungastronauts.com">hey@theyoungastronauts.com</a></p>
  1623. </div>
  1624.  
  1625. <div class="logo" style="opacity: 1;"></div>
  1626. </div>
  1627. </div>
  1628. </div>
  1629. </li></ul></li></ul></div>
  1630. <div class="footer" style="width: 535px;">
  1631. <div class="footer-links">
  1632. <a href="/">© 2018 The Young Astronauts Corp.</a>
  1633. <a href="/terms" target="_blank">Terms</a>
  1634. <a href="/privacy" target="_blank">Privacy</a>
  1635. </div>
  1636. <!-- BOTTOM-MENU -->
  1637. <div class="bottom" style="height: 22.5px;">
  1638. <ul id="social">
  1639. <li class="fb"><a href="https://www.facebook.com/theyoungastronauts" target="_blank">Facebook</a></li>
  1640. <li class="tw"><a href="https://twitter.com/TheYoungAstros" target="_blank">Twitter</a></li>
  1641. <li class="in"><a href="http://instagram.com/TheYoungAstros/" target="_blank">Instagram</a></li>
  1642. </ul>
  1643. <div class="bottom-wrap center clearfix">
  1644. <ul class="sub-menu"></ul>
  1645.  
  1646. <ul class="footer-thumbs" style="width: 0px; display: none;">
  1647. <li class="thumb">
  1648. <div class="overlay" style="background-color:rgba(0,0,0,0.2);"></div>
  1649. <h4></h4>
  1650. <h5></h5>
  1651. </li>
  1652. <li class="thumb">
  1653. <div class="overlay"></div>
  1654. <h4></h4>
  1655. <h5></h5>
  1656.  
  1657. </li>
  1658. <li class="thumb">
  1659. <div class="overlay"></div>
  1660. <h4></h4>
  1661. <h5></h5>
  1662.  
  1663. </li>
  1664. <li class="thumb">
  1665. <div class="overlay"></div>
  1666. <h4></h4>
  1667. <h5></h5>
  1668.  
  1669. </li>
  1670. </ul>
  1671.  
  1672.  
  1673.  
  1674. </div>
  1675.  
  1676.  
  1677.  
  1678. </div>
  1679. <!-- /BOTTOM MENU -->
  1680.  
  1681.  
  1682.  
  1683. </div>
  1684.  
  1685. <div class="hud">
  1686. <div class="map"><ul class="mapGrid"><li class="mapRow" id="mapRow-0"><ul><li class="mapCell active" data-x="0" data-y="0" id="mapCell-0-0" data-hint=""></li></ul></li><li class="mapRow" id="mapRow-1"><ul><li class="mapCell" data-x="0" data-y="1" id="mapCell-1-0" data-hint="Featured Project"></li></ul></li><li class="mapRow" id="mapRow-2"><ul><li class="mapCell" data-x="0" data-y="2" id="mapCell-2-0" data-hint="Interactive Reel"></li><li class="mapCell" data-x="1" data-y="2" id="mapCell-2-1" data-hint="Wantfolio"></li><li class="mapCell" data-x="2" data-y="2" id="mapCell-2-2" data-hint="Wantfolio Mobile"></li><li class="mapCell" data-x="3" data-y="2" id="mapCell-2-3" data-hint="Wantfolio Mobile"></li><li class="mapCell" data-x="4" data-y="2" id="mapCell-2-4" data-hint="Wantfolio Desktop"></li><li class="mapCell" data-x="5" data-y="2" id="mapCell-2-5" data-hint="Wantfolio Desktop"></li><li class="mapCell" data-x="6" data-y="2" id="mapCell-2-6" data-hint="Drake's Views"></li><li class="mapCell" data-x="7" data-y="2" id="mapCell-2-7" data-hint="Drakes's Views Mobile"></li><li class="mapCell" data-x="8" data-y="2" id="mapCell-2-8" data-hint="Drakes's Views Desktop"></li><li class="mapCell" data-x="9" data-y="2" id="mapCell-2-9" data-hint="Drakes's Views Creations"></li><li class="mapCell" data-x="10" data-y="2" id="mapCell-2-10" data-hint="Myseum"></li><li class="mapCell" data-x="11" data-y="2" id="mapCell-2-11" data-hint=""></li><li class="mapCell" data-x="12" data-y="2" id="mapCell-2-12" data-hint=""></li><li class="mapCell" data-x="13" data-y="2" id="mapCell-2-13" data-hint=""></li><li class="mapCell" data-x="14" data-y="2" id="mapCell-2-14" data-hint="Web"></li><li class="mapCell" data-x="15" data-y="2" id="mapCell-2-15" data-hint=""></li><li class="mapCell" data-x="16" data-y="2" id="mapCell-2-16" data-hint=""></li><li class="mapCell" data-x="17" data-y="2" id="mapCell-2-17" data-hint=""></li><li class="mapCell" data-x="18" data-y="2" id="mapCell-2-18" data-hint=""></li><li class="mapCell" data-x="19" data-y="2" id="mapCell-2-19" data-hint="Games"></li><li class="mapCell" data-x="20" data-y="2" id="mapCell-2-20" data-hint=""></li><li class="mapCell" data-x="21" data-y="2" id="mapCell-2-21" data-hint=""></li></ul></li><li class="mapRow" id="mapRow-3"><ul><li class="mapCell" data-x="0" data-y="3" id="mapCell-3-0" data-hint="Ariana Grande"></li><li class="mapCell" data-x="1" data-y="3" id="mapCell-3-1" data-hint="Ariana Grande Album Artwork"></li><li class="mapCell" data-x="2" data-y="3" id="mapCell-3-2" data-hint="Ariana Grande Web &amp; Mobile"></li><li class="mapCell" data-x="3" data-y="3" id="mapCell-3-3" data-hint="Ariana Grande Mobile App Concept"></li><li class="mapCell" data-x="4" data-y="3" id="mapCell-3-4" data-hint="Ariana Grande Marketing"></li><li class="mapCell" data-x="5" data-y="3" id="mapCell-3-5" data-hint="Ariana Grande Photography"></li><li class="mapCell" data-x="6" data-y="3" id="mapCell-3-6" data-hint="Ariana Grande Photography"></li><li class="mapCell" data-x="7" data-y="3" id="mapCell-3-7" data-hint="Ariana Grande Merch"></li><li class="mapCell" data-x="8" data-y="3" id="mapCell-3-8" data-hint="Schitt's Creek"></li><li class="mapCell" data-x="9" data-y="3" id="mapCell-3-9" data-hint="Schitt's Creek Poster Design"></li><li class="mapCell" data-x="10" data-y="3" id="mapCell-3-10" data-hint="Schitt's Creek Poster Design"></li><li class="mapCell" data-x="11" data-y="3" id="mapCell-3-11" data-hint="Schitt's Creek Marketing"></li><li class="mapCell" data-x="12" data-y="3" id="mapCell-3-12" data-hint="Schitt's Creek Marketing"></li><li class="mapCell" data-x="13" data-y="3" id="mapCell-3-13" data-hint="Schitt's Creek Marketing"></li><li class="mapCell" data-x="14" data-y="3" id="mapCell-3-14" data-hint="Schitt's Creek Marketing"></li><li class="mapCell" data-x="15" data-y="3" id="mapCell-3-15" data-hint="Schitt's Creek Marketing"></li><li class="mapCell" data-x="16" data-y="3" id="mapCell-3-16" data-hint="Schitt's Creek Marketing"></li></ul></li><li class="mapRow" id="mapRow-4"><ul><li class="mapCell" data-x="0" data-y="4" id="mapCell-4-0" data-hint="Demo Reel"></li><li class="mapCell" data-x="1" data-y="4" id="mapCell-4-1" data-hint="Music Videos"></li><li class="mapCell" data-x="2" data-y="4" id="mapCell-4-2" data-hint="undefined"></li><li class="mapCell" data-x="3" data-y="4" id="mapCell-4-3" data-hint="undefined"></li><li class="mapCell" data-x="4" data-y="4" id="mapCell-4-4" data-hint="undefined"></li><li class="mapCell" data-x="5" data-y="4" id="mapCell-4-5" data-hint="undefined"></li><li class="mapCell" data-x="6" data-y="4" id="mapCell-4-6" data-hint="Commercials"></li><li class="mapCell" data-x="7" data-y="4" id="mapCell-4-7" data-hint="undefined"></li><li class="mapCell" data-x="8" data-y="4" id="mapCell-4-8" data-hint="undefined"></li><li class="mapCell" data-x="9" data-y="4" id="mapCell-4-9" data-hint="Animation"></li><li class="mapCell" data-x="10" data-y="4" id="mapCell-4-10" data-hint="undefined"></li><li class="mapCell" data-x="11" data-y="4" id="mapCell-4-11" data-hint="undefined"></li></ul></li><li class="mapRow" id="mapRow-5"><ul><li class="mapCell" data-x="0" data-y="5" id="mapCell-5-0" data-hint="Services"></li></ul></li><li class="mapRow" id="mapRow-6"><ul><li class="mapCell" data-x="0" data-y="6" id="mapCell-6-0" data-hint="Team"></li></ul></li><li class="mapRow" id="mapRow-7"><ul><li class="mapCell" data-x="0" data-y="7" id="mapCell-7-0" data-hint="Clients"></li></ul></li><li class="mapRow" id="mapRow-8"><ul><li class="mapCell" data-x="0" data-y="8" id="mapCell-8-0" data-hint="Press"></li></ul></li><li class="mapRow" id="mapRow-9"><ul><li class="mapCell" data-x="0" data-y="9" id="mapCell-9-0" data-hint="Contact"></li></ul></li></ul><div class="mapHint">&nbsp;</div></div>
  1687. </div>
  1688.  
  1689. <div class="arrow-container">
  1690. <div class="arrow arrow-left auto-hide" style="opacity: 0.5;"></div>
  1691. <div class="arrow arrow-right auto-hide" style="opacity: 0.5;"></div>
  1692. </div>
  1693.  
  1694. <div class="loader" style="display: none;">
  1695. <div class="cube1"></div>
  1696. <div class="cube2"></div>
  1697. <div class="cube3"></div>
  1698. <div class="cube4"></div>
  1699. <div class="cube5"></div>
  1700. </div>
  1701.  
  1702.  
  1703. <ul id="social-links">
  1704. <li class="fb"><a href="https://www.facebook.com/theyoungastronauts" target="_blank">Facebook</a></li>
  1705. <li class="tw"><a href="https://twitter.com/TheYoungAstros" target="_blank">Twitter</a></li>
  1706. <li class="in"><a href="http://instagram.com/TheYoungAstros/" target="_blank">Instagram</a></li>
  1707. </ul>
  1708.  
  1709. <ul class="progress-indicator">
  1710. <li id="progress-home" class="current"><div></div></li>
  1711. <li id="progress-featured"><div></div></li>
  1712. <li id="progress-interactive"><div></div></li>
  1713. <li id="progress-creative"><div></div></li>
  1714. <li id="progress-media"><div></div></li>
  1715. <li id="progress-services"><div></div></li>
  1716. <li id="progress-team"><div></div></li>
  1717. <li id="progress-clients"><div></div></li>
  1718. <li id="progress-press"><div></div></li>
  1719. <li id="progress-contact"><div></div></li>
  1720. </ul>
  1721.  
  1722.  
  1723. <div class="fullscreen-menu" style="background-color: rgb(136, 200, 122);">
  1724.  
  1725. <ul class="rolodex initialized" id="rolodex">
  1726. <li id="rolodex-featured" data-color="#88c87a" class="current" style="opacity: 1; transform: scale(1); margin-top: 351px;">Featured</li>
  1727. <li id="rolodex-interactive" data-color="#5e95c5" style="opacity: 0.65; transform: scale(0.75); margin-top: 0px;">Interactive</li>
  1728. <li id="rolodex-creative" data-color="#cf3937" style="opacity: 0.3; transform: scale(0.5); margin-top: 0px;">Creative</li>
  1729. <li id="rolodex-media" data-color="#d4ca27" style="opacity: -0.05; transform: scale(0.25); margin-top: 0px;">Media</li>
  1730. <li id="rolodex-services" data-color="#bbb" style="opacity: -0.4; transform: scale(0); margin-top: 0px;">Services</li>
  1731. <li id="rolodex-team" data-color="#fd5f02" style="opacity: -0.75; transform: scale(-0.25); margin-top: 0px;">Team</li>
  1732. <li id="rolodex-clients" data-color="#5b52a3" style="opacity: -1.1; transform: scale(-0.5); margin-top: 0px;">Clients</li>
  1733. <li id="rolodex-press" data-color="#ed9cf0" style="opacity: -1.45; transform: scale(-0.75); margin-top: 0px;">Press</li>
  1734. <li id="rolodex-contact" data-color="#333333" style="opacity: -1.8; transform: scale(-1); margin-top: 0px;">Contact</li>
  1735. </ul>
  1736.  
  1737.  
  1738. </div>
  1739. <div id="top-right-corner"></div>
  1740. <div id="hamburger">
  1741. <span></span>
  1742. <span></span>
  1743. <span></span>
  1744. <span></span>
  1745. </div>
  1746.  
  1747.  
  1748.  
  1749. <!-- include js -->
  1750.  
  1751. <script type="text/javascript" id="www-widgetapi-script" src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vfl8_u944/www-widgetapi.js" async=""></script><script type="text/javascript" async="" src="https://ssl.google-analytics.com/ga.js"></script><script type="text/javascript">
  1752.  
  1753. var _gaq = _gaq || [];
  1754. _gaq.push(['_setAccount', 'UA-43940726-1']);
  1755. _gaq.push(['_trackPageview']);
  1756.  
  1757. (function() {
  1758. var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  1759. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  1760. var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  1761. })();
  1762.  
  1763. </script>
  1764.  
  1765.  
  1766.  
  1767. <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
  1768. <script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
  1769. <script type="text/javascript" src="https://player.vimeo.com/api/player.js"></script>
  1770. <script type="text/javascript" src="build/js/all.min.js?v=2.8" id="mainScript" data-api-version="1492025819" data-version="2.8"></script>
  1771.  
  1772.  
  1773.  
  1774.  
  1775.  
  1776. </body></html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!