Verde/Sito_di_storia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Integrazione testo e prima pagina completa gruppo 2

Browse Source
This commit is contained in:
La Programmatrice Verde 2025-03-10 16:02:31 +01:00
parent cd43edea94
commit e40c90749d
13 changed files with 525 additions and 330 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
Gruppo 2/Goffredo di Buglione/griglia.css Normal file
View File

@ -0,0 +1,53 @@
.griglia {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(7, 0.5fr);
grid-column-gap: 50px;
grid-row-gap: 50px;
}
.intro {
margin-top: 100px;
grid-area: 1 / 1 / 2 / 4;
}
.content1 {
grid-area: 2 / 1 / 3 / 3;
text-align: left;
}
.pic1 {
margin-top: 50px;
grid-area: 2 / 3 / 3 / 4;
}
.content2 {
grid-area: 3 / 2 / 4 / 4;
text-align: right;
}
.pic2 {
margin-top: 200px;
grid-area: 3 / 1 / 4 / 2;
}
.content3 {
grid-area: 4 / 1 / 5 / 4;
}
.content4 {
grid-area: 5 / 1 / 6 / 4;
}
.content5 {
grid-area: 6 / 1 / 7 / 3;
text-align: left;
}
.pic3 {
grid-area: 6 / 3 / 7 / 4;
}
.finale {
grid-area: 7 / 1 / 8 / 4;
}

207
Gruppo 2/Goffredo di Buglione/index.html Normal file
View File

@ -0,0 +1,207 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8" />
<title>Goffredo di Buglione</title>
<link id="favicon" rel="icon" href="/favicon2.png" />
<link rel="stylesheet" href="/style.css" />
<link rel="stylesheet" href="../style.css" />
<link rel="stylesheet" href="griglia.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>Goffredo di Buglione</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/Goffredo di Buglione/"
>Goffredo di Buglione</a
>
</li>
<li>
<a href="/Gruppo 2/Papa Urbano II/">Papa Urbano II</a>
</li>
<li>
<a href="/Gruppo 2/Prima Crociata/">Prima Crociata</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 />
<div class="griglia">
<div class="intro">
Godefroy de Buillon, conosciuto come Goffredo di Buglione, viene
ricordato come il condottiero che portò a termine la prima crociata.
Lui nacque a Baisy-Thy, in Belgio, intorno al 1060. Anche se non era
nativo di Bouillon, ottenne questo titolo a seguito del ricevimento di
alcune terre belghe da parte dell’imperatore Enrico IV.
</div>
<div class="content1">
Quando Papa Urbano II riunì il concilio di Clermont e incitò la
cristianità a combattere gli infedeli, dando quindi origine alla prima
crociata, si stima che Goffredo avesse intorno ai 35 anni. Per
rispondere a questa chiamata decise di radunare un mega esercito: le
stime più contenute parlano di 12 mila uomini, mentre le più esagerate
parlano addirittura di un totale di 80 mila uomini. Partì, insieme ai
fratelli Baldovino ed Eustachio, nel 1096 alla volta della Città
Santa. Rispetto al contingente principale, decisero di prendere una
deviazione: seguirono il Danubio per un tratto e poi puntarono
direttamente su Costantinopoli, scegliendo di passare per i Balcani.
La scelta però si rivelò non delle migliori, perché i 3 ebbero dei
problemi.
</div>
<img class="pic1" src="pics/Concilio.jpg" width="600">
<div class="content2">
Chiaramente il re d’Ungheria non era molto contento di far
attraversare ad un esercito che non fosse il suo il proprio
territorio. Quindi domandò che gli fossero offerti in ostaggio
Baldovino con moglie e famiglia. E Goffredo glieli concesse senza fare
troppi problemi, tanta era la sua voglia di raggiungere la meta. Poi
l’armata arrivò in territorio bizantino, e qui iniziarono a
saccheggiare i territori dove passavano, cosa che li metteva in tutte
tranne che in buona luce agli occhi dell’imperatore bizantino Alessio.
Quando il gruppo giunse alle porte di Costantinopoli l’imperatore
pretese da Goffredo un giuramento di fedeltà. Goffredo si rifiutò, e
per risposta l’imperatore decise di tagliare i rifornimenti ai
crociati. Per risolvere questa situazione ci pensò Baldovino, che nel
frattempo era stato rilasciato dagli ungheresi e aveva raggiunto il
gruppo, facendo rapine in tutta la zona limitrofa. Ci volle più di un
anno, dal Natale del 1096 fino alla Pasqua del 1097, per convincere
Goffredo a giurare fedeltà all’imperatore, ma nel 1097 alla fine
cedette e la fedeltà gliela giurò.
</div>
<img class="pic2" src="pics/accampamento.jpg" width="600">
<div class="content3">
Dopodiché arrivò anche l’altro contingente, che era sbarcato da
Brindisi, e la situazione cambiò radicalmente. Il loro capo, Boemondo
d’Altavilla, giurò subito fedeltà all’imperatore e gli promise di
consegnare all’impero tutti i territori che avrebbero acquisito
durante le battaglie. Dopodiché passarono il Bosforo e iniziarono a
combattere contro i turchi, i nemici per cui erano partiti dalle loro
terre ormai da un anno. Lì si tenne la battaglia di Nicea, dove
Goffredo non ebbe alcun ruolo rilevante, ma si limitò a presidiare un
tratto di mura.
</div>
<div class="content4">
Negli stessi giorni della battaglia di Nicea però, viene raccontato da
Alberto di Aquisgrana un aneddoto molto interessante su Goffredo.
C’era un pellegrino che si stava dedicando alle salmerie, quando
all’improvviso arriva un orso che vuole attaccarlo. Ma nei paraggi
c’era Goffredo, che senza esitazione sguainò la spada e fece fuggire
l’animale nei boschi lì vicino. Non è finita qui: Goffredo lo inseguì
fino a quando questo non si fermò, abbattendo il cavallo del duca e
eriggendosi sulle zampe posteriori prese a unghiate Goffredo. Anche se
ferito, Goffredo “si dispiaceva di morire per mano di una bestia
sanguinaria” e trafisse l’orso nel fianco destro.
</div>
<div class="content5">
Poi da lì si diressero ad Antiochia, dove Goffredo combatté sul campo,
ma dirigendo solo 3 schiere di fanti su 7. Poi da lì proseguirono fino
ad arrivare a Gerusalemme. Tentarono un primo attacco, ma fallì.
Invece il secondo tentativo ebbe più successo, anche grazie all’aiuto
delle navi genovesi, che vennero smontate, trasportate a pezzi fino a
Gerusalemme e rimontate come torri mobili per poter scavalcare le mura
difensive della città. Una delle torri venne affidata a Goffredo, e fu
quella che venne effettivamente usata per scavalcare le mura, visto
che l’altra che era stata costruita finì bruciata.
</div>
<img class="pic3" src="pics/torre d'assedio.jpg" width="600">
<div class="finale">
Dopo che tutti gli “infedeli” della città vennero ammazzati molto
cruentemente, i crociati si posero il problema di trovare un re per
Gerusalemme e tutti i territori conquistati. Tra tutti i condottieri
più idonei, ce n’erano solo due che erano disponibili per prendere il
titolo, visto che gli altri ne avevano preso un altro prima. Uno di
questi era Goffredo. L’altro contendente, quando gli fu fatta la
proposta, si rifiutò di prendere il titolo, quindi questo venne
assegnato a Goffredo, solo che lui preferì farsi chiamare “difensore
del Santo Sepolcro”, in latino medioevale advocatus. Il suo regno durò
un anno, dopodiché morì.
</div>
</div>
<br />
<br />
<br />
<center>Classe 3I2</center>
</div>
</body>
</html>

BIN
Gruppo 2/Goffredo di Buglione/pics/Concilio.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 215 KiB

BIN
Gruppo 2/Goffredo di Buglione/pics/accampamento.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 655 KiB

BIN
Gruppo 2/Goffredo di Buglione/pics/torre d'assedio.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

27
Gruppo 2/personaggi/index.html → Gruppo 2/Papa Urbano II/index.html
View File

@ -51,9 +51,9 @@
<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>
<li><a href="/Gruppo 2/Goffredo di Buglione/">Goffredo di Buglione</a></li>
<li><a href="/Gruppo 2/Papa Urbano II/">Papa Urbano II</a></li>
<li><a href="/Gruppo 2/Prima Crociata/">Prima Crociata</a></li>
</ul>
</li>
<li>
@ -93,30 +93,11 @@
</header>
</div>
<br />
<p>Qui troverete informazioni sui principali personaggi delle Crociate, come Goffredo di Buglione, Riccardo Cuor di Leone e Saladino.</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>

204
Gruppo 2/Prima Crociata/index.html Normal file
View File

@ -0,0 +1,204 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8" />
<title>Prima Crociata</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>Prima Crociata</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/Goffredo di Buglione/"
>Goffredo di Buglione</a
>
</li>
<li>
<a href="/Gruppo 2/Papa Urbano II/">Papa Urbano II</a>
</li>
<li>
<a href="/Gruppo 2/Prima Crociata/">Prima Crociata</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 />
La prima crociata (chiamata anche dei Principi) è stata una spedizione
militare cristiana invocata da Papa Urbano II, durata dal 1096 al 1099,
che ebbe come obiettivo quella di riconquistare dai turchi selgiuchidi, i
luoghi sacri del Cristianesimo, tra cui Gerusalemme.
<br />
<br />
A metà dell’XI secolo
i turchi Selgiuchidi cominciarono ad operare una serie di conquiste ai
danni del califfato di Baghdad, arrivando a conquistare anche i territori
palestinesi.
<br />
Il che non sarebbe un problema, se non che i Turchi avevano
un comportamento completamente diverso rispetto a quello arabo nei
confronti dei cristiani. I primi erano tolleranti (non nel senso moderno
del termine). Chiedevano comunque una tassa per il semplice fatto di
esistere sulle loro terre e di non essere di fede islamica, ma se la si
pagava, si otteneva immunità da discriminazioni e attacchi fisici da parte
di musulmani. Inoltre, non era vietata la professione della propria
religione alternativa all’Islam, finché si effettuava l’atto di
sottomissione al califfo tramite il pagamento di questa imposta. Invece,
quando quelle terre passarono sotto al dominio turco, questo principio non
era più valido. Ai turchi non importava nulla degli edifici sacri delle
altre religioni. infatti nelle battaglie di conquista li distruggevano
come se fossero un qualsiasi altro edificio. Inoltre non garantivano
alcuna immunità a persone di fede diversa da quella islamica, anzi. A
queste veniva presentata una scelta: o la conversione alla fede
“corretta”, ovvero l’Islam, o morire. Si dice che molti cristiani decisero
di convertirsi all’slam per evitare di morire. Rispetto ai paleocristiani,
vissuti nell’antica Roma, quelli medioevali pare che siano molto più
egoisti e prioritizzino la loro incolumità rispetto alla fede e al
martirio.
<br />
<br />
Preoccupato per la situazione, Papa Urbano II indice il Concilio
di Clermont (17-25 novembre 1095), invitando l‘intera cristianità a
cessare le lotte intestine e a concentrare gli sforzi nel combattere gli
infedeli invasori dei luoghi sacri cristiani, “perché Dio lo vuole”. La
chiamata riunì le forze da tutta Europa, in particolar modo dal regno
franco, tanto che le fonti arabe faranno riferimento agli europei come
“franchi”, senza far alcuna distinzione della loro terra di provenienza,
usanze o lingua, come i cristiani europei non facevano alcuna distinzione
tra i musulmani prima e gli infedeli abitanti di Gerusalemme poi,
ammazzandoli a vista.
<br />
<br />
Le fonti parlano di numeri completamente diversi tra
loro, con fonti che stimano la presenza di 200 mila crociati, altre che ne
stimano 20 mila. Non si ha alcuna certezza su quanti fossero i crociati,
né guardando le fonti cristiane, che anzi tendevano a inflazionare i
numeri dei soldati per dare un’idea di maggiore grandiosità dell'opera, né
le fonti arabe, che spesso si contraddicono sul numero di invasori
occidentali.
<br />
<br />
Le forze crociate si erano date appuntamento presso la corte
di Costantinopoli: lì l’imperatore fece giurare i crociati che non
avrebbero devastato i territori, che avrebbero riconsegnato le zone
conquistate dai turchi all’Impero bizantino, facendo solenne promessa di
fedeltà all’imperatore. Cosa che tanto non importò a nessuno dei crociati,
tanto che fondarono dei regni autonomi alla periferia dell’impero
bizantino.
<br />
<br />
ALa prima mossa dei crociati fu l’assedio della città di Nicea,
nel giugno del 1097, che si concluse con una vittoria. Poi i crociati
attraversarono gradualmente la penisola dell’Anatolia.
<br />
<br />
Dopo essere scesi verso sud est, nella Siria settentrionale, i crociati
iniziarono l’assedio di Antiochia (1097-1098).
<br />
<br />
Dopodiché, i crociati proseguirono verso Gerusalemme, che venne raggiunta
nel giugno del 1099: grazie al fondamentale supporto della flotta della
Repubblica di Genova. La cosa interessante però è che la flotta genovese
in realtà non fornì supporto militare via mare ai crociati (Gerusalemme
è molto distante dalla costa), ma fornì legname tramite le navi. I crociati
infatti presero le navi genovesi e le trasportarono a pezzi dalla costa fino
alle mura della città, dove le riassemblarono sotto forma di torri mobili da
usare durante l’assedio. Una venne data a Goffredo di Buglione e
l’altra a un altro condottiero, anche se lui preferì assistere al massacro
piuttosto che parteciparvi. I crociati presero d’assalto la città dal 7 giugno
al 15 luglio del 1099, massacrando senza pietà i difensori: gli ebrei vennero
bruciati nella loro sinagoga, mentre i musulmani vennero ammazzati a destra
e a manca come se fosse un macello.
<br />
<br />
Un contrattacco da parte dei Turchi venne respinto nello stesso anno,
durante la battaglia di Ascalona, ponendo fine alla prima crociata.
<br />
<br />
<br />
<center>Classe 3I2</center>
</div>
</body>
</html>

122
Gruppo 2/avvenimenti/index.html
View File

@ -1,122 +0,0 @@
<!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>

123
Gruppo 2/leggende/index.html
View File

@ -1,123 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8" />
<title>Leggende - 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>Leggende</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>

101
Gruppo 2/style.css
View File

@ -1,57 +1,52 @@
/* Animazioni */
.titolo {
animation: fadeIn 2s ease-in-out;
}
@keyframes fadeIn {
0% { opacity: 0; will-change: opacity;}
100% { opacity: 1; will-change: opacity;}
}
#spade-animazione {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.5s ease-in-out; /* Durata ridotta a 0.5 secondi */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.5s ease-in-out;
/* Durata ridotta a 0.5 secondi */
}
#spade-animazione img {
width: auto;
max-width: 80%;
height: auto;
position: static;
transform: none;
transition: opacity 0.5s ease-in-out;
/* Durata ridotta a 0.5 secondi */
}
/* Animazione di apertura */
#spade-animazione.apertura img {
animation: spada-apertura 0.5s ease-in-out forwards;
/* Durata ridotta a 0.5 secondi */
}
@keyframes spada-apertura {
to {
opacity: 0;
}
#spade-animazione img {
width: auto;
max-width: 80%;
height: auto;
position: static;
transform: none;
transition: opacity 0.5s ease-in-out; /* Durata ridotta a 0.5 secondi */
}
/* Animazione di chiusura */
#spade-animazione.chiusura img {
animation: spada-chiusura 0.5s ease-in-out forwards;
/* Durata ridotta a 0.5 secondi */
}
@keyframes spada-chiusura {
from {
opacity: 0;
}
/* Animazione di apertura */
#spade-animazione.apertura img {
animation: spada-apertura 0.5s ease-in-out forwards; /* Durata ridotta a 0.5 secondi */
}
@keyframes spada-apertura {
to {
opacity: 0;
}
}
/* Animazione di chiusura */
#spade-animazione.chiusura img {
animation: spada-chiusura 0.5s ease-in-out forwards; /* Durata ridotta a 0.5 secondi */
}
@keyframes spada-chiusura {
from {
opacity: 0;
}
to {
opacity: 1;
}
to {
opacity: 1;
}
}

6
Gruppo 5/albigesi/index.html
View File

@ -46,9 +46,9 @@
<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>
<li><a href="/Gruppo 2/Goffredo di Buglione/">Goffredo di Buglione</a></li>
<li><a href="/Gruppo 2/Papa Urbano II/">Papa Urbano II</a></li>
<li><a href="/Gruppo 2/Prima Crociata/">Prima Crociata</a></li>
</ul>
</li>
<li>

6
Gruppo 5/pezzenti/index.html
View File

@ -46,9 +46,9 @@
<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>
<li><a href="/Gruppo 2/Goffredo di Buglione/">Goffredo di Buglione</a></li>
<li><a href="/Gruppo 2/Papa Urbano II/">Papa Urbano II</a></li>
<li><a href="/Gruppo 2/Prima Crociata/">Prima Crociata</a></li>
</ul>
</li>
<li>

6
index.html
View File

@ -47,9 +47,9 @@
<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>
<li><a href="/Gruppo 2/Goffredo di Buglione/">Goffredo di Buglione</a></li>
<li><a href="/Gruppo 2/Papa Urbano II/">Papa Urbano II</a></li>
<li><a href="/Gruppo 2/Prima Crociata/">Prima Crociata</a></li>
</ul>
</li>
<li>