-
Notifications
You must be signed in to change notification settings - Fork 1
/
contact.html
224 lines (202 loc) · 11.1 KB
/
contact.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
<!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.0">
<meta name="description" content="The official page for Bergen Youth Camber Orchestra: Booking, play with us or maybe jut a random question? Get in touch and we will get back to you shortly!">
<title>Contact | BUKO</title>
<!-- Hotjar Tracking Code for https://tranquil-cranachan-14ff19.netlify.app/ -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:2993355,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
<link rel="stylesheet" href="./Styles/all_styles.css">
<link rel="stylesheet" href="./Styles/contact_styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!--Roboto Condensed>-->
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap" rel="stylesheet">
<!--Fira Sans X Condensed-->
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:wght@100;200;300;400;500&display=swap" rel="stylesheet">
<!--Nanum-->
<link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap" rel="stylesheet">
<!--Fat A-->
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
<!--Cor Gar-->
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;500;600;700&display=swap" rel="stylesheet">
<!--Play Dis-->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;800&display=swap" rel="stylesheet">
<!--Bar Co-->
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100;200;300;400;500;600&family=Playfair+Display:wght@400;500;600;800&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div id="logo">
<a href="index.html"><img src="./img/white_logo_buko.svg" alt="White logo for BUKO"></a>
</div>
<div id="menu">
<img src="https://www.sunroad.no/exam/wp-content/uploads/2022/05/icons8-menu-rounded-50-2.png" alt="Hamburger menu icon">
</div>
<nav>
<ul>
<li><a href="/news.html">News</a></li>
<li><a href="/portfolio.html">Portfolio</a></li>
<li><a href="/members.html">Members</a></li>
<li><a href="/about.html">About Us</a></li>
<li class="activesite"><a href="/contact.html">Contact</a></li>
<li><img src="https://www.sunroad.no/exam/wp-content/uploads/2022/05/icons8-search-50.png" alt="search icon"></li>
</ul>
</nav>
<input id="searchfullsize" type="text" placeholder="search..">
<div class="search">
<img src="https://www.sunroad.no/exam/wp-content/uploads/2022/05/icons8-search-50.png" alt="search icon">
</div>
<input id="searchsmallsize" type="text" placeholder="search..">
<div class="overlay">
<ul>
<li><a href="/news.html">News</a></li>
<li><a href="/portfolio.html">Portfolio</a></li>
<li><a href="/members.html">Members</a></li>
<li><a href="/about.html">About Us</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
</header>
<img class="heroimg smallerheader" src="https://www.sunroad.no/exam/wp-content/uploads/2022/05/joel-wyncott-6c37qhV2Pa4-unsplash-scaled.jpg" alt="Guy playing violin at a dark scene, covered by smoke and downlights">
<div class="underhero nounderhero"></div>
<main>
<div class="breadcrumbs">
<p><a href="index.html">Home</a> / Contact</p>
</div>
<h1 class="smallerheaderh1 contacth1">Contact</h1>
<section class="playforyou">
<div class="divforborders">
<img src="https://www.sunroad.no/exam/wp-content/uploads/2022/05/manuel-nageli-p60mNTW5glI-unsplash-2.jpg" alt="Watching a fully packed concert from above">
</div>
<div>
<h2>We would love to play for you</h2>
<p>
Let us know your idea or vision, and together we can arrange for a concert or event of your wishes. Our experience with working with orchestras, conductors, venues and other collabration partners has been nothing but pleasent <br> <br>
(we have reason to believe it's also been the other way around)
</p>
<p class="boldp">Get in touch with some details, and let's book your next arrangement!</p>
<a class="linktoform buttonstyle" onclick="scrollToForm()">Book <img src="https://www.sunroad.no/exam/wp-content/uploads/2022/05/icons8-up-32.png" alt="Arrow down"></a>
</div>
</section>
<section class="playforyou reverse">
<div class="divforborders">
<img src="https://www.sunroad.no/exam/wp-content/uploads/2022/05/michel-catalisano-OZDmI-vO7Io-unsplash-2.jpg" alt="Woman playing the violin by the piano">
</div>
<div>
<h2>Would you like to play with us?</h2>
<p>
Wether you're pursuing a career within music or not, don't hesitate to get in touch with us about becoming a member.
In BUKO, the quality and professionalism is our main focus, but we value our group dynamic and the person sitting behind the sound. <br> <br>
We strive for you to always evolve musically and evnemssig, but BUKO is also a place where you meet similuar minded friends and colleages for lifetime. Not to mention, the chance you get to play with important soloists and orchestra, all over the world!
</p>
<p class="boldp">Let us know some details, and we will get back to you shortly!</p>
<a class="linktoform buttonstyle" onclick="scrollToForm()">Contact <img src="https://www.sunroad.no/exam/wp-content/uploads/2022/05/icons8-up-32.png" alt="Arrow down"></a>
</div>
</section>
<section class="form">
<h2>Get in touch</h2>
<form id="form">
<div>
<label id="namelabel">Full name</label><p class="nameOK nameBAD"></p>
<input type="text" name="name" id="name">
<label>Email</label><p class="emailOK emailBAD"></p>
<input type="email" name="email" id="email">
<label class="subject">Subject<input placeholder=" " list="subject" name="subject" /></label> <p class="subjectOK subjectBAD"></p>
<datalist id="subject">
<option value="Booking and Arrangement"></option>
<option value="Becoming a member"></option>
<option value="Concerning press/PR"></option>
<option value="Aministrative Help"></option>
</datalist>
</div>
<div>
<label>What can we do for you?</label>
<textarea id="textarea" placeholder=".."></textarea>
<p class="textOK textBAD"></p>
<button class="buttonstyle" type="submit">Send</button>
</div>
</form>
</section>
</main>
<section class="support">
<h2>We appreciate all the support that we recieve</h2>
<p>If this is financially, on social media, or precense on our concerts or events</p>
<div>
<div>
<h3>But, extra thank you to our sponsors</h3>
<div class="supportimg">
<img src="./img/UIB_logo.png" alt="Logo of UIB">
<img src="./img/coop_logo.png" alt="Logo of COOP">
</div>
</div>
<div>
<h3>Would you or your company like to support our work?</h3><hr>
<p>Let us know at</p>
<p class="underlined">board@bergenungekammerorkester.no</p>
<a class="linktoform" onclick="scrollToForm()">Or use the form above <img src="https://www.sunroad.no/exam/wp-content/uploads/2022/05/icons8-up-32.png" alt="Arrow up"></a>
</div>
</div>
</section>
<nav class="lastnav">
<a class="buttonstyle" href="./index.html"><img src="https://www.sunroad.no/exam/wp-content/uploads/2022/05/icons8-up-32.png" alt=""> Home</a>
<a class="buttonstyle topbutton">Top <img src="https://www.sunroad.no/exam/wp-content/uploads/2022/05/icons8-up-32.png" alt=""></a>
</nav>
<footer>
<div class="footerleft">
<ul>
<li><a href="/news.html">News</a></li>
<li><a href="/portfolio.html">Portfolio</a></li>
<li><a href="/members.html">Members</a></li>
<li><a href="/about.html">About Us</a>
<div>
<a href="about.html">Our Story</a>
<a href="about.html">Conductor</a>
<a href="about.html">The board</a>
<a href="about.html">Future visions and goals</a>
</div>
</li>
<li><a href="/contact.html">Contact</a>
<div>
<a href="about.html">Booking</a>
<a href="about.html">Play with us</a>
<a href="about.html">Contact</a>
<a href="about.html">Donations and sponsorship</a>
</div>
</li>
</ul>
</div>
<div class="footerright">
<div>
<label>
Sign up to our newsletter
</label>
<input type="email">
<button type="submit">Submit</button>
</div>
<div>
<img src="https://www.sunroad.no/exam/wp-content/uploads/2022/05/icons8-facebook-60.png" alt="Facebook icon">
<img src="https://www.sunroad.no/exam/wp-content/uploads/2022/05/icons8-instagram-60.png" alt="Instagram icon">
<img src="https://www.sunroad.no/exam/wp-content/uploads/2022/05/icons8-linkedin-circled-60.png" alt="Linkedin icon">
</div>
</div>
<div class="copyright">
<p>© 2022 Bergen Unge Kammerorkester</p>
<p>Developed by <span class="underlined">Sunroad</span></p>
</div>
</footer>
<script src="./JS/allscripst_script.js"></script>
<script src="./JS/contact_script.js"></script>
</body>
</html>