-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
199 lines (184 loc) · 10.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>UCC Engineering Society</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/bootstrap.css"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/parallax.min.js"></script>
<!--thx for parrallex.js's support for the following mobile code-->
<script>
$(function(){
if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
$('#ios-notice').removeClass('hidden');
$('.parallax-container').height( $(window).height() * 0.5 | 0 );
} else {
$(window).resize(function(){
var parallaxHeight = Math.max($(window).height() * 0.7, 200) | 0;
$('.parallax-container').height(parallaxHeight);
}).trigger('resize');
}
});
</script>
</head>
<body style="padding-top: 70px;">
<div class="navbar navbar-fixed-top navbar-light bg-faded">
<a class="navbar-brand">
<img src="img/logo.png" width="28" height="28" class="align-top"> UCC Engineering Society
</a>
<ul class="nav navbar-nav hidden-sm-down" style="float:right">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">About</a>
</li>
<li class="nav-item">
<a class="nav-link">Programs</a>
</li>
<li class="nav-item">
<a class="nav-link">Team</a>
</li>
<li class="nav-item">
<a class="nav-link">Join</a>
</li>
</ul>
<div class="text-xs-right">
<button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#nav-collapse" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse" id="nav-collapse">
<div class="dropdown-divider"></div>
<a class="dropdown-item text-muted">Home</a>
<a class="dropdown-item text-muted">About</a>
<a class="dropdown-item text-muted">Programs</a>
<a class="dropdown-item text-muted">Team</a>
<a class="dropdown-item text-muted">Join</a>
</div>
</div>
<section>
<div class="container general">
<div class="row">
<div class="col-md-9 left">
<h1>Upper Canada College Engineering Society</h1>
<h2>Explore! Build! Change!
</div>
<div class="col-md-3 right">
<a href="http://utoronto.ewb.ca/" target="_blank"><img src="img/uoftewb.png" alt="University of Toronto Engineers Without Borders"></a>
</div>
</div>
</div>
</section>
<div class="parallax-container" data-parallax="scroll" data-position="top" data-bleed="10" data-image-src="img/clubphoto.jpg" data-natural-width="4050" data-natural-height="1650"></div>
<section>
<div class="container general">
<h1>Who are we?</h1>
<p>Lorem ipsum dolor sit amet, integre perpetua mea ad. Possit accusam interpretaris nec ut. Error aeque concludaturque an pri, possim aliquando ei has. Adhuc dissentias concludaturque vim no. Duo inermis elaboraret at, te qui posse nihil delenit. Id qui bonorum consequuntur, ne veri tempor nam, ius gloriatur instructior ne. Antiopam interpretaris ei sed. Sea saepe ubique intellegebat ne, in pro dictas virtute, impedit inimicus qui cu. Platonem consequat no vel. Eu vim partem fabulas, prima eirmod appellantur duo ei, pri id similique reprimique. Mei et zril ullamcorper. Ei sed tale discere legimus. Nominavi contentiones eam eu, legere euripidis democritum ea cum. Et quo porro neglegentur, omnesque deserunt cum ex. Eu sit graeco offendit. No erat vivendo nam. Ne nominavi placerat cum. Est id efficiendi deterruisset, eos denique disputando id. Viris definitionem mea ex. In pri justo debitis vivendum. Gubergren urbanitas argumentum mel eu. Qui melius aliquando in, vim in appareat oporteat disputando. Nec brute aliquam no. Has probatus recusabo id, ex graeco epicuri his. Debitis facilis honestatis at ius. Mei et inani vocibus appetere.</p>
</div>
</section>
<div class="parallax-container" data-parallax="scroll" data-bleed="10" data-speed="0.2" data-image-src="img/3dprint.jpg" data-natural-width="5344" data-natural-height="3006"></div>
<section>
<div class="container general">
<h1>What do we do? Programs</h1>
<p>Lorem ipsum dolor sit amet, integre perpetua mea ad. Possit accusam interpretaris nec ut. Error aeque concludaturque an pri, possim aliquando ei has. Adhuc dissentias concludaturque vim no. Duo inermis elaboraret at, te qui posse nihil delenit. Id qui bonorum consequuntur, ne veri tempor nam, ius gloriatur instructior ne. Antiopam interpretaris ei sed. Sea saepe ubique intellegebat ne, in pro dictas virtute, impedit inimicus qui cu. Platonem consequat no vel. Eu vim partem fabulas, prima eirmod appellantur duo ei, pri id similique reprimique. Mei et zril ullamcorper. Ei sed tale discere legimus. Nominavi contentiones eam eu, legere euripidis democritum ea cum. Et quo porro neglegentur, omnesque deserunt cum ex. Eu sit graeco offendit. No erat vivendo nam. Ne nominavi placerat cum. Est id efficiendi deterruisset, eos denique disputando id. Viris definitionem mea ex. In pri justo debitis vivendum. Gubergren urbanitas argumentum mel eu. Qui melius aliquando in, vim in appareat oporteat disputando. Nec brute aliquam no. Has probatus recusabo id, ex graeco epicuri his. Debitis facilis honestatis at ius. Mei et inani vocibus appetere.</p>
</div>
</section>
<div class="parallax-container" data-parallax="scroll" data-bleed="10" data-image-src="img/clubphoto.jpg" data-natural-width="4050" data-natural-height="1650"></div>
<section>
<div class="container general">
<h1>Team</h1>
<p>We are a group of UCC students who loves engineering and would like to help others explore engineering!</p>
<div class="row center">
<div class="col-md-4">
<img src="img/team/geoffrey.jpg" alt="Geoffrey Jiang" class="img-circle head">
<h3 class="team">Geoffrey Jiang</h3>
<h5>Club Head</h5>
</div>
<div class="col-md-4">
<img src="img/team/isaac.png" alt="Isaac Ng" class="img-circle head">
<h3 class="team">Isaac Ng</h3>
<h5>Club Head</h5>
</div>
<div class="col-md-4">
<img src="img/team/shaan.png" alt="Shaan Hooey" class="img-circle head">
<h3 class="team">Shaan Hooey</h3>
<h5>Club Head</h5>
</div>
</div>
<br>
<div class="row center">
<div class="col-md-4">
<img src="img/team/julian.jpg" alt="Julian Samek" class="img-circle head">
<h3 class="team">Julian Samek</h3>
<h5>Club Executive</h5>
</div>
<div class="col-md-4">
<img src="img/team/simon.jpg" alt="Simon Zirui Guo" class="img-circle head">
<h3 class="team">Simon Zirui Guo</h3>
<h5>Club Executive</h5>
</div>
<div class="col-md-4">
<img src="img/team/avatar.jpeg" alt="Michael Bateman" class="img-circle head">
<h3 class="team">Michael Bateman</h3>
<h5>Club Executive</h5>
</div>
</div>
</section>
<div class="parallax-container" data-parallax="scroll" data-bleed="10" data-image-src="img/clubphoto.jpg" data-natural-width="4050" data-natural-height="1650"></div>
<section>
<div class="container general center">
<h1>Join us!</h1>
<!--<a href='mailto:shaan.hooey@ucc.on.ca,geoffrey.jiang@ucc.on.ca,isaac.ng@ucc.on.ca,michael.bateman@ucc.on.ca,julian.samek@ucc.on.ca,simon.guo@ucc.on.ca'>Shoot us an email</a>-->
<h5>We welcome any UCC student to join our club. Follow these two steps below and join today!</h5>
<hr>
<div class="row">
<div class="col-md-6">
<h3><strong>Step 1</strong> Shoot us an Email <i class="fa fa-envelope" aria-hidden="true"></i></h3>
<h5>*Please don't spam</h5>
<br>
<form method="POST" action="http://formspree.io/simon.guo@ucc.on.ca">
<div class="form-group"><input type="name" class="form-control" name="name" placeholder="Your name"></div>
<div class="form-group"><input type="email" class="form-control" name="email" placeholder="Your email"></div>
<div class="form-group"><input type="grade" class="form-control" name="grade" placeholder="Your grade"></div>
<div class="form-group"><textarea name="message" class="form-control" rows="3" placeholder="Tell us about yourself"></textarea></div>
<button class="btn btn-lg btn-block hvr-sweep-to-right" style="background:#E01563; color:white" type="submit">Send</button>
</form>
<br>
</div>
<div class="col-md-6 center vertical-line-L">
<h3><strong>Step 2</strong> Join our Slack team <i class="fa fa-slack" aria-hidden="true"></i></h3>
<iframe src="https://uccewb-slack.herokuapp.com" width="400px" height="400px" scrolling="no" frameborder="0"></iframe>
</div>
</div>
</div>
</section>
<section>
<footer class="center">
<div class="container-fluid white" style="background-color:#F5A051;">
<div style="padding-top:36px; padding-bottom:36px;">Designed and Coded by <a class="page-scroll" href = "#" style="color: #2B343D;"> the UCC Engineering Society Team</a>, on <a href="https://github.com/UCCEWB/uccewb.github.io" target="_blank"><i style="color:#2B343D" class="fa fa-github fa-lg"></i></a> with <i class="fa fa-code fa-lg"></i></div>
</div>
</footer>
</section>
<!--google-analytics-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-92499503-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>