404 errors html css en français

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>404 - Page introuvable</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        :root {
            --rouge: #ff5959;
            --dark-bg: #2b1212;
            --light-rouge: #ffa6a6;
            --white: #fff;
        }
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            background: var(--dark-bg);
            color: var(--white);
            font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
            overflow: hidden;
        }
        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;
        }
        .container {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 2rem 1.5rem;
            background: rgba(43, 18, 18, 0.85);
            border-radius: 1.5rem;
            box-shadow: 0 8px 32px 0 rgba(255, 89, 89, 0.25);
            backdrop-filter: blur(6px);
            max-width: 95vw;
        }
        h1 {
            font-size: 7rem;
            margin: 0;
            color: var(--rouge);
            letter-spacing: 0.1em;
            font-weight: 900;
        }
        h2 {
            font-size: 2rem;
            margin: 0.5rem 0 1.5rem 0;
            color: var(--white);
            font-weight: 700;
        }
        p {
            color: var(--light-rouge);
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }
        a {
            display: inline-block;
            padding: 0.75rem 2rem;
            background: linear-gradient(90deg, var(--rouge), var(--light-rouge));
            color: var(--dark-bg);
            border-radius: 2rem;
            text-decoration: none;
            font-weight: bold;
            font-size: 1rem;
            transition: background 0.2s;
            box-shadow: 0 2px 16px 0 rgba(255, 89, 89, 0.15);
        }
        a:hover {
            background: linear-gradient(90deg, var(--light-rouge), var(--rouge));
            color: var(--white);
        }
        #bg {
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            z-index: 0;
            pointer-events: none;
        }
        @media (max-width: 600px) {
            h1 { font-size: 4rem; }
            h2 { font-size: 1.2rem; }
            .container { padding: 1.2rem 0.5rem; }
            p { font-size: 1rem; }
        }
    </style>
</head>
<body>
    <canvas id="bg"></canvas>
    <div class="container">
        <h1>404</h1>
        <h2>Page introuvable !</h2>
        <p>Oups ! La page que vous recherchez n'existe pas ou a été déplacée..</p>
        <a href="/">Back to Home</a>
    </div>
    <script>
        // Dynamic animated background: moving rouge particles, mobile friendly
        const canvas = document.getElementById('bg');
        const ctx = canvas.getContext('2d');
        let dpr = window.devicePixelRatio || 1;
        let w = window.innerWidth, h = window.innerHeight;

function resize() {
            dpr = window.devicePixelRatio || 1;
            w = window.innerWidth;
            h = window.innerHeight;
            canvas.width = w * dpr;
            canvas.height = h * dpr;
            canvas.style.width = w + "px";
            canvas.style.height = h + "px";
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.scale(dpr, dpr);
        }
        window.addEventListener('resize', resize);
        resize();

const particles = [];
        const colors = ['#ff5959', '#ffa6a6', '#F05A5A', '#EA2E2E'];
        const numParticles = 60;

for (let i = 0; i < numParticles; i++) {
            particles.push({
                x: Math.random() * w,
                y: Math.random() * h,
                r: 1.5 + Math.random() * 3.5,
                dx: -1 + Math.random() * 2,
                dy: -1 + Math.random() * 2,
                color: colors[Math.floor(Math.random() * colors.length)],
                alpha: 0.3 + Math.random() * 0.5
            });
        }

function draw() {
            ctx.clearRect(0, 0, w, h);
            for (let p of particles) {
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI);
                ctx.fillStyle = p.color;
                ctx.globalAlpha = p.alpha;
                ctx.shadowColor = p.color;
                ctx.shadowBlur = 16;
                ctx.fill();
                ctx.globalAlpha = 1;
                ctx.shadowBlur = 0;
                // Move
                p.x += p.dx;
                p.y += p.dy;
                // Bounce off edges
                if (p.x < 0 || p.x > w) p.dx *= -1;
                if (p.y < 0 || p.y > h) p.dy *= -1;
            }
            requestAnimationFrame(draw);
        }
        draw();
    </script>
</body>
</html>

404 errors html css en français

Recommended

CSS Loading Icon Spinner

HTML Login Form Code

CSS Dropdown Menu

HTML

CSS

JS

Recommended

CSS Loading Icon Spinner

HTML Login Form Code

CSS Dropdown Menu

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS