-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
342 lines (221 loc) · 24.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" / >
<title>SnowTap</title>
<link href="dist/css/vendor.min.css" rel="stylesheet" type="text/css" />
<!-- <link href="dist/css/styles_snow.css" rel="stylesheet" type="text/css" /> -->
<link href="dist/css/styles_snow.min.css" rel="stylesheet" type="text/css" />
<link href="dist/css/hotfix.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="icon" href="images/favicon.png" type="image/x-icon">
</head>
<body>
<h1 id="extendBrowser">Please make your browser window larger</h1>
<h1 id="minimizeBrowser">Please make your browser window smaller</h1>
<div id="mainScrollArea">
<!-- /////////////////// NAVIGATION ///////////////// -->
<div id="navSection">
<div id="navigation">
<div class="container">
<div id="navList">
<div id="logo"><a href="#fma"><h2>SNOW<span id="logoSpan">TAP</span></h2></a></div>
<nav><a id="navAbout" href="#aboutSection"><h1>ABOUT</h1></a></nav>
<nav><a id="navCrisis" href="#crisisSection"><h1>CRISIS</h1></a></nav>
<nav><a id="navProduct" href="#productSection"><h1>PRODUCTS</h1></a></nav>
<nav><a id="navCause" href="#causeSection"><h1>CAUSE</h1></a></nav>
<nav><a id="navContact" href="#footerSection"><h1>CONTACT</h1></a></nav>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<!-- ///// SNOW / BACKGROUND ///// -->
<canvas id="snowCanvas"></canvas>
<div id="backgroundCloudsOne">
<img src="images/backgroundCloudsBlue.jpg" width="100%" height="100%" alt="could 1"/>
</div>
<!-- /////////////////// FMA ///////////////// -->
<section id="fma">
<div id="loadColor"></div>
<div class="logo" id="logoDrop"><img src="images/logoDrop.png" width="100%" height="100%" alt="Snowtap Logo"/></div>
<div class="logo" id="logoText"><img src="images/logoTextWhite.png" width="100%" height="100%" alt="Snowtap Text"/></div>
<div id="fmaCloudOne" class="cloud cloud--fma"><img src="images/cloud1b.png" width="100%" height="100%" alt="could 1"/></div>
<div id="fmaCloudTwo" class="cloud cloud--fma"><img src="images/cloud2b.png" width="100%" height="100%" alt="could 2"/></div>
<div id="fmaCloudThree" class="cloud cloud--fma"><img src="images/cloud3b.png" width="100%" height="100%" alt="could 3"/></div>
<div id="fmaCloudFour" class="cloud cloud--fma"><img src="images/cloud4b.png" width="100%" height="100%" alt="could 4"/></div>
<a id="scrollDownArrow" href="#aboutSection"><img src="images/scrollDownArrow.png" width="100%" height="100%" alt="Scroll Arrow"/></a>
</section>
<!-- /// ABOUT //////////////////////////////////////////// -->
<section id="aboutSection">
<div id="aboutCloudOne" class="cloud cloud--about"><img src="images/cloud5b.png" width="100%" height="100%" alt="about could 1"/></div>
<div id="aboutCloudTwo" class="cloud cloud--about"><img src="images/cloud3b.png" width="100%" height="100%" alt="about could 2"/></div>
<div id="aboutCloudThree" class="cloud cloud--about"><img src="images/cloud6b.png" width="100%" height="100%" alt="about could 3"/></div>
<div id="aboutCloudFour" class="cloud cloud--about"><img src="images/cloud7b.png" width="100%" height="100%" alt="about could 4"/></div>
<div id="aboutCloudFive" class="cloud cloud--about"><img src="images/cloud8b.png" width="100%" height="100%" alt="about could 5"/></div>
<div id="aboutCloudSix" class="cloud cloud--about"><img src="images/cloud2b.png" width="100%" height="100%" alt="about could 6"/></div>
<div id="aboutFlakeOne" class="snowflake snowflake--about snowflakeOne"><h3>ABOUT</h3><img src="images/snowflake1.png" width="100%" height="100%" alt="about snowflake 1"/></div>
<div id="aboutFlakeTwo" class="snowflake snowflake--about snowflakeTwo"><h4>CRISIS</h4><img src="images/snowflake2.png" width="100%" height="100%" alt="about snowflake 2"/></div>
<div id="aboutFlakeThree" class="snowflake snowflake--about snowflakeThree"><h5>PRODUCTS</h5><img src="images/snowflake3.png" width="100%" height="100%" alt="about snowflake 3"/></div>
<div class="hiddenContent avoidPointer" id="aboutContent">
<a class="closeButton"><h2>x</h2></a>
<h1>ABOUT <span class="whiteTitle">SNOWTAP</span></h1>
<!-- <div class="clear"></div> -->
<p>Our goal is to utilize natural resources to create a clean water option for consumption and survival. With the world’s access to clean water becoming an issue, We are looking for new ways to supply the population with clean, drinkable water on different scales. Providing opportunities on a large scale for individual homes and companies and on an individual level, by creating a backpack attachment for on the go purposes.</p>
<div class="moreContent moreIcon"><img src="images/iconFlakeMain.png" width="100%" height="100%" alt="Snowtap logo"/></div>
<p class="moreContent">Our company brings a new element to the table that many other water filters systems are missing out on: Snow. Moving past using only water opens up many new avenues for mountain climbers, backwater hikers, people inhabiting arctic territory or anyone living in an area with snowfall. We can start making a lifestyle change for the better of our planet and mankind.</p>
<a class="doneButton moreContent"><h3>COLLAPSE</h3></a>
<div class="moreButton"><h6>LEARN MORE</h6></div>
</div>
</section>
<!-- /// CRISIS /////////////////////////////////////////// -->
<section id="crisisSection">
<div id="crisisCloudOne" class="cloud cloud--crisis"><img src="images/cloud9b.png" width="100%" height="100%" alt="crisis could 1"/></div>
<div id="crisisCloudTwo" class="cloud cloud--crisis"><img src="images/cloud10b.png" width="100%" height="100%" alt="crisis could 2"/></div>
<div id="crisisCloudThree" class="cloud cloud--crisis"><img src="images/cloud12b.png" width="100%" height="100%" alt="crisis could 3"/></div>
<div id="crisisCloudFour" class="cloud cloud--crisis"><img src="images/cloud11b.png" width="100%" height="100%" alt="crisis could 4"/></div>
<div id="crisisCloudFive" class="cloud cloud--crisis"><img src="images/cloud13b.png" width="100%" height="100%" alt="crisis could 5"/></div>
<div id="crisisCloudSix" class="cloud cloud--crisis"><img src="images/cloud14b.png" width="100%" height="100%" alt="crisis could 6"/></div>
<div id="crisisFlakeOne" class="snowflake snowflake--crisis snowflakeOne"><h3>CRISIS</h3><img src="images/snowflake2.png" width="100%" height="100%" alt="crisis snowflake 1"/></div>
<div id="crisisFlakeTwo" class="snowflake snowflake--crisis snowflakeTwo"><h4>PRODUCTS</h4><img src="images/snowflake3.png" width="100%" height="100%" alt="crisis snowflake 2"/></div>
<div id="crisisFlakeThree" class="snowflake snowflake--crisis snowflakeThree"><h5>CAUSE</h5><img src="images/snowflake5.png" width="100%" height="100%" alt="crisis snowflake 3"/></div>
<div class="hiddenContent avoidPointer" id="crisisContent">
<a class="closeButton"><h2>x</h2></a>
<h1><span class="whiteTitle">WE'RE IN A</span> WATER CRISIS</h1>
<p>Clean water is quickly becoming the world’s most valuable resource. There is an estimated 750 million people worldwide without access to clean water, that is almost 2.5 times the population of the entire United States. The lack of clean water and hygiene kills about 842,000 people every year globally. Which means as we sit around and waste our clean water flushing toilets and watering plants, there are approximately 2,300 people dying per day. It’s time for a change.</p>
<div class="moreContent moreIcon"><img src="images/iconDrop.png" width="100%" height="100%" alt="Snowtap logo"/></div>
<p class="moreContent">We are lucky enough to live in a time where there is running water at our fingertips just about anywhere we look, but not everyone is that lucky. Women and children around the world spend about 140 million hours a day collecting water to drink and survive. Even with all that time invested in water collection, there is a child that dies every minute due to a water related disease. They are the unfortunate one in nine people across the world without access to clean water, while the rest of us waste the majority of our clean water flushing toilets and showering.</p>
<div class="moreContent moreIcon"><img src="images/iconSkull.png" width="100%" height="100%" alt="Snowtap logo"/></div>
<ul class="moreContent moreList">
<li><p><strong class="bullet"></strong> 750 million people worldwide without access to clean water.</p></li>
<li><p><strong class="bullet"></strong> That is 1 in 9 people around the world that lack access to safe water.</p></li>
<li><p><strong class="bullet"></strong> Over 840,000 people die every year from a water related disease.</p></li>
<li><p><strong class="bullet"></strong> 2,300 people are killed daily due to a lack of clean drinking water.</p></li>
<li><p><strong class="bullet"></strong> There is an estimated 113 trillion gallons of snow and rain that falls annually in America alone.</p></li>
</ul>
<a class="doneButton moreContent"><h3>COLLAPSE</h3></a>
<div class="moreButton"><h6>HOW BAD?</h6></div>
</div>
</section>
<!-- /// PRODUCT ////////////////////////////////////////// -->
<section id="productSection">
<div id="productCloudOne" class="cloud cloud--product"><img src="images/cloud2b.png" width="100%" height="100%" alt="product could 1"/></div>
<div id="productCloudTwo" class="cloud cloud--product"><img src="images/cloud6b.png" width="100%" height="100%" alt="product could 2"/></div>
<div id="productCloudThree" class="cloud cloud--product"><img src="images/cloud3b.png" width="100%" height="100%" alt="product could 3"/></div>
<div id="productCloudFour" class="cloud cloud--product"><img src="images/cloud7b.png" width="100%" height="100%" alt="product could 4"/></div>
<div id="productCloudFive" class="cloud cloud--product"><img src="images/cloud5b.png" width="100%" height="100%" alt="product could 5"/></div>
<div id="productCloudSix" class="cloud cloud--product"><img src="images/cloud4b.png" width="100%" height="100%" alt="product could 6"/></div>
<div id="productFlakeOne" class="snowflake snowflake--product snowflakeOne"><h3>PRODUCT</h3><img src="images/snowflake3.png" width="100%" height="100%" alt="product snowflake 1"/></div>
<div id="productFlakeTwo" class="snowflake snowflake--product snowflakeTwo"><h4>CAUSE</h4><img src="images/snowflake5.png" width="100%" height="100%" alt="product snowflake 2"/></div>
<div id="productFlakeThree" class="snowflake snowflake--product snowflakeThree"><h5>CONTACT</h5><img src="images/snowflake4.png" width="100%" height="100%" alt="product snowflake 3"/></div>
<div class="hiddenContent avoidPointer" id="productContent">
<a class="closeButton"><h2>x</h2></a>
<h1><span class="whiteTitle">SNOWTAP</span> PRODUCTS</h1>
<p>Our vast product line we have developed will have a tap for anyone out there. If your looking for an individual way to waste less clean water we have the BottleTap for you, or if your a company executive you can invest in the RoofTap for your building and greatly reduce your water waste and costs. There's an option for everyone.</p>
<div class="moreContent productIcon"><img src="images/iconCollect.png" width="100%" height="100%" alt="Snowtap logo"/></div>
<p class="moreContent">Our water purifying systems help people, homes and companies to reduce their water waste. The opportunity to create a natural clean water source and reduce your water waste is something we should all strive to do in today's society.</p>
<div class="moreContent productIcon"><!-- <img src="images/iconMobileTap.png" width="100%" height="100%" alt="Snowtap Icon"/> --></div>
<p class="moreContent"><span class="boldMore">Outdoors:</span> For people who are active and on the go, there is a mobile outdoor SnowTap. It's a backpack attachment that you can fill with snow or water which will melt and purify into clean drinking water for on the go purposes.</p>
<ul class="moreContent moreList">
<li><p><strong class="bullet"></strong> The outdoors SnowTap can be attached to your backpack for water filtration on the go, or can be hung up at a base camp to filter as you rest.</p></li>
<li><p><strong class="bullet"></strong> Snow packed into the Outdoors SnowTap is melted by self-regulated heating elements embedded between weatherproof material.</p></li>
<li><p><strong class="bullet"></strong> Melted snow passes through a mesh filter to get rid of larger particles and advances to UV lights to purify the water into clean drinking water.</p></li>
<li><p><strong class="bullet"></strong> Solar panels take in sunlight to charge the battery pack inbetween layers to prevent water damage. The battery powers the heating elements and UV lights as you travel.</p></li>
<li><p><strong class="bullet"></strong> If there is no sunlight to fuel the battery pack, there is a hand crank charger included. The handcrank charger also has a solar panel that can be used to charge a secondary battery as you travel.</p></li>
<li><p><strong class="bullet"></strong> Once there is a sufficient amount of water, you can insert your flexible WaterTap bottle nozzle into the spout and the water will flow in without using any hoses to prevent freezing and cracking.</p></li>
</ul>
<div class="moreContent buyButton"><h6>COMING SOON</h6></div>
<div class="clear"></div>
<div class="moreContent productIcon"><img src="images/iconHometap.png" width="100%" height="100%" alt="Snowtap logo"/></div>
<p class="moreContent"><span class="boldMore">Home:</span> For homes there is a rooftop installation to collect snow and rainfall. This accumulation of precipitation melts down into a collection tank to be purified. The resevoir can be used anywhere throughout the house to reduce their water waste and costs.</p>
<ul class="moreContent moreList">
<li><p><strong class="bullet"></strong> Just like the back window of your car, our HomeTap has heating elements running through it to prevent snow from freezing and building up.</p></li>
<li><p><strong class="bullet"></strong> After melting, the snow runs down a pipeline and passes through a particle filter into a collection tank to be purified.</p></li>
<li><p><strong class="bullet"></strong> After being purified, the water is available to be used throughout the home for drinking, showering, washing clothes or any water-related purpose.</p></li>
</ul>
<div class="moreContent buyButton"><h6>COMING SOON</h6></div>
<div class="clear"></div>
<div class="moreContent productIcon"><img src="images/iconCompany.png" width="100%" height="100%" alt="Snowtap logo"/></div>
<p class="moreContent"><span class="boldMore">Company:</span> Similar to homes, we offer a larger rooftop installation to collect precipitation to be used throughout the building. This is a great opportunity for the companies looking to go green and lessen their eco-footprint.</p>
<ul class="moreContent moreList">
<li><p><strong class="bullet"></strong> We offer multiple sizes of installations for varying sizes of buildings.</p></li>
<li><p><strong class="bullet"></strong> For larger buildings, we install RoofTaps facing multiple directions to ensure the maximum amount of precipitation is collected.</p></li>
<li><p><strong class="bullet"></strong> The collected water can be used as greywater, which is water that is not for consumption. Greywater is used in bathrooms, lawncare, washing machines and many other purposes.</p></li>
</ul>
<div class="moreContent buyButton"><h6>COMING SOON</h6></div>
<div class="clear"></div>
<a class="doneButton moreContent"><h3>COLLAPSE</h3></a>
<div class="moreButton"><h6>TAKE A LOOK</h6></div>
</div>
<!-- ///// MOUNTAIN SECTION ///// -->
<div id="mountainRange">
<div id="mountainPeak" class="mountain"><img src="images/mountains1.png" width="100%" height="100%" alt="Mountain Peak"/></div>
<div id="mountainLeft" class="mountain"><img src="images/mountainLeft.png" width="100%" height="100%" alt="Mountain Left"/></div>
<div id="mountainRight" class="mountain"><img src="images/mountainRight.png" width="100%" height="100%" alt="Mountain Right"/></div>
</div>
</section>
<!-- /// CAUSE //////////////////////////////////////// -->
<section id="causeSection">
<div id="causeCloudOne" class="cloud cloud--cause"><img src="images/cloud12b.png" width="100%" height="100%" alt="could 11"/></div>
<div id="causeCloudTwo" class="cloud cloud--cause"><img src="images/cloud15b.png" width="100%" height="100%" alt="could 12"/></div>
<div id="causeCloudThree" class="cloud cloud--cause"><img src="images/cloud10b.png" width="100%" height="100%" alt="could 13"/></div>
<div id="causeCloudFour" class="cloud cloud--cause"><img src="images/cloud9b.png" width="100%" height="100%" alt="could 14"/></div>
<div id="causeCloudFive" class="cloud cloud--cause"><img src="images/cloud14b.png" width="100%" height="100%" alt="could 15"/></div>
<div id="causeCloudSix" class="cloud cloud--cause"><img src="images/cloud11b.png" width="100%" height="100%" alt="could 16"/></div>
<div id="causeFlakeOne" class="snowflake snowflake--cause snowflakeOne"><h3>CAUSE</h3><img src="images/snowflake5.png" width="100%" height="100%" alt="cause snowflake 1"/></div>
<div id="causeFlakeTwo" class="snowflake snowflake--cause snowflakeTwo"><h4>CONTACT</h4><img src="images/snowflake4.png" width="100%" height="100%" alt="cause snowflake 2"/></div>
<div id="causeFlakeThree" class="snowflake snowflake--cause snowflakeThree"><img src="images/snowflake1.png" width="100%" height="100%" alt="cause snowflake 3"/></div>
<div class="hiddenContent avoidPointer" id="causeContent">
<a class="closeButton"><h2>x</h2></a>
<h1><span class="whiteTitle">WE'RE HERE</span> TO HELP</h1>
<p>Our water purifying systems help people, homes and companies to reduce their water waste, but they also contribute to a larger cause. The systems track the amount of clean water generated and pledge that for every gallon of clean water created, we will match it and donate water to countries in need. Using SnowTap will not only change your life, but the lives of the men, women and children around the world struggling without clean water.</p>
<div class="moreContent moreIcon"><img src="images/iconWorld.png" width="100%" height="100%" alt="Snowtap logo"/></div>
<p class="moreContent">SnowTap is one of the many organizations out there trying to make a difference. By using SnowTap’s water purifying systems you reduce your waste of water while contributing to the donation of clean water to those around the world who truly need it. If you decide not to join SnowTap’s movement, make changes in your home and daily routines. Buy water conserving toilets, showers and washing machines. Take shorter showers, water your lawn less, don’t run the faucet while you shave or brush your teeth. Start making changes for the greater good.</p>
<a class="doneButton moreContent"><h3>COLLAPSE</h3></a>
<div class="moreButton"><h6>MAKE CHANGE</h6></div>
</div>
</section>
<!-- /// FOOTER ////////////////////////////////////////// -->
<footer id="footerSection">
<div class="hiddenContent avoidPointer" id="snowingStats">
<h1><span class="whiteTitle">SNOWING</span> STATISTICS</h1>
<p>In the <span id="timeHolder"></span> seconds you have spent experiencing SnowTap's website, we have been keeping track of the amount of snowfall happening on screen to show the possibilities of SnowTap's products and cause.</p>
<div class="statsIcon"><img src="images/iconFlakeMain.png" width="100%" height="100%" alt="Snowtap logo"/></div>
<div class="statsIcon"><img src="images/iconDrop.png" width="100%" height="100%" alt="Snowtap logo"/></div>
<div class="clear"></div>
<p class="statsText">A total of <span class="snowStatsHolder"></span> square inches of snow have fallen.</p>
<p class="statsText"><span class="snowStatsHolder"></span> square inches of snow melts down into <span id="waterStatsHolder"></span> gallons of possible drinking water.</p>
<div class="clear"></div>
</div>
<!-- <a href="mailto:[email protected]" class="social" id="socialMail"><img src="images/socialMail.png" width="100%" height="100%" alt="Email"/></a> -->
<!-- <a href="https://twitter.com/?lang=en" class="social" id="socialTweet"><img src="images/socialTwitter.png" width="100%" height="100%" alt="Email"/></a> -->
<!-- <a href="https://instagram.com/" class="social" id="socialInsta"><img src="images/socialInsta.png" width="100%" height="100%" alt="Email"/></a> -->
<!-- <a href="https://www.youtube.com/" class="social" id="socialYou"><img src="images/socialYoutube.png" width="100%" height="100%" alt="Email"/></a> -->
<section id="copyright">
<p id="designby">Design / Development: <a href="http://patkavanaghjr.com/"><span>Pat Kavanagh</span></a></p>
<script>
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10) {
dd = '0'+dd
}
if(mm<10) {
mm = '0'+mm
}
today = mm + '/' + dd + '/' + yyyy;
</script>
<p id="copyrightText">© SnowTap <span id="copyright-year"><script>document.write(yyyy);</script></span></p>
<div class="clear"></div>
</section>
</footer>
</div> <!--END MAIN SCROLL AREA-->
<script type="text/javascript" src="dist/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="dist/js/vendor.min.js"></script>
<script type="text/javascript" src="dist/js/custom.js"></script>
<!-- <script type="text/javascript" src="/dist/js/custom.min.js"></script> -->
<script type="text/javascript" src="dist/js/hotfix.js"></script>
</body>
</html>