मैक्सी-डिजिटल द्वारा एक कोड

931 Maxi-Digital

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

26 December 2024

securefunction317 द्वारा एक कोड

16 December 2024

स्मार्टफंक्शन263 द्वारा एक कोड

13 June 2025

मेटेहन द्वारा एक कोड

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - Page Non Trouvée</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background: #1a1a2e;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Arial', sans-serif;
            overflow: hidden;
        }

.container {
            text-align: center;
            position: relative;
            z-index: 1;
        }

/* Bougie et Flamme */
        .candle-container {
            position: relative;
            width: 200px;
            height: 400px;
            margin: 0 auto 2rem;
        }

.candle {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 200px;
            background: #ffffff;
            border-radius: 2px;
            box-shadow: inset -5px 0 10px rgba(0,0,0,0.1);
        }

.candle::after {
            content: '';
            position: absolute;
            top: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 10px;
            background: #ff9966;
            border-radius: 50%;
        }

.flame {
            position: absolute;
            top: -80px;
            left: 50%;
            width: 25px;
            height: 80px;
            transform: translateX(-50%);
            background: linear-gradient(180deg, #ffaa00 0%, #ff4400 100%);
            border-radius: 50% 50% 35% 35%;
            animation: flicker 0.1s infinite alternate;
            filter: blur(1px);
        }

.glow {
            position: absolute;
            top: -100px;
            left: 50%;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle at 50% 50%, rgba(255,100,0,0.3) 0%, transparent 60%);
            transform: translateX(-50%);
            animation: glow-pulse 2s infinite;
        }

/* Animation Flamme */
        @keyframes flicker {
            0% { transform: translateX(-50%) scaleY(1) rotate(1deg); }
            100% { transform: translateX(-50%) scaleY(1.05) rotate(-1deg); }
        }

@keyframes glow-pulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 0.8; }
        }

/* Texte 404 */
        .error-code {
            font-size: 8rem;
            background: linear-gradient(45deg, #ff6b00, #ff0000, #ffaa00);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin: 1rem 0;
            text-shadow: 0 0 20px rgba(255,100,0,0.5);
            animation: text-flicker 0.1s infinite alternate;
        }

@keyframes text-flicker {
            0% { opacity: 0.95; }
            100% { opacity: 1; }
        }

/* Lien Accueil */
        .home-link {
            display: inline-block;
            margin-top: 2rem;
            padding: 1rem 2rem;
            background: rgba(255,255,255,0.1);
            color: #fff;
            text-decoration: none;
            border-radius: 30px;
            border: 1px solid rgba(255,255,255,0.2);
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
        }

.home-link:hover {
            background: rgba(255,255,255,0.2);
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(255,100,0,0.3);
        }

/* Effets supplémentaires */
        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

.particle {
            position: absolute;
            background: rgba(255,100,0,0.5);
            border-radius: 50%;
            animation: float linear infinite;
        }

@keyframes float {
            to { transform: translateY(-100vh) rotate(360deg); }
        }

/* Génération de particules aléatoires */
        function createParticles() {
            const particles = 50;
            const container = document.createElement('div');
            container.className = 'particles';
            
            for(let i = 0; i < particles; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.width = particle.style.height = Math.random() * 3 + 'px';
                particle.style.animationDuration = Math.random() * 3 + 2 + 's';
                container.appendChild(particle);
            }
            
            document.body.appendChild(container);
        }

createParticles();
    </style>
</head>
<body>
    <div class="container">
        <div class="candle-container">
            <div class="glow"></div>
            <div class="flame"></div>
            <div class="candle"></div>
        </div>
        <h1 class="error-code">404</h1>
        <p style="color: rgba(255,255,255,0.8); margin-bottom: 1rem;">La page que vous cherchez s'est évaporée...</p>
        <a href="/" class="home-link">Retour à l'accueil</a>
    </div>

// Effet de clignotement aléatoire
        setInterval(() => {
            flame.style.height = `${80 + Math.random() * 5}px`;
        }, 200);
    </script>
</body>
</html>

मैक्सी-डिजिटल द्वारा एक कोड

अनुशंसित

securefunction317 द्वारा एक कोड

स्मार्टफंक्शन263 द्वारा एक कोड

मेटेहन द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

securefunction317 द्वारा एक कोड

स्मार्टफंक्शन263 द्वारा एक कोड

मेटेहन द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS