-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (121 loc) · 6.53 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
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Eileen Southern Exhibition</title>
<link rel="stylesheet" href="css/style.css" media="screen">
<link rel="stylesheet" href="css/aos.css" media="screen">
<link rel="stylesheet" type="text/css" href="fonts/fonts.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
</head>
<body>
<div class="nav-container" id="navbar">
<div class="logo"><h2><a href="index.html">Eileen Southern</a></h2>
<h3 class="subtitle">And the Music of<br>Black Americans</h3>
</div>
<nav>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li class="category-name dark-yellow pad-top">Exhibition
<ul>
<li class="page-link dark-yellow-bg"><a href="bio.html">Life + Career</a></li>
<li class="page-link dark-yellow-bg"><a href="timeline.html">Timeline</a></li>
<li class="page-link dark-yellow-bg"><a href="scholarship.html">Scholarship</a></li>
<li class="page-link dark-yellow-bg"><a href="teaching.html">Teaching</a></li>
<li class="page-link dark-yellow-bg"><a href="map.html">Map</a></li>
</ul>
</li>
<li class="category-name light-teal">Gallery
<ul>
<li class="page-link light-teal-bg"><a href="gallery.html">Images</a></li>
<li class="page-link light-teal-bg"><a href="interviews.html">Interviews</a></li>
</ul>
</li>
<li class="category-name orange">About
<ul>
<li class="page-link orange-bg"><a href="about.html">About the Project</a></li>
<li class="page-link orange-bg"><a href="glossary.html">Glossary</a></li>
<li class="page-link orange-bg"><a href="team.html">Our Team</a></li>
<li class="page-link orange-bg"><a href="bibliography.html">Bibliography</a></li>
<li class="page-link orange-bg"><a href="contact.html">Contact</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<header>
<h1 class="page-title txt-center" data-aos="fade-in">Exhibition</h1>
</header>
<main>
<div class="container-full black-bg photo-bg-2">
<div class="container-wide clear-bg">
<div class="video-container" style="padding:56.25% 0 0 0;position:relative;" data-aos="fade-up">
<iframe src="https://player.vimeo.com/video/530896249?autoplay=0&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><script src="https://player.vimeo.com/api/player.js"></script>
</div>
</div>
</div>
<div class="container-wide black-bg xtra-pad">
<p class="txt-center large-quote" data-aos="fade-in">“THE BLACK MUSICIAN HAS CREATED AN ENTIRELY NEW MUSIC—IN A STYLE PECULIARLY AFRO-AMERICAN—THAT TODAY SPREADS ITS INFLUENCE OVER THE ENTIRE WORLD. . . .PERHAPS THE PRESENT STUDY WILL STIMULATE GENERAL RESEARCH AND INVESTIGATION INTO SPECIAL ASPECTS OF BLACK AMERICAN MUSIC.”</p>
<h5 class="txt-center light-red" data-aos="fade-in">Eileen Southern<br><span class="title-case"><i>The Music Of Black Americans: A History</i> (New York: W.W. Norton, 1971)</span></h5>
</div>
<div class="container-full black-bg">
<div class="flex-column">
<div class="tri-column">
<a href="bio.html"><img class="thumbnail" data-aos="fade-up" src="imgs/thumb-bio.jpg"></a>
<h3 class="white txt-center"><a href="bio.html" class="white">ABOUT EILEEN SOUTHERN</a></h3>
</div>
<div class="tri-column">
<a href="timeline.html"><img class="thumbnail" data-aos="fade-up" src="imgs/thumb-timeline.jpg"></a>
<h3 class="white txt-center"><a href="timeline.html" class="white">EXPLORE THE TIMELINE</a></h3>
</div>
<div class="tri-column">
<a href="publications.html"><img class="thumbnail" data-aos="fade-up" src="imgs/thumb-work.jpg"></a>
<h3 class="white txt-center"><a href="scholarship.html" class="white">SCHOLARSHIP</a></h3>
</div>
<div class="tri-column">
<a href="map.html"><img class="thumbnail" data-aos="fade-up" src="imgs/thumb-map.jpg"></a>
<h3 class="white txt-center"><a href="map.html" class="white">MAP SOUTHERN'S LETTERS</a></h3>
</div>
<div class="tri-column">
<a href="publications.html"><img class="thumbnail" data-aos="fade-up" src="imgs/thumb-teaching.jpg"></a>
<h3 class="white txt-center"><a href="teaching.html" class="white">TEACHING</a></h3>
</div>
<div class="tri-column">
<a href="gallery.html"><img class="thumbnail" data-aos="fade-up" src="imgs/thumb-gallery.jpg"></a>
<h3 class="txt-center"><a href="gallery.html" class="white">VIEW GALLERY OBJECTS</a></h3>
</div>
</div>
</div>
</main>
<footer>
<ul class="bottom-nav">
<li><a href="bio.html">Life + Career</a></li>
<li>|</li>
<li><a href="timeline.html">Timeline</a></li>
<li>|</li>
<li><a href="scholarship.html">Scholarship</a></li>
<li>|</li>
<li><a href="teaching.html">Teaching</a></li>
<li>|</li>
<li><a href="map.html">Map</a></li>
<li>|</li>
<li><a href="gallery.html">Gallery</a></li>
<li>|</li>
<li><a href="interviews.html">Interviews</a></li>
</ul>
</footer>
<div class="footer-image"></div>
<script src="js/aos.js"></script>
<script>
AOS.init({
easing: 'ease-in-out-sine',
});
</script>
</body>
</html>