-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
307 lines (276 loc) · 15.4 KB
/
index.html
File metadata and controls
307 lines (276 loc) · 15.4 KB
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
<!DOCTYPE HTML>
<!--
Story by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<!--
Samuel Barber Project
created by: Riviera Sperduto
The Sounds of Philadelphia
Final Project
Due: 5/3/2024
-->
<html>
<head>
<title>Samuel Barber Project</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="divided">
<!-- One -->
<section class="banner style1 orient-left content-align-left image-position-right fullscreen onload-image-fade-in onload-content-fade-right">
<div class="content">
<h1>Samuel Barber</h1>
<p class="major">An American composer, pianist and singer who broke barriers in mainstream society.</p>
<ul class="actions stacked">
<li><a href="#first" class="button big wide smooth-scroll-middle">Get Started</a></li>
</ul>
</div>
<div class="image">
<img src="images/banner.jpg" alt="" />
</div>
</section>
<!-- Two -->
<section class="spotlight style1 orient-right content-align-left image-position-center onscroll-image-fade-in" id="first">
<div class="content">
<h2>Social Identity</h2>
<p>Samuel Barber was born in West Chester, PA and spent a considerable amount of time in Philadelphia throughout his life. Although he grew up in a relatively wealthy family and had a very accepting family, Samuel Barber was an openly gay composer at a time when it was not accepted to be gay in society and some people were imprisoned for it.</p>
<p>He had a lifelong partner who was another famous composer by the name of Giancarlo Menotti. They met at the Curtis Institute were they were some of the first students to study there. The Curtis Institute, which is located in Philadelphia, is known as one of the world's best music schools.</p>
</div>
<div class="image">
<img src="images/spotlight01.jpg" alt="" />
</div>
</section>
<!-- Three -->
<section class="spotlight style1 orient-left content-align-left image-position-center onscroll-image-fade-in">
<div class="content">
<h2>Breaking Boundaries</h2>
<p>One of his most common performance partners was with a woman named Leontyne Price. She was a soprano who actually got her recital debut due to Samuel Barber. She would eventually become a world famous singer and rightfully so, due to her amazing and unique voice. The concert debut was on a very beautiful song cycle called Hermit Songs.</p>
<p>Hermit Songs first premiered at the Library of Congress on October 30, 1953. This was during a time of segregation. Yet, here together was an openly gay white man and a black woman performing one of the most beautiful works of art to ever grace the Earth. From what I can tell based on his writings, he doesn't seem to think this is as big of a deal as it really is historically. This may be due to him being more of a fan of solitude rather than popularity which can be seen in this and many others works he composed.</p>
</div>
<div class="image">
<img src="images/spotlight02.jpg" alt="" />
</div>
</section>
<!-- Four -->
<section class="spotlight style1 orient-right content-align-left image-position-center onscroll-image-fade-in">
<div class="content">
<h2>Musical Identity</h2>
<p>As Samuel Barber has said himself multiple times he creates music from his feelings. This is similar to many romantic composers, although he did not really fit any one style. He made music that was very uniquely his own which is part of the reason why I love his music so much. He was influenced by his predecessors such as Brahms (which he introduced to his partner while they were at Curtis) as well as his peers. He and Poulenc wrote music that they dedicated to each other and as Samuel Barber said Poulenc was his only composer friend.</p>
<p>Most other composers and musical academics at the time did not like Barber's work especially his later work. Where as most composers were chasing styles and flip flopping around he had his own unique sound that was based in classicism and was very much so from his own feeling. When he chose to wrote songs he would do it usually with poetry that meant a great deal to him. He became much more appreciated for his music after his death which was not too long ago in January of 1981. He won much praise, awards, and accolades throughout his life but also earned much criticism and rebuking for his contributions. His music will continue to live on as many have finally come to appreciate him as one of the greatest American composers to have lived.</p>
</div>
<div class="image">
<img src="images/spotlight03.jpg" alt="" />
</div>
</section>
<!-- Five -->
<section class="wrapper style1 align-center">
<div class="inner">
<h2>Videos</h2>
<!-- insert videos here somehow....-->
<p>
<iframe width="793" height="595" src="https://www.youtube.com/embed/BoXqCWIaK9w" title="Menotti on Barber!" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<p>This is an interview from Samuel Barber's lifelong partner on his birthday. It talks about their history and how they met.</p>
</p>
<p>
<iframe width="793" height="797" src="https://www.youtube.com/embed/VtEekeAKHtc" title="Samuel Barber, 1978 Radio Interview" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<p>This is an interview with Samuel Barber about his music and his life.</p>
</p>
<p>
<iframe width="793" height="446" src="https://www.youtube.com/embed/q8haCn5IvFg" title="Samuel Barber (Symphony No. 2)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<p>This is Barber's Symphony No.2 which is about his and other people's time in the airforce. He wanted to have the work burned for some reason but the orchestra parts were found after his death.</p>
</p>
<p>
<iframe width="793" height="446" src="https://www.youtube.com/embed/pO35-lLMVWw" title="Samuel Barber - Sure On This Shining Night arr. for Choir & Piano (1940)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<p>One of his most beautiful pieces would have to be this choral and piano arrangement of Sure On This Shining Night, which is just as good as his solo voice version and also very similar to this version.</p>
</p>
</div>
<!-- Gallery -->
<!--
<div class="gallery style2 medium lightbox onscroll-fade-in">
<article>
<a href="images/gallery/fulls/01.jpg" class="image">
<img src="images/gallery/thumbs/01.jpg" alt="" />
</a>
<div class="caption">
<h3>Menotti on Barber!</h3>
<p>Interview from Barber's lifelong partner on Barber's birthday. </p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
<li><iframe width="793" height="595" src="https://www.youtube.com/embed/BoXqCWIaK9w" title="Menotti on Barber!" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</li>
</ul>
</div>
</article>
<article>
<a href="images/gallery/fulls/02.jpg" class="image">
<img src="images/gallery/thumbs/02.jpg" alt="" />
</a>
<div class="caption">
<h3>Feugiat Lorem</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
<article>
<a href="images/gallery/fulls/03.jpg" class="image">
<img src="images/gallery/thumbs/03.jpg" alt="" />
</a>
<div class="caption">
<h3>Magna Amet</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
<article>
<a href="images/gallery/fulls/04.jpg" class="image">
<img src="images/gallery/thumbs/04.jpg" alt="" />
</a>
<div class="caption">
<h3>Sed Tempus</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
<article>
<a href="images/gallery/fulls/05.jpg" class="image">
<img src="images/gallery/thumbs/05.jpg" alt="" />
</a>
<div class="caption">
<h3>Ultrices Magna</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
<article>
<a href="images/gallery/fulls/06.jpg" class="image">
<img src="images/gallery/thumbs/06.jpg" alt="" />
</a>
<div class="caption">
<h3>Sed Tempus</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
<article>
<a href="images/gallery/fulls/07.jpg" class="image">
<img src="images/gallery/thumbs/07.jpg" alt="" />
</a>
<div class="caption">
<h3>Ipsum Lorem</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
<article>
<a href="images/gallery/fulls/08.jpg" class="image">
<img src="images/gallery/thumbs/08.jpg" alt="" />
</a>
<div class="caption">
<h3>Magna Risus</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
<article>
<a href="images/gallery/fulls/09.jpg" class="image">
<img src="images/gallery/thumbs/09.jpg" alt="" />
</a>
<div class="caption">
<h3>Tempus Dolor</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
<article>
<a href="images/gallery/fulls/10.jpg" class="image">
<img src="images/gallery/thumbs/10.jpg" alt="" />
</a>
<div class="caption">
<h3>Sed Etiam</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
<article>
<a href="images/gallery/fulls/11.jpg" class="image">
<img src="images/gallery/thumbs/11.jpg" alt="" />
</a>
<div class="caption">
<h3>Magna Lorem</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
<article>
<a href="images/gallery/fulls/12.jpg" class="image">
<img src="images/gallery/thumbs/12.jpg" alt="" />
</a>
<div class="caption">
<h3>Ipsum Dolor</h3>
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
<ul class="actions fixed">
<li><span class="button small">Details</span></li>
</ul>
</div>
</article>
</div>
-->
</section>
<!-- Six (added by me)-->
<section class="wrapper style1 align-center">
<div class="inner">
<h2>Bibliography</h2>
<h3>Works Cited:</h3>
<h4>1: Articles</h4>
<p>“Samuel Barber.” Wikipedia, Wikimedia Foundation, 30 Apr. 2024, en.wikipedia.org/wiki/Samuel_Barber. </p>
<p>“Samuel Barber.” Encyclopædia Britannica, Encyclopædia Britannica, inc., 5 Mar. 2024, www.britannica.com/biography/Samuel-Barber. </p>
<p>“Samuel Barber, 1910-1981.” The Library of Congress, www.loc.gov/item/ihas.200182572/. Accessed 3 May 2024. </p>
<p>Pentreath, Rosie, and Classic FM. “15 LGBTQ+ Composers in Classical Music History That You Probably Already Know.” Classic FM, 1 June 2023, www.classicfm.com/discover-music/great-classical-composers-who-were-gay/. </p>
<p>Hopkin, Owen. “Samuel Barber: A Life.” Classic FM, 28 Aug. 2012, www.classicfm.com/composers/barber/guides/discovering-great-composers-samuel-barber/. </p>
<p>Barber, Samuel. Hermit Songs, to Poems Translated from Anonymous Irish Texts of the Eighth to Thirteenth Centuries. Op. 29. G. Schirmer, 1954. </p>
<h4>2: Videos</h4>
<p>“Samuel Barber, 1978 Radio Interview.” YouTube, YouTube, 24 May 2019, www.youtube.com/watch?v=VtEekeAKHtc. </p>
<p>“Menotti on Barber!” YouTube, YouTube, 4 Sept. 2016, www.youtube.com/watch?v=BoXqCWIaK9w. </p>
<p>“Samuel Barber - Sure on This Shining Night Arr. for Choir & Piano (1940).” YouTube, YouTube, 19 Oct. 2017, www.youtube.com/watch?v=pO35-lLMVWw. </p>
<p>“Samuel Barber (Symphony No. 2).” YouTube, YouTube, 30 Aug. 2013, www.youtube.com/watch?v=q8haCn5IvFg. </p>
</div>
</section>
<!-- DELETE EVERYTHING BELOW HERE AND STUFF THAT IS RELEVANT TO IT ONLY KEEP WHAT YOU NEED!!!!! -->
<!-- STOP DELETING HERE !!!!!!!!!!!!!!!!!!!!!!!!! -->
<p>Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
<!-- 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>