'itinerario.html' - First draft

This commit is contained in:
2021-08-04 16:46:08 +02:00
parent 499138614e
commit edf4104356
14 changed files with 397 additions and 50 deletions

245
itinerario.html Normal file
View File

@@ -0,0 +1,245 @@
<!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 src="js/ui.js" type="text/javascript"></script>
<title>L'itinerario | Nel cielo di Fara</title>
</head>
<body>
<header class="main-header itin">
<div class="container">
<div class="columns bg-white" id="nav">
<div class="column col-lg-7 col-sm-10 col-md-2">
<img class="hide-sm" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
<i class="icon icon-menu show-sm"></i>
</div>
<div class="column col-sm-2 show-sm text-right">
<img class="show-sm" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
</div>
<div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-menu" id="links">
<a href="index.html" title="Torna alla home page">Home</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a>
</div>
<nav class="d-hide side-nav bg-white opensans">
<p id="close-nav"><i class="icon-close"></i></p>
<a href="index.html" title="Torna alla home page">Home</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a>
</nav>
</div>
</div>
<div id="title" class="text-center">
<h1 class="roboto-med ochre-dark">L'itinerario</h1>
</div>
</header>
<main>
<section>
<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">
</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>
<p>
Il percorso nel borgo storico <strong>Fara in Sabina</strong> si snoda attraverso <strong>12 punti di interesse</strong>
che, allinterno, contengono due tipologie di contenuti:
<ul>
<li class="lilac">
drammaturgie
</li>
<li class="green">
documentari
</li>
</ul>
</p>
<p>
Nella mappa interattiva a lato trovate i Punti di Interesse (PoI) notevoli, segnalati con le due colorazioni.
</p>
<p>
Il percorso è libero ma viene anche suggerito un ipotetico itinerario attraverso un tracciato multicolore.
</p>
<p>
Buona passeggiata!
</p>
<hr class="short-hr">
<p class="note roboto-slab">
Litinerario di Fara in Sabina è stato ideato e realizzato dal <strong>CNR ISPC</strong>
e dal <strong>Teatro Potlach</strong>, la realizzazione tecnica è di <strong>SD Cinematografica</strong>.
</p>
</div>
</div>
</div>
</section>
<section class="odd-stripe poi">
<div class="container">
<div class="columns mb-2">
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
<a href="" title="Guarda il video">
<img src="img/thumb_prologo.jpg" alt="Prologo">
</a>
</div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="lilac mb-2 text-small text-italic text-bold">
Prologo - Annunciazione
</h3>
<p class="text-small">
Un angelo compare a un eremita allinizio 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&hellip;
</p>
</div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
<a href="" title="Guarda il video del viaggiatore">
<img src="img/fara_bg_3.jpg" alt="Viaggiatore #1">
</a>
</div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="lilac mb-2 text-small 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 &quot;Fara invisibile&quot;.
</p>
</div>
</div>
</section>
<section class="poi">
<div class="container">
<div class="columns mb-2">
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
<a href="" title="Guarda il video">
<img src="img/Thumbnail_Sul carattere dei faresi02.jpg" alt="Prologo">
</a>
</div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="lilac mb-2 text-small 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, leterno spiritello sognatore è sospeso sui tetti e guarda il mondo dallalto,
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-3 col-sm-12 col-md-12 mt-2 mb-2">
<a href="" title="Guarda il video del viaggiatore">
<img src="img/Thumbnail_Piazza Forcina01.jpg" alt="Viaggiatore #1">
</a>
</div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="lilac mb-2 text-small 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 lunità dItalia.
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>
</section>
<section class="odd-stripe poi">
<div class="container">
<div class="columns mb-2">
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
<a href="" title="Guarda il video">
<img src="img/Thumbnail_Antonio.jpg" alt="Antonio">
</a>
</div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="green mb-2 text-small 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-3 col-sm-12 col-md-12 mt-2 mb-2">
<a href="" title="Guarda il video">
<img src="img/thumb_francesco.jpg" alt="Francesco #3b">
</a>
</div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="green mb-2 text-small 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 dell800 e del primo 900 che ci
raccontano una cultura ormai scomparsa.
</p>
</div>
</div>
</section>
<section class="poi">
<div class="container">
<div class="columns mb-2">
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
<a href="" title="Guarda il video">
<img src="img/Thumbnail_Antonio.jpg" alt="I nobili di Fara">
</a>
</div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="lilac mb-2 text-small text-italic text-bold">
I Nobili di Fara #4
</h3>
<p class="text-small">
Trilussa, accompagnata dallangelo, 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-3 col-sm-12 col-md-12 mt-2 mb-2">
<a href="" title="Guarda il video">
<img src="img/thumb_francesco.jpg" alt="Francesco #3b">
</a>
</div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="lilac mb-2 text-small 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 allosteria 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>
</section>
</main>
<footer class="roboto">
<p id="copy">&copy; Avviso pubblico Beni Culturali e Turismo POR FESR Lazio 2014-2020</p>
<p><img src="img/loghi_ispc_potlach.png" class="logos" alt="Loghi ISPC Potlach"></p>
<p><img src="img/FESR_BARRA_BENEFICIARI_DEF.jpg" class="logos" alt="Loghi enti beneficiari"></p>
</footer>
</body>
</html>