-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
232 lines (206 loc) · 16.6 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous">
<link href="styles/styles.css" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="theme-color" content="#64C6BE">
<title>Zilch</title>
</head>
<body>
<header class="site-header sticky-top py-0">
<nav class="navbar navbar-expand-lg navbar-dark py-0">
<div class="container-fluid w-100 p-0">
<a href="#"><svg class="navbar-brand" href="#" xmlns="http://www.w3.org/2000/svg" style="height: 2.5em; margin: .1rem 2rem !important" viewBox="0 0 137.65 52.6"><defs><style>.cls-1{fill:#64c6be;}.cls-2{fill:#fff;}</style></defs><title>Zilch_Logo_weiss</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M9.72,23.75c.42-5.19,2.39-14.06,11-14.06s10.58,8.87,11,14.06h9.71C40.6,9.24,32.65,0,20.71,0S.83,9.24,0,23.75Z"/><path class="cls-2" d="M31.71,28.85c-.42,5.19-2.4,14.06-11,14.06S10.14,34,9.72,28.85H0C.83,43.37,8.77,52.6,20.71,52.6S40.6,43.37,41.42,28.85Z"/><path class="cls-2" d="M48.89,38.26,60.16,22.05v-.14H50V17.48H67.11v3.09l-11,16v.14H67.28v4.43H48.89Z"/><path class="cls-2" d="M76,17.48V41.14H70.65V17.48Z"/><path class="cls-2" d="M80.66,17.48H86V36.64h9.41v4.5H80.66Z"/><path class="cls-2" d="M114.63,40.47a15.31,15.31,0,0,1-6.07,1c-8.18,0-12.39-5.09-12.39-11.83,0-8.07,5.75-12.56,12.91-12.56a14,14,0,0,1,5.83,1l-1.09,4.25a11.5,11.5,0,0,0-4.49-.88c-4.25,0-7.55,2.56-7.55,7.83,0,4.73,2.81,7.71,7.58,7.71a13.38,13.38,0,0,0,4.46-.77Z"/><path class="cls-2" d="M123.51,17.48v9.09h8.8V17.48h5.34V41.14h-5.34v-9.9h-8.8v9.9h-5.37V17.48Z"/></g></g></svg><a>
<button class="navbar-toggler mx-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-0 mb-lg-0">
<!--Wenn eines geklickt wird, dann fürge die Klasse active hinzu.-->
<li class="nav-item px-2">
<a class="nav-link p-3" aria-current="page" href="#Mitwirkende">Mitwirkende</a>
</li>
<li class="nav-item px-2">
<a class="nav-link p-3" href="#about">Prämisse</a>
</li>
<li class="nav-item px-2">
<a class="nav-link p-3" href="#tools">Tools</a>
</li>
<li class="nav-item px-2">
<a class="nav-link p-3" href="#skills">Fähigkeiten</a>
</li>
<!-- <li class="nav-item px-2">
<a class="nav-link p-3" href="#">Bilder</a>
</li> -->
<li class="nav-item zilch_blau px-2 d-none d-lg-block">
<a class="nav-link active p-3" href="https://zilch-demo.bassadin.de/" target="_blank">Jetzt Spielen!</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" style="background-image: url('assets/Storyboard_Bild2_mitSchein.jpg')">
<div class="container">
<div class="carousel-caption text-start">
<h1>Rette mit Zilch die Welt.</h1>
<p>Stoppe mit Hilfe von Hima die Unterdrückung der Arbeiter. Es liegt ein weiter Weg vor dir, aber zusammen könnt ihr das schaffen. Ihr seid der letzte Funken Hoffnung für eure Freunde.</p>
<p><a class="btn btn-lg zilch_blau" href="#about" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="carousel-item" style="background-image: url('assets/Storyboard_Wald.jpg')">
<div class="container">
<div class="carousel-caption">
<h1>Entdecke G'orora.</h1>
<p>Erforsche die weiten Wälder G'ororas und nutze Objekte, die deine Skills verändern. Aber Vorsicht! Auf dem Weg musst du zahlreiche Hürden überwinden und Kreaturen besiegen.</p>
<p><a class="btn btn-lg zilch_blau" href="#skills" role="button">Die Fähigkeiten</a></p>
</div>
</div>
</div>
<div class="carousel-item" style="background-image: url('assets/Storyboard_ZilchKopf.jpg')">
<div class="container">
<div class="carousel-caption text-end">
<h1>Dunkle Mächte beherrschen die Welt.</h1>
<p>Seit Jahrhunderten wntwickelt sich die Welt zu einem schlechteren Ort. Hast du den Mut dazu, diese Entwicklung zu stoppen und dich gegen die dunklen Mächte aufzulehnen?</p>
<!-- Hier den Link zu dem Online-Spiel einfügen. -->
<p><a class="btn btn-lg zilch_blau" href="https://zilch-demo.bassadin.de/" target="_blank" role="button">Jetzt spielen</a></p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
<div class="container marketing">
<!-- Two columns of text below the carousel -->
<div class="row d-flex justify-content-center" id="Mitwirkende">
<div class="col-lg-4">
<img class="rounded-circle" width="140" height="140" src="assets/contributors/markus.jpg">
<h3 class="fs-5 fw-light mb-0 mt-2">Developer</h3>
<h2>Markus Damm</h2>
<p>In der Spieleprogrammierung fühlt er sich wohl. Mit kreativen Ideen und dem Umsetzungsvermögen eigener Spielideen in Unity ist Markus ein wichtiger Teil des Projektteams.</p>
<!-- Für einen Button unter den Personen. -->
<!-- <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> -->
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" width="140" height="140" src="assets/contributors/bastian.jpg">
<h3 class="fs-5 fw-light mb-0 mt-2">Developer</h3>
<h2>Bastian Hodapp</h2>
<p>Vor allem die Planung und Organisation der Projektgruppe hat sich Bastian zu seinem Arbeitsgebiet gemacht. Zudem bringt er mit seiner Programmiererfahrung wichtige Kenntnisse mit, um in Unity das zu erreichen, was wir brauchen.</p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" width="140" height="140" src="assets/contributors/manuel.jpg">
<h3 class="fs-5 fw-light mb-0 mt-2">Sound Design</h3>
<h2>Manuel Matern</h2>
<p>Ein virtuose am Midi-Controller. Mit beeindruckenden Sound- und Klangkenntnissen trug Manuel einen sehr großen Teil zur guten Immersion in das Spiel bei. Neben unzähligen Sounds entwickelte er auch den Soundtrack zum Spiel.</p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4">
<img class="rounded-circle" width="140" height="140" src="assets/contributors/carlotta.jpg">
<h3 class="fs-5 fw-light mb-0 mt-2">Art</h3>
<h2>Carlotta Reinders</h2>
<p>Carlotta beeindruckt sowohl auf Papier als auch digital mit ihren Zeichenkünsten. Dies stellte sie zu Genüge während des gesamten Projektes unter Beweis. Unter anderem kümmerte Sie sich um Character-Design und Spielassets.</p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" width="140" height="140" src="assets/contributors/marco.jpg">
<h3 class="fs-5 fw-light mb-0 mt-2">Story & UI</h3>
<h2>Marco Zaretzke</h2>
<p>Mit pfiffigen Ideen und kreativen Lösungen zu wichtigen Problemen im gesamten Spielgeschehen beteiligte sich Marco als klassischer Medienkonzeptionist optimal an unserem Projekt. Unter anderem kümmerte er sich um die UI des Spiels.</p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" width="140" height="140" src="assets/contributors/philipp.jpg">
<h3 class="fs-5 fw-light mb-0 mt-2">Animation & Art</h3>
<h2>Philipp Wandel</h2>
<p>Mit guten Ratschlägen und einem ausgeprägten Sinn für Gestaltung konnte er allen Projektmitgliedern stets zur Seite stehen, um so das Beste aus allen Seiten des Projektes rauszuholen. Zudem hat er mit seinen Animationen einen wichtigen Beitrag dazu geleistet, die Welt von Zilch zum Leben zu erwecken.</p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
<!-- START THE FEATURETTES -->
<!--Was ist Zilch für ein Spiel?-->
<hr class="featurette-divider" id="about">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">Zilch ist Arbeiter. <span class="text-muted">Der Weg zum Kämpfer.</span></h2>
<p class="lead">Cyborgs, Natur und Rache. Die Stadt G’orora wird von dunklen Mächten kontrolliert, die Bevölkerung von der industriellen Allianz als Arbeitersklaven ausgebeutet. Als Zilch sich eines Tages endlich aus dieser Kontrolle befreien kann, begibt er sich auf eine Reise außerhalb seines bisherigen Lebensraums. Während er sich seinen Weg durch diese neue, unbekannte Welt bahnt, muss er zahlreiche Hürden überwinden und verschiedene Kreaturen besiegen, um schließlich die Machenschaften der industriellen Mächte stoppen zu können.</p>
</div>
<div class="col-md-5">
<img src="./assets/Bild_Kampf.jpg" class="img-fluid mx-auto" width="500" height="500">
</div>
</div>
<hr class="featurette-divider" id="tools">
<div class="row featurette">
<div class="col-md-7 order-md-2">
<h2 class="featurette-heading">Wie es gemacht wurde. <span class="text-muted">Der Prozess.</span></h2>
<p class="lead">Das Spiel wurde mithilfe der Unity Game Engine entwickelt. Bemerkenswert ist hierbei die Tatsache, dass alle Assets (Grafiken, Animation, Sound, Musik und Code) von den Mitgliedern des Projekts selbst erstellt wurden. Von der Planung bis hin zur schließlichen Umsetzung wurden sämtliche Schritte von den Studierenden geplant und durchgeführt.
</p>
</div>
<!-- style="background-image: url('./assets/Startscreen.jpg'); width:500px; height:500px" -->
<div class="col-md-5 order-md-1">
<!-- <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg> -->
<img src="./assets/Startscreen.jpg" class="img-fluid mx-auto" width="500" height="500">
</div>
</div>
<!-- Hier kommt eine Beschreibung zu den Skillveränderungen innerhalb des Spiels hin. -->
<hr class="featurette-divider" id="skills">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">Anpassbare Skills. <span class="text-muted">Unendliche Möglichkeiten.</span></h2>
<p class="lead">Um Fähigkeiten deines Charakters nach deinen Wünschen anzupassen musst du einfach die Modifier in verschiedene Ausrüstungs-Slots ziehen. Probiere verschiedene Kombination aus und passe Sie deiner Situation an.</p>
</div>
<div class="col-md-5">
<img src="./assets/Inventar.jpg" class="img-fluid mx-auto" width="500" height="500">
</div>
</div>
<hr class="featurette-divider" id="video">
<div class="row featurette">
<div class="col-md-7 order-md-2">
<h2 class="featurette-heading">Zilchs Geschichte.<span class="text-muted">Der Trailer.</span></h2>
<p class="lead">Finde heraus, wie Zilch es geschafft hat, der Gedankenkontrolle zu entkommen und sich seinen Weg in die Freiheit zu erkämpfen.
</p>
</div>
<!-- style="background-image: url('./assets/Startscreen.jpg'); width:500px; height:500px" -->
<div class="col-md-5 order-md-1 d-flex">
<!-- <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg> -->
<iframe class="img-fluid mx-auto video" width="500" height="281" src="https://www.youtube.com/embed/9B2VX62d16M" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<hr class="featurette-divider">
<!-- /END THE FEATURETTES -->
</div><!-- /.container -->
<!-- FOOTER -->
<footer class="container">
<p class="float-end"><a href="#">Back to top</a></p>
<p>© 2020-2021 Projektstudium HFU · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer>
</main>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
</body>
</html>