Bootstrap 5
404 Page
Error Page
Template
Ui Design
Responsive
Template de page d'erreur 404 avec illustration animée, recherche intégrée et liens vers les pages populaires. Design responsive et élégant pour tous types de sites.
<!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 20260421100 | 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: radial-gradient(ellipse at center, #0a0f2a 0%, #050714 100%);
min-height: 100vh;
overflow-x: hidden;
font-family: 'Segoe UI', 'Poppins', system-ui, sans-serif;
}
/* Animation du fond cosmique */
.cosmic-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.nebula {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 40%, rgba(88, 28, 135, 0.3) 0%, transparent 50%),
radial-gradient(circle at 70% 60%, rgba(59, 130, 246, 0.2) 0%, transparent 50%),
radial-gradient(circle at 50% 80%, rgba(236, 72, 153, 0.15) 0%, transparent 50%);
animation: nebulaPulse 8s ease-in-out infinite;
}
@keyframes nebulaPulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 1; transform: scale(1.05); }
}
/* Étoiles filantes */
.shooting-star {
position: absolute;
width: 2px;
height: 2px;
background: linear-gradient(90deg, white, transparent);
border-radius: 50%;
animation: shooting 4s linear infinite;
}
@keyframes shooting {
0% {
transform: translateX(0) translateY(0);
opacity: 1;
}
100% {
transform: translateX(-300px) translateY(300px);
opacity: 0;
}
}
/* Contenu principal - sans card */
.main-wrapper {
position: relative;
z-index: 1;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
}
/* SVG Planète géante */
.giant-planet {
position: relative;
width: 280px;
height: 280px;
margin-bottom: 30px;
}
.planet-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
}
/* 404 texte géant */
.giant-404 {
font-size: 180px;
font-weight: 900;
background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientShift 4s ease infinite, textFloat 3s ease-in-out infinite;
letter-spacing: 20px;
text-shadow: 0 0 50px rgba(255,107,107,0.3);
line-height: 1;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes textFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
}
/* Message d'erreur */
.cosmic-message {
text-align: center;
margin: 20px 0;
}
.cosmic-title {
font-size: 28px;
font-weight: 600;
color: white;
margin-bottom: 15px;
letter-spacing: 2px;
}
.cosmic-subtitle {
font-size: 18px;
color: rgba(255,255,255,0.7);
max-width: 500px;
margin: 0 auto;
}
/* Orbite de boutons */
.button-orbit {
display: flex;
gap: 25px;
justify-content: center;
flex-wrap: wrap;
margin: 40px 0 30px;
position: relative;
}
.btn-cosmic {
background: transparent;
border: 2px solid rgba(255,255,255,0.3);
padding: 14px 35px;
border-radius: 60px;
font-weight: 600;
font-size: 16px;
color: white;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
backdrop-filter: blur(5px);
}
.btn-cosmic::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s ease;
}
.btn-cosmic:hover::before {
left: 100%;
}
.btn-cosmic:hover {
border-color: #ff6b6b;
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(255,107,107,0.3);
}
.btn-primary-cosmic {
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
border: none;
box-shadow: 0 5px 20px rgba(255,107,107,0.4);
}
.btn-primary-cosmic:hover {
box-shadow: 0 10px 30px rgba(255,107,107,0.6);
transform: translateY(-3px);
}
/* Planètes décoratives flottantes */
.floating-planet {
position: fixed;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
backdrop-filter: blur(2px);
z-index: 0;
pointer-events: none;
}
.planet-1 {
width: 150px;
height: 150px;
top: 10%;
left: -50px;
animation: floatPlanet 25s linear infinite;
}
.planet-2 {
width: 80px;
height: 80px;
bottom: 15%;
right: 5%;
animation: floatPlanet 18s linear infinite reverse;
}
.planet-3 {
width: 200px;
height: 200px;
top: 50%;
right: -80px;
animation: floatPlanet 30s linear infinite;
}
@keyframes floatPlanet {
from { transform: rotate(0deg) translateX(0); }
to { transform: rotate(360deg) translateX(0); }
}
/* Lune orbitante autour du texte */
.moon-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 350px;
height: 350px;
transform: translate(-50%, -50%);
pointer-events: none;
}
.moon {
position: absolute;
width: 30px;
height: 30px;
background: radial-gradient(circle at 35% 35%, #ddd, #888);
border-radius: 50%;
box-shadow: 0 0 20px rgba(255,255,200,0.5);
animation: orbit 8s linear infinite;
}
@keyframes orbit {
from { transform: rotate(0deg) translateX(170px) rotate(0deg); }
to { transform: rotate(360deg) translateX(170px) rotate(-360deg); }
}
/* Compteur d'étoiles interactif */
.star-counter {
position: fixed;
bottom: 20px;
left: 20px;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(5px);
border-radius: 30px;
padding: 8px 18px;
color: #ffd700;
font-size: 14px;
z-index: 2;
border: 1px solid rgba(255,215,0,0.3);
}
/* Vaisseau interactif */
.interactive-ship {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
cursor: pointer;
z-index: 2;
transition: all 0.3s ease;
}
.interactive-ship:hover {
transform: scale(1.2);
}
/* Particules de poussière d'étoiles */
.stardust {
position: fixed;
width: 3px;
height: 3px;
background: #ffd700;
border-radius: 50%;
opacity: 0;
pointer-events: none;
z-index: 3;
}
/* Liens supplémentaires */
.extra-links {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
margin-top: 30px;
}
.extra-link {
color: rgba(255,255,255,0.5);
text-decoration: none;
font-size: 14px;
transition: color 0.3s;
display: inline-flex;
align-items: center;
gap: 5px;
}
.extra-link:hover {
color: #ffd700;
}
/* Responsive */
@media (max-width: 768px) {
.giant-404 {
font-size: 100px;
letter-spacing: 10px;
}
.giant-planet {
width: 180px;
height: 180px;
}
.cosmic-title {
font-size: 22px;
}
.cosmic-subtitle {
font-size: 14px;
padding: 0 20px;
}
.btn-cosmic {
padding: 10px 25px;
font-size: 14px;
}
.moon {
width: 20px;
height: 20px;
}
.moon-orbit {
width: 250px;
height: 250px;
}
@keyframes orbit {
from { transform: rotate(0deg) translateX(120px) rotate(0deg); }
to { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
}
}
@media (max-width: 480px) {
.giant-404 {
font-size: 70px;
letter-spacing: 5px;
}
.button-orbit {
gap: 15px;
}
.btn-cosmic {
padding: 8px 20px;
font-size: 12px;
}
}
/* Animation d'apparition */
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
.fade-scale {
animation: fadeInScale 0.8s ease-out;
}
</style>
</head>
<body>
<!-- Fond cosmique -->
<div class="cosmic-bg">
<div class="nebula"></div>
</div>
<!-- Planètes décoratives -->
<div class="floating-planet planet-1"></div>
<div class="floating-planet planet-2"></div>
<div class="floating-planet planet-3"></div>
<!-- Compteur d'étoiles -->
<div class="star-counter">
<i class="bi bi-star-fill"></i> <span id="starCount">0</span> étoiles dans la galaxie
</div>
<!-- Vaisseau interactif -->
<div class="interactive-ship" id="spaceshipBtn">
<svg viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25 5 L38 22 L34 22 L30 38 L20 38 L16 22 L12 22 L25 5Z" fill="#ff6b6b" stroke="#ffd700" stroke-width="1.5"/>
<path d="M25 5 L29 22 L21 22 L25 5Z" fill="#ffd700" opacity="0.6"/>
<circle cx="25" cy="30" r="3" fill="#ffd700"/>
<rect x="23" y="38" width="4" height="8" fill="#ff6b6b"/>
<path d="M16 22 L12 26 L16 24 Z" fill="#ffd700"/>
<path d="M34 22 L38 26 L34 24 Z" fill="#ffd700"/>
</svg>
</div>
<!-- Contenu principal -->
<div class="main-wrapper">
<!-- Planète géante SVG -->
<div class="giant-planet fade-scale">
<svg width="100%" height="100%" viewBox="0 0 280 280" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="planetGrad" cx="35%" cy="35%" r="60%">
<stop offset="0%" stop-color="#ff9f43"/>
<stop offset="50%" stop-color="#ee5a24"/>
<stop offset="100%" stop-color="#b71540"/>
</radialGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="8" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Anneau -->
<ellipse cx="140" cy="140" rx="160" ry="40" fill="none" stroke="rgba(255,215,0,0.3)" stroke-width="8" transform="rotate(-20, 140, 140)">
<animateTransform attributeName="transform" type="rotate" from="-20 140 140" to="340 140 140" dur="12s" repeatCount="indefinite"/>
</ellipse>
<!-- Planète -->
<circle cx="140" cy="140" r="100" fill="url(#planetGrad)" filter="url(#glow)"/>
<!-- Cratères -->
<circle cx="110" cy="110" r="25" fill="#b71540" opacity="0.4"/>
<circle cx="170" cy="160" r="18" fill="#b71540" opacity="0.4"/>
<circle cx="130" cy="190" r="15" fill="#b71540" opacity="0.4"/>
<circle cx="180" cy="100" r="12" fill="#b71540" opacity="0.4"/>
<circle cx="90" cy="160" r="10" fill="#b71540" opacity="0.4"/>
<!-- Lueur -->
<circle cx="140" cy="140" r="100" fill="none" stroke="#ffd700" stroke-width="1" opacity="0.3">
<animate attributeName="r" values="100;108;100" dur="4s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.3;0.1;0.3" dur="4s" repeatCount="indefinite"/>
</circle>
</svg>
</div>
<!-- Orbite avec lune autour du 404 -->
<div class="position-relative" style="margin: 20px 0;">
<div class="moon-orbit">
<div class="moon"></div>
</div>
<div class="giant-404 fade-scale">404</div>
</div>
<!-- Message -->
<div class="cosmic-message fade-scale">
<h1 class="cosmic-title">
<i class="bi bi-saturn"></i> Perdu dans l'infini ?
</h1>
<p class="cosmic-subtitle">
La page que vous cherchez a été aspirée par un trou noir cosmique.<br>
Mais ne paniquez pas, nous avons des fusées pour vous ramener !
</p>
</div>
<!-- Boutons -->
<div class="button-orbit fade-scale">
<a href="#" class="btn-cosmic btn-primary-cosmic" id="homeBtn">
<i class="bi bi-house-door-fill"></i> Retour à la base
</a>
<a href="#" class="btn-cosmic" id="exploreBtn">
<i class="bi bi-compass-fill"></i> Explorer la galaxie
</a>
<a href="#" class="btn-cosmic" id="helpBtn">
<i class="bi bi-question-circle-fill"></i> Signaler un trou noir
</a>
</div>
<!-- Liens supplémentaires -->
<div class="extra-links fade-scale">
<a href="#" class="extra-link" id="randomStar">
<i class="bi bi-star"></i> Étoile aléatoire
</a>
<a href="#" class="extra-link" id="contactHelp">
<i class="bi bi-envelope"></i> Contacter le centre spatial
</a>
<a href="#" class="extra-link" id="blogLink">
<i class="bi bi-newspaper"></i> Journal de bord
</a>
</div>
</div>
<script>
// Générer des étoiles filantes
function createShootingStars() {
const body = document.body;
const starCount = 8;
for (let i = 0; i < starCount; i++) {
const star = document.createElement('div');
star.className = 'shooting-star';
star.style.left = Math.random() * 100 + '%';
star.style.top = Math.random() * 100 + '%';
star.style.animationDelay = Math.random() * 8 + 's';
star.style.animationDuration = (Math.random() * 2 + 2) + 's';
body.appendChild(star);
}
}
// Compter les étoiles visibles
let starCountValue = 0;
function updateStarCount() {
starCountValue++;
document.getElementById('starCount').textContent = starCountValue;
setTimeout(updateStarCount, 5000);
}
// Effet de poussière d'étoiles au clic
function createStardust(e) {
const stardust = document.createElement('div');
stardust.className = 'stardust';
stardust.style.left = e.clientX + 'px';
stardust.style.top = e.clientY + 'px';
stardust.style.animation = 'shooting 1s ease-out forwards';
document.body.appendChild(stardust);
setTimeout(() => {
stardust.remove();
}, 1000);
}
// Messages cosmiques
const cosmicMessages = [
'🚀 Redirection vers la Voie Lactée...',
'🪐 Calcul de la trajectoire...',
'✨ Navigation interstellaire activée',
'🌍 Retour sur Terre dans 3...2...1...',
'🔭 Recherche de la page perdue...',
'💫 Téléportation spatiale en cours'
];
function showCosmicMessage() {
const randomMsg = cosmicMessages[Math.floor(Math.random() * cosmicMessages.length)];
const toast = document.createElement('div');
toast.style.position = 'fixed';
toast.style.bottom = '100px';
toast.style.right = '30px';
toast.style.background = 'rgba(0,0,0,0.7)';
toast.style.backdropFilter = 'blur(10px)';
toast.style.color = '#ffd700';
toast.style.padding = '12px 24px';
toast.style.borderRadius = '50px';
toast.style.border = '1px solid rgba(255,215,0,0.3)';
toast.style.zIndex = '1000';
toast.style.fontSize = '14px';
toast.style.animation = 'fadeInScale 0.3s ease-out';
toast.innerHTML = '<i class="bi bi-rocket-takeoff-fill"></i> ' + randomMsg;
document.body.appendChild(toast);
setTimeout(() => {
toast.style.opacity = '0';
setTimeout(() => toast.remove(), 500);
}, 2500);
}
// Bouton retour à la base
document.getElementById('homeBtn').addEventListener('click', (e) => {
e.preventDefault();
showCosmicMessage();
setTimeout(() => {
alert('🌍 Redirection vers la page d\'accueil...');
window.location.href = '/';
}, 1000);
});
// Bouton explorer
document.getElementById('exploreBtn').addEventListener('click', (e) => {
e.preventDefault();
showCosmicMessage();
const ship = document.getElementById('spaceshipBtn');
ship.style.transform = 'scale(1.5)';
setTimeout(() => {
ship.style.transform = 'scale(1)';
}, 500);
});
// Bouton aide
document.getElementById('helpBtn').addEventListener('click', (e) => {
e.preventDefault();
alert('🛸 Un signal a été envoyé à la NASA. En attendant, essayez de revenir à l\'accueil !');
});
// Étoile aléatoire
document.getElementById('randomStar').addEventListener('click', (e) => {
e.preventDefault();
const stars = ['⭐', '🌟', '✨', '💫', '⭐', '🌟'];
const randomStar = stars[Math.floor(Math.random() * stars.length)];
alert(`${randomStar} Vous avez trouvé une étoile filante ! Faites un vœu !`);
});
// Contact
document.getElementById('contactHelp').addEventListener('click', (e) => {
e.preventDefault();
alert('📡 Signal envoyé. Notre équipe cosmique vous répondra sous 24h (heure terrestre).');
});
// Blog
document.getElementById('blogLink').addEventListener('click', (e) => {
e.preventDefault();
alert('📖 Journal de bord : "Aujourd\'hui, nous avons perdu une page dans l\'espace..."');
});
// Vaisseau interactif
document.getElementById('spaceshipBtn').addEventListener('click', () => {
showCosmicMessage();
const planet = document.querySelector('.giant-planet svg circle');
planet.style.transform = 'scale(1.05)';
setTimeout(() => {
planet.style.transform = 'scale(1)';
}, 300);
});
// Clic sur la planète
document.querySelector('.giant-planet').addEventListener('click', (e) => {
e.stopPropagation();
const planets = ['Mars', 'Jupiter', 'Saturne', 'Neptune', 'Uranus'];
const randomPlanet = planets[Math.floor(Math.random() * planets.length)];
alert(`🪐 Vous avez atterri sur ${randomPlanet} ! Mais ce n'est pas la page que vous cherchez...`);
});
// Effet de poussière sur tout le document
document.addEventListener('click', createStardust);
// Animation de la lune
let moonAngle = 0;
setInterval(() => {
const moon = document.querySelector('.moon');
if (moon) {
moonAngle = (moonAngle + 5) % 360;
const glow = Math.sin(moonAngle * Math.PI / 180) * 0.3 + 0.7;
moon.style.boxShadow = `0 0 ${20 * glow}px rgba(255,255,200,${0.3 + glow * 0.2})`;
}
}, 200);
// Initialisation
createShootingStars();
updateStarCount();
// Message de bienvenue
setTimeout(() => {
console.log('🌌 Bienvenue dans l\'espace 404 ! Utilisez les boutons pour naviguer.');
}, 1000);
</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