Erros 404 HTML CSS em francês

348 Skyrreum

Abrir no Editor Video Publique Seu Código

Recomendado

28 June 2025

Modelo HTML de página de erro 404

19 March 2025

Design de site usando HTML e CSS

9 December 2024

Efeito de animação de hover em HTML, CSS e Javascript

HTML

<!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>

Recomendado

Modelo HTML de página de erro 404

Design de site usando HTML e CSS

Efeito de animação de hover em HTML, CSS e Javascript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS