-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathhome.html
More file actions
302 lines (279 loc) · 18.7 KB
/
home.html
File metadata and controls
302 lines (279 loc) · 18.7 KB
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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/StyleSheet.css">
<script src="https://kit.fontawesome.com/f7a97ee3aa.js" crossorigin="anonymous"></script>
<!-- Website Favicon -->
<link rel = "shortcut icon" type = "image/png" href = "Images/Logo.png">
<!-- Logo Font -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap" rel="stylesheet">
<title>Home</title>
</head>
<body>
<!-- Navigation Bar Start -->
<nav class="navbar navbar-expand-sm">
<!-- Brand -->
<a class="navbar-brand devsoc-nav-logo" href="index.html">[}EVSOC_</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon">
<i class="fa fa-bars" style="color:#fff; font-size:28px;"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class = "navbar-nav ml-auto">
<!-- Page -->
<li class="nav-item">
<a class="nav-link devsoc-nav-item" href="home.html"><i class="fa fa-fw fa-home" style="color:#fff"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link devsoc-nav-item" target="_blank" href="https://discord.com/invite/JrPpeWQ"><i class="fa fa-fw fa-user-friends" style="color:#fff"></i> Join</a>
</li>
<li class="nav-item">
<a class="nav-link devsoc-nav-item" href="mailto:devsoc@ntu.ac.uk"><i class="fa fa-fw fa-envelope" style="color:#fff"></i> Contact</a>
</li>
<li class="nav-item">
<a class="nav-link devsoc-nav-item" href="DCHP/introduction.html"><i class="fa fa-fw fa-code" style="color:#fff"></i> DCHP++</a>
</li>
<li class="nav-item">
<a class="nav-link devsoc-nav-item" href="Archive/archive.html"><i class="fa fa-fw fa-archive" style="color:#fff"></i> Archive</a>
</li>
</ul>
</div>
</nav>
<!-- Header Image and Text -->
<header>
<div class="overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="Images/WelcomePage.mp4" type="video/mp4">
</video>
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100 text-white">
<h1 class="display-3 header-title"><strong>The Developer's Society</strong></h1>
<p class="lead mb-0"><strong>Nottingham Trent University</strong></p>
</div>
</div>
</div>
</header>
<!-- Content -->
<div class = "container-fluid top-buffer">
<div class = "row">
<div class = "col">
<h2 class = "text-center"><strong>What is DevSoc?</strong></h2>
</div>
</div>
<div class = "row mt-4 mb-4">
<div class = "col-sm-2"></div>
<div class = "col-sm-8">
<ul class = "list-unstyled">
<li class="media">
<i class="mt-1 mr-2 fa fa-fw fa-user-circle fa-3x" style = "color:rgb(190, 66, 159)" alt="User Profile Image"></i>
<div class="media-body">
<h5 class="mt-0"><strong>C00lKiD123</strong></h5>
<p>Hi there! Could you tell me a little bit more about DevSoc?</p>
</div>
</li>
<li class="media mt-2">
<div class="media-body text-right">
<h5 class="mt-0 mb-1 "><strong>DEVS0C_Committee</strong></h5>
<p> Hiya! DevSoc is a society under NTU's Department of Computer <br>Science that focuses on all things computer science and IT. <br><br>At DevSoc we welcome all kinds of activities ranging<br> from making games to tinkering with hardware.</p>
</div>
<i class="mt-1 ml-2 fa fa-fw fa-user-circle fa-3x" style = "color:rgb(50, 93, 161)" alt="User Profile Image"></i>
</li>
<li class="media">
<i class="mt-1 mr-2 fa fa-fw fa-user-circle fa-3x" style = "color:rgb(190, 66, 159)" alt="User Profile Image"></i>
<div class="media-body">
<h5 class="mt-0"><strong>C00lKiD123</strong></h5>
<p>That sounds interesting! How do I get involved?</p>
</div>
</li>
<li class="media mt-2">
<div class="media-body text-right">
<h5 class="mt-0 mb-1 "><strong>DEVS0C_Committee</strong></h5>
<p>Feel free to check out our Discord server as that's where <br>most of our community's discussions take place. <br><br>We also have a room located on the Clifton Campus.<br>Room 124 in the Mary Ann Evans (MAE 124) building<br> that you can pop into to say hello!</p>
</div>
<i class="mt-1 ml-2 fa fa-fw fa-user-circle fa-3x" style = "color:rgb(50, 93, 161)" alt="User Profile Image"></i>
</li>
</ul>
</div>
<div class = "col-sm-2"></div>
</div>
<br>
<div class = "row mt-4 mb-4">
<div class = "col">
<h2 class = "text-center"><strong>Committee 2023-24:</strong></h2>
</div>
</div>
<div class="row mt-4 mb-4 mx-4 justify-content-center">
<div class="col-lg-3 my-2">
<div class="bg-custom p-3 text-center rounded box"><img class="img-responsive rounded-circle" src="Images/Profiles/Bobby.jpg" width="90">
<h5 class="mt-3 name">Joshua Waters</h5><span class="work d-block">BSc (H) Computer Science</span>
<br>
<div class="mt-4 about"><span><strong>Interests:</strong><br>Gaming, Modding and Programming</span></div>
<div class="mt-4">
<a href = "https://jwaters.dev" target = "_blank"><h6>View Profile</h6></a>
</div>
</div>
</div>
<div class="col-lg-3 my-2">
<div class="bg-custom p-3 text-center rounded box"><img class="img-responsive rounded-circle" src="Images/Profiles/Ellie.jpg" width="90">
<h5 class="mt-3 name">Ellie Cooley</h5><span class="work d-block">BSc (H) Computer Systems<br>(Cyber Security)</span>
<div class="mt-4 about"><span><strong>Interests:</strong><br>Self Defence, Campanology and Enigmatology</span></div>
<div class="mt-4">
<a href = "#" target = "_blank"><h6>View Profile</h6></a>
</div>
</div>
</div>
</div>
<div class="row mt-4 mb-4 mx-4 justify-content-center">
<div class="col-lg-3 my-2">
<div class="bg-custom p-3 text-center rounded box"><img class="img-responsive rounded-circle" src="Images/Profiles/Ben.jpg" width="90">
<h5 class="mt-3 name">Ben Radford</h5><span class="work d-block">BSc (H) Software Engineering</span>
<div class="mt-4 about"><span><strong>Interests:</strong><br>Linux, Gaming and Shenanigans</span></div>
<div class="mt-4">
<a href = "https://github.com/GrandtheUK" target = "_blank"><i class="fa fa-fw fa-github fa-lg socials"></i></a>
</div>
</div>
</div>
<div class="col-lg-3 my-2">
<div class="bg-custom p-3 text-center rounded box"><img class="img-responsive rounded-circle" src="Images/Profiles/Diren.jpeg" width="90">
<h5 class="mt-3 name">Diren De Silva Abeyewickreme</h5><span class="work d-block">BSc (H) Software Engineering</span>
<div class="mt-4 about"><span><strong>Interests:</strong><br>Gaming, Anime and Modding Phones</span></div>
<div class="mt-4">
<a href = "https://github.com/Dev-Diren" target = "_blank"><i class="fa fa-fw fa-github fa-lg socials"></i></a>
</div>
</div>
</div>
<div class="col-lg-3 my-2">
<div class="bg-custom p-3 text-center rounded box"><img class="img-responsive rounded-circle" src="Images/Profiles/Danny.jpg" width="90">
<h5 class="mt-3 name">Danney Morbey</h5><span class="work d-block">BA (H) Product Design</span>
<div class="mt-4 about"><span><strong>Interests:</strong><br>Walking, Nature, Design and Video-games</span></div>
<div class="mt-4">
<a href = "https://www.linkedin.com/in/daniel-morbey/" target = "_blank"><i class="fa fa-fw fa-linkedin fa-lg socials"></i></a>
</div>
</div>
</div>
</div>
<div class="row mt-4 mb-4 mx-4 justify-content-center">
<div class="col-lg-3 my-2">
<div class="bg-custom p-3 text-center rounded box"><img class="img-responsive rounded-circle" src="Images/Profiles/Ethan.png" width="90">
<h5 class="mt-3 name">Ethan van der Westhuizen</h5><span class="work d-block">BSc (H) Computer Science</span>
<div class="mt-4 about"><span><strong>Interests:</strong><br>Literature, Gaming and Programming</span></div>
<div class="mt-4">
<a href = "https://github.com/monsyuun" target = "_blank"><i class="fa fa-fw fa-github fa-lg socials"></i></a>
<a href = "https://www.linkedin.com/in/ethan-van-der-westhuizen-751535221/" target = "_blank"><i class="fa fa-fw fa-linkedin fa-lg socials"></i></a>
</div>
</div>
</div>
<div class="col-lg-3 my-2">
<div class="bg-custom p-3 text-center rounded box"><img class="img-responsive rounded-circle" src="Images/Profiles/Teti.jpg" width="90">
<h5 class="mt-3 name">Lethiwe Mwendwa</h5><span class="work d-block">BSc (H) Computer Science (Games Tech)</span>
<div class="mt-4 about"><span><strong>Interests:</strong><br>Animation, Gaming and Manga</span></div>
<div class="mt-4">
<a href = "https://github.com/lethiwe-mwendwa" target = "_blank"><i class="fa fa-fw fa-github fa-lg socials"></i></a>
<a href = "https://www.linkedin.com/in/lethiwe-mwendwa/" target = "_blank"><i class="fa fa-fw fa-linkedin fa-lg socials"></i></a>
</div>
</div>
</div>
</div>
<br>
<div class = "row mt-4 mb-4">
<div class = "col">
<h2 class = "text-center"><strong>Supporting Alumni Committee:</strong></h2>
</div>
</div>
<div class="row mt-4 mb-4 mx-4 justify-content-center">
<div class="col-lg-3 my-2">
<div class="bg-custom p-3 text-center rounded box"><img class="img-responsive rounded-circle" src="Images/Profiles/Hannah.jpg" width="90">
<h5 class="mt-3 name">Hannah Ashna Jacob</h5><span class="work d-block">BSc (H) Computer Science (Games Tech)</span>
<div class="about"><span><strong>Committee: </strong>2020 - 2023</span></div>
<div class="mt-4 about"><span><strong>Interests:</strong><br>Gaming, Theatre and anything Punk</span></div>
<div class="mt-4">
<a href = "https://github.com/Hannah-Ashna" target = "_blank"><i class="fa fa-fw fa-github fa-lg socials"></i></a>
<a href = "https://www.linkedin.com/in/hannah-ashna-jacob/" target = "_blank"><i class="fa fa-fw fa-linkedin fa-lg socials"></i></a>
</div>
</div>
</div>
<div class="col-lg-3 my-2">
<div class="bg-custom p-3 text-center rounded box"><img class="img-responsive rounded-circle" src="Images/Profiles/Jarad.jpg" width="90">
<h5 class="mt-3 name">Jarad Johnson-Bailey</h5><span class="work d-block">BSc (H) Computer Science</span>
<div class="about"><span><strong>Committee: </strong>2020 - 2023</span></div>
<div class="mt-4 about"><span><strong>Interests:</strong><br>Games, DnD and 2000s Pop-Punk</span></div>
<div class="mt-4">
<a href = "https://www.linkedin.com/in/jaradjb/" target = "_blank"><i class="fa fa-fw fa-linkedin fa-lg socials"></i></a>
</div>
</div>
</div>
</div>
<br>
<div class = "row mt-4 mb-4">
<div class = "col">
<h2 class = "text-center"><strong>Current Events:</strong></h2>
</div>
</div>
<div class="row mt-4 mb-4 mx-4 justify-content-center">
<div class="row mt-4 mb-4 mx-4 justify-content-center">
<div class="col-lg-4 my-2">
<div class="card card-shadow">
<img class="card-img-top" src="Images/CurrentEvents/no events filler.png" alt="Filler Banner">
<div class="card-body">
<h5 class="card-title"><strong>More events in the works!</strong></h5>
<p class="card-text">Make sure to join the Discord to keep in touch with the events being announced!</p>
<p class="card-text text-right"><i>Soon:tm:</i></p>
<a href="https://discord.gg/SkF6y4zYH3" target = "_blank" class="btn btn-dark float-right">Details</a>
</div>
</div>
</div>
</div>
</div>
<div class = "row mt-4 mb-4">
<div class = "col">
<h2 class = "text-center"><strong>Annual Events:</strong></h2>
</div>
</div>
<div class="row mt-4 mb-4 mx-4 justify-content-center">
<div class="row mt-4 mb-4 mx-4 justify-content-center">
<div class="col-lg-4 my-2">
<div class="card card-shadow">
<img class="card-img-top" src="Images/AnnualEvents/season2Map.png" alt="DevSoc and dragons world map">
<div class="card-body">
<h5 class="card-title"><strong>DevSoc and Dragons</strong></h5>
<p class="card-text">Exchanging their keyboards and mice for swords and magic, DevSoc enters the world of fantasy.</p>
<p class="card-text text-right"><i>Annual Summer Event</i></p>
<a href="Dnd/Dnd.html" class="btn btn-dark float-right">View content</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class = "row">
<div class = "col">
<div class = "row justify-content-center">
<h5 class = "text-center mt-2">Find us elsewhere:</h5>
</div>
<div class = "row mb-4 justify-content-center">
<a href = "https://github.com/NTUDevSoc" target = "_blank" class="fab fa-fw fa-github fa-2x socials"></a>
<a href = "https://www.linkedin.com/groups/8860819/" target = "_blank" class="fa fa-fw fa-linkedin fa-2x socials"></a>
<a href = "https://www.facebook.com/ntudevsoc" target = "_blank" class="fab fa-fw fa-facebook-square fa-2x socials"></a>
<a href = "https://www.instagram.com/ntudevsoc/" target = "_blank" class="fab fa-fw fa-instagram fa-2x socials"></a>
<a href = "https://twitter.com/DevSoc" target = "_blank" class="fab fa-fw fa-twitter fa-2x socials"></a>
<a href = "https://discord.com/invite/JrPpeWQ" target = "_blank" class="fab fa-fw fa-discord fa-2x socials"></a>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="Javascript.js"></script>
</body>
</html>