-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
316 lines (282 loc) · 17.1 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
<!DOCTYPE html>
<html lang="en">
<!-- Standard Page -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Welcome to the Void Developers Conference">
<title>Home | Void Developers Conference</title>
<!-- Bootstrap and Overrides -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!-- Bootstrap JS -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Registration JS -->
<script type="text/javascript" src="js/contact.js"></script>
<!-- Imports Site Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600&display=swap" rel="stylesheet">
<!-- favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#000000">
<meta name="msapplication-TileColor" content="#000000">
<meta name="theme-color" content="#ffffff">
</head>
<body class="d-flex flex-column bg-dark">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top p-0">
<div class="container">
<a class="navbar-brand" href="index.html" id="navImgA">
<img src="images/new logos/2x/Asset 1@2x.png" alt="Void Entertainment Logo" id="navImgImg" class="align-center">
</a>
<!-- Mobile Nav Button -->
<button class="navbar-toggler" 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">
<span class="me-auto"></span>
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active disabled" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="schedule.html">Schedule</a>
</li>
<li class="nav-item">
<a class="nav-link" href="history.html">History</a>
</li>
<li class="nav-item d-none d-lg-block">
<span class="nav-link">|</span>
</li>
<li class="nav-item">
<a class="nav-link" href="interviews.html">Interviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="behindscenes.html">Behind-the-scenes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="demos.html">Demos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="shop.html">Shop</a>
</li>
</ul>
</div>
</div>
</nav>
<main>
<!-- Alert bar -->
<div class="fluid-container alertBar">
<div class="row text-center text-light w-100 px-4 py-2 m-0">
<p class="p-0 m-0">Day 1 of the Virtual Conference has officially started!</p>
</div>
</div>
<!-- call to action -->
<div class="bg-light callToAction text-center vh-75 d-flex justify-content-center align-items-center">
<div class="container px-md-0 px-4 callToActionText">
<div class="row">
<div class="align-self-center">
<div class="row p-0 my-5 align-items-center ">
<div class="col-12 p-0 text-light">
<h1 class="mb-4">Welcome to the (Virtual) Void Developers Conference.</h1>
<p>
The Void Developers Conference, brought to you by Void Entertainment, is a 4-day event designed to promote independent developers and their games. You will also learn more about the video game making process and get to hear from other indie developers. This year, we have decided to make this event FREE to the public, so feel free to explore, just remember to register!
</p>
<a href="#registrationDiv" class="animatedButton text-decoration-none">
<button class="btn btn-primary">Register Now</button>
</a>
<a href="#conferenceHomeNav" class="animatedButton text-decoration-none">
<button class="btn btn-primary">Enter the Conference</button>
</a>
<div>
</div>
</div>
<!-- <div class="col-6 col-m-0 p-0">
<img src="images/Playing games.svg" class="img_fluid mx-auto d-none d-lg-block" width="100%" alt="">
</div> -->
</div>
</div>
</div>
</div>
</div>
<!-- two columns -->
<div class="bg-dark text-white">
<div class="container py-5 px-md-0 px-4">
<div class="row pb-4 text-center">
<h2 class="h1 bold">What is this conference?</h2>
</div>
<div class="row">
<div class="col-lg-6 col-md-12 ps-0 pe-lg-5 pe-0">
<h3 class="h4">Void Entertainment</h3>
<p>Void Entertainment was established in 2011 as a modern publisher for breakthrough independent experiences. You can learn more about our history <a href="history.html" class="link-light">here</a>. We wanted to give small voices the opportunity to get their message and concepts on the main stage. We've offered:
</p>
<ul>
<li>Countless classes to help artists in all aspects of creating a video game</li>
<li>A marketplace for developers to release their projects where we take a 0% cut of profits</li>
<li>Free-to-use online message boards to allow developers to share projects and ideas</li>
</ul>
</div>
<hr class="d-block d-lg-none">
<div class="col-lg-6 col-md-12 ps-0 pe-lg-5 pe-0">
<h3 class="h4">Void Developers Conference</h3>
<p>In 2013, we were given the opportunity to sponsor a conference for indie developers and with that, the Void Developers Conference was created. Over the past 10 years, we've been able to share our passion for all facets of game making to the world. Our conference has provided countless educational opportunities including:
</p>
<ul>
<li>Coding and game engine bootcamps</li>
<li>Art and design courses</li>
<li>Creating a celebration of independent developers and their games</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container p-0">
<hr class="m-0 homeHr">
</div>
<!-- register now -->
<div class="bg-dark py-5 text-light" id="registrationDiv">
<div class="container pb-4 px-md-0 px-4">
<div class="row text-center">
<h2>Register Now!</h2>
</div>
</div>
<div class="container text-light" id="contactForm">
<form onsubmit="return false" id="registrationForm">
<div class="row">
<p class="col-md-6 col-lg-3">First Name: <input class="form-control" type="text" name="firstname" placeholder="First Name" id="firstName"> </p>
<p class="col-md-6 col-lg-3">Last Name: <input class="form-control" type="text" name="lastname" placeholder="Last Name" id="lastName"><br></p>
<p class="col-lg-6">Email: <input class="form-control" id="emailInput" type="email" title="email" placeholder="Email"><br></p>
</div>
<div class="row mb-4">
<div class="col-lg-4 col-12">
<div class="mb-lg-0 mb-4">
<p class="m-0">Phone Number</p>
<input class="form-control mb-0" type="text" name="guestNumber" id="phoneNumber" placeholder="(123) 456-7890">
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 mb-md-0 mb-4">
<div>
<label for="reason" class="">How are you affiliated with game design?<br></label>
<select class="col-3 form-select" name="reason" id="affiliationQuestion" aria-label="">
<option selected disabled>Choose an Option</option>
<option value="0">Programmer</option>
<option value="0">Digital Artist</option>
<option value="0">Sound/Music Designer</option>
<option value="0">Story Author</option>
<option value="0">Computer Science Student</option>
<option value="0">Game Player</option>
</select>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<!-- d-flex justify-content-center -->
<div class="align-middle">
<p class="m-0 ">Is this your first time attending the conference?</p>
<input class="form-check-input" type="radio" name="flexRadioAttended" id="radio1">
<label class="form-check-label" for="radio1">
Yes
</label><br>
<input class="form-check-input" type="radio" name="flexRadioAttended" id="radio2">
<label class="form-check-label" for="radio2">
No
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<button type="submit" title="submit" class="btn btn-primary" id="submit-button" onclick="formSubmit()">Submit</button>
<span class="formHidden w-auto ms-2" id="formSuccess">The form was successfully submitted.</span>
<span class="formHidden w-auto ms-2" id="formInvalid">Please fill in every section of this form.</span>
<span class="formHidden w-auto ms-2" id="formNumber">Please enter a valid phone number.</span>
<span class="formHidden w-auto ms-2" id="formEmail">Please enter a valid email address.</span>
</div>
</div>
</form>
</div>
</div>
<!-- 6 buttons -->
<div class="container p-0">
<hr class="m-0 homeHr">
</div>
<div class="bg-dark text-light">
<div class="container py-5 px-md-0 px-4 text-white text-center" id="conferenceHomeNav">
<div class="row text-center">
<h2>The Conference</h2>
</div>
<div class="row">
<a href="schedule.html" class="col-md-5 col-12 bg-primary m-auto py-5 mt-4 conferenceHomeA d-flex align-items-center justify-content-center text-decoration-none link-light border">
<div class="align-middle">
<p class="h5">Schedule</p>
<p class="homeButtonText mb-0">Click here for the conference schedule.</p>
</div>
</a>
<a href="history.html" class="col-md-5 col-12 bg-primary m-auto py-5 mt-4 conferenceHomeA d-flex align-items-center justify-content-center text-decoration-none link-light border">
<div class="align-middle">
<p class="h5">History</p>
<p class="homeButtonText mb-0">View the history of the company and the conference.</p>
</div>
</a>
</div>
<div class="row">
<a href="interviews.html" class="col-md-5 col-12 bg-primary m-auto py-5 mt-4 conferenceHomeA d-flex align-items-center justify-content-center text-decoration-none link-light border">
<div class="align-middle">
<p class="h5">Interviews</p>
<p class="homeButtonText mb-0">Read interviews with game programmers and other artists.</p>
</div>
</a>
<a href="behindscenes.html" class="col-md-5 col-12 bg-primary m-auto py-5 mt-4 conferenceHomeA d-flex align-items-center justify-content-center text-decoration-none link-light border">
<div class="align-middle">
<p class="h5">Behind-the-scenes</p>
<p class="homeButtonText mb-0">Look at the Void offices to see behind-the-scenes of game development.</p>
</div>
</a>
</div>
<div class="row">
<a href="demos.html" class="col-md-5 col-12 bg-primary m-auto py-5 mt-4 conferenceHomeA d-flex align-items-center justify-content-center text-decoration-none link-light border">
<div class="align-middle">
<p class="h5">Demos</p>
<p class="homeButtonText mb-0">Play game demos from upcoming developers!</p>
</div>
</a>
<a href="shop.html" class="col-md-5 col-12 bg-primary m-auto py-5 mt-4 conferenceHomeA d-flex align-items-center justify-content-center text-decoration-none link-light border">
<div class="align-middle">
<p class="h5">Shop</p>
<p class="homeButtonText mb-0">Get your conference and indie game merch here.</p>
</div>
</a>
</div>
</div>
</div>
<hr class="bg-dark m-0">
</main>
<footer class="footer mt-auto bg-dark py-3 text-light">
<div class="container">
<div class="row px-2 mt-2">
<!-- Void Entertainment Logo Column -->
<div class="col-md-4 col-12 mb-md-0 mb-3 text-left">
<img src="images/voidlogolight.svg" width="160" alt="Void Entertainment Logo">
</div>
<!-- Contact Column -->
<div class="col-md-4 col-12 mb-md-0 mb-2">
<p class="m-0">Contact Us!</p>
<p class="m-0"><i class="fas fa-phone-alt"></i>(415) 555-0132</p>
<p class="m-0"><i class="fas fa-envelope"></i>info@example.com</p>
</div>
<!-- Social Media Column -->
<div class="col-md-4 col-12 mb-md-0 mb-2">
<p class="m-0">Keep up with our latest projects @VoidEntertainmentDevs</p>
</div>
</div>
<!-- Bottom Footer Row -->
<div class="row align-items-center px-2">
<span class="col-12">TSA Team #### | <a href="references.html" class="link-light">References</a> | © 2022</span>
</div>
</div>
</footer>
</body>
</html>