/
index.html
388 lines (340 loc) · 17.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IBM Design Internships</title>
<link rel="SHORTCUT ICON" href="http://www.ibm.com/favicon.ico">
<link rel="stylesheet" href="bower_components/twentytwenty/css/twentytwenty.css">
<link rel="stylesheet" href="bower_components/lightslider/dist/css/lightslider.min.css">
<link rel="stylesheet" href="app/css/font--light-medium.css">
<link rel="stylesheet" href="app/css/font--medium-bold.css">
<link rel="stylesheet" href="app/css/font--roman-bold.css">
<link rel="stylesheet" href="app/css/app.css">
</head>
<body>
<div id="hero" class="container">
<div class="title">
<img src="etc/img/maelstrom.svg">
<h3>live to tell the tale</h3>
</div>
<div id="hero-slider" class="twentytwenty-container">
<img src="etc/img/postit-still.png">
<video autoplay="autoplay" loop="loop" muted id="hero-vid">
<source src="etc/video/postits.mp4" type="video/mp4">
</video>
</div>
</div>
<nav class="nav">
<div class="row">
<div class="small-12">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text"><a href="http://ibm.com/design/">IBM</a> <a href="#"><b>Maelstrom</b></a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><a href="#overview" class="show-for-medium">The Experience</a></li>
<li><a href="#video-intro" class="show-for-medium">Our Story</a></li>
<li><a href="#program" class="show-for-medium">Sessions</a></li>
<li><a href="#apply" class="active">Apply</a></li>
</ul>
</div>
</div>
</div>
</nav>
<section id="overview" class="about round-image">
<div class="row">
<div class="medium-offset-1 medium-8 columns">
<h3>One Size Doesn't Fit All</h3>
<h6>And it shouldn’t. Maelstrom is different from other internships. Your growth outside of work is just as important as what you do from 9 to 5. The difference here is radical collaboration; we care more about the band and less about the lead singer.
</h6>
</div>
</div>
</section>
<section class="selling-points round-image">
<div id="eq">
<div class="row">
<div class="text-center medium-offset-1 medium-3 columns">
<img src="etc/icons/pingpong.gif" alt="fun internship!">
</div>
<div class="medium-6 end columns"><h3>Not Your Average Internship</h3>
<p>In Maelstrom, we don't run errands unless it's to grab frisbees and ping pong balls for the office. We don't use the copier unless we're printing embarrassing Facebook pics of our coworkers.
We work on real projects that have the capacity to change the world and we're supported by those who have the power to push our outcomes into existence. Yeah, let that sink in.
<br>
<p class="fun-fact">Fun Fact: Everything on this site was built by Maelstromers!</p>
</p>
</div>
</div>
</div>
<div class="relationship">
<div class="row">
<div class="medium-offset-2 medium-6 columns">
<h3>Building Relationships</h3>
<p>IBM values you as a person and invests in helping you develop into a total design badass. The Maelstrom curriculum is geared towards academic, emotional, and professional growth. It's not just about what you can contribute to IBM Design. It's about how you can come out of this experience not recognizing who you've become. But in a good way</p>
</div>
<div class="text-center medium-3 columns end">
<img src="etc/icons/communcation.gif" alt="communication">
</div>
</div>
</div>
<div class="dowork">
<div class="row">
<div class="text-center medium-offset-1 medium-3 columns">
<img src="etc/icons/umbrella.gif" alt="umbrella">
</div>
<div class="medium-6 end columns">
<h3>We'll Take Care of You</h3>
<p>It's hard to do great work when you're worried about transportation, lodging, and compensation. We pay for your crib at a swanky hotel, give you access to a fleet of rentals, and hit you up with paychecks on the reg. This must be what it’s like to hang with Queen Bey.
</p>
</div>
</div>
</div>
</section>
<section id="video-intro">
<div class="row">
<div class="medium-offset-1 medium-7 columns">
<h3>Live to Tell the Tale</h3>
<p>
Three times a year, teams made up of designers, researchers, and developers come together and bond over problem solving, playbacks, late nights, small wins, and endless shenanigans. <a class="lno">These are our stories.</a>
</p>
</div>
</div>
<div class="row">
<div class="medium-offset-2 medium-8 columns">
<div class="flex-video widescreen">
<iframe width="420" height="315" src="https://www.youtube.com/embed/L0GAn8kw_SQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</section>
<section id="band">
<div class="row">
<div class="small-12 columns text-center">
<h4>Can you guess how long our blooper reel is?</h4>
</div>
</div>
<div class="row">
<div class="medium-offset-2 medium-8 columns" data-equalizer>
<div class="small-12 columns">
<button class="hollow expanded button" href="#" data-equalizer-watch>We don't have bloopers. Everything we do is perfect.</button>
</div>
<div class="small-12 columns">
<button class="hollow expanded button" href="#" data-equalizer-watch>3 minutes and 14 seconds.</button>
</div>
<div class="small-12 columns">
<button class="hollow expanded button" href="#" data-equalizer-watch>Sometimes it feels like our lives are just one long blooper reel.</button>
</div>
</div>
</div>
</section>
<section id="program" class="overview round-image">
<div class="row">
<div class="medium-offset-1 medium-10 columns">
<h3>Program Overview</h3>
</div>
</div>
<div class="row">
<div class="medium-offset-1 medium-7 small-12 columns">
<p>
We run Maelstrom in Austin, Texas three times a year for <b>8–10 weeks</b>. Bringing together roughly fifteen talented people from multidisciplinary backgrounds–we drive outcomes on a business level and grow immensley on an emotional level.
</p>
</div>
</div>
<div class="row sessions">
<div class="small-4 columns">
<img class="equinox" src="etc/icons/tree.gif">
<h5 class="equ">Equinox</h5>
<p>Sept-Nov</p>
</div>
<div class="small-4 columns">
<img class="solstice" src="etc/icons/snowflake.gif">
<h5 class="sol">Solstice</h5>
<p>Jan-Mar</p>
</div>
<div class="small-4 columns">
<img class="swelter" src="etc/icons/sun.gif">
<h5 class="swe">Swelter</h5>
<p>Jun-Aug</p>
</div>
</div>
<div class="text-center city-skyline row">
<h5>
<img src="etc/icons/austin.gif" class="location" alt="austin"><span class="text-regular">Located in </span><b>Austin, Texas</b>
</h5>
</div>
</section>
<section id="apply" class="form">
<div class="row">
<div class="medium-offset-2 medium-7 columns">
<h3>Find out if the fit is right</h3>
<p>
If you want to be a part of our big, happy, weird family, take the
first step and apply for Maelstrom below. What are you waiting for?
</p>
</div>
</div>
<div class="row discipline">
<div class="medium-offset-2 medium-7 columns">
<h5>1. What discipline are you applying to?</h5>
</div>
</div>
</div>
<div class="row roles">
<div class="medium-offset-2 medium-8 columns">
<div class="row">
<div class="research small-5 small-offset-1 medium-3 medium-offset-0 columns">
<div class="role-names">
<img class="role" src="etc/icons/research.gif">
<h5>Research</h5>
</div>
</div>
</a>
<div class="ui small-5 medium-3 medium-offset-0 columns">
<div class="role-names">
<img class="role" src="etc/icons/visual.gif">
<h5>Visual</h5>
</div>
</div>
<div class="ux small-5 small-offset-1 medium-3 medium-offset-0 columns">
<div class="role-names">
<img class="role" src="etc/icons/ux.gif">
<h5>UX</h5>
</div>
</div>
<div class="fed small-5 medium-3 medium-offset-0 end columns">
<div class="role-names">
<img class="role" src="etc/icons/fed.gif">
<h5>Front End</h5>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="medium-offset-2 medium-8 columns">
<h5>2. Personal information</h5>
</div>
</div>
<div class="row name-input">
<div class="medium-offset-2 medium-8 columns">
<label class="name">Name</label>
<input type="text" placeholder="Overlord O'Bryan">
</div>
</div>
<div class="row">
<div class="medium-offset-2 medium-8 columns">
<label class="email">Email</label>
<input type="email" placeholder="oboy@help.me">
</div>
</div>
<div class="row">
<div class="medium-offset-2 medium-8 columns">
<label class="phone">Phone</label>
<input type="tel" placeholder="666-420-6969">
</div>
</div>
<div class="row">
<div class="medium-offset-2 medium-8 columns">
<label class="portfolio">Portfolio</label>
<input type="url" placeholder="http://cachemonet.com/">
</div>
</div>
<div class="row apply-btn">
<div class="small-offset-4 small-4 large-offset-5 medium-2 columns">
<a href="#alums" id="apply-btn" class="button expanded">Apply</a>
</div>
</div>
</section>
<section id="alums" class="alums">
<div id="sucess-msg" class="row hide">
<div class="medium-6 columns">
<p class="fun-fact">Your application has been submitted! Woot woot!</p>
<h2>This Could Be You!</h2>
</div>
</div>
<div class="row">
<div class="small-8 columns">
<h4>Past Maelstromers</h4>
</div>
<div class="small-4 medium-2 columns">
<button type="button" class="shuffle button hollow expanded">Shuffle</button>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<ul id="top-slider" class="slider top">
<li><img src="etc/img/faceswap/top/andie.png"></li>
<li><img src="etc/img/faceswap/top/dave.png"></li>
<li><img src="etc/img/faceswap/top/hareen.png"></li>
<li><img src="etc/img/faceswap/top/jenny.png"></li>
<li><img src="etc/img/faceswap/top/lawrence.png"></li>
<li><img src="etc/img/faceswap/top/taylor.png"></li>
<li><img src="etc/img/faceswap/top/kevin.png"></li>
<li><img src="etc/img/faceswap/top/devin.png"></li>
<li><img src="etc/img/faceswap/top/lisa.png"></li>
<li><img src="etc/img/faceswap/top/wen.png"></li>
<li><img src="etc/img/faceswap/top/rob.png"></li>
<li><img src="etc/img/faceswap/top/noah.png"></li>
<li><img src="etc/img/faceswap/top/leah.png"></li>
<li><img src="etc/img/faceswap/top/britt.png"></li>
</ul>
<ul id="bottom-slider" class="slider bottom">
<li><img src="etc/img/faceswap/bottom/andie.png"></li>
<li><img src="etc/img/faceswap/bottom/dave.png"></li>
<li><img src="etc/img/faceswap/bottom/hareen.png"></li>
<li><img src="etc/img/faceswap/bottom/jenny.png"></li>
<li><img src="etc/img/faceswap/bottom/lawrence.png"></li>
<li><img src="etc/img/faceswap/bottom/taylor.png"></li>
<li><img src="etc/img/faceswap/bottom/kevin.png"></li>
<li><img src="etc/img/faceswap/bottom/devin.png"></li>
<li><img src="etc/img/faceswap/bottom/lisa.png"></li>
<li><img src="etc/img/faceswap/bottom/wen.png"></li>
<li><img src="etc/img/faceswap/bottom/rob.png"></li>
<li><img src="etc/img/faceswap/bottom/noah.png"></li>
<li><img src="etc/img/faceswap/bottom/leah.png"></li>
<li><img src="etc/img/faceswap/bottom/britt.png"></li>
</ul>
</div>
</div>
</section>
<footer class="footer container">
<div class="row made-by">
<div class="small-12 columns">
<h5>Made by these assholes <img src="etc/icons/deploy.png"></h5>
</div>
</div>
<div class="row">
<div class="text-links small-12 medium-5 columns">
<span class="text-link"><a href="http://www.ibm.com/privacy/us/en/?lnk=flg-priv-usen" target="_blank"><span>Privacy</span></a></span>
<span class="text-link"><a href="http://www.ibm.com/legal/us/en/?lnk=flg-tous-usen" target="_blank"><span>Terms of Use</span></a></span>
<span class="text-link"><a href="http://www.ibm.com/accessibility/us/en/" target="_blank"><span>Accessibility</span></a></span>
<span class="text-link"><a href="http://ibm.com" target="_blank"><span>IBM.com</span></a></span>
</div>
<div class="social-links small-12 medium-3 medium-offset-4 columns">
<a title="Share on Facebook" class="social-link popup facebook" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fibm.com%2Fdesign%internships%2F" target="_blank"><svg class="glass" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" enable-background="new 0 0 30 30"><path class="icon-bg-color" d="M0 0h30v30h-30z"/><path class="icon-color" d="M16.5 24.8v-8.9h3l.4-3.5h-3.4v-2.2c0-1 .3-1.7 1.7-1.7h1.8v-3.1c-.3 0-1.4-.1-2.7-.1-2.7 0-4.5 1.6-4.5 4.6v2.6h-3v3.5h3v8.9h3.7z"/></svg><span class="accessibility-label">
Share on Facebook
</span></a>
<a title="Share on Twitter" class="social-link popup twitter" href="http://twitter.com/?status=Check%20out%20the%20hottest%20internship%20of%20the%20century%20at%20IBM%20Design!%20http://ibm.co/1PpKx2n%20@IBMDesign" target="_blank"><svg class="glass" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" enable-background="new 0 0 30 30"><path class="icon-bg-color" d="M0 0h30v30h-30z"/><path class="icon-color" d="M24.8 9.4c-.7.3-1.4.5-2.1.6.8-.5 1.4-1.2 1.6-2.1-.7.4-1.5.7-2.4.9-.7-.7-1.6-1.2-2.7-1.2-2.1 0-3.7 1.7-3.7 3.7 0 .3 0 .6.1.9-3.1-.2-5.8-1.6-7.7-3.9-.3.5-.5 1.2-.5 1.9 0 1.3.7 2.4 1.7 3.1-.6 0-1.2-.2-1.7-.5 0 1.8 1.3 3.3 3 3.7-.3.1-.6.1-1 .1-.2 0-.5 0-.7-.1.5 1.5 1.9 2.6 3.5 2.6-1.3 1-2.9 1.6-4.6 1.6-.3 0-.6 0-.9-.1 1.7 1.1 3.6 1.7 5.7 1.7 6.9 0 10.6-5.7 10.6-10.6v-.5c.6-.4 1.3-1.1 1.8-1.8z"/></svg><span class="accessibility-label">
Share on Twitter
</span></a>
<a title="Share on Google+" class="social-link popup google" href="https://plus.google.com/share?url=http://ibm.co/1PpKx2n" target="_blank"><svg class="glass" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" enable-background="new 0 0 30 30"><path class="icon-bg-color" d="M0 0h30v30h-30z"/><path class="icon-color" d="M11.4 14v2.4h4c-.2 1-1.2 3.1-4 3.1-2.4 0-4.4-2-4.4-4.5s2-4.5 4.4-4.5c1.4 0 2.3.6 2.8 1.1l1.9-1.8c-1.2-1.2-2.8-1.8-4.7-1.8-3.9 0-7.1 3.2-7.1 7.1s3.2 7.1 7.1 7.1c4.1 0 6.8-2.9 6.8-6.9 0-.5 0-.8-.1-1.2l-6.7-.1zm14.2 0h-2v-2h-2v2h-2v2h2v2h2v-2h2"/></svg><span class="accessibility-label">
Share on Google+
</span></a>
<a title="Share on LinkedIn" class="social-link popup linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fibm.com%2Fdesign%2Finternships%20IBM%20Design%20Internships" target="_blank"><svg class="glass" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" enable-background="new 0 0 30 30"><path class="icon-bg-color" d="M0 0h30v30h-30z"/><g class="icon-color"><path d="M23.3 22.8h-3.4v-5.4c0-1.3 0-2.9-1.8-2.9s-2.1 1.4-2.1 2.8v5.5h-3.4v-11h3.3v1.5c.5-.9 1.6-1.8 3.2-1.8 3.5 0 4.1 2.3 4.1 5.3v6h.1zM8.7 10.2c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM10.4 22.8h-3.4v-11.1h3.4v11.1z"/></g></svg><span class="accessibility-label">
Share on LinkedIn
</span></a>
</div>
</div>
</footer>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/twentytwenty/js/jquery.event.move.js"></script>
<script src="bower_components/what-input/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/foundation.js"></script>
<script src="dist/js/all.js"></script>
<script src="bower_components/twentytwenty/js/jquery.twentytwenty.js"></script>
<script src="bower_components/lightslider/dist/js/lightslider.min.js"></script>
</body>
</html>