Un code de Maxi-Digital

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

5 June 2025

Formulaire de connexion simple

20 December 2024

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

Un code de Maxi-Digital

Recommandé

Un code par khachamohammed620

Formulaire de connexion simple

Un code par staticclass394

HTML

CSS

JS

Recommandé

Un code par khachamohammed620

Formulaire de connexion simple

Un code par staticclass394

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS