-
Notifications
You must be signed in to change notification settings - Fork 1
/
scrolldoku.html
95 lines (94 loc) · 4.96 KB
/
scrolldoku.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<nav class="navbar-container">
<div class="container navbar">
<a href="#" class="menuItem">Geschichte</a>
<a href="#" class="menuItem">Gegenwart</a>
<a href="#" class="menuItem">Zukunft</a>
<a href="#" class="menuItem">Future Now</a>
<a href="#" class="menuItem">Glossar</a>
</div>
</nav>
<section class="section section-fullHeight" style="background-image: url(header-image.jpg);">
<div class="container singleHeadline">
<h1>Virtual Reality</h1>
</div>
</section>
<section class="section section-text">
<div class="container">
<h1>Geschichte</h1>
<p>Virtual Reality an sich entwickelte sich schon recht früh so baute Fred Wallner bereits 1954 das Cinerama. Das Wort setzt sich zusammen aus Cinema und Panorama. Das Cinerama war ein Kino mit gewölbter Projektionswand die das periphere Gesichtsfeld des Zuschauers komplett abdeckte. Gefilmt wurde mit drei synchron laufenden Kameras mit leicht verschobenem Blickwinkel.</p>
</div>
</section>
<section class="section section-timeline">
<div class="container" id="cd-timeline">
<div class="cd-timeline-block">
<div class="cd-timeline-date">
<span class="cd-date">2014</span>
</div>
<div class="cd-timeline-content">
<h2>Title of section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
<a href="#0" class="cd-read-more">Read more</a>
</div>
<!-- cd-timeline-content -->
</div>
<div class="cd-timeline-callout">
<p>
Erst über zehn Jahre später geht es in der Entwicklung dann erneut weiter und mit der Entwicklung der Oculus Rift scheint die VR Technik endlich massentauglich, erfolgreich und zukunftsträchtig zu werden.
</p>
</div>
<!-- cd-timeline-block -->
<div class="cd-timeline-block-right">
<div class="cd-timeline-date">
<span class="cd-date">1999</span>
</div>
<div class="cd-timeline-content">
<h2>Title of section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
<a href="#0" class="cd-read-more">Read more</a>
</div>
<!-- cd-timeline-content -->
</div>
<!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-date">
<span class="cd-date">1999</span>
</div>
<div class="cd-timeline-content">
<h2>Title of section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
<a href="#0" class="cd-read-more">Read more</a>
</div>
<!-- cd-timeline-content -->
</div>
</div>
</section>
<section class="section">
<div class="container">
<h1 class="u-text-center">Gegenwart</h1>
</div>
<div class="video">
<div class="container">
<iframe width="100%" height="600px" src="https://www.youtube.com/embed/ixdEhDZOlb4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="links">
<h2 class="u-text-center">Weiterführende Links</h2>
<div class="container">
<div class="link"><a href="#">Sehsüchte Pantomime in 360° mit der Rico Theta</a></div>
<div class="link"><a href="#">Sehsüchte Pantomime in 360° mit der Rico Theta</a></div>
<div class="link"><a href="#">Sehsüchte Pantomime in 360° mit der Rico Theta</a></div>
</div>
</div>
</section>
<section class="section"></section>
<footer>
</footer>
</body>
</html>