<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fireworks Display</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.block {
position: relative;
width: 100px;
height: 100px;
background-color: orange;
margin: 10px;
display: inline-block;
cursor: pointer;
transition: transform 0.5s;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
color: white;
}
.hidden {
display: none;
}
@keyframes explode {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(5);
opacity: 0;
}
}
.firework {
position: absolute;
width: 10px;
height: 10px;
background-color: orange;
border-radius: 50%;
animation: explode 0.5s ease-in-out;
}
</style>
</head>
<body>
<div class="block" onclick="explode(this)">1</div>
<div class="block" onclick="explode(this)">2</div>
<div class="block" onclick="explode(this)">3</div>
<div class="block" onclick="explode(this)">4</div>
<script>
function explode(element) {
const fireworks = 50;
for (let i = 0; i < fireworks; i++) {
const firework = document.createElement("div");
firework.className = "firework";
document.body.appendChild(firework);
const startX = element.offsetLeft + element.clientWidth / 2;
const startY = element.offsetTop + element.clientHeight / 2;
const randomAngle = Math.random() * 360;
const randomDistance = Math.random() * 100 + 50;
const dx = randomDistance * Math.cos(randomAngle * (Math.PI / 180));
const dy = randomDistance * Math.sin(randomAngle * (Math.PI / 180));
firework.style.left = startX + "px";
firework.style.top = startY + "px";
firework.style.transform = `translate(${dx}px, ${dy}px)`;
const randomSize = Math.random() * 10 + 5;
firework.style.width = randomSize + "px";
firework.style.height = randomSize + "px";
const randomDelay = Math.random() * 0.5;
firework.style.animationDelay = randomDelay + "s";
setTimeout(() => {
firework.remove();
}, 500);
}
}
</script>
</body>
</html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>8bit - Interactive Website</title>
<style>
/* CSS styles for the website */
body {
background-color: #000;
color: #fff;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;