-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
254 lines (225 loc) · 12.8 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
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
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="DC.Title" content="MnM's - Music and Maps Magazine">
<meta name="DC.Creator" content="Erica Andreose, Gaia Ortona, Chiara Parravicini">
<meta name="DC.Subject" content="Digital Online Magazine">
<meta name="DC.Description" content="Information Modeling and Web Technologies project">
<meta name="DC.Publisher" content="Alma mater studiorum - Universita di Bologna, Information Modeling and Web Technologies">
<meta name="DC.Date" content="2023-14-08">
<meta name="DC.Type" content="Website">
<meta name="DC.Format" content="HTML/CSS/JS">
<meta name="DC.Identifier" content="https://ericaandreose.github.io/MnM-s/index.html"> <!--add website URL-->
<meta name="DC.Language" content="en">
<!--link Bootstrap icons-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!--link google icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--link favicon per loghetto -->
<link rel="icon" href="img/m.png" type="img/jpg"/>
<!--link font google-->
<link href="https://fonts.googleapis.com/css2?family=Tangerine&display=swap" rel="stylesheet">
<!--CSS of Bootstrap-->
<link rel="stylesheet" type="text/css" href="bootstrap-5.3.1-dist/css/bootstrap.min.css">
<!-- css link -->
<link rel="stylesheet" id="style-link" href="styleMINE.css">
<title>MnM's Magazine</title>
</head>
<body>
<!-- gif animated -->
<div class="container-fluid" id="gif">
<img src="img/mnmsgif.gif" alt="title GIF" id="gifimage">
</div>
<!-- subtitle -->
<div class="container-fluid-nav sticky-top" id="subtitle">
<h4>Music and Maps Magazine</h4>
<!-- start of the NAVBAR -->
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="documentation.html">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="issues.html">
Issues
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Styles
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item jsstyle" data-style="styleMINE.css" data-src="img/lp.png" map-style="mapbox://styles/ericaandreose/clr5fspy401hb01qr7elchsk7">Default</a></li>
<li><a class="dropdown-item jsstyle" data-style="medievalissues.css" data-src="img/medieval/Wheel.png" map-style="mapbox://styles/ericaandreose/clqvgxzcs00zv01o36el44ju0">1500</a></li>
<li><a class="dropdown-item jsstyle" data-style="provaOttocento.css" data-src="img/artnouveau/discoArtNouveau.png" map-style="mapbox://styles/ericaandreose/clr5e1o3701h601qwar1jf6de">1800</a></li>
<li><a class="dropdown-item jsstyle" data-style="anni30gaia.css" data-src="img/thirties/222c4899ec414668aacf03aecbc1a33d-fotor-20231205163932.png" map-style="mapbox://styles/ericaandreose/clr5er6ln01hc01qwf9wk9bzo">1930</a></li>
<li><a class="dropdown-item jsstyle" data-style="provaSeventies.css" data-src="img/seventies/discoSeventies.png" map-style="mapbox://styles/ericaandreose/clr5f0o6f01fn01pj8qt9d5yb">1970</a></li>
<li><a class="dropdown-item jsstyle" data-style="geronimo.css" data-src="img/geronimo/cerchio.png" map-style="mapbox://styles/ericaandreose/clpmid6ux00yn01po7jjfgs7y">2000</a></li>
<li><a class="dropdown-item jsstyle" data-style="2030gaia.css" data-src="img/2030img/vinile2030.png" map-style="mapbox://styles/ericaandreose/clr5f4cdf00is01pd53ts6dcf">2030</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- end navbar-->
</div>
<br>
<br>
<div class="image-container" id="space">
<div id="stick">
<img src="img/arm2.png" class="img-fluid" id="move">
</div>
<div id="Vinyl">
<img src="img/lp.png" class="img-fluid" id="rotate">
</div>
<div class="music-container" id="music-container">
<h6 class="stitle" id="title">1500 - Gaga</h6>
<audio src="./songs/1500 - Gaga.mp3" id="audio"></audio>
<div class="navigation">
<button id="prev" class="action-btn">
<i class="bi bi-skip-backward-circle-fill"></i>
</button>
<button id="js-rotate" class="action-btn action-btn-big">
<i class="bi bi-play-circle-fill"></i>
</button>
<button id="next" class="action-btn">
<i class="bi bi-skip-forward-circle-fill"></i>
</button>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" id="main">
<div class="col-md-4">
<div id="asideLeft" class="sticky">
<h2>Disclaimer</h2>
<p>The purpose of this web site is to explore various types of typographic and
layout style for text documents, as an end-of-course project for the "Information
Modeling and Web technologies" course of the Master Degree in Digital Humanities
and Digital Knowledge of the University of Bologna, under prof. Fabio Vitali.</p>
<p>This work is distributed with the license <a href="http://creativecommons.org/licenses/by-nc-nd/3.0/" target="_blank">Creative Commons - 3.0 Unported.</a></p>
</div>
</div>
<div class="col-md-4">
<div id="center">
<h1>The magazine</h1>
<p class="text-justify">The Music and Maps magazine gathers the most interesting web articles about music in all its forms. Our first three issues delve into Music and Technology, Music and Contexts, and Music and Fashion. Explore our articles, playing with the six available styles, and immerse yourself in reading by choosing the perfect soundtrack for you. For each article, you can explore its metadata and view, on a colorful interactive map, the places mentioned within it.</p>
<br>
<div class="home-btn text-center">
<button type="button" onclick="window.location.href='issues.html'" id='start' class="btn btn-outline-dark">Start the journey</button>
</div>
</div>
</div>
<div class="col-md-4">
<div id="asideRight" class="sticky">
<h2>How it works</h2>
<p>Travel through time with articles available in six different historical styles. Imagine choosing your preferred era, from the Renaissance to the Space Future. Enhance your experience with a music interactive vinyl, curating the perfect soundtrack for your historical immersion. Enjoy a brief, immersive journey through history and time!</p>
</div>
</div>
<br><br>
</div>
</div>
<br>
<br>
<div class="container-fluid" id="cards">
<div class="row">
<!-- Responsive Card Layout -->
<div class="col-lg-4 col-md-6 mb-4">
<div class="card">
<img src="img/erica.jpeg" class="card-img-top rounded-circle" id="imgcard" alt="Card Image 1">
<div class="card-body">
<h5 class="card-title">Erica Andreose</h5>
<p class="card-text text-center" >
<!-- Icons for GitHub and LinkedIn -->
<p>Styles: 1500 - 2000</p>
<p>Issue: Music and Technology</p>
<a href="https://github.com/EricaAndreose" target="_blank"><i class="bi bi-github fs-4"></i></a>
<a href="https://www.linkedin.com/in/erica-andreose-1535a7201/" target="_blank"><i class="bi bi-linkedin fs-4"></i></a>
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card">
<img src="img/gaia.jpeg" class="card-img-top rounded-circle" id="imgcard" alt="Card Image 2">
<div class="card-body">
<h5 class="card-title">Gaia Ortona</h5>
<p class="card-text text-center" >
<!-- Icons for GitHub and LinkedIn -->
<p>Styles: 1930 - 2030</p>
<p>Issue: Music and Fashion</p>
<a href="https://github.com/GaiaOrtona" target="_blank"><i class="bi bi-github fs-4"></i></a>
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card">
<img src="img/chiara.JPG" class="card-img-top rounded-circle" id="imgcard" alt="Card Image 3">
<div class="card-body">
<h5 class="card-title">Chiara Parravicini</h5>
<p class="card-text text-center" >
<!-- Icons for GitHub and LinkedIn -->
<p>Styles: 1800 - 1970</p>
<p>Issue: Music and Contexts</p>
<a href="https://github.com/ChiaraParravicini" target="_blank"><i class="bi bi-github fs-4"></i></a>
<a href="" target="_blank"><i class="bi bi-linkedin fs-4"></i></a>
</p>
</div>
</div>
</div>
</div>
</div>
<br>
<footer>
<div class="container-fluid">
<div class="row" id="footer">
<div class="col-md-1"></div>
<div class="col-md-4">
<br>
<p id="text-f">Music and Maps Magazine it's a DHDK project for the exam of Information Modeling and Web Techinologies held by Professor Fabio Vitali.</p>
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/" target="_blank"><img alt="Licenza Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png"></a>
<br>
<p id="text-f">This work is distributed with the license <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/" target="_blank">Creative Commons Attribuzione - Non commerciale - Non opere derivate 3.0 Unported</a>.</p>
<a href="#gifimage"><button type="button" class="btn btn-outline-dark btn-sm" id="bottone">Back to the top</button></a>
<br>
<br>
</div>
<div class="col-md-2"></div>
<div class="col-md-4">
<br>
<h3 class="title-3">Contact</h3>
<p id="text-f"><a href="https://www.unibo.it/it" target="_blank">Alma Mater Studiorum Università di Bologna</a></p>
<p id="text-f"><a href="https://corsi.unibo.it/2cycle/DigitalHumanitiesKnowledge" target="_blank">Digital Humanities and Digital Knowledge</a></p>
<p id="text-f"><a href="https://www.unibo.it/en/teaching/course-unit-catalogue/course-unit/2022/454464" target="_blank">Information Modeling and Web Technologies</a></p>
</div>
<div class="col-md-1"></div>
<p id="text-center-f">© Copyright 2023 Erica Andreose, Gaia Ortona, Chiara Parravicini - IMWT project - DHDK - Alma Mater Studiorum Bologna</p>
</div>
</div>
</footer>
<!-- JS of Bootstrap-->
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
crossorigin="anonymous">
</script>
<script src="bootstrap-5.3.1-dist/js/bootstrap.bundle.min.js"></script>
<script src="rotation.js"></script>
<script src="rotate.js"></script>
<script src="app.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="carouselmove.js"></script>
<script src="changeStyle.js"></script>
</body>
</html>