fdciabdul · May 29, 2024 06:32
diff --git a/index.php b/index.php
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #000;
            overflow: hidden;
        }
        #image-container {
            position: relative;
            width: 500px;
            height: 500px;
        }
        #image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        @media (max-width: 600px) {
            #image-container {
                width: 80%;
                height: auto;
            }
        }
        .particle {
            position: absolute;
            background: rgba(255, 69, 0, 0.8);
            width: 5px;
            height: 5px;
            border-radius: 50%;
            animation: particle-animation 1s linear infinite;
        }
        @keyframes particle-animation {
            0% {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
            100% {
                transform: translateY(-100vh) scale(0);
                opacity: 0;
            }
        }
    </style>
 </head>
 <body>
    <div id="image-container">
        <img src="https://awsimages.detik.net.id/community/media/visual/2024/05/29/kumpulan-gambar-all-eyes-on-rafah-1.jpeg?w=600&q=90" alt="Centered Image">
    </div>

    <script>
        function createParticle() {
            const particle = document.createElement('div');
            particle.classList.add('particle');
            particle.style.left = Math.random() * window.innerWidth + 'px';
            document.body.appendChild(particle);
            setTimeout(() => {
                particle.remove();
            }, 1000);
        }

        setInterval(createParticle, 100);
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Landing Page</title>
	<style>
	body, html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #000;
	overflow: hidden;
	}
	#image-container {
	position: relative;
	width: 500px;
	height: 500px;
	}
	#image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	}
	@media (max-width: 600px) {
	#image-container {
	width: 80%;
	height: auto;
	}
	}
	.particle {
	position: absolute;
	background: rgba(255, 69, 0, 0.8);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	animation: particle-animation 1s linear infinite;
	}
	@keyframes particle-animation {
	0% {
	transform: translateY(0) scale(1);
	opacity: 1;
	}
	100% {
	transform: translateY(-100vh) scale(0);
	opacity: 0;
	}
	}
	</style>
	</head>
	<body>
	<div id="image-container">
	<img src="https://awsimages.detik.net.id/community/media/visual/2024/05/29/kumpulan-gambar-all-eyes-on-rafah-1.jpeg?w=600&q=90" alt="Centered Image">
	</div>

	<script>
	function createParticle() {
	const particle = document.createElement('div');
	particle.classList.add('particle');
	particle.style.left = Math.random() * window.innerWidth + 'px';
	document.body.appendChild(particle);
	setTimeout(() => {
	particle.remove();
	}, 1000);
	}

	setInterval(createParticle, 100);
	</script>
	</body>
	</html>
No results found