-
Notifications
You must be signed in to change notification settings - Fork 0
/
timeline.html
149 lines (127 loc) · 6.05 KB
/
timeline.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
<!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">Gallery 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">Timeline</h1>
</header>
<main>
<div class="banners">
<img src="imgs/page_banner_04.png">
<p class ="caption">image detail from book titled etc.</p>
</div>
<div class="container-wide white-bg">
<div class="timeline-item" >
<div class="timeline-image-container">
<img data-aos="fade-up" src="imgs/timeline-obj-01.jpg">
</div>
<div class="timeline-data-container">
<h2>1952</h2>
<h4>The Music of Black Americans</h4>
<h5 class="timeline-category">book</h5>
<p class="timeline-description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit.
</p>
</div>
</div>
<div class="timeline-item" >
<div class="timeline-image-container">
<img data-aos="fade-up" src="imgs/timeline-obj-02.jpg">
</div>
<div class="timeline-data-container">
<h2>1953</h2>
<h4>Black Studies Curriculum</h4>
<h5 class="timeline-category">book cover</h5>
<p class="timeline-description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.
</p>
</div>
</div>
<div class="timeline-item" >
<div class="timeline-image-container">
<img data-aos="fade-up" src="imgs/timeline-obj-03.jpg">
</div>
<div class="timeline-data-container">
<h2>1954</h2>
<h4>Letter to Musicology Department</h4>
<h5 class="timeline-category">letter</h5>
<p class="timeline-description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.
</p>
</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>