-
Notifications
You must be signed in to change notification settings - Fork 0
/
map.html
98 lines (94 loc) · 5.17 KB
/
map.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="NellNelson_CitySlaveGirls" />
<meta name="author" content="RebeccaParker" />
<title>Nell Nelson: City Slave Girls</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- Custom CSS -->
<link href="css/custom.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Yellowtail" rel="stylesheet" />
</head>
<body>
<!-- Navigation -->
<!--#include virtual="top.html" -->
<!-- Page Content -->
<div>
<h1 class="text-center">Explore Late-Nineteenth Century Chicago's Business District</h1>
<h2 class="text-center">Through the Companies Mentioned in the <em>Chicago Times</em>
"City Slave Girls" Series.</h2>
<p class="text-center otherP-smaller">Hover over buildings; if name of company appears,
click on the building for more information on company.<br /><a href="modernMap.html"
>Click to view companies on present-day map.</a></p>
</div>
<div class="imageMap">
<figure>
<img class="center-block" src="images/1898_LOC_BusinessDistrictChicago.jpg"
alt="1898 Drawn Picture of Chicago Business District" usemap="#Map" />
<map name="Map" id="Map">
<area alt="The Chicago Times Headquarters"
title="The Chicago Times Headquarters" data-toggle="modal" href="#CT"
shape="rect" coords="928,358,944,377" />
<area alt="Marshall Field's & Company"
title="Marshall Field's & Company" data-toggle="modal" href="#MarshF"
shape="rect" coords="952,651,984,673" />
</map>
<p class="text-center figure-caption map-caption"> The map image above was made
intentionally large to illustrate its detailed complexity. <br /> Source: Poole
Brothers. <em>Bird's-Eye-View of the Business District of Chicago</em>. Chicago,
1898. <a href="https://www.loc.gov/item/75693212/" target="_blank">Retrieved
from the Library of Congress</a>.</p>
</figure>
</div>
<div class="modal fade" id="MarshF" tabindex="-1" role="dialog" aria-labelledby="MarshF">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"
><span aria-hidden="true">X</span></button>
<h4 class="modal-title popupH" id="MarshFLabel">Marshall Field &
Co.</h4>
</div>
<div class="modal-body">
<img class="center-block" src="images/MarshF.jpg"
alt="1880s Photograph of Marshall Field's"
title="Source: https://chicagology.com/business/marshall-field/" />
<p class="popupP top-space text-center">Mentioned in <a
href="1888-07-30.html">July 30, 1888</a> article.</p>
</div>
</div>
</div>
</div>
<div class="modal fade" id="CT" tabindex="-1" role="dialog" aria-labelledby="CT">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"
><span aria-hidden="true">X</span></button>
<h4 class="modal-title popupH" id="CTLabel"><em>The Chicago Times</em>
Headquarters</h4>
</div>
<div class="modal-body">
<img class="center-block" src="images/A_1888-08-06.jpg"
alt="Snippet printed on 1888-08-06" />
<p class="popupP top-space text-center">Read Nell Nelson's <a
href="readingView.html">"City Slave Girls" series</a>.</p>
</div>
</div>
</div>
</div>
<!--<img class="img-center" src="images/wireframe_mapping.jpg"
alt="Wireframe of Map Page Expectations" />--><!-- RJP:2016-08-03:Uncomment this to see the Wireframe Expectations of this page -->
<!-- Footer -->
<!--#include virtual="foot.html" -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/8a3ee4eb37.js"></script>
</body>
</html>