Un code de Maxi-Digital

298 Maxi-Digital

Ouvrir dans l'éditeur Publiez votre code Precisa de um site?

Recommandé

28 May 2025

Formulaire de connexion futuriste

14 January 2025

Exemple de page Web de portfolio

18 February 2025

CodePen Accueil Saint-Valentin

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é

Formulaire de connexion futuriste

Exemple de page Web de portfolio

CodePen Accueil Saint-Valentin

HTML

CSS

JS

Recommandé

Formulaire de connexion futuriste

Exemple de page Web de portfolio

CodePen Accueil Saint-Valentin

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS