generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
events.html
286 lines (283 loc) · 18.4 KB
/
events.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Data -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="The VisEnsemble Choir for people living with sightloss in Ireland">
<meta name="keywords" content="the visensemble, choir, visually impaired, sightloss, choral singing, dublin, ireland">
<!-- Website Title -->
<title>The VisEnsemble</title>
<!-- Link to my Cloudinary Media Library -->
<link rel="icon" href="https://res.cloudinary.com/aperlae/image/upload/c_scale,w_32/v1660385839/treblesquare_g0xno3.jpg" type="image/x-icon">
<!-- Link to my CSS -->
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<!-- Skip Navigation Link -->
<div class="skip-nav-container">
<a href="#main" id="skip-navigation-link" class="skip-nav">Skip Navigation</a>
</div>
<!-- Site Header -->
<header>
<div class="header-container">
<!-- Logo -->
<div class="logo-div">
<a href="index.html">
<img class="logo" alt="The Visensemble Logo"
width="200" height="59"
src="https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto:eco,w_200/v1659108822/visensemble_logo_crop_orange_mtq39g.png"
srcset="https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto:eco,w_200/v1659108822/visensemble_logo_crop_orange_mtq39g.png 200w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto:eco,w_250/v1659108822/visensemble_logo_crop_orange_mtq39g.png 250w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto:eco,w_300/v1659108822/visensemble_logo_crop_orange_mtq39g.png 300w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto:eco,w_350/v1659108822/visensemble_logo_crop_orange_mtq39g.png 350w"
sizes="(max-width: 768px) 200px, (max-width: 1240px) 250px, (max-width: 1440px) 300px, 350px"/>
</a>
</div>
<!-- Hamburger Button -->
<button type="button" class="nav-toggle" aria-label="open-navigation">
<span class="hamburger">☰</span>
</button>
<!-- Navigation Links -->
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="index.html" class="nav__link">Home</a></li>
<li class="nav__item"><a href="about.html" class="nav__link">About</a></li>
<li class="nav__item"><a href="events.html" class="nav__link active">Events</a></li>
<li class="nav__item"><a href="contact.html" class="nav__link">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!-- Main Content Starts Here -->
<main id="main" tabindex="-1">
<!-- Calendar of Events and News Page -->
<section class="events-news">
<div class="events-news__title">
<h2>Calendar of Events and News</h2>
</div>
<div class="content-wrapper">
<!-- Events Section -->
<section class="events__section">
<h3>Events</h3>
<!-- Event Article 1 -->
<article class="event__card">
<picture>
<source type="image/webp"
sizes="(max-width: 320px) 310px, (max-width: 375px) 365px, (max-width: 425px) 415px, (max-width: 1024px) 490px,
(max-width: 1440px) 690px, 790px"
srcset="https://res.cloudinary.com/aperlae/image/upload/c_scale,w_310/v1659107719/St.-Audoens-Church-3_vbhfft.webp 310w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,w_365/v1659107719/St.-Audoens-Church-3_vbhfft.webp 365w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,w_415/v1659107719/St.-Audoens-Church-3_vbhfft.webp 415w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,w_490/v1659107719/St.-Audoens-Church-3_vbhfft.webp 490w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,w_690/v1659107719/St.-Audoens-Church-3_vbhfft.webp 690w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,w_790/v1659107719/St.-Audoens-Church-3_vbhfft.webp 790w"/>
<img class="event__card-img"
sizes="(max-width: 320px) 310px, (max-width: 375px) 365px, (max-width: 425px) 415px, (max-width: 1024px) 490px,
(max-width: 1440px) 690px, 790px"
srcset="https://res.cloudinary.com/aperlae/image/upload/c_scale,w_310/v1659107719/St.-Audoens-Church-3_vbhfft.jpg 310w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,w_365/v1659107719/St.-Audoens-Church-3_vbhfft.jpg 365w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,w_415/v1659107719/St.-Audoens-Church-3_vbhfft.jpg 415w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,w_490/v1659107719/St.-Audoens-Church-3_vbhfft.jpg 490w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,w_690/v1659107719/St.-Audoens-Church-3_vbhfft.jpg 690w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,w_790/v1659107719/St.-Audoens-Church-3_vbhfft.jpg 790w"
alt="St. Audoen's Church grounds on a sunny day"
src="https://res.cloudinary.com/aperlae/image/upload/q_auto:eco/v1659107719/St.-Audoens-Church-3_vbhfft.jpg">
</picture>
<div class="event__card-content">
<div class="event__card-header">
<div class="event-date">
<h4>17<sup>th</sup> July</h4>
</div>
<div class="event-details">
<ul>
<li>
<a class="event-location" target="_blank"
href="https://goo.gl/maps/BgJk2JGCX13bumhg9"
aria-label="Map your journey on Google Maps (opens in a new tab)">
<i class="fa-solid fa-location-dot" aria-hidden="true"></i>
St. Audoen's Church, Dublin
</a>
</li>
<li>
<i class="fa-solid fa-clock" aria-hidden="true"></i>
Doors Open at 19:00
</li>
</ul>
</div>
</div>
<div class="event-text">
<h4>The Wait is Over!!</h4>
<p>The Summer Concert is Back! Celebrate with us after a two year long hiatus of in person performances.
This event is going to be truly special and we have worked incredibly hard during the lockdown on old and new
material to share with you all. <span> Tickets are Free!!!</span>
</p>
</div>
</div>
</article>
<!-- Call to Action Article -->
<article class="cta__card">
<div class="cta-container">
<div class="cta__image"></div>
<div class="cta__textbox events-cta__textbox">
<h3>We are looking for new members from all over Ireland!</h3>
</div>
<div class="cta__button">
<a href="contact.html" >Get in Touch!</a>
</div>
</div>
</article>
</section>
<!-- News Section -->
<section class="news__section">
<h3>News</h3>
<!-- News Article 1 -->
<article class="news__card">
<div class="news__card-header">
<picture>
<source type="image/webp"
sizes="(max-width: 768px) 98px, (max-width: 1440px) 120px, 175px"
srcset="https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto,w_98/v1659107671/mary-k_vr4plx.webp 98w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto,w_120/v1659107671/mary-k_vr4plx.webp 120w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto,w_175/v1659107671/mary-k_vr4plx.webp 175w"/>
<img class="news__card-img"
sizes="(max-width: 768px) 98px, (max-width: 1440px) 120px, 175px"
srcset="https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto,w_98/v1659107671/mary-k_vr4plx.jpg 98w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto,w_120/v1659107671/mary-k_vr4plx.jpg 120w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto,w_175/v1659107671/mary-k_vr4plx.jpg 175w"
alt="Mary. K. Smiling lady in her fifties."
src="https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto,w_98/v1659107671/mary-k_vr4plx.jpg"/>
</picture>
<div class="news-date">
<h4>July, 2022</h4>
</div>
</div>
<div class="news__card-content">
<p>We would like to thank everyone who came to our Summer Concert.
It was a fun and successful evening. Thank you to our director and volunteers
for all the work and help. We are now taking a well deserved break but we'll be back rehearsing
on the first Saturday of September. Looking forward to greet our new
members and if you are still thinking about joining, please get in touch.
Have a great summer everyone!!<br><span> Mary. K.</span>
</p>
</div>
</article>
<!-- News Article 2 -->
<article class="news__card">
<div class="news__card-header">
<picture>
<source type="image/webp"
sizes="(max-width: 768px) 98px, (max-width: 1440px) 120px, 175px"
srcset="https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto,w_98/v1659194253/john-s_qhfj9j.webp 98w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto,w_120/v1659194253/john-s_qhfj9j.webp 120w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto,w_175/v1659194253/john-s_qhfj9j.webp 175w"/>
<img class="news__card-img"
sizes="(max-width: 768px) 98px, (max-width: 1440px) 120px, 175px"
srcset="https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto,w_98/v1659194253/john-s_qhfj9j.jpg 98w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto,w_120/v1659194253/john-s_qhfj9j.jpg 120w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto,w_175/v1659194253/john-s_qhfj9j.jpg 175w"
alt="John Smith - Smiling man in his late sixties wearing glasses"
src="https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto,w_98/v1659194253/john-s_qhfj9j.jpg"/>
</picture>
<div class="news-date">
<h4>June, 2022</h4>
</div>
</div>
<div class="news__card-content">
<p>We are delighted to welcome our new members Jane, Barry and Lorraine
who have joined our ranks this month. We now have 8 sopranos, 7 tenors,
9 altos and 4 bass! A warm welcome also goes to Arlo and Blu, our new
reliable 4-legged companions.<br><span> John. S.</span>
</p>
</div>
</article>
<!-- News Article 3 -->
<article class="news__card">
<div class="news__card-header">
<picture>
<source type="images/webp"
sizes="(max-width: 768px) 98px, (max-width: 1440px) 120px, 175px"
srcset="https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto,w_98/v1659194253/john-s_qhfj9j.webp 98w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto,w_120/v1659194253/john-s_qhfj9j.webp 120w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto,w_175/v1659194253/john-s_qhfj9j.webp 175w"/>
<img class="news__card-img"
sizes="(max-width: 768px) 98px, (max-width: 1440px) 120px, 175px"
srcset="https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto,w_98/v1659194253/john-s_qhfj9j.jpg 98w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto,w_120/v1659194253/john-s_qhfj9j.jpg 120w,
https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto,w_175/v1659194253/john-s_qhfj9j.jpg 175w"
alt="John Smith - Smiling man in his late sixties wearing glasses"
src="https://res.cloudinary.com/aperlae/image/upload/c_scale,q_auto,w_98/v1659194253/john-s_qhfj9j.jpg"/>
</picture>
<div class="news-date">
<h4>May, 2022</h4>
</div>
</div>
<div class="news__card-content">
<p>Hurray! We have confirmed our Summer Concert Venue for July. We're all
working hard on the new material which we're hoping will be finished in
time for our long awaited performance. we're also going over some pieces
which we performed on Jamulus during the pandemic. Hint: 007, James Taylor
and Bruckner.<br><span> John. S.</span>
</p>
</div>
</article>
</section>
</div>
</section>
</main>
<!-- Back to Top Button -->
<a href="#skip-navigation-link" class="back-to-top">Back to Top ⇧</a>
<!-- Site Footer -->
<footer class="footer-container">
<div class="footer__links">
<!-- Contact Links-->
<div class="contact-links">
<ul>
<li>
<a href="tel:+353012345678" target="_blank" rel="noopener"
aria-label="Call us on +353 012 345 678">
<i class="fa-solid fa-phone"></i>
</a>
</li>
<li>
<a href="mailto:thevisensemble@nomail.com" target="_blank" rel="noopener"
aria-label="Email us at thevisensemble@nomail.com (opens in a new tab)">
<i class="fa-solid fa-envelope"></i>
</a>
</li>
</ul>
</div>
<!-- Social Links -->
<div class="social-links">
<ul>
<li>
<a href="https://facebook.com" target="_blank" rel="noopener"
aria-label="Visit our Facebook page (opens in a new tab)">
<i class="fa-brands fa-facebook-square"></i>
</a>
</li>
<li>
<a href="https://youtube.com" target="_blank" rel="noopener"
aria-label="Visit our YouTube page (opens in a new tab)">
<i class="fa-brands fa-youtube-square"></i>
</a>
</li>
</ul>
</div>
</div>
<p>© 2022 | The VisEnsemble by <a href="https://github.com/MoniPar"
target="_blank" rel="noopener"><span>Monique Parnis</span></a>
</p>
</footer>
<!-- Fontawesome Script -->
<script src="https://kit.fontawesome.com/967a4d433b.js" crossorigin="anonymous" defer></script>
<!-- Internal JS for Navigation Hamburger Button -->
<script>
const navToggle = document.querySelector(".nav-toggle");
const nav = document.querySelector(".nav");
navToggle.addEventListener("click", () => {
nav.classList.toggle("nav--visible");
});
</script>
</body>
</html>