Merge a suon di bestemmie del lavoro del gruppo 2
This commit is contained in:
La Programmatrice Verde
122
Gruppo 2/avvenimenti/index.html
Normal file
122
Gruppo 2/avvenimenti/index.html
Normal file
@@ -0,0 +1,122 @@
|
||||
<!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
Normal file
123
Gruppo 2/leggende/index.html
Normal file
@@ -0,0 +1,123 @@
|
||||
<!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>
|
||||
122
Gruppo 2/personaggi/index.html
Normal file
122
Gruppo 2/personaggi/index.html
Normal file
@@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html" charset="utf-8" />
|
||||
<title>Personaggi - 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>Personaggi</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 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>
|
||||
19
Gruppo 2/script.js
Normal file
19
Gruppo 2/script.js
Normal file
@@ -0,0 +1,19 @@
|
||||
window.addEventListener('load', () => {
|
||||
const spadeAnimazione = document.getElementById('spade-animazione');
|
||||
const corpo = document.getElementById('corpo');
|
||||
const contenuto = document.getElementById('contenuto');
|
||||
|
||||
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';
|
||||
contenuto.style.willChange = 'opacity';
|
||||
}, 500);
|
||||
}, 1000);
|
||||
});
|
||||
BIN
Gruppo 2/spade_incrociate.png
Normal file
BIN
Gruppo 2/spade_incrociate.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
57
Gruppo 2/style.css
Normal file
57
Gruppo 2/style.css
Normal file
@@ -0,0 +1,57 @@
|
||||
/* 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 */
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user