95 lines
3.8 KiB
HTML
95 lines
3.8 KiB
HTML
<!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="" type="module"></script>
|
|
<title>Nel cielo di Fara</title>
|
|
</head>
|
|
<body>
|
|
<header class="main-header bg1">
|
|
<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">Nel cielo di Fara</h1>
|
|
<button>Entra</button>
|
|
</div>
|
|
</header>
|
|
<main></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>
|
|
<!-- MOOOVE AWAAAAAYY -->
|
|
<script type="text/javascript">
|
|
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')) {
|
|
element.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',
|
|
];
|
|
let nextimage = 0;
|
|
let header = document.querySelector('header');
|
|
|
|
slider();
|
|
/**
|
|
* Fade in??
|
|
*/
|
|
function slider () {
|
|
opacity = 1;
|
|
|
|
if(nextimage >= images.length) {
|
|
nextimage = 0;
|
|
}
|
|
header.style =
|
|
'background-image : url("' +images[nextimage++] + '");';
|
|
setTimeout(slider, 3000);
|
|
}
|
|
});
|
|
|
|
window.addEventListener('scroll', event => {
|
|
let nav = document.querySelector('#nav');
|
|
let links = document.querySelector('#links');
|
|
|
|
if (window.pageYOffset !== 0) {
|
|
nav.classList.add('bg-white');
|
|
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');
|
|
links.classList.add('nav-light');
|
|
links.classList.remove('nav-dark');
|
|
}
|
|
});
|
|
</script>
|
|
</html> |