Page 404 Créative - Effets Visuels

Bootstrap 5 404 Creative Animation Particles Error Page
Page 404 avec effets de particules, typographie moderne et suggestions personnalisées. Parfaite pour les sites créatifs et portfolios.
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <meta name="copyright" content="MEZGANI Said" />
    <meta name="author" content="AngularForAll" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Snippet 404 Bootstrap 5 20260421107 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: linear-gradient(135deg, #0a0a2a 0%, #1a1a3a 50%, #0d0d2b 100%);
            min-height: 100vh;
            overflow-x: hidden;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        /* Étoiles scintillantes */
        .stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }
        
        .star {
            position: absolute;
            background: white;
            border-radius: 50%;
            opacity: 0;
            animation: twinkle 3s infinite;
        }
        
        @keyframes twinkle {
            0%, 100% { opacity: 0; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.2); }
        }
        
        /* Conteneur principal */
        .space-container {
            position: relative;
            z-index: 1;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
        }
        
        .card-space {
            background: rgba(255,255,255,0.05);
            backdrop-filter: blur(10px);
            border-radius: 30px;
            padding: 40px;
            text-align: center;
            border: 1px solid rgba(255,255,255,0.1);
            box-shadow: 0 20px 50px rgba(0,0,0,0.3);
            max-width: 600px;
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        /* SVG Planète */
        .planet-container {
            margin-bottom: 30px;
            position: relative;
            display: inline-block;
        }
        
        .planet-svg {
            width: 200px;
            height: 200px;
            filter: drop-shadow(0 0 20px rgba(255,100,100,0.5));
            animation: rotate 20s linear infinite;
        }
        
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        /* Anneau autour de la planète */
        .ring {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 240px;
            height: 240px;
            border: 3px solid rgba(255,215,0,0.3);
            border-radius: 50%;
            transform: translate(-50%, -50%) rotateX(70deg);
            animation: ringRotate 10s linear infinite;
        }
        
        @keyframes ringRotate {
            from { transform: translate(-50%, -50%) rotateX(70deg) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotateX(70deg) rotate(360deg); }
        }
        
        /* Code 404 */
        .error-code {
            font-size: 120px;
            font-weight: 800;
            background: linear-gradient(135deg, #ff6b6b, #ffd700, #4ecdc4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 0 30px rgba(255,107,107,0.3);
            margin-bottom: 20px;
            animation: glow 2s ease-in-out infinite;
        }
        
        @keyframes glow {
            0%, 100% { text-shadow: 0 0 20px rgba(255,107,107,0.3); }
            50% { text-shadow: 0 0 40px rgba(255,107,107,0.6); }
        }
        
        .error-title {
            color: white;
            font-size: 28px;
            margin-bottom: 15px;
        }
        
        .error-text {
            color: rgba(255,255,255,0.7);
            margin-bottom: 30px;
            font-size: 16px;
        }
        
        /* Boutons animés */
        .btn-space {
            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
            border: none;
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 600;
            color: white;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            margin: 5px;
        }
        
        .btn-space::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }
        
        .btn-space:hover::before {
            width: 300px;
            height: 300px;
        }
        
        .btn-space:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(238,90,36,0.4);
        }
        
        .btn-outline-space {
            background: transparent;
            border: 2px solid #ff6b6b;
            color: #ff6b6b;
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s ease;
            margin: 5px;
        }
        
        .btn-outline-space:hover {
            background: #ff6b6b;
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(255,107,107,0.3);
        }
        
        /* Vaisseau spatial */
        .spaceship {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            cursor: pointer;
            animation: fly 8s linear infinite;
            z-index: 2;
        }
        
        @keyframes fly {
            0% { transform: translateX(0) translateY(0) rotate(0deg); }
            25% { transform: translateX(-20px) translateY(-10px) rotate(-5deg); }
            50% { transform: translateX(0) translateY(-20px) rotate(0deg); }
            75% { transform: translateX(20px) translateY(-10px) rotate(5deg); }
            100% { transform: translateX(0) translateY(0) rotate(0deg); }
        }
        
        /* Météorites */
        .meteor {
            position: fixed;
            width: 2px;
            height: 2px;
            background: linear-gradient(90deg, white, transparent);
            opacity: 0;
            animation: meteor 3s linear infinite;
            z-index: 0;
        }
        
        @keyframes meteor {
            0% {
                transform: translateX(0) translateY(0);
                opacity: 1;
            }
            100% {
                transform: translateX(-200px) translateY(200px);
                opacity: 0;
            }
        }
        
        /* Astronaute flottant */
        .astronaut {
            position: fixed;
            bottom: 10%;
            left: 5%;
            width: 80px;
            height: 80px;
            animation: floatAstro 4s ease-in-out infinite;
            z-index: 1;
        }
        
        @keyframes floatAstro {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
        }
        
        /* Compteur d'étoiles */
        .star-counter {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(5px);
            border-radius: 20px;
            padding: 8px 15px;
            color: #ffd700;
            font-size: 14px;
            z-index: 2;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .error-code {
                font-size: 80px;
            }
            .error-title {
                font-size: 22px;
            }
            .planet-svg {
                width: 150px;
                height: 150px;
            }
            .ring {
                width: 180px;
                height: 180px;
            }
            .astronaut {
                width: 50px;
                height: 50px;
                bottom: 5%;
            }
            .spaceship {
                width: 40px;
                height: 40px;
            }
        }
        
        /* Animation de clic */
        .click-effect {
            animation: clickPop 0.3s ease-out;
        }
        
        @keyframes clickPop {
            0% { transform: scale(1); }
            50% { transform: scale(0.95); }
            100% { transform: scale(1); }
        }
        
        /* Lien retour */
        .back-link {
            color: rgba(255,255,255,0.6);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .back-link:hover {
            color: #ffd700;
        }
    </style>
</head>
<body>
    
    <!-- Étoiles -->
    <div class="stars" id="stars"></div>
    
    <!-- Météorites -->
    <div id="meteors"></div>
    
    <!-- Astronaute SVG -->
    <div class="astronaut">
        <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="50" cy="45" r="20" fill="white" stroke="#ccc" stroke-width="2"/>
            <circle cx="42" cy="40" r="2" fill="#333"/>
            <circle cx="58" cy="40" r="2" fill="#333"/>
            <path d="M47 48 Q50 52 53 48" stroke="#333" stroke-width="2" fill="none"/>
            <rect x="40" y="65" width="20" height="25" rx="5" fill="white" stroke="#ccc" stroke-width="2"/>
            <rect x="35" y="70" width="8" height="15" rx="3" fill="white" stroke="#ccc" stroke-width="1"/>
            <rect x="57" y="70" width="8" height="15" rx="3" fill="white" stroke="#ccc" stroke-width="1"/>
            <circle cx="50" cy="90" r="5" fill="#ff6b6b"/>
        </svg>
    </div>
    
    <!-- Vaisseau spatial -->
    <div class="spaceship" id="spaceship">
        <svg viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M30 5 L45 25 L40 25 L35 45 L25 45 L20 25 L15 25 L30 5Z" fill="#ff6b6b" stroke="#ffd700" stroke-width="1"/>
            <path d="M30 5 L35 25 L25 25 L30 5Z" fill="#ffd700" opacity="0.5"/>
            <circle cx="30" cy="35" r="4" fill="#ffd700"/>
            <rect x="28" y="45" width="4" height="10" fill="#ff6b6b"/>
            <path d="M20 25 L15 30 L20 28 Z" fill="#ffd700"/>
            <path d="M40 25 L45 30 L40 28 Z" fill="#ffd700"/>
        </svg>
    </div>
    
    <!-- Compteur d'étoiles -->
    <div class="star-counter">
        <i class="bi bi-star-fill"></i> <span id="starCount">0</span> étoiles
    </div>
    
    <!-- Contenu principal -->
    <div class="space-container">
        <div class="card-space">
            
            <!-- Planète SVG animée -->
            <div class="planet-container">
                <svg class="planet-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                    <!-- Cratères -->
                    <circle cx="100" cy="100" r="80" fill="#ff6b6b" stroke="#ffd700" stroke-width="3"/>
                    <circle cx="70" cy="70" r="20" fill="#ee5a24" opacity="0.7"/>
                    <circle cx="130" cy="120" r="15" fill="#ee5a24" opacity="0.7"/>
                    <circle cx="100" cy="140" r="12" fill="#ee5a24" opacity="0.7"/>
                    <circle cx="140" cy="70" r="10" fill="#ee5a24" opacity="0.7"/>
                    <circle cx="60" cy="130" r="8" fill="#ee5a24" opacity="0.7"/>
                    <!-- Lueur -->
                    <circle cx="100" cy="100" r="80" fill="none" stroke="#ffd700" stroke-width="1" opacity="0.3">
                        <animate attributeName="r" values="80;85;80" dur="3s" repeatCount="indefinite"/>
                        <animate attributeName="opacity" values="0.3;0.1;0.3" dur="3s" repeatCount="indefinite"/>
                    </circle>
                </svg>
                <div class="ring"></div>
            </div>
            
            <!-- Code erreur -->
            <div class="error-code">404</div>
            
            <!-- Message -->
            <h2 class="error-title">
                <i class="bi bi-rocket-takeoff-fill"></i> Planète introuvable !
            </h2>
            <p class="error-text">
                Oups ! La page que vous cherchez semble avoir décollé vers une autre galaxie.<br>
                Peut-être êtes-vous perdu dans l'espace ?
            </p>
            
            <!-- Boutons -->
            <div class="d-flex flex-wrap justify-content-center gap-3 mt-2">
                <a href="#" class="btn-space" id="backHome">
                    <i class="bi bi-house-fill"></i> Retour à la Terre
                </a>
                <a href="#" class="btn-outline-space" id="exploreBtn">
                    <i class="bi bi-compass-fill"></i> Explorer
                </a>
            </div>
            
            <div class="mt-4">
                <a href="#" class="back-link" id="randomPlanet">
                    <i class="bi bi-globe"></i> Explorer une autre planète ?
                </a>
            </div>
        </div>
    </div>
    
    <script>
        // Générer des étoiles
        function generateStars() {
            const starsContainer = document.getElementById('stars');
            const starCount = 200;
            
            for (let i = 0; i < starCount; i++) {
                const star = document.createElement('div');
                star.className = 'star';
                
                // Position aléatoire
                star.style.left = Math.random() * 100 + '%';
                star.style.top = Math.random() * 100 + '%';
                
                // Taille aléatoire
                const size = Math.random() * 3 + 1;
                star.style.width = size + 'px';
                star.style.height = size + 'px';
                
                // Animation aléatoire
                const duration = Math.random() * 3 + 1;
                star.style.animationDuration = duration + 's';
                star.style.animationDelay = Math.random() * 5 + 's';
                
                starsContainer.appendChild(star);
            }
            
            // Mettre à jour le compteur
            document.getElementById('starCount').textContent = starCount;
        }
        
        // Générer des météorites
        function generateMeteors() {
            const meteorsContainer = document.getElementById('meteors');
            const meteorCount = 5;
            
            for (let i = 0; i < meteorCount; i++) {
                const meteor = document.createElement('div');
                meteor.className = 'meteor';
                
                // Position aléatoire
                meteor.style.left = Math.random() * 100 + '%';
                meteor.style.top = Math.random() * 100 + '%';
                
                // Taille aléatoire
                const width = Math.random() * 50 + 20;
                const height = Math.random() * 2 + 1;
                meteor.style.width = width + 'px';
                meteor.style.height = height + 'px';
                
                // Animation aléatoire
                const duration = Math.random() * 3 + 2;
                meteor.style.animationDuration = duration + 's';
                meteor.style.animationDelay = Math.random() * 5 + 's';
                
                meteorsContainer.appendChild(meteor);
            }
        }
        
        // Effet de clic
        function addClickEffect(element) {
            element.addEventListener('click', function(e) {
                this.classList.add('click-effect');
                setTimeout(() => {
                    this.classList.remove('click-effect');
                }, 300);
            });
        }
        
        // Bouton retour à la terre
        const backHome = document.getElementById('backHome');
        backHome.addEventListener('click', function(e) {
            e.preventDefault();
            // Simuler un retour à l'accueil
            alert('🌍 Retour sur Terre... Redirection vers la page d\'accueil');
            window.location.href = '/';
        });
        
        // Bouton explorer
        const exploreBtn = document.getElementById('exploreBtn');
        exploreBtn.addEventListener('click', function(e) {
            e.preventDefault();
            alert('🚀 Lancement de l\'exploration spatiale...');
            // Animation du vaisseau
            const spaceship = document.getElementById('spaceship');
            spaceship.style.animation = 'fly 0.5s ease-out';
            setTimeout(() => {
                spaceship.style.animation = 'fly 8s linear infinite';
            }, 500);
        });
        
        // Planète aléatoire
        const randomPlanet = document.getElementById('randomPlanet');
        randomPlanet.addEventListener('click', function(e) {
            e.preventDefault();
            const planets = ['Mars', 'Jupiter', 'Saturne', 'Neptune', 'Uranus', 'Vénus', 'Mercure'];
            const randomPlanet = planets[Math.floor(Math.random() * planets.length)];
            alert(`🪐 Redirection vers ${randomPlanet}... (Page en construction)`);
        });
        
        // Vaisseau cliquable
        const spaceship = document.getElementById('spaceship');
        spaceship.addEventListener('click', function() {
            this.style.animation = 'none';
            setTimeout(() => {
                this.style.animation = 'fly 8s linear infinite';
            }, 100);
            
            // Effet sonore visuel
            const planets = document.querySelector('.planet-svg');
            planets.style.transform = 'scale(1.1)';
            setTimeout(() => {
                planets.style.transform = 'scale(1)';
            }, 300);
            
            alert('🛸 Vaisseau prêt pour le décollage !');
        });
        
        // Planète cliquable
        const planet = document.querySelector('.planet-svg');
        planet.addEventListener('click', function() {
            this.style.animation = 'none';
            setTimeout(() => {
                this.style.animation = 'rotate 20s linear infinite';
            }, 100);
            
            // Changement de couleur temporaire
            const craters = document.querySelectorAll('.planet-svg circle');
            craters.forEach(crater => {
                if (crater.getAttribute('fill') === '#ff6b6b') {
                    crater.setAttribute('fill', '#ffd700');
                    setTimeout(() => {
                        crater.setAttribute('fill', '#ff6b6b');
                    }, 500);
                }
            });
        });
        
        // Ajouter les effets de clic à tous les boutons
        addClickEffect(backHome);
        addClickEffect(exploreBtn);
        addClickEffect(randomPlanet);
        addClickEffect(spaceship);
        
        // Animation au chargement
        window.addEventListener('load', () => {
            generateStars();
            generateMeteors();
            
            // Message de bienvenue
            setTimeout(() => {
                console.log('🚀 Bienvenue dans l\'espace ! La page 404 est prête.');
            }, 1000);
        });
        
        // Effet de parallaxe au mouvement de la souris
        document.addEventListener('mousemove', (e) => {
            const stars = document.querySelectorAll('.star');
            const mouseX = e.clientX / window.innerWidth;
            const mouseY = e.clientY / window.innerHeight;
            
            stars.forEach((star, index) => {
                const speed = 0.02;
                const x = (mouseX - 0.5) * speed * index;
                const y = (mouseY - 0.5) * speed * index;
                star.style.transform = `translate(${x}px, ${y}px)`;
            });
        });
        
        // Animation de l'astronaute
        let astronautAngle = 0;
        setInterval(() => {
            const astronaut = document.querySelector('.astronaut');
            if (astronaut) {
                astronautAngle = (astronautAngle + 5) % 360;
                const yOffset = Math.sin(astronautAngle * Math.PI / 180) * 10;
                astronaut.style.transform = `translateY(${yOffset}px)`;
            }
        }, 100);
    </script>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur
📌 Voir aussi

🏷️ Explorer par mot clé
