This repository has been archived by the owner on Jan 4, 2020. It is now read-only.
forked from lowenhere/roboclash-site
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
250 lines (204 loc) · 11 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Join ROBOCLASH 2019: Big Discovery, the inaugural edition of the head-to-head robotics competition!">
<meta name="author" content="SUTD Organization of Autonomous Robotics">
<meta name="robots" content="follow"/>
<meta property="og:image" content="./img/roboclash_preview_icon.png" />
<title> ROBOCLASH 2019</title>
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="css/landing-page.css" rel="stylesheet">
<link href="css/roboclash-custom.css" rel="stylesheet">
</head>
<body>
<main class="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="img/roboclash_text_logo.png" alt="ROBOCLASH" height="50">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#prizes">Prizes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#organizers">Organizers</a>
</li>
<li class="nav-item">
<button type="submit" class="btn" disabled aria-disabled="true">REGISTRATIONS CLOSED</button>
</li>
</ul>
</div>
</div>
</nav>
<!-- Masthead -->
<section class="text-white text-center parallax-section parallax bg1">
<div class="overlay"></div>
<div class="container masthead">
<div class="row">
<div class="col-xl-9 mx-auto">
<h1 class="mb-3">ROBOCLASH 2019</h1>
<p class="mb-4">CHECK OUT THE HIGHLIGHTS BELOW!</p>
</div>
</div>
</div>
</section>
<section class="py-3">
<div class="d-flex flex-wrap justify-content-around align-items-center container">
<div class="row ">
<div class = "d-inline-block align-self-stretch px-4 py-2">
<div class = "h-100 card border-secondary bg-dark px-3 pt-1 pb-4" id="">
<h3 class="mt-4 mb-3">ROBOCLASH 2019 Highlights</h3>
<div id="imageCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
<li data-target="#imageCarousel" data-slide-to="1"></li>
<li data-target="#imageCarousel" data-slide-to="2"></li>
<li data-target="#imageCarousel" data-slide-to="3"></li>
<li data-target="#imageCarousel" data-slide-to="4"></li>
<li data-target="#imageCarousel" data-slide-to="5"></li>
<li data-target="#imageCarousel" data-slide-to="6"></li>
<li data-target="#imageCarousel" data-slide-to="7"></li>
<li data-target="#imageCarousel" data-slide-to="8"></li>
<li data-target="#imageCarousel" data-slide-to="9"></li>
<li data-target="#imageCarousel" data-slide-to="10"></li>
<li data-target="#imageCarousel" data-slide-to="11"></li>
<li data-target="#imageCarousel" data-slide-to="12"></li>
<li data-target="#imageCarousel" data-slide-to="13"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="./img/event_images/DSC03725.jpg" alt="">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./img/event_images/DSC03535.jpg" alt="">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./img/event_images/DSC02422.jpg" alt="">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./img/event_images/DSC03297.jpg" alt="">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./img/event_images/DSC02499.jpg" alt="">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./img/event_images/DSC02618.jpg" alt="">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./img/event_images/DSC03092.jpg" alt="">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./img/event_images/DSC03359.jpg" alt="">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./img/event_images/DSC02707.jpg" alt="">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./img/event_images/DSC03713.jpg" alt="">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./img/event_images/DSC03709.jpg" alt="">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./img/event_images/DSC03718.jpg" alt="">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./img/event_images/DSC03665.jpg" alt="">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./img/event_images/DSC02383.jpg" alt="">
</div>
</div>
<a class="carousel-control-prev" href="#imageCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#imageCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<div class = "d-inline-block align-self-stretch col-md-6 px-2 py-2">
<div class = "h-100 card border-secondary bg-dark px-3 pt-1 pb-4" id="about">
<h3 class="mt-4 mb-3">About</h3>
<p class="mt-2 mb-2 text-justify">
<i>SUTD's first head-to-head robotics competition is here!
<br>
<br>
In ROBOCLASH: Big Discovery, two competing research organizations have landed on the alien planet SOMA VIII to gather fragments of mysterious alien monoliths for processing into a promising new volatile energy source</i> - Gaseous Poly-Astralate.
<br>
<br>
Build a robot to complete the various challeges and pit your robot against others in the tournament! Sign up in pairs to be matched into teams! (all participants must be SUTD students)
</p>
</div>
</div>
<div class = "d-inline-block align-self-stretch col-md-6 px-2 py-2">
<div class = "h-100 card border-secondary bg-dark px-3 pt-1 pb-4" id="about">
<h3 class="mt-4 mb-3">Competition Details</h3>
<h4> Timeline: </h4>
<p class="mt-2 mb-2"><b>Till 4 May: </b>Build your robot!</p>
<p class="mt-2 mb-2"><b>4 - 5 May: Preliminary Event - </b>Test your robot on the competition field! </p>
<p class="mt-2 mb-2"><b>11 - 12 May: Final Event - </b>Complete the challenges with your robot in the exciting head-to-head tournament! </p>
<p class="mt-2 mb-1">To learn more about the rules of the competition, download the rulebook below!</p>
<button type="button" class="btn btn-light mt-4" onclick="window.open('./downloads/ROBOCLASH 2019 Ruleset.pdf')">Download the Rulebook! (last updated 07/05/2019) <i class="far fa-file-pdf"></i></button>
<button type="button" class="btn btn-secondary mt-4" onclick="window.open('./downloads/ROBOCLASH T&C.html')">Terms & Conditions</button>
</div>
</div>
<div class = "d-inline-block align-self-stretch col-md-6 px-2 py-2">
<div class = "h-100 card border-secondary bg-dark px-3 pt-1 pb-5" id="prizes">
<h3 class="mt-4 mb-3 align-middle">Prizes</h3>
<p class="mt-2 mb-2"><b>First Prize:</b> One Nintendo Switch for each team member!</p>
<p class="mt-2 mb-2"><b>Second Prize:</b> A Samsung Galaxy Tab E 9.6 for each team member!</p>
<p class="mt-2 mb-2"><b>More prizes to be revealed!</b></p>
</div>
</div>
</div>
</section>
<section class="text-center" id="organizers">
<div class="container">
<div>
<h3 class="pt-4 mb-4">Brought to you by</h3>
</div>
<div class="container">
<div class = "d-inline-block col-md-3 mb-3">
<h5 class="mb">Organizer:</h5>
<img class="img-fluid px-3 py-3" src ="img/black_bg_logos/SOAR_logo.png"/>
</div>
<div class = "d-inline-block col-md-3 mb-3">
<h5>Sponsored by:</h5>
<img class="img-fluid px-3 py-3" src ="img/black_bg_logos/lionsbot_logo.png"/>
</div>
<div class = "d-inline-block col-md-3 mb-3">
<h5>Supported by:</h5>
<img class="img-fluid px-3 py-3" src ="img/black_bg_logos/EPD_logo.png"/>
</div>
</div>
</div>
</section>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</main>
</body>
</html>