122 lines
4.3 KiB
HTML
122 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html" charset="utf-8" />
|
|
<title>Avvenimenti - Crociate: Fede e Battaglia</title>
|
|
<link id="favicon" rel="icon" href="/favicon2.png" />
|
|
<link rel="stylesheet" href="/style.css" />
|
|
<link rel="stylesheet" href="../style.css" />
|
|
<script src="/script.js"></script>
|
|
<script src="../script.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="spade-animazione">
|
|
<img src="../spade_incrociate.png" alt="Spade incrociate">
|
|
</div>
|
|
<div id="corpo">
|
|
<svg>
|
|
<filter id="invecchiamento">
|
|
<feTurbulence
|
|
x="0"
|
|
y="0"
|
|
baseFrequency="0.02"
|
|
numOctaves="5"
|
|
seed="1"
|
|
></feTurbulence>
|
|
<feDisplacementMap in="SourceGraphic" scale="20" />
|
|
</filter>
|
|
</svg>
|
|
</div>
|
|
|
|
<div id="contenuto">
|
|
<h1 class="titolo"><center>Avvenimenti</center></h1>
|
|
|
|
<div class="navbar">
|
|
<header>
|
|
<center>
|
|
<nav>
|
|
<ul>
|
|
<li>
|
|
<a href="/" class="nav-item" tabindex="0">Home</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="nav-item" tabindex="0">Gruppo 1</a>
|
|
<ul class="dropdown">
|
|
<li><a href="presentazione.html">Presentazione</a></li>
|
|
<li><a href="presentazione.html">Presentazione</a></li>
|
|
<li><a href="presentazione.html">Presentazione</a></li>
|
|
<li><a href="presentazione.html">Presentazione</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="nav-item">Gruppo 2</a>
|
|
<ul class="dropdown">
|
|
<li><a href="/Gruppo 2/avvenimenti/">Avvenimenti</a></li>
|
|
<li><a href="/Gruppo 2/personaggi/">Personaggi</a></li>
|
|
<li><a href="/Gruppo 2/leggende/">Leggende</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="nav-item">Gruppo 3</a>
|
|
<ul class="dropdown">
|
|
<li><a href="index.html">Le notizie</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="nav-item">Gruppo 4</a>
|
|
<ul class="dropdown">
|
|
<li><a href="orientamento.html">Orientamento</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="nav-item">Gruppo 5</a>
|
|
<ul class="dropdown">
|
|
<li><a href="/Gruppo 5/albigesi/">Crociata degli Albigesi</a></li>
|
|
<li><a href="/Gruppo 5/pezzenti/">Crociata dei Pezzenti</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="nav-item" tabindex="0">Gruppo 6</a>
|
|
<ul class="dropdown">
|
|
<li><a href="presentazione.html">Presentazione</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="nav-item" tabindex="0">Gruppo 7</a>
|
|
<ul class="dropdown">
|
|
<li><a href="presentazione.html">Presentazione</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</center>
|
|
</header>
|
|
</div>
|
|
<br />
|
|
<p>Qui troverete le leggende e i miti più famosi legati alle Crociate, come la leggenda del Graal e la storia di Saladino e Riccardo Cuor di Leone.</p>
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<center>Classe 3I2</center>
|
|
</div>
|
|
<script>
|
|
window.addEventListener('load', () => {
|
|
const spadeAnimazione = document.getElementById('spade-animazione');
|
|
const corpo = document.getElementById('corpo');
|
|
|
|
spadeAnimazione.style.display = 'flex';
|
|
spadeAnimazione.style.opacity = 1;
|
|
spadeAnimazione.classList.remove('chiusura');
|
|
spadeAnimazione.classList.add('apertura');
|
|
|
|
setTimeout(() => {
|
|
spadeAnimazione.style.opacity = 0;
|
|
setTimeout(() => {
|
|
spadeAnimazione.style.display = 'none';
|
|
corpo.style.display = 'block';
|
|
}, 500);
|
|
}, 1000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |