website/croco.html
2025-10-07 21:27:09 +02:00

69 lines
1.6 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>EasterEgg 4</title>
<meta name="view" content="width=device-width, initial-scale=1">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
flex-direction: column;
height: 100vh;
background-color: #00b000;
/* background-image: url("EasterEggs/images/crocodile.jpg"); */
}
.crocoloop {
color: #00e000;
transform: translate(0%, 250%) scale(5);
font-family: cursive;
}
iframe {
transform: translate(-50%, -150%) scale(3);
position: absolute;
}
.link {
text-decoration: none;
color: #00e000;
}
</style>
</head>
<body>
<div>
<iframe src="https://www.youtube.com/embed/vnxaqqLjJAA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="crocoloop">
<p>
<a class="link" href="https://perso.eleves.ens-rennes.fr/people/jules.timmerman/croco.html"><=&#x1F40A</a>
<a class="link" href="#" onclick="changeBackground()">Crocoloop</a>
<a class="link" href="https://perso.eleves.ens-rennes.fr/people/jean.vereecke/croco.html">&#x1F40A=></a>
</p>
</div>
<script>
var showCrocodile = false;
function changeBackground() {
showCrocodile = !showCrocodile;
if (showCrocodile) {
document.body.style.backgroundImage = 'url("EasterEggs/images/crocodile.jpg")';
document.body.style.backgroundColor = 'none';
document.title = 'EasterEgg 5';
}
else {
document.body.style.backgroundImage = 'none';
document.body.style.backgroundColor = '#00b000';
document.title = 'EasterEgg 4';
}
}
</script>
</body>
</html>