Merge branch 'online-site' of https://git.electricmandarine.cloud/nicolo/fara-web
This commit is contained in:
commit
5a6167e26c
6
.gitignore
vendored
6
.gitignore
vendored
@ -2,4 +2,8 @@ spectre*/
|
||||
*.zip
|
||||
*.ttf
|
||||
*_old*
|
||||
*_bak*
|
||||
*_bak*
|
||||
# Ignore videos in online version
|
||||
vid_*.mp4
|
||||
assets/video/vid_*.mp4
|
||||
*.xcf
|
||||
|
||||
Binary file not shown.
Binary file not shown.
@ -13,7 +13,7 @@
|
||||
<div class="container">
|
||||
<div class="columns bg-white" id="nav">
|
||||
<div class="column col-lg-7 col-sm-10 col-md-2">
|
||||
<img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
|
||||
<a href="/"><img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo"></a>
|
||||
</div>
|
||||
<div class="column col-sm-2 show-sm text-right">
|
||||
<i class="icon icon-menu icon-2x"></i>
|
||||
|
||||
40
css/main.css
40
css/main.css
@ -34,6 +34,9 @@ div#preload img {
|
||||
.of-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.modal-body.of-scroll {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.pl-lg {
|
||||
padding-left: 1rem !important;
|
||||
}
|
||||
@ -343,6 +346,7 @@ section .container {
|
||||
line-height: 1.3rem;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
section .container {
|
||||
width: 1280px;
|
||||
@ -369,7 +373,8 @@ section .container ul {
|
||||
margin-left: 0;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
section .container img {
|
||||
section .container img,
|
||||
.modal img {
|
||||
width: 100%;
|
||||
}
|
||||
section.prj-logos img {
|
||||
@ -407,10 +412,16 @@ section.poi h3 {
|
||||
color: var(--lilac);
|
||||
}
|
||||
/** Modals **/
|
||||
#mod-vid .modal-overlay {
|
||||
#mod-vid {
|
||||
background-color: #555;
|
||||
}
|
||||
/** Temp **/
|
||||
|
||||
.modal-container div {
|
||||
font-family: 'roboto_slablight', sans-serif;
|
||||
line-height: 1.3rem;
|
||||
}
|
||||
|
||||
/** Temp
|
||||
.placeholder {
|
||||
background-color: rgba(0,0,0,.03);
|
||||
height: 70%;
|
||||
@ -420,11 +431,11 @@ section.poi h3 {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
/*****/
|
||||
canvas {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
*/
|
||||
/** Videos **/
|
||||
video, .open-vid {
|
||||
cursor: pointer;
|
||||
@ -433,12 +444,31 @@ video, .open-vid {
|
||||
color: var(--white);
|
||||
margin-top: 0.9rem;
|
||||
}
|
||||
.vid-thumb > img {
|
||||
cursor: pointer;
|
||||
}
|
||||
/*
|
||||
.vid-thumb::before {
|
||||
content: "";
|
||||
border-left:rgba(75, 99, 207, 0.658) 85px solid;
|
||||
border-top: 60px solid transparent;
|
||||
border-bottom: 60px solid transparent;
|
||||
visibility: visible;
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
left: 70vh;
|
||||
top: 15vh;
|
||||
cursor: pointer;
|
||||
}
|
||||
*/
|
||||
/** Slideshow... **/
|
||||
.hide, .slide {
|
||||
display: none;
|
||||
}
|
||||
.show {
|
||||
display: block;
|
||||
display: block !important;
|
||||
}
|
||||
/* Fading animation */
|
||||
.fadein {
|
||||
|
||||
@ -2597,9 +2597,7 @@ summary.accordion-header::-webkit-details-marker {
|
||||
|
||||
.modal.modal-lg .modal-container {
|
||||
box-shadow: none;
|
||||
/* Custom max-width*/
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
|
||||
BIN
img/innova.png
Normal file
BIN
img/innova.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 557 KiB |
74
img/map.svg
74
img/map.svg
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 697 KiB |
BIN
img/map_int.png
Normal file
BIN
img/map_int.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
BIN
img/mappa.png
BIN
img/mappa.png
Binary file not shown.
|
Before Width: | Height: | Size: 147 KiB After Width: | Height: | Size: 514 KiB |
@ -13,7 +13,7 @@
|
||||
<div class="container">
|
||||
<div class="columns text-gray" id="nav">
|
||||
<div class="column col-lg-7 col-sm-10 col-md-2">
|
||||
<img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
|
||||
<a href="/"><img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo"></a>
|
||||
</div>
|
||||
<div class="column col-sm-2 show-sm text-right">
|
||||
<i class="icon icon-menu icon-2x"></i>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<div class="container">
|
||||
<div class="columns bg-white" id="nav">
|
||||
<div class="column col-lg-7 col-sm-10 col-md-2">
|
||||
<img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
|
||||
<a href="/"><img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo"></a>
|
||||
</div>
|
||||
<div class="column col-sm-2 show-sm text-right">
|
||||
<i class="icon icon-menu icon-2x"></i>
|
||||
@ -42,8 +42,9 @@
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column col-lg-6 col-sm-12 col-md-12 of-hidden">
|
||||
<img src="img/mappa.png" title="Apri la mappa interattiva" alt="Mappa dei percorsi a Fara Sabina" id="map">
|
||||
<!-- <canvas></canvas> -->
|
||||
<a href="map.html">
|
||||
<img src="img/mappa.png" title="Apri la mappa interattiva" alt="Mappa dei percorsi a Fara Sabina" id="map">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-sm-12 col-md-12 pl-xl roboto-slab-l" id="itin-c">
|
||||
<h2>Il borgo storico in tappe</h2>
|
||||
@ -101,7 +102,7 @@
|
||||
<img src="img/thumbs/thumb_viaggiatore.jpg" alt="Viaggiatore #1">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Il viaggiatore #1
|
||||
</h3>
|
||||
@ -170,7 +171,7 @@
|
||||
<p class="text-small">
|
||||
Antonio è un artigiano restauratore del legno, di Fara Sabina.
|
||||
La sua bottega si affaccia su Piazza Garibaldi dove lo troviamo
|
||||
al lavoro, allietato dal canto degli uccelli.
|
||||
al lavoro, allietato dal canto degli uccelli.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
@ -467,25 +468,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="modal modal-lg modal-fullheight" id="mod-vid">
|
||||
<a href="#close" class="modal-overlay" aria-label="Close"></a>
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<a href="#close" class="btn btn-clear float-right" title="Close" aria-label="Close"></a>
|
||||
<div class="modal-title h5"></div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="content" id="mod-cont">
|
||||
<video controls>
|
||||
<source src="assets/video/vid_prologo.mp4" type="video/mp4">
|
||||
Il browser non supporta i video integrati.
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="modal-footer">
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="roboto">
|
||||
<p id="copy">© Avviso pubblico Beni Culturali e Turismo POR FESR Lazio 2014-2020</p>
|
||||
|
||||
91
js/fara.js
91
js/fara.js
@ -1,4 +1,36 @@
|
||||
//use strict;
|
||||
localStorage.setItem('online', true);
|
||||
|
||||
/**
|
||||
* Export constants!!
|
||||
* @todo titles, vimeoVids
|
||||
*/
|
||||
export const titles = [
|
||||
|
||||
]
|
||||
|
||||
export const vimeoVids = {
|
||||
'thumb_prologo' : '478632535',
|
||||
'thumb_viaggiatore' : '562518107',
|
||||
'thumb_faresi' : '562529310',
|
||||
'thumb_piazza' : '443587380',
|
||||
'thumb_antonio' : '606341398',
|
||||
'thumb_francesco' : '471773781',
|
||||
'thumb_nobili' : '562534835',
|
||||
'thumb_rocco' : '606346781',
|
||||
'thumb_alberto' : '606372910',
|
||||
'thumb_disputa' : '471537982',
|
||||
'thumb_duomo' : '606343917',
|
||||
'thumb_loredana' : '513080769',
|
||||
'thumb_pietro' : '455576197',
|
||||
'thumb_castello' : '562536148',
|
||||
'thumb_sabini' : '542321131',
|
||||
'thumb_monumento' : '606362546',
|
||||
'thumb_eva' : '606352547',
|
||||
'thumb_toto' : '606348670',
|
||||
'thumb_fuori' : '606358668',
|
||||
'thumb_carro' : '562262086',
|
||||
};
|
||||
/**
|
||||
* 'Slide' background images
|
||||
* in landing page
|
||||
@ -14,19 +46,20 @@ export function sliderBg()
|
||||
/*** Fade in??*/
|
||||
//opacity = 1;
|
||||
|
||||
let images = [
|
||||
'img/lp-bg/fara_bg_1.jpg',
|
||||
'img/lp-bg/fara_bg_2.jpg',
|
||||
'img/lp-bg/fara_bg_3.jpg',
|
||||
'img/lp-bg/fara_bg_4.jpg',
|
||||
'img/lp-bg/fara_bg_5.jpg',
|
||||
let images = [
|
||||
'img/lp-bg/fara_bg_1.jpg',
|
||||
'img/lp-bg/fara_bg_2.jpg',
|
||||
'img/lp-bg/fara_bg_3.jpg',
|
||||
'img/lp-bg/fara_bg_4.jpg',
|
||||
'img/lp-bg/fara_bg_5.jpg',
|
||||
];
|
||||
|
||||
if (nextimage >= images.length) {
|
||||
nextimage = 0;
|
||||
}
|
||||
header.setAttribute('style', 'background-image : url("' + images[nextimage++] + '");');
|
||||
setTimeout(slider, 2000);
|
||||
|
||||
if (nextimage >= images.length) {
|
||||
nextimage = 0;
|
||||
}
|
||||
|
||||
header.setAttribute('style', 'background-image : url("' + images[nextimage++] + '");');
|
||||
setTimeout(slider, 2000);
|
||||
}
|
||||
}
|
||||
/**
|
||||
@ -52,8 +85,6 @@ export function slideshow()
|
||||
slideIndex = 1;
|
||||
}
|
||||
|
||||
//console.log(slides);
|
||||
|
||||
slides[slideIndex-1].classList.remove("hide");
|
||||
slides[slideIndex-1].classList.add("show");
|
||||
|
||||
@ -61,7 +92,7 @@ export function slideshow()
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @todo
|
||||
* @todo Interactive SVG?
|
||||
* The canvas should be drawn into an overlay
|
||||
* container (always fullscreen)
|
||||
*/
|
||||
@ -156,16 +187,46 @@ export function openVideo(a)
|
||||
.trim();
|
||||
|
||||
let vStr = '';
|
||||
let vimeoVids = {
|
||||
'thumb_prologo' : '478632535',
|
||||
'thumb_viaggiatore' : '562518107',
|
||||
'thumb_faresi' : '562529310',
|
||||
'thumb_piazza' : '443587380',
|
||||
'thumb_antonio' : '606341398',
|
||||
'thumb_francesco' : '471773781',
|
||||
'thumb_nobili' : '562534835',
|
||||
'thumb_rocco' : '606346781',
|
||||
'thumb_alberto' : '606372910',
|
||||
'thumb_disputa' : '471537982',
|
||||
'thumb_duomo' : '606343917',
|
||||
'thumb_loredana' : '513080769',
|
||||
'thumb_pietro' : '455576197',
|
||||
'thumb_castello' : '562536148',
|
||||
'thumb_sabini' : '542321131',
|
||||
'thumb_monumento' : '606362546',
|
||||
'thumb_eva' : '606352547',
|
||||
'thumb_toto' : '606348670',
|
||||
'thumb_fuori' : '606358668',
|
||||
'thumb_carro' : '562262086',
|
||||
};
|
||||
|
||||
let vimeoLink = 'https://player.vimeo.com/video/';
|
||||
|
||||
aNodes.forEach(n => {
|
||||
if (n.src) {
|
||||
vStr = n.src;
|
||||
vStr = vStr.substr(vStr.lastIndexOf('/')+1, vStr.length)
|
||||
.replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4');
|
||||
|
||||
vimeoLink += vimeoVids[n.src.substr(n.src.lastIndexOf('/')+1, n.src.length)
|
||||
.replace(/\.(png|jpg)/, '')];
|
||||
|
||||
vimeoLink += '?autoplay=1';
|
||||
}
|
||||
});
|
||||
|
||||
localStorage.setItem('vidURI', vStr);
|
||||
localStorage.setItem('vimeo', vimeoLink);
|
||||
localStorage.setItem('vidTitle', title);
|
||||
/**
|
||||
* Go to video page
|
||||
|
||||
149
js/ui-map.js
Normal file
149
js/ui-map.js
Normal file
@ -0,0 +1,149 @@
|
||||
//use strict;
|
||||
|
||||
document.addEventListener('readystatechange', () => {
|
||||
let close = document.querySelector('#mod-vid a[href="#close"]');
|
||||
let mod = document.querySelector('#mod-vid');
|
||||
|
||||
close.addEventListener('click', () => {
|
||||
mod.classList.remove('active');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
document.addEventListener('readystatechange', () => {
|
||||
let close = document.querySelector('#close-map');
|
||||
|
||||
close.addEventListener('click', () => {
|
||||
window.location.href = "itinerario.html";
|
||||
});
|
||||
|
||||
});
|
||||
/**
|
||||
* Open modal overlay
|
||||
* for each POI
|
||||
* @param {string} id
|
||||
*/
|
||||
function openModal(id) {
|
||||
const modTitles = {
|
||||
'prologo' : 'Itinerario - #0',
|
||||
'viaggiatore' : 'Itinerario - #1',
|
||||
'faresi' : 'Itinerario - #2',
|
||||
'piazza' : 'Itinerario - #3',
|
||||
'nobili' : 'Itinerario - #4',
|
||||
'rocco' : 'Itinerario - #5',
|
||||
'disputa' : 'Itinerario - #6',
|
||||
'duomo' : 'Itinerario - #7',
|
||||
'castello' : 'Itinerario - #8',
|
||||
'sabini' : 'Itinerario - #9',
|
||||
'monumento' : 'Itinerario - #10',
|
||||
'fuori' : 'Itinerario - #11',
|
||||
'carro' : 'Itinerario - #12',
|
||||
}
|
||||
// The POI with more than one video
|
||||
const multiVid = {
|
||||
'piazza' : 3,
|
||||
'rocco' : 2,
|
||||
'duomo' : 3,
|
||||
'monumento' : 3,
|
||||
};
|
||||
|
||||
document.querySelector('.modal-title').innerHTML = modTitles[id];
|
||||
|
||||
let modal = document.querySelector('#mod-vid');
|
||||
let modCont = document.querySelector('#mod-cont');
|
||||
let modChildren = Array.from(modCont.children);
|
||||
|
||||
modChildren.forEach(c => {
|
||||
if (c.classList.contains('columns')) {
|
||||
if (c.id === 'col-'+id ||
|
||||
(c.id.includes(id) && Object.keys(multiVid).includes(id))) {
|
||||
c.classList.remove('hide');
|
||||
}
|
||||
else {
|
||||
c.classList.add('hide');
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
modal.classList.add('active');
|
||||
|
||||
if (!Object.keys(multiVid).includes(id)) {
|
||||
let thumb = document.querySelector('#t-'+id);
|
||||
|
||||
thumb.addEventListener('click', () => {
|
||||
openVid(id);
|
||||
});
|
||||
} else {
|
||||
let thumbs = [];
|
||||
for (let i = 1; i <= multiVid[id]; i++) {
|
||||
thumbs.push(document.querySelector(`#t-${id}${i}`));
|
||||
}
|
||||
thumbs.forEach(t => {
|
||||
let img = document.querySelector('#'+t.id+' img');
|
||||
let vidId = img.src.replace(/^(.*)?img\/thumbs\/thumb_(\w+)\.\w+$/i, "$2");
|
||||
|
||||
t.addEventListener('click', () => {
|
||||
openVid(vidId);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Open video from thumbnail
|
||||
* @param {string} id
|
||||
*/
|
||||
const openVid = (id) => {
|
||||
|
||||
const titles = {
|
||||
'viaggiatore' : 'Il Viaggiatore #1',
|
||||
'prologo' : 'Prologo - Annunciazione',
|
||||
'faresi' : 'Sul carattere dei Faresi #2',
|
||||
'piazza' : 'Piazza Forcina #3',
|
||||
'antonio' : 'Antonio #3a',
|
||||
'francesco' : 'Francesco #3b',
|
||||
'nobili' : 'I Nobili di Fara #4',
|
||||
'rocco' : 'Rocco si è svegliato #5',
|
||||
'alberto' : 'Alberto #5b',
|
||||
'disputa' : 'Disputa sui dialetti e sui saperi #6',
|
||||
'duomo' : 'Piazza Duomo #7',
|
||||
'loredana' : 'Loredana #7a',
|
||||
'pietro' : 'Pietro #7b',
|
||||
'castello' : 'Il castello #8',
|
||||
'sabini' : 'I Sabini ieri e oggi #9',
|
||||
'monumento' : 'Il monumento sacro #10',
|
||||
'eva' : 'Eva #10a',
|
||||
'toto' : 'Toto #10b',
|
||||
'fuori' : 'Fuori Porta #11',
|
||||
'carro' : 'Il ritorno del carro #12',
|
||||
}
|
||||
const vimeoVids = {
|
||||
'prologo' : '478632535',
|
||||
'viaggiatore' : '562518107',
|
||||
'faresi' : '562529310',
|
||||
'piazza' : '443587380',
|
||||
'antonio' : '606341398',
|
||||
'francesco' : '471773781',
|
||||
'nobili' : '562534835',
|
||||
'rocco' : '606346781',
|
||||
'alberto' : '606372910',
|
||||
'disputa' : '471537982',
|
||||
'duomo' : '606343917',
|
||||
'loredana' : '513080769',
|
||||
'pietro' : '455576197',
|
||||
'castello' : '562536148',
|
||||
'sabini' : '542321131',
|
||||
'monumento' : '606362546',
|
||||
'eva' : '606352547',
|
||||
'toto' : '606348670',
|
||||
'fuori' : '606358668',
|
||||
'carro' : '562262086',
|
||||
};
|
||||
|
||||
let vimeoLink = 'https://player.vimeo.com/video/'+vimeoVids[id]+'?autoplay=1';
|
||||
|
||||
localStorage.setItem('vidURI', 'vid_'+id+'.mp4');
|
||||
localStorage.setItem('vimeo', vimeoLink);
|
||||
localStorage.setItem('vidTitle', titles[id]);
|
||||
|
||||
window.location.href = 'video.html';
|
||||
}
|
||||
19
js/ui.js
19
js/ui.js
@ -44,7 +44,7 @@ if (window.location.href.includes('itinerario')) {
|
||||
*/
|
||||
if (window.location.href.includes('video')) {
|
||||
document.addEventListener('readystatechange', () => {
|
||||
let vStr = localStorage.getItem('vidURI');
|
||||
let vimeoLink = localStorage.getItem('vimeo');
|
||||
let vidTitle = localStorage.getItem('vidTitle');
|
||||
|
||||
document.querySelector('h1').innerHTML = vidTitle;
|
||||
@ -57,12 +57,12 @@ if (window.location.href.includes('video')) {
|
||||
window.history.go(-1);
|
||||
});
|
||||
|
||||
let source = document.querySelector('source');
|
||||
let video = source.parentNode;
|
||||
let iframe = document.querySelector('iframe');
|
||||
//let video = source.parentNode;
|
||||
|
||||
source.src = `assets/video/${vStr}`;
|
||||
iframe.src = vimeoLink;
|
||||
|
||||
video.load();
|
||||
//video.load();
|
||||
});
|
||||
}
|
||||
/**
|
||||
@ -72,4 +72,13 @@ if (window.location.href.includes('credits')) {
|
||||
document.addEventListener('readystatechange', () => {
|
||||
Farapp.slideshow();
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Landscape orientation when fullscreen?!
|
||||
* @todo Reliable check for mobile ('maxTouchPoints' in navigator)???
|
||||
*/
|
||||
if ("maxTouchPoints" in navigator) {
|
||||
document.addEventListener('fullscreenchange', () => {
|
||||
screen.orientation.lock('landscape');
|
||||
});
|
||||
}
|
||||
639
map.html
Normal file
639
map.html
Normal file
@ -0,0 +1,639 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<link rel="stylesheet" href="css/spectre-icons.css">
|
||||
<script type="text/javascript" src="js/ui-map.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" style="max-height: 100%;">
|
||||
<image href="img/map_int.png" height="200" width="200"/>
|
||||
<text
|
||||
id="text837"
|
||||
y="0"
|
||||
x="190"
|
||||
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-size:6px;font-family:sans-serif;cursor:pointer;
|
||||
fill:#777;fill-opacity:1;stroke-width:0.264583"
|
||||
y="8"
|
||||
x="190"
|
||||
id="close-map"
|
||||
sodipodi:role="line">X</tspan>
|
||||
</text>
|
||||
<g id="prologo" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="24.578873"
|
||||
cx="31.127975"
|
||||
id="path833"
|
||||
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
|
||||
<text
|
||||
id="text837"
|
||||
y="25.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:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="26"
|
||||
x="30.1"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">0</tspan></text>
|
||||
</g>
|
||||
<g id="viaggiatore" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="69.578873"
|
||||
cx="121.127975"
|
||||
id="path833"
|
||||
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
|
||||
<text
|
||||
y="45.578873"
|
||||
x="50.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:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="71"
|
||||
x="120"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">1</tspan></text>
|
||||
</g>
|
||||
<g id="faresi" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="69.578873"
|
||||
cx="95.127975"
|
||||
id="path833"
|
||||
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
|
||||
<text
|
||||
y="45.578873"
|
||||
x="50.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:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="71"
|
||||
x="94"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">2</tspan></text>
|
||||
</g>
|
||||
<g id="piazza" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="48.578873"
|
||||
cx="93.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:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="50"
|
||||
x="92"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">3</tspan></text>
|
||||
</g>
|
||||
<g id="nobili" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="34.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:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="36"
|
||||
x="88"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">4</tspan></text>
|
||||
</g>
|
||||
<g id="rocco" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="44.578873"
|
||||
cx="82.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:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="46"
|
||||
x="81"
|
||||
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:#fff;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:#fff;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:#fff;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:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="89"
|
||||
x="87"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">9</tspan></text>
|
||||
</g>
|
||||
<g id="monumento" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="158.578873"
|
||||
cx="154.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:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="160"
|
||||
x="152"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">10</tspan></text>
|
||||
</g>
|
||||
<g id="fuori" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="80.578873"
|
||||
cx="43.527975"
|
||||
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.527975"
|
||||
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:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="82"
|
||||
x="41.5"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">11</tspan></text>
|
||||
</g>
|
||||
<g id="carro" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="12.578873"
|
||||
cx="75.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:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="14"
|
||||
x="73"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">12</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="modal modal-lg modal-fullheight" id="mod-vid">
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<a href="#close" class="btn btn-clear float-right" title="Close" aria-label="Close"></a>
|
||||
<div class="modal-title h5 roboto"></div>
|
||||
</div>
|
||||
<div class="modal-body of-scroll">
|
||||
<div class="container roboto-slab" id="mod-cont">
|
||||
<div class="columns hide" id="col-prologo">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Prologo - Annunciazione
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Un angelo compare a un eremita all'inizio dei tempi, sul Monte Acuziano.
|
||||
Gli annuncia che sulla collina antistante sorgerà una città
|
||||
che si chiamerà Fara, dove si vivrà in pace e in armonia con la natura,
|
||||
in attesa di un re che farà ritorno…
|
||||
</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" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-viaggiatore">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Il Viaggiatore #1
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Un viaggiatore, arrivato a Fara Sabina, incontra una strano personaggio
|
||||
che si offre di guidarlo in un viaggio attraverso il borgo che lo
|
||||
porterà a riscoprire il senso della meraviglia.
|
||||
Si comincia dal teatro dove gli attori, attraverso i personaggi
|
||||
che hanno creato in tanti anni di spettacoli,
|
||||
si stanno preparando a rappresentare la "Fara invisibile".
|
||||
</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" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-faresi">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Sul carattere dei Faresi #2
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Trilussa, poeta romano ma ormai di casa qui a Fara Sabina, e Ariel, spirito del vento prestato
|
||||
dalla commedia shakespeariana “La Tempesta”, si affrontano in una piazzetta.
|
||||
Ariel, l'eterno spiritello sognatore è sospeso sui tetti e guarda il mondo dall'alto,
|
||||
osserva la forma della città e le abitudini dei suoi abitanti, fa magie.
|
||||
Trilussa ha i piedi ben piantati per terra ed esorta Ariel a scendere e prendere
|
||||
contatto con il mondo.
|
||||
</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" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-piazza1">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Piazza Forcina #3
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Trilussa, accompagnato da un angelo, racconta la storia di questa piazza che si chiamava
|
||||
piazza Forcina per via delle prigioni che vi si affacciavano fino a dopo l'unità d'Italia.
|
||||
Immagina il lamento di quei poveri disgraziati a cui solo la luna teneva compagnia.
|
||||
Ma poi tutto è cambiato, botteghe artigiane, il trasporto pubblico... è arrivata la modernità!
|
||||
</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" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-piazza2">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Antonio #3a
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Antonio è un artigiano restauratore del legno, di Fara Sabina.
|
||||
La sua bottega si affaccia su Piazza Garibaldi dove lo troviamo
|
||||
al lavoro, allietato dal canto degli uccelli.
|
||||
</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" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-piazza3">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Francesco #3b
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Francesco appartiene ad un'antica famiglia di Fara,
|
||||
negli anni ha raccolto nella sua casa una collezione
|
||||
di oggetti dell'800 e del primo ‘900 che ci
|
||||
raccontano una cultura ormai scomparsa.
|
||||
</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" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-nobili">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
I Nobili di Fara #4
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Trilussa, accompagnata dall'angelo, racconta e mostra
|
||||
i molti palazzi nobiliari a Fara, appartenuti alle famiglie
|
||||
romane degli Orsini, dei Farnese, dei Barberini...
|
||||
da queste potenti famiglie baronali
|
||||
provenivano gli abati commendatari della vicina e
|
||||
potentissima Abbazia di Farfa che hanno lasciato
|
||||
la loro impronta nel borgo.
|
||||
</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" >
|
||||
</div>
|
||||
</div>
|
||||
<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
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Rocco era un abitante di Fara in Sabina morto nel 1987 e vissuto in
|
||||
un momento di fervore della vita del paese e della sua comunità.
|
||||
Passava tutto il tempo all'osteria del paese. Ora si è appena
|
||||
risvegliato dal lungo sonno e non riconosce più la sua Fara,
|
||||
tutta vuota e silenziosa. Ma Ariel compie una magia e gli mostra
|
||||
il borgo popolato come era allora.
|
||||
</p>
|
||||
</div>
|
||||
<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 class="columns hide" id="col-monumento1">
|
||||
<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 monumento sacro #10
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Lo strano personaggio guida e l'angelo ci accompagnano attraverso la pineta,
|
||||
fino al monumento sacro dei caduti in guerra. Un tumulo recintato e scavato
|
||||
nel banco roccioso, dove gli abitanti del paese si prendono cura dei sentieri
|
||||
e dei fiori o cantano spensieratamente. Un luogo naturale fatto di roccia e memorie,
|
||||
all'ombra gentile dei lecci.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 vid-thumb" id="t-monumento1">
|
||||
<img src="img/thumbs/thumb_monumento.jpg" alt="Il monumento sacro">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-monumento2">
|
||||
<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">
|
||||
Eva #10a
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Eva viveva a Roma ma si è trasferita a Fara. Si chiede quanto a lungo
|
||||
resterà in questo luogo sospeso nello spazio e nel tempo.
|
||||
Ha voluto costruire questo inedito ritratto del borgo,
|
||||
con i nuovi compagni di viaggio protagonisti delle storie,
|
||||
cercando di vivere la bellezza e promuoverla come un valore
|
||||
sociale comune.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 vid-thumb" id="t-monumento2">
|
||||
<img src="img/thumbs/thumb_eva.jpg" alt="Eva">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-monumento3">
|
||||
<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">
|
||||
Toto #10b
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Toto quando era giovane faceva il fuochista alla Croce Rossa di Fara,
|
||||
come tante famiglie del borgo. Questo luogo era in origine un
|
||||
preventorio antitubercolare per bambini che venivano da tutta Italia.
|
||||
Oggi è in rovina ma è ancora pieno di fascino, in un paesaggio bellissimo.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 vid-thumb" id="t-monumento3">
|
||||
<img src="img/thumbs/thumb_toto.jpg" alt="Toto">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-fuori">
|
||||
<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">
|
||||
Fuori Porta #11
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Fuori porta è il luogo del pettegolezzo. Da qui passa obbligatoriamente
|
||||
chi entra e chi esce dal borgo, sottoposto agli inevitabili giudizi dei
|
||||
giocatori di carte e di coloro che bighellonano sul muretto.
|
||||
Il personaggio di Acab mette in scena una danza quasi tribale
|
||||
che rappresenta questo rito.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 vid-thumb" id="t-fuori">
|
||||
<img src="img/thumbs/thumb_fuori.jpg" alt="Fuori Porta">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-carro">
|
||||
<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 ritorno del carro #12
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
L'angelo e Ariel si trovano sul Belvedere e improvvisamente compare
|
||||
qualcosa nel cielo. È il presagio di qualcosa che si compie
|
||||
e che si celebrerà con il rito di ri-fondazione della città,
|
||||
all'insegna dell'immaginazione e della felicità.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 vid-thumb" id="t-carro">
|
||||
<img src="img/thumbs/thumb_carro.jpg" alt="Fuori Porta">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -13,7 +13,7 @@
|
||||
<div class="container">
|
||||
<div class="columns text-gray" id="nav">
|
||||
<div class="column col-lg-7 col-sm-10 col-md-2">
|
||||
<img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
|
||||
<a href="/"><img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo"></a>
|
||||
</div>
|
||||
<div class="column col-sm-2 show-sm text-right">
|
||||
<i class="icon icon-menu icon-2x"></i>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<div class="container">
|
||||
<div class="columns text-gray" id="nav">
|
||||
<div class="column col-lg-7 col-sm-10 col-md-2">
|
||||
<img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
|
||||
<a href="/"><img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo"></a>
|
||||
</div>
|
||||
<div class="column col-sm-2 show-sm text-right">
|
||||
<i class="icon icon-menu icon-2x"></i>
|
||||
@ -92,6 +92,37 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
<!-- Solo versione online -->
|
||||
<section class="odd-stripe">
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="col-12 mb-2">
|
||||
<h2>Output tecnologici (a cura di Orpheo)</h2>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 of-hidden mt-2 mb-2 pr-lg">
|
||||
<p class="text-left text-uppercase mb-0 mt-2 robot-slab-b">Sito web</p>
|
||||
<a href="https://www.innovapatrimonio.com/" title="Vai al sito di InnovaPatrimonio">
|
||||
<img class="mt-2" src="img/innova.png" alt="Sito di InnovaPatrimonio">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 of-hidden mt-2 mb-2 pr-lg">
|
||||
<p class="text-left text-uppercase mb-0 mt-2 robot-slab-b">Piattaforma web</p>
|
||||
<a href="https://cms.innovapatrimonio.com/" title="Vai alla piattaforma web">
|
||||
<img class="mt-2" src="img/sito_ip.PNG" alt="Piattaforma InnovaPatrimonio">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pr-lg">
|
||||
<p class="text-left text-uppercase mb-0 mt-2 robot-slab-b">Web app</p>
|
||||
<a href="https://pwa.innovapatrimonio.com/" title="Vai alla web app di InnovaPatrimonio">
|
||||
<img class="mt-2" src="img/webapp.PNG" alt="Web App InnovaPatrimonio">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Fine (versione online) -->
|
||||
>>>>>>> 975bfd2756d7370dfe5e3f98c410d3363bd4d890
|
||||
<section class="prj-logos">
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
|
||||
@ -11,18 +11,25 @@
|
||||
<body class="bg-dark">
|
||||
<main>
|
||||
<div class="columns">
|
||||
<!-- Absolute position to avoid top margin?? -->
|
||||
<div class="column col-11">
|
||||
<h1 class="roboto-slab mb-2 mt-2 ml-2"></h1>
|
||||
</div>
|
||||
<div class="column col-1">
|
||||
<a href="#close" class="icon-close" title="Close" id="close-nav" aria-label="Close"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<<<<<<< HEAD
|
||||
<video class="video-responsive" disablePictureInPicture oncontextmenu="return false;" controls autoplay controlsList="nodownload">
|
||||
<source src="" type="video/mp4">
|
||||
Il browser non supporta i video integrati
|
||||
</video>
|
||||
=======
|
||||
<div class="video-responsive">
|
||||
<iframe src="" frameborder="0" allowfullscreen allow="autoplay"></iframe>
|
||||
</div>
|
||||
>>>>>>> 975bfd2756d7370dfe5e3f98c410d3363bd4d890
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user