Un code de Maxi-Digital

874 Maxi-Digital

Ouvrir dans l'éditeur Publiez votre code

Recommandé

10 September 2024

PAGE DE CHARGEMENT DE NETFLIX

1 June 2025

Site Web avec effet de curseur d'image d'accueil

1 December 2024

Effet de survol du bouton d'action d'appel

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>

Un code de Maxi-Digital

Recommandé

PAGE DE CHARGEMENT DE NETFLIX

Site Web avec effet de curseur d'image d'accueil

Effet de survol du bouton d'action d'appel

HTML

CSS

JS

Recommandé

PAGE DE CHARGEMENT DE NETFLIX

Site Web avec effet de curseur d'image d'accueil

Effet de survol du bouton d'action d'appel

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS