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

अनुशंसित

6 June 2025

<!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>

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

अनुशंसित

पाठ का एक कोड

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

HTML कोड प्लेसहोल्डर टिप्पणी

HTML

CSS

JS

अनुशंसित

पाठ का एक कोड

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

HTML कोड प्लेसहोल्डर टिप्पणी

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS