-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
312 lines (291 loc) · 12.4 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
311
312
<!DOCTYPE HTML>
<html>
<head>
<title>Humanity in Music</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper" class="fade-in">
<!-- Intro -->
<div id="intro">
<h1>Humanity in Music</h1>
<p>Toronto based non-profit organization <br />that
unites music and people behind charitable and social impact goals
</p>
<ul class="actions">
<li><a href="#header" class="button icon solid solo fa-arrow-down scrolly">Continue</a></li>
</ul>
</div>
<!-- Header -->
<header id="header">
<a href="index.html" class="logo">Humanity in Music</a>
</header>
<!-- Nav -->
<nav id="nav">
<ul class="links">
<li class="active"><a href="index.html">About Us</a></li>
<li><a href="events.html">Past Events</a></li>
<li><a href="food_bank.html">Food Bank</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<!-- <li><a href="elements.html">Elements Reference</a></li> -->
</ul>
<ul class="icons">
<!-- <li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li> -->
<li><a href="https://www.facebook.com/SpafyCC/"
rel="noopener noreferrer" class="icon brands
fa-facebook-f"><span
class="label">Facebook</span></a></li>
<li><a
href="https://www.instagram.com/humanity_in_music"
rel="noopener noreferrer" class="icon brands
fa-instagram"><span
class="label">Instagram</span></a></li>
</ul>
</nav>
<!-- Main -->
<div id="main">
<!-- Featured Post -->
<article class="post featured">
<header class="major">
<!-- <span class="date">April 25, 2017</span> -->
<h2>There is Humanity in Music</h2>
<p>We collaborate with musicians to promote
benefit concerts and programs that support
altruistic causes. <br />
We're all about community, giving, raising awareness, unity and promoting empathy through music.<br />
</p>
</header>
<!-- <a href="#" class="image main"><img
src="images/pic01.jpg" alt="" /></a> -->
<h2>From a Personal Story to a Nationwide
Event</h2>
<div class="responsive-youtube">
<iframe
src="https://www.youtube.com/embed/pJO2t2XOPDU?si=wQhcR9MEd53HQ-yW"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture;
web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen></iframe>
</div>
<br>
<br>
<img src="images/jasmin-uglow.jpg" alt="Jasmin
Uglow, Founder of Humanity in Music"
class="image left">
<p>
Humanity in Music was founded by Jasmin
Uglow, a musician/caregiver who suffered the
loss of her father due to dementia. After
his passing, her musical aspirations were
transposed and she gained a renewed meaning
for life and her music. Through her
challenges as a full-time caregiver, she
recognized the value, capacity, and
extraordinary effects of music on patients
and caregivers. Music was used as a
soothing tool for her father, and a way to
jog his memory at times. Music was also
employed as a therapeutic outlet for Jasmin
to express her story and her emotions
creatively. She voiced that the Alzheimer
Society of Toronto was her main support
factor during her time caring for her
father, including during her emotional and
physical recovery from the experience. It
was their generous support that inspired her
to become an advocate for the Alzheimer
Society.
<br>
<br>
At the end of her ordeal, Jasmin's experience was summarized in an album that she had written during that time, and although the album was induced by grief, its provocative delivery of artistry and hope inspired her and others to want to do more. Giving back to the Alzheimer Society as a musician in her own way, was intrinsic to her moving forward personally, and as a musician, it also laid the groundwork for Humanity in Music.
<br>
<br>
Fortunately, the efforts of Humanity in Music are no longer a one-woman inspiration, it's a movement that incorporates a committee of compatible individuals, musicians, and companies with the same values. We strive to use the power of music to support charitable organizations, like the Alzheimer's Society, that are proactive and effective in making a difference in society.
<br>
<br>
</p>
<h2>Our Mission</h2>
<img src ="" alt=""/>
<p>
<b>Our mission</b> is to support charitable motives
through the works of Canadian music and
musicians. Advance awareness of the
organizations we collaborate with. Uplift
Canadians and encourages community
participation on a nationwide level. And
promote Canadian unity through the power of
music and social consciousness.
<br>
<br>
<b>Our vision</b> is a united nation that continues to use the power of music to support charitable organizations.
<br>
<br>
<b>Our guiding</b> principle is to make music, make a difference.
</p>
</article>
<!-- Posts -->
<!-- <article>
<header>
<span class="date">April 24, 2017</span>
<h2><a href="#">Sed magna<br />
ipsum faucibus</a></h2>
</header>
<a href="#" class="image fit"><img src="images/pic02.jpg" alt="" /></a>
<p>Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis magna etiam.</p>
<ul class="actions special">
<li><a href="#" class="button">Full Story</a></li>
</ul>
</article>
<article>
<header>
<span class="date">April 22, 2017</span>
<h2><a href="#">Primis eget<br />
imperdiet lorem</a></h2>
</header>
<a href="#" class="image fit"><img src="images/pic03.jpg" alt="" /></a>
<p>Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis magna etiam.</p>
<ul class="actions special">
<li><a href="#" class="button">Full Story</a></li>
</ul>
</article>
<article>
<header>
<span class="date">April 18, 2017</span>
<h2><a href="#">Ante mattis<br />
interdum dolor</a></h2>
</header>
<a href="#" class="image fit"><img src="images/pic04.jpg" alt="" /></a>
<p>Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis magna etiam.</p>
<ul class="actions special">
<li><a href="#" class="button">Full Story</a></li>
</ul>
</article>
<article>
<header>
<span class="date">April 14, 2017</span>
<h2><a href="#">Tempus sed<br />
nulla imperdiet</a></h2>
</header>
<a href="#" class="image fit"><img src="images/pic05.jpg" alt="" /></a>
<p>Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis magna etiam.</p>
<ul class="actions special">
<li><a href="#" class="button">Full Story</a></li>
</ul>
</article>
<article>
<header>
<span class="date">April 11, 2017</span>
<h2><a href="#">Odio magna<br />
sed consectetur</a></h2>
</header>
<a href="#" class="image fit"><img src="images/pic06.jpg" alt="" /></a>
<p>Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis magna etiam.</p>
<ul class="actions special">
<li><a href="#" class="button">Full Story</a></li>
</ul>
</article>
<article>
<header>
<span class="date">April 7, 2017</span>
<h2><a href="#">Augue lorem<br />
primis vestibulum</a></h2>
</header>
<a href="#" class="image fit"><img src="images/pic07.jpg" alt="" /></a>
<p>Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis magna etiam.</p>
<ul class="actions special">
<li><a href="#" class="button">Full Story</a></li>
</ul>
</article> -->
</section>
<!-- Footer
<footer>
<div class="pagination">
<a href="#" class="previous">Prev</a>-->
<!-- <a href="#" class="page active">1</a>
<a href="#" class="page">2</a>
<a href="#" class="page">3</a>
<span class="extra">…</span>
<a href="#" class="page">8</a>
<a href="#" class="page">9</a>
<a href="#" class="page">10</a>
<a href="#" class="next">Next</a>
</div>
</footer> -->
</div>
<!-- Footer -->
<footer id="footer">
<section>
<form name="contact" method="POST"
data-netlify="true"
data-netlify-honeypot="bot-field"
onsubmit="submit" action="success#redirect">
<input class="d-none"name = "bot-field">
<div class="fields">
<div class="field">
<label for="name">Name</label>
<input type="text" name="name" id="name"
required />
</div>
<div class="field">
<label for="email">Email</label>
<input type="email" name="email" id="email" required/>
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message"
rows="3" required></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" /></li>
</ul>
</form>
</section>
<section class="split contact">
<!-- <section class="alt">
<h3>Address</h3>
<p>1234 Somewhere Road #87257<br />
Nashville, TN 00000-0000</p>
</section> -->
<!-- <section>
<h3>Phone</h3>
<p><a href="#">(000) 000-0000</a></p>
</section> -->
<section>
<h3>Email</h3>
<p><a href="#">www.humanityinmusic@gmail.com</a></p>
</section>
<section>
<h3>Social</h3>
<ul class="icons alt">
<!-- <li><a href="#" class="icon brands alt fa-twitter"><span class="label">Twitter</span></a></li> -->
<li><a href="https://www.facebook.com/SpafyCC/" class="icon brands alt fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a
href="https://www.instagram.com/humanity_in_music"
class="icon brands alt fa-instagram" rel="noopener noreferrer"><span
class="label">Instagram</span></a></li>
</ul>
</section>
</section>
</footer>
<!-- Copyright -->
<div id="copyright">
<ul><li>© Humanity in Music</li><li></a></li></ul>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>