'itinerario.html' - First draft
This commit is contained in:
parent
499138614e
commit
edf4104356
@ -56,6 +56,18 @@
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'roboto_regular';
|
||||
src: url('../fonts/Roboto-Regular-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'roboto_medium';
|
||||
src: url('../fonts/Roboto-Medium-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/* Open Sans Regular */
|
||||
@font-face {
|
||||
font-family: 'open_sansregular';
|
||||
|
||||
119
css/main.css
119
css/main.css
@ -5,6 +5,10 @@
|
||||
--ochre: #ccac68;
|
||||
--ochre-light : #f7f4ee;
|
||||
--ochre-dark: rgba(116,102,77,1);
|
||||
--light-dark: #333;
|
||||
--dark: rgb(26, 21, 21);
|
||||
--lilac: #c852ff;
|
||||
--emerald: #067d08;
|
||||
}
|
||||
/** General utils **/
|
||||
.of-hidden {
|
||||
@ -13,12 +17,27 @@
|
||||
.pl-lg {
|
||||
padding-left: 1rem !important;
|
||||
}
|
||||
.pl-xl {
|
||||
padding-left: 4rem !important;
|
||||
}
|
||||
.pr-lg {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
.mt-lg {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.short-hr {
|
||||
width: 3.5rem;
|
||||
margin-left: 0;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.note {
|
||||
font-size: 10pt;
|
||||
}
|
||||
.text-14pt {
|
||||
font-size: 14pt;
|
||||
}
|
||||
/** Font classes **/
|
||||
.arvo {
|
||||
font-family: 'arvoregular'/*Fallback??*/;
|
||||
@ -26,12 +45,21 @@
|
||||
.roboto {
|
||||
font-family: 'roboto_condensedregular';
|
||||
}
|
||||
.roboto-reg {
|
||||
font-family: 'roboto_regular';
|
||||
}
|
||||
.roboto-med {
|
||||
font-family: 'roboto_medium';
|
||||
}
|
||||
.robot-slab-b {
|
||||
font-family: 'roboto_slabbold';
|
||||
}
|
||||
.roboto-slab {
|
||||
font-family: 'roboto_slabregular';
|
||||
}
|
||||
.roboto-slab-l {
|
||||
font-family: 'roboto_slablight';
|
||||
}
|
||||
.opensans {
|
||||
font-family: 'open_sansregular';
|
||||
}
|
||||
@ -79,9 +107,19 @@ header {
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.main-header.itin {
|
||||
background: none;
|
||||
min-height: 25vh;
|
||||
}
|
||||
.main-header.itin #nav {
|
||||
color: var(--dark);
|
||||
}
|
||||
.main-header h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
.main-header.itin h1 {
|
||||
font-size: 36pt;
|
||||
}
|
||||
.main-header h1::after {
|
||||
max-width: 5rem;
|
||||
margin: 10px auto 0 auto;
|
||||
@ -109,22 +147,33 @@ header {
|
||||
background-color: rgba(254, 254, 254, 0.25);
|
||||
}
|
||||
/* ---- Navbar ----- */
|
||||
.h-nav {
|
||||
min-width: 280px;
|
||||
padding-left: 10px;
|
||||
.side-nav {
|
||||
width: 280px;
|
||||
opacity: 1;
|
||||
padding-left: 5px;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
z-index: 11;
|
||||
animation-name: slidein;
|
||||
animation-duration: 1s;
|
||||
transition: slidein 0.5s ease-in;
|
||||
}
|
||||
.h-nav a {
|
||||
@keyframes slidein {
|
||||
from {
|
||||
width: 0px;
|
||||
}
|
||||
to {
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
.side-nav a {
|
||||
display: block;
|
||||
color: #333;
|
||||
color: var(--light-dark);
|
||||
text-decoration: none;
|
||||
margin-left: 30px;
|
||||
padding: 10px 0;
|
||||
transition: ease-in 1s;
|
||||
}
|
||||
.nav-menu {
|
||||
text-align: right;
|
||||
@ -152,19 +201,45 @@ header {
|
||||
line-height: 2.3rem;
|
||||
}
|
||||
#nav i {
|
||||
padding-top: 1.5rem;
|
||||
padding-top: 2rem;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
#close-nav {
|
||||
padding: 0px;
|
||||
margin: 0px 0 20px 0;
|
||||
font-size: 1.2rem;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
padding-top: 0.7rem;
|
||||
padding-left: 0;
|
||||
margin: 0px 0 15px 0;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
/** From css.gg **/
|
||||
.icon-close {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 40px
|
||||
}
|
||||
.icon-close::after,
|
||||
.icon-close::before {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transform: rotate(45deg);
|
||||
border-radius: 5px;
|
||||
top: 8px;
|
||||
left: 1px
|
||||
}
|
||||
.icon-close::after {
|
||||
transform: rotate(-45deg)
|
||||
}
|
||||
#nav.border {
|
||||
border-bottom: 1px solid rgba(204,204,204,1);
|
||||
}
|
||||
@ -183,7 +258,7 @@ body.opaque::after {
|
||||
content: '';
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgb(26, 21, 21);
|
||||
background-color: var(--dark);
|
||||
opacity: 0.7;
|
||||
position: fixed;
|
||||
}
|
||||
@ -243,6 +318,13 @@ section.prj-logos img {
|
||||
max-height: 110px;
|
||||
max-width: 410px;
|
||||
}
|
||||
section.poi .container {
|
||||
max-width: 1180px;
|
||||
}
|
||||
#itin-c {
|
||||
padding-right: 12%;
|
||||
font-size: 14pt;
|
||||
}
|
||||
#vagg {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
@ -250,3 +332,16 @@ section.prj-logos img {
|
||||
max-width: 110px;
|
||||
margin: 0 25%;
|
||||
}
|
||||
/** Text colors **/
|
||||
.ochre-dark {
|
||||
color: var(--ochre-dark);
|
||||
}
|
||||
.ochre {
|
||||
color: var(--ochre) !important;
|
||||
}
|
||||
.green {
|
||||
color: var(--emerald);
|
||||
}
|
||||
.lilac {
|
||||
color: var(--lilac);
|
||||
}
|
||||
BIN
fonts/Roboto-Medium-webfont.woff
Normal file
BIN
fonts/Roboto-Medium-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/Roboto-Regular-webfont.woff
Normal file
BIN
fonts/Roboto-Regular-webfont.woff
Normal file
Binary file not shown.
BIN
img/Thumbnail_Antonio.jpg
Normal file
BIN
img/Thumbnail_Antonio.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
BIN
img/Thumbnail_Piazza Forcina01.jpg
Normal file
BIN
img/Thumbnail_Piazza Forcina01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
BIN
img/Thumbnail_Sul carattere dei faresi02.jpg
Normal file
BIN
img/Thumbnail_Sul carattere dei faresi02.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
BIN
img/mappa.png
Normal file
BIN
img/mappa.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
BIN
img/thumb_francesco.jpg
Normal file
BIN
img/thumb_francesco.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
BIN
img/thumb_prologo.jpg
Normal file
BIN
img/thumb_prologo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
@ -26,8 +26,8 @@
|
||||
<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 h-nav bg-white opensans">
|
||||
<p id="close-nav">X</p>
|
||||
<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>
|
||||
|
||||
245
itinerario.html
Normal file
245
itinerario.html
Normal 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, all’interno, 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">
|
||||
L’itinerario 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 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-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 "Fara invisibile".
|
||||
</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, 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-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 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>
|
||||
</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 dell’800 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 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-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 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>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="roboto">
|
||||
<p id="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>
|
||||
15
js/ui.js
15
js/ui.js
@ -39,7 +39,7 @@ if (homeRE.test(window.location.href)) {
|
||||
* Apply active class to selected link...
|
||||
* @todo Inefficient!!
|
||||
*/
|
||||
window.addEventListener('load', () => {
|
||||
window.addEventListener('focus', () => {
|
||||
let navlinks = Array.from(document.querySelectorAll('#links a'));
|
||||
|
||||
navlinks.forEach(element => {
|
||||
@ -57,7 +57,6 @@ window.addEventListener('load', () => {
|
||||
* Activate background on scroll for nav only
|
||||
* if not small screen
|
||||
*/
|
||||
if (window.innerWidth >= 600) {
|
||||
window.addEventListener('scroll', event => {
|
||||
let nav = document.querySelector('#nav');
|
||||
let links = document.querySelector('#links');
|
||||
@ -69,13 +68,14 @@ if (window.innerWidth >= 600) {
|
||||
links.classList.remove('nav-light');
|
||||
}
|
||||
else {
|
||||
if (!document.querySelector('header').classList.contains('itin')) {
|
||||
nav.classList.add('text-gray');
|
||||
nav.classList.remove('bg-white', 'border');
|
||||
links.classList.add('nav-light');
|
||||
links.classList.remove('nav-dark');
|
||||
links.classList.add('nav-light');
|
||||
}
|
||||
nav.classList.remove('bg-white', 'border');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
/**
|
||||
@ -84,14 +84,15 @@ window.addEventListener('load', () => {
|
||||
let menu = document.querySelector('i');
|
||||
|
||||
menu.addEventListener('click', () => {
|
||||
document.querySelector('.h-nav').classList.remove('d-hide');
|
||||
document.querySelector('.side-nav').classList.remove('d-hide');
|
||||
document.querySelector('.side-nav').classList.remove('slide-out');
|
||||
document.querySelector('body').classList.add('opaque');
|
||||
});
|
||||
|
||||
let close = document.querySelector('#close-nav');
|
||||
|
||||
close.addEventListener('click', () => {
|
||||
document.querySelector('.h-nav').classList.add('d-hide');
|
||||
document.querySelector('.side-nav').classList.add('d-hide');
|
||||
document.querySelector('body').classList.remove('opaque');
|
||||
})
|
||||
})
|
||||
@ -26,8 +26,8 @@
|
||||
<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 h-nav bg-white opensans">
|
||||
<p id="close-nav">X</p>
|
||||
<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>
|
||||
@ -37,7 +37,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="title" class="text-center">
|
||||
<h1 class="arvo">Il progetto</h1>
|
||||
<h1 class="roboto">Il progetto</h1>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
@ -100,26 +100,20 @@
|
||||
<div class="col-12 mb-2">
|
||||
<h2>Output del progetto</h2>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-sm-12 col-md-12 of-hidden mt-2 pr-lg">
|
||||
<div class="column col-lg-6 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>
|
||||
<p class="text-left mb-2">
|
||||
Per la condivisione dei contenuti e la creazione gratuita di tour e visite guidate
|
||||
</p>
|
||||
<a href="https://cms.innovapatrimonio.com/" title="Vai al sito di InnovaPatrimonio">
|
||||
<img src="img/sito_ip.PNG" alt="Sito di InnovaPatrimonio">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-sm-12 col-md-12 mt-2">
|
||||
<p class="text-uppercase mb-0 robot-slab-b">Piattaforma web</p>
|
||||
<p>
|
||||
Per la condivisione dei contenuti e la creazione gratuita di tour e visite guidate
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns mt-2">
|
||||
<div class="column col-lg-6 col-sm-12 col-md-12 mt-2 pr-lg">
|
||||
<p class="text-right text-uppercase mb-0 robot-slab-b">Web app</p>
|
||||
<p class="text-right">
|
||||
<div class="column col-lg-6 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>
|
||||
<p class="text-left mb-2">
|
||||
Generata dal sito web con i contenuti pre-caricati
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-sm-12 col-md-12 mt-2">
|
||||
<a href="https://pwa.innovapatrimonio.com/" title="Vai alla web app di InnovaPatrimonio">
|
||||
<img src="img/webapp.PNG" alt="Web App InnovaPatrimonio">
|
||||
</a>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user