progetto.html - first draft
@ -1,5 +1,5 @@
|
||||
/**** Self-hosted fonts with free license ****/
|
||||
|
||||
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) */
|
||||
/* Arvo Regular */
|
||||
@font-face {
|
||||
font-family: 'arvoregular';
|
||||
@ -8,8 +8,7 @@
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/* Roboto */
|
||||
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 28, 2021 */
|
||||
/* Roboto Condensed */
|
||||
@font-face {
|
||||
font-family: 'roboto_condensedbold';
|
||||
src: url('../fonts/robotocondensed-bold-webfont.woff2') format('woff2'),
|
||||
@ -30,4 +29,37 @@
|
||||
url('../fonts/robotocondensed-regular-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/* Roboto Slab */
|
||||
@font-face {
|
||||
font-family: 'roboto_slablight';
|
||||
src: url('../fonts/RobotoSlab-Light-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'roboto_slabbold';
|
||||
src: url('../fonts/RobotoSlab-Bold-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'roboto_slabregular';
|
||||
src: url('../fonts/RobotoSlab-Regular-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/* Roboto */
|
||||
@font-face {
|
||||
font-family: 'roboto_bold';
|
||||
src: url('../fonts/Roboto-Bold-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/* Open Sans Regular */
|
||||
@font-face {
|
||||
font-family: 'open_sansregular';
|
||||
src: url('../fonts/OpenSans-Regular-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
101
css/main.css
@ -1,6 +1,24 @@
|
||||
@import url(spectre.css);
|
||||
@import url(fonts.css);
|
||||
|
||||
:root {
|
||||
--ochre: #ccac68;
|
||||
--ochre-light : #f7f4ee;
|
||||
--ochre-dark: rgba(116,102,77,1);
|
||||
}
|
||||
/** General utils **/
|
||||
.of-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.pl-lg {
|
||||
padding-left: 1rem !important;
|
||||
}
|
||||
.pr-lg {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
.mt-lg {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
/** Font classes **/
|
||||
.arvo {
|
||||
font-family: 'arvoregular'/*Fallback??*/;
|
||||
@ -8,6 +26,15 @@
|
||||
.roboto {
|
||||
font-family: 'roboto_condensedregular';
|
||||
}
|
||||
.robot-slab-b {
|
||||
font-family: 'roboto_slabbold';
|
||||
}
|
||||
.roboto-slab {
|
||||
font-family: 'roboto_slabregular';
|
||||
}
|
||||
.opensans {
|
||||
font-family: 'open_sansregular';
|
||||
}
|
||||
/****** Custom rules ******/
|
||||
body {
|
||||
height: 100%;
|
||||
@ -26,7 +53,6 @@ header {
|
||||
background-attachment: fixed;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
min-height: 930px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -35,21 +61,24 @@ header {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/* .main-header.bg1 {
|
||||
background-image: url(../img/fara_background.jpg);
|
||||
.main-header.home {
|
||||
min-height: 930px;
|
||||
}
|
||||
.main-header.bg2 {
|
||||
background-image: url(../img/fara_bg_2.jpg);
|
||||
.main-header.prog {
|
||||
min-height: 60vh;
|
||||
background-image: url('../img/progetto_header.jpg');
|
||||
}
|
||||
.main-header.bg3 {
|
||||
background-image: url(../img/fara_bg_3.jpg);
|
||||
.main-header.prog::before {
|
||||
background-color: rgba(33,33,33,1);
|
||||
opacity: 0.5;
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 40vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.main-header.bg4 {
|
||||
background-image: url(../img/fara_bg_4.jpg);
|
||||
}
|
||||
.main-header.bg5 {
|
||||
background-image: url(../img/fara_bg_5.jpg);
|
||||
} */
|
||||
.main-header h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
@ -57,13 +86,14 @@ header {
|
||||
max-width: 5rem;
|
||||
margin: 10px auto 0 auto;
|
||||
min-height: 0.4rem;
|
||||
background-color: #ccac68;
|
||||
background-color: var(--ochre);
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
#title {
|
||||
flex: none;
|
||||
min-width: 50%;
|
||||
z-index: 8;
|
||||
}
|
||||
#title button {
|
||||
min-width: 80%;
|
||||
@ -98,11 +128,15 @@ header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
#nav > div {
|
||||
vertical-align: middle;
|
||||
line-height: 2.3rem;
|
||||
}
|
||||
#nav.border {
|
||||
border-bottom: 1px solid rgba(204,204,204,1);
|
||||
}
|
||||
#logo {
|
||||
max-height: 41%;
|
||||
padding: 7px 0 10px 20px;
|
||||
@ -132,4 +166,43 @@ footer p {
|
||||
}
|
||||
.logos {
|
||||
max-height: 70px;
|
||||
}
|
||||
/*** Section stripes ***/
|
||||
.odd-stripe {
|
||||
background-color: var(--ochre-light);
|
||||
}
|
||||
section .container {
|
||||
padding-top: 1.5rem;
|
||||
font-family: 'roboto_slablight', sans-serif;
|
||||
line-height: 1.3rem;
|
||||
font-size: 12pt;
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
section .container {
|
||||
width: 1280px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1280px) {
|
||||
section .container {
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
section .container a {
|
||||
text-decoration: none;
|
||||
}
|
||||
section .container h2 {
|
||||
color: var(--ochre-dark);
|
||||
font-family: 'roboto_bold';
|
||||
font-size: 26pt;
|
||||
}
|
||||
section .container ul {
|
||||
list-style-type: square;
|
||||
margin-left: 0;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
section .container img {
|
||||
width: 100%;
|
||||
}
|
||||
#vagg {
|
||||
padding-bottom: 2rem;
|
||||
}
|
@ -3256,7 +3256,7 @@ a.text-error:visited {
|
||||
background: #fff;
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
/** End custom **/
|
||||
.bg-secondary {
|
||||
background: #f1f1fc !important;
|
||||
}
|
||||
|
BIN
fonts/OpenSans-Regular-webfont.woff
Normal file
BIN
fonts/Roboto-Bold-webfont.woff
Normal file
BIN
fonts/RobotoSlab-Bold-webfont.woff
Normal file
BIN
fonts/RobotoSlab-Light-webfont.woff
Normal file
BIN
fonts/RobotoSlab-Regular-webfont.woff
Normal file
BIN
img/Prologo-Annunziazione_backst.jpg
Normal file
After Width: | Height: | Size: 928 KiB |
BIN
img/ispc_ext_large.png
Normal file
After Width: | Height: | Size: 41 KiB |
BIN
img/logo_orpheo.png
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
img/logo_potlach.jpg
Normal file
After Width: | Height: | Size: 25 KiB |
BIN
img/logo_sillabe.jpg
Normal file
After Width: | Height: | Size: 22 KiB |
BIN
img/logo_theorema.png
Normal file
After Width: | Height: | Size: 9.2 KiB |
BIN
img/progetto_header.jpg
Normal file
After Width: | Height: | Size: 322 KiB |
BIN
img/sito_ip.PNG
Normal file
After Width: | Height: | Size: 489 KiB |
BIN
img/webapp.PNG
Normal file
After Width: | Height: | Size: 167 KiB |
@ -4,11 +4,11 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<script src="js/ui.js" type="module"></script>
|
||||
<script src="js/ui.js" type="text/javascript"></script>
|
||||
<title>Nel cielo di Fara</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="main-header bg1">
|
||||
<header class="main-header home">
|
||||
<div class="container">
|
||||
<div class="columns text-gray" id="nav">
|
||||
<div class="column col-lg-7 col-sm-2 col-md-2">
|
||||
|
29
js/fara.js
@ -1,16 +1,25 @@
|
||||
//use strict;
|
||||
|
||||
export {Farapp};
|
||||
export function slider(nextimage) {
|
||||
let header = document.querySelector('header');
|
||||
|
||||
const Farapp = {
|
||||
slider : /*** Fade in??*/ function (element, nextimage) {
|
||||
//opacity = 1;
|
||||
let images = [
|
||||
'img/fara_background.jpg',
|
||||
//'img/fara_bg_2.jpg',
|
||||
'img/fara_bg_3.jpg',
|
||||
'img/fara_bg_4.jpg',
|
||||
'img/fara_bg_5.jpg',
|
||||
//'img/fara_bg_6.jpg',
|
||||
'img/fara_bg_7.jpg',
|
||||
'img/fara_bg_8.jpg',
|
||||
'img/fara_bg_9.jpg',
|
||||
'img/fara_bg_10.png',
|
||||
'img/fara_bg_11.jpg',
|
||||
];
|
||||
|
||||
if(nextimage >= images.length) {
|
||||
nextimage = 0;
|
||||
}
|
||||
element.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(nextimage), 2000);
|
||||
}
|
68
js/ui.js
@ -1,35 +1,57 @@
|
||||
//use strict;
|
||||
import { Farapp } from "./fara.js";
|
||||
|
||||
//import * as Farapp from './fara.js';
|
||||
let homeRE = new RegExp(/(https?:\S+\/$|index.html$)/);
|
||||
|
||||
if (homeRE.test(window.location.href)) {
|
||||
window.addEventListener('load', () => {
|
||||
let nextimage = 0;
|
||||
let header = document.querySelector('header');
|
||||
slider();
|
||||
|
||||
function slider() {
|
||||
/*** Fade in??*/
|
||||
//opacity = 1;
|
||||
|
||||
let images = [
|
||||
'img/fara_background.jpg',
|
||||
//'img/fara_bg_2.jpg',
|
||||
'img/fara_bg_3.jpg',
|
||||
'img/fara_bg_4.jpg',
|
||||
'img/fara_bg_5.jpg',
|
||||
//'img/fara_bg_6.jpg',
|
||||
'img/fara_bg_7.jpg',
|
||||
'img/fara_bg_8.jpg',
|
||||
'img/fara_bg_9.jpg',
|
||||
'img/fara_bg_10.png',
|
||||
'img/fara_bg_11.jpg',
|
||||
];
|
||||
|
||||
if (nextimage >= images.length) {
|
||||
nextimage = 0;
|
||||
}
|
||||
header.setAttribute('style', 'background-image : url("' + images[nextimage++] + '");');
|
||||
setTimeout(slider, 2000);
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Apply active class to selected link...
|
||||
* @todo Inefficient!!
|
||||
*/
|
||||
window.addEventListener('load', () => {
|
||||
let navlinks = Array.from(document.querySelectorAll('#links a'));
|
||||
|
||||
navlinks.forEach(element => {
|
||||
let ref = element.href.substr(element.href.lastIndexOf('/'), element.href.length);
|
||||
|
||||
if (window.location.href.includes(ref) || element.href.includes('index.html')) {
|
||||
if (window.location.href.includes(ref)) {
|
||||
element.setAttribute('class', 'active');
|
||||
}
|
||||
if (homeRE.test(window.location.href)) {
|
||||
navlinks[0].setAttribute('class', 'active');
|
||||
}
|
||||
});
|
||||
|
||||
let images = [
|
||||
'img/fara_background.jpg',
|
||||
//'img/fara_bg_2.jpg',
|
||||
'img/fara_bg_3.jpg',
|
||||
'img/fara_bg_4.jpg',
|
||||
'img/fara_bg_5.jpg',
|
||||
//'img/fara_bg_6.jpg',
|
||||
'img/fara_bg_7.jpg',
|
||||
'img/fara_bg_8.jpg',
|
||||
'img/fara_bg_9.jpg',
|
||||
'img/fara_bg_10.png',
|
||||
'img/fara_bg_11.jpg',
|
||||
];
|
||||
let nextimage = 0;
|
||||
let header = document.querySelector('header');
|
||||
|
||||
Farapp.slider(header, nextimage);
|
||||
|
||||
});
|
||||
|
||||
window.addEventListener('scroll', event => {
|
||||
@ -37,14 +59,14 @@ window.addEventListener('scroll', event => {
|
||||
let links = document.querySelector('#links');
|
||||
|
||||
if (window.pageYOffset !== 0) {
|
||||
nav.classList.add('bg-white');
|
||||
nav.classList.add('bg-white', 'border');
|
||||
nav.classList.remove('text-gray');
|
||||
links.classList.add('nav-dark');
|
||||
links.classList.remove('nav-light');
|
||||
}
|
||||
else {
|
||||
nav.classList.add('text-gray');
|
||||
nav.classList.remove('bg-white');
|
||||
nav.classList.remove('bg-white', 'border');
|
||||
links.classList.add('nav-light');
|
||||
links.classList.remove('nav-dark');
|
||||
}
|
||||
|
177
progetto.html
Normal file
@ -0,0 +1,177 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<script src="js/ui.js" type="text/javascript"></script>
|
||||
<title>Il progetto | Nel cielo di Fara</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="main-header prog">
|
||||
<div class="container">
|
||||
<div class="columns text-gray" id="nav">
|
||||
<div class="column col-lg-7 col-sm-2 col-md-2">
|
||||
<img src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
|
||||
</div>
|
||||
<div class="column col-lg-5 col-sm-10 col-md-10 nav-light 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>
|
||||
</div>
|
||||
</div>
|
||||
<div id="title" class="text-center">
|
||||
<h1 class="arvo">Il progetto</h1>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section class="odd-stripe">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column col-lg-7 col-sm-12 of-hidden">
|
||||
<iframe src="https://player.vimeo.com/video/464788316"
|
||||
width="640" height="360" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="column col-lg-5 col-sm-12 pl-lg">
|
||||
<h2>In sintesi</h2>
|
||||
<p>
|
||||
L’obiettivo del progetto Innova Patrimonio è l’ideazione e creazione di un innovativo
|
||||
<strong>modello di narrazione del territorio e dei suoi beni</strong>,
|
||||
in particolare dei borghi antichi, che oggi vivono
|
||||
un processo di progressivo abbandono, da veicolare tramite varie soluzioni tecnologiche.
|
||||
</p>
|
||||
<p>
|
||||
La tradizionale impostazione descrittiva di itinerari e monumenti viene sostituita da
|
||||
una <strong>rappresentazione drammaturgica di storie, personaggi, modi di vivere e visioni</strong>
|
||||
che costituiscono i caratteri irriducibili e unici della vita profonda di un borgo.
|
||||
A quest’anima nascosta danno forma recitazioni attoriali, ricostruzioni virtuali,
|
||||
ambienti di <em lang="en">Mixed Reality</em>, interventi di scenografia urbana, <em lang="en">projection mapping</em>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-12 mt-2">
|
||||
<p class="mt-2"><strong>Teatro, cinema e computer grafica</strong> si fondono in questa inedita rappresentazione
|
||||
spettacolare alla quale la comunità prende parte e in essa si riconosce ma che allo
|
||||
stesso tempo diventa elemento di attrazione turistica. Gli output sono vari:
|
||||
ambienti interattivi per tecnologie mobile, sito web, installazioni <em>site specific</em>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column col-lg-7 col-sm-12">
|
||||
<h2>Valore aggiunto del progetto</h2>
|
||||
<ul>
|
||||
<li>Un nuovo modello narrativo</li>
|
||||
<li>Raccontare luoghi noti con occhi nuovi</li>
|
||||
<li>La tecnologia aiuta a rendere visibile lo straordinario</li>
|
||||
<li>Tecnologia ad alta usabilità</li>
|
||||
<li>Un prodotto scalabile e ripetibile</li>
|
||||
<li>Valorizzazione della "prossimità"</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column col-lg-5 col-sm-12" id="vagg">
|
||||
<img src="img/Prologo-Annunziazione_backst.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="odd-stripe">
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="col-12 mb-2">
|
||||
<h2>Output del progetto</h2>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-sm-12 of-hidden mt-2 pr-lg">
|
||||
<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 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 mt-2 pr-lg">
|
||||
<p class="text-right text-uppercase mb-0 robot-slab-b">Web app</p>
|
||||
<p class="text-right">
|
||||
Generata dal sito web con i contenuti pre-caricati
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-sm-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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="col-12">
|
||||
<h2>Partner del progetto</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns mt-lg">
|
||||
<div class="col-2"></div>
|
||||
<div class="col-3 pl-2 pr-2">
|
||||
<figure class="figure">
|
||||
<img class="of-hidden" src="img/logo_theorema.png" alt="THEOREMA">
|
||||
<figcaption class="figure-caption text-center opensans">THEOREMA</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-3 pl-2 pr-2">
|
||||
<a href="">
|
||||
<figure class="figure">
|
||||
<img class="of-hidden" src="img/logo_orpheo.png" alt="ORPHEO">
|
||||
<figcaption class="figure-caption text-center opensans">ORPHEO</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-3 pl-2 pr-2">
|
||||
<figure class="figure">
|
||||
<img class="of-hidden" src="img/logo_sillabe.jpg" alt="SILLABE">
|
||||
<figcaption class="figure-caption text-center opensans">SILLABE</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-1"></div>
|
||||
</div>
|
||||
<div class="columns mt-lg">
|
||||
<div class="col-3"></div>
|
||||
<div class="col-4">
|
||||
<a href="https://www.ispc.cnr.it" title="Vai al sito di CNR ISPC">
|
||||
<figure class="figure">
|
||||
<img class="of-hidden" src="img/ispc_ext_large.png" alt="CNR ISPC">
|
||||
<figcaption class="figure-caption text-center opensans">CNR ISPC</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<a href="https://www.teatropotlach.org" title="Vai al sito del Teatro Potlach">
|
||||
<figure class="figure">
|
||||
<img class="of-hidden" src="img/logo_potlach.jpg" alt="TEATRO POTLACH">
|
||||
<figcaption class="figure-caption text-center opensans">TEATRO POTLACH</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
|
||||
</div>
|
||||
</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>
|