Interactive POIs - to n. 9
This commit is contained in:
221
map.html
221
map.html
@@ -139,6 +139,86 @@
|
||||
id="tspan835"
|
||||
sodipodi:role="line">5</tspan></text>
|
||||
</g>
|
||||
<g id="disputa" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="68.578873"
|
||||
cx="60.127975"
|
||||
id="path833"
|
||||
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
|
||||
<text
|
||||
id="text837"
|
||||
y="35.578873"
|
||||
x="15.127975"
|
||||
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-style:italic;font-size:4px;font-family:Caladea;
|
||||
fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="70"
|
||||
x="59"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">6</tspan></text>
|
||||
</g>
|
||||
<g id="duomo" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="93.578873"
|
||||
cx="89.127975"
|
||||
id="path833"
|
||||
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
|
||||
<text
|
||||
id="text837"
|
||||
y="35.578873"
|
||||
x="15.127975"
|
||||
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-style:italic;font-size:4px;font-family:Caladea;
|
||||
fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="95"
|
||||
x="88"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">7</tspan></text>
|
||||
</g>
|
||||
<g id="castello" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="95.578873"
|
||||
cx="104.127975"
|
||||
id="path833"
|
||||
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
|
||||
<text
|
||||
id="text837"
|
||||
y="35.578873"
|
||||
x="15.127975"
|
||||
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-style:italic;font-size:4px;font-family:Caladea;
|
||||
fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="97"
|
||||
x="103"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">8</tspan></text>
|
||||
</g>
|
||||
<g id="sabini" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="87.578873"
|
||||
cx="88.127975"
|
||||
id="path833"
|
||||
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
|
||||
<text
|
||||
id="text837"
|
||||
y="35.578873"
|
||||
x="15.127975"
|
||||
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-style:italic;font-size:4px;font-family:Caladea;
|
||||
fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="89"
|
||||
x="87"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">9</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="modal modal-lg modal-fullheight" id="mod-vid">
|
||||
@@ -162,7 +242,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-prologo">
|
||||
<img src="img/thumbs/thumb_prologo.jpg" alt="Prologo" style="cursor: pointer;">
|
||||
<img src="img/thumbs/thumb_prologo.jpg" alt="Prologo" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-viaggiatore">
|
||||
@@ -180,7 +260,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-viaggiatore">
|
||||
<img src="img/thumbs/thumb_viaggiatore.jpg" alt="Il viaggiatore" style="cursor: pointer;">
|
||||
<img src="img/thumbs/thumb_viaggiatore.jpg" alt="Il viaggiatore" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-faresi">
|
||||
@@ -198,7 +278,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-faresi">
|
||||
<img src="img/thumbs/thumb_faresi.jpg" alt="Sul carattere dei Faresi" style="cursor: pointer;">
|
||||
<img src="img/thumbs/thumb_faresi.jpg" alt="Sul carattere dei Faresi" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-piazza1">
|
||||
@@ -214,7 +294,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-piazza1">
|
||||
<img src="img/thumbs/thumb_piazza.jpg" alt="Piazza Forcina" style="cursor: pointer;">
|
||||
<img src="img/thumbs/thumb_piazza.jpg" alt="Piazza Forcina" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-piazza2">
|
||||
@@ -229,7 +309,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-piazza2">
|
||||
<img src="img/thumbs/thumb_antonio.jpg" alt="Piazza Forcina" style="cursor: pointer;">
|
||||
<img src="img/thumbs/thumb_antonio.jpg" alt="Piazza Forcina" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-piazza3">
|
||||
@@ -245,7 +325,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-piazza3">
|
||||
<img src="img/thumbs/thumb_francesco.jpg" alt="Piazza Forcina" style="cursor: pointer;">
|
||||
<img src="img/thumbs/thumb_francesco.jpg" alt="Piazza Forcina" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-nobili">
|
||||
@@ -264,10 +344,10 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-nobili">
|
||||
<img src="img/thumbs/thumb_nobili.jpg" alt="I nobili di Fara" style="cursor: pointer;">
|
||||
<img src="img/thumbs/thumb_nobili.jpg" alt="I nobili di Fara" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-rocco">
|
||||
<div class="columns hide" id="col-rocco1">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Rocco si è svegliato #5
|
||||
@@ -281,13 +361,132 @@
|
||||
il borgo popolato come era allora.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-rocco">
|
||||
<img src="img/thumbs/thumb_rocco.jpg" alt="Rocco si è svegliato" style="cursor: pointer;">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-rocco1">
|
||||
<img src="img/thumbs/thumb_rocco.jpg" alt="Rocco si è svegliato" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-rocco2">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Alberto #5b
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Alberto è lo storico appassionato di Fara, scrive e colleziona foto storiche,
|
||||
proseguendo una tradizione di famiglia e rappresenta "il tipico farese".
|
||||
Racconta come è avvenuto lo spopolamento del borgo, nel secondo dopoguerra.
|
||||
Molte cose si sono perse ma, dice, quassù si continua a vivere bene.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-rocco2">
|
||||
<img src="img/thumbs/thumb_alberto.jpg" alt="Alberto" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-disputa">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Disputa sui dialetti e sui saperi #6
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Trilussa recita poesie davanti una piccola platea in una piazzetta.
|
||||
Alberto, inizialmente seduto un po' in disparte, mal sopporta la
|
||||
lingua romanesca di Trilussa e improvvisamente si accende,
|
||||
accusando il poeta di essere un forestiero in terra sabina.
|
||||
I due intraprendono una accesa disputa sui dialetti e sui cibi.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-disputa">
|
||||
<img src="img/thumbs/thumb_disputa.jpg" alt="Disputa sui dialetti e sui saperi" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-duomo1">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Piazza Duomo #7
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Piazza duomo è il cuore del borgo, dove il sacro e il profano
|
||||
si incontrano: la cisterna dell'acqua pubblica, l'antico Monte
|
||||
Frumentario, il forno, il museo, i palazzetti nobiliari,
|
||||
la chiesa, e un panorama magnifico. Ariel si delizia e volteggia
|
||||
nella piazza, tessendo ghirlande da finestra a finestra,
|
||||
compiendo magie e trasformandole architetture del luogo.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 vid-thumb" id="t-duomo1">
|
||||
<img src="img/thumbs/thumb_duomo.jpg" alt="Piazza Duomo">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-duomo2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="green mb-2 text-italic text-bold">
|
||||
Loredana #7a
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Loredana gestisce il forno quattrocentesco di Fara,
|
||||
con suo fratello Angelo e altri abitanti del borgo.
|
||||
Era l'antico forno pubblico del borgo. Loredana racconta
|
||||
come questo forno sia l'espressione del suo forte legame
|
||||
con la famiglia, dalla quale ha imparato l'arte e
|
||||
la gestualità del fare il pane.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 vid-thumb" id="t-duomo2">
|
||||
<img src="img/thumbs/thumb_loredana.jpg" alt="Loredana">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-duomo3">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="green mb-2 text-italic text-bold">
|
||||
Pietro #7b
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Pietro è venuto a vivere a Fara, da Roma.
|
||||
Nel suo palazzo ha raccolto una collezione d'arte africana
|
||||
straordinaria, frutto di cinquant'anni di vita trascorsi in Africa.
|
||||
Ci racconta il suo rapporto di serenità con il borgo,
|
||||
dove l'architettura vive in stupefacente equilibrio con la natura
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 vid-thumb" id="t-duomo3">
|
||||
<img src="img/thumbs/thumb_pietro.jpg" alt="Pietro">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-castello">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Il castello #8
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Fara ha un castello di nobili origini, più volte espugnato e ricostruito.
|
||||
Un tempo ospitava le tante attività del paese. Oggi è quasi in abbandono.
|
||||
Due imbonitori convincono la popolazione ad entrare, promettendo che lì
|
||||
dentro potrà trovare risposta a tutti i suoi desideri.
|
||||
Così gli abitanti cominciano a dar voce ai loro desideri, fin quando…
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 vid-thumb" id="t-castello">
|
||||
<img src="img/thumbs/thumb_castello.jpg" alt="Il castello">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-sabini">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
I Sabini ieri e oggi #9
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Gli oggetti del museo di Fara in Sabina vengono proiettati sullo spazio esterno
|
||||
di Piazza Duomo. Uno spettacolo di video-mapping si anima sulle facciate dei palazzi,
|
||||
e viene raccontata la storia dei Sabini attraverso un dialogo drammatizzato fra
|
||||
due personaggi immaginari. Gli abitanti del borgo entrano nello spettacolo,
|
||||
anch'essi proiettati sui muri, e interagiscono con gli oggetti della loro passata cultura.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 vid-thumb" id="t-sabini">
|
||||
<img src="img/thumbs/thumb_sabini.jpg" alt="I sabini ieri e oggi">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user