-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (127 loc) · 5.47 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
<!--
Name: Bente de Bruin
Studentnumber: 11017503
Startpage with background information on the project
-->
<!DOCTYPE html>
<html lang='en'>
<head>
<!-- Load stylesheets -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='style/style.css'>
<title>Collection of Museum of Modern Art</title>
</head>
<body>
<!-- Bootstrap navbar with links to visualisations -->
<div class='container-fluid'>
<nav class='navbar navbar-expand-sm navbar-dark fixed-top' style='background-color: #4a9e5c;'>
<a class='navbar-brand' href='index.html'>Homepage</a>
<ul class='navbar-nav'>
<li class='nav-item'>
<a class='nav-link' href='project.html'>Visualisations</a>
</li>
</ul>
<!-- Navbar text -->
<ul class='navbar-nav ml-auto'>
<li class='navbar-text'>Bente de Bruin</li>
</ul>
</nav>
</div>
<!-- Main jumbotron for background story on the project-->
<div class='jumbotron'>
<h1 class='display-3'>The collection of The Museum of Modern Art New York</h1>
<div id='jumbo' class='container'>
<!-- Source: https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp -->
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
<li data-target="#demo" data-slide-to="3"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<!-- First image concerning vietnam by matthew brannon -->
<img src="doc/webimg/concerningvietnam.jpg" alt="Matthew Brannon">
<div class="carousel-caption">
<h3 id="explanation">Concercing Vietnam</h3>
<p id="explanation"> A screenprint by Matthew Brannon</p>
</div>
</div>
<div class="carousel-item">
<!-- Second image of wrapping paper for anger management by louise lawler -->
<img src="doc/webimg/louiselawler.jpg" alt="Louise Lawler">
<div class="carousel-caption">
<h3 id="explanation">Wrapping paper for Anger Management</h3>
<p id="explanation">An offset litograph by Louise Lawler</p>
</div>
</div>
<div class="carousel-item">
<!-- Third image of photograph of rineke dijkstra -->
<img src="doc/webimg/rinekedijkstra.jpg" alt="Rineke Dijkstra">
<div class="carousel-caption">
<h3 id="explanation">Tia, Amsterdam, the Netherlands, 14 November 1994, Tia, Amsterdam, the Netherlands, 23 June 1994</h3>
<p id="explanation">Two chromogenic colorprints by Rineke Dijkstra</p>
</div>
</div>
<div class="carousel-item">
<!-- Fourth image of eiffel tower by ai wei wei -->
<img src="doc/webimg/aiweiwei.jpg" alt="Ai Wei Wei">
<div class="carousel-caption">
<h3 id="explanation">Study of Perspective - Eiffel Tower</h3>
<p id="explanation">A gelatin silver print by Ai Wei Wei</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon">
</span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon">
</span>
</a>
</div>
</div>
</div>
<div class='container'>
<!-- Row of columns -->
<div class='row'>
<div class='col-md-4'>
<h2>The museum of Modern Art, their bio</h2>
<p>
"At The Museum of Modern Art and MoMA PS1, we celebrate creativity, openness, tolerance, and generosity. We aim to be inclusive places—both onsite and online—where diverse cultural, artistic, social, and political positions are welcome. We’re committed to sharing the most thought-provoking modern and contemporary art, and hope you will join us in exploring the art, ideas, and issues of our time."
<a href="https://www.moma.org/about/"> Source</a>
</p>
</div>
<div class='col-md-4'>
<h2>The aim of this project</h2>
<p>
In this project, I visualized where MoMA acquired their works. I looked at the years 1965, 1975, 1985, 1995, 2005, 2015, 2016, 2017 and 2018.
Since this museum is one of world's leading museum in exhibiting contemporary art, it is important to know where they acquired their works.
They aim to be inclusive and to be a place where cultural diversity is celebrated, I questioned this with this project.
</p>
</div>
<div class='col-md-4'>
<h2>The dataset</h2>
<p>
Below, you can find the dataset that was used for the creation of this project.
<a href="https://www.kaggle.com/tboyle10/new-york-museum-of-modern-art"> Click to view datasource</a>
</p>
</div>
</div>
<hr>
</div>
<footer class='container'>
<p>Bente de Bruin</p>
</footer>
</body>
<!-- Load jquery and bootstrap -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>
</html>