-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
303 lines (285 loc) · 16.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HighKey</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="logo">
<img style="width:200px" src="https://i.pinimg.com/736x/dc/53/50/dc5350243970437d9fff2c8db3a9975b.jpg">
</div>
</header>
<div class="nav-dots">
<div class="dot-container">
<div class="dot" id="dot1" data-content="Home"></div>
</div>
<div class="dot-container">
<div class="dot" id="dot2" data-content="HighKey Free TR Fit"></div>
</div>
<div class="dot-container">
<div class="dot" id="dot3" data-content="8 Plastic Bottles"></div>
</div>
<div class="dot-container">
<div class="dot" id="dot4" data-content="Power Of Sport"></div>
</div>
<div class="dot-container">
<div class="dot" id="dot5" data-content="NYC Plays Ball"></div>
</div>
<div class="dot-container">
<div class="dot" id="dot6" data-content="Homeless World Cup"></div>
</div>
<div class="dot-container">
<div class="dot" id="dot7" data-content="HighKey N7"></div>
</div>
<div class="dot-container">
<div class="dot" id="dot8" data-content="Power Of Sport"></div>
</div>
<div class="dot-container">
<div class="dot" id="dot9" data-content="A Better Shoebox"></div>
</div>
<div class="dot-container">
<div class="dot" id="dot10" data-content="Soweto's Next Generation"></div>
</div>
<div class="dot-container">
<div class="dot" id="dot11" data-content="Technology Exchange"></div>
</div>
</div>
<div class="overlay">
<div class="popup">
<div class="close-bar">
<div class="close-icon">
<img src="images/rsz_close.png" width="30px" height="30px">
</div>
</div>
<video class="player" controls>
<source src="video/video.mkv">
</video>
</div>
</div>
<!-- section 1 -->
<section>
<div class="parent">
<div class="child" style="background: url(images/bg_video.jpg);background-position: top;"></div>
</div>
<div class="content" id="video">
<p>DON'T TELL US <br> WHAT WE CAN'T DO</p>
<img src="images/play_icon.png" id="play">
</div>
</section>
<!-- section 2 -->
<section>
<div class="parent">
<div class="child" style="background: url(images/bg_freext.jpg);background-position: top;"></div>
<div class="fg">
<img src="images/fg_freext.png">
</div>
</div>
<div class="content" id="freext">
<h1>One shoe <br> does good, <br> the other <br> shoe kicks <br> ass.</h1>
<h2>HighKey FREE TR FIT</h2>
<p>The Free TR Fit is designed with a lower environmental impact using <a href="#">environmentally <br> preferred rubber</a>, water-based cementing and recycled polyester. That means every step in the multi-directional flex groove outsole replicates the foot's natural movement and helps women get more out of their workout without leaving a huge environmental footprint. Everyone's a winner. <br> <br> <a href="#">Learn More <img src="images/linkout.gif"></a></p>
</div>
</section>
<!-- section 3 -->
<section>
<div class="parent">
<div class="child" style="background: url(images/bg_worldchampionshipjersey.jpg);background-position: top;" ></div>
</div>
<div class="content" id="jersey">
<h1>Our <br> products <br> are a load <br> of rubbish.</h1>
<h2>8 PLASTIC BOTTLES</h2>
<p>Each HighKey 2010 World Championship Football jersey is made entirely from recycled polyester. That's up to eight recycled plastic bottles per jersey. In total, that diverted nearly 13 million plastic bottles from landfills. Yes, you read right. 13 million. Plastic. Bottles.</p>
</div>
</section>
<!-- section 4 -->
<section>
<div class="slider">
<div class="slider-container">
<div class="slides">
<h1> Wage sport <br> on war. </h1>
<p>Need to stop a war? Look no further than soccer. A civil war in Ivory Coast came to a cease-fire during the 2006 Football World Championship when the national soccer team progressed to the finals. Sport 1. War 0.</p>
</div>
<div class="slides">
<h1> Sport doesn't care <br> who you are. </h1>
<p>In the 1980 Olympics, an ice hockey team of mainly college students from America stepped onto the ice against a formidable Soviet team dubbed undefeatable. Sport had other plans.</p>
</div>
<div class="slides">
<h1> Apathy, we'd like to <br> ask you to step <br> outside. </h1>
<p>About 15 million Americans have Type 2 diabetes. Some experts claim that certain diagnoses of Type 2 diabetes can be prevented by regular exercise, a healthy diet and losing excess weight. You do the math.</p>
</div>
<div class="slides">
<h1> Sport <br>is nature's <br>crack. </h1>
<p>Adrenaline junkies get their fix from sport, as well as dopamine, endorphins and serotonin. Hit me up.</p>
</div>
<div class="slides">
<h1> Put a rocket up <br> possibility's ass. </h1>
<p>Jason Pisano has cerebral palsy. A debilitating disease. But his left foot still works like a charm. He's 50 marathons in, but who's counting?</p>
</div>
<div class="slides">
<h1> Get infected <br> with sport. </h1>
<p>Throughout the developing world, youth sports programs are being combined with education about treatment and prevention of HIV, which makes sport HIV's cancer.</p>
</div>
<div class="slides">
<h1> Sport will make <br> you rich. </h1>
<p>About two thousand dollars richer. Experts calculated that's the amount of money that could be saved in medical costs within two years when sedentary adults increase their physical activity to 90 minutes a week. Show me the money.</p>
</div>
<div class="slides">
<h1> Sport smacks down <br> violence. </h1>
<p>For 200,000 young refugees in Africa, the MES program provides access to education and sport. This raises self-esteem and teaches the importance of peaceful coexistence, which can stop future wars, which could bring peace to a volatile region. If you're smart enough to sport, you can save the world.</p>
</div>
<div class="slides">
<h1> Sport dispells <br> myths. </h1>
<p>Meet Jason McElwain. He scored six three-pointers in a school basketball game. He matched the school record. He is autistic. Did we mention he scored six three-pointers in a school basketball game?</p>
</div>
</div>
</div>
<div class="more">
<img src="images/refresh.gif" id="refresh">
<img src="images/icon_more.png" id="more-img">
</div>
</section>
<!-- section 5 -->
<section>
<div class="parent">
<div class="child" style="background: url(images/bg_nycreccenter.jpg);background-position: top;"></div>
</div>
<div class="content" id="nyc">
<h1>Courts <br> crush <br> apathy.</h1>
<h2>NYC PLAYS BALL</h2>
<p>Over the next two years, HighKey is partnering with the New York City Department of Youth and Community Development to install and refurbish 25 basketball courts throughout New York City giving 10,000 kids access to do what they love. Apathy, you just got posterized.<br> <br> <a href="#">Learn More <img src="images/linkout.gif"></a></p>
</div>
</section>
<!-- section 6 -->
<section>
<div class="parent">
<div class="child" style="background: url(images/bg_homelessworldcup.jpg);background-position: top;"></div>
<div class="fg" id="fg2">
<img src="images/fg_homelessworldcup.png">
</div>
</div>
<div class="content" id="worldcup">
<h1>Sport <br> is an <br> address.</h1>
<h2>HOMELESS WORLD CUP</h2>
<p>HighKey supports the Homeless World Cup, a world class, annual, soccer tournament engaging players from 64 countries. A staggering 71% of participants significantly change their lives after competing in the Homeless World Cup. Hope, you have just found a new home.<br> <br> <a href="#">Learn More <img src="images/linkout.gif"></a></p>
</div>
</section>
<!-- section 7 -->
<section>
<div class="parent">
<div class="child" style="background: url(images/bg_n7.jpg);background-position: top;"></div>
</div>
<div class="content" id="n7">
<h1>All feet <br>are not <br>created <br>equal.</h1>
<h2>HighKey N7</h2>
<p>Through HighKey's N7 initiative, we have built an environmentally friendly performance shoe to address the specific width and fit requirements for the Native American foot. Where diabetes is prevalent in this community, this shoe will help combat it by encouraging and improving exercise. Where there's a shoe, there's a way.<br> <br> <a href="#">Learn More <img src="images/linkout.gif"></a></p>
</div>
</section>
<!-- section 8 -->
<section>
<div class="slider">
<div class="slider-container">
<div class="slides2">
<h1>If you have a torso, <br> you're an athlete.</h1>
<p>In 2007, South African sprinter Oscar Pistorius ran the 100 meters in 10.91 seconds. Without any legs. The first amputee to break the sub-11-seconds barrier. Some critics claim that the carbon fiber blades he ran on gave him an unfair advantage. Those critics had legs.</p>
</div>
<div class="slides2">
<h1> Sport hates on <br> hopelessness.</h1>
<p>In Haiti, a sports program offered by the HOC (the Haitian Olympic Committee) together with UNICEF runs 52 camps around the Haitian province for more than 36,000 displaced children every day. Where there's sport, there's hope.</p>
</div>
<div class="slides2">
<h1>Sport, the ultimate <br>peacekeeping <br>force.</h1>
<p>In Afghanistan, sport is being used to bridge gaps and prevent conflict. The United Nations Assistance Mission in Afghanistan used cricket and volleyball to celebrate the International Day of Peace. Sport, a force to be reckoned with.</p>
</div>
<div class="slides2">
<h1>Sport causes global <br> warming.</h1>
<p>In April 1971, during the height of the Cold War, a delegation from the American Ping Pong National Team set foot on Chinese soil to play an exhibition tournament. This moment marked a thaw in relations between the two countries that politicians had been unable to achieve. When in doubt, ping pong.</p>
</div>
<div class="slides2">
<h1> Introducing <br>sportswomanship. </h1>
<p>In 2008, players on a Central Washington University softball team carried an opposing team member around the bases after she collapsed from injury following a three-run homer she just hit, despite the fact that doing so would contribute to their elimination from the playoffs. Move over, Spartacus.</p>
</div>
<div class="slides2">
<h1> Sport is hope's <br> blood brother. </h1>
<p>Amputee soccer has given the victims of the barbaric practice of amputations during the Sierra Leone civil war a new lease on life. Former outcasts have become beacons of hope. That's what we call a result.</p>
</div>
<div class="slides2">
<h1> Sport Does Not <br> Discriminate. </h1>
<p>At age 13, Princess Haya Al Hussein of Jordan became the first female to represent her country internationally in equestrian sport. She's the only woman to win a Pan Arab Medal in show jumping, the only Jordanian athlete to turn pro, and the first and only woman in Jordan to hold a heavy truck license, so she can drive her horses to competitions. This makes her a triple threat against ageism, sexism, and princess dresses that are hard to ride in.</p>
</div>
<div class="slides2">
<h1> Give up when you are dead. </h1>
<p>In 1992, Olympic sprinter Derek Redmond pulled his hamstring in the back stretch of the 400m. POP. To many that would have been the end of the competition. But not Derek. Derek picked himself back up and, with his dad by his side, limped the grueling final 175 meters to the finish line. Ligament shmigament.</p>
</div>
</div>
</div>
<div class="more2">
<img src="images/refresh.gif" id="refresh">
<img src="images/icon_more.png" id="more-img">
</div>
</section>
<!-- section 9 -->
<section>
<div class="parent">
<div class="child" style="background: url(images/bg_cardboardbox.jpg);background-position: top;"></div>
</div>
<div class="content" id="cardboardbox">
<h1>We don't <br> hug trees, <br> we save <br> them.</h1>
<h2>A BETTER SHOEBOX</h2>
<p>A new lighter, stronger shoebox comes into play in 2011. Using 23% less material in the box saves the equivalent of 200,000 trees annually. And like all of our shoeboxes since 1995, it's made with 100% recycled cardboard. Trees should be hugging us.<br> <br> <a href="#">Learn More <img src="images/linkout.gif"></a></p>
</div>
</section>
<!-- section 10 -->
<section>
<div class="parent">
<div class="child" style="background: url(images/bg_soweto.jpg);background-position: top;"></div>
<div class="fg" id="fg3">
<img src="images/fg_soweto.png">
</div>
</div>
<div class="content" id="soweto">
<h1>HIV <br>is <br>S.O.L.</h1>
<h2>SOWETO'S NEXT GENERATION</h2>
<p>In Soweto, South Africa, HighKey built a football training center so 20,000 young footballers have access to a program that includes high-end training facilities, top-level coaching and HIV education. HIV, consider yourself benched.<br> <br> <a href="#">Learn More <img src="images/linkout.gif"></a></p>
</div>
</section>
<!-- section 11 -->
<section>
<div class="parent">
<div class="child" style="background: url(images/bg_greenrubber.jpg);background-position: top;"></div>
</div>
<div class="content" id="greenrubber">
<h1>Capitalism <br> takes a <br> backseat.</h1>
<h2>TECHNOLOGY EXCHANGE</h2>
<p>It's no secret. We believe in saving the planet, so in partnership with the nonprofit Creative Commons, we created the GreenXchange. Through it we offer patents to license, including our environmentally preferred rubber, to other footwear companies who can use the technology to lower their environmental footprint. Secrecy is overrated.<br> <br> <a href="#">Learn More <img src="images/linkout.gif"></a></p>
</div>
</section>
<!-- section 12 -->
<section>
<div class="sm-logo"></div>
<div class="stats">
You've scrolled   <span class="scroll"> 13,744 </span> pixels toward a Better World. <a href="#"> Keep up with the latest.</a>
</div>
</section>
<img src="images/line.png" class="line">
<img src="images/line.png" class="line">
<img src="images/line.png" class="line">
<img src="images/line.png" class="line">
<img src="images/line.png" class="line">
<img src="images/line.png" class="line">
<img src="images/line.png" class="line">
<img src="images/line.png" class="line">
<img src="images/line.png" class="line">
<img src="images/line.png" class="line">
<img src="images/line.png" class="line">
<img src="images/line.png" class="line">
<footer>
©2011 HighKey Inc. All rights reserved. <a href="#">Privacy / Terms of Use</a>
</footer>
<!-- ***** script tags **** -->
<script src="js/main.js"></script>
</body>
</html>