-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
333 lines (299 loc) · 13.2 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>The Future Timeline</title>
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Raleway:400,800' rel='stylesheet' type='text/css'>
<script src="js/jquery-1.11.3.min.js"></script>
<link rel="shortcut icon" type="image/png" href="img/time-favicon.png"/>
<!-- Timeline plugin dependencies http://www.jqueryscript.net/other/Responsive-Vertical-Timeline-With-jQuery-CSS3.html -->
<link rel="stylesheet" href="css/cntl.css">
<script src="js/jquery.cntl.js"></script>
<!-- SlickNav menu !-->
<link rel="stylesheet" href="SlickNav/dist/slicknav.min.css" />
<script src="SlickNav/dist/jquery.slicknav.min.js"></script>
<script>
$(document).ready(function(e) { // do not delete this line
$('.container h1').hide();
$('.container h1').fadeIn(3000)
$('header a').click(function(e) {
e.preventDefault();
var target = $( $(this).attr('href') ).position().top;
$('html,body').stop().animate({
scrollTop: target
},
{
duration: 1000
})
});
$('.scroll a').click(function(e) {
e.preventDefault();
var ob = $( $(this).attr('href') ).offset().top ;
$('html,body').stop().animate({
scrollTop: ob
},
{
duration: 800
})
});
// This animates the navigation bar. If the user scrolls below 30px, ab animation is triggered.
$(window).scroll(function(e){
// here the bar is id'ed myBar
if ($(this).scrollTop() > 30) { // choose the value you want.
$('nav').stop().animate({"padding" : "10px"});
$('nav').css({"background" : "#000000"});
$('#logo').css({"font-size" : "18px"});
} else {
$('nav').stop().animate({"padding":"30px"});
$('nav').css({"background" : "transparent"});
$('#logo').css({"font-size" : "22px"});
}
});
//Plugin dependency
$('.cntl').cntl({
// The amount of "scroll padding" to allow
// The more, the later the state will be revealed
revealbefore: 250,
// The animate class
// This class should have animation rules in css
anim_class: 'cntl-animate',
// A callback once the state has been revealed
onreveal: null
});
}); // do not delete this line
</script>
</head>
<body>
<nav>
<div id="nav-wrapper">
<ul id="nav-norm" class="navbar">
<li class="logo"><a href="index.html">The Future Timeline</a></li>
<li class="scroll"><a href="#timeline-one">Years V</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="quote.html">Quotes for the future</a></li>
</ul>
<ul id="ham-navbar" class="navbar">
<li class="logo"><a href="index.html">The Future Timeline</a></li>
<li class="scroll"><a href="article">Years</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="quote.html">Quotes</a></li>
</li>
</ul>
</nav>
<header>
<div class="container">
<h1>The future</h1>
<a href=".section-w" class="btn-scroll"><img src="img/arrow.png"></a>
</div>
</header>
<section>
<div class="section-w">
<h1> What's in store for humanity? </h1>
<p> The near future is long and daunting. One could argue that humanity
no longer has a future considering it's long track record of destruction
and war, but this timeline should serve to give an idea of what's to come.</p>
</div>
</section>
<article>
<div id="timeline-one">
<div class="cntl">
<span class="cntl-bar cntl-center">
<span class="cntl-bar-fill"></span>
</span>
<div class="cntl-states">
<div class="cntl-state">
<div class="cntl-content">
<h1>2020s</h1>
<p> In the 2020s we will be in a period of large-scale change. We will reach our tipping point in terms of oil and the economy and the world as we know will be forced to begin it’s shift towards renewable energy. </p>
<img src="img/timeline/2020-renewable.jpg" width="300" height="200">
<p>Other events include:</p>
<ul>
<li>Self driving cars will begin adoption on a global scale due to a push from well known car manufacturers.</li>
<li>Generation X reshapes global politics through their more liberal ideals.</li>
<li>Illness and various diseases such as cancer have become reduced at a faster rate due to advancements in research & technology. Cancers such as Hodgkin’s lymphoma survival rates are now approaching 100%.</li>
<li>Internet use accessibility and affordability is greatly improved allowing for Internet use to reach 5 billion users around the globe.</li>
</ul>
</div>
<div class="cntl-icon cntl-center">2020</div>
</div>
<div class="cntl-state">
<div class="cntl-content">
<h1>2030s</h1>
<p> The 2030s will be a decade of technological innovation. The worldwide population will have increased to an additional 2 billion people living on earth.</p>
<p> Other events include: </p>
<ul>
<li> A major shift in agriculture has occurred; the way we grow and raise cattle has changed to a more genetically enhanced method to account for population growth.</li>
<img src="img/timeline/2030-selfdrive.jpg" width="300" height="200">
<li> Artificial Intelligence is widespread, rather than one centralised AI, countless amounts of small AI effective control their own specialised domains.</li>
<li> The majority of new vehicles are either plug-in electric or hybrids, all of which are self-driven and autonomous. A shift from oil has begun and roads have become a safer place.</li>
<li> Emerging job titles of today
<ul>
<li>Social media officer</li>
<li>Virtual ethics teacher</li>
<li>Autonomous car mechanic</li>
</ul>
<li>Digital currency is slowly gaining traction.</li>
</li>
</ul>
</div>
<div class="cntl-icon cntl-center">2030</div>
</div>
<div class="cntl-state">
<div class="cntl-content">
<h1>2040s</h1>
<p> The decade of the 2040s will show change in terms of global influence, India and China’s influence on culture and society rivals that of the USA. As well as this technology has shifted towards a focus on biometric modifications such as sensory enhancements. </p>
<p> Other events include: </p>
<ul>
<li> Telecommuting has become a very common method of travelling to work.</li>
<li> Virtual currency is now replacing normal currency</li>
<img src="img/timeline/2040-money.jpg" width="300" height="200">
<li> Healthcare has advanced to such an extent where cancer rates and various other forms of disease have dropped dramatically. As a result human life span has increased significantly worldwide to a minimum of 90. </li>
<li> The worlds animal and plant life have declined as a result of global warming, major extinctions have occurred on many of the world’s species.</li>
</ul>
</div>
<div class="cntl-icon cntl-center">2040</div>
</div>
<div class="cntl-state">
<div class="cntl-content">
<h1>2050s</h1>
<p> In this decade the world population has reached 10billion people. The overpopulation of the world has contributed to advancements in housing, agriculture and become the catylst in society's move away from capitalism. </p>
<p> Other events include: </p>
<ul>
<li> Due to advancements in artifical intelligence, Moore's law has allowed the average computer to be as powerful as the entire human population.</li>
<li> Oil has been completely abandoned in favor of renewable and cleaner energy alternatives.</li>
<li> Space travel is becoming an increasingly simpler endeavour with humans now occupying mars and the moon.</li>
<img src="img/timeline/2050-mars.jpeg" width="300" height="200">
<li> Food has become free due to advancements in agriculture and technology.</li>
<li> The capitalistic society in which the world is based is falling apart due to the rapid movement of technology and automation causing a high percentage of unemployment (60%).</li>
</ul>
</div>
<div class="cntl-icon cntl-center">2050</div>
</div>
</div>
</div>
</div>
</article>
<section>
<div class="container">
<h1> What's next? </h1>
</div>
</section>
<article>
<div id="timeline-two">
<div class="cntl">
<span class="cntl-bar cntl-center">
<span class="cntl-bar-fill"></span>
</span>
<div class="cntl-states">
<div class="cntl-state">
<div class="cntl-content">
<h1>2060s</h1>
<p>The world has become heavily reliant on technology. As a result, technology has gradually shifted the world’s perception on work and culture due to automation.</p>
<p>Other events include:</p>
<ul>
<li>A shift away from traditional employment has occured due to widespread protest in the 2050s rendering most jobs redundant.</li>
<img src="img/timeline/2060-automate.jpg" width="300" height="200">
<li>Renewable energy is becoming increasingly efficient.</li>
<li>The Internet has become a virtual world in which a percentage of the population inhabit and live a large amount of their lives.</li>
<li>Australian population reaches 42million</li>
</ul>
</div>
<div class="cntl-icon cntl-center">2060</div>
</div>
<div class="cntl-state">
<div class="cntl-content">
<h1>2070s</h1>
<p>The world has changed a great deal with the population now reaching 12billion; technology and society have advanced to a point where human life span has reach an average of 100 years of age. </p>
<img src="img/timeline/2070-age.jpeg" width="350" height="200">
<p>Other events include:</p>
<ul>
<li> Driving your own car has become a foreign memory to many and is illegal in much of the world</li>
<li> The concept of work has changed with autonomous machines having taken over most roles. Humanity as a whole will be focused on more creative and philosophical endeavors. </li>
<li> The worldwide population has plateaued at 12billion.</li>
</ul>
</div>
<div class="cntl-icon cntl-center">2070</div>
</div>
<div class="cntl-state">
<div class="cntl-content">
<h1>2080s</h1>
<p>Androids and humans live in harmony; a ‘modification free’ movement will begin in this decade as the android population has grown to rival the human population in the world.</p>
<img src="img/timeline/2080-android.jpg" width="300" height="200">
<p>Other events include:</p>
<ul>
<li>‘Going to space’ has become as normal as travelling to another country due to advancements in technology.</li>
<li> Global warming has snow to be increasingly harder to experience and global efforts are taken to restore snow to sites such as Vancouver, Sochi, Oslo and Chamonix.</li>
</ul>
</div>
<div class="cntl-icon cntl-center">2080</p></div>
</div>
<div class="cntl-state">
<div class="cntl-content">
<h1>2090s</h1>
<p>The population of earth is heavily populated with humans which have completely merged with machines.</p>
<img src="img/timeline/2080-futurecity.jpeg" width="300" height="200">
<uL>
<li>Virtual reality has allowed near perfect simulations of every era of earth. </li>
<li>Population on Mars has grown to 2 million. </li>
</div>
<div class="cntl-icon cntl-center">2090</div>
</div>
</div>
</div>
</div>
</article>
<section>
<div class="container">
<h1>The Deep Future</h1>
</div>
</section>
<article>
<div id="timeline-three">
<div class="cntl">
<span class="cntl-bar cntl-center">
<span class="cntl-bar-fill"></span>
</span>
<div class="cntl-states">
<div class="cntl-state">
<div class="cntl-content">
<h1>2100 - Beyond</h1>
<p>Humans reach type 1 status on the Kardeshev scale by being able to harness all the energy available from our sun.</p>
<iframe width="100%" height="400" src="https://www.youtube.com/embed/1mx-BRJM0sA" frameborder="0" allowfullscreen></iframe>
</ul>
</div>
<div class="cntl-icon cntl-center">2100</div>
</div>
<div class="cntl-state">
<div class="cntl-content">
<h1>The Deep Future</h1>
<p>Humanity pushes limits and pushes past the shackles of earth.</p>
<p>Eventually:</p>
<ul>
<li> Our sun dies but humanity has moved into another dimension of existence.</li>
<img src="img/timeline/deepfuture.jpg" width="350" height="200">
<li> The Big Crunch. </li>
</ul>
</div>
<div class="cntl-icon cntl-center">?</div>
</div>
</div>
</div>
</div>
</article>
<section>
<div class="section-w">
<h1> What's next for humanity? </h1>
<p> The further we get, the more we can only speculate.</p>
</div>
</section>
<footer>
<div id="footer-links">
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</div>
</footer>
</body>
</html>