-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
310 lines (289 loc) · 13.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
<!DOCTYPE html>
<!--
Transit by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canticum Novum</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-xlarge.css" />
</noscript>
</head>
<body class="landing">
<!-- Header -->
<header id="header">
<nav id="nav">
<ul class="icons">
<li>
<a class="icon rounded fa-facebook" href="https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&cad=rja&uact=8&ved=0CCYQFjACahUKEwjQ8M-_5ojIAhXIChoKHdqDBZY&url=https%3A%2F%2Fwww.facebook.com%2Fpages%2FCanticum-Novum-Stellenbosch-Studente-Kerkkoor%2F107095146025197&usg=AFQjCNEGu0vGRuc_udDOAfa64v9NjYMCCw&sig2=tEu1yH8pmbfewR1f51wE1A&bvm=bv.103073922,d.d2s"><span class="label">Facebook</span></a>
</li>
<li>
<a class="icon rounded fa-twitter" href="https://twitter.com/canticumstb"><span class="label">Twitter</span></a>
</li>
<li>
<a href="https://www.google.com/calendar/render?cid=canticumnovumstb@gmail.com&pli=1" class="button special">+ Add our calendar</a>
</li>
</ul>
<!--<li><a href="index.html">Home</a></li>-->
<!--<li><a href="generic.html">Generic</a></li>-->
<!--<li><a href="elements.html">Elements</a></li>-->
<!--<li><a href="#" class="button special">Book Audition</a></li>-->
</nav>
</header>
<!-- Banner -->
<section id="banner">
<h2>Canticum Novum</h2>
<p>Cantate Domino</p>
<ul class="actions">
<li>
<a href="#four" class="button big">Sign up for audition</a>
</li>
</ul>
</section>
<!-- One -->
<section id="one" class="wrapper style1 special">
<div class="container">
<header class="major">
<h2>Who are we?</h2>
</header>
<div class="row 100%">
<div class="12u 12u$(medium)">
<section class="box">
<p>Canticum Novum is the only choir in South Africa consisting of mostly students and young people with a repertoire dedicated primarily to sacred music. While being part of the Dutch Reformed Church of Stellenbosch on a full time basis, the choir is also a concert choir with a broad repertoire</p>
</section>
</div>
</div>
</div>
</section>
<!-- five -->
<section id="five" class="wrapper style1 special" style="background-image: url(images/dark_tint.png), url(images/oncemore.jpg);background-position: center center;background-size: cover;">
<div class="container">
<header class="major">
<h2 style="color:white;">Who is our conductor?</h2>
<img class= "4u 12u$(medium) box" style="float:center;padding:5px;" src="images/louis.jpg" alt="" />
</header>
<div class="row 100%">
<div class="12u 12u$(medium)">
<section class="box">
<p>LOUIS VAN DER WATT started his study of the violin under Jack de Wet and obtained the degrees BA Cum Laude and HonsBA (Philosophy) Cum Laude from the University of Orange Free State. Moreover he was appointed as Dux student of the university. While studying he was part of the Free State Symphony Orchestra as well as the SUKOVS Orchestra. He also served on the SRC and the chairman of the University Choir.</p>
<p>Moving to the University of Stellenbosch he completes his BTh degree and licentiate in theology both cum laude. He also serves as vice-chairman of the University Choir, primarius of Majuba and was part of the Theological SRC. He continues his studies through UNISA and obtains the degree BMus with distinction in harmony and contrapunt. Afterwards he also completes his HonsBMus Cum Laude at the University of Stellenbosch. He also obtains his performers' and teachers' licentiate through Royal Schoolsas well as the teachers' licentiate through UNISA cum laude under Eric Rycroft.</p>
<p>Van der Watt was part of the UPE String Orchestra, the Stellenbosch String Orchestra and the USSO (University of Stellenbosch Symphony Orchestra) the last of which he led as concert master. He was also part of the Libertas choir and regularly performed as an extra player in the Cape Town Philharmonic Orchestra. Until 1998, van der Watt is the head of the string division of the Hugo Lamprechts Centre for Music as well as the conductor of the Hugo Lamprechts Camerata. In 1999 he was head of music at SA College Boys' School (Bishops) in Rondebosch. In 1996 he is appointed as conductor of Canticum Novum, the church choir of the Student Church, Stellenbosch. Since 2000 he is also a lecturer in violin at the Department of Music at the University of Stellenbosch.</p>
<p>His students have also achieved notable results in various areas. Some of them won bursaries for further studies oversees, some were members of the World Youth Orchestra while others won national competitions in South Afirca or performed as soloists in Musical Festivals. One of his ex-students, Sarah Oates, played first violin in the London Philharmonic Orchestra and is currently studying under Pinchas Zukerman.</p>
</section>
</div>
</div>
</div>
</section>
<!--two-->
<section id="two" class="wrapper style1 special">
<div class="container">
<header class="major">
<h2>What do we do?</h2>
</header>
<div class="row 150%">
<div class="4u 12u$(medium)">
<section class="box" style="padding:5px;" >
<p style ="width:100%;height:200px" class="orkes"/>
<p>We perform with the Stellenbosch Orchestra once a year</p>
</section>
</div>
<div class="4u 12u$(medium)" >
<section class="box" style="padding:5px;" >
<p style ="width:100%;height:200px" class="tour"/>
<p>We tour South Africa and perform at various locations, like churches, old age homes and even prisons</p>
</section>
</div>
<div class="4u 12u$(medium)">
<section class="box" style="padding:5px;">
<p style ="width:100%;height:200px" class="fun"/>
<p>We also have lots of fun!</p>
</section>
</div>
</div>
<div class="row 150%">
<div class="12u 12u$(medium)">
<section class="box" style="padding:5px;;" >
<iframe width="100%" height="550em" src="https://www.youtube.com/embed/39oUz8J76fc" frameborder="0" allowfullscreen></iframe>
</section>
</div>
</div>
</div>
</section>
<!-- three -->
<section id="three" class="wrapper style2 special" style="background-image: url(images/dark_tint.png), url(images/banner.jpg);background-position: center center;background-size: cover;">
<div class="container">
<header class="major">
<h2 style="color:white;">Our Management</h2>
<p>2015/2016</p>
</header>
<section class="profiles" style="background-color:#fff;padding:5em;">
<div class="row">
<section class="4u 6u$(medium) 12u$(xsmall) profile">
<img style="height:184px;width:184px;" src="images/voorsitter.jpg" alt="" />
<h4>Nico-Ben Janse van Rensburg</h4>
<p>Chairman</p>
</section>
<section class="4u 6u(medium) 12u$(xsmall) profile">
<img style="height:184px;width:184px;" src="images/ondervoorsitter.jpg" alt="" />
<h4>Anika Laubscher</h4>
<p>Vice-Chairwoman</p>
</section>
</div>
<div class="row">
<section class="4u 6u$(medium) 12u$(xsmall) profile">
<img style="height:184px;width:184px;" src="images/harry.jpg" alt="" />
<h4>Harry Myburgh</h4>
<p>Social</p>
</section>
<section class="4u 6u$(medium) 12u$(xsmall) profile">
<img style="height:184px;width:184px;" src="images/estelle.jpg" alt="" />
<h4>Estelle Swart</h4>
<p>Marketing</p>
</section>
<section class="4u 6u$(medium) 12u$(xsmall) profile">
<img style="height:184px;width:184px;" src="images/grace.jpg" alt="" />
<h4>Grace Bridgman</h4>
<p>Spiritual</p>
</section>
</div>
<div class="row">
<section class="4u 6u$(medium) 12u$(xsmall) profile">
<img style="height:184px;width:184px;" src="images/jonine.jpg" alt="" />
<h4>Jonine Moller</h4>
<p>Archivist</p>
</section>
<section class="4u 6u$(medium) 12u$(xsmall) profile">
<img style="height:184px;width:184px;" src="images/alex.jpg" alt="" />
<h4>Alexander van der Merwe</h4>
<p>IT</p>
</section>
<section class="4u 6u$(medium) 12u$(xsmall) profile">
<img style="height:184px;width:184px;" src="images/line.jpg" alt="" />
<h4>Liné Enslin</h4>
<p>Treasurer, Secretary</p>
</section>
</div>
</section>
</div>
</section>
<!-- Four -->
<section id="four" class="wrapper style3 special">
<div class="container">
<header class="major">
<h2>Contact Us</h2>
<p>Feel free to mail us if you want to schedule an audition or just find out more about us.</p>
<div style="background-color:#ED6046; padding:5px;">
<br/>
<p>The next auditions are on <b>22 & 23 October</b> </p>
<p>Please add your NAME and CONTACT NUMBER when mailing us</p>
<p>(canticumnovumstb@gmail.com)</p>
</div>
</header>
</div>
<div class="container 50%">
<form action="mailto:canticumnovumstb@gmail.com" method="post">
<div class="row uniform">
<!--<div class="6u 12u$(small)">
<input name="name" id="name" value="" placeholder="Name" type="text">
</div>
<div class="6u$ 12u$(small)">
<input name="email" id="email" value="" placeholder="Email" type="email">
</div>
<div class="12u$">
<textarea name="message" id="message" placeholder="Message" rows="6"></textarea>
</div> -->
<div class="12u$">
<ul class="actions">
<li><input value="Send Message" class="special big" type="submit"></li>
</ul>
</div>
</div>
</form>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="container">
<!--<section class="links">
<div class="row">
<section class="3u 6u(medium) 12u$(small)">
<h3>Lorem ipsum dolor</h3>
<ul class="unstyled">
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Nesciunt itaque, alias possimus</a></li>
<li><a href="#">Optio rerum beatae autem</a></li>
<li><a href="#">Nostrum nemo dolorum facilis</a></li>
<li><a href="#">Quo fugit dolor totam</a></li>
</ul>
</section>
<section class="3u 6u$(medium) 12u$(small)">
<h3>Culpa quia, nesciunt</h3>
<ul class="unstyled">
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Reiciendis dicta laboriosam enim</a></li>
<li><a href="#">Corporis, non aut rerum</a></li>
<li><a href="#">Laboriosam nulla voluptas, harum</a></li>
<li><a href="#">Facere eligendi, inventore dolor</a></li>
</ul>
</section>
<section class="3u 6u(medium) 12u$(small)">
<h3>Neque, dolore, facere</h3>
<ul class="unstyled">
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Distinctio, inventore quidem nesciunt</a></li>
<li><a href="#">Explicabo inventore itaque autem</a></li>
<li><a href="#">Aperiam harum, sint quibusdam</a></li>
<li><a href="#">Labore excepturi assumenda</a></li>
</ul>
</section>
<section class="3u$ 6u$(medium) 12u$(small)">
<h3>Illum, tempori, saepe</h3>
<ul class="unstyled">
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Recusandae, culpa necessita nam</a></li>
<li><a href="#">Cupiditate, debitis adipisci blandi</a></li>
<li><a href="#">Tempore nam, enim quia</a></li>
<li><a href="#">Explicabo molestiae dolor labore</a></li>
</ul>
</section>
</div>
</section> -->
<!--<div class="row">
<div class="8u 12u$(medium)">
<ul class="copyright">
</ul>
</div>
<div class="4u$ 12u$(medium)">
<ul class="icons">
<li>
<a class="icon rounded fa-facebook"><span class="label">Facebook</span></a>
</li>
<li>
<a class="icon rounded fa-twitter"><span class="label">Twitter</span></a>
</li>
<li>
<a class="icon rounded fa-google-plus"><span class="label">Google+</span></a>
</li>
<li>
<a class="icon rounded fa-linkedin"><span class="label">LinkedIn</span></a>
</li>
</ul>
</div>
</div>-->
</div>
</footer>
</body>
</html>